/* ════════════════════════════════════════════════════════
   DESIGN TOKENS
════════════════════════════════════════════════════════ */
:root,
[data-theme="candy"] {
    --bg: #FFF0F8;
    --bg2: #FFD6EC;
    --surf: #FFFFFF;
    --field: #FFF5FB;
    --text: #2D1B4E;
    --muted: #9166C0;
    --brd: #D63384;
    --r: 16px;
    --r-lg: 22px;
    --r-pill: 50px;
    --sh: 0 5px 0 #BD2E73;
    /* збільшено */
    --shl: 0 8px 0 #BD2E73;
    /* збільшено */
    --c1: #FF3CAC;
    --c2: #784BA0;
    --c3: #2B86C5;

    --score-bg: linear-gradient(140deg, #FF3CAC, #FF6BD6);
    --timer-bg: linear-gradient(140deg, #6C3FC5, #9B5CF6);
    --streak-bg: linear-gradient(140deg, #F97316, #FBBF24);
    --start-bg: linear-gradient(140deg, #FF3CAC, #FF6BD6);
    --stop-bg: linear-gradient(140deg, #6C3FC5, #9B5CF6);
    --sel-bg: linear-gradient(140deg, #FF3CAC, #FF6BD6);
    --sel-sh: 0 4px 0 rgba(0, 0, 0, .2);

    --kb-bg: #F3E8FF;
    --kb-key: #FFFFFF;
    --kb-kbrd: #CFA8E0;
    --kb-ksh: #BA8FCC;
    --kb-spec-bg: #EDD9F8;
    --kb-spec-brd: #C49DDC;
    --kb-act-bg: #FFE500;
    --kb-act-brd: #F59E0B;
    --kb-act-sh: #D97706;

    --lc0: #FF3CAC;
    --lt0: #fff;
    --lc1: #7C3AED;
    --lt1: #fff;
    --lc2: #2563EB;
    --lt2: #fff;
    --lc3: #EA580C;
    --lt3: #fff;
    --lc4: #059669;
    --lt4: #fff;
}

[data-theme="ocean"] {
    --bg: #E0F7FF;
    --bg2: #B3ECFF;
    --surf: #fff;
    --field: #F0FBFF;
    --text: #0A2540;
    --muted: #2D6A8C;
    --brd: #0097C7;
    --r: 16px;
    --r-lg: 22px;
    --r-pill: 50px;
    --sh: 0 5px 0 #0077A0;
    --shl: 0 8px 0 #0077A0;
    --c1: #00B4D8;
    --c2: #0077B6;
    --c3: #00C897;
    --score-bg: linear-gradient(140deg, #00B4D8, #48CAE4);
    --timer-bg: linear-gradient(140deg, #0077B6, #0096C7);
    --streak-bg: linear-gradient(140deg, #00C897, #38EF7D);
    --start-bg: linear-gradient(140deg, #00B4D8, #48CAE4);
    --stop-bg: linear-gradient(140deg, #0077B6, #0096C7);
    --sel-bg: linear-gradient(140deg, #00B4D8, #48CAE4);
    --sel-sh: 0 4px 0 rgba(0, 0, 0, .2);
    --kb-bg: #CCF0FF;
    --kb-key: #fff;
    --kb-kbrd: #7DD3EF;
    --kb-ksh: #5BBFD9;
    --kb-spec-bg: #B8E8F8;
    --kb-spec-brd: #5BBFD9;
    --kb-act-bg: #FFE500;
    --kb-act-brd: #F59E0B;
    --kb-act-sh: #D97706;
    --lc0: #00B4D8;
    --lt0: #fff;
    --lc1: #0077B6;
    --lt1: #fff;
    --lc2: #00C897;
    --lt2: #fff;
    --lc3: #F97316;
    --lt3: #fff;
    --lc4: #7C3AED;
    --lt4: #fff;
}

[data-theme="forest"] {
    --bg: #E8F5E9;
    --bg2: #C8E6C9;
    --surf: #fff;
    --field: #F1F8F2;
    --text: #1B3A2D;
    --muted: #4A7C59;
    --brd: #2E7D32;
    --r: 16px;
    --r-lg: 22px;
    --r-pill: 50px;
    --sh: 0 5px 0 #1B5E20;
    --shl: 0 8px 0 #1B5E20;
    --c1: #43A047;
    --c2: #1B5E20;
    --c3: #F57C00;
    --score-bg: linear-gradient(140deg, #43A047, #66BB6A);
    --timer-bg: linear-gradient(140deg, #1B5E20, #2E7D32);
    --streak-bg: linear-gradient(140deg, #F57C00, #FFB300);
    --start-bg: linear-gradient(140deg, #43A047, #66BB6A);
    --stop-bg: linear-gradient(140deg, #F57C00, #FFB300);
    --sel-bg: linear-gradient(140deg, #43A047, #66BB6A);
    --sel-sh: 0 4px 0 rgba(0, 0, 0, .2);
    --kb-bg: #DCEDC8;
    --kb-key: #fff;
    --kb-kbrd: #AED581;
    --kb-ksh: #8BC34A;
    --kb-spec-bg: #C8E6A0;
    --kb-spec-brd: #8BC34A;
    --kb-act-bg: #FFE500;
    --kb-act-brd: #F59E0B;
    --kb-act-sh: #D97706;
    --lc0: #43A047;
    --lt0: #fff;
    --lc1: #1B5E20;
    --lt1: #fff;
    --lc2: #F57C00;
    --lt2: #fff;
    --lc3: #00BCD4;
    --lt3: #fff;
    --lc4: #9C27B0;
    --lt4: #fff;
}

[data-theme="sunset"] {
    --bg: #FFF3E0;
    --bg2: #FFE0B2;
    --surf: #fff;
    --field: #FFFBF6;
    --text: #3E1C00;
    --muted: #8D4E00;
    --brd: #E65100;
    --r: 16px;
    --r-lg: 22px;
    --r-pill: 50px;
    --sh: 0 5px 0 #BF360C;
    --shl: 0 8px 0 #BF360C;
    --c1: #FF6D00;
    --c2: #E91E63;
    --c3: #FFC107;
    --score-bg: linear-gradient(140deg, #FF6D00, #FF8F00);
    --timer-bg: linear-gradient(140deg, #E91E63, #F06292);
    --streak-bg: linear-gradient(140deg, #FFC107, #FFD54F);
    --start-bg: linear-gradient(140deg, #FF6D00, #FF8F00);
    --stop-bg: linear-gradient(140deg, #E91E63, #F06292);
    --sel-bg: linear-gradient(140deg, #FF6D00, #FF8F00);
    --sel-sh: 0 4px 0 rgba(0, 0, 0, .2);
    --kb-bg: #FFE0B2;
    --kb-key: #fff;
    --kb-kbrd: #FFCA80;
    --kb-ksh: #FFA726;
    --kb-spec-bg: #FFCC80;
    --kb-spec-brd: #FFA726;
    --kb-act-bg: #FFE500;
    --kb-act-brd: #F59E0B;
    --kb-act-sh: #D97706;
    --lc0: #FF6D00;
    --lt0: #fff;
    --lc1: #E91E63;
    --lt1: #fff;
    --lc2: #7B1FA2;
    --lt2: #fff;
    --lc3: #00897B;
    --lt3: #fff;
    --lc4: #1976D2;
    --lt4: #fff;
}

/* ════════════════════════════════════════════════════════
   BASE
════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

body {
    font-family: 'Nunito', Arial, sans-serif;
    background: var(--bg);
    background-image:
        radial-gradient(ellipse at 15% 20%, var(--bg2) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 80%, var(--bg2) 0%, transparent 50%);
    min-height: 100vh;
    padding: 10px 10px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--text);
}

/* ════════════════════════════════════════════════════════
   HEADER
════════════════════════════════════════════════════════ */
.hdr {
    width: 100%;
    max-width: 700px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    gap: 8px;
}

h1 {
    font-size: clamp(1.05em, 3vw, 1.4em);
    font-weight: 900;
    white-space: nowrap;
}

.hdr-ico {
    color: var(--c1);
    margin-right: 7px;
}

.hdr-ctrl {
    display: flex;
    gap: 7px;
    flex-shrink: 0;
}

.ibtn {
    min-width: 46px;
    height: 46px;
    padding: 0 10px;
    border: 3px solid var(--brd);
    /* товстіша межа */
    box-shadow: var(--sh);
    border-radius: calc(var(--r) + 2px);
    /* трохи більше заокруглення */
    background: var(--surf);
    color: var(--text);
    font-family: inherit;
    font-size: .88em;
    font-weight: 900;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: transform .12s, box-shadow .12s;
}

.ibtn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shl);
}

.ibtn:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 var(--brd);
}

.ibtn.ua {
    background: #0057B7;
    color: #FFD700;
    border-color: #003A8C;
}

.ibtn.en {
    background: #B22234;
    color: #fff;
    border-color: #7A0019;
}

/* ════════════════════════════════════════════════════════
   GAME CARD
════════════════════════════════════════════════════════ */
#gc {
    width: 100%;
    max-width: 700px;
    background: var(--surf);
    border: 3px solid var(--brd);
    box-shadow: var(--shl);
    border-radius: calc(var(--r-lg) + 2px);
    padding: 13px 13px 15px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

/* ════════════════════════════════════════════════════════
   STATS CARDS
════════════════════════════════════════════════════════ */
#ip {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.ic {
    border-radius: var(--r);
    overflow: hidden;
    display: flex;
    align-items: stretch;
    color: #fff;
}

#score {
    background: var(--score-bg);
}

#timer {
    background: var(--timer-bg);
}

#streak {
    background: var(--streak-bg);
}

.ic-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    flex-shrink: 0;
    background: rgba(0, 0, 0, .12);
    font-size: 1.15em;
}

.ic-body {
    flex: 1;
    padding: 7px 8px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ic-val {
    font-size: clamp(1.35em, 3vw, 1.65em);
    font-weight: 900;
    line-height: 1;
}

.ic-lbl {
    font-size: .65em;
    font-weight: 700;
    opacity: .9;
    margin-top: 2px;
}

.ic.pop {
    animation: ic-pop .22s ease;
}

@keyframes ic-pop {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.08)
    }

    100% {
        transform: scale(1)
    }
}

#timer.low {
    animation: timer-panic .5s infinite alternate;
}

@keyframes timer-panic {
    from {
        filter: brightness(1)
    }

    to {
        filter: brightness(1.3);
        transform: scale(1.04)
    }
}

/* ════════════════════════════════════════════════════════
   GAME FIELD
════════════════════════════════════════════════════════ */
#gf {
    width: 100%;
    height: 160px;
    border: 3px solid var(--brd);
    border-radius: var(--r);
    background: var(--field);
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05), 0 3px 0 var(--brd);
    transition: height .3s ease;
}

#gf.gf-playing {
    height: 210px;
}

#fb {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.45em;
    font-weight: 900;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s;
    z-index: 10;
    text-align: center;
    white-space: nowrap;
    text-shadow: 2px 2px 0 var(--surf), -1px -1px 0 var(--surf);
    color: var(--text);
}

#fb.vis {
    opacity: 1;
}

#fb.neg {
    color: var(--c1);
}

#fb.neu {
    color: var(--muted);
    font-size: 1.1em;
}

#countdown {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4.5em;
    font-weight: 900;
    color: var(--text);
    background: rgba(255, 255, 255, .88);
    z-index: 20;
    border-radius: calc(var(--r) - 2px);
}

#countdown.pop-anim {
    animation: cdown-pop .5s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes cdown-pop {
    from {
        transform: scale(.3);
        opacity: 0
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

/* ════════════════════════════════════════════════════════
   FLYING LETTERS
════════════════════════════════════════════════════════ */
.lt {
    position: absolute;
    width: 56px;
    height: 56px;
    border: 2px solid var(--brd);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7em;
    font-weight: 900;
    user-select: none;
    box-shadow: 0 3px 0 var(--brd);
    animation: fly var(--ldur, 6000ms) linear forwards;
    will-change: left;
}

.lt.c0 {
    background: var(--lc0);
    color: var(--lt0);
}

.lt.c1 {
    background: var(--lc1);
    color: var(--lt1);
}

.lt.c2 {
    background: var(--lc2);
    color: var(--lt2);
}

.lt.c3 {
    background: var(--lc3);
    color: var(--lt3);
}

.lt.c4 {
    background: var(--lc4);
    color: var(--lt4);
}

@keyframes fly {
    from {
        left: -70px
    }

    to {
        left: calc(100% + 5px)
    }
}

.lt.urgent {
    box-shadow: 0 0 14px 4px rgba(220, 38, 38, .7), 0 3px 0 var(--brd);
    animation: fly var(--ldur) linear forwards,
        urg-pulse .4s ease-in-out infinite alternate;
    animation-fill-mode: forwards, none;
}

@keyframes urg-pulse {
    from {
        transform: scale(1)
    }

    to {
        transform: scale(1.1)
    }
}

/* ════════════════════════════════════════════════════════
   PRE-GAME ZONE
════════════════════════════════════════════════════════ */
#pre-game-zone {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.setting-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.section-label {
    font-size: .72em;
    font-weight: 900;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.section-label i {
    margin-right: 4px;
}

.brow {
    display: flex;
    gap: 7px;
}

/* Selector buttons */
.btn {
    flex: 1;
    border: 3px solid var(--brd);
    box-shadow: var(--sh);
    border-radius: calc(var(--r) + 2px);
    padding: 9px 6px;
    font-family: inherit;
    font-size: clamp(.78em, 1.9vw, .9em);
    font-weight: 900;
    cursor: pointer;
    color: var(--text);
    background: var(--surf);
    transition: transform .12s, box-shadow .12s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shl);
}

.btn:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 var(--brd);
}

.btn:focus-visible {
    outline: 3px solid var(--c3);
    outline-offset: 3px;
}

.btn.sel {
    background: var(--sel-bg);
    color: #fff;
    border-color: transparent;
    box-shadow: var(--sel-sh);
}

.btn.sel:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 0 rgba(0, 0, 0, .2);
}

.btn.sel:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .2);
}

.btn-ico {
    font-size: 1.1em;
    flex-shrink: 0;
}

.start-btn,
.stop-btn {
    border: none;
    border-radius: var(--r-pill);
    color: #fff;
    font-weight: 900;
    font-size: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.start-btn {
    background: var(--start-bg);
    box-shadow: 0 6px 0 rgba(0, 0, 0, .2);
    padding: 14px 20px;
    width: 100%;
}

.start-btn:hover {
    box-shadow: 0 8px 0 rgba(0, 0, 0, .2);
    transform: translateY(-2px);
}

.start-btn:active {
    box-shadow: 0 2px 0 rgba(0, 0, 0, .2);
    transform: translateY(2px);
}

.stop-btn {
    background: var(--stop-bg);
    box-shadow: 0 5px 0 rgba(0, 0, 0, .2);
    padding: 12px 20px;
    width: 100%;
}

.stop-btn:hover {
    box-shadow: 0 7px 0 rgba(0, 0, 0, .2);
    transform: translateY(-2px);
}

.stop-btn:active {
    box-shadow: 0 2px 0 rgba(0, 0, 0, .2);
    transform: translateY(2px);
}

/* ════════════════════════════════════════════════════════
   IN-GAME ZONE
════════════════════════════════════════════════════════ */
#in-game-zone {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ════════════════════════════════════════════════════════
   VIRTUAL KEYBOARD
════════════════════════════════════════════════════════ */
#vkb-wrap {
    background: var(--kb-bg);
    border: 2px solid var(--brd);
    border-radius: var(--r);
    padding: 8px 8px 10px;
}

#vkb-hint {
    text-align: center;
    font-size: .72em;
    font-weight: 800;
    color: var(--muted);
    margin-bottom: 7px;
}

#vkb-hint i {
    margin-right: 5px;
}

#vkb {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.kb-row {
    display: flex;
    gap: 3px;
    justify-content: center;
    align-items: center;
}

