/* ============================================================================
   Spielehalle — gemeinsames Gestaltungssystem (alle Spiele nutzen diese Datei)
   Grundsatz: warm, klar, freundlich-cartoonig. Mobile-first, Touch-tauglich.
   Jedes Spiel setzt nur seine eigenen Akzentfarben ueber --akzent* neu.
   ========================================================================= */

:root{
  --bg-1:#16202f; --bg-2:#101724; --flaeche:rgba(255,255,255,.055);
  --flaeche-2:rgba(255,255,255,.09); --rand:rgba(255,255,255,.11);
  --text:#e9eef7; --text-leise:#a9b7cc; --text-still:#7c8ba3;
  --akzent:#4f8ae8; --akzent-2:#3f6bd8; --gut:#46be78; --warn:#e8a33d;
  --schlecht:#dc5050; --gold:#f2c14e;
  --r-s:10px; --r-m:14px; --r-l:20px;
  --schatten:0 10px 34px rgba(0,0,0,.34);
  --kopf-h:56px;
  font-size:16px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:radial-gradient(1100px 760px at 18% -12%,#24405f 0%,var(--bg-1) 55%,var(--bg-2) 100%);
  background-attachment:fixed;
  color:var(--text); min-height:100vh; min-height:100dvh;
  overscroll-behavior-y:contain;
}
h1,h2,h3{margin:0 0 .4em;line-height:1.25}
p{margin:0 0 .8em;line-height:1.5}
a{color:#9fc2f5}

/* ---------- Kopfleiste ---------------------------------------------------- */
.kopfleiste{
  position:sticky;top:0;z-index:40;height:var(--kopf-h);
  display:flex;align-items:center;gap:10px;padding:0 12px;
  background:rgba(14,20,32,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rand);
}
.kopfleiste .zurueck{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:12px;flex:0 0 auto;
  background:var(--flaeche);border:1px solid var(--rand);
  color:var(--text);text-decoration:none;font-size:1.1rem;
}
.kopfleiste .titel{font-weight:700;font-size:1.02rem;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;flex:0 1 auto}
.kopfleiste .werte{margin-left:auto;display:flex;gap:8px;align-items:center;flex:0 0 auto}

/* Wertanzeige (Geld, Level, Ruf …) */
.wert{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 11px;border-radius:999px;font-size:.9rem;font-weight:600;
  background:var(--flaeche);border:1px solid var(--rand);white-space:nowrap;
}
.wert .em{font-size:1rem;line-height:1}
.wert.geld{color:#ffe9a8;border-color:rgba(242,193,78,.34);background:rgba(242,193,78,.10)}
.wert.stufe{color:#cfe0ff;border-color:rgba(90,150,240,.32);background:rgba(90,150,240,.10)}
.wert.blitz{animation:pulsWert .6s ease}
@keyframes pulsWert{0%{transform:scale(1)}40%{transform:scale(1.16)}100%{transform:scale(1)}}

/* XP-Balken in der Kopfleiste */
.xpbalken{height:4px;background:rgba(255,255,255,.10);position:sticky;top:var(--kopf-h);z-index:39}
.xpbalken i{display:block;height:100%;background:linear-gradient(90deg,var(--akzent),var(--gut));
  width:0;transition:width .45s ease}

/* ---------- Inhalt / Karten ----------------------------------------------- */
.inhalt{padding:14px 12px 96px;max-width:1180px;margin:0 auto}
.karte{
  background:var(--flaeche);border:1px solid var(--rand);border-radius:var(--r-l);
  padding:16px;box-shadow:var(--schatten);margin-bottom:14px;
}
.karte > h2{font-size:1.05rem;display:flex;align-items:center;gap:8px}
.karte .unter{font-size:.82rem;color:var(--text-leise);margin:-.2em 0 .9em}
.raster{display:grid;gap:12px}
.raster.a2{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.raster.a3{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.raster.a4{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}

/* ---------- Knöpfe -------------------------------------------------------- */
.knopf{
  appearance:none;border:1px solid var(--rand);border-radius:var(--r-m);
  background:var(--flaeche-2);color:var(--text);
  padding:11px 15px;font-size:.95rem;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  transition:transform .08s ease,filter .15s ease;min-height:44px;
}
.knopf:active{transform:scale(.97)}
.knopf:disabled{opacity:.42;cursor:default}
.knopf.haupt{background:linear-gradient(135deg,var(--akzent),var(--akzent-2));
  border-color:transparent;color:#fff}
.knopf.gut{background:linear-gradient(135deg,#4cc684,#33a367);border-color:transparent;color:#04220f}
.knopf.warn{background:linear-gradient(135deg,#f0b455,#dd9327);border-color:transparent;color:#2c1a02}
.knopf.weg{background:rgba(220,80,80,.16);border-color:rgba(220,80,80,.4);color:#ffc9c9}
.knopf.klein{padding:7px 11px;font-size:.82rem;min-height:36px;border-radius:var(--r-s)}
.knopf.voll{width:100%}

/* ---------- Reiter -------------------------------------------------------- */
.reiter{
  display:flex;gap:6px;overflow-x:auto;padding:4px 0 10px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.reiter::-webkit-scrollbar{display:none}
.reiter button{
  flex:0 0 auto;padding:9px 15px;border-radius:999px;cursor:pointer;
  border:1px solid var(--rand);background:var(--flaeche);color:var(--text-leise);
  font-size:.9rem;font-weight:600;min-height:40px;
}
.reiter button.an{background:var(--akzent);border-color:var(--akzent);color:#fff}

/* ---------- Hinweise ------------------------------------------------------ */
.hinweis{padding:11px 13px;border-radius:var(--r-m);font-size:.9rem;line-height:1.45;margin:10px 0}
.hinweis.info{background:rgba(90,150,240,.13);border:1px solid rgba(90,150,240,.3);color:#cfe0ff}
.hinweis.gut{background:rgba(70,190,120,.13);border:1px solid rgba(70,190,120,.32);color:#bdf0d2}
.hinweis.warn{background:rgba(232,163,61,.13);border:1px solid rgba(232,163,61,.32);color:#ffe0b3}
.hinweis.fehler{background:rgba(220,80,80,.14);border:1px solid rgba(220,80,80,.34);color:#ffc9c9}

/* ---------- Toasts -------------------------------------------------------- */
#toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:20px;z-index:80;
  display:flex;flex-direction:column;gap:8px;align-items:center;
  pointer-events:none;width:min(94vw,460px)}
.toast{
  background:rgba(20,28,42,.96);border:1px solid var(--rand);border-radius:var(--r-m);
  padding:11px 15px;font-size:.92rem;box-shadow:var(--schatten);
  animation:toastRein .22s ease;max-width:100%;
}
.toast.gut{border-color:rgba(70,190,120,.5);background:rgba(20,50,34,.96);color:#c8f5dc}
.toast.fehler{border-color:rgba(220,80,80,.5);background:rgba(56,22,22,.96);color:#ffcfcf}
.toast.weg{animation:toastRaus .3s ease forwards}
@keyframes toastRein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes toastRaus{to{opacity:0;transform:translateY(10px)}}

/* ---------- Dialog -------------------------------------------------------- */
.dlg-hg{position:fixed;inset:0;background:rgba(6,10,18,.68);z-index:90;
  display:flex;align-items:center;justify-content:center;padding:16px;
  animation:toastRein .18s ease;backdrop-filter:blur(3px)}
.dlg{
  background:linear-gradient(180deg,#1b2637,#151d2b);border:1px solid var(--rand);
  border-radius:var(--r-l);padding:20px;width:min(96vw,520px);
  max-height:88vh;overflow:auto;box-shadow:0 24px 70px rgba(0,0,0,.55)
}
.dlg h3{font-size:1.12rem;margin-bottom:.6em}
.dlg .knopfreihe{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.dlg .knopfreihe .knopf{flex:1 1 130px}

/* ---------- Fortschrittsbalken -------------------------------------------- */
.balken{height:7px;border-radius:99px;background:rgba(0,0,0,.32);overflow:hidden}
.balken i{display:block;height:100%;background:linear-gradient(90deg,var(--gut),#8fe0ab);
  border-radius:99px;transition:width .5s linear}
.balken.reif i{background:linear-gradient(90deg,var(--gold),#ffe9a8)}

/* ---------- Tabellen / Listen --------------------------------------------- */
.liste{display:flex;flex-direction:column;gap:8px}
.zeile{
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  background:var(--flaeche);border:1px solid var(--rand);border-radius:var(--r-m);
}
.zeile .haupt{flex:1;min-width:0}
.zeile .haupt b{display:block;font-size:.95rem}
.zeile .haupt span{font-size:.78rem;color:var(--text-leise)}
.zeile .rechts{text-align:right;font-size:.9rem;white-space:nowrap}

table.tab{width:100%;border-collapse:collapse;font-size:.88rem}
table.tab th{text-align:left;font-weight:600;color:var(--text-leise);
  font-size:.76rem;text-transform:uppercase;letter-spacing:.4px;padding:6px 8px}
table.tab td{padding:8px;border-top:1px solid rgba(255,255,255,.07)}
table.tab td.z{text-align:right;font-variant-numeric:tabular-nums}

.leer{padding:22px 12px;text-align:center;color:var(--text-still);font-size:.9rem}

/* ---------- Kleinkram ----------------------------------------------------- */
.plakette{display:inline-block;padding:2px 8px;border-radius:999px;font-size:.72rem;
  font-weight:700;background:var(--flaeche-2);border:1px solid var(--rand)}
.plakette.gut{background:rgba(70,190,120,.16);border-color:rgba(70,190,120,.4);color:#bdf0d2}
.plakette.warn{background:rgba(232,163,61,.16);border-color:rgba(232,163,61,.4);color:#ffe0b3}
.plakette.weg{background:rgba(220,80,80,.16);border-color:rgba(220,80,80,.4);color:#ffc9c9}
.zahl{font-variant-numeric:tabular-nums}
.leise{color:var(--text-leise)}
.still{color:var(--text-still)}
.mini{font-size:.78rem}
.mitte{text-align:center}
.trenner{height:1px;background:var(--rand);margin:14px 0;border:0}

/* Spielgeld immer erkennbar kennzeichnen (Kap. „Waehrung“) */
.spielgeld::after{content:"🎮";font-size:.72em;margin-left:3px;opacity:.75}

/* ---------- Spielstand-Plaetze (halle.js baut den Knopf selbst ein) ------ */
.kopfleiste .slotknopf{
  display:flex;align-items:center;justify-content:center;gap:2px;
  height:38px;min-width:44px;padding:0 9px;border-radius:12px;flex:0 0 auto;
  background:var(--flaeche);border:1px solid var(--rand);color:var(--text);
  font-size:1rem;cursor:pointer;line-height:1;
}
.kopfleiste .slotknopf .slotwort{font-size:.78rem;font-weight:600;color:var(--text-leise)}
.kopfleiste .slotknopf .slotnr{
  font-size:.82rem;font-weight:800;color:var(--text);
  font-variant-numeric:tabular-nums;
  background:rgba(255,255,255,.10);border-radius:8px;padding:1px 6px;
}
@media (max-width:560px){ .kopfleiste .slotknopf .slotwort{display:none} }
.kopfleiste .slotknopf:active{transform:scale(.96)}
/* ---------- Nachricht an Marco (halle.js baut den Knopf selbst ein) ------ */
.kopfleiste .postknopf{
  position:relative;display:flex;align-items:center;justify-content:center;
  height:38px;min-width:44px;padding:0 10px;border-radius:12px;flex:0 0 auto;
  background:var(--flaeche);border:1px solid var(--rand);color:var(--text);
  font-size:1rem;cursor:pointer;line-height:1;
}
.kopfleiste .postknopf:active{transform:scale(.96)}
.kopfleiste .postknopf.hatpost{border-color:rgba(220,80,80,.55)}
/* Roter Kreis mit der ANZAHL wartender Antworten (nicht nur ein Punkt —
   Wunsch Marco, 28.07.2026: die Spieler sollen sehen, dass da etwas ist). */
.kopfleiste .postknopf .postpunkt{
  position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;
  border-radius:99px;background:#e0554f;color:#fff;
  font-size:.68rem;font-weight:800;line-height:17px;text-align:center;
  font-variant-numeric:tabular-nums;
  border:2px solid var(--bg-1);box-shadow:0 0 8px rgba(224,85,79,.75);
  animation:postWink 1.6s ease-in-out 3;
}
@keyframes postWink{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.18)}
}
.postdlg .postarten{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.postdlg .postart{
  flex:1 1 92px;padding:8px 6px;border-radius:var(--r-s);cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid var(--rand);color:var(--text);
  font-size:.86rem;font-weight:600;min-height:38px;
}
.postdlg .postart.aktiv{background:linear-gradient(135deg,var(--akzent),var(--akzent-2));
  border-color:transparent;color:#fff}
.postdlg .posttextfeld{
  width:100%;box-sizing:border-box;padding:10px 12px;border-radius:var(--r-s);
  background:rgba(0,0,0,.28);border:1px solid var(--rand);color:var(--text);
  font:inherit;font-size:.95rem;line-height:1.4;resize:vertical;min-height:92px;
}
.postdlg .posttextfeld:focus{outline:none;border-color:var(--akzent)}
.postdlg .postmeta{margin-top:6px;line-height:1.35}
.postdlg .posttrenner{height:1px;background:var(--rand);margin:14px 0 10px;border:0}
.postdlg .postliste{max-height:38vh;overflow:auto;margin-top:6px;
  display:flex;flex-direction:column;gap:8px}
.postdlg .postzeile{border-radius:var(--r-s);padding:8px 10px;
  background:rgba(255,255,255,.05);border:1px solid var(--rand)}
.postdlg .postzeile.vonmarco{background:rgba(90,150,255,.13);
  border-color:rgba(120,170,255,.42)}
.postdlg .postkopf{font-size:.74rem;opacity:.75;margin-bottom:3px}
.postdlg .postkopf b{opacity:1}
.postdlg .postneu{font-style:normal;font-size:.68rem;font-weight:700;
  background:#e0554f;color:#fff;border-radius:99px;padding:1px 7px;margin-left:5px}
.postdlg .posttext{font-size:.9rem;line-height:1.45;white-space:normal;
  overflow-wrap:anywhere}

/* ---------- Abgleich-Anzeige (offline / anderes Geraet) ------------------
   Nur sichtbar, wenn etwas nicht stimmt — im Normalfall ist die Leiste leer. */
.kopfleiste .syncchip{
  display:flex;align-items:center;gap:5px;flex:0 0 auto;
  height:32px;padding:0 10px;border-radius:99px;cursor:pointer;
  font-size:.76rem;font-weight:600;line-height:1;
  background:rgba(232,163,61,.16);border:1px solid rgba(232,163,61,.5);color:#ffdca8;
}
/* Normalzustand: dezent gruen — sichtbar, aber nicht aufdringlich */
.kopfleiste .syncchip.online{
  background:rgba(70,190,120,.13);border-color:rgba(70,190,120,.42);color:#9fe6bd;
}
.kopfleiste .syncchip.laeuft{
  background:rgba(79,138,232,.15);border-color:rgba(79,138,232,.45);color:#bcd6ff;
}
.kopfleiste .syncchip.laeuft::first-letter{ display:inline-block }
.kopfleiste .syncchip.konflikt{
  background:rgba(220,80,80,.18);border-color:rgba(220,80,80,.55);color:#ffc9c9;
  animation:syncPuls 2s ease-in-out infinite;
}
@keyframes syncPuls{ 0%,100%{opacity:1} 50%{opacity:.62} }
@media (max-width:560px){ .kopfleiste .syncchip span{display:none} }
/* Gegenueberstellung der beiden Staende in der Rueckfrage */
.syncwahl{display:flex;flex-direction:column;gap:2px;margin:8px 0;padding:9px 11px;
  border-radius:var(--r-s);background:rgba(255,255,255,.05);border:1px solid var(--rand)}
.syncwahl b{font-size:.8rem;opacity:.75;font-weight:600}
.syncwahl span{font-size:.95rem;font-weight:700}

/* Zweizeilige Auswahlknoepfe im Spielstand-Dialog */
.slotwahl{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  text-align:left;width:100%}
.slotwahl b{font-size:.94rem;line-height:1.2}
.slotwahl span{font-size:.75rem;opacity:.78;font-weight:500;line-height:1.3}
.dlg .knopfreihe .knopf:has(.slotwahl){flex:1 1 100%}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}