:root {
    --ink: #201c3b;
    --cream: #fff9e9;
    --pink: #ff4f91;
    --yellow: #ffd84a;
    --cyan: #35d9f5;
    --purple: #7d5cff;
    --green: #73e36c;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #171235;
    color: var(--ink);
    font-family: Inter, ui-rounded, "Segoe UI", system-ui, sans-serif;
    touch-action: none;
    user-select: none;
}

button { font: inherit; }

#game-shell, #game-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
}

#game-canvas { display: block; }

.screen {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(22, 17, 51, .34);
    backdrop-filter: blur(6px);
}

.screen.active { display: flex; animation: fade-in .25s ease-out; }
.screen.passthrough { pointer-events: none; background: rgba(22, 17, 51, .15); }

@keyframes fade-in { from { opacity: 0; } }

#loading-screen {
    z-index: 50;
    flex-direction: column;
    gap: 24px;
    color: white;
    background:
        radial-gradient(circle at 35% 30%, rgba(255, 79, 145, .35), transparent 32%),
        radial-gradient(circle at 70% 70%, rgba(53, 217, 245, .25), transparent 35%),
        #171235;
}

.mini-logo { transform: rotate(-2deg); }
.loading-logo span, h1 span { display: block; font-weight: 950; letter-spacing: .08em; }
.loading-logo strong, h1 strong { display: block; color: var(--yellow); font-weight: 1000; letter-spacing: -.04em; text-shadow: 0 7px 0 #e94d76; }
.loading-logo { font-size: clamp(30px, 7vw, 66px); line-height: .8; text-align: center; }

.loader {
    width: min(320px, 75vw);
    height: 16px;
    padding: 3px;
    border-radius: 99px;
    background: rgba(255,255,255,.17);
    box-shadow: inset 0 2px 6px rgba(0,0,0,.25);
}

.loader i {
    display: block;
    width: 8%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--pink), var(--yellow));
    transition: width .3s ease;
}

#loading-copy { margin: 0; opacity: .75; font-weight: 700; }
.loading-enter { width: min(280px, 75vw); }

#title-screen {
    align-items: center;
    justify-content: flex-start;
    padding-left: clamp(24px, 8vw, 120px);
    background: linear-gradient(90deg, rgba(23,18,53,.94) 0%, rgba(23,18,53,.72) 44%, rgba(23,18,53,0) 75%);
    backdrop-filter: none;
}

.title-card { width: min(530px, 92vw); color: white; text-align: center; }
.eyebrow { margin: 0 0 8px; font-weight: 900; letter-spacing: .16em; font-size: 12px; color: var(--cyan); }

h1 {
    margin: 6px 0 12px;
    font-size: clamp(62px, 9vw, 110px);
    line-height: .72;
    transform: rotate(-2deg);
}

h1 strong { color: var(--yellow); text-shadow: 0 8px 0 var(--pink), 0 14px 28px rgba(0,0,0,.3); }
.subtitle { margin: 22px 0 8px; font-size: 18px; font-weight: 750; opacity: .82; }

.player-customizer {
    display: grid;
    grid-template-columns: auto minmax(100px, 1fr) auto;
    align-items: center;
    gap: 9px;
    margin: 8px 0 10px;
    padding: 7px 9px 7px 12px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(53,217,245,.12), rgba(255,79,145,.12));
}

.player-customizer label { color: var(--cyan); font-size: 9px; font-weight: 950; letter-spacing: .12em; }
.player-customizer input {
    min-width: 0;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 8px;
    padding: 6px 9px;
    outline: none;
    color: white;
    background: rgba(17,13,43,.58);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}
