/* ============================================================
   KeyCraft — Minecraft-ish theme, desktop-first (a typing trainer
   needs a physical keyboard). Palette shared with codecraft.
   Zero external assets: colours + blocky borders + emoji only.
   ============================================================ */

:root {
  --grass:   #5aa734;
  --grass-d: #3b8526;
  --dirt:    #8b5a2b;
  --stone:   #7a7a7a;
  --stone-d: #565656;
  --sky:     #7ec0ee;
  --night:   #23262e;
  --panel:   #2f333d;
  --panel-2: #3a3f4b;
  --text:    #f4f4f4;
  --muted:   #b9c0cc;
  --gold:    #f2c94c;
  --emerald: #43d17a;
  --redstone:#e0483d;
  --diamond: #4fd6e6;
  --ok:      #57c04a;
  --bad:     #e0483d;

  --edge-light: rgba(255,255,255,0.35);
  --edge-dark:  rgba(0,0,0,0.45);

  /* finger-zone colours (8 fingers + thumb) — muted so the board stays calm */
  --f-lp: #a2678a;  /* left pinky   */
  --f-lr: #7a6fb0;  /* left ring    */
  --f-lm: #4f8cc9;  /* left middle  */
  --f-li: #3fa389;  /* left index   */
  --f-ri: #7fa53f;  /* right index  */
  --f-rm: #b9973f;  /* right middle */
  --f-rr: #bd7444;  /* right ring   */
  --f-rp: #b05c5c;  /* right pinky  */
  --f-th: #6d7788;  /* thumbs       */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--night);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

body { min-height: 100vh; }

code, pre, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.screen { max-width: 980px; margin: 0 auto; padding: 16px 20px; }
.hidden { display: none !important; }

/* ---------- Blocky button base ---------- */
.btn {
  display: inline-block;
  font: inherit;
  font-weight: 700;
  color: var(--text);
  background: var(--stone);
  border: none;
  border-radius: 0;
  padding: 14px 18px;
  min-height: 48px;
  cursor: pointer;
  box-shadow:
    inset 3px 3px 0 var(--edge-light),
    inset -3px -3px 0 var(--edge-dark);
  transition: transform .04s ease, filter .1s ease;
}
.btn:active { transform: translateY(2px); filter: brightness(1.05); }
.btn--grass { background: var(--grass); }
.btn--grass:hover { background: var(--grass-d); }
.btn--gold { background: var(--gold); color: var(--night); }
.btn--ghost { background: var(--panel-2); }
.btn--full { display: block; width: 100%; }
.btn--big { font-size: 1.1rem; padding: 16px; }
.btn:disabled { opacity: .5; cursor: default; }

/* ============================================================
   Lock / PIN screen
   ============================================================ */
#screen-lock {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(180deg, var(--sky) 0%, #a9d8f5 45%, var(--grass) 45%, var(--grass-d) 100%);
}
.lock-box {
  width: 100%;
  max-width: 360px;
  background: var(--panel);
  padding: 22px;
  text-align: center;
  box-shadow: inset 4px 4px 0 var(--edge-light), inset -4px -4px 0 var(--edge-dark);
}
.logo { font-size: 1.8rem; font-weight: 800; letter-spacing: 1px; }
.logo-sub { color: var(--gold); font-weight: 700; font-size: .95rem; margin: 2px 0 10px; letter-spacing: 2px; }
.lock-hello { font-size: 1.3rem; font-weight: 800; margin: 14px 0 2px; }
.lock-sub { color: var(--muted); margin: 0 0 14px; font-size: .95rem; }

.pin-display {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 14px;
  letter-spacing: 6px;
  font-size: 2rem;
}
.pin-dot { width: 14px; height: 14px; background: var(--diamond); display: inline-block; }
.pin-dot--empty { background: var(--stone-d); }

