:root{--ink:#14213d;--bg:#eef1f7;--blue:#2447d6;--ok:#1a7f4b;--bad:#c62828;--hl:#ffd23f}
*{box-sizing:border-box}[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,"Nirmala UI",sans-serif}
header{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:14px 24px;background:var(--ink);color:#fff}
header h1{font-size:20px;margin:0 auto 0 0}
header input{padding:8px 10px;border-radius:6px;border:0}
nav{display:flex;gap:4px}
button,select{font:inherit;padding:8px 14px;border-radius:6px;border:1px solid #b7c0d6;background:#fff;color:var(--ink);cursor:pointer}
nav button{background:transparent;color:#fff;border-color:transparent}
nav .on{background:var(--hl);color:var(--ink)}
main{max-width:900px;margin:24px auto;padding:0 16px}
.bar,.stats{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.bar .stats{margin:0}
#start,#gstart,#cert{background:var(--blue);color:#fff;border-color:var(--blue)}
.stats span{background:#fff;padding:8px 14px;border-radius:6px}.stats b{font-size:20px;margin-left:8px}
#text{position:relative;height:200px;overflow:hidden;background:#fff;border:2px solid var(--ink);border-radius:8px;padding:16px 20px;font:22px/1.9 ui-monospace,Consolas,"Nirmala UI",monospace;white-space:pre-wrap;word-break:break-word;cursor:text}
#text .ok{color:var(--ok)}#text .bad{background:#ffd9d9;color:var(--bad)}#text .cur{background:var(--hl);border-radius:3px}
#in{position:absolute;opacity:0;width:1px;height:1px}
.lane{height:10px;background:#d5dbea;border-radius:5px;margin-bottom:6px;overflow:hidden}
.lane i{display:block;height:100%;width:0;background:var(--blue)}.lane.bot i{background:var(--bad)}
#res{margin-top:14px;padding:16px;background:#fff;border-left:6px solid var(--ok);border-radius:6px}#res h2{margin:0 0 6px}
#field{position:relative;height:360px;overflow:hidden;background:var(--ink);border-radius:8px;margin-bottom:12px}
.w{position:absolute;color:#fff;background:var(--blue);padding:2px 10px;border-radius:14px;font:18px ui-monospace,Consolas,monospace}
.over{color:#fff;text-align:center;margin:150px 20px 0;font-size:22px}
#gin,#fin,#ri,#fi2,#si{width:100%;padding:12px;font-size:20px;border:2px solid var(--ink);border-radius:8px}
table{width:100%;border-collapse:collapse;background:#fff}td,th{padding:8px 12px;border-bottom:1px solid #e0e5f0;text-align:left}
@media(max-width:600px){#text{font-size:18px}header{padding:12px}}
#lessons{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin-bottom:16px}
#lessons button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:10px 12px}
#lessons span{font:13px ui-monospace,Consolas,monospace;color:#55607e;word-break:break-all}
#lessons em{font-style:normal;color:#d99a00}
#kb,#kb2,#kb3,#kb4{margin:14px 0;display:flex;flex-direction:column;gap:5px;align-items:center;overflow-x:auto}
#kb div,#kb2 div,#kb3 div,#kb4 div{display:flex;gap:5px}
#kb b,#kb2 b,#kb3 b,#kb4 b{min-width:38px;height:38px;display:grid;place-items:center;border-radius:6px;border:1px solid #9aa5c4;font:600 14px ui-monospace,Consolas,monospace;text-transform:uppercase}
#kb .sp,#kb2 .sp,#kb3 .sp,#kb4 .sp{min-width:300px;background:#e3e7f2}
#kb .nx,#kb2 .nx,#kb3 .nx,#kb4 .nx{background:var(--ink)!important;color:#fff;transform:translateY(-3px);box-shadow:0 4px 0 var(--blue)}
.f0{background:#ffb4b4}.f1{background:#ffd8a8}.f2{background:#fff3a8}.f3{background:#c8f0b0}.f4{background:#b0e8e0}.f5{background:#b0d0ff}.f6{background:#d4bcff}.f7{background:#ffbfe6}
.sel{background:var(--hl)!important}
#arena{position:relative;height:300px;background:linear-gradient(#27345c,#0c1429);border-radius:8px;overflow:hidden;margin-bottom:12px;color:#fff}
.hp{position:absolute;top:12px;left:12px;width:40%;height:14px;background:#0006;border-radius:7px;overflow:hidden}.hp.r{left:auto;right:12px}
.hp i{display:block;height:100%;width:100%;background:#35c46b;transition:width .2s}.hp.r i{background:var(--bad);float:right}
.fi{position:absolute;bottom:80px;font-size:76px;transition:transform .15s,filter .15s}#pf{left:12%}#ef{right:12%}
#pf.atk{transform:translateX(150px)}#ef.atk{transform:translateX(-150px)}.fi.hit{filter:brightness(2) saturate(3);transform:rotate(-8deg)}
#move{position:absolute;bottom:30px;width:100%;text-align:center;font:700 28px ui-monospace,Consolas,monospace;letter-spacing:2px}#move b{color:var(--hl)}
.charge{position:absolute;bottom:0;left:0;right:0;height:10px;background:#0006}.charge i{display:block;height:100%;width:0;background:var(--bad)}
canvas{width:100%;display:block;border-radius:8px;background:#000;margin-bottom:12px}
#ri,#fi2,#si{width:100%;padding:12px;font-size:20px;border:2px solid var(--ink);border-radius:8px}

#work{display:grid;grid-template-columns:1fr 190px;gap:14px;align-items:start}
#main{background:#f1ffd9;border:2px solid #7aa;border-radius:8px;padding:14px}
#text{font:22px/1.7 Georgia,"Nirmala UI",serif;height:190px;border:0;background:transparent;padding:0;word-spacing:2px}
#text .ok{color:#9aa89a}#text .bad{background:#ffd9d9;color:var(--bad)}#text .cur{background:transparent}
#text .cw{text-decoration:underline;color:#1a3fb0}#text .cw.ok{color:#8a95c8}
.divider{text-align:center;border-top:1px solid #7aa;margin:14px 0 10px}
.divider span{position:relative;top:-11px;background:#f1ffd9;padding:1px 8px;font-size:12px;border:1px solid #7aa;border-radius:6px}
#in{position:static;opacity:1;width:100%;height:110px;font:20px/1.6 Georgia,"Nirmala UI",serif;padding:8px;border:1px solid #9bb;border-radius:6px;background:#fff;resize:none;color:var(--ink)}
#side{background:#d8f5a8;border:2px solid #7aa;border-radius:8px;padding:14px;display:flex;flex-direction:column;gap:10px;text-align:center;min-height:300px}
#clk{margin:10px auto;width:160px;height:76px;border:2px solid #6a8;border-radius:50%;display:grid;place-items:center;font:700 28px Georgia,serif;background:#fff}
#pz{margin-top:auto}
@media(max-width:760px){#work{grid-template-columns:1fr}#side{min-height:0}}
#lessons button:disabled{opacity:.45;cursor:not-allowed}

body{background:#b9c1fb}
.ov{position:fixed;inset:0;background:#b9c1fb;display:grid;place-items:center;z-index:50}
.card{background:#f1ffd9;border:9px solid #0a0acb;border-radius:6px;padding:18px 24px;max-width:620px;margin:0 auto}
.c1{text-align:center;min-width:min(520px,92vw)}.c1 h1{font:700 44px Impact,Georgia,serif;color:#0a0acb;margin:6px 0 14px}.c1 h3{color:#8a8a00;margin:0}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:10px 0}.row.j{justify-content:center}.row b{font-size:28px;color:#8bbf2f}
button.big{font-size:20px;padding:22px 34px}
#tl{width:100%;font:15px Georgia,"Nirmala UI",serif;border:1px solid #7aa;background:#fff}
#prev{flex:1;min-width:200px;font:14px monospace}.note{font-weight:700;font-size:13px;margin:6px 0 0}

/* ===== white + soft green theme ===== */
:root{--ink:#1f3a2b;--bg:#f5fbf4;--blue:#2e9e5b;--hl:#cdeccb}
body{background:var(--bg);color:var(--ink)}
header{background:#dff3de;color:var(--ink);border-bottom:2px solid #b9dcb7}
header input{border:1px solid #a9d3a8}
nav button{color:var(--ink)}nav .on{background:#fff;border-color:#a9d3a8}
button,select{border-color:#a9d3a8;background:#fff}
#start,#gstart,#cert,#rs,#fs,#ss,#st{background:var(--blue);color:#fff;border-color:var(--blue)}
.stats span{border:1px solid #d3e8d1}
.ov{background:var(--bg)}.card{background:#fff;border:9px solid #cfe9cc}
.c1 h1{color:#2e7d4f}.c1 h3{color:#5b8a3c}
#main{background:#fbfffa;border:2px solid #b9dcb7}
.divider{border-top-color:#b9dcb7}.divider span{background:#fbfffa;border-color:#b9dcb7}
#side{background:#e4f5e1;border:2px solid #b9dcb7}
#clk{border-color:#8cc98f}
#text .cw{color:#1b6e3a}#text .cw.ok{color:#7fa985}
#in,#tl{border-color:#b9dcb7}
.row b{color:#7cc27f}
#kb .nx,#kb2 .nx,#kb3 .nx,#kb4 .nx{background:#2e9e5b!important;color:#fff}
#fk,#rl,#sk{display:none}
.lessonbar{background:#fff;border:1px solid #cfe9cc;border-radius:8px;padding:8px 12px}.lessonbar select{min-width:260px;max-width:100%}