:root{font-family:'Segoe UI','Malgun Gothic',sans-serif;color:#ebf4ef;background:#101c1b;color-scheme:dark;--lime:#d2f58f;--card:#1a2c29;--line:#334943;--soft:#9bb0a5}
*{box-sizing:border-box}body{margin:0;background:#101c1b}main{max-width:1240px;margin:auto;padding:28px}
header{display:flex;justify-content:space-between;align-items:center;margin-bottom:44px}a{color:#b9d8ca;text-decoration:none}.brand{font-weight:800;letter-spacing:2px}.brand span{color:var(--lime);margin:0 14px 0 3px}
.eyebrow{color:#b6d495;letter-spacing:2px;font-size:11px;font-weight:700;margin:0}h1{font-size:54px;line-height:1.17;letter-spacing:-2px;margin:14px 0 22px}h2{font-size:20px}.lead{color:#b1c0b9;line-height:1.8}
.cards,.layout{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:30px 0}.layout{grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);align-items:start}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:28px}
label{display:grid;gap:8px;font-size:13px;color:#c3d5cb;margin:18px 0}label.check{display:flex;align-items:center;gap:10px}label.check input{width:auto}
input,select,button{font:inherit;border-radius:10px;padding:13px;border:1px solid #456055;max-width:100%}input,select{background:#13211f;color:#f1f6f3;width:100%}
button{background:var(--lime);color:#192820;font-weight:700;cursor:pointer;border:0}button:hover{filter:brightness(.94)}button:disabled{opacity:.4;cursor:default}
.secondary{background:#31483f;color:#f0f7ec}.ghost{background:none;color:var(--soft);border:1px solid #3c5449;padding:9px 14px;font-weight:600}
fieldset{border:0;padding:0;margin:0}.pair{display:grid;grid-template-columns:1fr 1fr;gap:15px}.muted,footer{font-size:12px;color:var(--soft);line-height:1.7}.center{text-align:center}
.room-top,.stage-top{display:flex;justify-content:space-between;align-items:center;gap:12px}.room-top h1{font-size:34px;margin:8px 0 0}
.stage-top{color:#bbd29f;font-weight:700;font-size:13px}#timer{font-size:22px;font-variant-numeric:tabular-nums;color:var(--lime)}#timer.urgent{color:#ff9d7e;animation:beat 1s infinite}
.progress{position:relative;height:8px;border-radius:8px;background:#13211f;margin:14px 0 4px;overflow:visible}#progress-fill{height:100%;width:0;border-radius:8px;background:linear-gradient(90deg,#8fd18a,var(--lime));transition:width .25s linear}
#hint-marks i{position:absolute;top:-4px;width:3px;height:16px;border-radius:2px;background:#ffd36e;transform:translateX(-1px)}
.disc-wrap{position:relative;width:120px;height:120px;margin:24px auto}.disc{width:120px;height:120px;border-radius:50%;display:grid;place-items:center;font-size:48px;background:repeating-radial-gradient(#29483b 0 5px,#233a33 6px 9px);border:1px solid #61806b;color:var(--lime)}
.disc.spin{animation:spin 3s linear infinite;box-shadow:0 0 0 6px #d2f58f22,0 0 40px #d2f58f33}
.countdown{position:absolute;inset:0;display:grid;place-items:center;font-size:56px;font-weight:800;color:#101c1b;background:var(--lime);border-radius:50%;animation:pop 1s infinite}
.stage h2{text-align:center;margin:8px 0}.stage>#ready{display:block;margin:12px auto}.volume{grid-template-columns:auto 1fr;align-items:center;gap:16px;max-width:320px;margin:12px auto}
.hints{display:grid;gap:10px;margin:16px 0}.hint{background:#2a3a24;border:1px solid #6b7f3d;border-radius:14px;padding:14px 16px;animation:rise .35s ease-out}
.hint strong{color:#ffd36e}.hint p{margin:8px 0 0;line-height:1.6}.hint .label{display:block;margin-top:10px;font-size:12px;color:#c9d6a8}.hint code{display:inline-block;margin-top:6px;font-size:22px;letter-spacing:4px;color:var(--lime);font-family:inherit;font-weight:700}
#answer-form{margin-top:18px}#answer-form>label{margin:0 0 8px}.answer-row{display:flex;gap:10px}.answer-row input{flex:1;font-size:18px}.answer-row button{white-space:nowrap;padding:13px 22px}#giveup{margin-top:10px}
.controls{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.stage.revealing .disc-wrap,.stage.revealing #stage-title,.stage.revealing #hints,.stage.revealing #choices,.stage.revealing #answer-form,.stage.revealing #audio-note,
.stage.introducing .disc-wrap,.stage.introducing #stage-title,.stage.introducing #hints{display:none!important}
.reveal{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:28px 20px 22px;margin:18px 0 6px;border-radius:20px;
  background:radial-gradient(circle at 50% 0,#3d6a44,#203a30 70%);border:1px solid #8fd18a;animation:revealIn .7s cubic-bezier(.2,1.4,.4,1) both,revealGlow 2.4s ease-in-out .7s infinite alternate}
.reveal::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,#ffffff2e 50%,transparent 70%);transform:translateX(-100%);animation:shine 1.2s ease-out .35s 1;pointer-events:none}
.reveal-label{margin:0;padding:4px 14px;border-radius:999px;background:var(--lime);color:#13211f;font-weight:800;letter-spacing:4px;font-size:13px;animation:drop .5s cubic-bezier(.2,1.6,.4,1) .15s both}
#poster{width:180px;max-height:250px;object-fit:cover;border-radius:12px;box-shadow:0 12px 30px #0008;margin:8px 0;animation:flipIn .7s ease-out .2s both}
.reveal h3{font-size:clamp(28px,5vw,46px);line-height:1.2;margin:4px 0;letter-spacing:-1px;background:linear-gradient(90deg,#fff,var(--lime),#fff);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:titleIn .8s cubic-bezier(.2,1.3,.4,1) .3s both,titleShine 3s linear 1.1s infinite;overflow-wrap:anywhere}
.reveal p{margin:2px 0}#reveal-song{font-size:17px;color:#d9e8dd;animation:rise .5s ease-out .55s both}#reveal-pick{font-weight:700;color:#ffd36e}
#reveal-winners{padding:0;list-style:none;margin:10px 0 2px}#reveal-winners li{padding:3px 0;font-size:16px;animation:rise .45s ease-out .7s both}
.skip-vote{display:block;margin:6px auto 0;background:#31483f;color:#f0f7ec;border:1px solid #5d7b6b}.skip-vote:not(:disabled):hover{border-color:var(--lime)}
.intro{margin:18px 0 6px;padding:24px;border-radius:20px;background:linear-gradient(160deg,#25402f,#1a2c29);border:1px solid #5d7b6b;animation:revealIn .6s ease-out both}
.intro h3{font-size:28px;margin:6px 0 12px}#intro-rules{margin:0;padding:0;list-style:none;display:grid;gap:10px}#intro-rules li{line-height:1.6;padding:10px 14px;border-radius:12px;background:#13211f99;animation:rise .45s ease-out both}
.intro-count{margin:16px 0 0;text-align:center;font-size:20px;font-weight:800;color:var(--lime)}
.podium{display:grid;gap:8px;margin-top:18px}.place{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;background:#203531}.place .who{flex:1;overflow-wrap:anywhere}.place .medal{font-size:20px;width:28px;text-align:center}
.place.top1{background:#3f4a23;font-size:20px;padding:18px}.place.top2{background:#34402f}.place.top3{background:#2f3a2d}.place strong{color:var(--lime)}
.side{display:grid;gap:24px}#players{padding:0;list-style:none}#players li{display:flex;justify-content:space-between;gap:15px;padding:12px 0;border-bottom:1px solid #34483e}#players li.me span{color:var(--lime)}#players span{overflow-wrap:anywhere}#players strong{color:var(--lime);white-space:nowrap}
.chat{display:flex;flex-direction:column}.chat-log{height:320px;overflow-y:auto;margin:12px 0;padding-right:4px;display:flex;flex-direction:column;gap:6px}
.msg{margin:0;line-height:1.5;font-size:14px;overflow-wrap:anywhere}.msg b{color:#b9d8ca;margin-right:6px}.msg.k-system,.msg.k-hint{color:var(--soft);font-size:12px}.msg.k-hint{color:#ffd36e}
.msg.k-correct{color:#192820;background:var(--lime);border-radius:8px;padding:4px 10px;font-weight:700}.msg.k-reveal{color:#e8f5d2;background:#2c4636;border-radius:8px;padding:4px 10px}.msg.solved{opacity:.8}.msg .lock{margin-right:6px;font-size:11px}
#chat-form{display:flex;gap:8px}#chat-form input{flex:1;padding:11px}#chat-form button{padding:11px 16px}
#history p{color:#c1d0c4;border-bottom:1px solid #33483e;padding-bottom:12px}
#notice{position:sticky;bottom:20px;background:#e2f4cb;color:#193120;padding:14px 20px;border-radius:10px;z-index:10;white-space:pre-line}#notice:empty{display:none}#notice.error{background:#ffdbd1;color:#6e2521}
dialog{border:1px solid #718969;background:var(--card);color:#eef5e8;border-radius:20px;padding:30px}dialog::backdrop{background:#000a}[hidden]{display:none!important}footer{padding:35px 0}
.stage.won{animation:won .9s ease-out}.stage.wrong{animation:shake .35s}.stage.hinted{animation:glow .8s ease-out}.stage.revealed{animation:glow .8s ease-out}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes beat{50%{opacity:.55}}@keyframes pop{0%{transform:scale(.85)}30%{transform:scale(1)}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes revealIn{from{opacity:0;transform:scale(.6)}}@keyframes revealGlow{to{box-shadow:0 0 34px #d2f58f55}}@keyframes shine{to{transform:translateX(100%)}}
@keyframes drop{from{opacity:0;transform:translateY(-24px) scale(1.4)}}@keyframes flipIn{from{opacity:0;transform:perspective(600px) rotateY(80deg)}}
@keyframes titleIn{from{opacity:0;transform:scale(1.8);filter:blur(6px)}}@keyframes titleShine{to{background-position:-200% 0}}
@keyframes won{0%{box-shadow:0 0 0 0 #d2f58fcc}100%{box-shadow:0 0 0 24px #d2f58f00}}@keyframes glow{0%{box-shadow:0 0 0 0 #ffd36e99}100%{box-shadow:0 0 0 18px #ffd36e00}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media(max-width:860px){main{padding:16px}header{margin-bottom:28px}h1{font-size:38px}.cards,.layout{grid-template-columns:1fr}.card{padding:18px}.room-top h1{font-size:26px}.controls button{flex:1}#invite{font-size:12px}.reveal{flex-direction:column;text-align:center}.chat-log{height:240px}.pair{grid-template-columns:1fr}}
.settings{display:grid;gap:14px;margin:14px 0}.setting-title{margin:0 0 8px;font-size:13px;font-weight:700;color:#c3d5cb}.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:flex;flex-direction:column;gap:2px;margin:0;padding:10px 14px;border:1px solid #3c5449;border-radius:12px;background:#13211f;cursor:pointer;font-size:14px;color:#e6efe9;min-width:84px}
.chip{position:relative}.chip input{position:absolute;inset:0;width:1px;height:1px;opacity:0;pointer-events:none}.chip small{font-size:11px;color:var(--soft)}.chip:has(input:checked){border-color:var(--lime);background:#2a3f2a;box-shadow:inset 0 0 0 1px var(--lime)}
.chip:has(input:checked) span{color:var(--lime);font-weight:700}.chip:has(input:disabled){opacity:.35;cursor:default}.chip:has(input:focus-visible){outline:2px solid var(--lime);outline-offset:2px}
.settings .available{margin:0}#settings-form h3 small{font-weight:400}#settings-summary{margin:6px 0 0}
.choices{display:grid;gap:10px;margin:18px 0}.choice{display:flex;align-items:center;gap:14px;text-align:left;background:#13211f;color:#eef5e8;border:1px solid #3c5449;padding:14px 16px;font-weight:600}
.choice .num{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%;background:#2a3f2a;color:var(--lime);font-size:14px}.choice .text{flex:1;overflow-wrap:anywhere}.choice small{color:var(--soft);font-weight:400}
.choice:not(:disabled):hover{border-color:var(--lime);filter:none}.choice:disabled{opacity:1;cursor:default}.choice.picked{border-color:var(--lime);background:#2a3f2a}
.choice.right{border-color:#8fd18a;background:#2f5a35}.choice.right .num{background:#8fd18a;color:#13211f}.choice.wrong{border-color:#ff9d7e;background:#4a2b26}
.ending{margin-top:18px;padding:18px 20px;border-radius:14px;background:#2a2f45;border:1px solid #59618a;text-align:center}.ending #ending-title{margin:0 0 6px;font-weight:700;color:#e6e8ff}.ending .controls{justify-content:center;margin-top:12px}
.closed{text-align:center;margin:60px auto;max-width:560px}.closed h1{font-size:40px}
.cards.single{grid-template-columns:minmax(0,520px);justify-content:center}#join-form h2{margin-top:0}#join-name{font-size:18px}
#players li{align-items:center}#players li .kick{padding:5px 10px;font-size:12px;font-weight:600;background:none;color:#ffb4a2;border:1px solid #6e4a42;border-radius:8px;flex:none}#players li .kick:hover{background:#4a2b26;filter:none}#players li span{flex:1}

/* Game choreography: decorative layers never capture taps, focus or scrolling. */
.stage{position:relative;isolation:isolate;transition:border-color .4s,background-color .4s}
.game-fx{position:absolute;inset:0;overflow:hidden;border-radius:20px;pointer-events:none;z-index:5;contain:layout paint}
.confetti{position:absolute;left:var(--x);top:10%;width:8px;height:15px;border-radius:2px;background:var(--lime);opacity:0;animation:confettiFall 2s ease-out both;will-change:transform,opacity}
.confetti.c1{background:#ffd36e}.confetti.c2{background:#b8a5ff;border-radius:50%;width:9px;height:9px}.confetti.c3{background:#79e4cf;width:5px;height:18px}
.moment{position:absolute;top:68px;left:50%;width:min(88%,440px);z-index:6;pointer-events:none;display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;padding:18px 24px;border:1px solid #a7dcbc;border-radius:18px;background:linear-gradient(120deg,#152d29f5,#2c493df5);box-shadow:0 14px 45px #0006;transform:translateX(-50%);animation:momentArrival .5s cubic-bezier(.16,1,.3,1) both;overflow:hidden}
.moment::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 25%,#fff2 50%,transparent 75%);animation:momentSweep 1.1s .15s both}
.moment strong{font-size:clamp(22px,4vw,34px);letter-spacing:-1px;line-height:1.2;color:#f2ffe9}
.moment-icon{grid-row:span 2;font-size:38px;color:var(--lime);animation:iconBloom .65s cubic-bezier(.2,1.6,.5,1) both}
.moment-sub{font-size:13px;color:#c7dccd;margin-top:6px;overflow-wrap:anywhere}
.moment.correct{border-color:var(--lime);background:linear-gradient(120deg,#254b30f7,#172e29f7)}
.moment.correct strong{color:var(--lime)}.moment.correct .moment-sub{font-weight:800;font-size:18px;color:#fff}
.moment.picked{border-color:#92cce2;background:linear-gradient(120deg,#1b3d4df7,#172e29f7)}.moment.picked .moment-icon{color:#92cce2}
.moment.finale{position:relative;top:auto;left:auto;width:100%;margin:0 0 20px;transform:none;border-color:#ffe09c;background:linear-gradient(120deg,#493e22f7,#29233cf7);animation:podiumArrival .6s both}
.moment.finale .moment-icon,.moment.finale strong{color:#ffe09c}.moment.finale strong{font-size:clamp(20px,3.6vw,29px);letter-spacing:1px}
.stage.round-shift{animation:stageShift .6s cubic-bezier(.16,1,.3,1)}
.choice{position:relative;overflow:hidden;transition:transform .18s,border-color .18s,background-color .18s,box-shadow .18s;transform-origin:left center}
.choice-enter{animation:choiceDeal .48s cubic-bezier(.16,1,.3,1) backwards}
.choice:not(:disabled):hover{transform:translateX(5px);box-shadow:-3px 0 0 var(--lime),0 6px 18px #0003}
.choice:not(:disabled):active{transform:scale(.98)}.choice:focus-visible{outline:3px solid #b8a5ff;outline-offset:3px}
.choice .num{transition:transform .2s,background-color .2s}.choice:not(:disabled):hover .num{transform:rotate(-9deg) scale(1.12)}
.choice.picked{animation:choiceLock .5s cubic-bezier(.2,1.4,.4,1);box-shadow:inset 4px 0 0 var(--lime),0 0 20px #d2f58f16}
.choice.picked::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent,#d2f58f33,transparent);animation:momentSweep .7s both;pointer-events:none}
.choices:has(.picked) .choice:not(.picked){opacity:.48;transform:scale(.985);transition:opacity .3s,transform .3s}
.reveal-label{box-shadow:0 5px 25px #d2f58f30}.reveal #reveal-pick:not(:empty){animation:resultStamp .55s .35s cubic-bezier(.2,1.5,.4,1) both}
#reveal-winners li{animation-duration:.65s}#reveal-winners li:nth-child(2){animation-delay:.82s}#reveal-winners li:nth-child(3){animation-delay:.94s}
.finale-stage{border-color:#a79860;background:radial-gradient(ellipse at 50% 0,#46412666,transparent 65%),var(--card)}
.finale-stage .disc-wrap{display:none}.finale-stage #stage-title{margin:22px 0 12px;color:#ffe5a3;animation:finalTitle .9s cubic-bezier(.16,1,.3,1) both}
.finale-stage .podium{padding-top:12px}.place{position:relative;overflow:hidden;animation:podiumArrival .75s cubic-bezier(.16,1,.3,1) both;border:1px solid #53624944}
.place.top1{min-height:90px;background:linear-gradient(120deg,#635325,#393922);border-color:#c1a451;box-shadow:0 8px 25px #0003}
.place.top1::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,#ffe6a833 50%,transparent 70%);animation:momentSweep 1.6s .8s both;pointer-events:none}
.place.top1 .medal{font-size:36px;width:42px;animation:iconBloom .85s .45s both}.place.top2 .medal,.place.top3 .medal{font-size:28px}
.place strong{animation:scoreArrival .65s .65s both;font-variant-numeric:tabular-nums}.ending{animation:podiumArrival .7s .7s both}
@keyframes choiceDeal{from{opacity:0;transform:perspective(700px) translateX(-30px) translateY(15px) rotateX(-18deg)}to{opacity:1;transform:none}}
@keyframes choiceLock{0%{transform:scale(1)}40%{transform:scale(1.025)}100%{transform:scale(1)}}
@keyframes stageShift{from{opacity:.65;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes momentArrival{from{opacity:0;transform:translate(-50%,-16px) scale(.86)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes momentSweep{from{transform:translateX(-120%)}to{transform:translateX(120%)}}
@keyframes iconBloom{from{opacity:0;transform:rotate(-35deg) scale(.3)}to{opacity:1;transform:none}}
@keyframes confettiFall{0%{opacity:0;transform:translate3d(0,-20px,0) rotate(0)}12%{opacity:1}85%{opacity:.8}100%{opacity:0;transform:translate3d(var(--drift),480px,0) rotate(var(--turn))}}
@keyframes resultStamp{from{opacity:0;transform:scale(1.3) rotate(-4deg)}to{opacity:1;transform:none}}
@keyframes podiumArrival{from{opacity:0;transform:translateY(28px) scale(.95)}to{opacity:1;transform:none}}
@keyframes scoreArrival{from{opacity:0;transform:translateY(-10px) scale(1.3)}to{opacity:1;transform:none}}
@keyframes finalTitle{from{opacity:0;transform:translateY(-16px);letter-spacing:5px}to{opacity:1;transform:none;letter-spacing:0}}
@media(max-width:600px){.moment{top:62px;padding:14px 16px;column-gap:10px}.moment.finale{top:auto}.moment-icon{font-size:30px}.moment-sub{font-size:12px}.place,.place.top1{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:8px;padding:14px 10px;font-size:15px}.place .medal,.place.top1 .medal{width:30px;font-size:26px}.place strong{white-space:nowrap;font-size:15px}.place>.muted{grid-column:2/4;font-size:11px}.choice:not(:disabled):hover{transform:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.game-fx{display:none}.choice:not(:disabled):hover{transform:none}}

/* Countdown is driven by server seconds, never an independent repeating CSS clock. */
.countdown{animation:none;background:radial-gradient(circle at 35% 25%,#f0ffc9,#c2e681 70%);box-shadow:0 0 0 7px #d2f58f18,0 8px 32px #0004;pointer-events:none;grid-template-rows:1fr auto;padding:15px 4px 20px;gap:0;z-index:1}
.countdown::before{content:'';position:absolute;inset:-9px;border-radius:50%;border:2px solid #d2f58f88;pointer-events:none}
.count-digit{display:block;line-height:1;font-size:58px;font-weight:900;letter-spacing:-3px;animation:countImpact .65s cubic-bezier(.16,1,.3,1) both}
.count-label{font-size:10px;letter-spacing:1.4px;font-weight:800;line-height:1.2;animation:countLabel .4s ease-out both}
.countdown-go{background:radial-gradient(circle at 35% 25%,#c5fff4,#65dabf 75%);box-shadow:0 0 0 12px #65dabf15,0 0 36px #65dabf40}
.countdown-go .count-digit{font-size:42px;letter-spacing:-2px}.countdown-go::before{border-color:#65dabfaa}
.countdown-final{color:#fff3e8;background:radial-gradient(circle at 35% 25%,#bb6140,#70352c 75%);box-shadow:0 0 0 7px #ff9d7e18,0 0 30px #ff9d7e30}
.countdown-final::before{border-color:#ffb18c99}.countdown-final .count-label{color:#ffdbc9;font-size:10px;letter-spacing:.5px}
.stage.time-critical{border-color:#d18b67}.time-critical #progress-fill{background:linear-gradient(90deg,#ffbc73,#ff8d7a)}
#timer.urgent{animation:none}#timer.timer-hit{animation:timerImpact .45s ease-out both}
@keyframes countImpact{0%{opacity:0;transform:translateY(12px) scale(1.65) rotate(-9deg)}35%{opacity:1;transform:translateY(-3px) scale(.94) rotate(2deg)}70%{transform:translateY(0) scale(1.04)}100%{opacity:1;transform:none}}
@keyframes countLabel{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes timerImpact{0%{transform:scale(1.25);text-shadow:0 0 16px #ffad7c99}100%{transform:scale(1);text-shadow:none}}
@media(prefers-reduced-motion:reduce){.count-digit,.count-label,#timer.timer-hit{animation:none!important}.countdown{box-shadow:none}}
/* GO holds for a moment and fades instead of vanishing on the next tick. */
.countdown.countdown-go{animation:goOut 1.2s ease-in both}
@keyframes goOut{0%,70%{opacity:1;transform:none}100%{opacity:0;transform:scale(1.18)}}