:root{--bg: #1b1f3a;--panel: #262b4d;--panel-2: #313868;--text: #f4f4ff;--muted: #a9adcf;--accent: #ffd166;--accent-2: #06d6a0;--danger: #ef476f;--radius: 14px;--font: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:var(--font);overscroll-behavior:none;touch-action:manipulation;user-select:none;-webkit-user-select:none}#app{display:flex;flex-direction:column;height:100%;max-width:560px;margin:0 auto;padding:8px 12px calc(8px + env(safe-area-inset-bottom));gap:8px}#hud{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;flex:0 0 auto}.hud-item{background:var(--panel);border-radius:var(--radius);padding:6px 10px;text-align:center}.hud-label{font-size:11px;color:var(--muted)}.hud-value{font-size:20px;font-weight:700;line-height:1.2}.hud-value small{font-size:12px;color:var(--muted);font-weight:400}.hud-bar{height:6px;background:#0f1228;border-radius:3px;margin-top:4px;overflow:hidden}.hud-bar>div{height:100%;background:var(--accent-2);transition:width .3s}.hud-level{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted);padding:0 4px}.hud-level b{color:var(--text);font-size:15px}.hud-combo{color:var(--accent);font-weight:700}#board-wrap{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;position:relative}#board{display:block;border-radius:var(--radius);background:#12152b;touch-action:none;max-width:100%;max-height:100%}#board-hint{position:absolute;top:8px;left:50%;transform:translate(-50%);background:#000000b3;color:var(--accent);padding:6px 14px;border-radius:999px;font-size:14px;pointer-events:none;opacity:0;transition:opacity .2s;white-space:nowrap}#board-hint.show{opacity:1}#skillbar{flex:0 0 auto;display:grid;grid-template-columns:repeat(8,1fr);gap:6px}.skill{background:var(--panel);border-radius:12px;padding:6px 2px;text-align:center;border:2px solid transparent;cursor:pointer;position:relative;transition:transform .1s}.skill:active{transform:scale(.95)}.skill.locked{opacity:.45;cursor:default}.skill.disabled{opacity:.55;cursor:default}.skill.active{border-color:var(--accent);background:var(--panel-2)}.skill-icon{font-size:22px;line-height:1}.skill-name{font-size:10px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.skill-pp{font-size:9px;color:var(--accent-2);letter-spacing:1px;margin-top:2px}.skill-num{position:absolute;top:-6px;left:-4px;background:var(--accent);color:#222;font-weight:700;font-size:11px;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center}.skill-progress{font-size:9px;color:var(--muted);margin-top:2px}#modal-root,#screen-root{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:#080a18bf;z-index:10;padding:16px}#modal-root.show,#screen-root.show{display:flex}#screen-root{z-index:20;background:var(--bg)}.card{background:var(--panel);border-radius:20px;padding:22px 20px;width:100%;max-width:420px;max-height:96vh;overflow:auto;box-shadow:0 20px 60px #00000080;text-align:center;animation:pop .25s ease-out}@keyframes pop{0%{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}.card h1{margin:0 0 6px;font-size:32px;color:var(--accent)}.card h2{margin:0 0 12px;font-size:22px}.card p{color:var(--muted);margin:6px 0}.btn{display:inline-block;background:var(--accent);color:#1b1f3a;font-weight:700;font-size:17px;border:none;border-radius:999px;padding:12px 26px;margin:6px 4px;cursor:pointer;font-family:inherit;transition:transform .1s}.btn:active{transform:scale(.96)}.btn.secondary{background:var(--panel-2);color:var(--text)}.btn.small{font-size:14px;padding:8px 16px}.btn:disabled{opacity:.5;cursor:default}.q-text{font-size:52px;font-weight:800;margin:8px 0 14px;letter-spacing:2px}.q-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}.q-choice{font-size:30px;font-weight:700;padding:16px 0;border-radius:14px;background:var(--panel-2);border:3px solid transparent;color:var(--text);cursor:pointer;font-family:inherit}.q-choice:active{transform:scale(.97)}.q-choice.eliminated{opacity:.25;pointer-events:none;text-decoration:line-through}.q-choice.right{border-color:var(--accent-2);background:#0d5c47}.q-choice.wrong{border-color:var(--danger);background:#6b1f36}.q-input{font-size:40px;font-weight:800;min-height:60px;background:#12152b;border-radius:12px;margin-bottom:10px;line-height:60px;letter-spacing:3px}.q-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.q-key{font-size:26px;font-weight:700;padding:12px 0;border-radius:12px;background:var(--panel-2);color:var(--text);border:none;cursor:pointer;font-family:inherit}.q-key.confirm{background:var(--accent-2);color:#0b2a22}.q-key.del{background:#4a3552}.q-hint{color:var(--accent);font-size:18px;margin-bottom:8px}.q-result{font-size:26px;font-weight:800;margin-top:12px;min-height:34px}.q-result.ok{color:var(--accent-2)}.q-result.bad{color:var(--danger)}.stat-row{display:flex;justify-content:space-between;background:var(--panel-2);border-radius:10px;padding:8px 14px;margin:6px 0;font-size:16px}.stat-row b{color:var(--accent)}.numbers-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:8px 0 12px}.chip{background:var(--accent);color:#1b1f3a;font-weight:800;font-size:18px;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center}.chip.new{background:var(--accent-2);box-shadow:0 0 0 3px #06d6a059}.obstacle-list{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:8px 0;font-size:14px}.obstacle-list span{background:var(--panel-2);border-radius:999px;padding:4px 10px}.grid-wrap{overflow:auto}.pgrid{border-collapse:collapse;margin:0 auto;font-size:12px}.pgrid th,.pgrid td{width:32px;height:32px;text-align:center;border:1px solid #12152b}.pgrid th{background:var(--panel-2);font-weight:700}.pgrid td{background:#12152b;color:var(--muted)}.pgrid td.c1{background:#1f6f56;color:#fff}.pgrid td.c3{background:#12a37b;color:#fff}.pgrid td.c6{background:#06d6a0;color:#0b2a22;font-weight:700}.pgrid td.w{box-shadow:inset 0 0 0 2px var(--danger)}.pgrid th.mastered{background:var(--accent);color:#1b1f3a}.setting-row{display:flex;flex-direction:column;gap:6px;margin:10px 0;text-align:left}.setting-row label{font-size:14px;color:var(--muted)}.setting-row select{font-size:16px;padding:8px;border-radius:10px;background:var(--panel-2);color:var(--text);border:none;font-family:inherit}.unlock-icon{font-size:64px;margin:8px 0;animation:bounce .8s ease-in-out infinite alternate}@keyframes bounce{0%{transform:translateY(-6px) scale(1)}to{transform:translateY(4px) scale(1.08)}}@media(max-height:640px){.q-text{font-size:40px}.q-choice{font-size:24px;padding:12px 0}}@media(max-width:420px){.skill-name{font-size:9px}.skill-icon{font-size:18px}.hud-value{font-size:17px}}.pk{display:inline-flex;align-items:center;justify-content:center;position:relative;vertical-align:middle}.pk img{image-rendering:pixelated;image-rendering:crisp-edges;display:block}.pk .pk-emoji,.pk.fallback img{display:none}.pk.fallback .pk-emoji{display:inline}.pk-icon img{width:40px;height:30px;object-fit:contain;margin:-4px 0}.pk-inline img{width:24px;height:24px;object-fit:contain}.pk-inline.pk-mon img{width:32px;height:24px}.pk-big img{width:120px;height:120px;object-fit:contain}.skill-icon{position:relative;height:26px;display:flex;align-items:center;justify-content:center}.skill.locked .pk img{filter:grayscale(1) brightness(.6)}.skill-lock{position:absolute;right:-2px;bottom:-4px;font-size:11px}