.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pin-key {
  font: inherit; font-size: 1.4rem; font-weight: 700;
  color: var(--text); background: var(--panel-2); border: none;
  padding: 16px 0; cursor: pointer;
  box-shadow: inset 3px 3px 0 var(--edge-light), inset -3px -3px 0 var(--edge-dark);
}
.pin-key:active { transform: translateY(2px); }
.pin-key--ok { background: var(--grass); }
.pin-key--wide { background: var(--stone-d); }
.pin-error { color: var(--redstone); min-height: 1.2em; margin: 12px 0 0; font-weight: 700; }

/* Profile picker ("Wer tippt heute?") */
.profile-list { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 4px; }
.profile-btn {
  display: flex; align-items: center; gap: 12px;
  font: inherit; font-size: 1.15rem; font-weight: 800; text-align: left;
  color: var(--text); background: var(--panel-2); border: none;
  padding: 14px 16px; cursor: pointer;
  box-shadow: inset 3px 3px 0 var(--edge-light), inset -3px -3px 0 var(--edge-dark);
}
.profile-btn:active { transform: translateY(2px); }
.profile-btn--last { box-shadow: inset 0 0 0 3px var(--grass); }
.lock-switch {
  margin-top: 16px; font: inherit; font-weight: 700; color: var(--muted);
  background: none; border: none; cursor: pointer;
}
.lock-switch:active { transform: translateY(1px); }

/* ============================================================
   Top bar
   ============================================================ */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--grass-d);
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.3);
}
.topbar-home {
  font-size: 1.4rem; background: none; border: none; cursor: pointer; padding: 4px;
}
.topbar-name { font-weight: 800; flex: 1; }
.topbar-stats { display: flex; gap: 8px; }
.stat {
  font-weight: 700; font-size: .9rem; padding: 6px 10px; background: rgba(0,0,0,.25);
  box-shadow: inset 2px 2px 0 var(--edge-light), inset -2px -2px 0 var(--edge-dark);
}
.stat--xp { color: var(--emerald); }
.stat--level { color: var(--gold); }
.stat--streak { color: var(--text); }

/* XP progress bar */
.xpbar-wrap { margin: 14px 0 20px; }
.xpbar-label { display: flex; justify-content: space-between; font-size: .85rem; color: var(--muted); margin-bottom: 6px; }
.xpbar {
  height: 18px; background: var(--stone-d);
  box-shadow: inset 2px 2px 0 var(--edge-dark);
}
.xpbar-fill { height: 100%; background: var(--emerald); transition: width .4s ease; }

/* Rank badge (Holz → … → Netherit) */
.rank-badge {
  display: inline-block; font-weight: 800; font-size: .9rem;
  padding: 6px 12px; background: var(--panel-2);
  box-shadow: inset 2px 2px 0 var(--edge-light), inset -2px -2px 0 var(--edge-dark);
}

/* ============================================================
   Home / world map
   ============================================================ */
.home-greeting { font-size: 1.5rem; font-weight: 800; margin: 14px 0 2px; }
.home-sub { color: var(--muted); margin: 0 0 14px; }
.home-chips { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; }
.chip {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 16px; background: var(--panel);
  box-shadow: inset 3px 3px 0 var(--edge-light), inset -3px -3px 0 var(--edge-dark);
}
.chip b { font-size: 1.1rem; }
.chip span { color: var(--muted); font-size: .8rem; }

.world-title { font-size: 1.3rem; font-weight: 800; margin: 22px 0 4px; }
.world-sub { color: var(--muted); margin: 0 0 12px; font-size: .95rem; }
.world-locked { color: var(--gold); font-weight: 700; margin: 0 0 12px; font-size: .95rem; }

