/* ============================================================================
   Pixelküche — Nonogramm / Bilderrätsel für die El-Camino-Spielhalle.
   Eigene Gestaltung im warmen Diner-Look der Spielhalle (Steel/Creme/Gold/
   Bordeaux, wie Camino Fusion). Das Rätsel selbst sitzt als "gedrucktes"
   cremefarbenes Karten-Raster auf dem dunklen Tisch — Hinweise in dunkler
   Röst-Tinte, gefüllte Zellen erst monochrom-dunkel, nach dem Lösen in der
   Motivfarbe. Zellmaß einmal via --cell aus der Containerbreite (layout()),
   Rätselgeometrie (--n/--rlen/--clen) je Rätsel gesetzt.
   Kommentare englisch, sichtbare Texte deutsch.
   ============================================================================ */
:root{
  --steel1:#2b1d13; --steel2:#170e08;
  --creme:#f4ecd8; --creme2:#e9dcbf; --cream-dim:#c9b98f; --ink:#251a12;
  --gold:#d8ad5a; --gold2:#b98a34; --brass:#8a6d3a;
  --bordeaux:#6e1f2a; --bordeaux2:#4a141d; --line:#5a3d28;
  /* Rätsel-Karte (cremefarben, wie die Bestell-Bons in Camino Fusion) */
  --card1:#f6efdc; --card2:#e9dcbf;
  --cink:#2e2013;          /* gefüllte Zelle monochrom + Hinweistext */
  --gl:#cbb488;            /* dünne Gitterlinie */
  --gl-strong:#8a6d3a;     /* dicke 5er-Linie + Rahmen */
  --xcol:#9a4433;          /* X / Kreuz */
  --cell:24px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* KRITISCH (Solitär/Lagermeister/CF-Lehre): das HTML-Attribut `hidden` MUSS
   verstecken. Overlay-Klassen haben dieselbe Spezifität wie das UA-[hidden]
   und würden sonst gewinnen -> alle Overlays lägen sichtbar übereinander. */
[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);
}
.pk-app{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.pk-shell{flex:1;display:flex;flex-direction:column;max-width:520px;width:100%;margin:0 auto;padding:6px 8px 16px;position:relative}

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

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

/* ---- Infozeile über dem Rätsel ---- */
.pk-infobar{width:100%;max-width:400px;display:flex;flex-direction:column;gap:6px}
.pk-pinfo{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.pk-pnum{font-size:15px;font-weight:800;color:var(--gold)}
.pk-pmeta{font-size:12px;color:var(--cream-dim);text-align:right}
.pk-progress{height:6px;border-radius:999px;background:rgba(0,0,0,.4);overflow:hidden}
.pk-progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--gold2),var(--gold));transition:width .3s ease}

/* ---- Rätsel-Karte (Hinweise + Raster) ---- */
.pk-cardwrap{max-width:100%;display:flex;justify-content:center}
.pk-card{
  display:grid;
  grid-template-columns:var(--rgutter,60px) calc(var(--n,10) * var(--cell));
  grid-template-rows:var(--cgutter,44px) calc(var(--n,10) * var(--cell));
  background:linear-gradient(180deg,var(--card1),var(--card2));
  border:2px solid var(--gold2);border-radius:10px;
  padding:8px 9px 9px;gap:0;
  box-shadow:0 6px 20px rgba(0,0,0,.5),inset 0 0 0 2px rgba(255,255,255,.25);
}
.pk-corner{grid-column:1;grid-row:1}
/* Spalten-Hinweise (oben): Grid mit denselben Spalten-Tracks wie das Raster */
.pk-colclues{grid-column:2;grid-row:1;display:grid;grid-template-columns:repeat(var(--n,10),var(--cell));align-items:end}
.pk-colclue{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;line-height:1}
.pk-colclue.done{opacity:.30}
.pk-colclue .pk-cn{width:var(--cell);height:calc(var(--cell) * .64);display:flex;align-items:center;justify-content:center}
/* Zeilen-Hinweise (links): Grid mit denselben Zeilen-Tracks wie das Raster */
.pk-rowclues{grid-column:1;grid-row:2;display:grid;grid-template-rows:repeat(var(--n,10),var(--cell));justify-items:end}
.pk-rowclue{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;height:var(--cell);padding-right:calc(var(--cell) * .16);gap:calc(var(--cell) * .10)}
.pk-rowclue.done{opacity:.30}
.pk-rowclue .pk-cn{min-width:calc(var(--cell) * .46);height:var(--cell);display:flex;align-items:center;justify-content:center}
.pk-cn{font-weight:800;font-size:calc(var(--cell) * .5);color:var(--cink);font-variant-numeric:tabular-nums}
.pk-cn.zero{opacity:.4}

