:root{
    --kc-navy:#19243a;
    --kc-purple:#4f329a;
    --kc-purple-2:#6d45c5;
    --kc-pink:#d94f91;
    --kc-pale:#f5f2fb;
    --kc-bg:#f8f7fb;
    --kc-border:#e7e3ef;
    --kc-muted:#747490;
    --kc-green:#10b981;
    --kc-red:#ef4444;
    --kc-orange:#f97316;
}

.kc-page{
    min-height:calc(100vh - 150px);
    padding:32px 0 54px;
    background:
        radial-gradient(circle at 8% 8%,rgba(79,50,154,.10),transparent 26%),
        radial-gradient(circle at 92% 18%,rgba(217,79,145,.08),transparent 25%),
        linear-gradient(180deg,#fbfafd 0%,#f8f7fb 100%);
    color:var(--kc-navy);
}

.kc-container{max-width:1180px}

.kc-shell{
    overflow:hidden;
    border:1px solid var(--kc-border);
    border-radius:28px;
    background:rgba(255,255,255,.96);
    box-shadow:0 22px 65px rgba(25,36,58,.09);
}

.kc-screen{padding:38px}

.kc-setup-grid{
    display:grid;
    grid-template-columns:minmax(0,.9fr) minmax(520px,1.1fr);
    gap:46px;
    align-items:center;
}

.kc-intro{padding:10px 4px 10px 8px}

.kc-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 12px;
    border:1px solid rgba(79,50,154,.13);
    border-radius:999px;
    background:#f8f5fd;
    color:var(--kc-purple);
    font-size:11px;
    font-weight:900;
    letter-spacing:.07em;
}

.kc-intro h1{
    margin:18px 0 12px;
    color:var(--kc-navy);
    font-size:clamp(38px,4.2vw,58px);
    line-height:1.02;
    font-weight:900;
    letter-spacing:-2px;
}

