:root{--brand:#00a3e0;--ink:#000;--muted:#8d8d8d;--panel:#ededed;--night:#222;--gold:#f2b705;--red:#d7263d;--ui:"Roboto", "Noto Sans TC", system-ui, sans-serif}*{box-sizing:border-box}html,body{height:100%;font-family:var(--ui);-webkit-tap-highlight-color:transparent;background:#0b1a2a;margin:0}body{overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none}#game,#game canvas,img{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}#game canvas{touch-action:none}#app{background:#fff;flex-direction:column;max-width:480px;height:100dvh;margin:0 auto;display:flex;position:relative;overflow:hidden}header{z-index:2;background:#fff;align-items:center;gap:12px;height:52px;display:flex;box-shadow:0 2px 8px #0000000f}.logo{background:var(--brand);color:#fff;height:100%;font:500 24px var(--ui);clip-path:polygon(0 0,100% 0,calc(100% - 16px) 100%,0 100%);align-items:center;padding:0 30px 0 16px;display:flex}h1{font:700 15px var(--ui);letter-spacing:1px;flex:1;margin:0}.icon{width:44px;height:44px;color:var(--ink);cursor:pointer;background:0 0;border:0;place-items:center;display:grid}.icon.off #wave{display:none}#hud{background:var(--night);color:#fff;z-index:2;grid-template-columns:auto 1fr;align-items:center;gap:14px;padding:8px 14px;display:grid}.score{align-items:center;gap:6px;display:flex}.score img{width:26px;height:26px}.score b{font:900 22px var(--ui);font-variant-numeric:tabular-nums;min-width:4ch}.score b.bump{animation:.25s bump}@keyframes bump{40%{color:var(--gold);transform:scale(1.25)}}.timer{background:#ffffff26;border-radius:5px;height:12px;position:relative;overflow:hidden}.timer i{background:var(--brand);transform-origin:0;position:absolute;inset:0}.timer.low i{background:var(--red)}.timer span{font:700 10px/14px var(--ui);font-variant-numeric:tabular-nums;position:absolute;top:-1px;right:6px}#game{background:#0a4a6e url(/bg.webp) 50%/cover no-repeat;flex:1;min-height:0;position:relative}#game canvas{display:block;position:relative}#banner{z-index:3;text-align:center;font:900 28px var(--ui);letter-spacing:6px;color:#fff;text-shadow:0 2px #0006;pointer-events:none;background:linear-gradient(90deg,#d7263d00,#d7263dcc 30% 70%,#d7263d00);padding:10px 0;animation:2.6s forwards banner;position:absolute;top:18%;left:0;right:0}#banner.rush{background:linear-gradient(90deg,#00a3e000,#00a3e0cc 30% 70%,#00a3e000)}#banner.x2{color:#000;text-shadow:none;background:linear-gradient(90deg,#f2b70500,#f2b705dd 30% 70%,#f2b70500)}#banner[hidden],#x2[hidden]{display:none}@keyframes banner{0%{opacity:0;transform:scaleY(0)}10%,78%{opacity:1;transform:none}to{opacity:0}}#x2{z-index:3;font:900 22px var(--ui);color:#000;background:var(--gold);clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);pointer-events:none;padding:4px 12px;position:absolute;top:10px;right:12px}.reveal{z-index:4;color:#fff;text-align:center;background:radial-gradient(60% 40% at 50% 45%,#0b2a44ee,#000c);flex-direction:column;justify-content:center;align-items:center;gap:6px;animation:.25s ease-out rv;display:flex;position:absolute;inset:0}.reveal[hidden]{display:none}.reveal .kicker{color:#7fd9f7}.reveal img{object-fit:contain;background:radial-gradient(closest-side,#f2b70555,#f2b70500);width:70%;max-width:300px;height:150px;animation:.6s cubic-bezier(.2,1.4,.4,1) rvimg}.reveal h2{font:900 32px var(--ui);letter-spacing:4px;margin:0}.reveal p{color:#ffffffb0;margin:0;font-size:13px}@keyframes rv{0%{opacity:0}}@keyframes rvimg{0%{opacity:0;transform:scale(.3)rotate(-10deg)}}.odds{border-collapse:collapse;width:100%;font-size:12px}.odds td{border-bottom:1px solid var(--panel);padding:3px 4px}.odds td:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}.odds img{object-fit:contain;vertical-align:middle;width:34px;height:22px;margin-right:6px}.fine{color:var(--muted);text-align:center;margin:0;font-size:11px}.chest{align-items:center;gap:14px;display:flex}.chest img{object-fit:contain;width:110px;height:110px;animation:.6s cubic-bezier(.2,1.4,.4,1) rvimg}.chest p{font:900 18px var(--ui);letter-spacing:2px;margin:0}.chest h2{font-size:34px!important}.progress p{color:var(--muted);margin:4px 0 0;font-size:12px}.pbar{background:var(--panel);border-radius:5px;height:8px;overflow:hidden}.pbar i{background:var(--gold);border-radius:5px;height:100%;transition:width .6s;display:block}.sheet{touch-action:pan-y;z-index:4;background:#fff;border-radius:5px;flex-direction:column;gap:12px;max-height:calc(100% - 24px);padding:20px;display:flex;position:absolute;top:50%;left:16px;right:16px;overflow-y:auto;transform:translateY(-42%);box-shadow:0 20px 60px #0009}.sheet[hidden]{display:none}.kicker{font:700 12px var(--ui);letter-spacing:2px;color:var(--brand);margin:0}.sheet h2{font:900 24px/1.25 var(--ui);margin:0}.legend{grid-template-columns:repeat(4,1fr);gap:6px;margin:0;padding:0;list-style:none;display:grid}.legend li{font:700 12px var(--ui);background:var(--panel);border-radius:5px;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;display:flex}.legend img{object-fit:contain;width:46px;height:30px}.legend li.special{color:var(--red)}.hint{color:#444;margin:0;font-size:13px;line-height:1.6}.stats{grid-template-columns:repeat(3,1fr);gap:8px;margin:0;display:grid}.stats div{background:var(--panel);text-align:center;border-radius:5px;padding:8px}.stats dt{color:var(--muted);font-size:11px}.stats dd{font:900 20px var(--ui);font-variant-numeric:tabular-nums;margin:2px 0 0}.prize{font:700 15px var(--ui);color:var(--brand);text-align:center;margin:0}.key{cursor:pointer;background:var(--brand);color:#fff;font:900 20px var(--ui);letter-spacing:3px;clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);border:0;padding:14px}.key:active:not(:disabled){opacity:.9;transform:translateY(2px)}.key:disabled{background:var(--muted);cursor:default}.key:focus-visible,.icon:focus-visible{outline:3px solid var(--gold);outline-offset:2px}#perf{z-index:5;color:#7cf5c9;pointer-events:none;background:#000c;border-radius:4px;margin:0;padding:6px 8px;font:12px/1.4 ui-monospace,monospace;position:absolute;bottom:8px;left:8px}#glnote{z-index:5;color:#fff;text-align:center;background:#000c;border-radius:5px;margin:0;padding:12px;font-size:14px;position:absolute;top:40%;left:16px;right:16px}#glnote[hidden]{display:none}
