:where(.desk-knock-stage,.back-row-beat-stage,.purr-game-stage){container-type:inline-size;--hud-surface: #192438;--hud-text: #f5f6fb;--hud-muted: #d9e1ed;--hud-line: #73819a;--hud-label-size: .642857em;--hud-number-weight: 800;--hud-label-weight: 600;--hud-radius: 8px}:where(.arcade-hud){position:absolute;display:grid;grid-template-columns:35% minmax(0,1fr);inset:2.058824% 7.179487% auto;height:2em;font-size:7.179487cqw;isolation:isolate;color:var(--hud-text);font-variant-numeric:tabular-nums;pointer-events:none}:where(.arcade-hud):before{content:"";position:absolute;z-index:-1;top:-.5em;right:-1em;bottom:-.8em;left:-1em;background:linear-gradient(180deg,rgb(20 30 46 / 96%),rgb(20 30 46 / 94%) 70%,transparent)}:where(.arcade-hud__score){display:grid;grid-template-rows:.892857em auto;align-content:start;min-width:0;padding:0;color:var(--hud-text);container-type:inline-size}:where(.arcade-hud__score small){color:var(--hud-muted);font-size:var(--hud-label-size);font-weight:600;line-height:1.3}:where(.arcade-hud__score b){font-size:1em;font-weight:800;line-height:1;letter-spacing:-.035em}:where(.arcade-hud__stats){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:0;min-width:0;padding:0}:where(.arcade-hud__stats small){font-size:var(--hud-label-size);font-weight:600;line-height:1.3}.desk-knock-stage{position:relative;aspect-ratio:390 / 680;margin-inline:auto;overflow:hidden;border-radius:16px;isolation:isolate;background:#655875;color:#fff8ef;font-family:var(--font-body, "Noto Sans Thai", sans-serif)}.desk-knock-stage .game-canvas-host{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.desk-knock-stage .game-canvas-host canvas{display:block;width:100%;height:100%}.desk-knock-stage .game-canvas-host:focus-visible{outline:3px solid #93f4e7;outline-offset:-4px}.desk-knock-hud{z-index:1}.desk-knock-clock{display:grid;grid-column:1;grid-row:1 / 3;grid-template-rows:.892857em auto;justify-items:center;align-items:start;font-variant-numeric:tabular-nums}.desk-knock-clock small{font-size:var(--hud-label-size);font-weight:var(--hud-label-weight);color:var(--hud-muted)}.desk-knock-clock b{font-size:.857143em;font-weight:var(--hud-number-weight);line-height:1.15;letter-spacing:-.02em}.desk-knock-clock.is-urgent{color:#ffdc79}.desk-knock-clock.is-urgent small{color:inherit}.desk-knock-lives{display:flex;grid-column:2;grid-row:1;justify-content:flex-end;align-items:center;gap:4px;padding-top:2px}.desk-knock-lives svg{width:17px;height:17px}.desk-knock-lives .is-filled{fill:#ffaccb;color:#ffcee0}.desk-knock-lives .is-spent{fill:#514660;color:#ac97b7}.desk-knock-bottom{position:absolute;z-index:1;bottom:4%;inset-inline:24px;min-height:63px;display:flex;flex-direction:column;align-items:center;justify-content:end;gap:6px;text-align:center;pointer-events:none;text-shadow:0 1px 3px #34243c}.desk-knock-bottom strong{font-size:16px;font-weight:600;line-height:1.4}.desk-knock-bottom span{font-size:14px;line-height:1.4;color:#f2e8f5}.desk-knock-power{position:relative;isolation:isolate;display:flex;gap:4px;margin-bottom:2px}.desk-knock-power:before{content:"";position:absolute;z-index:-1;top:-5px;right:-9px;bottom:-5px;left:-9px;background:#192438;border-radius:4px}.desk-knock-power i{width:12px;height:5px;background:#45384f;border-radius:2px}.desk-knock-power i.is-on{background:#9cf5e5}.desk-knock-power i.is-hot{background:#ffda65}.desk-knock-result{position:absolute;z-index:2;bottom:9%;inset-inline:16px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;pointer-events:none;filter:drop-shadow(0 2px 0 #442b38);animation:desk-reward .18s ease-out}.desk-knock-result span{font-size:34px;font-weight:var(--hud-number-weight);color:#c6ffef;line-height:1.4;font-variant-numeric:tabular-nums}.desk-knock-bonuses{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 10px}.desk-knock-bonuses small{font-size:14px;font-weight:var(--hud-label-weight);color:#fff0c5}@keyframes desk-reward{0%{transform:translateY(6px);opacity:.3}to{transform:translateY(0);opacity:1}}@media(max-width:380px){.desk-knock-bottom strong{font-size:14px}}@media(prefers-reduced-motion:reduce){.desk-knock-result{animation:none}}
