:root{--bg:#150a24;--bg2:#1e1033;--panel:#2a1a4a;--panel2:#3a2a5a;--accent:#8b5cff;--accent2:#b388ff;--gold:#ffd24a;--green:#3cc87a;--red:#ff5c7a;--text:#efe9ff;--muted:#a99ac9;--cyan:#4dd7ff;--app-max:460px;--tile:42px;--tile-font:23px}*{box-sizing:border-box}html,body{background:var(--bg);min-height:100%;color:var(--text);-webkit-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;margin:0;font-family:Segoe UI,system-ui,-apple-system,sans-serif}#app{max-width:var(--app-max);background:radial-gradient(120% 80% at 50% 0,#2a1550 0%,#150a24 60%);flex-direction:column;min-height:100vh;margin:0 auto;display:flex;position:relative}@media (min-width:700px){:root{--app-max:680px;--tile:52px;--tile-font:27px}#app{min-height:100vh}#letters{max-width:460px}}@media (min-width:1100px){:root{--app-max:1000px;--tile:58px;--tile-font:30px}#board{flex-direction:row;align-items:stretch;gap:28px}#learnCard{max-width:460px}#practiceCol{flex-direction:column;flex:1;justify-content:center;align-items:center;display:flex}#letters{max-width:560px}}@media (max-width:400px){:root{--tile:36px;--tile-font:20px}#letters{max-width:300px}#chainStrip,.boost{font-size:11px}}#hud{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0008;border-bottom:1px solid #3a2a5a;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px;padding:10px 12px 8px;font-size:13px;font-weight:800;display:flex}.hud-pill{background:var(--panel);border-radius:20px;align-items:center;gap:5px;padding:5px 10px;display:flex;box-shadow:0 2px #0e0618,inset 0 1px 2px #ffffff18}.hud-pill b{color:#fff;font-size:14px}#comboPill{background:linear-gradient(#4dd7ff,#1a8ab0);box-shadow:0 2px #0a4a60}#streakPill{background:linear-gradient(#ff9a3c,#e06a10);box-shadow:0 2px #7a3800}#hudBtns{gap:6px;display:flex}.hud-btn{background:var(--panel);color:var(--text);cursor:pointer;border:0;border-radius:14px;padding:6px 9px;font-size:12px;font-weight:800;position:relative;box-shadow:0 2px #0e0618}.hud-btn .badge{background:var(--red);color:#fff;border-radius:10px;padding:1px 5px;font-size:10px;font-weight:900;position:absolute;top:-6px;right:-6px}#banner{color:var(--muted);justify-content:space-between;align-items:center;padding:6px 12px;font-size:12px;display:flex}#levelDots{flex:1;gap:3px;margin:0 8px;display:flex;overflow:hidden}.dot{background:#3a2a5a;border-radius:50%;flex:none;width:7px;height:7px}.dot.done{background:var(--green)}.dot.now{background:var(--gold);box-shadow:0 0 6px var(--gold)}#boostBar{flex-wrap:wrap;justify-content:center;gap:10px;padding:4px 12px 0;display:flex}.boost{border:1px solid var(--accent);color:var(--accent2);letter-spacing:.5px;background:linear-gradient(#3a2a5a,#2a1a4a);border-radius:20px;align-items:center;gap:6px;padding:4px 12px;font-size:12px;font-weight:800;display:flex}.boost .b{color:var(--gold);font-size:16px}.boost.golden{border-color:var(--gold);box-shadow:0 0 12px #ffd24a66}.boost .re{color:var(--muted);cursor:pointer;font-size:10px;text-decoration:underline}#hint{text-align:center;color:var(--accent2);letter-spacing:.2px;min-height:22px;padding:6px 16px;font-size:14px;font-weight:600}#learnCard{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:14px;width:100%;margin:0 auto;padding:20px;display:none}#learnCard.show{display:flex}#learnProgress{color:var(--muted);letter-spacing:.5px;font-size:12px;font-weight:700}#learnWord{color:#fff;letter-spacing:1px;text-align:center;font-size:38px;font-weight:900}#learnPos{background:var(--panel);color:var(--accent2);text-transform:uppercase;border-radius:12px;margin-top:-6px;padding:3px 10px;font-size:11px;font-weight:800;display:inline-block}.speakRow{gap:10px;display:flex}.speakBtn{color:#062a36;cursor:pointer;background:linear-gradient(#4dd7ff,#1a8ab0);border:0;border-radius:20px;align-items:center;gap:6px;padding:9px 16px;font-size:13px;font-weight:800;display:flex;box-shadow:0 3px #0a4a60}.speakBtn.slow{color:#fff;background:linear-gradient(#8b5cff,#5a2ac4);box-shadow:0 3px #35127a}#learnMeaning{color:var(--text);text-align:center;max-width:380px;font-size:16px;font-weight:600;line-height:1.45}#learnExample{color:var(--muted);text-align:center;max-width:380px;font-size:14px;font-style:italic;line-height:1.4}#learnCat{color:var(--gold);letter-spacing:.5px;text-transform:uppercase;font-size:11px;font-weight:800}@media (min-width:1100px){#learnWord{font-size:56px}#learnMeaning{max-width:440px;font-size:19px}#learnExample{max-width:440px;font-size:16px}}#board{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:14px;min-height:0;padding:4px 12px;display:none}#board.show{display:flex}#answerRow{min-height:calc(var(--tile) + 8px);flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.slot{width:var(--tile);height:calc(var(--tile) + 12px);border-bottom:3px solid var(--accent);font-size:var(--tile-font);color:#fff;background:var(--panel);cursor:pointer;border-radius:10px 10px 0 0;justify-content:center;align-items:center;font-weight:800;transition:all .12s;display:flex;position:relative}.slot.filled{background:var(--panel2);transform:translateY(-2px);box-shadow:0 -2px 8px #8b5cff40}.slot.boosted{border-bottom-color:var(--gold);background:#4a3a2a}.slot.wrong{border-bottom-color:var(--red);animation:.3s shake}.slot.right{border-bottom-color:var(--green);background:#2a5a3a}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}#letters{flex-wrap:wrap;justify-content:center;gap:6px;max-width:370px;display:flex}.letter{width:var(--tile);height:calc(var(--tile) + 12px);font-size:var(--tile-font);color:#fff;cursor:pointer;background:linear-gradient(#4a3a7a,#2a1a5a);border-radius:10px;justify-content:center;align-items:center;font-weight:800;transition:all .1s;display:flex;position:relative;box-shadow:0 4px #100620}.letter:active{transform:translateY(3px);box-shadow:0 1px #100620}.letter.used{opacity:.15;pointer-events:none;transform:scale(.9)}.letter.golden{color:#1a1a1a;background:linear-gradient(#ffd24a,#c89a20);box-shadow:0 4px #8a6a10,0 0 14px #ffd24a88}.letter.boosted{box-shadow:0 0 0 2px var(--accent2),0 4px 0 #100620}#tools{flex-wrap:wrap;justify-content:center;gap:6px;margin-top:2px;display:flex}.tool{background:var(--panel);color:var(--muted);cursor:pointer;border:0;border-radius:20px;padding:7px 12px;font-size:12px;font-weight:800;box-shadow:0 2px #0e0618}.tool:active{box-shadow:none;transform:translateY(2px)}#msg{text-align:center;color:var(--gold);letter-spacing:.3px;min-height:30px;padding:2px;font-size:19px;font-weight:800;transition:opacity .2s}#bar{background:#0d0618;border-top:1px solid #2a1a4a;gap:8px;padding:10px 12px 14px;display:flex}.btn{cursor:pointer;color:#fff;letter-spacing:.3px;border:0;border-radius:14px;flex:1;justify-content:center;align-items:center;gap:5px;padding:13px;font-size:13px;font-weight:800;transition:all 70ms;display:flex}.btn:active{transform:translateY(3px);box-shadow:0 1px #000!important}.btn.yellow{color:#1a1a1a;background:linear-gradient(#ffd24a,#c89a20);box-shadow:0 4px #8a6a10}.btn.green{background:linear-gradient(#3cc87a,#2a8a50);box-shadow:0 4px #1a5a30}.btn.purple{background:linear-gradient(#8b5cff,#5a2ac4);box-shadow:0 4px #35127a}.btn.cyan{color:#062a36;background:linear-gradient(#4dd7ff,#1a8ab0);box-shadow:0 4px #0a4a60}.btn:disabled{opacity:.45;pointer-events:none}.btn.auto{flex:none;align-self:center;width:auto;padding:10px 26px;font-size:13px;display:inline-flex}#over{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:10;text-align:center;background:#05030ff5;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:24px;display:none;position:absolute;inset:0;overflow-y:auto}#over.show{display:flex}#over h2{color:var(--gold);letter-spacing:1px;text-shadow:0 4px #8a6a10;margin:0;font-size:32px}#over .stars{letter-spacing:6px;font-size:34px}#over .sub{color:var(--green);margin:0;font-size:15px;font-weight:700}#over p{color:var(--text);margin:0;font-size:16px;font-weight:700}#over .big{color:var(--green);font-size:34px;font-weight:900}#over .btns{flex-direction:column;gap:9px;width:100%;max-width:280px;margin-top:6px;display:flex}.ovl{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:12;background:#05030ff5;flex-direction:column;padding:16px;display:none;position:absolute;inset:0}.ovl.show{display:flex}.ovlHead{justify-content:space-between;align-items:center;gap:10px;margin:0 0 8px;display:flex}.ovl h3{color:var(--accent2);margin:0;font-size:18px;font-weight:800}.ovlX{background:var(--panel);width:30px;height:30px;color:var(--text);cursor:pointer;border:1px solid #3a2a5a;border-radius:50%;flex:none;justify-content:center;align-items:center;font-size:13px;font-weight:700;display:flex;box-shadow:0 2px #0e0618}.ovlX:active{box-shadow:none;transform:translateY(2px)}.ovl p.desc{color:var(--muted);text-align:center;margin:0 0 10px;font-size:13px;line-height:1.4}#bankList{flex-direction:column;flex:1;gap:6px;padding-right:4px;display:flex;overflow-y:auto}.bank-lvl{background:var(--panel);border:1px solid #3a2a5a;border-radius:12px;padding:8px 10px}.bank-lvl .lvlTag{color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;font-size:10px;font-weight:800}.bank-words{flex-wrap:wrap;gap:6px;display:flex}.bank-chip{background:var(--panel2);border-radius:10px;padding:3px 9px;font-size:12px;font-weight:700}.bank-chip.locked{opacity:.3}#mapGrid{flex:1;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:8px;padding:4px 4px 4px 0;display:grid;overflow-y:auto}.map-node{aspect-ratio:1;background:var(--panel);color:var(--muted);cursor:pointer;border:1px solid #3a2a5a;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:2px;font-size:14px;font-weight:900;display:flex}.map-node .st{letter-spacing:1px;font-size:9px}.map-node.locked{opacity:.35;cursor:not-allowed}.map-node.current{color:#1a1a1a;border-color:var(--gold);background:linear-gradient(#ffd24a,#c89a20);box-shadow:0 0 14px #ffd24a88}.map-node.done{color:#fff;border-color:var(--green);background:linear-gradient(#3a2a5a,#2a1a4a)}.map-node.done .st{color:var(--gold)}#reviewList{flex-direction:column;flex:1;gap:8px;display:flex;overflow-y:auto}.review-item{background:var(--panel);border:1px solid #3a2a5a;border-radius:12px;justify-content:space-between;align-items:center;padding:10px 12px;display:flex}.review-item b{font-size:15px}.review-item span{color:var(--muted);font-size:11px}#reviewEmpty{text-align:center;color:var(--muted);padding:40px 10px;font-size:14px}.toast{background:var(--panel2);color:var(--gold);z-index:50;pointer-events:none;opacity:0;white-space:nowrap;border:1px solid #8b5cff55;border-radius:30px;padding:11px 22px;font-size:14px;font-weight:800;transition:opacity .3s;position:absolute;bottom:110px;left:50%;transform:translate(-50%);box-shadow:0 6px #100620,0 0 24px #8b5cff55}.toast.show{opacity:1}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:#4a3a7a;border-radius:5px}