.kc-intro h1 span{
    background:linear-gradient(100deg,var(--kc-purple),var(--kc-pink));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.kc-lead{
    max-width:500px;
    margin:0;
    color:var(--kc-muted);
    font-size:15px;
    line-height:1.7;
}

.kc-game-facts{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:24px;
}

.kc-game-facts>div{
    display:flex;
    align-items:center;
    gap:9px;
    min-width:118px;
    padding:10px 12px;
    border:1px solid var(--kc-border);
    border-radius:14px;
    background:#fff;
}

.kc-game-facts i{
    color:var(--kc-purple);
    font-size:15px;
}

.kc-game-facts span{display:flex;flex-direction:column}
.kc-game-facts b{font-size:12px;line-height:1.2}
.kc-game-facts small{margin-top:2px;color:#9894a8;font-size:10px}

.kc-personal-best{
    display:flex;
    align-items:center;
    gap:12px;
    max-width:350px;
    margin-top:16px;
    padding:12px 14px;
    border:1px solid #eee7d5;
    border-radius:15px;
    background:#fffdf7;
}

.kc-trophy{
    width:40px;
    height:40px;
    flex:none;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:#fff3ce;
    color:#c88a00;
}

.kc-personal-best>div:last-child{
    display:grid;
    grid-template-columns:auto auto;
    column-gap:8px;
    align-items:baseline;
}

.kc-personal-best small{
    grid-column:1/-1;
    color:#9c7a25;
    font-size:9px;
    font-weight:900;
    letter-spacing:.07em;
}

.kc-personal-best strong{font-size:16px;color:var(--kc-navy)}
.kc-personal-best span{font-size:11px;color:#8a8495}

.kc-control-panel{
    padding:24px;
    border:1px solid var(--kc-border);
    border-radius:22px;
    background:#fbfafe;
    box-shadow:inset 0 1px 0 #fff,0 10px 30px rgba(25,36,58,.04);
}

.kc-panel-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    margin-bottom:20px;
}

.kc-panel-head span{
    display:block;
    margin-bottom:2px;
    color:var(--kc-purple);
    font-size:9px;
    font-weight:900;
    letter-spacing:.09em;
}

.kc-panel-head h2{
    margin:0;
    color:var(--kc-navy);
    font-size:21px;
    font-weight:850;
    letter-spacing:-.4px;
}

.kc-panel-icon{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:13px;
    background:linear-gradient(135deg,var(--kc-navy),var(--kc-purple));
    color:#fff;
    box-shadow:0 8px 18px rgba(79,50,154,.18);
}

.kc-option-group{
    margin:0 0 18px;
    padding:0;
    border:0;
}

.kc-option-group legend{
    margin-bottom:8px;
    color:#5f5d72;
    font-size:11px;
    font-weight:850;
}

.kc-choice-grid{display:grid;gap:9px}
.kc-choice-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.kc-choice-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}

.kc-choice{
    position:relative;
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
    min-height:68px;
    margin:0;
    padding:11px;
    overflow:hidden;
    border:1px solid var(--kc-border);
    border-radius:14px;
    background:#fff;
    cursor:pointer;
    transition:.18s ease;
}

.kc-choice:hover{
    border-color:rgba(79,50,154,.3);
    transform:translateY(-1px);
}

.kc-choice input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.kc-choice.active{
    border-color:var(--kc-purple);
    background:#f7f4fd;
    box-shadow:0 0 0 2px rgba(79,50,154,.06);
}

.kc-choice-icon{
    width:34px;
    height:34px;
    flex:none;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:#f1edf9;
    color:var(--kc-purple);
    font-size:13px;
}

.kc-choice-copy{
    min-width:0;
    display:flex;
    flex-direction:column;
}

.kc-choice-copy b{
    color:var(--kc-navy);
    font-size:12px;
    line-height:1.25;
}

.kc-choice-copy small{
    margin-top:2px;
    color:#9692a4;
    font-size:9.5px;
    white-space:nowrap;
}

.kc-check{
    position:absolute;
    top:7px;
    right:7px;
    width:18px;
    height:18px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--kc-purple);
    color:#fff;
    font-size:8px;
    opacity:0;
    transform:scale(.7);
    transition:.18s ease;
}

.kc-choice.active .kc-check{
    opacity:1;
    transform:scale(1);
}

.kc-difficulty-dot{
    width:10px;
    height:10px;
    flex:none;
    border-radius:50%;
    box-shadow:0 0 0 4px rgba(0,0,0,.035);
}

