:root{
  --bg:#141517;--bg2:#1b1d20;--card:#232629;--card2:#2b2f33;--line:#33373c;
  --text:#f1ede4;--dim:#a19d92;--accent:#d4ab5f;--accent-ink:#1a1712;
  --ok:#86c893;--bad:#e0847a;
  --der:#79aee6;--die:#e58e9b;--das:#8fcd9b;
  --r:18px;--tab:64px;
}
@media (prefers-color-scheme:light){:root{
  --bg:#f5f1e8;--bg2:#ece7da;--card:#fff;--card2:#f3eee2;--line:#ded7c6;
  --text:#25231e;--dim:#78746a;--accent:#a97b25;--accent-ink:#fff;
  --ok:#3c8a4b;--bad:#b9453a;--der:#2f76bd;--die:#c4485d;--das:#3d8f55;
}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{background:radial-gradient(1200px 600px at 50% -200px,var(--bg2),var(--bg));background-color:var(--bg);color:var(--text);
  font:16px/1.45 ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",sans-serif;overscroll-behavior:none}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
[hidden]{display:none!important}
#app{max-width:680px;margin:0 auto;min-height:100%;padding:16px 16px calc(var(--tab) + 28px + env(safe-area-inset-bottom))}
h1,h2,h3{margin:0}
h2{font-size:1.15rem;margin:22px 0 10px}
.dim{color:var(--dim)}.small{font-size:.85rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.row{display:flex;gap:12px;align-items:center}
.grow{flex:1;min-width:0}

/* header + status */
.greet{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}
.greet h1{font-size:1.5rem}
.status{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center}
.ring{position:relative;width:96px;height:96px}
.ring svg{transform:rotate(-90deg)}
.ring .bg{stroke:var(--line)}.ring .fg{stroke:var(--accent);transition:stroke-dashoffset .9s cubic-bezier(.2,.8,.2,1)}
.ring.full .fg{stroke:var(--ok)}
.ring .mid{position:absolute;inset:0;display:grid;place-items:center;text-align:center;line-height:1.1}
.ring .mid b{font-size:1.4rem}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.chip{background:var(--card2);border-radius:99px;padding:4px 12px;font-size:.9rem;white-space:nowrap}
.lvl{display:flex;align-items:center;gap:10px}
.lvl .em{font-size:2rem;line-height:1}
.bar{height:8px;background:var(--line);border-radius:6px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);border-radius:6px;transition:width .8s cubic-bezier(.2,.8,.2,1)}

.cta{width:100%;margin-top:14px;padding:18px;border-radius:var(--r);background:var(--accent);color:var(--accent-ink);
  font-size:1.2rem;font-weight:700;box-shadow:0 6px 0 rgba(0,0,0,.28);transition:transform .08s,box-shadow .08s}
.cta:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(0,0,0,.28)}
.cta small{display:block;font-weight:500;opacity:.8;font-size:.85rem}
.btn{padding:12px 18px;border-radius:14px;background:var(--card2);border:1px solid var(--line)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:700}
.btn:disabled{opacity:.4}

.banner{margin-top:14px;display:flex;gap:12px;align-items:center;background:linear-gradient(135deg,var(--card),var(--card2));
  border:1px solid var(--accent);animation:pop .5s}
.banner .em{font-size:2rem}
.neu{background:var(--accent);color:var(--accent-ink);border-radius:6px;font-size:.7rem;font-weight:800;padding:2px 6px;margin-right:6px;letter-spacing:.05em}

.subjects{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.subj{text-align:left;position:relative;display:block;transition:transform .1s}
.subj:active{transform:scale(.97)}
.subj .em{font-size:1.8rem}
.subj b{display:block;margin-top:4px}
.subj .bar{margin:8px 0 4px}
.badge-n{position:absolute;top:10px;right:10px;background:var(--accent);color:var(--accent-ink);font-size:.75rem;font-weight:800;
  min-width:22px;height:22px;border-radius:11px;display:grid;place-items:center;padding:0 6px}

/* tab bar */
#tabs{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:0;padding:6px 8px calc(6px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);border-top:1px solid var(--line);z-index:5}
#tabs button{flex:1;max-width:170px;height:var(--tab);border-radius:14px;color:var(--dim);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.75rem;gap:2px}
#tabs button span{font-size:1.4rem;line-height:1}
#tabs button.on{color:var(--accent);background:var(--card)}

/* articles */
.art{display:inline-block;font-weight:800;border-radius:8px;padding:0 8px;margin-right:6px;font-size:.9em;border:1.5px solid currentColor}
.art.der{color:var(--der)}.art.die{color:var(--die)}.art.das{color:var(--das)}

/* word list */
.search{width:100%;padding:12px 16px;border-radius:14px;background:var(--card);border:1px solid var(--line);margin-bottom:10px}
.filters{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;margin-bottom:6px;scrollbar-width:none}
.filters button{white-space:nowrap;padding:6px 14px;border-radius:99px;background:var(--card);border:1px solid var(--line);font-size:.9rem}
.filters button.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:700}
.word{display:block;width:100%;text-align:left;padding:12px 14px;border-radius:14px;background:var(--card);border:1px solid var(--line);margin-bottom:8px}
.word .top{display:flex;align-items:center;gap:10px}
.word .de{font-weight:700;font-size:1.05rem}
.dots{display:flex;gap:3px}.dots i{width:7px;height:7px;border-radius:50%;background:var(--line)}.dots i.on{background:var(--accent)}
.word .more{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);font-size:.95rem}

