/* assets/css/slf.css  -- v2025-09-26-8 */

/* ===================== Basis ===================== */
:root{
  --bg:#0b0f14;
  --ink:#e8eef7;
  --line:#2a3444;
  --panel:#0e1520;
  --panel-2:#0b1220;
  --accent:#1f6feb;
  --danger:#c1121f;
  --muted:#9fb3c8;
}
*{ box-sizing:border-box; }
html,body{ height:100%; overscroll-behavior:none; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.45 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  position:fixed; width:100%;
}

/* ===================== Topbar & Tabs ===================== */
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:10;
  display:flex; gap:10px; align-items:center;
  background:var(--bg); padding:10px; border-bottom:1px solid #17202a;
}
.tabs{ display:flex; gap:10px; flex-wrap:wrap; }
.tabs .tab{
  display:inline-block; text-decoration:none; cursor:pointer;
  background:#0f1620; color:var(--ink);
  border:1px solid #243247; border-radius:8px; padding:6px 10px;
}
.tabs .tab.active{ background:#141c27; }

/* ===================== Main/Views ===================== */
main{ padding-top:56px; height:100vh; overflow:hidden; }
.view{ display:none; padding:16px; height:calc(100vh - 56px); overflow:auto; }
.view.active{ display:block; }

.card{ border:1px solid #17202a; border-radius:12px; background:var(--panel); padding:12px; }
.row{ display:flex; gap:8px; align-items:center; }
.label{ opacity:.9; }

/* ===================== Stadt–Land–Fluss ===================== */
table.slf{ width:100%; border-collapse:collapse; margin-top:10px; }
table.slf thead th{ position:sticky; top:0; background:var(--bg); z-index:1; }
table.slf th, table.slf td{ border:1px solid var(--line); padding:6px; }
table.slf td{ position:relative; }

/* „Milchglas" für verdeckte Felder (Host & Tafel) */
.blurred, .concealed{ filter: blur(4px); opacity:.85; user-select:none; }

/* Score-Badges */
table.slf { table-layout: fixed; width: 100%; }
table.slf th, table.slf td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.slf td { position: relative; padding-right: 22px; }
table.slf td sup.pts { position:absolute; right:4px; top:4px; color:#ffec99; font-weight:700; pointer-events:none; }

.slf th.revealed{ color:#9ae6b4; }
.slf th.locked{ opacity:.45; pointer-events:none; }
.slf td.invalid { text-decoration: line-through; opacity:.6; }

/* QR: Canvas oder dynamische Box – gleicher Look */
canvas#qrCanvas{
  width:128px; height:128px; display:block;
  border-radius:10px; background:var(--panel-2);
  border:1px solid #243247; box-shadow: 0 0 0 1px #22324a inset;
}
#qrBox{ width:128px; height:128px; border-radius:10px; background:var(--panel-2); border:1px solid #243247; display:grid; place-items:center; }
#qrBox canvas, #qrBox img, #qrBox svg{ width:100%; height:100%; }

/* Drehrad/Overlay */
#slfSpinner{ position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.45); z-index: 9999; backdrop-filter: blur(1px); }
#slfSpinner.show{ display: flex; }
#slfSpinner .wheel{
  min-width: 240px; min-height: 240px; border-radius: 16px; padding: 24px 28px;
  background: var(--panel); border: 1px solid #243247; box-shadow: 0 10px 30px rgba(0,0,0,.35);
  display: grid; place-items: center; gap: 6px;
}
#slfSpinner .letter{ font: 96px/1.0 ui-rounded, system-ui, sans-serif; color:var(--ink); }
#slfSpinner .hint{ font:14px/1.2 system-ui; color:var(--muted); opacity:.9 }
.slf-locked * { cursor: not-allowed !important; }
.slf-locked input, .slf-locked button { pointer-events: none; opacity: .7; }

/* ===================== Join ===================== */
.join-wrap{ max-width:920px; margin:0 auto; }
.join-title{ text-align:center; margin:4px 0 10px; }
.join-letter{ font:700 64px/1 system-ui; text-align:center; margin:6px 0 10px; }
.join-grid{ display:grid; grid-template-columns:140px 1fr; gap:8px 10px; }
.join-grid label{ opacity:.9; }
.join-grid input{
  padding:10px 12px; border-radius:10px;
  border:1px solid var(--line);
  background:#0b1220; color:#e6edf3;
}
.join-actions{ display:flex; gap:10px; justify-content:space-between; margin-top:14px; }
.btn-stop{ flex:1; background:var(--danger); color:#fff; border:none; border-radius:12px; padding:14px 16px; font-weight:700; font-size:18px; cursor:pointer; }
.btn-save{ background:var(--accent); color:#fff; border:none; border-radius:12px; padding:14px 16px; font-weight:600; cursor:pointer; }

/* History (stets scrollbar – auch quer) */
.join-stats{
  margin-top:18px; border:1px solid #17202a; border-radius:10px; background:#0e1520;
  padding:10px; overflow-x:auto;
}
.join-stats h4{ margin:0 0 8px; font-size:13px; color:#cfe3ff; font-weight:600; }
.join-stats table{ width:100%; border-collapse:collapse; font-size:12px; min-width: 760px; }
.join-stats th, .join-stats td{ border:1px solid #1f2a3a; padding:4px 6px; text-align:left; }
.join-stats .sum{ text-align:right; font-weight:700; }

/* Home Bild zentrieren (unverändert) */
#home .card { display:flex; justify-content:center; align-items:center; min-height:80vh; }
#home .card img { max-width:90%; max-height:70vh; height:auto; width:auto; object-fit:contain; }
/* Join: History immer scrollbar, auch im Querformat */
#clientStats { overflow-x: auto; }
#clientStats table { min-width: 680px; } /* genug Breite für alle Spalten */