@font-face{font-family:Fredoka;src:url('./assets/fonts/fredoka-600.woff2') format('woff2'),url('./assets/fonts/fredoka-600.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:Nunito;src:url('./assets/fonts/nunito-400.woff2') format('woff2'),url('./assets/fonts/nunito-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Nunito;src:url('./assets/fonts/nunito-800.woff2') format('woff2'),url('./assets/fonts/nunito-800.ttf') format('truetype');font-weight:800;font-display:swap}
:root{--ink:#493449;--soft-ink:#8b7483;--cream:#fff7ec;--paper:#fffcf4;--peach:#f9b194;--pink:#f9d5ca;--violet:#a38ac9;--lilac:#ece2fa;--yellow:#ffd986;--line:#eadbce;--mint:#d1e2c4;font-family:Nunito,"PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);background:#fff5e8;font-synthesis:weight}
*{box-sizing:border-box}body{margin:0;min-width:0;background:radial-gradient(ellipse at 18% 12%,#ffe0cd66,transparent 40%),radial-gradient(ellipse at 95% 65%,#e5dbf266,transparent 34%),#fff5e8;min-height:100svh}button,input{font:inherit;color:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer;-webkit-user-select:none;user-select:none}button:disabled{cursor:default}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,canvas:focus-visible{outline:3px solid #9978bd;outline-offset:4px}button:disabled{opacity:.55}button,input{border:0}svg{width:24px;height:24px;display:block;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}[hidden]{display:none!important}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}.app-shell{max-width:1180px;width:calc(100% - 64px);margin:auto}.ambient-star{position:fixed;z-index:-1;color:#eac8b3;pointer-events:none;font-size:90px;line-height:1}.star-one{top:23%;left:-30px;transform:rotate(14deg)}.star-two{right:-25px;bottom:18%;color:#dfd2e9;font-size:100px}
.topbar{height:77px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:10px}.brand-icon{width:48px;height:48px;display:grid;place-items:center;background:#f8bea9;border:2px solid #c78276;border-radius:17px;box-shadow:0 3px 0 #e5a18c;transform:rotate(-8deg)}.brand-icon svg{width:31px;height:31px;stroke-width:2.2;color:#754849}.brand>span:nth-child(2){display:flex;flex-direction:column;gap:2px}.brand small{font-family:Fredoka,sans-serif;font-size:10px;letter-spacing:2.2px;color:#a1808a}.brand strong{font-size:23px;letter-spacing:1px;font-weight:900}.brand-spark{color:#d69b6e;font-size:30px;transform:rotate(15deg)}.top-tag{font-size:12px;color:#aa9094;letter-spacing:1px}.tools{display:flex;align-items:center;gap:8px}.icon-button{position:relative;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#fffaf2;border:1.5px solid #e9d9cc;box-shadow:0 2px 0 #eeded2;font-weight:800;transition:transform .15s,background .15s}.icon-button:hover{background:#f5e9f8;transform:translateY(-2px)}.icon-button svg{width:18px;height:18px}.help-button{font-size:21px}.language-button{font-size:11px}.sound-off-dot{position:absolute;width:5px;height:5px;background:#ba9baa;border-radius:50%;bottom:6px;right:6px}.icon-button[aria-pressed=true] .sound-off-dot{background:#99b58a}
.game-heading{display:flex;justify-content:space-between;align-items:center;gap:25px;padding:13px 5px 24px}.eyebrow{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:800;letter-spacing:1.3px;color:#a17f8b;margin:0 0 9px}.sparkle{color:#dba36b;font-size:16px}.game-heading h1{font-size:34px;font-weight:900;letter-spacing:-1.3px;margin:0;line-height:1.2}.mode-switch{display:flex;gap:4px;border:1.5px solid #eadace;background:#f4e9df;padding:5px;border-radius:18px;box-shadow:inset 0 2px 3px #a6756410}.mode-switch button{display:flex;align-items:center;gap:8px;border-radius:12px;background:transparent;padding:12px 17px;font-size:12px;line-height:1;font-weight:800;white-space:nowrap;transition:background .18s,box-shadow .18s,transform .18s}.mode-switch button svg{width:17px;height:17px}.mode-switch button[aria-pressed=true]{background:#fffcf4;box-shadow:0 3px 0 #dfcfc5,0 1px 6px #8053560c;transform:translateY(-1px)}.mode-switch small{font-size:9px;background:#e7d9ef;color:#967baf;border-radius:5px;padding:3px 5px}.game-card{background:var(--paper);border:2px solid #dcc6b7;border-radius:30px;overflow:hidden;box-shadow:0 6px 0 #e8d3c0,0 22px 70px #a1756230}.stage{position:relative;height:clamp(410px,calc(100svh - 340px),590px);isolation:isolate;overflow:hidden;background:#d9b094}#party-canvas{display:block;width:100%;height:100%;touch-action:none;cursor:pointer;outline-offset:-5px}.scene-shade{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 80px 70px -65px #42294788,inset 0 -60px 60px -56px #3e274c80;z-index:1}.hud{position:absolute;inset:18px 20px auto;display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none;z-index:4}.score-bubble{display:flex;gap:9px;align-items:center;background:#fffbf2f0;border:2px solid #edd5ad;border-radius:18px;padding:10px 14px 9px 10px;box-shadow:0 4px 0 #98694d33,0 4px 18px #432b4217;transform:rotate(-2deg);min-width:108px}.score-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:12px;background:#f8d1ba;color:#bf7b68}.score-icon svg{width:25px;height:25px}.score-bubble>div{display:flex;flex-direction:column;gap:1px}.score-bubble strong{font:600 29px/1 Fredoka,sans-serif;font-variant-numeric:tabular-nums}.score-bubble small{font-size:8px;letter-spacing:.5px;color:#a38c8e;font-weight:800}.attention-pill{display:flex;align-items:center;gap:8px;position:absolute;left:50%;transform:translateX(-50%);top:5px;padding:11px 17px;border-radius:30px;background:#f3f5dcf2;border:1.5px solid #c3cf9a;box-shadow:0 3px 0 #57462f25;color:#657957;font-size:12px;font-weight:800;white-space:nowrap;transition:background .2s,color .2s}.status-dot{width:6px;height:6px;background:currentColor;border-radius:50%;flex-shrink:0}.timer-bubble{display:flex;align-items:center;gap:7px;border-radius:18px;padding:11px 14px;background:#fffbf2f2;border:2px solid #edd5ad;box-shadow:0 4px 0 #98694d33;transform:rotate(2deg)}.timer-bubble svg{width:19px;height:19px;color:#a68a91}.timer-bubble strong{font:600 27px/1 Fredoka,sans-serif;font-variant-numeric:tabular-nums}.timer-bubble small{font-size:9px;color:#a58d91}.stage-tool{position:absolute;top:88px;right:21px;z-index:5;background:#fff9e8d9;color:#8f7280;width:34px;height:34px;border:1px solid #e9ceb8;border-radius:50%;display:grid;place-items:center}.stage-tool svg{width:17px;height:17px}.hostess-bubble{position:absolute;z-index:2;top:22%;left:58%;padding:10px 15px;background:#fff9e8ed;border-radius:14px;color:#9f7470;font-size:12px;font-weight:800;box-shadow:0 3px 10px #98654d15;transform:rotate(3deg);pointer-events:none;white-space:nowrap}.hostess-bubble i{position:absolute;bottom:-7px;left:25%;width:16px;height:16px;background:inherit;clip-path:polygon(0 0,100% 0,0 100%)}.welcome-sticker{position:absolute;z-index:2;left:4%;top:29%;display:flex;flex-direction:column;gap:4px;transform:rotate(-7deg);background:#fff4d5ef;padding:17px 25px;border:2px dashed #d9b67f;border-radius:17px;box-shadow:0 6px 14px #80535f1c;pointer-events:none}.welcome-sticker strong{font-size:19px;font-weight:900}.welcome-sticker>span:last-child{font-size:11px;color:#aa7e76}.sticker-star{position:absolute;right:-11px;top:-12px;font-size:33px;color:#d7b175;text-shadow:2px 2px #fff4d5}.scene-badge{position:absolute;bottom:13px;left:19px;z-index:2;font-size:9px;display:flex;gap:6px;align-items:center;color:#fff3e3;background:#7350437a;padding:6px 10px;border:1px solid #fff4dd35;border-radius:9px;pointer-events:none}.stage-feedback{position:absolute;z-index:7;left:50%;top:45%;transform:translate(-50%,-50%) rotate(-5deg);padding:13px 27px;background:#fff0c8;border:3px solid #dca779;border-radius:18px;color:#a15c5f;font-size:25px;white-space:nowrap;box-shadow:0 7px 0 #7b4a5e33;font-weight:900;pointer-events:none;animation:stamp .25s ease-out}.countdown-overlay{position:absolute;z-index:6;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#4f305826;backdrop-filter:blur(3px);color:#fff9e8;text-shadow:0 3px 0 #75506780;pointer-events:none}.countdown-overlay small{font-size:17px;font-weight:800}.countdown-overlay strong{font:600 110px/.95 Fredoka,sans-serif;transform:rotate(-6deg);margin:20px 0;color:#ffe0a2;-webkit-text-stroke:3px #8b5b5a}.countdown-overlay span{font-size:13px;font-weight:800}.loading-overlay{position:absolute;inset:0;z-index:15;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:#fbefdfed;color:#9a768b;font-size:13px}.loader-candy{color:#bd8ba1;animation:float 1.5s ease-in-out infinite}.loader-candy svg{width:42px;height:42px}.loading-overlay .small-button{min-width:130px}
.game-dock{display:grid;grid-template-columns:1fr minmax(300px,430px) 1fr;gap:35px;align-items:center;padding:20px 27px 15px;background:#fffcf4;border-top:1px solid #d2af8f}.dock-label{display:flex;justify-content:space-between;align-items:center;gap:7px;font-size:9px;font-weight:800;letter-spacing:.8px;color:#b09797}.profile-block{display:flex;flex-direction:column;gap:7px}.avatar-picker{display:flex;gap:8px}.avatar-choice{display:grid;place-items:center;width:43px;height:43px;padding:0;background:#f8eddf;border-radius:13px;border:2px solid #ecdcd0;box-shadow:0 2px 0 #e1cfc1;transition:transform .15s}.avatar-choice:hover{transform:translateY(-3px) rotate(-5deg)}.avatar-choice[aria-pressed=true]{border-color:#b69aca;background:#ede2f6;box-shadow:0 3px 0 #c9b1d9;transform:translateY(-2px)}.avatar-sprite{width:38px;height:38px;display:inline-block;background-image:url('./assets/thieves-sneaky-atlas.webp');background-repeat:no-repeat;background-size:300% 400%;background-position:0 0;flex-shrink:0}.avatar-sprite[data-avatar="1"]{background-position:50% 0}.avatar-sprite[data-avatar="2"]{background-position:100% 0}.main-action{position:relative;width:100%;min-height:68px;border-radius:19px;border:2px solid #c68f62;background:#ffda8a;color:#785040;box-shadow:0 5px 0 #bd835e,0 8px 17px #c28b6022;display:flex;align-items:center;justify-content:center;gap:18px;padding:11px 22px;touch-action:none;transition:transform .08s,box-shadow .08s,background .18s}.main-action:hover:not(:disabled){background:#ffe39f;transform:translateY(-1px)}.main-action:active:not(:disabled),.main-action[data-held=true]{transform:translateY(4px);box-shadow:0 1px 0 #bd835e;background:#f9c370}.main-action>span:nth-child(2){display:flex;flex-direction:column;align-items:center;gap:4px}.main-action strong{font-size:20px;font-weight:900;letter-spacing:1px}.main-action small{font-size:10px;opacity:.65;letter-spacing:.1px}.button-candy svg{width:29px;height:29px;transform:rotate(-12deg)}.button-arrow{width:22px;height:22px}.main-action kbd{position:absolute;right:14px;top:12px;padding:3px 5px;border:1px solid #9d79574a;border-bottom-width:2px;border-radius:5px;font:8px Nunito,sans-serif;opacity:.5}.hold-action[data-held=true]{border-color:#aa7c5d}.main-action:disabled{opacity:.77;background:#f3e6cd;border-color:#c9b9a7;color:#a08d81;box-shadow:0 4px 0 #cbb7a1}.progress-block p{margin:8px 0 0;font-size:10px;color:#b28d85}.dock-label strong{font-size:10px;color:#c2916e}.speed-track{height:9px;border-radius:8px;background:#f0e4da;margin-top:10px;overflow:hidden}.speed-track span{display:block;width:0;height:100%;background:linear-gradient(90deg,#e8b687,#e8a3a9);border-radius:8px;transition:width .1s linear}.best-block,.match-block{justify-self:end;display:flex;flex-direction:column;gap:6px}.best-block>strong,.match-block>strong{display:flex;align-items:center;gap:7px;font-size:24px;font-family:Fredoka,sans-serif;font-weight:600;color:#b69a88;line-height:1.2}.best-block svg{width:21px;height:21px;color:#d8b77e;fill:#fae7b5}.best-block small,.match-block small{font-size:10px;color:#b49c96;font-family:Nunito,sans-serif;font-weight:800}.under-stage{display:flex;align-items:center;justify-content:space-between;gap:15px;min-height:38px;padding:0 28px 10px;font-size:10px;color:#b09897}.under-stage p{margin:0;display:flex;align-items:center;gap:7px}.tiny-candy{color:#c5a26a;font-size:14px}.local-note{color:#baa5a0}.waiting-note{display:flex;align-items:center;justify-content:center;gap:10px;color:#ac8e9b;font-size:12px;min-height:63px}.waiting-note svg{width:21px;height:21px}.text-button{background:transparent;font-size:10px;color:#a18a91;text-decoration:underline;text-underline-offset:3px;padding:7px 3px;min-height:32px}.text-button:hover{color:#765a80}.primary-button,.secondary-button,.small-button{display:flex;justify-content:center;align-items:center;gap:10px;min-height:44px;border-radius:13px;font-weight:800;transition:transform .12s,background .12s}.primary-button{background:#a892c1;color:#fff9f2;border:1.5px solid #8c73a7;box-shadow:0 3px 0 #806594;padding:12px 18px;font-size:13px;width:100%}.primary-button:hover:not(:disabled){background:#b39ccc;transform:translateY(-1px)}.primary-button:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 #806594}.secondary-button{background:#f9d598;color:#9c714d;border:1.5px solid #d8af7f;box-shadow:0 3px 0 #c9a079;padding:12px 16px;font-size:13px}.small-button{background:#f0dfd2;color:#9b716d;border:1.5px solid #d9b9ab;padding:8px 17px;font-size:12px}.primary-button svg{width:18px;height:18px}
.online-panel,.lobby-panel,.result-panel{position:absolute;z-index:9;left:50%;top:50%;transform:translate(-50%,-45%);width:360px;max-width:calc(100% - 32px);max-height:calc(100% - 85px);overflow:auto;padding:24px 26px 18px;background:#fffaf0f7;border:2px solid #e1c6b5;border-radius:26px;box-shadow:0 7px 0 #6947581f,0 20px 60px #69475840;scrollbar-width:thin;scrollbar-color:#d7bdc8 transparent;overscroll-behavior:contain}.online-panel .eyebrow,.lobby-panel .eyebrow{font-size:8px;letter-spacing:1px}.online-panel h2,.lobby-panel h2{font-size:25px;margin:0 0 9px;letter-spacing:-1px}.panel-flower{position:absolute;right:20px;top:15px;color:#dbb889;font-size:34px;transform:rotate(-12deg)}.panel-copy{font-size:11px;color:#b18d91;line-height:1.7;margin:0 0 14px;max-width:260px}.online-panel label{display:block;font-size:10px;font-weight:800;color:#a98b91;margin-bottom:7px}.online-panel input{width:100%;height:42px;padding:10px 13px;border:1.5px solid #e3cfc2;border-radius:11px;background:#fffef8;font-size:13px;box-shadow:inset 0 2px 0 #d8c8bc1a;outline-offset:1px}.online-panel input::placeholder{color:#c3ada9}.create-button{margin-top:11px}.join-row{display:flex;gap:8px;margin-top:12px}.join-row input{min-width:0;letter-spacing:2px}.join-row input::placeholder{letter-spacing:0}.join-row .small-button{min-height:42px;flex-shrink:0}.entry-error{font-size:11px;color:#b97578;line-height:1.6;margin:12px 0 0}.lobby-title-row{display:flex;justify-content:space-between;align-items:center;gap:10px}.room-count{padding:6px 10px;background:#eee3f2;border-radius:8px;font:600 15px Fredoka,sans-serif;color:#a48ab9}.room-invite{display:flex;justify-content:space-between;align-items:center;border-radius:13px;background:#f3e9db;padding:10px 12px;margin:7px 0 12px}.room-invite>div{display:flex;align-items:center;gap:12px}.room-invite small{font-size:9px;color:#ae948a}.room-invite strong{font:600 22px Fredoka,sans-serif;letter-spacing:3px;color:#a07a85}.room-invite .icon-button{width:30px;height:30px;background:#fff9ed}.room-invite svg{width:15px;height:15px}.roster{display:grid;grid-template-columns:1fr 1fr;gap:7px}.roster-row{display:flex;align-items:center;gap:5px;background:#f8eee5;border-radius:10px;padding:5px 7px;min-width:0;font-size:10px;position:relative}.roster-row .avatar-sprite{width:29px;height:29px}.roster-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800;min-width:0}.roster-name small{display:block;font-size:7px;color:#b29da6;font-weight:400}.roster-state{margin-left:auto;font-size:8px;color:#c1acaa}.roster-state[data-ready=true]{color:#92a47f}.roster-row[data-offline=true]{opacity:.55}.remove-seat{font-size:8px;background:#edd5d2;border-radius:5px;padding:3px;color:#a07777}.lobby-note{font-size:10px;color:#ac8b97;line-height:1.6;margin:12px 0}.lobby-actions{display:flex;gap:8px}.lobby-actions>*{flex:1}.lobby-panel>.text-button{display:block;margin:5px auto -4px}.result-panel{text-align:center;width:400px;padding-top:23px;max-height:calc(100% - 45px);transform:translate(-50%,-50%)}.result-medal{display:grid;place-items:center;margin:0 auto 10px;width:46px;height:46px;border-radius:50%;background:#f9df9c;box-shadow:0 3px 0 #dcc18f;transform:rotate(-9deg)}.result-medal svg{fill:#fff5d8;stroke:#cb9d65;width:27px;height:27px}.result-panel .eyebrow{justify-content:center;font-size:9px;margin-bottom:6px}.result-panel h2{font-size:27px;margin:0;letter-spacing:-.7px}.result-score{display:flex;align-items:baseline;justify-content:center;gap:8px;margin:10px 0 0;color:#c88f73}.result-score svg{align-self:center;width:27px;height:27px}.result-score strong{font:600 54px/1 Fredoka,sans-serif}.result-score>span{font-size:11px;color:#b19598}.result-copy{font-size:11px;line-height:1.6;color:#b0969c;margin:9px 0 14px}.result-panel .text-button{margin-top:5px}.final-scores{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:13px}.final-row{display:flex;align-items:center;gap:6px;border-radius:9px;background:#f5e9e2;padding:5px 8px;font-size:10px;min-width:0;text-align:left}.final-row:first-child{background:#f5e4b7}.final-row .avatar-sprite{width:25px;height:25px}.final-row small{color:#b29a98;font-size:9px}.final-row>span:not(.avatar-sprite){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.final-row b{font-size:12px;color:#a37b78}
.voice-bar{display:flex;align-items:center;gap:12px;margin:18px 2px 2px;padding:12px 17px;background:#f5ecef;border:1.5px solid #e5d5e3;border-radius:17px}.voice-emblem{width:35px;height:35px;background:#e6daed;color:#a18ab1;border-radius:50%;display:grid;place-items:center;flex-shrink:0}.voice-emblem svg{width:17px;height:17px}.voice-copy{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}.voice-copy strong{font-size:11px;color:#9b7b99}.voice-copy>span{font-size:10px;color:#b29aab;line-height:1.5}.voice-button{background:#b19ac7;color:#fff9f5;border:1px solid #9d85b4;border-radius:10px;font-size:11px;font-weight:800;padding:9px 15px;white-space:nowrap}.voice-button[data-active=true]{background:#d5e4c6;color:#829371;border-color:#becfae}.agora-mark{font-size:12px;font-weight:800;color:#c0a9be;white-space:nowrap;letter-spacing:-.5px}.agora-mark b{font-size:7px;letter-spacing:1px;display:block;text-align:center}.network-note{background:#fbebd6;color:#b38a71;border-radius:10px;padding:10px 16px;font-size:11px;text-align:center}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);z-index:100;background:#8b6b93;color:#fff5e6;padding:12px 20px;max-width:calc(100% - 32px);border:1px solid #ad8fb0;box-shadow:0 4px 0 #6d527c3b,0 10px 25px #62435f30;border-radius:13px;font-size:12px;line-height:1.6}.dialog{border:2px solid #dfc8ba;background:#fff9ed;color:var(--ink);border-radius:28px;padding:35px;width:450px;max-width:calc(100% - 32px);max-height:calc(100svh - 40px);box-shadow:0 9px 0 #4e374b30,0 30px 90px #412f4f50;overscroll-behavior:contain}.dialog::backdrop{background:#4d365c7a;backdrop-filter:blur(5px)}.close-button{position:absolute;right:16px;top:16px;border-radius:50%;background:#efe3df;color:#a28393;width:29px;height:29px;display:grid;place-items:center}.close-button svg{width:15px;height:15px}.dialog-flower{font-size:40px;color:#d2ab83;display:block;margin-bottom:12px}.dialog h2{margin:0 0 22px;font-size:26px;font-weight:900;letter-spacing:-1px}.help-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}.help-steps li{display:flex;gap:15px}.help-steps li>b{font:600 20px Fredoka,sans-serif;color:#c7a3b2;min-width:25px}.help-steps strong{font-size:13px;color:#907082}.help-steps p{font-size:11px;color:#b09a9c;line-height:1.7;margin:5px 0 0}.help-note{font-size:10px;line-height:1.7;color:#b59b91;border-top:1px solid #ecddd0;padding-top:13px;margin:22px 0}.pause-dialog{text-align:center}.pause-dialog .eyebrow{justify-content:center}.pause-dialog h2{margin-bottom:10px;font-size:25px}.pause-dialog>p:not(.eyebrow){color:#b098a6;font-size:12px;margin-bottom:23px}.pause-dialog>.text-button{margin-top:10px}.pause-zzz{font:600 64px Fredoka,sans-serif;display:block;line-height:1.3;color:#c2a7cd;transform:rotate(-12deg);margin:5px 0 20px}.pause-zzz span{font-size:43px;position:relative;top:-23px;margin-left:3px}.pause-zzz small{font-size:25px;position:relative;top:-42px;margin-left:4px}footer{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:20px;color:#bca5a0;font-size:9px;padding:12px 4px}footer>div{display:flex;gap:18px}footer a{text-decoration:underline;text-underline-offset:3px}
body[data-attention=warning] .attention-pill{background:#ffe6baf5;border-color:#d6b272;color:#ac8054}body[data-attention=watching] .attention-pill{background:#f5c2b9f5;border-color:#d99386;color:#a86266}body[data-attention=warning] .status-dot{animation:blink .5s ease-in-out infinite}body[data-attention=watching] .hostess-bubble{color:#b36c76;background:#fff0dd}body[data-mode=online]:not([data-view=playing]):not([data-view=countdown]):not([data-view=finished]) .welcome-sticker{display:none}body[data-view=finished] .game-dock{padding-top:12px;padding-bottom:10px}body[data-view=finished] .hostess-bubble{display:none}body[data-view=countdown] .welcome-sticker,body[data-view=playing] .welcome-sticker{display:none}
html[lang=en] .brand strong{font-family:Fredoka,sans-serif;font-size:25px;letter-spacing:-.8px}html[lang=en] .game-heading h1{font-family:Fredoka,sans-serif;font-weight:600;font-size:36px;letter-spacing:-.7px}html[lang=en] .main-action strong,html[lang=en] .dialog h2,html[lang=en] .online-panel h2,html[lang=en] .lobby-panel h2,html[lang=en] .result-panel h2{font-family:Fredoka,sans-serif;font-weight:600}
@keyframes float{50%{transform:translateY(-8px) rotate(8deg)}}@keyframes blink{50%{opacity:.35}}@keyframes stamp{from{opacity:0;transform:translate(-50%,-50%) rotate(-8deg) scale(1.4)}to{opacity:1;transform:translate(-50%,-50%) rotate(-5deg) scale(1)}}
@media(min-width:1500px){.app-shell{max-width:1280px}.stage{max-height:680px}.game-heading{padding-top:20px;padding-bottom:27px}}
@media(max-width:1000px){.app-shell{width:calc(100% - 36px)}.top-tag{display:none}.game-heading h1{font-size:29px}.mode-switch button{padding:12px 13px;font-size:11px}.game-dock{gap:20px;padding:18px 20px 13px;grid-template-columns:1fr minmax(280px,390px) 1fr}.best-block .dock-label{font-size:8px}.avatar-choice{width:38px;height:38px}.avatar-sprite{width:33px;height:33px}.hostess-bubble{left:56%;font-size:11px}.welcome-sticker{padding:14px 17px;left:3%}.welcome-sticker strong{font-size:17px}.voice-bar{margin-top:15px}.under-stage{padding-left:22px;padding-right:22px;font-size:9px}}
@media(max-width:700px){.app-shell{width:calc(100% - 24px)}.topbar{height:65px;gap:10px}.brand-icon{width:37px;height:37px;border-radius:12px}.brand-icon svg{width:25px;height:25px}.brand{gap:8px}.brand small{font-size:8px;letter-spacing:1.4px}.brand strong{font-size:18px}.brand-spark{font-size:25px;margin-left:-2px}.tools{gap:6px}.icon-button{width:31px;height:31px}.icon-button svg{width:16px;height:16px}.help-button{font-size:18px}.language-button{font-size:9px}.game-heading{flex-direction:column;align-items:flex-start;padding:8px 2px 15px;gap:14px}.game-heading .eyebrow{font-size:8px;margin-bottom:7px}.game-heading h1{font-size:27px;letter-spacing:-.7px}.mode-switch{align-self:stretch;padding:4px;gap:3px;border-radius:14px}.mode-switch button{flex:1;justify-content:center;padding:11px 9px;font-size:11px;border-radius:9px}.mode-switch button svg{width:15px;height:15px}.mode-switch small{font-size:8px}.game-card{border-radius:23px;box-shadow:0 5px 0 #e8d3c0,0 15px 45px #a1756222}.stage{height:clamp(355px,calc(100svh - 360px),465px)}.hud{inset:12px 11px auto}.score-bubble{gap:5px;padding:7px 8px 6px;min-width:78px;border-radius:14px}.score-icon{width:25px;height:27px;border-radius:9px}.score-icon svg{width:20px;height:20px}.score-bubble strong{font-size:23px}.score-bubble small{font-size:6px;letter-spacing:0}.timer-bubble{gap:4px;border-radius:13px;padding:9px 8px}.timer-bubble svg{width:14px;height:14px}.timer-bubble strong{font-size:22px}.timer-bubble small{font-size:7px}.attention-pill{top:7px;padding:8px 9px;gap:5px;font-size:9px;max-width:calc(100% - 150px);white-space:normal;text-align:center;line-height:1.3;min-height:31px}.attention-pill .status-dot{width:4px;height:4px}.hostess-bubble{top:22%;left:42%;font-size:9px;padding:8px 11px;max-width:55%;white-space:normal;line-height:1.4;border-radius:11px}.welcome-sticker{padding:10px 12px;top:29%;left:4%;border-radius:12px;gap:3px;border-width:1.5px}.welcome-sticker strong{font-size:14px}.welcome-sticker>span:last-child{font-size:8px}.sticker-star{font-size:25px;right:-7px;top:-11px}.stage-tool{top:68px;right:13px;width:28px;height:28px}.stage-tool svg{width:14px;height:14px}.scene-badge{left:12px;bottom:10px;font-size:7px;padding:5px 7px;gap:5px}.scene-badge .status-dot{width:4px;height:4px}.game-dock{grid-template-columns:1fr 1fr;gap:15px 20px;padding:17px 16px 9px}.action-wrap{grid-column:1/-1;grid-row:1}.profile-block,.progress-block{grid-column:1;grid-row:2}.best-block,.match-block{grid-column:2;grid-row:2}.main-action{min-height:60px;border-radius:15px;padding:9px 13px;gap:15px}.main-action strong{font-size:17px;letter-spacing:.5px}.main-action small{font-size:9px}.button-candy svg{width:25px;height:25px}.main-action kbd{display:none}.button-arrow{width:18px;height:18px}.dock-label{font-size:7px;letter-spacing:.4px}.avatar-picker{gap:7px}.avatar-choice{width:31px;height:31px;border-radius:10px}.avatar-sprite{width:27px;height:27px}.profile-block{gap:5px}.best-block>strong,.match-block>strong{font-size:21px;gap:5px}.best-block small,.match-block small{font-size:8px}.best-block svg{width:17px;height:17px}.progress-block p{font-size:8px;margin-top:6px}.speed-track{height:7px;margin-top:8px}.dock-label strong{font-size:8px}.under-stage{padding:2px 16px 9px;gap:8px;min-height:30px;font-size:8px}.local-note{display:none}.under-stage .text-button{font-size:8px;min-height:25px}.waiting-note{min-height:40px;font-size:10px}.waiting-note svg{width:16px;height:16px}.online-panel,.lobby-panel{padding:20px 19px 14px;width:310px;border-radius:21px;max-height:calc(100% - 63px);transform:translate(-50%,-43%)}.online-panel h2,.lobby-panel h2{font-size:22px}.online-panel .eyebrow,.lobby-panel .eyebrow{font-size:7px}.panel-copy{font-size:10px;line-height:1.6;margin-bottom:10px}.panel-flower{font-size:28px;right:17px;top:12px}.online-panel label{font-size:9px;margin-bottom:5px}.online-panel input{height:38px;font-size:12px}.primary-button,.secondary-button{font-size:12px;min-height:40px;padding:10px 13px;border-radius:11px}.small-button{font-size:11px;min-height:38px}.join-row .small-button{min-height:38px}.room-invite{padding:8px 10px;margin-bottom:9px}.room-invite strong{font-size:20px}.roster{gap:5px}.roster-row{padding:4px 5px;font-size:9px}.roster-row .avatar-sprite{width:25px;height:25px}.roster-state{font-size:7px}.lobby-note{font-size:9px;margin:9px 0}.lobby-actions{gap:7px}.result-panel{width:310px;padding:16px 20px 12px;border-radius:22px;max-height:calc(100% - 24px)}.result-medal{width:36px;height:36px;margin-bottom:9px}.result-medal svg{width:23px;height:23px}.result-panel h2{font-size:23px}.result-panel .eyebrow{font-size:7px}.result-score strong{font-size:46px}.result-score{margin-top:7px}.result-score svg{width:23px;height:23px}.result-copy{font-size:10px;margin:6px 0 12px}.final-row{padding:3px 6px;font-size:9px;gap:4px}.final-row .avatar-sprite{width:20px;height:20px}.final-row small{font-size:8px}.final-row b{font-size:10px}.stage-feedback{font-size:19px;padding:10px 20px;border-radius:14px;border-width:2px}.countdown-overlay strong{font-size:90px}.countdown-overlay small{font-size:14px}.countdown-overlay span{font-size:11px}.voice-bar{padding:11px 13px;gap:8px;margin-top:13px;border-radius:14px;flex-wrap:wrap}.voice-emblem{width:29px;height:29px}.voice-emblem svg{width:14px;height:14px}.voice-copy strong{font-size:10px}.voice-copy>span{font-size:9px}.voice-button{font-size:10px;padding:8px 11px}.agora-mark{display:none}.voice-bar>.text-button{font-size:9px;min-height:20px;margin-left:auto;padding:1px 4px}.network-note{font-size:10px;padding:8px 12px}.dialog{padding:27px 23px;border-radius:24px}.dialog h2{font-size:23px;margin-bottom:20px}.dialog-flower{font-size:32px}.help-steps{gap:16px}.help-steps li{gap:12px}.help-steps strong{font-size:12px}.help-steps p{font-size:10px}.help-note{font-size:9px}.help-steps li>b{font-size:18px}.pause-dialog h2{font-size:22px}.pause-dialog>p:not(.eyebrow){font-size:11px}footer{font-size:7px;min-height:44px;gap:12px;line-height:1.5}footer>div{gap:12px}.toast{font-size:11px;padding:10px 15px;bottom:18px}body[data-mode=online][data-view=home] .stage,body[data-view=lobby] .stage{min-height:410px}body[data-view=playing] .game-heading>div:first-child,body[data-view=countdown] .game-heading>div:first-child,body[data-view=finished] .game-heading>div:first-child{display:none}body[data-view=playing] .game-heading,body[data-view=countdown] .game-heading,body[data-view=finished] .game-heading{padding-top:4px;padding-bottom:13px}body[data-view=playing] .stage,body[data-view=countdown] .stage,body[data-view=finished] .stage{height:clamp(345px,calc(100svh - 295px),500px)}html[lang=en] .game-heading h1{font-size:29px}html[lang=en] .brand strong{font-size:20px}html[lang=en] .mode-switch button{font-size:10px;gap:5px}}
@media(max-width:370px){.app-shell{width:calc(100% - 18px)}.brand-spark{display:none}.brand strong{font-size:17px}.topbar{height:59px}.tools{gap:5px}.icon-button{width:28px;height:28px}.brand small{font-size:7px}.brand-icon{width:34px;height:34px}.game-heading h1{font-size:25px}.game-heading{gap:12px}.attention-pill{font-size:8px;max-width:calc(100% - 139px);padding:7px}.timer-bubble{padding:8px 7px}.timer-bubble strong{font-size:20px}.timer-bubble svg{display:none}.score-bubble{min-width:73px}.score-bubble strong{font-size:21px}.main-action strong{font-size:16px}.under-stage{font-size:7px;padding-left:12px;padding-right:12px}.game-dock{padding-left:13px;padding-right:13px}.roster-name{font-size:8px}.panel-copy{font-size:9px}.online-panel,.lobby-panel{max-width:calc(100% - 24px)}.voice-copy>span{font-size:8px}}
@media(max-height:600px) and (min-width:701px){.topbar{height:52px}.brand-icon{width:34px;height:34px}.brand-icon svg{width:24px;height:24px}.brand strong{font-size:18px}.brand small{font-size:8px}.game-heading{padding:5px 4px 12px}.game-heading .eyebrow{display:none}.game-heading h1{font-size:25px}.mode-switch button{padding:9px 12px;font-size:10px}.stage{height:calc(100svh - 225px);min-height:260px}.game-dock{padding:13px 20px 9px;gap:20px}.main-action{min-height:53px}.main-action strong{font-size:16px}.main-action small{font-size:8px}.avatar-choice{width:31px;height:31px}.avatar-sprite{width:27px;height:27px}.best-block strong{font-size:20px}.under-stage{min-height:27px;font-size:8px;padding-bottom:7px}footer{min-height:30px;padding:7px 4px;font-size:8px}.hud{inset:11px 15px auto}.online-panel,.lobby-panel{max-height:calc(100% - 20px);transform:translate(-50%,-50%)}.result-panel{max-height:calc(100% - 16px);padding:15px 23px}.result-medal{display:none}.result-panel h2{font-size:22px}.result-score strong{font-size:38px}.result-copy{margin:6px 0 10px}.hostess-bubble{font-size:9px}.welcome-sticker{top:34%;padding:10px 15px}.welcome-sticker strong{font-size:15px}.welcome-sticker>span:last-child{font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Remaining time comes from the authoritative warning timestamp, including local pause. */
.attention-pill{overflow:hidden}
.attention-pill::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:#bf864e;transform:scaleX(var(--warning-left,0));transform-origin:left;opacity:0}
body[data-attention=warning] .attention-pill::after{opacity:.8}