.player-customizer input:focus { border-color: var(--yellow); box-shadow: 0 0 0 2px rgba(255,216,74,.14); }
#player-color-options { display: flex; align-items: center; gap: 6px; }
.rgb-wheel {
    position: relative;
    display: block;
    width: 30px;
    height: 30px;
    border: 2px solid white;
    border-radius: 50%;
    background:
        radial-gradient(circle, white 0, rgba(255,255,255,0) 56%, rgba(0,0,0,.28) 100%),
        conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
    cursor: pointer;
    box-shadow: 0 2px 7px rgba(0,0,0,.35);
    overflow: hidden;
}
.player-customizer .rgb-wheel input {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
}
.rgb-wheel i {
    position: absolute;
    inset: 9px;
    border: 2px solid white;
    border-radius: 50%;
    background: var(--selected-color, #35d9f5);
    box-shadow: 0 1px 3px rgba(0,0,0,.55);
}
#player-color-options > span { color: white; font-size: 8px; font-weight: 950; letter-spacing: .08em; }

.victory-pose-picker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 11px;
    padding: 6px 8px 6px 11px;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .1em;
}
.lobby-pose-picker { margin: -3px 0 9px; color: var(--yellow); background: rgba(125,92,255,.14); }
.victory-pose-picker select {
    min-width: 145px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 8px;
    padding: 6px 28px 6px 9px;
    outline: none;
    color: white;
    background: #31265f;
    cursor: pointer;
    font-size: 10px;
    font-weight: 900;
}
.victory-pose-picker select:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(53,217,245,.16); }
.victory-pose-preview {
    border: 1px solid rgba(53,217,245,.65);
    border-radius: 8px;
    padding: 6px 8px;
    color: var(--ink);
    background: var(--cyan);
    cursor: pointer;
    font-size: 8px;
    font-weight: 1000;
    letter-spacing: .05em;
}
.victory-pose-preview:hover { transform: translateY(-1px); filter: brightness(1.08); }
.podium-pose-picker { margin: -15px 0 18px; border-color: rgba(125,92,255,.22); color: var(--purple); background: rgba(125,92,255,.08); }
.podium-pose-picker select { color: white; background: var(--purple); }

.quick-controls {
    margin: 0 0 14px;
    color: rgba(255,255,255,.68);
    font-size: 11px;
    font-weight: 750;
}

.quick-controls b { color: white; font-size: 10px; letter-spacing: .04em; }
.quick-controls i { padding: 0 4px; color: var(--cyan); font-style: normal; }

.game-preview {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    margin: 15px 0;
}

.game-preview button {
    display: flex;
    align-items: center;
    height: 42px;
    gap: 5px;
    padding: 8px 7px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 12px;
    color: white;
    background: rgba(255,255,255,.08);
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
    transition: transform .14s, background .14s, border-color .14s;
}

.game-preview span { white-space: nowrap; }
.game-preview .finger-game span { font-size: 9px; letter-spacing: -.02em; }