/* ---- Raster ---- */
.pk-grid{grid-column:2;grid-row:2;display:grid;
  grid-template-columns:repeat(var(--n,10),var(--cell));
  grid-template-rows:repeat(var(--n,10),var(--cell));
  touch-action:none;outline:none;position:relative}
.pk-cell{width:var(--cell);height:var(--cell);position:relative;cursor:pointer;
  border-right:1px solid var(--gl);border-bottom:1px solid var(--gl);background:transparent}
.pk-cell.el{border-left:2px solid var(--gl-strong)}   /* linke Außenkante */
.pk-cell.et{border-top:2px solid var(--gl-strong)}    /* obere Außenkante */
.pk-cell.sr{border-right:2px solid var(--gl-strong)}  /* jede 5. Spalte / rechte Kante */
.pk-cell.sb{border-bottom:2px solid var(--gl-strong)} /* jede 5. Zeile / untere Kante */
.pk-cell.f{background:var(--cink)}                     /* gefüllt (monochrom) */
.pk-cell.x::after{content:"✕";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--xcol);font-size:calc(var(--cell) * .6);font-weight:700;line-height:1}
@media (hover:hover){ .pk-cell:hover{box-shadow:inset 0 0 0 2px rgba(216,173,90,.5)} }
.pk-cell.cur{box-shadow:inset 0 0 0 2px var(--gold),inset 0 0 0 3px rgba(0,0,0,.25);z-index:2}
/* Enthüllung: gefüllte Zellen bekommen die Motivfarbe (inline gesetzt) */
.pk-grid.rev .pk-cell.f{transition:background-color .55s ease}
.pk-grid.solvedflash{animation:solvedflash .5s ease}
@keyframes solvedflash{0%{filter:brightness(1.5)}100%{filter:brightness(1)}}

/* ---- Enthüllungs-Banner ---- */
.pk-reveal{width:100%;max-width:400px;display:flex;align-items:center;gap:10px;
  background:linear-gradient(180deg,#2f7a3e,#1d5a2b);border:1px solid #3c9a4e;border-radius:12px;
  padding:9px 12px;box-shadow:0 3px 12px rgba(0,0,0,.4);animation:revealin .35s ease}
@keyframes revealin{0%{transform:translateY(8px);opacity:0}100%{transform:translateY(0);opacity:1}}
.pk-reveal-badge{width:34px;height:34px;flex:0 0 34px;border-radius:50%;background:rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;font-size:20px;color:#eafff0}
.pk-reveal-txt{flex:1 1 auto;min-width:0}
.pk-reveal-title{font-size:17px;font-weight:800;color:#fff;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-reveal-cat{font-size:11.5px;color:#d3f0d8;text-transform:capitalize;margin-top:1px}
.pk-reveal .pk-btn{flex:0 0 auto}

/* ---- Werkzeug-Umschalter (Füllen / Kreuz / Löschen) ---- */
.pk-tools{width:100%;max-width:400px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pk-tool{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border:1.5px solid var(--line);background:linear-gradient(180deg,rgba(60,42,26,.8),rgba(30,20,12,.85));
  color:var(--creme);border-radius:12px;padding:9px 4px;font:700 13px system-ui;cursor:pointer;min-height:56px;user-select:none}
.pk-tool:hover{border-color:var(--gold)}
.pk-tool.active{border-color:var(--gold);background:rgba(216,173,90,.16);color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.pk-tglyph{width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:17px;line-height:1}
.pk-tg-fill{background:var(--cink);border-radius:4px;border:1px solid rgba(255,255,255,.25)}
.pk-tool.active .pk-tg-fill{background:var(--gold)}
.pk-tg-x{color:var(--xcol)}
.pk-tool.active .pk-tg-x{color:var(--gold)}

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

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

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

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