.kc-difficulty-dot.easy{background:#10b981}
.kc-difficulty-dot.medium{background:#f59e0b}
.kc-difficulty-dot.hard{background:#ef4444}

.kc-action-area{
    padding-top:3px;
    text-align:center;
}

.kc-primary{
    border:0;
    border-radius:13px;
    background:linear-gradient(135deg,var(--kc-purple),#6941c6);
    color:#fff!important;
    font-weight:850;
    padding:13px 21px;
    text-decoration:none!important;
    box-shadow:0 9px 20px rgba(79,50,154,.23);
    transition:.2s ease;
}

.kc-primary:hover{
    transform:translateY(-1px);
    box-shadow:0 12px 25px rgba(79,50,154,.28);
}

.kc-primary:disabled{opacity:.6}

.kc-action-btn{
    width:100%;
    min-height:48px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
}

.kc-upgrade{background:linear-gradient(135deg,#d97706,#f59e0b)}

.kc-access-note{
    margin:8px 0 0;
    color:#c2414f;
    font-size:11px;
    font-weight:750;
}

.kc-note{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    margin:11px 0 0;
    color:#9995a7;
    font-size:10px;
}

.kc-game-screen{padding:28px}

.kc-game-top{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:18px;
    margin-bottom:17px;
}

.kc-mini-label{
    color:var(--kc-purple);
    font-size:9px;
    font-weight:900;
    letter-spacing:.1em;
}

.kc-game-top h2{
    margin:2px 0 0;
    color:var(--kc-navy);
    font-size:22px;
    font-weight:850;
    letter-spacing:-.45px;
}

.kc-live-pill{
    display:flex;
    align-items:center;
    gap:7px;
    padding:7px 10px;
    border:1px solid #dcefe8;
    border-radius:999px;
    background:#f2fbf7;
    color:#15835f;
    font-size:9px;
    font-weight:900;
    letter-spacing:.06em;
}

.kc-live-pill span{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#10b981;
    box-shadow:0 0 0 4px rgba(16,185,129,.12);
}

.kc-hud{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:8px;
    margin-bottom:13px;
}

.kc-hud-item{
    min-width:0;
    display:flex;
    align-items:center;
    gap:8px;
    padding:9px 10px;
    border:1px solid var(--kc-border);
    border-radius:12px;
    background:#fff;
}

.kc-hud-icon{
    width:29px;
    height:29px;
    flex:none;
    display:grid;
    place-items:center;
    border-radius:9px;
    background:#f2eef9;
    color:var(--kc-purple);
    font-size:10px;
}

.kc-hud-icon.heart{background:#fff0f3;color:#e54865}

.kc-hud-item>span:last-child{
    min-width:0;
    display:flex;
    flex-direction:column;
}

.kc-hud small{
    overflow:hidden;
    color:#9692a4;
    font-size:7.5px;
    line-height:1.2;
    font-weight:900;
    letter-spacing:.04em;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.kc-hud b{
    margin-top:2px;
    color:var(--kc-navy);
    font-size:14px;
    line-height:1.1;
    font-variant-numeric:tabular-nums;
}

.kc-stage-wrap{
    padding:9px;
    border:1px solid var(--kc-border);
    border-radius:21px;
    background:#fbfafe;
}

.kc-stage-label{
    display:flex;
    justify-content:space-between;
    gap:15px;
    padding:0 5px 8px;
    color:#9894a6;
    font-size:9px;
    font-weight:750;
}

.kc-stage{
    height:min(54vh,520px);
    min-height:350px;
    position:relative;
    overflow:hidden;
    border:1px solid #ddd7ea;
    border-radius:15px;
    background:
        linear-gradient(rgba(79,50,154,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(79,50,154,.035) 1px,transparent 1px),
        linear-gradient(180deg,#fdfcff,#f5f1fb);
    background-size:34px 34px,34px 34px,auto;
    touch-action:manipulation;
}

.kc-ceiling{
    height:4px;
    background:linear-gradient(90deg,var(--kc-purple),var(--kc-pink));
}

.kc-targets{position:absolute;inset:4px 0 47px}

.kc-target{
    position:absolute;
    transform:translateX(-50%);
    padding:7px 15px;
    border:2px solid var(--kc-purple);
    border-radius:999px;
    background:#fff;
    color:var(--kc-navy);
    font-size:clamp(19px,3vw,28px);
    font-weight:900;
    box-shadow:0 7px 17px rgba(79,50,154,.16);
    will-change:transform;
}

.kc-floor{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:47px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:0 14px;
    border-top:1px solid #f3c9ce;
    background:rgba(255,240,242,.96);
    color:#b92f47;
}

.kc-floor span{
    font-size:9px;
    font-weight:900;
    letter-spacing:.08em;
}

.kc-floor small{
    font-size:8px;
    font-weight:800;
    opacity:.72;
}

.kc-paused{
    position:absolute;
    inset:0;
    z-index:20;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:7px;
    background:rgba(25,36,58,.88);
    color:#fff;
    font-weight:850;
    backdrop-filter:blur(5px);
}

.kc-paused i{font-size:25px}
.kc-paused small{font-size:11px;font-weight:600;opacity:.75}

.kc-input-row{
    display:flex;
    gap:9px;
    max-width:650px;
    margin:14px auto 0;
}

.kc-input-wrap{
    position:relative;
    flex:1;
    min-width:0;
}

.kc-input-wrap>i{
    position:absolute;
    left:15px;
    top:50%;
    transform:translateY(-50%);
    color:#aaa5b6;
    font-size:13px;
    pointer-events:none;
}

.kc-input-row input{
    width:100%;
    min-height:48px;
    border:1.5px solid #ddd7e8;
    border-radius:13px;
    padding:10px 15px 10px 42px;
    background:#fff;
    color:var(--kc-navy);
    font-size:17px;
    font-weight:750;
}

.kc-input-row input:focus{
    outline:0;
    border-color:var(--kc-purple);
    box-shadow:0 0 0 4px rgba(79,50,154,.08);
}

.kc-feedback{
    min-height:20px;
    margin:9px 0 0;
    text-align:center;
    color:#858196;
    font-size:11px;
    font-weight:750;
}

.kc-feedback.bad{color:var(--kc-red)}

.kc-result-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    max-width:620px;
    margin:24px auto;
}

.kc-result-grid div{
    border:1px solid var(--kc-border);
    border-radius:14px;
    padding:14px;
    background:#fff;
}

.kc-result-grid small{
    display:block;
    color:#8c899b;
    font-size:10px;
    font-weight:750;
}

.kc-result-grid b{
    font-size:20px;
    color:var(--kc-navy);
}

.destroyed-fire{
    border-color:#f97316;
    background:#ffedd5;
    color:#ea580c;
    box-shadow:0 0 20px #f97316;
    animation:kcFireExplode .4s ease-out forwards;
    pointer-events:none;
}

@keyframes kcFireExplode{
    0%{transform:translate(-50%,var(--kc-y)) scale(1);opacity:1;filter:hue-rotate(0deg)}
    50%{transform:translate(-50%,calc(var(--kc-y) - 20px)) scale(1.3);opacity:.8;filter:hue-rotate(30deg)}
    100%{transform:translate(-50%,calc(var(--kc-y) - 40px)) scale(1.8);opacity:0;filter:hue-rotate(60deg)}
}

.kc-projectile{
    position:absolute;
    left:0;
    top:0;
    width:4px;
    height:24px;
    background:#ea580c;
    border-radius:4px;
    box-shadow:0 0 12px #f97316;
    pointer-events:none;
    z-index:10;
    transform-origin:top center;
}

@media(max-width:991.98px){
    .kc-setup-grid{grid-template-columns:1fr;gap:25px}
    .kc-intro{padding:0;text-align:center}
    .kc-lead{margin-left:auto;margin-right:auto}
    .kc-game-facts{justify-content:center}
    .kc-personal-best{margin-left:auto;margin-right:auto;text-align:left}
    .kc-hud{grid-template-columns:repeat(3,1fr)}
}

@media(max-width:575.98px){
    .kc-page{padding:18px 0 38px}
    .kc-shell{border-radius:20px}
    .kc-screen{padding:23px 14px}
    .kc-intro h1{font-size:38px;letter-spacing:-1.4px}
    .kc-control-panel{padding:16px;border-radius:18px}
    .kc-choice-grid-3{grid-template-columns:1fr}
    .kc-choice-grid-2{grid-template-columns:1fr 1fr}
    .kc-choice{min-height:62px}
    .kc-choice-grid-3 .kc-choice{min-height:55px}
    .kc-game-facts>div{min-width:0;flex:1}
    .kc-game-screen{padding:17px 12px}
    .kc-game-top h2{font-size:18px}
    .kc-live-pill{display:none}
    .kc-hud{grid-template-columns:repeat(3,1fr);gap:6px}
    .kc-hud-item{padding:8px 7px}
    .kc-hud-icon{display:none}
    .kc-hud b{font-size:13px}
    .kc-stage{min-height:330px}
    .kc-stage-label span:last-child{display:none}
    .kc-floor small{display:none}
    .kc-floor{justify-content:center}
    .kc-input-row{gap:7px}
    .kc-input-row .kc-primary{padding:12px 15px}
    .kc-result-grid{grid-template-columns:repeat(2,1fr)}
}