/* ============================================================================
   Camino Fusion — 5×5 Slide-and-Merge Burgerspiel. Eigene Gestaltung:
   dunkler Grill-/Edelstahltisch, warme Beleuchtung, Bordeaux/Creme/Gold/Messing.
   KEINE 2048-Anleihen (keine beige Fläche, keine reinen Zahlenquadrate).
   Zellgröße einmal via --cell aus der Containerbreite gesetzt (siehe layout()).
   ============================================================================ */
:root{
  --steel1:#2b1d13; --steel2:#170e08; --grill:#0e0906;
  --creme:#f4ecd8; --creme2:#e9dcbf; --cream-dim:#c9b98f; --ink:#251a12;
  --gold:#d8ad5a; --gold2:#b98a34; --brass:#8a6d3a;
  --bordeaux:#6e1f2a; --bordeaux2:#4a141d; --line:#5a3d28;
  --cell:56px; --gap:6px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* KRITISCH (Solitär/Lagermeister-Lehre §7b.10): das HTML-Attribut `hidden` MUSS
   verstecken. Klassenregeln wie `.cf-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 fangen Pointer. */
[hidden]{display:none!important}
html,body{margin:0;height:100%}
body{
  background:
    radial-gradient(130% 100% at 50% -20%,#3a2818 0%,var(--steel1) 45%,var(--steel2) 100%);
  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);
}
.cf-app{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.cf-shell{flex:1;display:flex;flex-direction:column;max-width:520px;width:100%;margin:0 auto;padding:6px 8px 14px;position:relative}

/* ---- Kopfzeile ---- */
.cf-top{display:flex;align-items:center;gap:7px;padding:2px 2px 8px;flex-wrap:wrap}
.cf-brand{font-weight:800;line-height:1;font-size:16px;color:var(--gold);min-width:0;flex-shrink:1}
.cf-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}
.cf-hud{display:flex;gap:6px;align-items:center;margin-right:4px;flex-wrap:wrap}
.cf-stat{text-align:center;background:rgba(0,0,0,.30);border:1px solid var(--line);border-radius:8px;padding:2px 7px;min-width:40px}
.cf-stat small{display:block;font-size:9px;letter-spacing:.04em;color:var(--cream-dim);text-transform:uppercase}
.cf-stat b{font-size:14px;font-variant-numeric:tabular-nums}
.cf-status{background:#3c5a2a;color:#cdeeb0;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:700}
.cf-status.uebung{background:#7a3b12;color:#ffd9a8}
.cf-status.gewertet{background:#4a2a5a;color:#e6cbff}
.cf-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}
.cf-icon:hover{border-color:var(--gold)}
.cf-back{color:var(--cream-dim);text-decoration:none;font-size:13px;padding:0 4px;white-space:nowrap}
.cf-back:hover{color:var(--gold)}

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

/* ---- Bestell-Bons (Küchen-Look) ---- */
.cf-orderbar{width:100%;max-width:340px;display:flex;gap:8px;align-items:stretch}
.cf-bon-cur{position:relative;flex:1 1 auto;min-width:0;background:linear-gradient(180deg,#f6efdc,#eaddc0);color:#2c2013;
  border-radius:6px;padding:7px 10px 8px;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}
.cf-bon-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px dotted #9a8358;padding-bottom:3px;margin-bottom:5px}
.cf-bon-marke{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#8a6d3a;font-weight:700}
.cf-bon-nr{font-size:12px;font-weight:700;color:#6e1f2a}
.cf-bon-body{display:flex;align-items:center;gap:9px}
.cf-bon-icon{width:44px;height:44px;flex:0 0 44px}
.cf-bon-icon svg,.cf-mini-icon svg,.cf-tile svg{display:block;width:100%;height:100%}
.cf-bon-name{font-size:16px;font-weight:800;letter-spacing:.01em;color:#4a141d;line-height:1.1}
.cf-bon-sub{font-size:11.5px;color:#5a4a30;margin-top:2px}
.cf-bon-stamp{position:absolute;right:8px;top:52%;transform:translateY(-50%) rotate(-13deg);
  color:#177a3a;border:3px solid #177a3a;border-radius:6px;padding:2px 9px;font-size:15px;font-weight:900;
  letter-spacing:.06em;opacity:.9;text-transform:uppercase;pointer-events:none;background:rgba(240,255,240,.35)}
@keyframes stampin{0%{transform:translateY(-50%) rotate(-13deg) scale(2.3);opacity:0}
  60%{transform:translateY(-50%) rotate(-13deg) scale(.9);opacity:1}100%{transform:translateY(-50%) rotate(-13deg) scale(1);opacity:.9}}
.cf-bon-stamp.pop{animation:stampin .42s ease}
/* nächste zwei Bons + Fortschrittsbalken */
.cf-bon-next{flex:0 0 96px;display:flex;flex-direction:column;gap:4px;background:rgba(0,0,0,.26);
  border:1px solid var(--line);border-radius:8px;padding:6px 7px}
.cf-nextlbl{font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:var(--cream-dim)}
.cf-mini-bon{display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.22);border-radius:6px;padding:2px 4px;min-height:24px}
.cf-mini-icon{width:22px;height:22px;flex:0 0 22px}
.cf-mini-bon span{font-size:11px;color:var(--creme2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cf-progress{margin-top:auto;height:6px;border-radius:999px;background:rgba(0,0,0,.4);overflow:hidden}
.cf-progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--gold2),var(--gold));transition:width .3s ease}

/* ---- Grillfläche / 5×5-Raster ---- */
.cf-boardwrap{padding:9px;border-radius:14px;
  background:linear-gradient(180deg,#241610,#120a06);
  border:2px solid var(--gold2);
  box-shadow:0 6px 20px rgba(0,0,0,.55),inset 0 0 0 2px rgba(0,0,0,.35),inset 0 2px 14px rgba(216,173,90,.10)}
.cf-board{display:grid;grid-template-columns:repeat(5,var(--cell));grid-template-rows:repeat(5,var(--cell));
  gap:var(--gap);touch-action:none;outline:none;position:relative}
/* Board-Ruck in Wischrichtung (leichtes Feedback) */
.cf-board.nudge-U{animation:nudU .16s ease}
.cf-board.nudge-D{animation:nudD .16s ease}
.cf-board.nudge-L{animation:nudL .16s ease}
.cf-board.nudge-R{animation:nudR .16s ease}
@keyframes nudU{50%{transform:translateY(-5px)}}
@keyframes nudD{50%{transform:translateY(5px)}}
@keyframes nudL{50%{transform:translateX(-5px)}}
@keyframes nudR{50%{transform:translateX(5px)}}

.cf-cell{width:var(--cell);height:var(--cell);border-radius:8px;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.42),rgba(0,0,0,.42) 5px,rgba(30,20,14,.5) 5px,rgba(30,20,14,.5) 10px);
  box-shadow:inset 0 0 0 1px rgba(216,173,90,.08),inset 0 3px 6px rgba(0,0,0,.4);
  position:relative;display:flex;align-items:center;justify-content:center}

/* Burger-Kachel */
.cf-tile{position:absolute;inset:5%;display:flex;align-items:center;justify-content:center;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.cf-tile svg{width:100%;height:100%}
.cf-badge{position:absolute;left:2px;top:1px;font-size:10px;font-weight:800;line-height:1;
  color:#fff5df;background:rgba(20,12,8,.72);border:1px solid rgba(216,173,90,.6);
  border-radius:5px;padding:1px 3px;font-variant-numeric:tabular-nums;pointer-events:none}
/* Kachel, die die aktuelle Bestellung erfüllen könnte (Servier-Hilfe, KEINE Auto-Bedienung) */
.cf-cell.match{box-shadow:inset 0 0 0 2px rgba(216,173,90,.55),inset 0 3px 6px rgba(0,0,0,.4);
  background:repeating-linear-gradient(90deg,rgba(40,28,10,.5),rgba(40,28,10,.5) 5px,rgba(60,44,16,.55) 5px,rgba(60,44,16,.55) 10px)}
.cf-cell.match::after{content:"";position:absolute;inset:0;border-radius:8px;box-shadow:0 0 10px rgba(216,173,90,.35);pointer-events:none}
/* ausgewählt zum Servieren */
.cf-cell.sel{box-shadow:inset 0 0 0 3px var(--gold),0 0 0 2px rgba(216,173,90,.5)}
.cf-cell.sel::after{content:"";position:absolute;inset:0;border-radius:8px;box-shadow:0 0 16px rgba(216,173,90,.6);pointer-events:none}

/* Animationen: neue Kachel / Merge-Pop / Servieren */
.cf-tile.spawn{animation:spawnin .22s ease}
@keyframes spawnin{0%{transform:scale(.1);opacity:0}70%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
.cf-tile.pop{animation:pop .26s ease}
@keyframes pop{0%{transform:scale(.7)}45%{transform:scale(1.22)}100%{transform:scale(1)}}
.cf-cell.served{animation:served .34s ease}
@keyframes served{0%{background:rgba(255,240,190,.9)}100%{}}
/* Tipp-Hervorhebung (Servier-Ziel bzw. empfohlene Wischrichtung) */
.cf-cell.hint{animation:hintpulse 1.05s ease 2}
@keyframes hintpulse{0%,100%{box-shadow:inset 0 0 0 1px rgba(216,173,90,.08),inset 0 3px 6px rgba(0,0,0,.4)}50%{box-shadow:inset 0 0 0 3px var(--gold)}}
.cf-dbtn.hint{outline:3px solid #6cc0ff;outline-offset:2px}

/* ---- Servier-Leiste ---- */
.cf-servebar{width:100%;max-width:340px;display:flex;gap:8px;align-items:center;justify-content:center}
.cf-btn.serve{flex:1;background:linear-gradient(180deg,#2f7a3e,#1d5a2b);border:1px solid #3c9a4e;
  font-size:16px;padding:13px 14px;box-shadow:0 3px 10px rgba(0,0,0,.4)}
.cf-btn.serve:hover{background:linear-gradient(180deg,#369047,#236a33)}

/* ---- Steuerkreuz ---- */
.cf-dpad{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:7px;
  width:100%;max-width:230px}
.cf-dbtn{border:1.5px solid var(--line);background:linear-gradient(180deg,rgba(60,42,26,.8),rgba(30,20,12,.8));
  color:var(--gold);border-radius:12px;font-size:22px;line-height:1;padding:12px 0;min-height:50px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;user-select:none;-webkit-user-select:none}
.cf-dbtn:hover{border-color:var(--gold)}
.cf-dbtn:active{background:rgba(216,173,90,.18);transform:translateY(1px)}
.cf-dbtn.up{grid-column:2;grid-row:1}
.cf-dbtn.left{grid-column:1;grid-row:2}
.cf-dbtn.down{grid-column:2;grid-row:2}
.cf-dbtn.right{grid-column:3;grid-row:2}

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

/* ---- Overlays ---- */
.cf-ov{position:fixed;inset:0;background:rgba(15,8,5,.84);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:18px;z-index:40}
.cf-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}
.cf-dlg h1{margin:0 0 2px;color:var(--gold);font-size:26px}
.cf-dlg h2{margin:0 0 8px;color:var(--gold);font-size:22px}
.cf-sub{margin:0 0 12px;color:var(--cream-dim);letter-spacing:.08em;text-transform:uppercase;font-size:13px}
.cf-dlg p{color:var(--creme);line-height:1.5;font-size:14.5px;margin:0 0 12px}
.cf-modus{display:flex;flex-direction:column;gap:10px;margin:14px 0 6px}
.cf-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}
.cf-modus-btn b{display:block;font-size:16px;color:var(--gold)}
.cf-modus-btn span{font-size:12.5px;color:var(--cream-dim)}
.cf-modus-haupt{border-color:var(--gold);background:rgba(216,173,90,.10)}
.cf-modus-btn:hover{border-color:var(--gold)}
.cf-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)}
.cf-err{color:#ff9a8a;font-weight:600;min-height:18px;font-size:13.5px}
.cf-startlinks{display:flex;gap:8px;align-items:center;justify-content:center;color:var(--cream-dim);font-size:13px;margin-top:6px}
.cf-link{background:none;border:0;color:var(--gold);cursor:pointer;font:inherit;text-decoration:underline}
.cf-count{font-size:96px;font-weight:800;color:var(--gold)}
.cf-score b{color:var(--gold);font-size:24px}
.cf-small{font-size:13px;color:var(--cream-dim)}
.cf-unrated-msg{background:#7a3b12;color:#ffd9a8;border-radius:9px;padding:8px 12px;font-size:13px}
.cf-entry{display:flex;gap:8px;margin:6px 0}
.cf-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}
.cf-ok-msg{color:#8fe0a8;font-weight:700}
.cf-endebtns{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:12px}
.cf-infobody{text-align:left;font-size:14px;color:var(--creme);line-height:1.55;max-height:52vh;overflow:auto;margin-bottom:12px}
.cf-infobody ul{padding-left:18px;margin:6px 0}
.cf-infobody li{margin:4px 0}
.cf-infobody b{color:var(--gold)}

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

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