:root{font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif;color:#203653;background:#0c263d;font-synthesis:none;--ink:#213957;--paper:#fff9e8;--coral:#ff6d60;--blue:#276ed1;--gold:#ffcf57}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer;touch-action:manipulation}button,a,input,select{-webkit-tap-highlight-color:transparent}button:disabled{cursor:default;opacity:.55}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid #ffcc4f;outline-offset:3px}button{color:inherit}button:active:not(:disabled){translate:0 2px}button[hidden],[hidden]{display:none!important}input,select{min-width:0}body:has(dialog[open]){overflow:hidden}.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.game-shell{position:relative;width:min(100%,520px);height:100dvh;min-height:610px;margin:0 auto;overflow:hidden;background:#349fec;isolation:isolate}.sea-stage{position:absolute;bottom:0;left:0;width:100%;aspect-ratio:960/1706;pointer-events:none}.sea-stage canvas{display:block;width:100%;height:100%;image-rendering:pixelated}.game-header{position:absolute;inset:max(env(safe-area-inset-top),16px) 19px auto;display:flex;align-items:center;gap:7px;z-index:5;height:30px}.mini-logo{font-weight:950;font-size:15px;color:#fff;text-shadow:2px 2px #255a87;padding:0;background:none;border:0;letter-spacing:-.8px;flex:none}.mini-logo span{color:#ffe580}.round-label{color:#fff;font-size:10px;font-weight:800;margin-left:auto;text-shadow:1px 1px #206caa;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.language-picker{position:relative;display:flex;align-items:center;justify-content:center;gap:3px;height:26px;min-width:48px;padding:0 6px;border:2px solid #fff9;border-radius:5px;color:#fff;background:#126cb3a8;box-shadow:0 2px 0 #15527e;font-size:9px;font-weight:950;letter-spacing:.4px;flex:none}.language-picker:hover{background:#176fae}.language-picker:focus-within{outline:3px solid #ffcc4f;outline-offset:3px}.language-picker select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.language-picker select:focus-visible{outline:0}.language-icon{font-size:13px;line-height:1}.menu-button{border:2px solid #fff9;color:#fff;background:#2273bb77;border-radius:5px;padding:0 7px;font-weight:900;letter-spacing:1px;line-height:22px;font-size:15px;flex:none}.paper{background:var(--paper);border:3px solid var(--ink);border-radius:3px;box-shadow:4px 4px 0 #17314d,0 0 0 2px #ffedaf inset}.button{display:block;border:2px solid var(--ink);border-radius:4px;box-shadow:0 4px 0 var(--ink);font-weight:850;min-height:46px;padding:11px 14px;text-align:center;line-height:1.25;text-decoration:none;transition:filter .15s}.button:hover{filter:brightness(1.06)}.coral{background:var(--coral);color:#fff;text-shadow:1px 1px #b9363055}.blue{background:var(--blue);color:#fff}.cream{background:#ffe49b;color:var(--ink)}.small{min-height:36px;padding:8px 10px;font-size:11px}.subtle{display:block;border:0;background:transparent;color:#fff;font-size:11px;padding:12px 8px;text-decoration:underline;text-underline-offset:4px}.subtle.dark{color:#496079}.muted{font-size:12px;line-height:1.8;color:#657189}.eyebrow{font-size:10px;letter-spacing:2px;color:#51819e;font-weight:900}.home-screen{position:absolute;inset:76px 24px auto;z-index:4}.title-lockup{text-align:center;margin-bottom:25px;color:#fff}.title-lockup>p{font-weight:850;font-size:12px;letter-spacing:1px;text-shadow:1px 2px #286da7;margin:0 0 10px}.title-lockup h1{font-size:clamp(40px,11vw,58px);letter-spacing:-3px;margin:0;font-weight:1000;line-height:1;color:#fff;text-shadow:3px 3px 0 #244b77,5px 5px 0 #244b77;-webkit-text-stroke:1px #244b77}.title-lockup h1>span{color:#ffe475}.title-lockup h1 small{display:block;font-size:14px;letter-spacing:3px;margin-top:13px;-webkit-text-stroke:0;text-shadow:1px 2px #275884}.home-card{padding:19px}.field-label{font-size:11px;font-weight:850;display:block;margin:0 0 7px}.home-card input,.modal input{width:100%;height:43px;border:2px solid #bbc4c5;border-radius:4px;background:#fff;color:#283f58;padding:8px 12px;font-size:16px}.avatar-label{margin-top:16px}.avatar-picker{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;margin-bottom:16px}.avatar-button{padding:0;border:2px solid #c5cfce;border-radius:4px;background:#e8eff0;aspect-ratio:1}.avatar-button[aria-pressed=true]{background:#ffe39a;border-color:var(--ink);box-shadow:0 2px 0 var(--ink)}.avatar-button canvas{width:100%;height:100%;display:block;image-rendering:pixelated}.home-options{display:grid;grid-template-columns:1fr 84px;gap:10px;margin-bottom:18px}.home-options label{font-size:10px;font-weight:700}.home-options select{font-size:11px;padding:8px 4px;width:100%;background:#fff;color:var(--ink);border:1px solid #bdc9cb;border-radius:3px;margin-top:5px;height:35px}#cpu-start{width:100%;display:flex;justify-content:center;align-items:center;gap:13px;font-size:18px}#cpu-start small{font-size:10px;font-weight:650;opacity:.9}.friends-actions{display:flex;gap:8px;margin-top:13px}.friends-actions button{flex:1;font-size:12px}.home-note{font-size:9px;margin:16px 0 0;text-align:center;color:#6f7d85}.home-screen>.subtle{margin:4px auto}.lobby-screen{position:absolute;top:86px;left:24px;right:24px;padding:24px 20px;text-align:center;z-index:4}.lobby-screen h2{font-size:25px;margin:12px 0}.room-code{font-family:ui-monospace,monospace;font-size:38px;letter-spacing:6px;display:block;margin:16px 0}.share-actions{display:flex;gap:8px;justify-content:center}.lobby-players{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:24px 0 14px}.lobby-person{background:#e9edf0;border-radius:4px;padding:8px 2px;min-height:76px}.lobby-person canvas{width:44px;height:44px;image-rendering:pixelated}.lobby-person strong{display:block;font-size:11px}.lobby-person small{font-size:8px;color:#6b7d86}.lobby-screen>#add-cpu,.lobby-screen>#leave-lobby{margin:auto}.lobby-screen>#start-room{width:100%;margin:10px 0}.question-card{position:absolute;top:max(calc(env(safe-area-inset-top) + 61px),68px);left:19px;right:19px;z-index:4;padding:17px 16px 12px}.question-top{display:flex;gap:8px;align-items:center;justify-content:space-between}.category{font-size:10px;color:#927243;font-weight:850;max-width:85%}.question-number{font-weight:950;color:#cb765c;font-size:12px;white-space:nowrap}.question-card h2{font-size:19px;font-weight:850;line-height:1.6;letter-spacing:.1px;margin:12px 0;overflow-wrap:anywhere}.question-divider{height:1px;background:#decda8;margin-bottom:9px}.question-population{font-size:10px;line-height:1.55;color:#647288;margin:0 0 4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.question-survey{font-size:9px;line-height:1.5;color:#879094;margin:0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.question-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:9px;font-size:8px;color:#8c8270;gap:8px}.question-bottom button{border:0;border-bottom:1px solid #7e8e96;padding:0;background:none;color:#64778c;font-size:9px;white-space:nowrap}.damage-note{font-size:9px;background:#ffe3b6;padding:5px 7px;border-radius:3px;margin:8px 0 0;color:#785735}.player-labels{position:absolute;inset:0}.player-tag{position:absolute;translate:-50% -100%;text-align:center;min-width:50px;max-width:25%;color:#fff;filter:drop-shadow(0 2px 0 #23384b55);will-change:top}.player-tag .name{display:block;background:#fff9e9;border:2px solid #294563;padding:3px 5px;border-radius:3px;color:#293f59;font-size:10px;line-height:1.2;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-tag.you .name{background:#ffe492;border-color:#7c551f}.player-tag .status{display:inline-block;white-space:nowrap;background:#204c76eb;color:#e8f5ff;font-size:8px;padding:3px 5px;border-radius:0 0 4px 4px}.player-tag.ready .status{background:#217566;color:#dcffda}.player-tag .guess{display:block;font-size:23px;font-weight:950;line-height:1.2;color:white;text-shadow:2px 2px #223d68,-1px -1px #223d68;margin-top:3px}.player-tag .guess small{font-size:10px;margin-left:1px}.player-tag .delta{position:absolute;bottom:100%;left:50%;translate:-50% 0;white-space:nowrap;font-weight:1000;font-size:25px;color:#fff;text-shadow:2px 2px #b43c3c,-2px -2px #b43c3c,2px -2px #b43c3c,-2px 2px #b43c3c;animation:delta-pop .55s both}.player-tag .delta.bonus{color:#fff5ae;text-shadow:2px 2px #ab681b,-2px -2px #ab681b,2px -2px #ab681b,-2px 2px #ab681b}.player-tag .delta span{display:block;font-size:10px;letter-spacing:0;margin-bottom:3px}.player-tag.out{opacity:.7}.player-tag.out .name{background:#d0e5eb}.player-tag .hp{display:block;color:#fff;font-size:8px;text-shadow:1px 1px #244b70;margin-top:3px}.game-shell.six .player-tag{max-width:16.4%;min-width:0;width:16%}.game-shell.six .player-tag .name{font-size:8px;padding:3px 1px}.game-shell.six .player-tag .guess{font-size:19px}.game-shell.six .player-tag .delta{font-size:20px}.game-shell.six .player-tag .status{font-size:7px;padding:3px}.phase-banner{position:absolute;top:42%;width:100%;text-align:center;z-index:7;pointer-events:none;color:#fff;font-size:32px;font-weight:1000;letter-spacing:2px;text-shadow:3px 3px #254d84,-2px -2px #254d84,2px -2px #254d84,-2px 2px #254d84;animation:banner-pop 2s both}.phase-banner.gold{color:#ffed8d;text-shadow:3px 3px #9e581b,-2px -2px #9e581b,2px -2px #9e581b,-2px 2px #9e581b}.answer-dock,.status-dock,.correct-dock{position:absolute;bottom:max(calc(env(safe-area-inset-bottom) + 14px),22px);left:20px;right:20px;z-index:6}.answer-dock{background:#fff9eb;border:3px solid #223a5c;border-radius:12px;box-shadow:0 5px 0 #183d64,0 9px 20px #13517c66;padding:9px 12px 7px}.answer-dock>p:first-child{font-size:10px;font-weight:900;margin:0 0 2px;text-align:center;color:#8b725b}.answer-controls{display:flex;align-items:center;gap:15px}.drum-wrap{display:flex;flex:1;justify-content:center;align-items:center;gap:5px;min-width:0}.number-drum{height:82px;overflow:hidden;touch-action:none;cursor:ns-resize;text-align:center;min-width:95px;max-width:100%;user-select:none}.drum-value{font-family:ui-rounded,system-ui,sans-serif;height:20px;font-size:17px;font-weight:800;color:#bac1c5;line-height:20px;white-space:nowrap}.drum-value.selected{font-size:37px;line-height:42px;height:42px;color:#234466;font-weight:950;letter-spacing:-1.5px}.drum-wrap>span{font-size:19px;font-weight:900}.answer-controls>.button{font-size:14px;padding:13px 15px;flex-shrink:0}.drum-hint{text-align:center;font-size:8px;color:#8996a0;margin:3px 0 0}.status-dock{text-align:center;border:2px solid #d9faffaa;border-radius:8px;background:#144b86e8;color:#fff;padding:16px;box-shadow:0 4px 0 #1d395a}.waiting-kicker{font-size:9px;letter-spacing:2px;color:#a9e5f2}.status-dock strong{font-size:28px;display:block;margin:5px 0}.status-dock p{font-size:11px;margin:0}.correct-dock{text-align:center;color:#fff;text-shadow:2px 2px #14395f}.correct-kicker{font-size:15px;font-weight:900}.correct-dock>div:not(.result-actions){display:flex;align-items:baseline;justify-content:center;gap:6px}.correct-dock strong{font-size:64px;line-height:1.05;font-weight:1000;letter-spacing:-2px;color:#ffeb8a;-webkit-text-stroke:1px #93592e;text-shadow:3px 4px #173e67}.correct-dock #correct-unit{font-size:24px;font-weight:900}.correct-dock>p{font-size:10px;margin:5px 0}.result-actions{display:flex;align-items:center;justify-content:center;gap:15px}.result-actions .subtle{padding:7px}.result-actions .button{text-shadow:none}.finish-screen{position:absolute;z-index:9;top:24%;left:27px;right:27px;text-align:center;padding:25px 21px}.finish-screen h2{font-size:32px;color:#c36d31;margin:15px 0}.finish-screen>p{font-size:12px}.finish-screen>.button{width:100%;margin-top:20px}.finish-screen>.subtle{margin:auto}.ranking-row{display:flex;align-items:center;justify-content:space-between;border-bottom:1px dashed #d9cbae;padding:10px 0;gap:8px;font-size:12px}.ranking-row small{font-size:9px;color:#7c8a8e}.ranking-row strong{margin-right:auto}.modal{color:var(--ink);width:min(90vw,430px);max-height:85dvh;overflow:auto;padding:22px}.modal::backdrop{background:#0b2f57a8;backdrop-filter:blur(3px)}.modal h2{font-size:22px;margin:0 0 15px}.modal p,.modal label,.modal li{font-size:13px;line-height:1.8}.modal .button{width:100%;margin-top:16px}.modal .subtle{margin:8px auto 0}.modal input{margin:9px 0}.modal a{color:#236ba6;overflow-wrap:anywhere}.modal h3{font-size:14px;margin:19px 0 5px}.modal #join-code{font-family:ui-monospace,monospace;font-size:28px;letter-spacing:5px;text-transform:uppercase;text-align:center;height:53px}.modal #number-input{font-size:26px;height:60px}.sound-setting{display:flex;align-items:center;justify-content:space-between;margin:17px 0}.sound-setting input{width:22px;accent-color:#276ed1}.connection{position:absolute;z-index:20;left:18px;right:18px;top:45%;background:#172f4ff5;border:2px solid white;border-radius:8px;color:#fff;padding:20px;text-align:center;box-shadow:0 0 0 200vmax #0c234a65}.connection p{font-size:13px;line-height:1.7}.connection button{margin:10px auto;display:inline-block}.loading{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;background:#2b95e0;color:#fff;font-size:14px;font-weight:750}.toast{position:absolute;z-index:35;left:20px;right:20px;bottom:18px;color:#fff;background:#1e3654f5;border:1px solid #bad6e0;border-radius:7px;padding:12px;text-align:center;font-size:12px;line-height:1.6}.offline-person{font-size:11px;background:#f4e6cf;padding:8px;margin:7px 0}.offline-person button{display:block;font-size:11px;padding:7px;background:#fff;border:1px solid #a4aebb;border-radius:3px;width:100%;margin-top:5px}
@keyframes banner-pop{0%{opacity:0;transform:scale(.7) translateY(12px)}15%,65%{opacity:1;transform:scale(1) translateY(0)}100%{opacity:0;transform:translateY(-15px)}}@keyframes delta-pop{0%{opacity:0;transform:scale(.6) translateY(10px)}60%{transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}
@media(max-height:760px){.game-header{top:10px}.home-screen{top:55px;left:22px;right:22px}.title-lockup{margin-bottom:18px}.title-lockup h1{font-size:43px}.home-card{padding:14px}.avatar-label{margin-top:11px}.home-options{margin-bottom:13px}.question-card{top:52px;padding:12px 13px 9px}.question-card h2{font-size:16px;line-height:1.5;margin:8px 0}.question-top .category{font-size:9px}.question-population{font-size:9px}.question-survey{font-size:8px}.question-bottom{margin-top:6px}.answer-dock{bottom:12px;padding:6px 10px}.number-drum{height:70px}.drum-value{height:15px;line-height:15px;font-size:14px}.drum-value.selected{height:40px;line-height:40px;font-size:32px}.answer-dock>p:first-child{font-size:9px}.lobby-screen{top:60px;padding:17px}.lobby-players{margin-top:18px;gap:6px}.lobby-person{min-height:62px;padding:3px}.correct-dock strong{font-size:55px}.finish-screen{top:18%}}
@media(max-width:359px){.home-screen{inset-inline:16px}.home-card{padding:12px}.question-card{inset-inline:12px}.question-card h2{font-size:15px}.answer-dock{inset-inline:12px}.answer-controls{gap:7px}.answer-controls>.button{font-size:12px;padding:12px}.drum-value.selected{font-size:30px}.player-tag .name{font-size:8px}.player-tag .guess{font-size:20px}.home-options{grid-template-columns:1fr 70px}.friends-actions button{font-size:11px}.game-header{inset-inline:13px}.title-lockup h1{font-size:39px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition:none!important}}
/* Keep the portrait stage readable on wide, short screens too. */
.game-shell{width:min(100%,520px,max(320px,47dvh))}
.game-shell.six .player-tag .guess{font-size:clamp(14px,4.6vw,19px);letter-spacing:-.7px}
.game-shell.six .player-tag .guess small{font-size:8px;letter-spacing:-.5px}
.game-shell.six .player-tag .delta{font-size:19px}
.player-tag .guess.long-value{font-size:15px;letter-spacing:-.7px}
.drum-wrap>span{font-size:clamp(12px,4.7vw,19px);white-space:nowrap}
.number-drum.wide-number .selected{font-size:26px;letter-spacing:-1px}
.game-shell.six .player-tag .guess.long-value{font-size:12px}
@media(max-width:359px){.drum-wrap>span{font-size:12px}.number-drum{min-width:82px}.number-drum.wide-number .selected{font-size:21px}.answer-controls>.button{padding-inline:8px}}
@media(max-height:699px){.game-shell{min-height:700px}}