.game-preview button:hover { transform: translateY(-2px); border-color: var(--cyan); background: rgba(53,217,245,.16); }
.game-preview button { position: relative; }
.favorite-star {
    position: absolute;
    top: 3px;
    right: 5px;
    color: rgba(255,255,255,.38);
    font-size: 14px;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.favorite-star:hover, .favorite-star.active { color: var(--yellow); transform: scale(1.25); }
.game-preview button.favorite { border-color: rgba(255,216,74,.7); box-shadow: inset 0 0 14px rgba(255,216,74,.08); }
.favorite-play-button {
    width: 100%;
    margin: -9px 0 11px;
    border: 1px solid rgba(255,216,74,.65);
    border-radius: 10px;
    padding: 7px;
    color: var(--yellow);
    background: rgba(255,216,74,.09);
    cursor: pointer;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .08em;
}
.favorite-play-button:hover { color: var(--ink); background: var(--yellow); }
.game-preview .finger-game { grid-column: auto; color: var(--yellow); }
.game-preview b { font-size: 18px; color: var(--yellow); }

.map-select-card { width: min(540px, 92vw); text-align: center; }
.map-select-card h2 { margin-bottom: 8px; }
.map-select-card > p:not(.eyebrow) { margin: 0 0 18px; color: rgba(31,27,60,.68); font-weight: 750; }
.map-select-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.map-select-options button {
    min-height: 76px;
    border: 2px solid rgba(31,27,60,.12);
    border-radius: 15px;
    padding: 12px 10px;
    color: var(--ink);
    background: linear-gradient(135deg, #fff7d0, #f0e9ff);
    cursor: pointer;
    font-weight: 950;
    transition: transform .14s, border-color .14s, box-shadow .14s;
}
.map-select-options button:first-child { grid-column: 1 / -1; color: white; background: linear-gradient(135deg, var(--purple), var(--pink)); }
.map-select-options button:hover { transform: translateY(-2px); border-color: var(--cyan); box-shadow: 0 7px 18px rgba(53,217,245,.2); }
.map-select-options button b, .map-select-options button small { display: block; }
.map-select-options button b { font-size: 13px; letter-spacing: .04em; }
.map-select-options button small { margin-top: 4px; opacity: .65; font-size: 10px; }

.difficulty-picker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: -2px 0 13px;
    padding: 7px 9px 7px 13px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 13px;
    background: rgba(21,17,49,.45);
}

.difficulty-picker > span {
    color: var(--cyan);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .13em;
}

.difficulty-picker > div { display: flex; gap: 5px; }

.difficulty-picker button {
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    padding: 6px 10px;
    color: rgba(255,255,255,.7);
    background: rgba(255,255,255,.07);
    cursor: pointer;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .04em;
}

.difficulty-picker button:hover { color: white; background: rgba(255,255,255,.13); }
.difficulty-picker button.selected { border-color: var(--yellow); color: var(--ink); background: var(--yellow); box-shadow: 0 2px 0 #df7650; }

.primary-button {
    position: relative;
    width: 100%;
    border: 0;
    border-radius: 17px;
    padding: 15px 26px;
    color: var(--ink);
    background: linear-gradient(135deg, var(--yellow), #ffad3f);
    box-shadow: 0 7px 0 #dc5f56, 0 13px 22px rgba(0,0,0,.23);
    cursor: pointer;
    font-weight: 950;
    letter-spacing: .04em;
    transition: transform .15s, filter .15s, box-shadow .15s;
}

.primary-button span, .primary-button small { display: block; }
.primary-button small { margin-top: 2px; font-size: 11px; opacity: .65; letter-spacing: .02em; }
.primary-button:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 9px 0 #dc5f56, 0 16px 25px rgba(0,0,0,.25); }
.primary-button:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 2px 0 #dc5f56; }
.primary-button:disabled { opacity: .45; cursor: wait; }

.secondary-button {
    border: 2px solid rgba(32,28,59,.18);
    border-radius: 17px;
    padding: 14px 20px;
    color: var(--ink);
    background: #e7e1d4;
    cursor: pointer;
    font-weight: 950;
    letter-spacing: .04em;
    transition: transform .15s, background .15s;
}

.secondary-button:hover { transform: translateY(-2px); background: white; }

.text-button {
    border: 0;
    padding: 13px;
    color: white;
    background: none;
    cursor: pointer;
    font-weight: 800;
    opacity: .7;
}

.text-button:hover { opacity: 1; }

.modal-card, .round-card {
    position: relative;
    width: min(540px, 94vw);
    padding: 34px;
    border: 3px solid rgba(255,255,255,.75);
    border-radius: 28px;
    color: var(--ink);
    background: var(--cream);
    box-shadow: 0 18px 0 rgba(31,27,60,.28), 0 30px 70px rgba(0,0,0,.3);
    text-align: center;
}

.modal-card h2, .round-card h2 { margin: 5px 0 10px; font-size: clamp(30px, 6vw, 48px); line-height: 1; }
.modal-card .eyebrow, .round-card .eyebrow { color: var(--purple); }
.close-button { position: absolute; top: 12px; right: 16px; border: 0; background: none; font-size: 30px; cursor: pointer; color: var(--ink); }
.rules-card p:not(.eyebrow) { line-height: 1.55; color: #5a566e; }

.control-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 22px 0;
}

.control-grid div { display: flex; align-items: center; gap: 12px; padding: 11px; border-radius: 12px; background: #efebdf; font-weight: 800; }
kbd { min-width: 74px; padding: 8px 10px; border-radius: 8px; color: white; background: var(--ink); box-shadow: 0 3px 0 #0c0a1a; font: 800 12px ui-monospace, monospace; }

.round-card {
    width: min(620px, 94vw);
    padding: 28px 34px 25px;
    animation: round-pop .45s cubic-bezier(.2, 1.4, .4, 1);
}

@keyframes round-pop { from { transform: scale(.6) rotate(-4deg); opacity: 0; } }
.round-icon { margin-top: -82px; font-size: 72px; filter: drop-shadow(0 8px 0 rgba(35,31,62,.13)); }
.round-card > p:not(.eyebrow) { margin: 0; color: #696478; font-weight: 750; }
#countdown { margin-top: 12px; color: var(--pink); font-size: 64px; line-height: .9; font-weight: 1000; }

#hud {
    position: fixed;
    inset: 18px 20px auto;
    z-index: 10;
    display: none;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    pointer-events: none;
}

#hud.active { display: flex; }
.hud-left { color: white; text-shadow: 0 2px 4px rgba(0,0,0,.3); }
#mode-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: rgba(31,27,60,.78); backdrop-filter: blur(8px); font-size: 12px; letter-spacing: .08em; }
#hud-mode-icon { font-size: 18px; }
#objective { margin: 7px 0 0 8px; font-size: 14px; font-weight: 800; }

.timer-wrap {
    min-width: 104px;
    padding: 7px 18px 9px;
    border: 3px solid white;
    border-radius: 15px;
    color: white;
    background: rgba(31,27,60,.8);
    box-shadow: 0 5px 0 rgba(31,27,60,.3);
    text-align: center;
}

.timer-wrap span { display: block; font-size: 9px; font-weight: 900; letter-spacing: .18em; opacity: .65; }
.timer-wrap strong { font-size: 25px; font-variant-numeric: tabular-nums; }
.timer-wrap.danger { color: #fff; background: #e74462; animation: timer-pulse .5s infinite alternate; }
@keyframes timer-pulse { to { transform: scale(1.08); } }

.scoreboard { display: grid; gap: 5px; min-width: 185px; }
.score-row { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 9px; color: white; background: rgba(31,27,60,.72); backdrop-filter: blur(8px); font-size: 11px; font-weight: 850; }
.score-row.you { border: 1px solid rgba(255,255,255,.55); }
.score-dot { width: 9px; height: 9px; border-radius: 50%; }
.score-stars { color: var(--yellow); }

#announcer {
    position: fixed;
    top: 22%;
    left: 50%;
    z-index: 16;
    display: none;
    transform: translate(-50%, -50%) rotate(-3deg);
    pointer-events: none;
}

#announcer.active { display: block; animation: announce 1.1s ease-out both; }
#announcer-copy { display: block; padding: 10px 28px; border: 4px solid white; border-radius: 16px; color: white; background: var(--pink); box-shadow: 0 8px 0 #a73074; font-size: clamp(30px, 7vw, 64px); font-weight: 1000; white-space: nowrap; }
@keyframes announce { 0% { transform: translate(-50%,-50%) scale(.2) rotate(-12deg); opacity: 0; } 20%,65% { transform: translate(-50%,-50%) scale(1) rotate(-3deg); opacity: 1; } 100% { transform: translate(-50%,-80%) scale(1.12); opacity: 0; } }

#danger-vignette { position: fixed; inset: 0; z-index: 8; opacity: 0; pointer-events: none; box-shadow: inset 0 0 110px 30px #f52d4f; transition: opacity .2s; }
#danger-vignette.active { opacity: .65; animation: danger .35s infinite alternate; }
@keyframes danger { to { opacity: .3; } }

#fps-crosshair {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 11;
    display: none;
    width: 42px;
    height: 42px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.75));
}

#fps-crosshair.active { display: block; }
#fps-crosshair i, #fps-crosshair b { position: absolute; display: block; background: white; }
#fps-crosshair i:nth-child(1) { top: 0; left: 20px; width: 2px; height: 13px; }
#fps-crosshair i:nth-child(2) { bottom: 0; left: 20px; width: 2px; height: 13px; }
#fps-crosshair i:nth-child(3) { top: 20px; left: 0; width: 13px; height: 2px; }
#fps-crosshair i:nth-child(4) { top: 20px; right: 0; width: 13px; height: 2px; }
#fps-crosshair b { top: 19px; left: 19px; width: 4px; height: 4px; border-radius: 50%; background: var(--yellow); }
#fps-crosshair.hit { animation: crosshair-hit .16s ease-out; }
#fps-crosshair.hit i, #fps-crosshair.hit b { background: #ff405e; }
@keyframes crosshair-hit { 50% { transform: translate(-50%,-50%) scale(1.45) rotate(12deg); } }

#fps-hint {
    position: fixed;
    left: 50%;
    bottom: 74px;
    z-index: 11;
    display: none;
    transform: translateX(-50%);
    padding: 8px 14px;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 99px;
    color: white;
    background: rgba(31,27,60,.68);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    pointer-events: none;
}

#fps-hint.active { display: block; }

#dance-button {
    position: fixed;
    left: 50%;
    bottom: 28px;
    z-index: 14;
    display: none;
    align-items: center;
    gap: 9px;
    transform: translateX(-50%) rotate(-2deg);
    border: 3px solid white;
    border-radius: 16px;
    padding: 9px 18px 10px 11px;
    color: white;
    background: linear-gradient(135deg, #8c62e8, #ff4f91);
    box-shadow: 0 6px 0 #513482, 0 11px 22px rgba(0,0,0,.22);
    cursor: pointer;
    font-weight: 1000;
    letter-spacing: .08em;
}

#dance-button.active { display: flex; animation: dance-button-bob .65s ease-in-out infinite alternate; }
#dance-button kbd { min-width: auto; padding: 5px 8px; font-size: 12px; }
#dance-button:active { transform: translateX(-50%) translateY(5px) rotate(2deg); box-shadow: 0 1px 0 #513482; }
@keyframes dance-button-bob { to { transform: translateX(-50%) translateY(-3px) rotate(2deg); } }

#audio-controls {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 45;
    display: flex;
    gap: 7px;
}

