@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Noto+Sans+TC:wght@500;700;900&display=swap');

:root { color-scheme: light; font-family: "Noto Sans TC", sans-serif; background: #b7bbc3; color: #27262d; }
* { box-sizing: border-box; }
.app { width: min(1040px, 100%); padding: 14px 16px 20px; }
.hero { display:flex; align-items:center; justify-content:space-between; padding: 0 9px 11px; }
.eyebrow { font: 700 11px Fredoka,sans-serif; letter-spacing: .18em; color: #3c3a43; margin:0 0 1px; }
h1 { font: 900 clamp(21px,4vw,32px) "Noto Sans TC",sans-serif; letter-spacing:.04em; margin:0; color:#24242c; }
.scoreline { font:700 15px Fredoka,sans-serif; letter-spacing:.08em; }.scoreline strong { font-size:25px; }.scoreline small{font-size:11px;margin-left:6px}.restart { border:2px solid #27262d; border-radius:99px; background:#fff; color:#222; width:35px; height:35px; font:700 21px Fredoka; cursor:pointer; transition:transform .15s; }
.restart:hover,.restart:focus-visible { transform:translateY(-2px); outline:3px solid #ffc96e; }
.game-layout { display:grid; justify-content:center; }
.stage-wrap { position:relative; width:100%; aspect-ratio:16 / 9; overflow:hidden; box-shadow: 0 10px 26px #4c4f5966; background:#c9cbd1; border:1px solid #16161b; }
canvas { display:block; width:100%; height:100%; touch-action:none; }
.sprite-layer { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.sprite-layer img { position:absolute; display:block; object-fit:contain; transform:translate(-50%,-50%); user-select:none; -webkit-user-drag:none; }
.fixed-mascot { z-index:8; }.fixed-next { z-index:4; }.wheel-doll { z-index:5; }.launcher { z-index:7; }.drop-preview { z-index:6; opacity:.84; }.falling { z-index:3; filter:drop-shadow(0 4px 3px #20202755); }
.tip { text-align:center; color:#292a31; font-size:13px; font-weight:700; margin:13px 0 0; }.tip span { font-size:24px; vertical-align:middle; }
.gameover { position:absolute; z-index:20; inset:0; display:grid; place-content:center; text-align:center; gap:13px; background:#272831df; color:white; padding:25px; }.gameover p { margin:0; font-weight:900; font-size:24px; }.gameover strong { font-size:18px; }.gameover span { color:#ffcf64; font:700 35px Fredoka,sans-serif; }.gameover button { margin-top:5px; border:0; border-radius:99px; background:#fff; color:#262730; font:900 17px "Noto Sans TC"; padding:12px 25px; cursor:pointer; }.hidden { display:none; }
@media (max-width: 600px) { .app { padding:10px 0 14px; }.hero{padding:0 12px 8px}.scoreline{font-size:12px}.scoreline strong{font-size:19px}.scoreline small{display:none} }