.kb-key {
    min-width: clamp(24px, 4.1vw, 36px);
    height: clamp(28px, 4.5vw, 38px);
    padding: 0 2px;
    border-radius: 7px;
    border: 2px solid var(--kb-kbrd);
    background: var(--kb-key);
    color: var(--text);
    font-family: inherit;
    font-size: clamp(.6em, 1.7vw, .85em);
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    box-shadow: 0 2px 0 var(--kb-ksh);
    transition: transform .1s, background .1s, border-color .1s, box-shadow .1s;
    white-space: nowrap;
}

.kb-spec {
    background: var(--kb-spec-bg);
    border-color: var(--kb-spec-brd);
    color: var(--muted);
    font-size: clamp(.5em, 1.3vw, .7em);
    font-weight: 900;
    letter-spacing: -.01em;
}

.kb-caps {
    min-width: clamp(32px, 5.5vw, 48px);
}

.kb-enter {
    min-width: clamp(36px, 6.5vw, 56px);
}

.kb-shift {
    min-width: clamp(40px, 7vw, 60px);
}

.kb-bs {
    min-width: clamp(36px, 6.5vw, 56px);
}

.kb-space {
    min-width: clamp(120px, 28vw, 220px);
    border-radius: 10px;
}

.kb-tab {
    min-width: clamp(30px, 5vw, 44px);
}

