:root{
  --bg:#0B1024;
  --ink:#E9ECFF;
  --muted:#8E96C2;
  --gold:#FFD166;
  --paper:#FFFFFF;
  --paper-ink:#1B2140;
  --paper-muted:#636B92;
  --f0:#FF6B8A; --f1:#FFA94D; --f2:#FFD43B; --f3:#69DB7C; --f4:#4DABF7; --f5:#B197FC; --f6:#F783AC; --f7:#63E6BE;
  --font:"Rubik", "Segoe UI", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{background:var(--bg)}
body{margin:0;color:var(--ink);font:16px/1.35 var(--font);padding-inline:8px;padding-block:6px 8px;-webkit-tap-highlight-color:transparent;
  background:radial-gradient(110% 70% at 50% 20%,#1E2A5C 0%,#05070F 80%) fixed,var(--bg)}
.app{max-width:1000px;margin-inline:auto;width:100%;height:calc(100vh - 14px);height:calc(100dvh - 14px);min-height:420px;display:grid;grid-template-rows:auto 1fr;grid-template-columns:minmax(0,1fr);gap:6px}
.bar{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px}
.back{color:var(--muted);text-decoration:none;font-weight:600;font-size:15px;white-space:nowrap}
.back:hover{color:var(--ink)}
.title{margin:0;font-weight:800;font-size:clamp(1.25rem,4vw,1.9rem);white-space:nowrap}
.title span{color:#FF7A2F}
.icon-btn{width:42px;height:42px;border-radius:12px;border:0;background:rgba(255,255,255,.1);color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0;font-size:20px}
button{font:inherit;cursor:pointer}
.btn{border:0;border-radius:12px;background:#E9ECFA;color:var(--paper-ink);font-weight:700;padding:10px 18px;box-shadow:0 4px 0 rgba(0,0,0,.2)}
.btn:active{translate:0 3px;box-shadow:0 1px 0 rgba(0,0,0,.2)}
.btn.primary{background:var(--gold);color:#3D2B00;box-shadow:0 4px 0 #B8902A}
.btn.big{font-size:1.15rem;padding:12px 26px;width:100%}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
kbd{display:inline-block;min-width:22px;text-align:center;font:800 12px var(--font);background:#1B2140;color:#fff;border-radius:6px;padding:2px 5px}

.stage{position:relative;min-height:0}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hidden-input{position:absolute;left:0;bottom:0;width:1px;height:1px;opacity:0;border:0;padding:0}

/* dersler */
.lesson{position:absolute;inset:0;display:grid;grid-template-rows:auto auto 1fr auto;gap:14px;padding:10px;align-content:start}
.lesson[hidden]{display:none}
.l-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.l-head b{font-size:1.15rem}
.l-head span{color:var(--muted);font-weight:700;font-variant-numeric:tabular-nums}
.l-text{font:600 clamp(1.3rem,3.6vw,2rem)/1.6 var(--mono);background:rgba(255,255,255,.06);border-radius:16px;padding:16px 18px;word-break:break-word;letter-spacing:.02em;min-height:3.4em}
.l-text .done{color:#69DB7C}
.l-text .err{color:#FF6B8A;text-decoration:underline wavy}
.l-text .cur{background:var(--gold);color:#1B2140;border-radius:4px;animation:blink 1s step-end infinite}
.l-text .todo{color:#B9BEDF}
@keyframes blink{50%{background:rgba(255,209,102,.4)}}
.kb{display:grid;gap:5px;justify-content:center;align-self:center}
.kb .row{display:flex;gap:5px}
.kb .row:nth-child(2){padding-left:18px} .kb .row:nth-child(3){padding-left:36px}
.kb .k{width:clamp(28px,5.6vw,52px);height:clamp(32px,5.6vw,52px);border-radius:9px;display:grid;place-items:center;font-weight:800;font-size:clamp(.85rem,2vw,1.15rem);color:#1B2140;opacity:.55;box-shadow:0 3px 0 rgba(0,0,0,.35)}
.kb .k.home{box-shadow:0 3px 0 rgba(0,0,0,.35),inset 0 -5px 0 rgba(0,0,0,.15)}
.kb .k.next{opacity:1;outline:3px solid #fff;outline-offset:2px;transform:translateY(-3px)}
.kb .k.space{width:clamp(160px,32vw,300px)}
.kb .k.f0{background:var(--f0)} .kb .k.f1{background:var(--f1)} .kb .k.f2{background:var(--f2)} .kb .k.f3{background:var(--f3)}
.kb .k.f4{background:var(--f4)} .kb .k.f5{background:var(--f5)} .kb .k.f6{background:var(--f6)} .kb .k.f7{background:var(--f7)} .kb .k.f8{background:#CED4DA}
.l-tip{margin:0;text-align:center;color:var(--muted);font-weight:700}

.overlay{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:16px;background:rgba(3,5,12,.82);overflow-y:auto}
.overlay[hidden]{display:none}
.sheet{width:100%;max-width:500px;background:var(--paper);color:var(--paper-ink);border-radius:22px;padding:20px 22px;display:grid;gap:10px;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.sheet.center{text-align:center;justify-items:center}
.sheet h2{margin:0;font-size:1.6rem}
.help{margin:0;font-size:13.5px;color:var(--paper-muted);line-height:1.55}
.help.small{font-size:12.5px}
.help b{color:var(--paper-ink)}
.mode-btn{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;border:2px solid #E2E5F3;border-radius:14px;background:#fff;color:var(--paper-ink);padding:12px 14px;text-align:left;font-size:1.05rem}
.mode-btn span{font-size:26px}
.mode-btn small{color:var(--paper-muted);font-weight:700}
.mode-btn:hover{border-color:#FF7A2F}
.lessons{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lessons .mode-btn{font-size:.95rem;padding:9px 10px}
.lessons .mode-btn span{font-size:20px}
.trophy{font-size:54px;line-height:1}
.end-title{margin:0;font-weight:800;font-size:1.5rem}
.lead{margin:0;color:var(--paper-muted);font-weight:700}
.lead:empty{display:none}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%}
.stats div{background:#F1F2FA;border-radius:12px;padding:8px 4px;display:grid;gap:2px}
.stats small{font-size:11px;color:var(--paper-muted);text-transform:uppercase;letter-spacing:.05em}
.stats b{font-size:1.2rem;font-variant-numeric:tabular-nums}

@media (max-width:640px){
  .back-tx{display:none}
  .back{font-size:20px}
  .lessons{grid-template-columns:1fr}
  .kb .k{width:calc((100vw - 90px) / 12)}
}