.level-list { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.level-card {
  display: flex; align-items: center; gap: 14px;
  width: 100%; text-align: left;
  background: var(--panel); color: var(--text);
  border: none; padding: 16px; cursor: pointer;
  box-shadow: inset 3px 3px 0 var(--edge-light), inset -3px -3px 0 var(--edge-dark);
}
.level-card:active { transform: translateY(2px); }
.level-card--locked { opacity: .55; cursor: not-allowed; }
.level-card--done { box-shadow: inset 3px 3px 0 var(--edge-light), inset -3px -3px 0 var(--edge-dark), inset 0 0 0 3px var(--emerald); }
.level-ico { font-size: 1.9rem; width: 44px; text-align: center; flex: none; }
.level-meta { flex: 1; min-width: 0; }
.level-name { font-weight: 800; }
.level-note { color: var(--muted); font-size: .85rem; }
.level-stars { font-size: 1rem; flex: none; letter-spacing: 2px; }

/* special home tiles: Tagestraining · Schmiede · Meine Erfolge */
.home-tiles { margin: 4px 0 6px; }
.schmiede-card {
  background: #3a2420;
  box-shadow: inset 3px 3px 0 #5c3a2e, inset -3px -3px 0 #200f0a;
}
.schmiede-card .level-name { color: #ffb08a; }
.training-card {
  background: #2c3a24;
  box-shadow: inset 3px 3px 0 #47592e, inset -3px -3px 0 #131c0c;
}
.training-card .level-name { color: #c9e88a; }
.stats-card .level-name { color: var(--diamond); }
.chip--goal { box-shadow: inset 3px 3px 0 var(--edge-light), inset -3px -3px 0 var(--edge-dark), inset 0 0 0 3px var(--emerald); }

/* A/min curve (Meine Erfolge; the eltern dashboard styles its own copy) */
.curve {
  width: 100%; height: auto; background: #1b1e24; margin: 0 0 12px;
  box-shadow: inset 3px 3px 0 var(--edge-dark);
}
.curve .grid { stroke: #333945; stroke-width: 1; }
.curve .glab { fill: #7f8a99; font-size: 11px; text-anchor: end; }
.curve .line { fill: none; stroke: var(--diamond); stroke-width: 2.5; }
.curve .dot-ok { fill: var(--emerald); }
.curve .dot-mid { fill: var(--gold); }
.curve .dot-bad { fill: var(--redstone); }

/* records rows + mini keyboard (Meine Erfolge) */
.rec-list { display: grid; gap: 8px; margin: 0 0 8px; }
.rec-row {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  background: var(--panel); padding: 10px 14px;
  box-shadow: inset 2px 2px 0 var(--edge-light), inset -2px -2px 0 var(--edge-dark);
}
.rec-world { font-weight: 800; flex: 1; min-width: 180px; }
.rec-val { color: var(--muted); font-weight: 700; }
.rec-stars { color: var(--gold); }
.mini-kb .kb-key { height: 34px; font-size: .8rem; }

/* map footer: active profile + reset */
.map-footer {
  margin: 28px 0 8px; padding-top: 16px;
  border-top: 2px solid var(--stone-d);
  color: var(--muted); font-size: .9rem;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
}
.map-footer strong { color: var(--text); }
.footer-reset {
  font: inherit; font-size: .85rem; font-weight: 700;
  color: var(--text); background: var(--panel-2); border: none; padding: 10px 14px; cursor: pointer;
  box-shadow: inset 2px 2px 0 var(--edge-light), inset -2px -2px 0 var(--edge-dark);
}
.footer-reset:active { transform: translateY(1px); }

/* "under construction" placeholder (P0) */
.construction {
  text-align: center; padding: 40px 16px; background: var(--panel);
  box-shadow: inset 3px 3px 0 var(--edge-light), inset -3px -3px 0 var(--edge-dark);
}
.construction .big { font-size: 3rem; }

/* ============================================================
   Play screen: tape + live stats + on-screen keyboard
   ============================================================ */
.play-head { display: flex; align-items: center; gap: 12px; margin: 8px 0 10px; }
.play-title { flex: 1; display: flex; align-items: center; gap: 10px; font-size: 1.25rem; font-weight: 800; }
.play-ico { font-size: 1.6rem; }
.play-abort {
  font: inherit; font-weight: 700; color: var(--muted); background: var(--panel-2);
  border: none; padding: 8px 14px; cursor: pointer;
  box-shadow: inset 2px 2px 0 var(--edge-light), inset -2px -2px 0 var(--edge-dark);
}
.play-abort:active { transform: translateY(1px); }

.ex-dots { display: flex; gap: 6px; margin: 0 0 14px; }
.ex-dot { flex: 1; height: 8px; background: var(--stone-d); }
.ex-dot--done { background: var(--emerald); }
.ex-dot--cur  { background: var(--gold); }

.play-tip {
  background: var(--panel-2); padding: 12px 14px; margin: 0 0 14px;
  box-shadow: inset 3px 3px 0 var(--edge-light), inset -3px -3px 0 var(--edge-dark);
}

.ex-title { margin: 0 0 10px; }
.ex-tag {
  display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--night); background: var(--diamond);
  padding: 3px 10px;
}
.ex-tag--test { background: var(--gold); }
.ex-title-name { font-weight: 800; margin-left: 6px; }

.play-stats { display: flex; gap: 10px; margin: 0 0 12px; }
.pstat {
  display: flex; flex-direction: column; gap: 0; min-width: 110px;
  padding: 8px 14px; background: var(--panel);
  box-shadow: inset 2px 2px 0 var(--edge-light), inset -2px -2px 0 var(--edge-dark);
}
.pstat b { font-size: 1.25rem; }
.pstat span { color: var(--muted); font-size: .75rem; }

.tape {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.7rem; line-height: 2.2; letter-spacing: 1px;
  background: #1b1e24; padding: 16px 18px; margin: 0 0 12px;
  box-shadow: inset 3px 3px 0 var(--edge-dark);
  white-space: pre-wrap; word-break: break-word;
  /* roomy: every current test fits without a scrollbar (a 3-line test at
     210px overflowed by ~1px — visible scrollbar, nothing to scroll) */
  max-height: 340px; overflow-y: auto;
}
.tape-char { color: var(--muted); border-radius: 0; }
.tape-char--done { color: var(--emerald); }
.tape-char--cur { background: var(--gold); color: var(--night); }
.tape-char--cur.tape-char--space { box-shadow: inset 0 -3px 0 var(--night); }
.tape-char--err { background: var(--redstone); color: #fff; }

.play-banner {
  background: var(--redstone); color: #fff; font-weight: 800;
  padding: 10px 14px; margin: 0 0 12px; text-align: center;
  box-shadow: inset 3px 3px 0 var(--edge-light), inset -3px -3px 0 var(--edge-dark);
}
.play-start-hint { color: var(--gold); font-weight: 700; text-align: center; margin: 0 0 12px; }

/* --- on-screen keyboard --- */
.kb { max-width: 860px; margin: 0 auto 16px; user-select: none; }
.kb-row { display: flex; gap: 5px; margin-bottom: 5px; }
.kb-row:last-child { justify-content: center; }
.kb-row:last-child .kb-key { max-width: 420px; }
.kb-key {
  flex: var(--w, 1) 1 0; height: 46px; position: relative;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel); color: var(--text);
  font-size: .95rem; font-weight: 700;
  box-shadow: inset 2px 2px 0 var(--edge-light), inset -2px -2px 0 var(--edge-dark);
}
.kb-key--meta { background: #2a2d36; color: var(--muted); }
/* finger zones: coloured base stripe */
.kb-key--lp { box-shadow: inset 2px 2px 0 var(--edge-light), inset -2px -2px 0 var(--edge-dark), inset 0 -5px 0 var(--f-lp); }
.kb-key--lr { box-shadow: inset 2px 2px 0 var(--edge-light), inset -2px -2px 0 var(--edge-dark), inset 0 -5px 0 var(--f-lr); }
.kb-key--lm { box-shadow: inset 2px 2px 0 var(--edge-light), inset -2px -2px 0 var(--edge-dark), inset 0 -5px 0 var(--f-lm); }
.kb-key--li { box-shadow: inset 2px 2px 0 var(--edge-light), inset -2px -2px 0 var(--edge-dark), inset 0 -5px 0 var(--f-li); }
.kb-key--ri { box-shadow: inset 2px 2px 0 var(--edge-light), inset -2px -2px 0 var(--edge-dark), inset 0 -5px 0 var(--f-ri); }
.kb-key--rm { box-shadow: inset 2px 2px 0 var(--edge-light), inset -2px -2px 0 var(--edge-dark), inset 0 -5px 0 var(--f-rm); }
.kb-key--rr { box-shadow: inset 2px 2px 0 var(--edge-light), inset -2px -2px 0 var(--edge-dark), inset 0 -5px 0 var(--f-rr); }
.kb-key--rp { box-shadow: inset 2px 2px 0 var(--edge-light), inset -2px -2px 0 var(--edge-dark), inset 0 -5px 0 var(--f-rp); }
.kb-key--th { box-shadow: inset 2px 2px 0 var(--edge-light), inset -2px -2px 0 var(--edge-dark), inset 0 -5px 0 var(--f-th); }
.kb-key--home { filter: brightness(1.18); }
.kb-bump {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 10px; height: 3px; background: var(--text); opacity: .8;
}
.kb-key--next {
  outline: 3px solid var(--gold); outline-offset: -1px;
  filter: brightness(1.45);
  animation: kb-pulse 1s ease-in-out infinite;
}
@keyframes kb-pulse { 50% { filter: brightness(1.15); } }
.kb-key--hit { background: var(--ok) !important; color: var(--night); }
.kb-key--err { background: var(--bad) !important; }

.done-panel { text-align: center; padding: 10px 0 20px; }
.done-msg { font-size: 1.15rem; margin: 0 0 14px; }
.done-check { font-size: 1.4rem; }
.done-xp { color: var(--emerald); }
.done-detail { color: var(--muted); font-size: .95rem; }
.done-panel .btn { min-width: 260px; }

.pause-overlay {
  position: fixed; inset: 0; z-index: 60; cursor: pointer;
  background: rgba(20, 22, 28, .82);
  display: flex; align-items: center; justify-content: center;
}
.pause-box {
  background: var(--panel); padding: 30px 40px; text-align: center;
  box-shadow: inset 4px 4px 0 var(--edge-light), inset -4px -4px 0 var(--edge-dark);
}
.pause-box .big { font-size: 3rem; }

/* ============================================================
   Results screen
   ============================================================ */
.results-box { text-align: center; padding: 24px 12px; }
.results-level { font-size: 1.2rem; font-weight: 800; color: var(--muted); }
.stars-big { font-size: 3.4rem; letter-spacing: 10px; color: var(--gold); margin: 10px 0 2px; }
.stars-big--none { color: var(--stone-d); }
.results-verdict { font-size: 1.2rem; font-weight: 800; margin: 0 0 18px; }
.results-stats { display: flex; gap: 10px; justify-content: center; margin: 0 0 14px; }
.results-record { color: var(--emerald); font-weight: 800; font-size: 1.1rem; margin: 6px 0; }
.results-next-goal { color: var(--muted); margin: 4px 0 16px; }
.results-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }

/* keyboard-gate overlay for touch-only devices */
.kb-gate {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(20, 22, 28, .96);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.kb-gate-box {
  max-width: 420px; background: var(--panel); padding: 26px; text-align: center;
  box-shadow: inset 4px 4px 0 var(--edge-light), inset -4px -4px 0 var(--edge-dark);
}
.kb-gate-box .big { font-size: 3rem; }

/* ============================================================
   Achievement toast (Minecraft advancement style)
   ============================================================ */
.toast-layer {
  position: fixed; top: 10px; right: 10px; left: 10px;
  z-index: 100; display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 12px;
  max-width: 340px; background: #1b1e24; color: var(--text);
  padding: 12px 14px; box-shadow: inset 3px 3px 0 var(--edge-light), inset -3px -3px 0 var(--edge-dark), 0 4px 12px rgba(0,0,0,.5);
  transform: translateX(120%); transition: transform .35s cubic-bezier(.2,.9,.3,1.2);
}
.toast.show { transform: translateX(0); }
.toast-ico { font-size: 1.8rem; flex: none; }
.toast-title { font-weight: 800; color: var(--gold); font-size: .85rem; }
.toast-desc { font-size: .95rem; }

@media (min-width: 520px) {
  .toast-layer { left: auto; }
}