#audio-controls button {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(255,255,255,.38);
    border-radius: 11px;
    padding: 7px 10px;
    color: white;
    background: rgba(31,27,60,.68);
    backdrop-filter: blur(7px);
    box-shadow: 0 3px 8px rgba(0,0,0,.18);
    cursor: pointer;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .06em;
}

#audio-controls button:hover { background: rgba(49,42,90,.9); }
#audio-controls button.muted { border-color: rgba(255,79,145,.65); color: #c8c3d5; background: rgba(45,40,61,.75); }
#audio-controls button.muted b { color: #ff4f91; }
#audio-controls button.muted b::after { content: '×'; margin-left: -3px; font-size: 12px; }

@media (pointer: coarse) {
    #audio-controls { top: 148px; right: 8px; bottom: auto; flex-direction: column; }
    #audio-controls button span { display: none; }
}

.result-card { width: min(580px, 94vw); }
#result-list, #final-list { display: grid; gap: 8px; margin: 22px 0 26px; }
.result-row { display: grid; grid-template-columns: 42px 16px 1fr auto; align-items: center; gap: 9px; padding: 10px 14px; border-radius: 13px; background: #eeeadf; text-align: left; font-weight: 850; }
.result-row:first-child { background: #fff0a9; transform: scale(1.035); }
.result-row.tied-winner { background: #fff0a9; transform: scale(1.02); }
.result-rank { font-size: 22px; font-weight: 1000; }
.result-dot { width: 12px; height: 12px; border-radius: 50%; }
.result-points { color: var(--purple); font-weight: 950; }
.result-detail { display: block; color: #7b7587; font-size: 10px; font-weight: 700; }

.result-actions { display: grid; grid-template-columns: minmax(105px, .35fr) 1fr; gap: 10px; }

@media (min-width: 1000px) {
    #round-results, #final-results {
        justify-content: flex-start;
        padding-left: 5vw;
        background: linear-gradient(90deg, rgba(22,17,51,.48), rgba(22,17,51,.15) 58%, transparent 78%);
        backdrop-filter: none;
    }
    #round-results .modal-card, #final-results .modal-card { width: min(540px, 44vw); }
}

.trophy { color: var(--yellow); font-size: 76px; line-height: .9; text-shadow: 0 6px 0 var(--pink); animation: trophy-bob 1.2s ease-in-out infinite alternate; }
@keyframes trophy-bob { to { transform: translateY(-8px) rotate(6deg); } }

#touch-controls { position: fixed; inset: auto 18px 20px; z-index: 12; display: none; align-items: flex-end; justify-content: space-between; pointer-events: none; }
.dpad { display: grid; grid-template: repeat(3, 48px) / repeat(3, 48px); gap: 4px; }
.dpad button, .action-pad button { pointer-events: auto; border: 2px solid rgba(255,255,255,.65); color: white; background: rgba(31,27,60,.64); backdrop-filter: blur(5px); font-weight: 950; }
.dpad button { border-radius: 12px; }
.dpad [data-touch="w"] { grid-area: 1 / 2; }
.dpad [data-touch="a"] { grid-area: 2 / 1; }
.dpad [data-touch="s"] { grid-area: 2 / 2; }
.dpad [data-touch="d"] { grid-area: 2 / 3; }
.action-pad { display: flex; gap: 10px; align-items: flex-end; }
.action-pad button { width: 70px; height: 70px; border-radius: 50%; font-size: 11px; }
.action-pad .push { width: 86px; height: 86px; color: var(--ink); background: rgba(255,216,74,.85); }
#touch-controls.active { display: flex; }

@media (max-width: 760px) {
    #title-screen { justify-content: center; padding: 18px; background: rgba(23,18,53,.66); }
    .title-card { margin-top: -3vh; }
    h1 { font-size: clamp(58px, 18vw, 92px); }
    .subtitle { margin-top: 20px; }
    .game-preview { gap: 5px; }
    .game-preview button { justify-content: center; padding: 7px 5px; }
    .game-preview span { display: none; }
    .game-preview b { font-size: 23px; }
    .game-preview .finger-game { grid-column: auto; }
    .quick-controls { font-size: 9px; }
    .difficulty-picker button { padding: 6px 8px; }
    #hud { inset: 10px 10px auto; }
    #objective { max-width: 130px; font-size: 11px; }
    .scoreboard { min-width: 118px; }
    .score-row { grid-template-columns: 9px 1fr auto; font-size: 9px; padding: 4px 7px; }
    .timer-wrap { min-width: 80px; padding: 5px 8px; }
    .timer-wrap strong { font-size: 20px; }
    .modal-card { padding: 28px 22px 24px; }
}

@media (pointer: coarse) { #touch-controls.gameplay { display: flex; } }

@media (max-height: 650px) and (orientation: landscape) {
    .title-card { transform: scale(.82); }
    .round-card { transform: scale(.82); }
    .modal-card { max-height: 92vh; overflow: auto; padding: 22px; }
    .game-preview { margin: 10px 0; }
}

/* Party color pass */
#loading-screen {
    background-size: 160% 160%;
    animation: loading-party-gradient 7s ease-in-out infinite alternate;
}

@keyframes loading-party-gradient {
    0% { background-position: 0% 20%; }
    100% { background-position: 100% 80%; }
}

#title-screen {
    isolation: isolate;
    background:
        radial-gradient(circle at 82% 18%, rgba(53,217,245,.2), transparent 24%),
        radial-gradient(circle at 72% 78%, rgba(255,216,74,.18), transparent 27%),
        linear-gradient(90deg, rgba(23,12,58,.96) 0%, rgba(63,28,105,.78) 44%, rgba(255,79,145,.08) 76%, transparent 100%);
}

#title-screen::before,
#title-screen::after {
    content: '';
    position: absolute;
    z-index: -1;
    width: 260px;
    height: 260px;
    border-radius: 44% 56% 61% 39%;
    filter: blur(14px);
    opacity: .25;
    pointer-events: none;
    animation: ui-color-float 6s ease-in-out infinite alternate;
}

#title-screen::before { top: 5%; left: 8%; background: linear-gradient(135deg, var(--pink), var(--purple)); }
#title-screen::after { right: 7%; bottom: 5%; background: linear-gradient(135deg, var(--cyan), var(--yellow)); animation-delay: -3s; }
@keyframes ui-color-float { to { transform: translate(24px, -18px) rotate(24deg) scale(1.12); border-radius: 62% 38% 43% 57%; } }

.game-preview button:nth-child(4n + 1) { background: linear-gradient(135deg, rgba(255,79,145,.2), rgba(125,92,255,.13)); }
.game-preview button:nth-child(4n + 2) { background: linear-gradient(135deg, rgba(53,217,245,.2), rgba(125,92,255,.13)); }
.game-preview button:nth-child(4n + 3) { background: linear-gradient(135deg, rgba(255,216,74,.19), rgba(255,79,145,.12)); }
.game-preview button:nth-child(4n) { background: linear-gradient(135deg, rgba(115,227,108,.17), rgba(53,217,245,.12)); }
.game-preview button:hover { box-shadow: 0 0 18px rgba(53,217,245,.25); }

.primary-button { background: linear-gradient(110deg, #ffe45b 0%, #ffb03f 48%, #ff729f 100%); }

.modal-card, .round-card {
    background:
        radial-gradient(circle at 100% 0%, rgba(53,217,245,.13), transparent 30%),
        radial-gradient(circle at 0% 100%, rgba(255,79,145,.11), transparent 32%),
        var(--cream);
}

.modal-card::before, .round-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 7px;
    background: linear-gradient(90deg, var(--pink), var(--yellow), var(--green), var(--cyan), var(--purple), var(--pink));
    background-size: 200% 100%;
    animation: rainbow-slide 4s linear infinite;
}

@keyframes rainbow-slide { to { background-position: 200% 0; } }

#mode-chip {
    border: 1px solid rgba(53,217,245,.4);
    background: linear-gradient(135deg, rgba(125,92,255,.86), rgba(255,79,145,.72));
    box-shadow: 0 4px 16px rgba(42,20,90,.25);
}

.timer-wrap {
    background: linear-gradient(155deg, rgba(45,34,102,.92), rgba(107,48,139,.9));
    box-shadow: 0 5px 0 rgba(31,27,60,.3), 0 0 18px rgba(53,217,245,.16);
}

.score-row { border-left: 3px solid var(--purple); background: linear-gradient(90deg, rgba(31,27,60,.88), rgba(71,48,116,.7)); }
.score-row:nth-child(1) { border-left-color: var(--cyan); }
.score-row:nth-child(2) { border-left-color: var(--pink); }
.score-row:nth-child(3) { border-left-color: var(--green); }
.score-row:nth-child(4) { border-left-color: #ffb43f; }

.result-row:nth-child(2) { background: linear-gradient(90deg, #e3f7ff, #eee8ff); }
.result-row:nth-child(3) { background: linear-gradient(90deg, #e7f8df, #e9f7f3); }
.result-row:nth-child(4) { background: linear-gradient(90deg, #ffe9f2, #f0e7f7); }
.result-row:first-child { background: linear-gradient(100deg, #fff0a9, #ffd6a5, #ffc8df); }

#audio-controls button { background: linear-gradient(135deg, rgba(76,48,139,.82), rgba(31,27,60,.8)); }