/* awards */
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.bdg{text-align:center;padding:12px 6px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.bdg .em{font-size:2rem;display:block}
.bdg.locked{opacity:.4;filter:grayscale(1)}
.bdg b{display:block;font-size:.85rem;line-height:1.2;margin-top:2px}
.bdg span.d{font-size:.72rem;color:var(--dim);display:block;line-height:1.2;margin-top:2px}
.chart{display:flex;align-items:flex-end;gap:5px;height:110px}
.chart div{flex:1;background:var(--accent);border-radius:5px 5px 2px 2px;min-height:3px;opacity:.85;position:relative}
.chart div.z{background:var(--line);opacity:1}
.chart-l{display:flex;gap:5px;margin-top:4px}.chart-l span{flex:1;text-align:center;font-size:.65rem;color:var(--dim)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;text-align:center}
.stats b{display:block;font-size:1.4rem;color:var(--accent)}
.set{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.set:last-child{border:0}
select,input[type=text]{background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:8px 10px}

/* session */
#session{position:fixed;inset:0;background:var(--bg);z-index:10;display:flex;flex-direction:column;max-width:680px;margin:0 auto;
  padding:12px 16px calc(14px + env(safe-area-inset-bottom))}
.stop{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.stop .x{font-size:1.5rem;color:var(--dim);width:36px;height:36px}
.stop .bar{flex:1;height:12px}
.combo{min-width:70px;text-align:right;font-weight:800;color:var(--accent);transition:transform .2s}
.combo.hot{transform:scale(1.2)}
#sq{flex:1;display:flex;flex-direction:column;overflow-y:auto;padding:8px 0}
.qlabel{color:var(--dim);font-size:.9rem;text-align:center;margin-bottom:10px}
.qmain{text-align:center;font-size:2.1rem;font-weight:800;padding:26px 8px;word-break:break-word;animation:pop .35s}
.qmain small{display:block;font-size:.95rem;font-weight:500;color:var(--dim);margin-top:6px}
.opts{display:grid;gap:10px;margin-top:auto}
.opt{padding:16px;border-radius:16px;background:var(--card);border:2px solid var(--line);font-size:1.1rem;font-weight:600;transition:transform .08s}
.opt:active{transform:scale(.98)}
.opt.ok{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 18%,var(--card))}
.opt.bad{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 18%,var(--card));animation:shake .35s}
.opts.art3{grid-template-columns:repeat(3,1fr)}
.opts.art3 .opt{font-size:1.3rem;font-weight:800}
.opts.art3 .opt.der{color:var(--der)}.opts.art3 .opt.die{color:var(--die)}.opts.art3 .opt.das{color:var(--das)}
.typebox{margin-top:auto}
.typebox input{width:100%;padding:16px;border-radius:16px;font-size:1.3rem;text-align:center;background:var(--card);border:2px solid var(--line);outline:0}
.typebox input:focus{border-color:var(--accent)}
.typebox input.ok{border-color:var(--ok)}.typebox input.bad{border-color:var(--bad);animation:shake .35s}
.keys{display:flex;gap:6px;justify-content:center;margin:10px 0}
.keys button{min-width:40px;height:42px;padding:0 6px;border-radius:12px;background:var(--card2);border:1px solid var(--line);font-size:1.1rem;font-weight:700}
.keys button.a{font-size:.9rem;min-width:44px}
.spk{width:64px;height:64px;border-radius:50%;background:var(--card2);border:1px solid var(--line);font-size:1.6rem;margin:0 auto;display:block;transition:transform .1s}
.spk:active{transform:scale(.92)}
.intro{background:var(--card);border:1px solid var(--accent);border-radius:22px;padding:22px 16px;text-align:center;animation:pop .4s}
.intro .de{font-size:2.3rem;font-weight:800}
.intro .hu{font-size:1.3rem;color:var(--accent);margin:6px 0}
.intro .ex{font-style:italic;color:var(--dim);margin-top:10px}
.fb{border-radius:18px;padding:14px 16px;margin-top:12px;animation:slide .25s}
.fb.ok{background:color-mix(in srgb,var(--ok) 20%,var(--card));border:1px solid var(--ok)}
.fb.bad{background:color-mix(in srgb,var(--bad) 20%,var(--card));border:1px solid var(--bad)}
.fb b.t{font-size:1.1rem}
.fb .det{margin-top:4px;font-size:.95rem}
.fb .ex{font-style:italic;color:var(--dim);font-size:.9rem;margin-top:4px}
.next{width:100%;margin-top:12px;padding:16px;border-radius:16px;font-size:1.1rem;font-weight:800;background:var(--accent);color:var(--accent-ink)}
.fb.bad + .next{background:var(--bad);color:#fff}
.float{position:fixed;pointer-events:none;font-weight:800;color:var(--accent);font-size:1.4rem;animation:floatup 1s forwards;z-index:30}

/* summary + modal */
.sum{text-align:center;padding:10px 0;animation:pop .5s}
.sum .big{font-size:4rem;line-height:1}
.sum .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}
.sum .grid div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 4px}
.sum .grid b{display:block;font-size:1.5rem;color:var(--accent)}
.newbadge{display:flex;gap:12px;align-items:center;text-align:left;background:var(--card);border:1px solid var(--accent);border-radius:14px;padding:10px 14px;margin-top:8px;animation:pop .6s}
.newbadge .em{font-size:2rem}
#modal{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:20;display:grid;place-items:end center}
#modal .sheet{background:var(--bg2);border:1px solid var(--line);border-radius:22px 22px 0 0;width:100%;max-width:680px;padding:18px 16px calc(18px + env(safe-area-inset-bottom));max-height:90%;overflow:auto}
.sheet label{display:block;margin:10px 0 4px;font-size:.85rem;color:var(--dim)}
.sheet input,.sheet select{width:100%;font-size:1rem;padding:11px}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:40;width:100%;height:100%}

