/* =========================================================
   CubeKeys — Styles
   ========================================================= */

:root{
  --bg:#080a0f;
  --bg2:#0e1119;
  --panel:rgba(255,255,255,.038);
  --panel-2:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  /* Vier Helligkeitsstufen, Kontrast gegen die Kartenfläche:
     --text 16,3:1 (Überschriften) · --text-2 14,0:1 (Fließtext)
     --muted 10,2:1 (Sekundäres)   · --dim 8,1:1 (Labels)
     Fließtext lief vorher auf --muted, --dim sogar auf 3,05:1. */
  --text:#eef1f8;
  --text-2:#dbe1ee;
  --muted:#bac2d2;
  --dim:#a4adc0;

  /* Schriftgröße global regelbar (Einstellungen, F2) */
  --fs:1;
  --acc:#5eead4;
  --acc-2:#a78bfa;
  --warn:#fbbf24;
  --bad:#fb7185;
  --good:#4ade80;

  /* Würfelfarben */
  --c-U:#f3f5fb;
  --c-D:#ffd21e;
  --c-F:#16b877;
  --c-B:#1c74e8;
  --c-R:#ee3d36;
  --c-L:#ff8a1f;

  --cubie:78px;
  --gap:4px;

  --radius:14px;
  --mono:ui-monospace,"SFMono-Regular","JetBrains Mono","Cascadia Mono",Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}

html,body{height:100%}

/* Lesetexte hängen an rem und skalieren dadurch mit --fs mit.
   Strukturmaße bleiben in px, damit das Layout stabil bleibt. */
html{font-size:calc(16px * var(--fs))}

body{
  background:
    radial-gradient(1200px 800px at 50% -10%, #17203a 0%, transparent 60%),
    radial-gradient(900px 700px at 90% 110%, #1b1430 0%, transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:.94rem;
  overflow:hidden;
  user-select:none;
  -webkit-font-smoothing:antialiased;
}

button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
h2,h3,h4{font-weight:650;letter-spacing:-.01em}

/* ---------- Layout ---------- */
#app{
  height:100vh;
  display:grid;
  grid-template-rows:56px 1fr auto;
}

#topbar{
  display:flex;align-items:center;gap:18px;
  padding:0 16px;
  border-bottom:1px solid var(--line);
  background:rgba(8,10,15,.6);
  backdrop-filter:blur(14px);
  z-index:5;
}

.brand{
  font-weight:800;letter-spacing:.16em;font-size:13px;
  color:var(--text);flex:0 0 auto;
}
.brand span{color:var(--acc)}

.modes{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.mode-btn{
  padding:6px 12px;border-radius:8px;color:var(--muted);
  font-size:.88rem;font-weight:600;transition:.15s;
}
.mode-btn:hover{color:var(--text);background:var(--panel)}
.mode-btn.is-active{color:#06251f;background:var(--acc)}

.hint-key{
  font-family:var(--mono);font-size:10px;color:var(--dim);
  border:1px solid var(--line);border-radius:5px;padding:2px 5px;margin-left:4px;
}

.scramble{
  flex:1 1 auto;min-width:0;
  font-family:var(--mono);font-size:.82rem;letter-spacing:.05em;
  color:var(--muted);text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.scramble b{color:var(--text);font-weight:500}

.timerbox{flex:0 0 auto;text-align:right;min-width:150px}
.timer{
  font-family:var(--mono);font-size:26px;font-weight:600;
  line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.timer.is-running{color:var(--acc)}
.timer.is-ready{color:var(--good)}
.timer.is-done{color:var(--acc-2)}
.timer-sub{font-size:.76rem;color:var(--dim);margin-top:3px;letter-spacing:.02em}

#main{
  display:grid;
  grid-template-columns:296px minmax(0,1fr) 296px;
  min-height:0;
}

.panel{
  border-right:1px solid var(--line);
  overflow-y:auto;overflow-x:hidden;
  padding:14px;
}
#panel-right{border-right:none;border-left:1px solid var(--line)}

.panel::-webkit-scrollbar{width:8px}
.panel::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:4px}
.panel::-webkit-scrollbar-track{background:transparent}

/* ---------- Bühne / Würfel ---------- */
#stage{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  min-height:0;overflow:hidden;
}

#scene{
  perspective:1700px;
  perspective-origin:50% 46%;
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
}

#cube{
  position:relative;
  width:0;height:0;
  transform-style:preserve-3d;
  will-change:transform;
}

.cubie{
  position:absolute;
  width:var(--cubie);height:var(--cubie);
  left:calc(var(--cubie) / -2);
  top:calc(var(--cubie) / -2);
  transform-style:preserve-3d;
  will-change:transform;
}

