:root{color-scheme:dark;font-family:Inter,system-ui,-apple-system,"Noto Sans TC",sans-serif;background:#050718;color:#ecf7ff}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 50% 0%,#27134b 0,#050718 42%);min-height:100vh}.shell{width:min(100%,820px);margin:auto;padding:16px max(12px,env(safe-area-inset-left)) 32px}.top{display:flex;align-items:end;justify-content:space-between;gap:12px;padding:4px 4px 12px}.top small,.hud small,.panel small{color:#75d9ee;letter-spacing:.13em;font-size:.65rem}.top h1{font-size:clamp(1.4rem,5vw,2.2rem);margin:4px 0 0;text-shadow:0 0 18px #e331ce}.top h1 span{display:block;font-size:.48em;letter-spacing:.2em;color:#52eaff}.top a{color:#a2e9f5;font-size:.75rem;text-decoration:none}.hud{display:flex;justify-content:space-between;gap:6px;border:1px solid #3773a2;background:#07142acc;padding:8px;border-radius:10px;margin-bottom:8px}.hud>div{display:grid;gap:4px}.hud strong{font-size:clamp(.9rem,3vw,1.2rem);white-space:nowrap}.hud #lives{color:#ff4c9f}.board-wrap{position:relative;width:min(100%,min(64vh,600px));margin:auto;aspect-ratio:3/5;border:2px solid #25dfff;box-shadow:0 0 20px #00d9ff99,0 0 35px #d12cb552;background:#06091e;overflow:hidden}canvas{display:block;width:100%;height:100%;touch-action:none}.overlay{position:absolute;inset:0;display:grid;place-items:center;background:#020719af;padding:14px}.overlay[hidden]{display:none}.panel{width:min(95%,420px);padding:20px;border:1px solid #60ecff;background:#06132bee;box-shadow:0 0 20px #da3ad466;text-align:center}.panel h2{font-size:2rem;margin:6px 0;color:#fff;text-shadow:0 0 20px #ed39b9}.panel p{line-height:1.6;color:#d8e8f7}.panel button,.toolbar button,.levels button{border:1px solid #33e4f4;border-radius:6px;background:#09203d;color:#e9faff;padding:10px 14px;font-weight:700;cursor:pointer}.panel #primary{background:#ba1899;border-color:#ff63da;min-width:150px}.panel button:hover,.toolbar button:hover,.levels button:hover{filter:brightness(1.25)}.panel button[hidden]{display:none}.toolbar{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;align-items:center;padding:12px}.toolbar label{font-size:.8rem}.hint,.levels p{color:#a3b8cb;font-size:.8rem;line-height:1.5}.levels{border:1px solid #294c75;background:#071126;padding:12px;border-radius:8px}.levels h2{margin:0 0 10px;font-size:1rem}.levels>div{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.levels button{padding:8px 2px;font-size:.8rem}.levels button[disabled]{opacity:.35;cursor:not-allowed}.levels button[aria-current=true]{border-color:#ff58c9;color:#ff83d7}@media(max-width:500px){.shell{padding-top:8px}.top a{max-width:96px}.board-wrap{width:min(100%,min(65vh,430px))}.panel{padding:14px}.panel h2{font-size:1.5rem}.panel p{font-size:.85rem}.hud{padding:6px}.levels>div{grid-template-columns:repeat(5,1fr)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

.web-footer{text-align:center;padding:12px 16px 28px;color:#a3b8cb;font-size:.8rem}.web-footer a{color:#75d9ee}.bgf-copy{max-width:820px;margin:12px auto;padding:14px;border:1px solid #294c75;background:#071126;color:#d8e8f7}.bgf-button{border:1px solid #33e4f4;border-radius:6px;background:#09203d;color:#e9faff;padding:8px 12px;cursor:pointer}