.kb-key.kb-dim {
    opacity: .18;
}

/* Активне підсвічування */
.kb-key.kb-active {
    background: var(--kb-act-bg) !important;
    border-color: var(--kb-act-brd) !important;
    color: #1a1a1a !important;
    box-shadow: 0 0 0 3px var(--kb-act-brd), 0 5px 0 var(--kb-act-sh) !important;
    transform: translateY(-4px) scale(1.18) !important;
    z-index: 2;
    animation: kb-bounce .3s ease;
}

@keyframes kb-bounce {
    0% {
        transform: translateY(-4px) scale(1.18)
    }

    45% {
        transform: translateY(-8px) scale(1.25)
    }

    75% {
        transform: translateY(-3px) scale(1.14)
    }

    100% {
        transform: translateY(-4px) scale(1.18)
    }
}

/* ════════════════════════════════════════════════════════
   INSTRUCTIONS
════════════════════════════════════════════════════════ */
#ins {
    width: 100%;
    max-width: 700px;
    background: var(--surf);
    border: 3px solid var(--brd);
    box-shadow: var(--sh);
    border-radius: calc(var(--r-lg) + 2px);
    margin-top: 10px;
    overflow: hidden;
}

#ins-toggle {
    width: 100%;
    background: none;
    border: none;
    padding: 12px 15px;
    font-family: inherit;
    font-size: .92em;
    font-weight: 900;
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ins-ico {
    color: var(--c1);
}