.face{
  position:absolute;inset:0;
  background:#0c0d11;
  border-radius:9px;
  transition:filter .16s linear;
  backface-visibility:hidden;
}
.face[data-wd="0"]{filter:brightness(1.00)}   /* U */
.face[data-wd="2"]{filter:brightness(.88)}    /* F */
.face[data-wd="4"]{filter:brightness(.79)}    /* R */
.face[data-wd="1"]{filter:brightness(.55)}    /* D */
.face[data-wd="3"]{filter:brightness(.60)}    /* B */
.face[data-wd="5"]{filter:brightness(.66)}    /* L */

.sticker{
  position:absolute;inset:5px;
  border-radius:7px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.22), inset 0 -3px 7px rgba(0,0,0,.16);
}
.sticker.c0{background:var(--c-U)}
.sticker.c1{background:var(--c-D)}
.sticker.c2{background:var(--c-F)}
.sticker.c3{background:var(--c-B)}
.sticker.c4{background:var(--c-R)}
.sticker.c5{background:var(--c-L)}

/* Highlight für den Lernmodus: gesuchter Stein pulsiert, Zielplatz umrandet */
.sticker.hl{
  box-shadow:inset 0 0 0 3px var(--acc), 0 0 18px rgba(94,234,212,.55);
  animation:hlpulse 1.1s ease-in-out infinite;
}
@keyframes hlpulse{50%{box-shadow:inset 0 0 0 3px #fff, 0 0 26px rgba(94,234,212,.85)}}

.sticker.hl-dst{
  box-shadow:inset 0 0 0 3px var(--acc-2), 0 0 14px rgba(167,139,250,.5);
}

.sticker.ghost{opacity:.22}

/* Hinweis: #cube darf keine CSS-Animation auf transform bekommen —
   die Ansichtsdrehung wird dort inline gesetzt und würde überschrieben.
   Der Lösungs-Impuls läuft deshalb in render.js (Render.pop). */

/* Bühnen-Overlay (großer Statustext) */
.stage-overlay{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
  font-size:64px;font-weight:800;letter-spacing:-.03em;
  opacity:0;transition:opacity .2s;
  text-shadow:0 6px 40px rgba(0,0,0,.7);
}
.stage-overlay.show{opacity:1}

/* Zugstrom */
.movestream{
  position:absolute;left:0;right:0;bottom:12px;
  display:flex;justify-content:center;gap:5px;
  pointer-events:none;font-family:var(--mono);
}
.mv{
  padding:3px 8px;border-radius:7px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  font-size:.82rem;color:var(--muted);
  animation:mvIn .18s ease-out;
}
.mv.fresh{color:#06251f;background:var(--acc);border-color:transparent;font-weight:700}
@keyframes mvIn{from{transform:translateY(6px) scale(.85);opacity:0}}

.stage-hud{
  position:absolute;top:12px;right:14px;
  display:flex;gap:14px;pointer-events:none;
}
.hud-item{text-align:right}
.hud-label{display:block;font-size:.68rem;letter-spacing:.14em;color:var(--dim);text-transform:uppercase}
.hud-value{display:block;font-family:var(--mono);font-size:.98rem;color:var(--muted);font-variant-numeric:tabular-nums}

/* ---------- Tastatur-Overlay ---------- */
.keyboard{
  border-top:1px solid var(--line);
  padding:10px 14px 12px;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  background:rgba(8,10,15,.55);
}
.kbrow{display:flex;gap:4px}
.kbrow.r2{margin-left:18px}
.kbrow.r3{margin-left:28px}
.kbrow.r4{margin-left:44px}

.key{
  width:52px;height:44px;border-radius:8px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;position:relative;transition:transform .06s,background .12s,border-color .12s;
}
/* Feste px-Größen: die Tastenkacheln haben feste Breite und dürfen
   nicht mit --fs mitwachsen, sonst brechen die Reihen um. */
.key .lbl{font-size:10px;color:var(--dim);font-family:var(--mono);line-height:1}
.key .bind{font-family:var(--mono);font-size:14px;font-weight:650;color:#c3cbdb;line-height:1}
.key.free .bind{color:transparent}
.key.grp-face .bind{color:#dbe1f0}
.key.grp-wide .bind{color:#8ec7ff}
.key.grp-slice .bind{color:#ffc98e}
.key.grp-rot  .bind{color:var(--acc-2)}
.key.down{
  transform:translateY(2px) scale(.96);
  background:var(--acc);border-color:var(--acc);
}
.key.down .bind,.key.down .lbl{color:#06251f}
.key.flash{animation:kflash .32s ease-out}
@keyframes kflash{0%{box-shadow:0 0 0 0 rgba(94,234,212,.6)}100%{box-shadow:0 0 0 12px rgba(94,234,212,0)}}
.key.target{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc), 0 0 18px rgba(94,234,212,.25)}
/* Im Tutorial alles ausblenden, was gerade nicht gebraucht wird */
.key.dim{opacity:.12}
.key.dim .bind,.key.dim .lbl{color:var(--dim)}
.key.wrong{animation:kwrong .3s}
@keyframes kwrong{25%{transform:translateX(-4px);background:rgba(251,113,133,.35)}75%{transform:translateX(4px)}}

/* ---------- Panel-Bausteine ---------- */
.sec{margin-bottom:18px}
.sec-title{
  font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--dim);margin-bottom:9px;display:flex;align-items:center;gap:8px;
}
.sec-title::after{content:"";flex:1;height:1px;background:var(--line)}

.card{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:12px;
}
.card + .card{margin-top:8px}

.kv{display:flex;justify-content:space-between;align-items:baseline;padding:4px 0}
.kv .k{color:var(--muted);font-size:.82rem}
.kv .v{font-family:var(--mono);font-size:.9rem;font-variant-numeric:tabular-nums}
.kv .v.big{font-size:1.2rem;font-weight:600}

.list{display:flex;flex-direction:column;gap:5px}

.item{
  display:flex;align-items:center;gap:9px;
  padding:9px 10px;border-radius:10px;
  border:1px solid var(--line);background:var(--panel);
  transition:.14s;text-align:left;width:100%;
}
.item:hover{background:var(--panel-2);border-color:var(--line-2)}
.item.is-active{border-color:var(--acc);background:rgba(94,234,212,.09)}
.item .num{
  flex:0 0 21px;height:21px;border-radius:5px;
  display:grid;place-items:center;
  font-family:var(--mono);font-size:.72rem;
  background:rgba(255,255,255,.07);color:var(--muted);
}
.item.is-active .num{background:var(--acc);color:#06251f}
.item .txt{flex:1;min-width:0}
.item .t1{font-size:.86rem;font-weight:600;line-height:1.3}
.item .t2{font-size:.76rem;color:var(--muted);margin-top:3px;line-height:1.4}
.item .badge{
  font-size:.7rem;font-family:var(--mono);padding:2px 6px;border-radius:4px;
  background:rgba(255,255,255,.07);color:var(--muted);
}
.item .badge.ok{background:rgba(74,222,128,.15);color:var(--good)}

.btn{
  padding:9px 13px;border-radius:9px;border:1px solid var(--line-2);
  background:var(--panel-2);font-size:.86rem;font-weight:600;transition:.14s;
}
.btn:hover{background:rgba(255,255,255,.11)}
.btn.primary{background:var(--acc);color:#06251f;border-color:transparent}
.btn.primary:hover{filter:brightness(1.08)}
.btn.row{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px}
.btn kbd{font-family:var(--mono);font-size:10px;opacity:.7;border:1px solid currentColor;border-radius:4px;padding:1px 4px}

.note{font-size:.84rem;color:var(--muted);line-height:1.6}
.note b{color:var(--text);font-weight:600}

/* Alg-Anzeige */
.algline{
  display:flex;flex-wrap:wrap;gap:4px;
  font-family:var(--mono);
}
.algtok{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:5px 7px;border-radius:8px;
  border:1px solid var(--line);background:rgba(255,255,255,.03);
  min-width:34px;
}
.algtok .n{font-size:.9rem;font-weight:650}
.algtok .k{font-size:.7rem;color:var(--muted);text-transform:uppercase}
.algtok.done{opacity:.32}
.algtok.cur{border-color:var(--acc);background:rgba(94,234,212,.14)}
.algtok.cur .n{color:var(--acc)}
.algtok.err{border-color:var(--bad);background:rgba(251,113,133,.16);animation:kwrong .3s}

/* Lektionstexte */
.lesson-title{font-size:1.05rem;font-weight:650;letter-spacing:-.01em;margin-bottom:8px}
.lesson-sub{font-size:.8rem;color:var(--acc);letter-spacing:.04em;margin:-4px 0 9px}
.lesson-p{font-size:.92rem;line-height:1.68;color:var(--text-2);margin-bottom:11px}
.lesson-p:last-child{margin-bottom:0}
.lesson-p b{color:var(--text)}
.keycap{
  display:inline-block;font-family:var(--mono);font-size:.78rem;
  border:1px solid var(--line-2);border-radius:5px;padding:1px 6px;
  background:rgba(255,255,255,.09);color:var(--text);min-width:22px;text-align:center;
  vertical-align:baseline;
}
.mono-inline{font-family:var(--mono);color:var(--acc);font-size:.85rem}
.card.shake{animation:kwrong .3s}
.btn[disabled]{cursor:default;pointer-events:none}

.bigmove{
  font-family:var(--mono);font-size:44px;font-weight:700;text-align:center;
  letter-spacing:-.02em;line-height:1;margin:6px 0 2px;
}
.bigkey{text-align:center;font-size:.82rem;color:var(--muted);letter-spacing:.08em}

.meter{height:5px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.meter > i{display:block;height:100%;background:var(--acc);border-radius:3px;transition:width .2s}

/* ---------- Overlay ---------- */
.overlay-root{position:fixed;inset:0;z-index:50;display:grid;place-items:center}
/* Muss explizit stehen: das display:grid oben ist eine Autoren-Regel und
   schlägt sonst das [hidden]{display:none} des Browser-Stylesheets. */
.overlay-root[hidden]{display:none}
.toast[hidden]{display:none}
.overlay-backdrop{position:absolute;inset:0;background:rgba(4,6,10,.72);backdrop-filter:blur(6px)}
.overlay-card{
  position:relative;width:min(940px,92vw);max-height:86vh;
  background:#0d1017;border:1px solid var(--line-2);border-radius:18px;
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 40px 90px rgba(0,0,0,.65);
  animation:ovIn .18s cubic-bezier(.2,.9,.3,1);
}
@keyframes ovIn{from{transform:translateY(14px) scale(.98);opacity:0}}
.overlay-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--line);
}
.overlay-head h2{font-size:15px}
.overlay-close{
  font-family:var(--mono);font-size:11px;color:var(--muted);
  border:1px solid var(--line);border-radius:6px;padding:3px 7px;
}
.overlay-close:hover{color:var(--text);border-color:var(--line-2)}
.overlay-body{padding:18px;overflow-y:auto}

.tbl{width:100%;border-collapse:collapse;font-size:.86rem}
.tbl th{
  text-align:left;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);padding:7px 8px;border-bottom:1px solid var(--line);font-weight:600;
}
.tbl td{padding:7px 8px;border-bottom:1px solid rgba(255,255,255,.05)}
.tbl tr:hover td{background:rgba(255,255,255,.03)}
.tbl .mono{font-family:var(--mono)}
.tbl .keycap{
  display:inline-block;font-family:var(--mono);font-size:11px;
  border:1px solid var(--line-2);border-radius:5px;padding:2px 7px;
  background:rgba(255,255,255,.05);min-width:26px;text-align:center;
}
.tbl .rebind{opacity:0;font-size:10px;color:var(--acc)}
.tbl tr:hover .rebind{opacity:1}
.tbl tr.capturing td{background:rgba(94,234,212,.12)}

.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}

.opt{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.opt .lab{font-size:.88rem}
.opt .sub{font-size:.78rem;color:var(--dim);margin-top:3px;line-height:1.5}
.switch{
  width:40px;height:22px;border-radius:11px;background:rgba(255,255,255,.12);
  position:relative;transition:.16s;flex:0 0 auto;
}
.switch::after{
  content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;
  border-radius:50%;background:#fff;transition:.16s;
}
.switch.on{background:var(--acc)}
.switch.on::after{transform:translateX(18px)}
input[type=range]{width:130px;accent-color:var(--acc)}

/* Toast */
.toast{
  position:fixed;left:50%;bottom:110px;transform:translateX(-50%);
  background:#151a24;border:1px solid var(--line-2);border-radius:10px;
  padding:9px 15px;font-size:12.5px;z-index:80;
  box-shadow:0 12px 40px rgba(0,0,0,.5);
  animation:toastIn .18s;
}
@keyframes toastIn{from{transform:translate(-50%,10px);opacity:0}}

/* Konfetti */
.confetti{position:absolute;width:8px;height:12px;border-radius:2px;pointer-events:none;z-index:20}

@media (max-width:1240px){
  #main{grid-template-columns:250px minmax(0,1fr) 250px}
  :root{--cubie:66px}
}
@media (max-width:1000px){
  #main{grid-template-columns:minmax(0,1fr)}
  .panel{display:none}
  .panel.mobile-show{display:block;position:absolute;inset:56px 0 auto 0;height:60vh;z-index:9;background:#0b0e14}
}
@media (max-height:820px){
  :root{--cubie:62px}
  .key{width:46px;height:38px}
}