/* Lagermeister (Camino Blocks) — 9x9-Blockpuzzle. Eigene Gestaltung, warme
   El-Camino-Palette: dunkles Lagerregal, Messing-/Goldrahmen, Bordeaux-Akzente.
   Zellgröße einmal via --cell aus der Containerbreite gesetzt (siehe layout()). */
:root{
  --regal1:#2a1a10; --regal2:#1a0f08; --holz:#3a2418;
  --creme:#f4ecd8; --creme2:#e9dcbf; --ink:#2b2118;
  --gold:#d8ad5a; --gold2:#b98a34; --bordeaux:#6e1f2a; --bordeaux2:#4a141d;
  --kiste1:#c98a44; --kiste2:#a5692c; --line:#5a3d28; --cream-dim:#c9b98f;
  --cell:31px; --gap:2px; --mcell:16px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* KRITISCH (Solitär-Lehre §7b.10): das HTML-Attribut `hidden` MUSS verstecken.
   Klassenregeln wie `.cb-ov{display:flex}` haben dieselbe Spezifität wie das
   UA-`[hidden]{display:none}` und gewinnen (Author-Origin) -> sonst liegen alle
   Overlays gleichzeitig sichtbar übereinander und hidden=true blendet nichts aus. */
[hidden]{display:none!important}
html,body{margin:0;height:100%}
body{
  background:radial-gradient(120% 90% at 50% -10%,var(--regal1),var(--regal2) 70%);
  color:var(--creme);font-family:system-ui,"Segoe UI",Roboto,sans-serif;
  min-height:100vh;min-height:100dvh;-webkit-text-size-adjust:100%;
  touch-action:manipulation;overflow-x:hidden;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.cb-app{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.cb-shell{flex:1;display:flex;flex-direction:column;max-width:520px;width:100%;margin:0 auto;padding:6px 8px 14px;position:relative}

/* Kopfzeile */
.cb-top{display:flex;align-items:center;gap:7px;padding:2px 2px 8px;flex-wrap:wrap}
.cb-brand{font-weight:800;line-height:1;font-size:16px;color:var(--gold);min-width:0;flex-shrink:1}
.cb-brand small{display:block;font-weight:500;font-size:11px;color:var(--cream-dim);margin-top:3px}
.sp{flex:1 1 12px;min-width:0}
.cb-hud{display:flex;gap:8px;align-items:center;margin-right:4px;flex-wrap:wrap}
.cb-stat{text-align:center;background:rgba(0,0,0,.28);border:1px solid var(--line);border-radius:8px;padding:2px 8px;min-width:44px}
.cb-stat small{display:block;font-size:9.5px;letter-spacing:.05em;color:var(--cream-dim);text-transform:uppercase}
.cb-stat b{font-size:15px;font-variant-numeric:tabular-nums}
.cb-status{background:#3c5a2a;color:#cdeeb0;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:700}
.cb-status.uebung{background:#7a3b12;color:#ffd9a8}
.cb-status.gewertet{background:#4a2a5a;color:#e6cbff}
.cb-icon{width:34px;height:34px;flex:0 0 34px;border:1px solid var(--line);background:rgba(0,0,0,.25);border-radius:9px;color:var(--creme);
  display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;text-decoration:none}
.cb-icon:hover{border-color:var(--gold)}
.cb-back{color:var(--cream-dim);text-decoration:none;font-size:13px;padding:0 4px;white-space:nowrap}
.cb-back:hover{color:var(--gold)}

/* Spielfeld */
.cb-play{display:flex;flex-direction:column;gap:10px;align-items:center}

/* Bestellkarte (Restaurant-Bon) */
.cb-bon{position:relative;width:100%;max-width:340px;background:linear-gradient(180deg,#f6efdc,#eaddc0);color:#2c2013;
  border-radius:6px;padding:8px 12px 10px;box-shadow:0 3px 10px rgba(0,0,0,.4);
  border-top:3px dashed #c9b98f;border-bottom:3px dashed #c9b98f;font-family:"Courier New",ui-monospace,monospace}
.cb-bon-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px dotted #9a8358;padding-bottom:3px;margin-bottom:5px}
.cb-bon-marke{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#8a6d3a;font-weight:700}
.cb-bon-nr{font-size:12px;font-weight:700;color:#6e1f2a}
.cb-bon-title{font-size:16px;font-weight:800;letter-spacing:.02em;color:#4a141d}
.cb-bon-text{font-size:12px;color:#5a4a30;margin-top:2px;line-height:1.35}
.cb-bon-stamp{position:absolute;right:8px;top:50%;transform:translateY(-50%) rotate(-14deg);
  color:#b02a2a;border:3px solid #b02a2a;border-radius:6px;padding:2px 10px;font-size:16px;font-weight:900;
  letter-spacing:.08em;opacity:.85;text-transform:uppercase;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(176,42,42,.4)}
@keyframes stampin{0%{transform:translateY(-50%) rotate(-14deg) scale(2.4);opacity:0}
  60%{transform:translateY(-50%) rotate(-14deg) scale(.9);opacity:.95}100%{transform:translateY(-50%) rotate(-14deg) scale(1);opacity:.85}}
.cb-bon-stamp.pop{animation:stampin .4s ease}

/* Regal / 9x9-Raster */
.cb-gridwrap{padding:8px;border-radius:12px;background:linear-gradient(180deg,#33200f,#241407);
  border:2px solid var(--gold2);box-shadow:0 6px 18px rgba(0,0,0,.5),inset 0 0 0 2px rgba(0,0,0,.3)}
.cb-grid{display:grid;grid-template-columns:repeat(9,var(--cell));grid-template-rows:repeat(9,var(--cell));
  gap:var(--gap);touch-action:none;outline:none}
.cb-cell{width:var(--cell);height:var(--cell);border-radius:4px;background:rgba(0,0,0,.34);
  box-shadow:inset 0 0 0 1px rgba(216,173,90,.10);position:relative}
/* jede 3x3-Zone leicht abgesetzt (Regalfächer) */
.cb-cell.zone{background:rgba(216,173,90,.06)}
.cb-cell.fill{background:linear-gradient(155deg,var(--kiste1),var(--kiste2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -2px 3px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.3)}
.cb-cell.fill::after{content:"";position:absolute;inset:26%;border-radius:2px;
  border:1px solid rgba(74,20,29,.5);background:rgba(110,31,42,.25)}
.cb-cell.t1.fill{background:linear-gradient(155deg,#cf9a4e,#ab7130)}
.cb-cell.t2.fill{background:linear-gradient(155deg,#c07f3c,#9a5f27)}
.cb-cell.t3.fill{background:linear-gradient(155deg,#c98a44,#9c6329)}
.cb-cell.gok{background:rgba(120,200,110,.42);box-shadow:inset 0 0 0 2px rgba(150,230,140,.9)}
.cb-cell.gbad{background:rgba(200,70,70,.34);box-shadow:inset 0 0 0 2px rgba(230,110,110,.85)}
.cb-cell.clearflash{animation:clr .34s ease}
@keyframes clr{0%{background:rgba(255,240,190,.95)}100%{background:rgba(0,0,0,.34)}}
.cb-cell.hintcell{animation:hintp 1.1s ease 2}
@keyframes hintp{0%,100%{box-shadow:inset 0 0 0 1px rgba(216,173,90,.10)}50%{box-shadow:inset 0 0 0 3px var(--gold)}}

/* Lieferkisten-Slots */
.cb-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;max-width:340px}
.cb-slot{min-height:96px;border-radius:11px;border:1.5px solid var(--line);background:rgba(0,0,0,.24);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:8px 4px;cursor:pointer;position:relative;touch-action:none;user-select:none;-webkit-user-select:none}
.cb-slot:hover{border-color:var(--gold)}
.cb-slot.sel{border-color:var(--gold);background:rgba(216,173,90,.14);box-shadow:0 0 0 2px rgba(216,173,90,.4)}
.cb-slot.used{cursor:default;border-style:dashed;opacity:.5}
.cb-slot.used:hover{border-color:var(--line)}
.cb-slot.prio{border-color:var(--bordeaux);background:rgba(110,31,42,.16)}
.cb-slot.prio.sel{box-shadow:0 0 0 2px rgba(216,173,90,.5)}
.cb-slot.kbd{outline:3px solid #6cc0ff;outline-offset:2px}
.cb-slot-used-txt{font-size:11px;color:var(--cream-dim);letter-spacing:.05em}
.cb-prio-tag{position:absolute;top:4px;left:0;right:0;text-align:center;font-size:9px;font-weight:800;
  letter-spacing:.08em;color:#ffbfae;text-transform:uppercase}
/* Mini-Teilezeichnung im 5x5-Raster */
.cb-mini{display:grid;grid-template-columns:repeat(5,var(--mcell));grid-template-rows:repeat(5,var(--mcell));gap:1px}
.cb-mc{width:var(--mcell);height:var(--mcell);border-radius:2px}
.cb-mc.on{background:linear-gradient(155deg,var(--kiste1),var(--kiste2));box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -1px 2px rgba(0,0,0,.3)}
.cb-slot.prio .cb-mc.on{background:linear-gradient(155deg,#c46a54,#8f3324)}

/* schwebender Drag-Geist */
#cbGhost{position:fixed;pointer-events:none;z-index:60;opacity:.9;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
#cbGhost .cb-mini{--mcell:13px}

/* Steuerknöpfe */
.cb-controls{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:2px}
.cb-btn{background:var(--bordeaux);color:#fff;border:0;border-radius:10px;padding:11px 16px;font:600 15px system-ui;cursor:pointer}
.cb-btn:hover{background:#853040}
.cb-btn:disabled{opacity:.4;cursor:default}
.cb-btn.small{padding:8px 12px;font-size:14px}
.cb-btn.ghost{background:transparent;border:1.5px solid var(--gold);color:var(--gold)}
.cb-btn:focus-visible,.cb-icon:focus-visible,.cb-modus-btn:focus-visible,.cb-slot:focus-visible,.cb-grid:focus-visible{outline:3px solid #6cc0ff;outline-offset:2px}

/* Overlays */
.cb-ov{position:fixed;inset:0;background:rgba(15,8,5,.82);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:18px;z-index:40}
.cb-dlg{background:linear-gradient(180deg,#2c1b12,#20130c);border:1px solid var(--line);border-radius:16px;
  padding:22px 22px 20px;max-width:440px;width:100%;box-shadow:0 18px 44px rgba(0,0,0,.55);text-align:center}
.cb-dlg h1{margin:0 0 2px;color:var(--gold);font-size:26px}
.cb-dlg h2{margin:0 0 8px;color:var(--gold);font-size:22px}
.cb-sub{margin:0 0 12px;color:var(--cream-dim);letter-spacing:.08em;text-transform:uppercase;font-size:13px}
.cb-dlg p{color:var(--creme);line-height:1.5;font-size:14.5px;margin:0 0 12px}
.cb-modus{display:flex;flex-direction:column;gap:10px;margin:14px 0 6px}
.cb-modus-btn{display:block;width:100%;text-align:left;background:rgba(0,0,0,.25);border:1.5px solid var(--line);border-radius:12px;
  padding:12px 15px;color:var(--creme);cursor:pointer}
.cb-modus-btn b{display:block;font-size:16px;color:var(--gold)}
.cb-modus-btn span{font-size:12.5px;color:var(--cream-dim)}
.cb-modus-haupt{border-color:var(--gold);background:rgba(216,173,90,.10)}
.cb-modus-btn:hover{border-color:var(--gold)}
.cb-challenge-info{background:rgba(0,0,0,.25);border:1px solid var(--line);border-radius:9px;padding:9px 12px;font-size:12.5px;color:var(--cream-dim)}
.cb-err{color:#ff9a8a;font-weight:600;min-height:18px;font-size:13.5px}
.cb-startlinks{display:flex;gap:8px;align-items:center;justify-content:center;color:var(--cream-dim);font-size:13px;margin-top:6px}
.cb-link{background:none;border:0;color:var(--gold);cursor:pointer;font:inherit;text-decoration:underline}
.cb-count{font-size:96px;font-weight:800;color:var(--gold)}
.cb-score b{color:var(--gold);font-size:24px}
.cb-small{font-size:13px;color:var(--cream-dim)}
.cb-unrated-msg{background:#7a3b12;color:#ffd9a8;border-radius:9px;padding:8px 12px;font-size:13px}
.cb-entry{display:flex;gap:8px;margin:6px 0}
.cb-entry input{flex:1;background:#120b07;border:1px solid var(--line);color:var(--creme);border-radius:9px;padding:11px 12px;font:600 18px system-ui;text-align:center;letter-spacing:.15em;text-transform:uppercase}
.cb-ok-msg{color:#8fe0a8;font-weight:700}
.cb-endebtns{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:12px}
.cb-infobody{text-align:left;font-size:14px;color:var(--creme);line-height:1.55;max-height:52vh;overflow:auto;margin-bottom:12px}
.cb-infobody ul{padding-left:18px;margin:6px 0}
.cb-infobody li{margin:3px 0}

.cb-flash{position:fixed;left:50%;bottom:16%;transform:translateX(-50%);background:rgba(0,0,0,.8);color:#fff;
  padding:9px 16px;border-radius:999px;font-size:14px;z-index:55;pointer-events:none;border:1px solid var(--line)}

@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} }
@media (min-width:560px){ :root{--cell:34px;--mcell:17px} .cb-brand{font-size:18px} }