.ins-arrow {
    margin-left: auto;
    font-size: .82em;
    color: var(--muted);
    transition: transform .25s;
}

#ins-toggle.open .ins-arrow {
    transform: rotate(180deg);
}

#ins-body {
    padding: 0 15px 14px;
}

#ins-body[hidden] {
    display: none;
}

.ins-steps {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 10px;
}

.ins-step {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .87em;
    font-weight: 700;
    line-height: 1.5;
}

.step-num {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--c1);
    color: #fff;
    font-size: .78em;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.ins-note {
    background: #FFFDE7;
    border: 2px solid #F59E0B;
    border-radius: var(--r);
    padding: 9px 12px;
    font-size: .83em;
    font-weight: 700;
    line-height: 1.5;
    color: #4A3800;
}

.ins-note i {
    color: #F59E0B;
    margin-right: 5px;
}

/* ════════════════════════════════════════════════════════
   EXTRA LINKS
════════════════════════════════════════════════════════ */
#ext {
    width: 100%;
    max-width: 700px;
    margin-top: 10px;
}

.ext-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.ext-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: var(--surf);
    border: 3px solid var(--brd);
    box-shadow: var(--sh);
    border-radius: calc(var(--r) + 2px);
    padding: 11px 8px;
    text-decoration: none;
    color: var(--text);
    font-weight: 800;
    font-size: .83em;
    text-align: center;
    transition: transform .12s, box-shadow .12s;
}

