:root{--bg:#14123a;--bg2:#1f1b52;--card:#262063;--ink:#f4f2ff;--mut:#b9b4e6;--acc:#ff5fa2;--acc2:#36d6c3;--g:#34d27b;--y:#ffc53d;--r:#ff5a5a;--hl:#ffe14d;--fs:1.35rem}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:"Rubik","Assistant","Heebo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:radial-gradient(1200px 600px at 80% -10%,#3b2c8f 0,transparent 60%),radial-gradient(900px 500px at -10% 20%,#0f5c6e 0,transparent 55%),var(--bg);color:var(--ink);min-height:100vh;display:flex;flex-direction:column;line-height:1.5;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
a{color:var(--acc2)}
:focus-visible{outline:3px solid var(--hl);outline-offset:2px}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:8px;padding:8px 10px;background:rgba(20,18,58,.92);backdrop-filter:blur(6px);border-bottom:1px solid #ffffff1a}
.brand{flex:1;font-weight:800;font-size:1.1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tools{display:flex;gap:6px}
.iconbtn{min-width:46px;height:46px;border-radius:14px;border:1px solid #ffffff2a;background:#ffffff12;font-size:1.15rem;font-weight:700}
.iconbtn.off{opacity:.5;text-decoration:line-through}
main{flex:1;width:100%;max-width:920px;margin:0 auto;padding:14px 12px 28px}
.foot{display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:#0d0b2a;border-top:1px solid #ffffff1a;font-size:.95rem;color:var(--mut);flex-wrap:wrap}
.foot img{border-radius:50%;background:#fff;object-fit:contain}
.footlink{color:var(--ink);text-decoration:none;border:1px solid #ffffff33;border-radius:999px;padding:6px 12px}
h1,h2,h3{line-height:1.25;margin:.2em 0 .4em}
h1{font-size:1.6rem}
.hero{text-align:center;padding:6px 0 4px}
.hero p{color:var(--mut);margin:.2em 0 .8em}
.skyline{width:100%;max-width:520px;height:auto;display:block;margin:0 auto}
.namebar{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;margin:6px 0 14px;color:var(--mut)}
.district{border-radius:22px;padding:14px;margin:14px 0;background:linear-gradient(160deg,#ffffff10,#ffffff05);border:1px solid #ffffff1f;position:relative;overflow:hidden}
.district::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:var(--dc)}
.district.g{--dc:var(--g)}.district.y{--dc:var(--y)}.district.r{--dc:var(--r)}
.dhead{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.dhead small{color:var(--mut)}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
@media(min-width:700px){.tiles{grid-template-columns:repeat(4,1fr)}}
.tile{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:right;min-height:118px;padding:12px;border-radius:18px;border:1px solid #ffffff22;background:var(--card);box-shadow:0 6px 0 #0004;transition:transform .1s}
.tile:active{transform:translateY(3px);box-shadow:0 3px 0 #0004}
.tile .em{font-size:1.8rem}
.tile b{font-size:1.02rem;line-height:1.3}
.tile .meta{font-size:.82rem;color:var(--mut)}
.dots{display:flex;gap:3px;margin-top:auto}
.dots i{width:9px;height:9px;border-radius:50%;background:#ffffff26}
.dots i.on{background:var(--dc,var(--acc2))}
.chip{display:inline-block;font-size:.8rem;padding:2px 8px;border-radius:999px;background:#ffffff1a}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:52px;padding:10px 18px;border-radius:16px;border:none;background:var(--acc);color:#fff;font-weight:800;font-size:1.05rem;box-shadow:0 5px 0 #a3255e;text-decoration:none}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 #a3255e}
.btn.sec{background:#ffffff1c;box-shadow:0 5px 0 #0005;border:1px solid #ffffff2a}
.btn.teal{background:var(--acc2);color:#062a26;box-shadow:0 5px 0 #168a7c}
.btn.small{min-height:44px;padding:6px 12px;font-size:.95rem}
.btn[disabled]{opacity:.45}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row.center{justify-content:center}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
@media(min-width:700px){.modes{grid-template-columns:repeat(4,1fr)}}
.mode{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:2px;min-height:96px;padding:10px;border-radius:18px;border:1px solid #ffffff26;background:var(--card);font-weight:800}
.mode .em{font-size:1.7rem}
.mode small{font-weight:400;color:var(--mut);font-size:.8rem}
.mode.done{border-color:var(--acc2);box-shadow:inset 0 0 0 2px var(--acc2)}
.textcard{background:#fbf9ff;color:#1a1640;border-radius:20px;padding:16px 16px;font-size:var(--fs);line-height:1.95;box-shadow:0 8px 24px #0006;margin:10px 0}
.textcard p{margin:0 0 .6em}
.textcard .who{font-weight:800;color:#7a2bd1;margin-left:.35em;font-size:.85em}
.textcard p.mine{background:#e9fff9;border-radius:12px;padding:2px 8px}
.w{border-radius:6px;padding:0 1px;transition:background .08s,color .08s}
.w.gl{border-bottom:2px dotted #b07cff}
.unit.cur{background:#fff4c2;border-radius:8px}
.w.done{color:#6a6590}
.w.cur{background:var(--hl);color:#000;box-shadow:0 0 0 3px var(--hl)}
.w.tap{cursor:pointer}
.ttitle{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ttitle h2{margin:0}
.ctrl{background:#ffffff10;border:1px solid #ffffff22;border-radius:18px;padding:12px;margin:10px 0}
.ctrl label{display:block;font-weight:700;margin-bottom:4px}
input[type=range]{width:100%;height:36px;accent-color:var(--acc)}
input[type=text]{font:inherit;font-size:1.1rem;padding:12px;border-radius:14px;border:2px solid #ffffff44;background:#fff;color:#111;width:100%;max-width:340px}
.big{font-size:2.6rem;font-weight:900;font-variant-numeric:tabular-nums;text-align:center}
.note{color:var(--mut);font-size:.92rem}
.warn{background:#ff5a5a22;border:1px solid #ff5a5a66;border-radius:14px;padding:10px;margin:8px 0}
.okbox{background:#36d6c322;border:1px solid #36d6c366;border-radius:14px;padding:10px;margin:8px 0}
.chart{display:flex;align-items:flex-end;justify-content:center;gap:18px;height:170px;padding:10px;background:#ffffff0d;border-radius:16px;margin:10px 0}
.bar{width:64px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.bar i{display:block;width:100%;border-radius:10px 10px 4px 4px;background:linear-gradient(#ff8fc0,var(--acc));min-height:4px;transition:height .5s}
.bar span{font-size:.85rem;color:var(--mut)}
.bar b{font-size:1rem}
.echo-sent{font-size:calc(var(--fs) * 1.15);background:#fbf9ff;color:#1a1640;border-radius:20px;padding:16px;line-height:2;min-height:120px}
.turn{display:inline-block;background:var(--acc2);color:#062a26;font-weight:900;padding:4px 14px;border-radius:999px;margin:6px 0}
.progressline{height:10px;border-radius:999px;background:#ffffff1a;overflow:hidden;margin:8px 0}
.progressline i{display:block;height:100%;background:var(--acc2);width:0;transition:width .3s}
.games{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
@media(min-width:600px){.cards{grid-template-columns:repeat(4,1fr)}}
.mcard{min-height:84px;border-radius:14px;border:none;background:linear-gradient(135deg,#6d4cff,#ff5fa2);color:#fff;font-weight:800;font-size:1.05rem;padding:6px;line-height:1.25}
.mcard.open{background:#fff;color:#1a1640}
.mcard.matched{background:#c9fff1;color:#064;visibility:visible;opacity:.75}
.mcard.en{direction:ltr}
.mcard.small{font-size:.82rem}
.bank,.answer{display:flex;flex-wrap:wrap;gap:8px;min-height:60px;padding:10px;border-radius:16px;margin:8px 0}
.answer{background:#fbf9ff;color:#1a1640;border:2px dashed #b9b4e6}
.bank{background:#ffffff0d}
.wchip{min-height:48px;padding:6px 14px;border-radius:12px;border:none;background:#fff;color:#1a1640;font-size:1.15rem;font-weight:700;box-shadow:0 3px 0 #0003}
.answer .wchip{background:#ffe9f3}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
.opt{min-height:58px;border-radius:14px;border:2px solid #ffffff2a;background:var(--card);font-size:1.2rem;font-weight:800}
.opt.right{background:#1e9e62;border-color:#5fffb0}
.opt.wrong{background:#a12b3d;animation:shake .3s}
@keyframes shake{25%{transform:translateX(6px)}75%{transform:translateX(-6px)}}
.target{font-size:2.3rem;font-weight:900;text-align:center;min-height:64px;background:#fbf9ff;color:#1a1640;border-radius:16px;padding:8px}
.pyr{text-align:center;background:#fbf9ff;color:#1a1640;border-radius:20px;padding:14px;font-size:var(--fs);line-height:1.6}
.pyr div{padding:4px 8px;border-radius:10px;margin:3px auto;cursor:pointer}
.pyr div.hide{visibility:hidden}
.pyr div.cur{background:#fff4c2}
.gloss{width:100%;border-collapse:collapse;margin:8px 0;font-size:1rem}
.gloss td{padding:8px;border-bottom:1px solid #ffffff22;vertical-align:top}
.gloss td.he{font-weight:800;font-size:1.15rem;white-space:nowrap}
.gloss td.en{direction:ltr;text-align:left;color:var(--mut)}
.modal{position:fixed;inset:0;background:#000a;z-index:50;display:flex;align-items:center;justify-content:center;padding:12px}
.modal[hidden]{display:none}
.modal-box{position:relative;background:var(--bg2);border:1px solid #ffffff2a;border-radius:22px;padding:18px 16px 16px;max-width:560px;width:100%;max-height:88vh;overflow:auto}
.modal-x{position:absolute;top:8px;left:8px;width:44px;height:44px;border-radius:12px;border:none;background:#ffffff1a;font-size:1.2rem}
.toast{position:fixed;bottom:84px;left:50%;transform:translateX(-50%);background:#000d;color:#fff;padding:10px 16px;border-radius:14px;z-index:60;max-width:92vw;text-align:center}
.cert{background:linear-gradient(135deg,#fff7d6,#ffe1ef);color:#2a1a55;border-radius:18px;padding:18px;text-align:center;border:6px double #c48a00}
.cert h3{font-size:1.6rem;margin:.1em 0}
.board{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:10px 0}
.board div{border-radius:12px;padding:8px;font-size:.88rem;min-height:92px;background:#ffffff12;border:1px solid #ffffff22}
.board .g{border-top:5px solid var(--g)}.board .y{border-top:5px solid var(--y)}.board .r{border-top:5px solid var(--r)}
.board .must{background:var(--acc);color:#fff;font-weight:800;border:none}
.teacher section{background:#ffffff0d;border:1px solid #ffffff1f;border-radius:18px;padding:12px 14px;margin:12px 0}
.teacher table{width:100%;border-collapse:collapse}
.teacher td,.teacher th{border-bottom:1px solid #ffffff22;padding:6px;text-align:right;vertical-align:top}
.reclist{list-style:none;padding:0;margin:8px 0}
.reclist li{background:#ffffff10;border-radius:14px;padding:8px;margin:6px 0}
.reclist audio{width:100%;margin-top:4px}
.recdot{display:inline-block;width:14px;height:14px;border-radius:50%;background:#ff3b3b;animation:blink 1s infinite}
@keyframes blink{50%{opacity:.2}}
.rolepick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.back{background:none;border:none;color:var(--acc2);font-weight:700;padding:8px 0;min-height:44px}
.fs1{--fs:1.2rem}.fs2{--fs:1.45rem}.fs3{--fs:1.8rem}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.ctrl.sticky{position:sticky;top:64px;z-index:5;background:#241f5c}