:root{--bg-deep: #05070f;--bg-lab: #0a1020;--panel: rgba(14, 22, 44, .82);--panel-solid: #0d1430;--line: #7fc4ff;--line-dim: rgba(127, 196, 255, .18);--line-soft: #3f6f9e;--beam: #eaf6ff;--red: #ff4d63;--green: #4dffa8;--blue: #4d9bff;--gold: #ffd479;--metal: #9db4cc;--text: #dce9f7;--text-dim: rgba(220, 233, 247, .62);--font-ui: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;--font-num: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--shadow-panel: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 -14px 30px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .45);--noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;overflow:hidden;background:var(--bg-deep);color:var(--text);font-family:var(--font-ui);overscroll-behavior:none}#app{position:fixed;inset:0;display:block;background:radial-gradient(120% 90% at 50% 0%,#111a38,#080d1c 55%,#04060d)}#stage{position:absolute;inset:0;overflow:hidden}#game{position:absolute;inset:0;touch-action:none}#game canvas{display:block;width:100%;height:100%}#board-frame{position:absolute;inset:0;pointer-events:none;background:radial-gradient(125% 100% at 50% 45%,transparent 62%,rgba(3,5,12,.5) 100%)}.panel{position:relative;background:linear-gradient(180deg,#1e2e54d1,#090e1ee6),radial-gradient(120% 140% at 18% 0%,rgba(127,196,255,.16),transparent 62%);border:1px solid var(--line-dim);border-radius:14px;box-shadow:var(--shadow-panel);backdrop-filter:blur(9px) saturate(1.1)}.panel:after{content:"";position:absolute;inset:0;border-radius:inherit;background-image:var(--noise);background-size:140px 140px;opacity:.035;mix-blend-mode:screen;pointer-events:none}.hud{position:absolute;left:0;right:0;z-index:5;display:flex;align-items:center;gap:10px;pointer-events:none;transition:opacity .22s ease}#app[data-ui=title] .hud,#app[data-ui=levels] .hud,#app[data-ui=help] .hud,#app[data-ui=win] .hud{opacity:0;pointer-events:none!important}.hud>*{pointer-events:auto}#hud-top{top:0;justify-content:space-between;padding:calc(10px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 10px calc(12px + env(safe-area-inset-left))}#hud-bottom{bottom:0;justify-content:flex-end;padding:10px calc(12px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left))}.hud-group{display:flex;align-items:center;gap:10px;min-width:0}#hud-top .hud-group:first-child{padding:6px 14px 6px 8px;border-radius:12px;background:linear-gradient(180deg,#182646b8,#090e1eb3);border:1px solid rgba(127,196,255,.14);box-shadow:inset 0 1px #ffffff0f}.chip{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;font-family:var(--font-num);font-size:15px;font-weight:700;color:#062033;background:linear-gradient(180deg,#bfe4ff,#6fb6ee);box-shadow:0 0 14px #7fc4ff59,inset 0 -2px #0000002e}.hud-copy{display:flex;flex-direction:column;line-height:1.15;min-width:0}.hud-copy strong{font-size:15px;letter-spacing:.06em}#objective{font-size:11.5px;color:var(--text-dim);letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pips{display:flex;gap:6px}.pip{width:12px;height:12px;border-radius:50%;border:1.5px solid rgba(220,233,247,.28);background:#080c18b3;transition:box-shadow .22s ease,background .22s ease,border-color .22s ease}.pip.lit{border-color:#fffc;background:currentColor;box-shadow:0 0 12px currentColor,0 0 22px currentColor}.stat{display:flex;align-items:baseline;gap:5px;padding:7px 12px;border-radius:11px;font-family:var(--font-num);background:#080c18a8;border:1px solid rgba(127,196,255,.14)}.stat-label{font-family:var(--font-ui);font-size:11px;color:var(--text-dim);letter-spacing:.14em}.stat-value{font-size:18px;font-weight:700;color:var(--beam);text-shadow:0 0 10px rgba(127,196,255,.5)}.stat-sep,.stat-par{font-size:12px;color:var(--text-dim)}.stat.perfect .stat-value{color:var(--gold);text-shadow:0 0 12px rgba(255,212,121,.6)}.controls{display:flex;gap:6px;padding:6px;border-radius:16px}.ctl{display:flex;align-items:center;gap:7px;min-height:46px;padding:0 14px;border:1px solid rgba(127,196,255,.16);border-radius:11px;background:linear-gradient(180deg,#263a648c,#0c1224b8);color:var(--text);font-family:var(--font-ui);font-size:13px;letter-spacing:.06em;cursor:pointer;transition:transform .12s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease}.ctl:hover{border-color:#7fc4ff73;background:linear-gradient(180deg,#38589499,#0e162cc7)}.ctl:active{transform:translateY(1px) scale(.985)}.ctl:focus-visible,.btn:focus-visible,.icon-btn:focus-visible,.tile:focus-visible{outline:2px solid var(--line);outline-offset:2px}.ctl-icon{font-size:16px;color:#a9d8ff;text-shadow:0 0 10px rgba(127,196,255,.5)}.key{font-family:var(--font-num);font-size:10px;padding:1px 5px;border-radius:5px;color:var(--text-dim);border:1px solid rgba(220,233,247,.18)}.toast{position:absolute;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translate(-50%,8px);z-index:8;max-width:min(88vw,460px);padding:10px 16px;border-radius:11px;font-size:13px;line-height:1.4;text-align:center;color:var(--text);background:#0a1022eb;border:1px solid rgba(127,196,255,.28);box-shadow:0 8px 26px #00000080,inset 0 1px #ffffff0f;opacity:0;transition:opacity .22s ease,transform .22s ease;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%)}#overlay{position:absolute;inset:0;z-index:10;display:grid;pointer-events:none}.screen{grid-area:1 / 1;display:grid;place-items:center;padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));background:radial-gradient(120% 100% at 50% 30%,#060a16b8,#03050ceb);backdrop-filter:blur(7px);pointer-events:auto;animation:fade .26s ease both}.screen[hidden]{display:none}@keyframes fade{0%{opacity:0}to{opacity:1}}.screen[data-screen=title]{place-items:center start;padding-left:clamp(20px,7vw,96px);background:radial-gradient(90% 120% at 12% 40%,#0c1630db,#03050cf0),linear-gradient(120deg,#0a1226,#04060e)}.title-art{position:absolute;inset:0;overflow:hidden;pointer-events:none}.ray{position:absolute;right:-6%;width:58%;height:2px;border-radius:2px;filter:blur(.4px);opacity:.85;transform:rotate(-6deg);transform-origin:right center;animation:rayPulse 6s ease-in-out infinite}.ray.r{top:40%;background:linear-gradient(90deg,rgba(255,77,99,0),var(--red));box-shadow:0 0 22px #ff4d63b3}.ray.g{top:46%;width:62%;background:linear-gradient(90deg,rgba(77,255,168,0),var(--green));box-shadow:0 0 22px #4dffa8b3;animation-delay:.4s}.ray.b{top:52%;width:66%;background:linear-gradient(90deg,rgba(77,155,255,0),var(--blue));box-shadow:0 0 22px #4d9bffb3;animation-delay:.8s}@keyframes rayPulse{0%,to{opacity:.5}50%{opacity:.95}}.title-body{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;max-width:min(92vw,420px)}.emblem{width:64px;height:64px;margin-bottom:10px;filter:drop-shadow(0 0 12px rgba(127,196,255,.35))}.emblem.small{width:46px;height:46px;margin:0 auto 4px}.title{margin:0;font-size:clamp(44px,9vw,68px);line-height:.98;letter-spacing:.16em;color:#f2f8ff;text-shadow:0 0 24px rgba(127,196,255,.45),0 2px 0 rgba(0,0,0,.4)}.subtitle{margin:6px 0 0;font-family:var(--font-num);font-size:12px;letter-spacing:.32em;color:#9fd6ff;text-transform:uppercase}.title-line{margin:14px 0 18px;font-size:13.5px;line-height:1.6;color:var(--text-dim)}.menu{display:flex;flex-direction:column;gap:10px;width:100%}.menu.row{flex-direction:row;flex-wrap:wrap;justify-content:center}.btn{min-height:48px;padding:0 20px;border-radius:12px;border:1px solid rgba(127,196,255,.24);background:linear-gradient(180deg,#22366099,#0b1122cc);color:var(--text);font-family:var(--font-ui);font-size:14.5px;letter-spacing:.1em;cursor:pointer;transition:transform .12s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease}.btn:hover{border-color:#7fc4ff8c;box-shadow:0 0 18px #7fc4ff38}.btn:active{transform:translateY(1px) scale(.99)}.btn.primary{color:#04202f;font-weight:700;border-color:#bfe4ffb3;background:linear-gradient(180deg,#cfeaff,#78bdf0);box-shadow:0 0 22px #7fc4ff66,inset 0 -3px #00000026}.title-progress{margin:14px 0 0;font-family:var(--font-num);font-size:11.5px;letter-spacing:.1em;color:var(--text-dim)}.sheet{width:min(94vw,720px);max-height:88vh;display:flex;flex-direction:column;padding:18px;overflow:hidden}.sheet.wide{width:min(94vw,860px)}.sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.sheet-head h2{margin:0;font-size:17px;letter-spacing:.16em}.sheet-foot{margin:12px 0 0;font-size:11.5px;color:var(--text-dim)}.icon-btn{width:40px;height:40px;border-radius:10px;border:1px solid rgba(127,196,255,.2);background:#0a1022b3;color:var(--text);font-size:15px;cursor:pointer}.icon-btn:hover{border-color:#7fc4ff80}.tier-tabs{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:thin}.tier-tab{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:62px;padding:7px 9px;border-radius:10px;border:1px solid rgba(127,196,255,.16);background:#0a102299;color:var(--text);font-family:var(--font-ui);font-size:12px;letter-spacing:.08em;cursor:pointer}.tier-tab .tier-num{font-family:var(--font-num);font-size:15px;font-weight:700}.tier-tab[aria-pressed=true]{border-color:currentColor;box-shadow:0 0 14px -2px currentColor}.tier-tab:disabled{opacity:.35;cursor:not-allowed}.tier-role{margin:0 0 10px;font-size:12px;color:var(--text-dim)}.level-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;overflow-y:auto;padding:2px}.tile{position:relative;display:flex;flex-direction:column;gap:4px;min-height:88px;padding:10px;text-align:left;border-radius:12px;border:1px solid rgba(127,196,255,.16);background:linear-gradient(180deg,#1c2c4e80,#090e1eb8);color:var(--text);cursor:pointer;transition:transform .12s ease,border-color .16s ease,box-shadow .16s ease}.tile:hover:not(:disabled){transform:translateY(-2px);border-color:#7fc4ff80;box-shadow:0 8px 22px #0006}.tile:disabled{opacity:.42;cursor:not-allowed}.tile .tile-num{font-family:var(--font-num);font-size:11px;letter-spacing:.14em;color:#9fd6ff}.tile .tile-name{font-size:15px;letter-spacing:.08em}.tile .tile-meta{font-family:var(--font-num);font-size:11px;color:var(--text-dim)}.tile .tile-star{position:absolute;top:8px;right:9px;font-size:13px;color:var(--gold);text-shadow:0 0 10px rgba(255,212,121,.6)}.tile.current{border-color:#ffd47999;box-shadow:inset 0 0 0 1px #ffd47940}.help-body{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:18px;overflow-y:auto}.help-body h3{margin:0 0 8px;font-size:13px;letter-spacing:.16em;color:#9fd6ff}.help-controls ul{margin:0;padding-left:18px;font-size:13px;line-height:1.75;color:var(--text-dim)}.help-controls b{color:var(--text)}.legend{display:grid;gap:8px}.legend-item{display:grid;grid-template-columns:40px 1fr;gap:10px;align-items:center;padding:8px 10px;border-radius:10px;background:#080c1880;border:1px solid rgba(127,196,255,.1)}.legend-item svg{width:34px;height:34px}.legend-item b{display:block;font-size:13px;letter-spacing:.08em}.legend-item span{font-size:11.5px;line-height:1.45;color:var(--text-dim)}.win{width:min(94vw,420px);text-align:center;padding:24px 22px}.win h2{margin:6px 0;font-size:22px;letter-spacing:.2em}.win-detail{margin:0 0 16px;font-size:13px;color:var(--text-dim)}.win-stats{display:flex;justify-content:center;gap:12px;margin-bottom:18px}.win-stat{min-width:76px;padding:9px 12px;border-radius:11px;background:#080c1899;border:1px solid rgba(127,196,255,.14)}.win-stat span{display:block;font-size:10.5px;letter-spacing:.16em;color:var(--text-dim)}.win-stat b{font-family:var(--font-num);font-size:19px;color:var(--beam)}.win-stat b.gold{color:var(--gold);text-shadow:0 0 12px rgba(255,212,121,.55)}.screen[data-screen=teach]{place-items:end center;background:linear-gradient(180deg,#03050c00 40%,#03050cdb);backdrop-filter:none;padding-bottom:calc(78px + env(safe-area-inset-bottom))}.teach-card{width:min(92vw,400px);padding:16px 18px;text-align:center}.teach-icon{display:grid;place-items:center;margin-bottom:6px}.teach-icon svg{width:46px;height:46px}.teach-card h3{margin:4px 0 6px;font-size:15px;letter-spacing:.16em}.teach-card p{margin:0 0 14px;font-size:12.5px;line-height:1.6;color:var(--text-dim)}@media(max-width:760px){#hud-top{flex-wrap:wrap;gap:6px;padding-top:calc(8px + env(safe-area-inset-top))}#hud-top .hud-group{flex:1 1 auto}#objective{display:none}.stat{padding:6px 9px}.stat-label{display:none}.ctl{flex-direction:column;gap:2px;min-width:56px;min-height:50px;padding:5px 8px;font-size:11px}.ctl .key{display:none}.controls{width:100%;justify-content:space-between}.toast{bottom:calc(88px + env(safe-area-inset-bottom))}.help-body{grid-template-columns:1fr}.screen[data-screen=title]{place-items:center;padding-left:16px}.title-body{align-items:center;text-align:center}.menu{align-items:stretch}}@media(max-width:420px){.ctl-label{font-size:10.5px}.win-stats{gap:8px}.win{padding:18px 14px}.win h2{font-size:19px}.tier-tabs{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:thin}.tier-tab{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:62px;padding:7px 9px;border-radius:10px;border:1px solid rgba(127,196,255,.16);background:#0a102299;color:var(--text);font-family:var(--font-ui);font-size:12px;letter-spacing:.08em;cursor:pointer}.tier-tab .tier-num{font-family:var(--font-num);font-size:15px;font-weight:700}.tier-tab[aria-pressed=true]{border-color:currentColor;box-shadow:0 0 14px -2px currentColor}.tier-tab:disabled{opacity:.35;cursor:not-allowed}.tier-role{margin:0 0 10px;font-size:12px;color:var(--text-dim)}.level-grid{grid-template-columns:repeat(auto-fill,minmax(98px,1fr))}}@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}