.ext-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shl);
}

.ext-card i {
    font-size: 1.5em;
    color: var(--c1);
}

footer {
    text-align: center;
    margin-top: 14px;
    color: var(--text);
    font-weight: 700;
    font-size: .74em;
    opacity: .4;
}

footer i {
    margin-right: 4px;
}

/* ════════════════════════════════════════════════════════
   MODAL
════════════════════════════════════════════════════════ */
.moverlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 16px;
}

.mbox {
    background: var(--surf);
    border: 3px solid var(--brd);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
    border-radius: calc(var(--r-lg) + 2px);
    padding: 24px 20px;
    max-width: 360px;
    width: 100%;
    text-align: center;
    animation: popin .22s cubic-bezier(.34, 1.56, .64, 1);
}

.modal-ico-wrap {
    margin-bottom: 10px;
}

.modal-ico-wrap i {
    font-size: 2.4em;
    color: var(--c1);
}

.mbox h3 {
    font-size: 1.25em;
    font-weight: 900;
    margin-bottom: 8px;
}

.mbox p {
    font-size: .86em;
    font-weight: 700;
    line-height: 1.6;
    color: var(--muted);
    margin-bottom: 18px;
}

.mactions {
    display: flex;
    gap: 8px;
}

.mactions .start-btn,
.mactions .stop-btn {
    flex: 1;
    padding: 12px 8px;
    font-size: .9em;
}