@keyframes pop{from{opacity:0;transform:scale(.92) translateY(8px)}to{opacity:1;transform:none}}
@keyframes slide{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes shake{25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
@keyframes floatup{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-70px)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.kb{margin:8px 0 4px;display:grid;gap:6px}
.kb div{display:flex;gap:4px;justify-content:center}
.kb button{flex:1;min-width:0;max-width:44px;height:clamp(34px,5.4vh,44px);padding:0;border-radius:9px;background:var(--card2);border:1px solid var(--line);font-size:1.05rem;font-weight:600;touch-action:manipulation}
.kb button.wide{max-width:64px;flex:1.4}
.kb button:active{background:var(--accent);color:var(--accent-ink)}
.kbt{display:block;margin:4px auto 0;font-size:.8rem;color:var(--dim);padding:4px 10px}

.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cta.alt{background:var(--card2);color:var(--text);border:2px solid var(--accent)}
#modal .cta{display:block}#modal .cta.alt{margin-top:12px}
.flip{perspective:1200px;margin:6px 0 16px;cursor:pointer;flex:0 0 auto}
.flip-in{position:relative;height:min(52vh,340px);transition:transform .55s cubic-bezier(.3,.8,.3,1);transform-style:preserve-3d}
.flip.on .flip-in{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:24px;padding:20px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:6px;border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.face.front{background:var(--card)}
.face.back{background:linear-gradient(160deg,var(--card2),var(--card));border-color:var(--accent);transform:rotateY(180deg)}
.cw{font-size:2.3rem;font-weight:800;word-break:break-word}
.cex{font-style:italic;color:var(--dim);margin-top:10px;font-size:1rem}
.tap{position:absolute;bottom:14px}
.fcb .btn{flex:1;padding:16px;font-size:1.05rem}
.fcb .btn:disabled{opacity:.35}

button{touch-action:manipulation}
#sfoot{flex:none;padding-top:8px}
#sfoot .next{margin-top:8px}
#sq.done .opts{margin-top:14px}
.fb{margin-top:0}

@media (max-height:700px){
  .qmain{padding:8px;font-size:1.8rem}.qlabel{margin-bottom:0;font-size:.8rem}
  .keys{margin:6px 0}.next{padding:12px;margin-top:6px!important}.kbt{margin:2px auto}
  .stop{margin-bottom:0}.typebox input{padding:12px}
}
.hintline{min-height:1.4em;text-align:center;color:var(--bad);font-size:.9rem;margin-top:6px}

/* iPhone: a Főképernyőre tett app a státuszsor alá nyúlik — a felső gombok ne kerüljenek alá */
#app{padding-top:calc(16px + env(safe-area-inset-top))}
#session{padding-top:calc(12px + env(safe-area-inset-top))}
.stop .x{width:48px;height:48px;font-size:1.7rem;margin:-6px 0 -6px -8px}
.stop{min-height:48px}