:root{--ink:#2b1d2e;--ink-soft:#6b5a5e;--paper:#fff4dc;--paper-2:#ffe8c4;--coral:#ff7b5c;--coral-light:#ffa48c;--teal:#3fb8af;--teal-light:#8fd9cf;--mustard:#ffc94a;--sky:#7fcfd4;--line:3px;--radius:18px;--gutter:clamp(10px, 3vw, 20px);--font:"Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;--font-display:"LXGW WenKai TC", "Noto Sans TC", serif;--font-num:"Gochi Hand", "Baloo 2", var(--font)}html[lang=ja]{--font:"Noto Sans JP", "Hiragino Sans", "Noto Sans TC", system-ui, sans-serif;--font-display:"Kiwi Maru", "Noto Sans JP", serif}html[lang=ko]{--font:"Noto Sans KR", "Apple SD Gothic Neo", "Noto Sans TC", system-ui, sans-serif;--font-display:"Gaegu", "Noto Sans KR", sans-serif}html[lang=th]{--font:"Noto Sans Thai", "Thonburi", "Noto Sans TC", system-ui, sans-serif;--font-display:"Mali", "Noto Sans Thai", sans-serif}html[lang=en],html[lang=es]{--font:"Baloo 2", "Noto Sans TC", system-ui, sans-serif;--font-display:"Gochi Hand", "Baloo 2", sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{background:var(--sky);height:100%;color:var(--ink);font-family:var(--font);overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-text-size-adjust:100%;touch-action:manipulation;margin:0;overflow:hidden}#app{position:fixed;inset:0}#app:after{content:"";pointer-events:none;z-index:50;opacity:.22;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.35 0 0 0 0 0.3 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:absolute;inset:0}#stage{touch-action:none;position:absolute;inset:0}#stage canvas{display:block}.hidden{display:none!important}.screen{padding:max(var(--gutter), env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right)) max(var(--gutter), env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));pointer-events:none;grid-template:"head""stage"minmax(90px,1fr)"panel"/minmax(0,1fr);justify-items:center;gap:8px;display:grid;position:absolute;inset:0}.screen>*{pointer-events:auto;min-width:0;min-height:0}.screen-head{flex-direction:column;grid-area:head;align-items:center;gap:6px;width:min(480px,100%);display:flex}.stage-slot{grid-area:stage;align-self:stretch;width:100%;pointer-events:none!important}.panel{overscroll-behavior:contain;border:var(--line) solid var(--ink);border-radius:var(--radius);background:var(--paper);width:min(480px,100%);max-height:64dvh;box-shadow:0 5px 0 var(--ink);flex-direction:column;grid-area:panel;align-self:end;gap:12px;padding:clamp(12px,3.5vw,18px);display:flex;overflow-y:auto}.screen.result{justify-content:center;align-items:center;display:flex}.screen.result .screen-head,.screen.result .stage-slot{display:none}.panel.center{text-align:center;align-self:center}@media (orientation:landscape) and (width>=640px){.screen{padding-right:max(clamp(16px, 4vw, 64px), env(safe-area-inset-right));grid-template:"stage."minmax(0,1fr)"stage head""stage panel"minmax(0,auto)"stage."minmax(0,1fr)/minmax(0,1fr) minmax(300px,460px);gap:10px clamp(16px,4vw,64px)}.screen-head,.panel{width:100%}.panel{align-self:start;max-height:calc(100dvh - 140px)}}@media (width>=1200px) and (height>=760px){.screen{grid-template-columns:minmax(0,1fr) minmax(360px,520px)}.btn{font-size:18px}.btn.big{font-size:26px}}@media (height<=520px){:root{--gutter:10px}.screen{gap:6px}.panel{gap:8px;padding:10px 12px}.btn.big{padding:8px 14px;font-size:18px}.logo{font-size:clamp(22px,6vh,34px)!important}.subtitle,.best-tag{display:none}}.logo{font-family:var(--font-display);text-align:center;text-wrap:balance;word-break:keep-all;color:var(--ink);text-shadow:3px 3px 0 var(--paper), -2px -2px 0 var(--paper), 2px -2px 0 var(--paper), -2px 2px 0 var(--paper);margin:0;font-size:clamp(28px,min(9vw,7vh),54px);font-weight:700;line-height:1.15;transform:rotate(-1.5deg)}.subtitle,.best-tag{color:var(--ink);text-align:center;text-shadow:0 0 6px var(--paper), 0 0 2px var(--paper);margin:0;font-weight:700}.name-tag{border:var(--line) solid var(--ink);background:var(--coral);color:var(--paper);font-family:var(--font-display);box-shadow:0 3px 0 var(--ink);text-overflow:ellipsis;white-space:nowrap;border-radius:999px;max-width:100%;padding:2px 16px;font-size:clamp(16px,4.5vw,22px);font-weight:700;overflow:hidden}.top-bar{align-items:center;gap:8px;width:100%;display:flex}.screen-title{font-family:var(--font-display);color:var(--ink);text-shadow:0 0 6px var(--paper), 0 0 2px var(--paper);margin:0;font-size:clamp(20px,5.5vw,26px);font-weight:700}.panel .screen-title{text-shadow:none;text-align:center}.panel-note{color:var(--ink-soft);text-align:center;margin:0;font-size:14px;font-weight:700}.divider{text-align:center;color:var(--ink-soft);font-weight:700}.row{gap:10px;display:flex}.row>.btn{flex:1;min-width:0}.btn{font:inherit;border:var(--line) solid var(--ink);color:var(--ink);background:var(--paper);box-shadow:0 4px 0 var(--ink);cursor:pointer;border-radius:14px;padding:10px 14px;font-size:clamp(15px,4vw,17px);font-weight:800;line-height:1.25;transition:transform 80ms,box-shadow 80ms}.btn:active{box-shadow:0 1px 0 var(--ink);transform:translateY(3px)}.btn:disabled{opacity:.55;cursor:default}.btn.primary{background:var(--coral);color:var(--paper);text-shadow:0 1px #2b1d2e59}.btn.secondary{background:var(--teal-light)}.btn.on{background:var(--mustard)}.btn.ghost{color:var(--ink-soft);box-shadow:none;background:0 0;border-color:#0000;padding:6px}.btn.big{font-family:var(--font-display);padding:12px 16px;font-size:clamp(19px,5vw,24px)}.screen-head .btn.ghost,.top-bar .btn.ghost{color:var(--ink);text-shadow:0 0 6px var(--paper), 0 0 2px var(--paper)}.account-row{justify-content:space-between}.account-row>.btn{flex:none}.btn.login{color:var(--coral)}.home-top{justify-content:space-between;align-items:center;gap:8px;width:100%;display:flex}.screen-head>.back-link{align-self:flex-start}.back-link{color:var(--ink);text-shadow:0 0 6px var(--paper), 0 0 2px var(--paper);text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:14px;font-weight:700;text-decoration:none;overflow:hidden}.lang-select{font:inherit;border:2px solid var(--ink);background:var(--paper);color:var(--ink);border-radius:10px;flex:none;padding:4px 8px;font-size:14px;font-weight:700}.toast{border:var(--line) solid var(--ink);background:var(--paper);width:max-content;max-width:calc(100% - 32px);color:var(--ink);text-align:center;box-shadow:0 4px 0 var(--ink);opacity:0;pointer-events:none;z-index:60;border-radius:14px;padding:10px 18px;font-weight:700;transition:opacity .2s,transform .2s;position:absolute;top:18%;left:50%;transform:translate(-50%,-10px)}.toast.show{opacity:1;transform:translate(-50%)}.name-row{align-items:center;gap:10px;font-weight:800;display:flex}.name-input{min-width:0;font:inherit;border:var(--line) solid var(--ink);color:var(--ink);-webkit-user-select:text;user-select:text;background:#fffaf0;border-radius:12px;flex:1;padding:8px 12px;font-size:16px;font-weight:700}.pick-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.pick-card{text-overflow:ellipsis;white-space:nowrap;padding:18px 4px 8px;font-size:clamp(14px,3.8vw,17px);position:relative;overflow:hidden}.pick-card:before{content:"";border:2px solid var(--ink);background:var(--swatch);border-radius:6px;width:22px;height:8px;margin-left:-11px;position:absolute;top:6px;left:50%}.pick-card.active{background:var(--mustard);box-shadow:0 7px 0 var(--ink);transform:translateY(-3px)}.tab-bar{scrollbar-width:none;gap:6px;margin:0 -2px;padding:2px 2px 6px;display:flex;overflow-x:auto}.tab-bar::-webkit-scrollbar{display:none}.tab{box-shadow:0 3px 0 var(--ink);border-radius:999px;flex:none;padding:5px 12px;font-size:14px}.tab.active{background:var(--coral);color:var(--paper)}.options{flex-wrap:wrap;align-items:center;gap:8px;min-height:48px;display:flex}.chip{box-shadow:0 3px 0 var(--ink);padding:6px 11px;font-size:14px}.chip.active{background:var(--mustard)}.swatch{width:clamp(34px,9vw,42px);height:clamp(34px,9vw,42px);box-shadow:0 3px 0 var(--ink);border-radius:50%;padding:0}.swatch.active{outline:3px solid var(--ink);outline-offset:3px}.name-tag .tag,.member-name .tag{opacity:.8;font-size:.6em;font-weight:700}.member-name .tag{display:block}.code-input{text-transform:uppercase;letter-spacing:4px;font-family:var(--font-num);text-align:center}.room-code{border:var(--line) solid var(--ink);color:var(--ink);font-family:var(--font-num);letter-spacing:6px;box-shadow:0 4px 0 var(--ink);background:#fffaf0;border-radius:14px;align-self:center;padding:0 18px;font-size:clamp(24px,7vw,30px)}.member-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.member{border:var(--line) solid var(--ink);background:var(--paper-2);text-align:center;border-radius:14px;flex-direction:column;justify-content:center;align-items:center;gap:6px;min-height:70px;padding:8px 4px;display:flex}.member.ready{background:var(--teal-light)}.member.empty{color:var(--ink-soft);border-style:dashed}.member-name{word-break:break-all;font-size:14px;font-weight:800}.member-badges{flex-wrap:wrap;justify-content:center;gap:4px;display:flex}.badge{border:2px solid var(--ink);background:var(--paper);border-radius:999px;padding:1px 6px;font-size:11px;font-weight:800}.badge.host{background:var(--mustard)}.badge.ok{background:var(--teal);color:var(--paper)}.hud{top:max(10px, env(safe-area-inset-top));left:max(10px, env(safe-area-inset-left));right:max(10px, env(safe-area-inset-right));pointer-events:none;flex-direction:column;align-items:flex-start;gap:6px;display:flex;position:absolute}.floor-pill{border:var(--line) solid var(--ink);background:var(--mustard);color:var(--ink);font-family:var(--font-display);box-shadow:0 3px 0 var(--ink);border-radius:999px;padding:0 14px;font-size:clamp(18px,5vw,24px);font-weight:700}.hp-list{flex-direction:column;gap:4px;display:flex}.hp-row{border:2px solid var(--ink);background:var(--paper);border-radius:10px;align-items:center;gap:6px;padding:2px 8px;display:flex}.hp-row.down{opacity:.45}.hp-row.hit{animation:.4s ease-out hit}@keyframes hit{25%{background:var(--coral-light);transform:translate(-4px)}75%{transform:translate(4px)}}.hp-name{text-overflow:ellipsis;white-space:nowrap;max-width:7em;font-size:12px;font-weight:800;overflow:hidden}.hp-pips{gap:2px;display:flex}.hp-pips i{border:2px solid var(--ink);background:#e8dcc8;border-radius:3px;width:8px;height:13px}.hp-pips i.on{background:var(--coral)}.hint{left:50%;bottom:max(16%, calc(env(safe-area-inset-bottom) + 24px));border:var(--line) solid var(--ink);background:var(--paper);width:max-content;max-width:calc(100% - 32px);color:var(--ink);text-align:center;box-shadow:0 4px 0 var(--ink);pointer-events:none;border-radius:14px;padding:10px 16px;font-size:clamp(15px,4vw,18px);font-weight:800;animation:1.4s ease-in-out infinite bob;position:absolute;transform:translate(-50%)}@keyframes bob{50%{transform:translate(-50%,-5px)}}.countdown{font-family:var(--font-num);color:var(--paper);-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;text-shadow:0 7px 0 var(--ink);pointer-events:none;z-index:40;justify-content:center;align-items:center;font-size:clamp(80px,24vmin,170px);display:flex;position:absolute;inset:0}.result-title{font-family:var(--font-display);margin:0;font-size:clamp(24px,7vw,32px)}.result-floor{font-family:var(--font-display);color:var(--coral);text-shadow:2px 2px 0 var(--ink);font-size:clamp(34px,10vw,46px)}.result-best{color:var(--ink-soft);font-weight:700}.result-best.new{color:var(--ink);font-size:20px}.ranking h3{font-family:var(--font-display);margin:0 0 6px;font-size:18px}.rank-row{border-bottom:2px dashed #2b1d2e33;gap:10px;padding:6px 4px;font-weight:700;display:flex}.rank-no{width:1.6em;color:var(--coral);font-family:var(--font-num)}.rank-name{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.rank-floor{font-family:var(--font-num)}.over-wall{text-align:left;width:100%}.over-wall-label{font-family:var(--font-display);margin:4px 0 2px;font-size:16px}.over-wall-list{overscroll-behavior:contain;max-height:min(16vh,130px);margin:0;padding:0;font-size:15px;list-style:none;overflow-y:auto}.over-wall-list .rank-row{padding:4px 6px}.over-wall-list .rank-row.me{background:var(--paper-2);outline:2px solid var(--coral);outline-offset:-2px;border-radius:10px}.over-wall .you-at{color:var(--coral);font-weight:800}.over-wall-note{color:var(--ink-soft);text-align:center;margin:4px 0 0;font-size:13px;font-weight:700}.over-wall .name-row{margin-top:6px}.name-note{color:var(--ink-soft);margin:-4px 0 0;font-size:12px;font-weight:700}.name-note a{color:inherit;text-decoration:underline}@media (prefers-reduced-motion:reduce){.hint,.hp-row.hit{animation:none}}:root{--pad-h:clamp(128px, 21vh, 184px)}.pad{height:calc(var(--pad-h) + env(safe-area-inset-bottom));z-index:30;padding:12px max(18px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));background:var(--paper);border-top:var(--line) solid var(--ink);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;border-radius:24px 24px 0 0;justify-content:space-between;align-items:center;gap:12px;display:flex;position:absolute;bottom:0;left:0;right:0;box-shadow:0 -4px #2b1d2e1f}.pad-dpad{width:min(56vw,270px);height:min(100%,96px);display:flex}.pad *,.hud,.hint{touch-action:none}.pad-key,.pad-a{border:var(--line) solid var(--ink);box-shadow:0 5px 0 var(--ink);color:var(--paper);text-shadow:0 2px #2b1d2e59;justify-content:center;align-items:center;font-size:clamp(26px,8vw,36px);transition:transform 50ms,box-shadow 50ms;display:flex}.pad-key{background:var(--coral);flex:1}.pad-left{border-radius:26px 6px 6px 26px;margin-right:4px}.pad-right{border-radius:6px 26px 26px 6px}.pad-a{background:var(--mustard);width:min(23vw,96px);height:min(23vw,96px);color:var(--ink);font-family:var(--font-num);text-shadow:none;border-radius:50%;flex:none}.pad-key.pressed,.pad-a.pressed{box-shadow:0 1px 0 var(--ink);filter:brightness(.94);transform:translateY(4px)}.pad-grille{pointer-events:none;gap:6px;display:flex;transform:rotate(-28deg)}.pad-grille i{background:#2b1d2e38;border-radius:3px;width:6px;height:36px}@media (width<=360px){.pad-grille{display:none}}@media (orientation:portrait){#app.pad-on #stage{bottom:calc(var(--pad-h) + env(safe-area-inset-bottom))}#app.pad-on .hint{bottom:calc(var(--pad-h) + env(safe-area-inset-bottom) + 20px)}}@media (orientation:landscape){.pad{height:auto;box-shadow:none;pointer-events:none;background:0 0;border:none;align-items:flex-end}.pad>*{pointer-events:auto}.pad-dpad{width:min(30vw,240px);height:min(22vh,84px)}.pad-a{width:min(18vh,84px);height:min(18vh,84px)}.pad-grille{display:none}}.home-tools{flex:none;align-items:center;gap:6px;display:flex}.sound-btn{border:2px solid var(--ink);background:var(--paper);cursor:pointer;border-radius:10px;flex:none;width:38px;height:34px;padding:0;font-size:18px;line-height:1}.hud-sound{pointer-events:auto;box-shadow:0 3px 0 var(--ink);position:absolute;top:0;right:0}.hurt{pointer-events:none;z-index:35;opacity:0;background:radial-gradient(#ff463c00 55%,#ff463c8c 100%);position:absolute;inset:0}.hurt.on{animation:.45s ease-out hurt}@keyframes hurt{15%{opacity:1}to{opacity:0}}.result-roast{color:var(--ink-soft);margin:-4px 0 0;font-weight:800}.pad-move{justify-content:center;align-items:center;height:100%;display:flex}.pad.swapped{flex-direction:row-reverse}.pad.swapped .pad-grille{transform:rotate(28deg)}.pad-stick{border:var(--line) solid var(--ink);background:radial-gradient(circle, var(--paper-2) 0 55%, #f1d9b0 56% 100%);width:min(26vw,96px);height:min(26vw,96px);box-shadow:inset 0 4px 0 #2b1d2e1f, 0 4px 0 var(--ink);touch-action:none;border-radius:50%;justify-content:center;align-items:center;display:flex;position:relative}.pad-stick:before,.pad-stick:after{content:"◀";color:#2b1d2e59;pointer-events:none;font-size:13px;position:absolute;left:6px}.pad-stick:after{content:"▶";left:auto;right:6px}.pad-stick-hit{border-radius:50%;position:absolute;inset:-26px}.pad-knob{border:var(--line) solid var(--ink);background:radial-gradient(circle at 35% 30%, var(--coral-light), var(--coral) 60%);width:52%;height:52%;box-shadow:0 5px 0 var(--ink);pointer-events:none;border-radius:50%}.pad-stick.active .pad-knob{box-shadow:0 2px 0 var(--ink);transition:none}@media (orientation:landscape){.pad-stick{width:min(20vh,88px);height:min(20vh,88px)}}.modal{z-index:70;padding:max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));background:#2b1d2e73;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.modal .panel{align-self:center;width:min(460px,100%);max-height:100%}.modal-title{font-family:var(--font-display);text-align:center;margin:0;font-size:clamp(22px,6vw,28px)}.setting{flex-direction:column;gap:6px;display:flex}.setting-label{font-weight:800}.setting-desc{color:var(--ink-soft);margin:0;font-size:13px;font-weight:700}.segmented{gap:8px;display:flex}.segmented .btn{flex:1;min-width:0;padding:8px 6px;font-size:15px}.segmented .btn.active{background:var(--mustard)}.help-list{flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;display:flex}.help-item{align-items:center;gap:10px;font-size:15px;font-weight:700;display:flex}.help-icon{flex:none;justify-content:center;align-items:center;width:64px;min-height:34px;font-size:22px;display:flex}.help-icon img{width:auto;max-width:64px;height:auto;max-height:30px}.help-section{font-family:var(--font-display);margin:4px 0 0;font-size:18px}.gear-btn{font-size:17px}.hud-gear{pointer-events:auto;box-shadow:0 3px 0 var(--ink);position:absolute;top:0;right:46px}.panel{touch-action:pan-y;overflow-x:hidden}.tab-bar{touch-action:pan-x;overscroll-behavior-x:contain;margin:0}.options.thumbs{grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:8px;display:grid}.thumb{min-width:0;box-shadow:0 3px 0 var(--ink);border-radius:12px;flex-direction:column;align-items:center;gap:2px;padding:4px 2px 5px;font-size:12px;display:flex}.thumb img{aspect-ratio:1;object-fit:contain;pointer-events:none;width:100%;max-width:64px}.thumb span{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden}.thumb.active{background:var(--mustard);outline:3px solid var(--ink);outline-offset:1px}.top-bar{border:var(--line) solid var(--ink);background:var(--paper);box-shadow:0 3px 0 var(--ink);border-radius:16px;padding:4px 12px 4px 4px}.top-bar .btn.ghost{text-shadow:none;white-space:nowrap}.top-bar .screen-title{text-shadow:none;text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.logo{border:var(--line) solid var(--ink);background:var(--paper);box-shadow:0 4px 0 var(--ink);text-shadow:none;border-radius:18px;padding:2px 18px 4px}.subtitle,.best-tag{border:2px solid var(--ink);background:var(--paper);text-shadow:none;border-radius:999px;padding:2px 12px}.back-link{border:2px solid var(--ink);background:var(--paper);text-shadow:none;border-radius:999px;padding:3px 10px}.pad-dpad{width:min(44vw,196px);height:min(100%,76px)}.pad-key{font-size:clamp(22px,6vw,28px)}@media (orientation:landscape){.pad-dpad{width:min(24vw,180px);height:min(20vh,70px)}}.setting-group{flex-direction:column;gap:10px;display:flex}