/* ════════════════════════════════════════════════════════
   GAME OVER
════════════════════════════════════════════════════════ */
#go {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .65);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 900;
    padding: 12px;
    overflow-y: auto;
}

.gopanel {
    background: var(--surf);
    border: 3px solid var(--brd);
    box-shadow: 0 16px 50px rgba(0, 0, 0, .35);
    border-radius: calc(var(--r-lg) + 2px);
    max-width: 450px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    margin: auto;
    position: relative;
    animation: popin .28s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes popin {
    from {
        transform: scale(.65);
        opacity: 0
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

.go-accent-bar {
    height: 5px;
    background: linear-gradient(90deg, var(--c1), var(--c3), var(--c2));
    border-radius: calc(var(--r-lg) + 2px) calc(var(--r-lg) + 2px) 0 0;
}

.gohdr,
.sgrid,
.best-banner,
.gsec,
.garow {
    padding-left: 18px;
    padding-right: 18px;
}

.gohdr {
    text-align: center;
    padding-top: 16px;
    padding-bottom: 12px;
}

.go-trophy-wrap {
    margin-bottom: 6px;
}

#go-trophy-ico {
    font-size: 2.8em;
    color: var(--c1);
    animation: trophy-bounce 1.2s ease-in-out infinite alternate;
}

@keyframes trophy-bounce {
    from {
        transform: translateY(0) rotate(-6deg)
    }

    to {
        transform: translateY(-7px) rotate(6deg)
    }
}

.gohdr h2 {
    font-size: clamp(1.3em, 5vw, 1.7em);
    font-weight: 900;
    margin-bottom: 8px;
}

#goach-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--start-bg);
    color: #fff;
    font-weight: 900;
    font-size: .88em;
    padding: 5px 15px;
    border-radius: var(--r-pill);
}

#goach-badge i {
    font-size: 1em;
}

.sgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
    padding-top: 0;
}

.scard {
    border-radius: var(--r);
    overflow: hidden;
    display: flex;
    align-items: stretch;
    color: #fff;
}

.sc1 {
    background: var(--score-bg);
}

.sc2 {
    background: var(--timer-bg);
}

