:root{--teal:#245d64;--deep:#123c43;--peach:#edbd94;--cream:#fff7e7;--gold:#d5b784;--ink:#234a50}*{box-sizing:border-box}body{margin:0;background:#d7dfd9;color:var(--cream);font:14px 'PingFang TC',sans-serif}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid #edbd94;outline-offset:4px}button:active{transform:translateY(2px) scale(.985)}button:disabled{cursor:default}#game{max-width:450px;margin:20px auto;min-height:800px;border:1px solid #9bb0a5;border-radius:32px;overflow:hidden;position:relative;box-shadow:0 30px 80px #173e4335;background:radial-gradient(ellipse at 50% 8%,#497a78 0,transparent 60%),#173f47}.shell{position:relative;min-height:800px;display:flex;flex-direction:column;padding:0 24px 22px;isolation:isolate}.shell:before{content:'';position:absolute;inset:10px;border:1px solid #c6c3a42b;border-radius:24px;pointer-events:none;z-index:-1}.shell:after{content:'';position:absolute;inset:0;opacity:.07;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.6' filter='url(%23n)'/%3E%3C/svg%3E");z-index:-1}header{display:flex;justify-content:space-between;align-items:center;padding:24px 0 20px}.wordmark{font:600 20px 'Songti TC',serif;letter-spacing:4px;color:#f4e8c9}.smallbtn{background:#102f393d;color:#ede4ce;border:1px solid #d5c39950;border-radius:50%;width:32px;height:32px}.eyebrow{font-size:9px;letter-spacing:3px;color:#d4c39d}.center{text-align:center}h1,h2,h3,p{margin:0}h1{font:600 42px/1.35 'Songti TC',serif;letter-spacing:4px}h2{font:600 28px/1.5 'Songti TC',serif}.muted{color:#b6c8bd;font-size:12px;line-height:1.9}.home-title{padding:16px 0 22px}.home-title p{margin-top:11px}.crest{width:70px;height:70px;margin:0 auto 17px;border:1px solid #bdba9060;border-radius:50%;display:grid;place-items:center;box-shadow:0 0 0 6px #cbb98b08}.crest svg{width:44px;height:44px}.modes{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0 25px}.mode{position:relative;border:1px solid #9fb6aa;border-radius:19px;padding:24px 16px 19px;height:308px;background:linear-gradient(145deg,#487e7e,#24575e);color:#fff5de;box-shadow:0 5px 0 #102f37,0 12px 20px #102f3745,inset 0 1px 0 #ffffff55;text-align:left;overflow:hidden;transition:transform .2s}.mode:before,.answer:before{content:'';position:absolute;inset:6px;border:1px solid #fff1c52a;border-radius:14px;pointer-events:none}.mode.peach{background:linear-gradient(135deg,#ffe0b8,#e4ad83);color:#674433;border-color:#ecd2ac;box-shadow:0 5px 0 #aa7859,0 12px 20px #102f3745,inset 0 1px 0 #fff9}.mode .num{font:italic 12px Georgia;opacity:.65;letter-spacing:2px}.mode h3{font:600 24px 'Songti TC',serif;letter-spacing:2px;margin:18px 0 9px}.mode p{font-size:10px;line-height:1.8;opacity:.75}.mode .go{position:absolute;bottom:18px;right:18px;border:1px solid #ffffff50;width:28px;height:28px;border-radius:50%;display:grid;place-items:center}.art{height:100px;position:relative;margin-top:22px;display:grid;place-items:center}.art svg{width:98px;height:98px;filter:drop-shadow(0 8px 4px #17343b25)}.primary{width:100%;border:1px solid #f1d7ad;border-radius:12px;min-height:53px;padding:15px 18px;color:#674433;background:linear-gradient(#f7d4aa,#e8b58a);box-shadow:0 4px 0 #a77657,inset 0 1px 0 #fff8;font-weight:700;letter-spacing:1px;display:flex;align-items:center;justify-content:space-between}.secondary{width:100%;min-height:46px;border:1px solid #bec4a24d;background:#12353d35;color:#e7dfc9;border-radius:11px;padding:12px;font-size:12px}.textbtn{background:none;border:0;color:#ced4c1;font-size:11px;padding:13px}.footer{margin-top:auto;padding-top:26px;display:flex;justify-content:space-between;font-size:8px;letter-spacing:1px;color:#99b5ab}.panel{background:#fff7e9;color:#264a4d;border:1px solid #dbc89f;border-radius:20px;padding:23px;box-shadow:0 7px 20px #0b283229;margin:22px 0}.panel p{font-size:12px;line-height:1.9;color:#728077}.field{display:block;font-size:11px;margin:18px 0 7px;color:#788278}.panel input{width:100%;padding:14px;border:1px solid #c7d0c0;border-radius:10px;background:#fffdf6;color:#28565b;font-size:16px}.panel input.code{font:24px monospace;letter-spacing:6px;text-align:center;text-transform:uppercase}.room-code{font:34px Georgia;letter-spacing:8px;margin:12px 0;color:#2e6267}.pill{display:inline-block;padding:5px 9px;border:1px solid #b5c6b4;border-radius:20px;font-size:9px;background:#edf1e3;color:#53705c}.players{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:23px 0}.player{text-align:center;font-size:10px;color:#cad8ca}.avatar{width:48px;height:48px;border-radius:17px;background:linear-gradient(145deg,#f7dab0,#d69d76);border:2px solid #f6e0ba;color:#654b35;display:grid;place-items:center;font:600 20px 'Songti TC',serif;margin:0 auto 8px;box-shadow:0 4px 0 #0e323b}.player:nth-child(2) .avatar{background:linear-gradient(135deg,#a8c9bb,#619589);color:#173f43}.player:nth-child(3) .avatar{background:linear-gradient(135deg,#e6d6a7,#bda367)}.player:nth-child(4) .avatar{background:linear-gradient(135deg,#b9c7cd,#73949f)}.player small{display:block;color:#8fab9b;font-size:8px;margin-top:5px}.player.done .avatar{outline:2px solid #c5d6ad;outline-offset:3px}.subnav{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#b8cabc;margin-bottom:12px}.progress{display:flex;gap:5px;margin-bottom:19px}.progress i{height:3px;flex:1;background:#91b3a42c;border-radius:4px}.progress i.on{background:#dfc38f}.question{text-align:center;margin:10px 0 24px;min-height:100px}.question h2{font-family:'PingFang TC',sans-serif;font-size:25px;font-weight:700;margin-top:13px;line-height:1.5}.answers{display:grid;gap:16px}.answer{position:relative;min-height:149px;padding:24px 22px;border:1px solid #a0bcb0;border-radius:18px;background:linear-gradient(135deg,#4a8180,#2d656c);color:#fff8e9;box-shadow:0 5px 0 #0f323b,inset 0 1px 0 #ffffff40;text-align:left;display:flex;align-items:center;gap:20px;transition:opacity .25s,transform .25s}.answer.b{background:linear-gradient(135deg,#ffe0b9,#e6b086);border-color:#f1d4ac;color:#674433;box-shadow:0 5px 0 #a67354,inset 0 1px 0 #fff8}.answer svg{width:27px;height:27px;flex-shrink:0;opacity:.8}.answer strong{font-size:21px;line-height:1.6}.answer.chosen{animation:pop .35s ease}.answer.dim{opacity:.24;transform:scale(.96)}.status{text-align:center;font-size:11px;color:#c8d2bc;line-height:1.9;margin:25px 0 18px}.status strong{display:block;font:600 20px 'Songti TC',serif;color:#f7e8c5;margin-bottom:7px}.actions{margin-top:auto;padding-top:20px;display:grid;gap:13px}.disclaimer{font-size:9px;line-height:1.7;color:#8fae9f;text-align:center;margin-top:15px}.chart{height:205px;display:flex;gap:30px;align-items:end;justify-content:center;border-bottom:1px solid #b6c6aa55;margin:10px 10px 0;padding:0 20px}.bar-col{width:42%;display:flex;flex-direction:column;align-items:center}.bar-col strong{font:600 33px Georgia;color:#fff1d3;margin-bottom:8px}.bar{width:100%;border:1px solid #a4c3b7;border-radius:10px 10px 0 0;background:linear-gradient(90deg,#3f7a7d,#81aaa0);transform-origin:bottom;animation:grow .65s cubic-bezier(.2,.8,.2,1) both;display:grid;place-items:center;box-shadow:inset 0 2px 0 #ffffff50}.bar.peach{background:linear-gradient(90deg,#dca27a,#ffddb4);border-color:#f0d2a8;color:#704c37}.bar svg{width:22px;height:22px}.legend{display:grid;grid-template-columns:1fr 1fr;gap:18px;text-align:center;margin:15px 0 0;font-size:13px;line-height:1.7}.legend small{display:block;color:#b2c5b6;font-size:10px;margin-top:5px}.mine{display:inline-block;border:1px solid #e3cca47a;padding:3px 9px;border-radius:20px;font-size:9px;color:#f0d8ae;margin-top:7px}.reaction{margin:22px 0 0;background:#0e303940;border:1px solid #a4b79a30;border-radius:14px;padding:17px;text-align:center;font:600 18px/1.6 'Songti TC'}.history{display:grid;gap:13px;margin-top:18px;text-align:left}.history div{border-bottom:1px solid #c6d4b72b;padding:9px 0;font-size:13px;line-height:1.8}.history small{display:block;color:#9eb7a7;font-size:9px}.intro{position:absolute;inset:0;background:radial-gradient(circle at center,#417873,#173f47);display:grid;place-content:center;text-align:center;z-index:20;pointer-events:none;animation:fade .85s both}.intro strong{font:italic 90px Georgia;color:#f3dab2;margin:10px}.intro span{font-size:10px;letter-spacing:4px}.intro p{font:600 20px 'Songti TC'}.error{color:#a45334!important;min-height:22px;margin-top:9px}.wait-pips{display:flex;justify-content:center;gap:8px;margin:30px}.wait-pips i{width:8px;height:8px;background:#e8c28f;border-radius:50%;animation:pulse 1s infinite}.wait-pips i:nth-child(2){animation-delay:.2s}.wait-pips i:nth-child(3){animation-delay:.4s}@keyframes pop{50%{transform:scale(1.025)}}@keyframes grow{from{transform:scaleY(.02)}to{transform:scaleY(1)}}@keyframes fade{0%,65%{opacity:1}100%{opacity:0}}@keyframes pulse{50%{opacity:.25;transform:translateY(-4px)}}@media(max-width:500px){body{background:#173f47}#game{margin:0;border:0;border-radius:0;min-height:100svh;box-shadow:none}.shell{min-height:100svh;padding-bottom:max(22px,env(safe-area-inset-bottom))}.shell:before{border-radius:18px}header{padding-top:max(24px,env(safe-area-inset-top))}.mode{height:290px}.home-title{padding:10px 0 15px}}@media(max-width:380px){.shell{padding-left:20px;padding-right:20px}.mode{padding:20px 12px;height:270px}.mode h3{font-size:22px}.answer{min-height:135px;padding:22px 17px;gap:14px}.answer strong{font-size:19px}.question h2{font-size:23px}.chart{height:180px}.home-title h1{font-size:37px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.intro{display:none}}

/* Pixel arcade skin; CSS pixel dimensions, not physical device pixels. */
:root{--teal:#245d64;--deep:#173d43;--peach:#edbd94;--cream:#fff6df}body{background:#dce6da;background-image:linear-gradient(#b8c9bd33 1px,transparent 1px),linear-gradient(90deg,#b8c9bd33 1px,transparent 1px);background-size:16px 16px;color:#fff6df}.viewport-stage{overflow:auto;padding:22px 15px 35px}#game{width:390px;max-width:none;margin:0 auto;min-height:844px;border:4px solid #173d43;border-radius:0;background:#2b6065;box-shadow:7px 7px 0 #879e91;overflow:hidden}.shell{min-height:836px;padding:0 18px 20px;background:#2b6065}.shell:before{inset:7px;border:2px solid #84a59a44;border-radius:0}.shell:after{display:none}header{padding:22px 0 16px}.wordmark{font:800 21px 'PingFang TC',sans-serif;letter-spacing:3px;color:#fff6df;text-shadow:2px 2px #173d43}.smallbtn{border-radius:0;background:#173d43;border:2px solid #9db6a4;box-shadow:2px 2px #102d33}.home-title{padding:10px 0 16px}h1,h2,h3{font-family:'PingFang TC',sans-serif;font-weight:800}h1{font-size:32px;letter-spacing:1px}h2{font-size:25px}.crest{border:0;border-radius:0;box-shadow:none;height:75px;width:90px}.crest svg{width:80px;height:80px}.eyebrow{color:#ebd6a3;font:700 10px monospace;letter-spacing:2px}.muted{color:#c2d6c3}.modes{gap:14px;margin:12px 0 24px}.mode,.mode.peach{border-radius:0;border:3px solid #142f35;background:#42777a;box-shadow:4px 5px 0 #142f35,inset 0 0 0 3px #83a89a;height:279px;padding:17px 13px;color:#fff6df}.mode.peach{background:#edbd94;color:#523d31;box-shadow:4px 5px 0 #142f35,inset 0 0 0 3px #ffe0b3}.mode:before,.answer:before{display:none}.mode .num{font:700 10px monospace}.mode h3{font:800 23px 'PingFang TC',sans-serif;margin:14px 0 8px;letter-spacing:1px}.mode .go{border-radius:0;border:2px solid currentColor}.art{margin-top:14px;height:100px}.art svg{filter:none;width:100px;height:100px;image-rendering:pixelated}.primary,.secondary{border-radius:0;border:3px solid #14373e;background:#edbd94;color:#503b30;box-shadow:4px 4px 0 #14373e;min-height:50px}.secondary{background:#42777a;color:#fff6df;border-color:#173d43;box-shadow:3px 3px 0 #173d43}.primary:active,.secondary:active{transform:translate(3px,3px);box-shadow:none}.panel{border:3px solid #14373e;border-radius:0;box-shadow:5px 5px 0 #14373e;background:#fff6df;padding:19px}.panel input{border:2px solid #557e76;border-radius:0;background:#fffdf1}.pill,.mine{border-radius:0;border:2px solid #718b73;background:#e1eacb;color:#2b5d54}.avatar{border-radius:0;background:#edbd94!important;border:2px solid #173d43;box-shadow:3px 3px 0 #173d43}.avatar svg{width:42px;height:42px}.player.done .avatar{outline:2px solid #e9d294;outline-offset:3px}.question{min-height:80px;margin:7px 0 18px}.question h2{font-size:23px;margin-top:10px}.answers{gap:15px}.answer,.answer.b{border-radius:0;background:#42777a;border:3px solid #173d43;box-shadow:4px 5px 0 #173d43,inset 0 0 0 2px #9bb6a269;padding:15px 14px;gap:13px;min-height:174px}.answer.b{background:#edbd94;color:#503b30;box-shadow:4px 5px 0 #173d43,inset 0 0 0 2px #ffe0b3}.answer svg{width:90px;height:110px;opacity:1;flex-shrink:0;image-rendering:pixelated}.answer strong{font-size:19px;line-height:1.6}.answer:active{transform:translate(3px,4px);box-shadow:none}.question .eyebrow{font-size:10px}.progress i{border-radius:0;height:5px;background:#173d43}.progress i.on{background:#edbd94}.status strong{font:800 19px 'PingFang TC'}.bar,.bar.peach{border-radius:0;background:#7ca59a;border:3px solid #173d43;box-shadow:inset 3px 0 #a9c0a5}.bar.peach{background:#edbd94;border-color:#173d43;box-shadow:inset 3px 0 #ffe0b3}.bar svg{display:none}.bar-col strong{font:800 30px monospace}.chart{height:180px;border-bottom:3px solid #173d43;gap:25px;padding:0 15px}.legend{gap:12px;font-size:12px}.legend .scene{display:block;width:78px;height:78px;margin:0 auto 4px}.reaction{border-radius:0;border:2px solid #9eb29866;background:#173d4355;font:700 16px/1.7 'PingFang TC',sans-serif;padding:12px;margin-top:17px}.intro{background:#245d64}.intro strong{font:900 90px monospace;text-shadow:5px 5px #14373e}.intro p{font:700 18px 'PingFang TC'}.disclaimer{color:#bbd0b9}.wait-pips i{border-radius:0}.footer{color:#acc5b2}.room-code{font:800 29px monospace}.history div{font-size:12px}.textbtn{color:#e0e6cf}.scene{shape-rendering:crispEdges}.player small{color:#c2d4b8}.subnav{color:#d3deca}.error{font-size:11px!important}@media(max-width:500px){#game{width:390px;min-height:844px;border:4px solid #173d43;box-shadow:5px 5px #879e91}.shell{min-height:836px}.viewport-stage{padding:15px 8px 25px}.mode{height:279px}}@container game (max-width:350px){.shell{padding:0 14px 18px}.mode,.mode.peach{padding:15px 10px;height:260px}.mode h3{font-size:20px}.answer svg{width:72px}.answer strong{font-size:17px}.question h2{font-size:21px}h1{font-size:28px}.players{gap:5px}.player{font-size:9px}.question{min-height:75px}.legend{font-size:11px}}#game{container-type:inline-size;container-name:game}
 .shell{min-height:var(--stage-height,844px)}
/* Touch-first controls and content-sized mobile scenes. */
header{gap:12px;padding:20px 0 15px;flex-wrap:wrap}.header-actions{display:flex;gap:8px;align-items:center;margin-left:auto}.smallbtn{width:auto;min-width:44px;min-height:44px;padding:8px 10px;font-size:11px;font-weight:700}.musicbtn{min-width:78px}.textbtn{min-height:46px;padding:12px 16px;border:2px solid #91ab9366;background:#204d55;color:#fff6df;box-shadow:2px 2px 0 #173d43;font-size:12px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;margin:7px 0}.subnav{gap:10px;align-items:center;margin-bottom:13px}.subnav .textbtn{padding:10px 12px!important;min-height:44px;margin:0}.subnav>span{font-size:11px;line-height:1.7;text-align:right}.primary,.secondary{min-height:54px;font-size:14px}.actions{margin-top:24px;padding-top:0}.footer{margin-top:24px;padding-top:14px;border-top:2px solid #91ab9326;font-size:9px}.shell{min-height:0!important;padding-bottom:22px}#game{min-height:0!important}.home-title{padding:3px 0 12px}.home-title .crest{height:58px;margin-bottom:11px}.home-title .crest svg{height:64px}.home-title p{margin-top:9px}.modes{margin-top:8px;margin-bottom:21px}.mode,.mode.peach{height:266px}.mode p{font-size:12px}.mode .go{width:34px;height:34px}.question{min-height:0;margin:3px 0 18px}.question h2{margin-top:10px}.answers{gap:17px}.answer,.answer.b{min-height:158px}.status{margin:21px 0 13px;font-size:12px}.players{margin:20px 0}.wait-pips{margin:20px}.panel{margin:18px 0}.disclaimer{font-size:10px;line-height:1.8;margin-top:14px}.field{font-size:12px}.room-code{margin:17px 0}.chart{height:168px}.legend small{font-size:11px}.mine{font-size:10px}.reaction{margin-top:17px}.history{gap:9px}.history div{font-size:14px}.history small{font-size:11px}@container game (max-width:350px){header{gap:8px}.wordmark{font-size:18px;letter-spacing:2px}.header-actions{gap:5px}.smallbtn{padding:8px 7px;font-size:10px}.musicbtn{min-width:70px}.mode,.mode.peach{height:247px}.art{height:82px}.art svg{width:83px;height:83px}.mode p{font-size:11px}.answer,.answer.b{min-height:145px;padding:14px 12px}.answer svg{width:67px;height:90px}.subnav>span{font-size:10px}.question h2{font-size:20px}.chart{height:150px}.legend .scene{width:65px;height:65px}}
.ui-icon{width:17px;height:17px;flex-shrink:0;vertical-align:middle}.smallbtn,.textbtn{display:inline-flex;align-items:center;justify-content:center;gap:7px}.primary .ui-icon{width:20px;height:20px}.legend{align-items:start;margin-top:23px}.choice-picture{position:relative;width:100px;height:105px;margin:0 auto 10px;border:3px solid transparent;display:grid;place-items:center}.choice-picture.selected{border-color:#ffe2a0;box-shadow:3px 3px 0 #173d43;background:#ffe2a00a}.choice-picture .scene{width:78px;height:78px;margin:0}.choice-tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);white-space:nowrap;background:#ffe2a0;color:#284c4d;font-weight:800;font-size:10px;padding:3px 7px;display:flex;gap:4px;align-items:center}.choice-tag .ui-icon{width:12px;height:12px}.choice-name{display:block;line-height:1.8}#music-dialog{width:min(350px,calc(100% - 30px));background:#fff6df;border:4px solid #173d43;color:#244e53;padding:22px;box-shadow:7px 7px #173d43}#music-dialog::backdrop{background:#102d39bb}.music-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.music-head h2{font-size:21px}.music-head button{min-width:44px;min-height:44px;background:#edbd94;border:2px solid #173d43}.tracks{display:grid;gap:9px;margin:17px 0}.tracks button{min-height:56px;background:#e0e9d4;border:2px solid #557d72;text-align:left;padding:10px 12px;color:#244e53;font-weight:700}.tracks button[aria-pressed=true]{background:#245d64;color:#fff6df;border-color:#173d43}.tracks small{display:block;font-weight:400;font-size:10px;margin-top:4px}.volume-label{display:flex;justify-content:space-between;font-size:12px;margin-top:17px}#music-volume{width:100%;height:44px;accent-color:#245d64}#music-dialog p{font-size:10px;line-height:1.8;color:#697f6e;margin-top:16px}#music-dialog .primary{margin-top:10px}@container game (max-width:350px){.choice-picture{width:86px;height:94px}.choice-picture .scene{width:68px;height:68px}.header-actions{gap:5px}.smallbtn{gap:4px}.ui-icon{width:14px;height:14px}}
/* Mode-card entry keys: original pixel sprite, inherits card color. */
.mode .go{width:34px;height:34px;right:16px;bottom:18px;border:2px solid currentColor;border-radius:0;background:transparent;box-shadow:3px 3px 0 currentColor;display:grid;place-items:center;transition:transform .12s,box-shadow .12s}.mode .go svg{width:23px;height:23px;display:block;shape-rendering:crispEdges}.mode:hover .go{transform:translateX(2px)}.mode:active .go{transform:translate(3px,3px);box-shadow:none}@media(prefers-reduced-motion:reduce){.mode .go{transition:none}}
/* Focus indication follows keyboard modality, including text inputs. */
input:focus,input:focus-visible,button:focus,button:focus-visible{outline:none}
html.keyboard-navigation input:focus,html.keyboard-navigation button:focus{outline:3px solid #edbd94;outline-offset:4px}
.return-home{position:relative;width:100%;padding-inline:48px;justify-content:center}.return-home>.ui-icon{position:absolute;left:18px;top:50%;transform:translateY(-50%)}

.round-complete{text-align:center;padding:8px 0 15px;position:relative}.finish-sprite{width:95px;height:95px;margin:0 auto 9px;animation:finishHop 1.8s steps(2,end) infinite}.finish-sprite svg{width:100%;height:100%}.round-complete h2{font-size:23px;margin:10px 0}.collection-slots{display:flex;justify-content:center;gap:9px;margin-top:20px}.collection-slots>span{width:28px;height:28px;background:#edbd94;color:#264d51;border:2px solid #173d43;box-shadow:2px 2px #173d43;display:grid;place-items:center;animation:collectIn .3s steps(4,end) both;animation-delay:var(--delay)}.collection-heading{display:flex;justify-content:space-between;align-items:center;border-top:2px solid #9db79b55;padding-top:18px;margin-top:5px;font-size:14px}.collection-heading>span{font:700 13px monospace;color:#edbd94}.collection-hint{font-size:10px;line-height:1.8;color:#c4d4bb;margin:8px 0 16px}.choice-collection{display:grid;gap:14px}.collect-card{position:relative;display:grid;grid-template-columns:67px minmax(0,1fr) 19px;gap:11px;align-items:center;text-align:left;color:#fff6df;background:#386c70;border:3px solid #173d43;box-shadow:4px 4px #173d43;padding:15px 12px;min-height:118px;animation:collectIn .4s steps(5,end) both;animation-delay:var(--delay)}.collect-card:nth-child(even){background:#426f6c}.collect-card:active{transform:translate(2px,2px);box-shadow:2px 2px #173d43}.collect-number{position:absolute;left:8px;top:7px;font:700 9px monospace;color:#edbd94}.collect-art{display:grid;place-items:center;background:#173d4333;border:2px solid #91b09a44;width:67px;height:76px;margin-top:9px}.collect-art .scene{width:61px;height:66px}.collect-copy small{display:block;font-size:9px;color:#bacfb8;line-height:1.5}.collect-copy>strong{display:block;font-size:14px;line-height:1.6;margin:5px 0 7px}.collect-label{display:inline-flex;align-items:center;gap:4px;font-size:9px;color:#f3d7a3}.collect-label svg{width:10px;height:10px}.collect-toggle{font-size:19px;font-weight:800;color:#edbd94}.collect-other{grid-column:1/-1;display:flex;gap:13px;border-top:2px dashed #a7bd9e55;padding-top:12px;margin-top:3px}.collect-other[hidden]{display:none}.collect-other .scene{width:55px;height:66px;flex-shrink:0;opacity:.8}.collect-other small{display:block;font-size:10px;color:#c7d4bb}.collect-other strong{display:block;font-size:12px;line-height:1.7;margin:4px 0}.collect-other em{font-size:9px;font-style:normal;color:#b0c6ac}@keyframes collectIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes finishHop{0%,70%,100%{transform:translateY(0)}35%{transform:translateY(-5px)}}@container game (max-width:350px){.collect-card{grid-template-columns:57px minmax(0,1fr) 15px;gap:9px;padding:13px 9px}.collect-art{width:57px}.collect-art .scene{width:53px}.collect-copy>strong{font-size:13px}.round-complete h2{font-size:21px}}@media(prefers-reduced-motion:reduce){.finish-sprite,.collect-card,.collection-slots>span{animation:none!important}}
/* Reserve label and bar lanes independently, including unanimous results. */
.chart{height:210px;margin-top:22px;padding-top:0;align-items:stretch;gap:24px;overflow:hidden}.bar-col{height:100%;min-width:0;display:grid;grid-template-rows:42px minmax(0,1fr);gap:8px;align-items:stretch}.bar-col>strong{font-size:28px;line-height:42px;margin:0;white-space:nowrap;text-align:center}.bar-space{height:100%;min-height:0;display:flex;align-items:flex-end}.bar-space>.bar{width:100%;max-height:100%;flex-shrink:0;box-sizing:border-box}.bar-space>.bar[style*="height:0%"]{border-top:0;border-bottom:0}.chart+.legend{margin-top:23px}@container game (max-width:350px){.chart{height:185px;gap:18px;margin-top:20px}.bar-col{grid-template-rows:36px minmax(0,1fr);gap:7px}.bar-col>strong{font-size:25px;line-height:36px}}

/* Home idle animation: separate SVG groups, bounded within the illustration. */
.home-title .pixel-person,.mode .pixel-person{animation:pixel-walk-body .72s steps(1,end) infinite}
.home-title .pixel-leg-left,.mode .pixel-leg-left{animation:pixel-walk-left .72s steps(1,end) infinite}
.home-title .pixel-leg-right,.mode .pixel-leg-right{animation:pixel-walk-right .72s steps(1,end) infinite}
@keyframes pixel-walk-body{0%,50%,100%{transform:translateY(0)}25%,75%{transform:translateY(-1px)}}
@keyframes pixel-walk-left{0%,100%{transform:translate(0,0)}25%{transform:translate(-1px,-3px)}50%{transform:translate(0,0)}75%{transform:translate(1px,1px)}}
@keyframes pixel-walk-right{0%,100%{transform:translate(0,0)}25%{transform:translate(1px,1px)}50%{transform:translate(0,0)}75%{transform:translate(-1px,-3px)}}
.award-intro{margin:20px 0 28px}.award-intro h2{font-size:25px;margin:12px 0}
.award-stage{display:flex;align-items:flex-end;gap:8px;padding-top:26px;margin-bottom:20px}
.award-podium{flex:1;min-width:0;color:var(--cream,#fff6df);background:#204b51;border:3px solid #173d43;box-shadow:3px 4px 0 #173d43;padding:12px 5px calc(16px + var(--rise));cursor:pointer;animation:award-arrive .5s steps(5,end) both;animation-delay:var(--delay)}
.award-podium svg{display:block;width:50px;height:50px;margin:0 auto 10px}.award-podium strong{display:block;font-size:14px;line-height:1.6}.award-podium span{display:block;font-size:11px;margin-top:8px;color:#c8d8cc}.award-podium[aria-pressed=true]{border-color:#edbd94;background:#376b70}
@keyframes award-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.award-detail{padding:18px 12px;border:2px solid #7ba49b;background:#244f55;text-align:center;margin:24px 0;line-height:1.7}.award-detail h3{font-size:19px;margin:10px 0}.award-detail p{font-size:14px}
.award-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}.award-options>div{min-width:0;padding:8px;border:2px solid transparent;display:flex;flex-direction:column;align-items:center}.award-options .award-chosen{border-color:#edbd94;background:#386b6f}.award-options svg{width:80px;height:80px;max-width:100%}.award-options strong{font-size:14px;line-height:1.5}.award-options b{font-size:24px;margin-top:8px}.award-options small{font-size:12px;color:#edbd94}
.all-choices summary{min-height:48px;padding:14px;background:#204b51;border:2px solid #7ba49b;cursor:pointer;font-weight:bold;margin-bottom:16px}
@media(prefers-reduced-motion:reduce){.pixel-person,.pixel-leg-left,.pixel-leg-right,.award-podium{animation:none!important}}

/* Each home character has its own idle personality. */
.home-title .pixel-person{animation:pixel-sway 2.4s steps(4,end) infinite;transform-origin:40px 55px}
.home-title .pixel-leg-left,.home-title .pixel-leg-right,
.mode.peach .pixel-leg-left,.mode.peach .pixel-leg-right{animation:none}
.mode.peach .pixel-person:nth-of-type(1){animation:friend-sway 1.05s ease-in-out infinite;transform-origin:19px 64px}
.mode.peach .pixel-person:nth-of-type(1) .pixel-arm-left{animation:pixel-wave .65s ease-in-out infinite}
.mode.peach .pixel-person:nth-of-type(2){animation:friend-sway 1.25s ease-in-out infinite reverse;transform-origin:57px 64px}
.mode.peach .pixel-person:nth-of-type(3){animation:pixel-hop .85s ease-in-out infinite}
@keyframes pixel-sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes friend-sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes pixel-wave{0%,100%{transform:rotate(115deg)}50%{transform:rotate(135deg)}}
@keyframes pixel-hop{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media(prefers-reduced-motion:reduce){.pixel-person,.pixel-leg-left,.pixel-leg-right,.pixel-arm-left,.pixel-arm-right{animation:none!important}}

/* Header mascot patrol stays inside the 80px SVG viewBox. */
.home-title .pixel-person{animation:mascot-patrol 5s linear infinite;transform-origin:40px 55px}
.home-title .pixel-leg-left{animation:pixel-walk-left .6s ease-in-out infinite}
.home-title .pixel-leg-right{animation:pixel-walk-right .6s ease-in-out infinite}
@keyframes mascot-patrol{0%,100%{transform:translateX(-12px)}50%{transform:translateX(12px)}}
@media(prefers-reduced-motion:reduce){.home-title .pixel-person,.home-title .pixel-leg-left,.home-title .pixel-leg-right{animation:none!important}}

/* A small front-facing hop, preserving the original sprite. */
.home-title .pixel-person{transform-origin:40px 60px;animation:mascot-cheer 2.3s ease-in-out infinite}
.home-title .pixel-leg-left,.home-title .pixel-leg-right{animation:none}
.home-title .pixel-arm-left{animation:mascot-cheer-left 2.3s ease-in-out infinite}
.home-title .pixel-arm-right{animation:mascot-cheer-right 2.3s ease-in-out infinite}
@keyframes mascot-cheer{0%,18%,62%,100%{transform:translateY(0)}26%{transform:translateY(2px)}40%{transform:translateY(-7px)}54%{transform:translateY(1px)}}
@keyframes mascot-cheer-left{0%,22%,62%,100%{transform:rotate(0)}38%,44%{transform:rotate(95deg)}}
@keyframes mascot-cheer-right{0%,22%,62%,100%{transform:rotate(0)}38%,44%{transform:rotate(-95deg)}}
@media(prefers-reduced-motion:reduce){.home-title .pixel-person,.home-title .pixel-arm-left,.home-title .pixel-arm-right{animation:none!important}}

.landing-shadow{transform-origin:40px 63px;animation:landing-shadow 2.3s ease-in-out infinite}
.landing-dust{opacity:0;pointer-events:none;animation:landing-dust-left 2.3s linear infinite}
.dust-right{animation-name:landing-dust-right}
@keyframes landing-shadow{0%,26%,68%,100%{transform:scaleX(1);opacity:.35}40%{transform:scaleX(.65);opacity:.18}54%{transform:scaleX(1.3);opacity:.5}}
@keyframes landing-dust-left{0%,51%{opacity:0;transform:translate(0,0)}54%{opacity:.85;transform:translate(-1px,0)}64%{opacity:.5;transform:translate(-6px,-3px)}73%,100%{opacity:0;transform:translate(-10px,-2px)}}
@keyframes landing-dust-right{0%,51%{opacity:0;transform:translate(0,0)}54%{opacity:.85;transform:translate(1px,0)}64%{opacity:.5;transform:translate(6px,-3px)}73%,100%{opacity:0;transform:translate(10px,-2px)}}
@media(prefers-reduced-motion:reduce){.landing-shadow{animation:none}.landing-dust{animation:none;display:none}}



html body{background:#2b6065;background-image:none}
html .viewport-stage{padding:0;overflow:visible}
html #game{width:100%;max-width:500px;min-height:100svh!important;margin:0 auto;border:0;box-shadow:none}
html .shell{min-height:100svh!important;padding-top:env(safe-area-inset-top,0px);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-bottom:max(22px,env(safe-area-inset-bottom,0px))}
html .footer{margin-top:auto;padding-top:20px}
input{font-size:16px}
button,summary{touch-action:manipulation}
#music-dialog{max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain}

/* Friend rooms: shared seats and doorplate, with the existing pixel palette. */
.room-heading{text-align:center;margin:12px 0 16px}.room-heading h2{font-size:23px;margin-top:8px}
.room-notice{background:#edbd94;color:#173d43;border:2px solid #173d43;padding:10px 8px;text-align:center;font-size:13px;font-weight:800}

.room-form{margin:16px 0}.room-form p{font-size:14px;line-height:1.7}.room-form .room-help{font-size:12px;margin-top:10px}.room-form .error:empty{display:none}
.room-role{padding:8px;background:#204b51;border:2px solid #7ba49b}


.room-status{text-align:center;font-size:13px;line-height:1.7;margin:10px 0 20px}.room-wait-status{text-align:center;margin:16px 0 20px}.room-wait-status strong{font-size:17px}.room-wait-status p{font-size:12px;color:#c8d8cc;margin-top:10px}.room-wait-track{height:8px;background:#173d43;margin:12px auto 0;max-width:240px}.room-wait-track span{display:block;height:100%;background:#edbd94}
@keyframes room-welcome{50%{transform:translateY(-3px)}}@keyframes room-nod{0%,70%,100%{transform:translateY(0)}80%{transform:translateY(2px)}}@keyframes room-think{50%{transform:translateX(2px)}}
@media(prefers-reduced-motion:reduce){}

/* Fixed application viewport. Only the central region scrolls. */
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{height:100dvh;display:flex;flex-direction:column}

.viewport-stage,html .viewport-stage{flex:1;min-height:0;overflow:hidden;padding:0;display:flex;justify-content:center}
#game,html #game{height:100%;min-height:0!important;max-width:500px;margin:0;box-shadow:none}
.shell,html .shell{height:100%;min-height:0!important;padding:env(safe-area-inset-top,0px) max(12px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(12px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;overflow:hidden}
.shell>header{flex-shrink:0;padding:12px 0;z-index:2;background:#2b6065}
.app-content{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;padding:0 4px 16px;overflow-wrap:anywhere}
.app-dock{flex-shrink:0;padding:10px 4px 12px;border-top:2px solid #7ba49b55;background:#2b6065}
.app-dock[hidden]{display:none}.app-dock .actions{margin:0;gap:8px}.app-dock button{min-height:44px}.app-dock .primary,.app-dock .secondary{padding:12px;margin:0}.app-dock .textbtn{margin:0;min-height:44px}
button:disabled,.primary:disabled{opacity:.45;filter:saturate(.45);box-shadow:none;cursor:not-allowed;transform:none!important}
button:disabled:active{transform:none!important;box-shadow:none}

.round-heading h2{font-size:26px;margin:8px 0}.round-heading p,.round-source{font-size:12px;line-height:1.7}.round-source{color:#c8d8cc;margin:12px 0 18px}.round-highlights{display:grid;gap:18px;margin-bottom:20px}.round-highlight{border:2px solid #7ba49b;padding:14px 10px;background:#28565c}.highlight-label{display:flex;align-items:center;gap:6px;color:#edbd94;font-weight:800;font-size:13px}.round-highlight h3{font-size:19px;line-height:1.5;margin:10px 0 6px}.round-highlight>p{font-size:12px;color:#c8d8cc;line-height:1.7}.highlight-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px}.highlight-choices>div{display:flex;align-items:center;flex-direction:column;text-align:center;padding:8px 4px;border-top:3px solid #7ba49b}.highlight-choices>.picked{border-color:#edbd94;background:#376b70}.highlight-choices svg{width:72px;height:72px}.highlight-choices strong{font-size:13px;line-height:1.6}.highlight-choices span{font-size:23px;font-weight:800;margin-top:auto;padding-top:8px}.highlight-choices small{font-size:11px;color:#edbd94;margin-top:5px}
@media(max-height:700px){.shell>header{padding:7px 0}.app-dock{padding:6px 4px 8px}.home-title{padding:4px 0}.home-title .crest{margin-bottom:4px;height:52px}.home-title h1{font-size:27px}.home-title p{margin-top:4px}.modes{margin:10px 0}.mode,.mode.peach{height:220px;padding:14px 10px}.mode .art{height:75px}.mode h3{font-size:21px}.question{margin:8px 0}.answer,.answer.b{min-height:120px;padding:10px}.answer .scene{height:65px;width:65px}.answers{gap:10px}.room-heading{margin:5px 0 12px}}

/* Keep attribution beneath the action dock, outside scrolling content. */
.shell>.app-footer,html .shell>.app-footer{flex-shrink:0;margin:0;padding:4px 4px 8px;border:0;font-size:10px;line-height:1.4}

/* Home groups all mode entrances together; other screens keep their action dock. */
.home-shell .home-title{padding:4px 0 12px}
.home-shell .home-title .crest{margin-bottom:8px;height:62px}
.home-shell .home-title h1{font-size:32px}
.home-shell .home-title p{margin-top:6px}
.home-shell .modes{margin:10px 0 16px}
.home-shell .app-content>.secondary{margin:0;min-height:44px;padding:12px}
.home-shell .disclaimer{margin-top:12px}
@media(max-height:700px){.home-shell .home-title{padding:0 0 6px}.home-shell .home-title .crest{height:42px;margin-bottom:2px}.home-shell .home-title h1{font-size:27px}.home-shell .mode,.home-shell .mode.peach{height:204px}.home-shell .mode .art{height:63px}.home-shell .modes{margin:6px 0 12px}.home-shell .disclaimer{margin-top:8px}}

/* Pause is one compact game menu, not a separate distant action dock. */
.pause-shell .app-content{display:flex;flex-direction:column;padding:12px 6px 18px}
.pause-menu{flex-shrink:0;margin:auto 0;background:#244f55;border:3px solid #7ba49b;box-shadow:4px 4px 0 #173d43;padding:16px;text-align:center}
.pause-topline{display:flex;align-items:center;gap:8px;font-weight:800;font-size:12px;color:#edbd94}.pause-topline>span:last-child{margin-left:auto;color:#bcd0be;font-weight:400}
.pause-symbol{width:13px;height:16px;border-left:4px solid #edbd94;border-right:4px solid #edbd94}
.pause-character{position:relative;width:90px;height:82px;margin:12px auto 0}.pause-character>.scene{width:80px;height:80px}.pause-bubble{position:absolute;right:-10px;top:8px;background:#fff6df;color:#234a50;border:3px solid #173d43;padding:0 5px;font:bold 20px monospace}
.pause-menu h2{font-size:24px;line-height:1.4;margin:6px 0 16px}.pause-progress{font-size:12px;color:#edbd94}.pause-progress>div{display:flex;justify-content:center;gap:7px;margin:9px 0 14px}.pause-progress i{width:24px;height:8px;background:#173d43;border:1px solid #7ba49b}.pause-progress i.complete{background:#edbd94;border-color:#edbd94}
.pause-note{font-size:12px;line-height:1.8;color:#c8d8cc}.pause-actions{display:grid;gap:10px;margin-top:18px}.pause-actions .primary,.pause-actions .secondary{margin:0;min-height:44px;padding:12px;text-align:left}
@media(max-height:650px){.pause-shell .app-content{padding-top:4px;padding-bottom:10px}.pause-menu{padding:12px}.pause-character{height:58px;margin-top:5px}.pause-character>.scene{height:60px;width:60px}.pause-menu h2{font-size:21px;margin:4px 0 10px}.pause-progress>div{margin:6px 0 9px}.pause-actions{margin-top:12px;gap:8px}}

.pause-actions .secondary{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pause-actions .secondary .ui-icon{width:20px;height:20px}

/* Quiet waiting animation for the pause character. */
.pause-character>.scene .pixel-person{animation:pause-breathe 2.2s ease-in-out infinite}
.pause-bubble{display:flex;align-items:center;gap:5px;padding:8px 7px;min-height:25px}
.pause-bubble i{display:block;width:3px;height:3px;background:#234a50;animation:pause-dot 1.5s ease-in-out infinite}
.pause-bubble i:nth-child(2){animation-delay:.18s}.pause-bubble i:nth-child(3){animation-delay:.36s}
@keyframes pause-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}
@keyframes pause-dot{0%,45%,100%{transform:translateY(0)}22%{transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.pause-character>.scene .pixel-person,.pause-bubble i{animation:none!important}}



/* Player check-in: compact game identity panel and room-code checkpoint. */
.entry-heading{margin:12px 0 18px}.entry-heading h2{font-size:25px;margin-top:8px;line-height:1.5}
.entry-form{background:#244f55;border:3px solid #173d43;box-shadow:4px 4px #173d43;padding:16px;margin:16px 0}
.entry-player{display:flex;align-items:center;gap:14px;padding-bottom:16px;margin-bottom:18px;border-bottom:2px dashed #7ba49b66}.entry-avatar{position:relative;flex-shrink:0;width:84px;height:88px;background:#376b70;border:2px solid #7ba49b;display:grid;place-items:center}.entry-avatar>.scene{width:76px;height:76px;z-index:1}.entry-platform{position:absolute;bottom:13px;height:5px;width:45px;background:#173d43;border-top:2px solid #edbd94}.entry-chip{display:inline-block;font-size:11px;color:#173d43;background:#edbd94;padding:4px 7px}.entry-player strong{display:block;font-size:21px;margin:7px 0 4px}.entry-player p{font-size:12px;line-height:1.7;color:#c8d8cc}
.entry-step{display:flex;gap:10px;align-items:center;margin-bottom:10px}.entry-step-number{display:grid;place-items:center;width:29px;height:29px;flex-shrink:0;background:#edbd94;color:#173d43;font:bold 12px monospace}.entry-step label{font-size:15px;font-weight:700}.entry-step small{display:block;font-size:10px;color:#c8d8cc;font-weight:400;margin-top:3px}.entry-form input{width:100%;min-height:48px;background:#fff6df;border:3px solid #7ba49b;color:#234a50;padding:10px 12px;font-size:18px}.entry-form .code{font-size:24px;letter-spacing:5px;margin:0}.entry-form .entry-help,.entry-form .room-help{font-size:11px;line-height:1.7;color:#c8d8cc;margin:8px 0 0}.entry-code-zone{border-top:2px dashed #7ba49b66;margin-top:18px;padding-top:18px}.entry-route{display:flex;align-items:center;gap:9px;margin-top:20px;color:#edbd94}.entry-route span{display:flex;align-items:center;gap:5px;font-size:12px}.entry-route i{flex:1;border-top:2px dotted #7ba49b}.entry-form .error{color:#ffe2a0;font-size:13px;margin-top:12px}.entry-form .error:empty{display:none}
@media(max-height:650px){.entry-heading{margin:5px 0 10px}.entry-heading h2{font-size:22px}.entry-form{padding:12px;margin:10px 0}.entry-player{padding-bottom:10px;margin-bottom:12px}.entry-avatar{height:66px;width:66px}.entry-avatar>.scene{width:60px;height:60px}.entry-player strong{font-size:19px}.entry-code-zone{margin-top:12px;padding-top:12px}}

/* Shared action groups: identical geometry and label/icon alignment. */
.app-dock .actions,.pause-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.app-dock .actions>button,.pause-actions>button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:52px;height:auto;margin:0;padding:12px 14px;border:3px solid #173d43;box-sizing:border-box;font-size:15px;font-weight:700;line-height:22px;text-align:left}
.app-dock .actions>button>.ui-icon,.app-dock .actions>button>span,.pause-actions>button>span{flex-shrink:0;display:flex;align-items:center}
.app-dock .actions>button .ui-icon,.pause-actions>button .ui-icon{width:20px;height:20px}

/* Fit check-in into the available app height, not the browser's outer height. */
.setup-shell .app-content{container-type:size;container-name:entry-viewport}
.setup-shell .entry-heading{margin:4px 0 10px}
.setup-shell .entry-heading h2{font-size:23px;margin-top:4px}
.setup-shell .entry-form{padding:12px;margin:10px 0 4px}
.setup-shell .entry-player{gap:10px;padding-bottom:10px;margin-bottom:12px}
.setup-shell .entry-avatar{width:56px;height:56px}
.setup-shell .entry-avatar>.scene{width:52px;height:52px}
.setup-shell .entry-platform{width:32px;bottom:6px}
.setup-shell .entry-player strong{font-size:18px;margin:4px 0 0}
.setup-shell .entry-player p{display:none}
.setup-shell .entry-chip{padding:2px 6px;font-size:10px}
.setup-shell .entry-step{margin-bottom:6px}
.setup-shell .entry-step label{font-size:14px}
.setup-shell .entry-step small{display:inline;margin-left:7px}
.setup-shell .entry-step-number{width:24px;height:24px}
.setup-shell .entry-form input{min-height:44px;height:44px;font-size:16px;padding:6px 10px}
.setup-shell .entry-form .code{font-size:22px}
.setup-shell #nick-help{display:none}
.setup-shell .entry-code-zone{margin-top:12px;padding-top:12px}
.setup-shell .entry-route{margin-top:12px}
@container entry-viewport (max-height:520px){
 .entry-heading .eyebrow{display:none}
 .setup-shell .entry-heading{margin:0 0 6px}
 .setup-shell .entry-heading h2{font-size:20px;margin:0}
 .setup-shell .entry-form{padding:10px;margin:6px 0 0}
 .setup-shell .entry-player{padding-bottom:6px;margin-bottom:8px}
 .setup-shell .entry-avatar{width:42px;height:42px}
 .setup-shell .entry-avatar>.scene{width:40px;height:40px}
 .setup-shell .entry-player>div:last-child{display:flex;align-items:center;gap:8px}
 .setup-shell .entry-player strong{font-size:16px;margin:0}
 .setup-shell .entry-code-zone{margin-top:8px;padding-top:8px}
 .setup-shell .entry-step{margin-bottom:4px}
 .setup-shell .entry-step small{font-size:9px}
 .setup-shell .room-notice{padding:6px;font-size:12px}
 .setup-shell .disclaimer{margin:5px 0;font-size:9px}
}

@container entry-viewport (max-height:520px){.setup-shell .disclaimer{display:none}.setup-shell .entry-form .room-help{font-size:10px;line-height:1.4;margin-top:4px}.setup-shell .entry-heading h2{line-height:1.3}}

/* Compact lobby: visible occupancy and sixteen potential player positions. */
.lobby-shell .app-content{container-type:size;container-name:lobby-viewport}
.lobby-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:8px 0 12px}.lobby-top h2{font-size:22px;margin:5px 0 0}.lobby-top .room-role{white-space:nowrap;font-size:11px}
.lobby-room-code{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:2px solid #173d43}.lobby-room-code span{font-size:12px;color:#c8d8cc}.lobby-room-code strong{font:700 25px monospace;letter-spacing:3px}
.lobby-count{display:flex;align-items:center;justify-content:space-between;margin:12px 0 10px}.lobby-count strong{font-size:16px;color:#edbd94}.lobby-count>span{font-size:12px;color:#c8d8cc}
.lobby-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.lobby-slot{position:relative;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px dashed #7ba49b66;background:#244f5544;height:73px;padding:3px}.lobby-slot.joined{border:2px solid #7ba49b;background:#376b70}.lobby-slot svg{width:44px;height:44px;flex-shrink:0}.lobby-slot>span{font-size:11px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lobby-slot.empty>span{color:#9bbbad}.lobby-slot .slot-plus{font-size:20px;line-height:35px}.lobby-slot b{position:absolute;right:2px;top:2px;font-size:9px;font-weight:400;color:#edbd94}.lobby-hint{font-size:12px;line-height:1.5;color:#c8d8cc;text-align:center;margin:10px 0 0}
@container lobby-viewport (max-height:520px){.lobby-top{margin:2px 0 6px}.lobby-top .eyebrow{display:none}.lobby-top h2{font-size:19px;margin:0}.lobby-room-code{padding:7px 0}.lobby-room-code strong{font-size:22px}.lobby-count{margin:8px 0}.lobby-grid{gap:5px}.lobby-slot{height:47px;padding:1px}.lobby-slot svg{width:29px;height:29px}.lobby-slot>span{font-size:10px}.lobby-slot .slot-plus{line-height:23px;font-size:17px}.lobby-hint{font-size:10px;margin-top:6px}.lobby-shell .room-notice{padding:5px;font-size:11px}.lobby-shell .disclaimer{font-size:9px;line-height:1.3;margin-top:5px}}

@container lobby-viewport (max-height:390px){.lobby-slot{height:36px;flex-direction:row;gap:2px}.lobby-slot svg{width:24px;height:28px}.lobby-slot>span{font-size:9px}.lobby-slot b{display:none}.lobby-count{margin:5px 0}.lobby-room-code{padding:4px 0}.lobby-hint{margin-top:4px}.lobby-shell .disclaimer{margin-top:3px}}

/* Center the whole check-in group while preserving overflow on short screens. */
.setup-shell .app-content{display:flex;flex-direction:column}
.setup-shell .app-content>*{flex-shrink:0}
.setup-shell .app-content::before,.setup-shell .app-content::after{content:"";display:block;flex:1 0 0px;min-height:0}

/* Only actual players occupy cards; the list owns overflow as the room grows. */
.lobby-shell .app-content{display:flex;flex-direction:column;overflow:hidden}
.lobby-shell .app-content>:not(.lobby-grid){flex-shrink:0}
.lobby-shell .lobby-grid{flex:1;min-height:72px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(110px,1fr);gap:10px;padding:3px 4px 4px;align-content:normal}
.lobby-shell .lobby-slot{height:auto;min-height:0;flex-direction:column;gap:3px;padding:8px;border:2px solid #7ba49b;background:#376b70}
.lobby-shell .lobby-slot svg{width:62px;height:62px}.lobby-shell .lobby-slot>span{font-size:14px;font-weight:700;max-width:100%}.lobby-shell .lobby-slot>small{font-size:10px;color:#edbd94}
.lobby-shell .lobby-hint{padding:6px 0;margin:4px 0 0}
@container lobby-viewport (max-height:430px){.lobby-shell .lobby-grid{grid-auto-rows:minmax(70px,1fr);gap:6px}.lobby-shell .lobby-slot{padding:3px;gap:1px}.lobby-shell .lobby-slot svg{width:35px;height:35px}.lobby-shell .lobby-slot>span{font-size:12px}.lobby-shell .lobby-slot>small{font-size:9px}}

/* Independent stage title, outside the centered player form. */
.setup-shell>.entry-banner{flex-shrink:0;text-align:center;position:relative;margin:4px 4px 10px;padding:10px 8px 14px;border-bottom:2px solid #7ba49b66}
.setup-shell>.entry-banner .eyebrow{display:block;font-size:10px;letter-spacing:2px;color:#edbd94;margin-bottom:6px}
.setup-shell>.entry-banner h2{font-family:"PingFang TC","Microsoft JhengHei",sans-serif;font-weight:900;font-size:clamp(21px,6vw,27px);letter-spacing:2px;line-height:1.4;margin:0;color:#fff6df;text-shadow:3px 3px 0 #173d43}
.setup-shell>.entry-banner::before,.setup-shell>.entry-banner::after{content:"";position:absolute;bottom:-3px;width:6px;height:6px;background:#edbd94}.setup-shell>.entry-banner::before{left:0}.setup-shell>.entry-banner::after{right:0}
@media(max-height:700px){.setup-shell>.entry-banner{padding:4px 4px 8px;margin:0 4px 4px}.setup-shell>.entry-banner .eyebrow{display:none}.setup-shell>.entry-banner h2{font-size:21px}}

@container entry-viewport (max-height:330px){.setup-shell .entry-form{padding:8px;margin:4px 0 0}.setup-shell .entry-player{padding-bottom:4px;margin-bottom:6px}.setup-shell .entry-code-zone{margin-top:6px;padding-top:6px}.setup-shell .entry-form .room-help{margin-top:2px}}

@container entry-viewport (max-height:270px){.setup-shell .entry-avatar{display:none}.setup-shell .entry-player{padding-bottom:3px;margin-bottom:4px}.setup-shell .entry-player strong{font-size:14px}.setup-shell .entry-code-zone{margin-top:4px;padding-top:4px}}

/* Fixed coloured ground lines beneath independently animated lobby avatars. */
.lobby-avatar{position:relative;display:grid;place-items:center;width:68px;height:66px;flex-shrink:0}
.lobby-platform{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:39px;height:5px;background:#173d43;border-top:2px solid var(--player-accent)}
.lobby-avatar .scene{position:relative;z-index:1}
.lobby-slot .pixel-person{animation:lobby-bob 1.2s ease-in-out infinite;animation-delay:var(--player-delay);transform-origin:40px 56px}
.lobby-slot.motion-0 .pixel-leg-left{animation:pixel-walk-left .7s ease-in-out infinite}.lobby-slot.motion-0 .pixel-leg-right{animation:pixel-walk-right .7s ease-in-out infinite}
.lobby-slot.motion-1 .pixel-person{animation-name:lobby-sway;animation-duration:1.5s}
.lobby-slot.motion-2 .pixel-person{animation-name:lobby-hop;animation-duration:1.1s}
.lobby-slot.motion-3 .pixel-person{animation-name:lobby-sway;animation-duration:1.8s;animation-direction:reverse}
.lobby-slot.motion-3 .pixel-arm-right{animation:lobby-wave .85s ease-in-out infinite}
@keyframes lobby-bob{50%{transform:translateY(-1px)}}
@keyframes lobby-sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes lobby-hop{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes lobby-wave{0%,100%{transform:rotate(-100deg)}50%{transform:rotate(-125deg)}}
@container lobby-viewport (max-height:430px){.lobby-avatar{width:40px;height:38px}.lobby-platform{bottom:4px;width:24px;height:4px}}
@media(prefers-reduced-motion:reduce){.lobby-slot .pixel-person,.lobby-slot .pixel-leg-left,.lobby-slot .pixel-leg-right,.lobby-slot .pixel-arm-right{animation:none!important}}

/* Connection feedback and short-screen form access. */
.network-note{font-size:12px;line-height:1.5;padding:8px;border:2px solid #edbd94;color:#fff6df;margin:8px 0}
.lobby-room-code{gap:6px;flex-wrap:wrap}.lobby-room-code .textbtn{padding:4px 8px;margin:0}
@media(max-height:420px){.shell>header{padding:3px 0}.wordmark{font-size:16px;letter-spacing:0}.header-actions .smallbtn{padding:4px;min-height:36px;font-size:10px}.setup-shell>.entry-banner{display:none}.app-dock .actions>button{min-height:44px;padding:8px;font-size:13px}.app-dock{padding:4px}.entry-route,.entry-help{display:none}}
@container game (max-width:260px){.shell>header{gap:3px}.wordmark{font-size:16px}.header-actions{gap:3px}.smallbtn{min-width:36px}.musicbtn{min-width:56px}.smallbtn .ui-icon{display:none}.entry-step{gap:5px;flex-wrap:wrap}.entry-step small{margin-left:0!important;display:block!important}.lobby-room-code strong{font-size:18px;letter-spacing:1px}.entry-player>div:last-child{flex-wrap:wrap}.mode,.mode.peach{padding:8px;height:190px}.mode h3{font-size:17px}.mode p{font-size:10px}.mode .go{display:none}.home-shell .home-title h1{font-size:22px}.answer,.answer.b{flex-direction:column;gap:5px}.answer strong{font-size:16px}.collect-card{grid-template-columns:40px minmax(0,1fr) 12px;gap:4px}.collect-art{width:40px}.collect-art .scene{width:36px}.chart{gap:8px;padding:0 4px}.bar-col>strong{font-size:20px}.choice-picture{width:62px}.highlight-choices svg{width:50px}.pause-menu{padding:8px}.pause-topline{flex-wrap:wrap}}
.lobby-shell .lobby-grid{grid-auto-rows:minmax(132px,1fr)}
.lobby-slot>span,.lobby-slot>small{flex-shrink:0}
@container lobby-viewport (max-height:430px){.lobby-shell .lobby-grid{grid-auto-rows:minmax(86px,1fr)}}

.app-footer{gap:4px;flex-wrap:wrap;align-items:center}.app-footer nav{display:flex;gap:4px;flex-wrap:wrap}.app-footer button{background:none;border:0;color:#c8d8cc;font-size:10px;padding:5px 2px;min-height:30px}.app-footer button:hover{text-decoration:underline}
#policy-dialog{width:min(440px,calc(100% - 24px));max-height:calc(100dvh - 24px);margin:auto;background:#fff6df;border:4px solid #173d43;color:#244f55;padding:16px;box-shadow:5px 5px #173d43;overflow:auto;overscroll-behavior:contain}
#policy-dialog::backdrop{background:#173d43cc}#policy-dialog h2{font-size:21px}#policy-dialog h3{font-size:17px;margin:20px 0 8px}#policy-dialog p{font-size:14px;line-height:1.9;margin:10px 0;overflow-wrap:anywhere}#policy-dialog a{color:#244f55;text-decoration:underline}#policy-dialog code{overflow-wrap:anywhere}.policy-status{padding:10px;background:#edbd94}.policy-date{border-top:2px solid #7ba49b;padding-top:12px}
@media(max-height:420px){.app-footer button{min-height:24px;font-size:9px;padding:2px}.shell>.app-footer{padding:0 3px 3px!important;font-size:9px!important}}
/* Waiting uses the same two-column player language as the lobby. */
.lobby-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.lobby-slot{height:auto;min-height:110px}.lobby-avatar{max-width:100%}