/* Nachtschicht-Solitär — Klondike. Eigene Gestaltung, warme El-Camino-Palette,
   dunkler Holz-/Thekentisch. Responsive Karten (Breite einmal via --cw gesetzt). */
:root{
  --tisch1:#2a1a10; --tisch2:#1c110a; --filz:#3a2418;
  --creme:#f4ecd8; --creme2:#e9dcbf; --ink:#2b2118;
  --rot:#b02a2a; --schwarz:#20232b; --gold:#d8ad5a; --bordeaux:#6e1f2a; --bordeaux2:#4a141d;
  --line:#5a3d28; --cream-dim:#c9b98f;
  --cw:42px; --ch:60px; --gap:6px;
  --down:0.19; --upo:0.30;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* KRITISCH: das HTML-Attribut `hidden` MUSS verstecken. Klassenregeln wie `.sol-ov{display:flex}`
   oder `.sol-board{display:flex}` haben dieselbe Spezifitaet wie das UA-`[hidden]{display:none}`
   und gewinnen (Author-Origin) -> sonst sind ALLE Overlays gleichzeitig sichtbar (zuletzt im DOM =
   „Keine Zuege mehr" liegt oben) und `hidden=true` blendet nichts aus. Diese Regel erzwingt es. */
[hidden]{display:none!important}
html,body{margin:0;height:100%}
body{
  background:radial-gradient(120% 90% at 50% -10%,var(--tisch1),var(--tisch2) 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);
}
.sol-app{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.sol-shell{flex:1;display:flex;flex-direction:column;max-width:760px;width:100%;margin:0 auto;padding:6px 8px 14px;position:relative}

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

/* Brett */
.sol-board{display:flex;flex-direction:column;gap:8px}
.sol-toprow{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--gap);align-items:start}
.sol-gap{}
.sol-tableau{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--gap);align-items:start}
.sol-pile{position:relative;width:100%;height:var(--ch);border-radius:calc(var(--cw)*0.11);}
.sol-toprow .sol-pile{border:1.5px dashed rgba(216,173,90,.35);background:rgba(0,0,0,.18)}
.sol-stock{cursor:pointer}
.sol-fnd{border-color:rgba(216,173,90,.5)!important}
.sol-fnd::after{content:attr(data-sym);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:calc(var(--cw)*0.5);color:rgba(216,173,90,.30)}
.sol-tabcol{position:relative;width:100%;min-height:var(--ch)}
.sol-tabcol .colhit{position:absolute;inset:0;border-radius:calc(var(--cw)*0.11)}

/* Karten */
.card{position:absolute;left:0;top:0;width:100%;height:var(--ch);border-radius:calc(var(--cw)*0.11);
  border:1px solid #00000030;user-select:none;-webkit-user-select:none;overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.35);will-change:transform}
.card.face{background:linear-gradient(160deg,var(--creme),var(--creme2))}
.card.back{background:
  repeating-linear-gradient(45deg,var(--bordeaux) 0 6px,var(--bordeaux2) 6px 12px);
  border:1px solid #2c0d13}
.card.back::after{content:"";position:absolute;inset:14%;border:1.5px solid var(--gold);border-radius:calc(var(--cw)*0.09);opacity:.7}
.card.back .mono{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--gold);
  font-size:calc(var(--cw)*0.42);font-weight:800;opacity:.85}
.card .corner{position:absolute;top:3%;left:6%;line-height:1;text-align:center;font-weight:800}
.card .corner .r{font-size:calc(var(--cw)*0.40)}
.card .corner .s{font-size:calc(var(--cw)*0.34);display:block;margin-top:-2px}
.card .pip{position:absolute;right:8%;bottom:5%;font-size:calc(var(--cw)*0.62);line-height:1;opacity:.9}
.card.red{color:var(--rot)}
.card.black{color:var(--schwarz)}
.card.sel{outline:3px solid var(--gold);outline-offset:-1px;box-shadow:0 0 0 2px rgba(216,173,90,.4),0 3px 8px rgba(0,0,0,.5)}
.card.kbd{outline:3px solid #6cc0ff;outline-offset:-1px}
.card.drag{opacity:.35}
.card.hintpulse{animation:hintp 1.1s ease 2}
@keyframes hintp{0%,100%{box-shadow:0 1px 2px rgba(0,0,0,.35)}50%{box-shadow:0 0 0 3px var(--gold),0 2px 8px rgba(0,0,0,.5)}}
.pile-target{outline:3px dashed var(--gold);outline-offset:-2px}
#ghost{position:fixed;pointer-events:none;z-index:60;opacity:.92;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
#ghost .card{position:relative;margin-bottom:calc(var(--ch)*-0.72)}

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

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

.sol-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{--gap:9px} .sol-brand{font-size:18px} }