.sc3 {
    background: var(--streak-bg);
}

.sc4 {
    background: linear-gradient(140deg, #0EA5E9, #22D3EE);
}

.sc-icon-wrap {
    width: 38px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .12);
    font-size: 1.05em;
}

.sc-body {
    flex: 1;
    padding: 9px 8px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.sval {
    font-size: 1.65em;
    font-weight: 900;
    line-height: 1;
}

.go-stars-val {
    font-size: 1.2em;
    line-height: 1.3;
}

.slbl {
    font-size: .64em;
    font-weight: 700;
    opacity: .9;
    margin-top: 2px;
}

.best-banner {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #1a1a1a;
    border-radius: var(--r);
    padding: 10px 14px;
    text-align: center;
    font-size: .9em;
    font-weight: 900;
    margin-bottom: 10px;
}

.best-banner i {
    margin-right: 5px;
}

.gsec {
    margin-bottom: 10px;
}

.gsec-title {
    font-size: .87em;
    font-weight: 900;
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.gsec-title i {
    color: var(--c1);
}

.mrow {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.mchip {
    background: var(--c1);
    color: #fff;
    border-radius: 10px;
    padding: 5px 12px;
    font-size: 1.05em;
    font-weight: 900;
}

.mchip sub {
    font-size: .55em;
    opacity: .8;
}

.tip-box {
    background: #FFFDE7;
    border: 2px solid #F59E0B;
    border-radius: var(--r);
    padding: 10px 12px;
    font-size: .84em;
    font-weight: 700;
    line-height: 1.55;
    color: #4A3800;
}

.tip-box i {
    color: #F59E0B;
    margin-right: 5px;
}

.garow {
    display: flex;
    gap: 8px;
    justify-content: center;
    padding-top: 4px;
    padding-bottom: 16px;
}

.garow .start-btn,
.garow .stop-btn {
    flex: 1;
    padding: 12px 8px;
    font-size: .92em;
}

/* ════════════════════════════════════════════════════════
   STREAK BURST
════════════════════════════════════════════════════════ */
#sburst-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transition: opacity .15s;
}

#sburst-overlay.vis {
    opacity: 1;
}

#sburst {
    font-size: clamp(2em, 7vw, 3.8em);
    font-weight: 900;
    color: var(--text);
    text-shadow: 3px 3px 0 var(--surf), 6px 6px 0 rgba(0, 0, 0, .1);
    animation: burstA 1.1s ease-out forwards;
    text-align: center;
    padding: 0 16px;
}

#sburst i {
    margin: 0 4px;
}

@keyframes burstA {
    0% {
        transform: scale(.2) rotate(-15deg);
        opacity: 0
    }

    40% {
        transform: scale(1.15) rotate(4deg);
        opacity: 1
    }

    100% {
        transform: scale(1.5) rotate(-3deg);
        opacity: 0
    }
}

/* Star particles */
#stars-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 8888;
    overflow: hidden;
}

.star-particle {
    position: absolute;
    pointer-events: none;
    font-size: 1.1em;
    animation: star-fly 1s ease-out forwards;
}

@keyframes star-fly {
    0% {
        transform: translate(0, 0) scale(.7);
        opacity: 1
    }

    100% {
        transform: translate(var(--dx), var(--dy)) scale(0) rotate(var(--rot));
        opacity: 0
    }
}

/* ════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════ */
@media(max-width:480px) {
    .lt {
        width: 50px;
        height: 50px;
        font-size: 1.55em;
    }

    #gf {
        height: 140px;
    }

    #gf.gf-playing {
        height: 185px;
    }

    #settings-grid {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .ext-grid {
        gap: 6px;
    }

    .gopanel {
        max-height: 95vh;
    }
}

@media(max-width:360px) {
    .kb-key {
        min-width: 22px;
        height: 26px;
        font-size: .58em;
    }

    .kb-shift {
        min-width: 36px;
    }

    .kb-space {
        min-width: 100px;
    }

    .ext-grid {
        grid-template-columns: 1fr 1fr;
    }
}