@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@600;700;800;900&display=swap");
@import url("/css/tokens.css");

/* =====================================================================
   NSL PWA — App-Styles
   Frost-Design-System (Whiteout-Survival-Stil) gemischt mit der
   bestehenden NSL-App: echte Icons, voller Funktionsfluss, Desktop-Layout.
   ===================================================================== */

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
/* Dokument komplett fixieren -> nur die inneren Bereiche scrollen, App wird nicht mitgezogen */
html, body { margin:0; position:fixed; inset:0; width:100%; height:100%; overflow:hidden;
  overscroll-behavior:none; background:#05101f; }
body {
  font-family:var(--font-body); color:var(--ink);
  background:
    radial-gradient(120% 80% at 50% -10%, var(--bg-top) 0%, var(--bg-mid) 45%, var(--bg-edge) 100%);
  background-attachment:fixed;
  overscroll-behavior:none;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img { -webkit-user-drag:none; user-select:none; }

/* App-Rahmen: starr (volle Höhe, kein Scrollen des Rahmens selbst) — Inhalt scrollt innen */
#app {
  height:100dvh; margin:0 auto; max-width:var(--maxw); position:relative;
  background:
    radial-gradient(120% 70% at 50% -5%, var(--bg-top) 0%, var(--bg-mid) 48%, var(--bg-edge) 100%);
  display:flex; flex-direction:column; isolation:isolate; overflow:hidden;
}
#app::before { /* eisiger Schein oben + sanfte Vignette unten */
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(95% 36% at 50% -4%, rgba(140,205,250,.30), transparent 62%),
    radial-gradient(120% 60% at 50% 112%, rgba(2,10,24,.55), transparent 60%);
}
#app > * { position:relative; z-index:1; }

/* ---------- Text-Hilfsklassen ---------- */
.t-out { font-family:var(--font-head); color:#fff; font-weight:800;
  -webkit-text-stroke:4px var(--ink); paint-order:stroke fill;
  text-shadow:0 2px 0 rgba(0,0,0,.28); letter-spacing:.2px; }
.t-out.thin { -webkit-text-stroke-width:3px; }
.muted { color:var(--ink-mute); font-weight:700; }
.gold  { color:var(--gold); font-weight:800; }
.t-hi  { color:var(--green-deep); font-weight:800; }
.t-warn{ color:var(--red); font-weight:800; }

/* ---------- App-Leiste (Kopf mit Zurück-Pfeil) ---------- */
.appbar {
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:14px;
  padding:calc(14px + env(safe-area-inset-top, 0px)) 16px 14px;
  background:linear-gradient(180deg, var(--appbar-1), var(--appbar-2));
  box-shadow:inset 0 -3px 0 var(--appbar-edge), 0 4px 10px rgba(0,0,0,.35);
}
.appbar__title { flex:1; font-family:var(--font-head); font-weight:800; color:#fff;
  font-size:24px; -webkit-text-stroke:3px var(--ink); paint-order:stroke fill; margin:0; }
.appbar__spacer { margin-left:auto; display:flex; gap:10px; }

/* Zurück-Pfeil (reine CSS-Form, wie im Spiel) */
.icon-back {
  width:48px; height:40px; border:none; cursor:pointer; padding:0;
  display:grid; place-items:center; background:transparent; transition:transform .07s ease;
}
.icon-back:active { transform:translateY(1px) scale(.96); }
.icon-back::before {
  content:""; width:31px; height:31px; display:block;
  background:linear-gradient(180deg,#dcf3ff 0%,#9bd4f8 44%,#5aaeec 100%);
  clip-path:polygon(0 50%,42% 12%,42% 32%,100% 32%,100% 68%,42% 68%,42% 88%);
  filter:
    drop-shadow(1.6px 0 0 #1c558c) drop-shadow(-1.6px 0 0 #1c558c)
    drop-shadow(0 1.6px 0 #1c558c) drop-shadow(0 -1.6px 0 #1c558c)
    drop-shadow(0 3px 2px rgba(0,0,0,.42));
}

/* Rundes Icon-Knöpfchen (Menü / Schließen / Info) */
.icon-btn {
  width:40px; height:40px; border-radius:11px; border:2px solid var(--blue-ring);
  background:linear-gradient(180deg,var(--blue-1),var(--blue-2));
  box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 3px 0 var(--blue-deep);
  color:#fff; font-size:18px; cursor:pointer; display:grid; place-items:center;
  font-family:var(--font-head); font-weight:800;
}
.icon-btn:active { transform:translateY(1px); }
.icon-btn svg { width:22px; height:22px; filter:drop-shadow(0 1px 1px rgba(0,0,0,.3)); }

/* ---------- Layout ---------- */
/* Inhalt scrollt innen, App-Rahmen bleibt starr */
.view { padding:16px 16px calc(32px + env(safe-area-inset-bottom, 0px)); flex:1; min-height:0;
  display:flex; flex-direction:column; gap:16px; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
/* Dashboard: Namecard fix, nur die Kacheln darunter scrollen */
.view.home { overflow:hidden; padding-bottom:0;
  padding-top:calc(26px + env(safe-area-inset-top, 0px)); }
.home-wrap { display:flex; flex-direction:column; flex:1; min-height:0; }
.home-fixed { flex:none; display:flex; flex-direction:column; gap:18px; padding-bottom:18px; }
.home-scroll { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  padding-bottom:calc(16px + env(safe-area-inset-bottom, 0px)); }
.center-screen { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:calc(24px + env(safe-area-inset-top, 0px)) 24px calc(24px + env(safe-area-inset-bottom, 0px)); }

/* ---------- Schnee-Panel (heller Eis-Container) ---------- */
.panel {
  position:relative; border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--panel-body-1),var(--panel-body-2));
  border:2px solid #fff; color:var(--ink);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.9),
    inset 0 -6px 14px rgba(86,131,170,.28),
    0 8px 18px rgba(0,0,0,.32);
  padding:18px 16px 16px;
}
.panel.dark { background:linear-gradient(180deg,#21456f,#173658); border-color:rgba(150,195,235,.4); color:var(--text-on-dark); }
.panel--plain { padding:14px 16px; }

/* Panel-Kopfzeile (blau, zentriert) */
.banner {
  margin:-18px -16px 12px; padding:11px 16px; border-radius:var(--r-lg) var(--r-lg) 0 0;
  background:linear-gradient(180deg,#6aa6da,#5390c8);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.5),inset 0 -3px 0 rgba(31,76,118,.5);
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-head); font-weight:800; color:#fff; font-size:18px;
  -webkit-text-stroke:3px var(--ink); paint-order:stroke fill; text-align:center;
}

/* ---------- Buttons (Glanz-Buttons) ---------- */
.btn {
  position:relative; width:100%;
  font-family:var(--font-head); font-weight:800; font-size:18px; color:#fff;
  border:none; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:.45em;
  padding:.7em 1.4em; border-radius:999px;
  -webkit-text-stroke:3.5px var(--ink); paint-order:stroke fill;
  text-shadow:0 2px 0 rgba(8,28,52,.35); background-repeat:no-repeat;
  transition:transform .07s ease, box-shadow .07s ease, filter .07s ease;
  user-select:none;
  /* Standard = Blau */
  background-image:
    radial-gradient(circle at 17% 24%, rgba(255,255,255,.68), rgba(255,255,255,0) 26%),
    linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.14) 38%, rgba(255,255,255,0) 56%),
    linear-gradient(180deg, #66bdf3 0%, #4aa4e9 48%, #3793df 100%);
  background-position:0 0, 50% 5%, 0 0;
  background-size:auto, calc(100% - 16px) 52%, auto;
  border:3px solid #d6eeff;
  box-shadow:inset 0 0 0 1.5px rgba(120,190,235,.55),
             inset 0 -6px 10px rgba(16,72,124,.4), 0 5px 9px rgba(0,0,0,.28);
}
.btn:active { transform:translateY(2px); filter:brightness(.97);
  box-shadow:inset 0 0 0 1.5px rgba(120,190,235,.5),inset 0 -3px 7px rgba(16,72,124,.36),0 3px 6px rgba(0,0,0,.24); }
.btn:hover { filter:brightness(1.04); }
.btn:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }

/* Orange = wichtige / abschließende Aktion (CTA) */
.btn.cta {
  background-image:
    radial-gradient(circle at 17% 24%, rgba(255,255,255,.62), rgba(255,255,255,0) 26%),
    linear-gradient(180deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.12) 38%, rgba(255,255,255,0) 56%),
    linear-gradient(180deg, #ffc163 0%, #f79836 48%, #ef7f1c 100%);
  border-color:#ffe1b0;
  box-shadow:inset 0 0 0 1.5px rgba(255,200,140,.55),
             inset 0 -6px 10px rgba(150,70,8,.4), 0 5px 9px rgba(0,0,0,.28);
}
.btn.cta:active { box-shadow:inset 0 0 0 1.5px rgba(255,200,140,.5),inset 0 -3px 7px rgba(150,70,8,.36),0 3px 6px rgba(0,0,0,.24); }

/* Grau = sekundär */
.btn.sec {
  background-image:
    radial-gradient(circle at 17% 24%, rgba(255,255,255,.55), rgba(255,255,255,0) 26%),
    linear-gradient(180deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,.1) 38%, rgba(255,255,255,0) 56%),
    linear-gradient(180deg, #b3c1d0 0%, #8a9cae 48%, #76899c 100%);
  border-color:#d7e0e9;
  box-shadow:inset 0 0 0 1.5px rgba(200,212,224,.55),
             inset 0 -6px 10px rgba(50,66,82,.36), 0 5px 9px rgba(0,0,0,.24);
}
.btn.sec:active { box-shadow:inset 0 0 0 1.5px rgba(200,212,224,.5),inset 0 -3px 7px rgba(50,66,82,.32),0 3px 6px rgba(0,0,0,.2); }

.btn:disabled { filter:grayscale(.5) brightness(.85); cursor:default; }

/* ---------- Inputs ---------- */
.field { text-align:left; }
.field label { display:block; font-family:var(--font-head); font-weight:700; margin:0 0 6px 4px; }
.field.on-dark label { color:var(--text-on-dark); }
.input {
  width:100%; padding:14px 16px; border-radius:14px; border:2px solid #2a5c8c;
  background:rgba(255,255,255,.96); color:var(--ink); font-size:16px;
  font-family:var(--font-body); font-weight:700; box-shadow:inset 0 2px 6px rgba(0,0,0,.15);
}
.input:focus { outline:none; border-color:var(--blue-2); }

/* ---------- Login ---------- */
.brand { width:128px; height:128px; border-radius:28px; margin-bottom:6px;
  box-shadow:0 0 40px rgba(120,205,250,.35); }
.brand-sub { font-family:var(--font-head); font-weight:800; line-height:1.18; text-align:center;
  font-size:clamp(24px,7vw,32px); color:#dcebfb; letter-spacing:.3px; max-width:300px;
  text-shadow:0 2px 0 rgba(0,0,0,.35); margin:20px 0 26px; }
.login-card { width:100%; max-width:380px; display:flex; flex-direction:column; gap:14px; }
.err { color:#fff; background:rgba(236,58,44,.92); border:2px solid rgba(255,255,255,.85);
  border-radius:12px; padding:10px 12px; font-family:var(--font-body); font-weight:800;
  text-shadow:0 1px 2px rgba(120,10,4,.55); display:none; }
.err.show { display:block; }

/* ---------- Dashboard: Namecard ---------- */
.home-logo {
  width:58px; height:58px; border-radius:16px; flex:none;
  background:linear-gradient(180deg,#6fb4e6,#2c6ea8); border:2px solid #cfeaff;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.7),inset 0 -8px 14px rgba(11,40,72,.55),0 4px 8px rgba(0,0,0,.35);
  object-fit:cover; display:grid; place-items:center;
  font-family:var(--font-head); font-weight:800; font-size:19px; color:#fff;
  -webkit-text-stroke:2.5px var(--ink); paint-order:stroke fill;
}
.home-hello { font-family:var(--font-body); font-weight:800; color:var(--ink-soft); font-size:13px; }
.home-name { font-family:var(--font-head); font-weight:800; color:var(--ink); font-size:23px; line-height:1;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* Allianz + Server direkt in der Profilkarte */
.card-stats { display:flex; gap:8px; margin-top:14px; padding-top:13px;
  border-top:1px solid rgba(22,56,93,.16); }
.cstat { flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  background:rgba(255,255,255,.5); border:1px solid rgba(255,255,255,.7);
  border-radius:12px; padding:9px 6px; font-weight:800; font-size:13px; color:var(--ink); }
.cstat .k { color:var(--ink-soft); font-weight:800; }

/* ---------- Abzeichen ---------- */
.badge { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:10px;
  font-family:var(--font-head); font-weight:700; font-size:12px; color:#fff;
  background:linear-gradient(180deg,#ffb24a,#f3811d); border:1.5px solid #ffd596;
  -webkit-text-stroke:1.5px rgba(120,60,8,.6); paint-order:stroke fill; vertical-align:middle; }
.badge.dev { background:linear-gradient(180deg,#8a63d8,#6a3fb8); border-color:#c3a8ee;
  -webkit-text-stroke-color:rgba(40,20,70,.6); }

/* ---------- Home: Kachel-Raster ---------- */
.tiles { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }

.tile {
  position:relative; cursor:pointer; border:none; text-decoration:none;
  border-radius:var(--r-lg);
  background:linear-gradient(180deg,#4675a6 0%,#345f8e 45%,#274a72 100%);
  border:2px solid rgba(165,210,245,.65);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.4),inset 0 -10px 20px rgba(8,22,42,.55),0 8px 18px rgba(0,0,0,.45);
  padding:20px 12px 16px;
  display:flex; flex-direction:column; align-items:center; gap:11px;
  transition:transform .1s ease, filter .1s ease;
}
.tile::before { /* Glanz-Sheen oben */
  content:""; position:absolute; left:0; right:0; top:0; height:46%;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  background:linear-gradient(180deg,rgba(255,255,255,.22),transparent); pointer-events:none;
}
.tile:hover { filter:brightness(1.08); }
.tile:active { transform:translateY(2px) scale(.99); }
.tile:focus-visible { outline:none; }
.tile:focus-visible .slot { box-shadow:inset 0 3px 0 rgba(255,255,255,.7),0 0 0 3px var(--gold),0 4px 8px rgba(0,0,0,.35); }
.tile__label { font-family:var(--font-head); font-weight:800; color:#fff; font-size:16px; text-align:center;
  -webkit-text-stroke:3px var(--ink); paint-order:stroke fill; line-height:1.1; position:relative; }

/* Icon-Slot — glänzender Eis-Rahmen, hält ein PNG-Icon oder SVG */
.slot {
  width:96px; height:96px; border-radius:22px; position:relative;
  background:linear-gradient(180deg,#6fb4e6 0%,#3f8fcf 52%,#2c6ea8 100%);
  border:2px solid #cfeaff;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.7),inset 0 -9px 16px rgba(11,40,72,.6),0 4px 8px rgba(0,0,0,.35);
  display:grid; place-items:center; overflow:hidden;
}
.slot::after { /* Glanz-Highlight quer über den Slot */
  content:""; position:absolute; left:0; right:0; top:0; height:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.45),transparent);
  border-radius:22px 22px 50% 50%/22px 22px 22px 22px; pointer-events:none; z-index:2;
}
.slot::before { /* weiches Glühen hinter dem Icon */
  content:""; position:absolute; width:78%; height:78%; border-radius:50%;
  background:radial-gradient(circle at 50% 42%, rgba(190,230,255,.85), rgba(120,185,235,.25) 60%, transparent 72%);
  z-index:0;
}
.slot img, .slot svg { position:relative; z-index:1; width:74%; height:74%; object-fit:contain;
  filter:drop-shadow(0 3px 4px rgba(8,28,55,.5)); }
.slot.gear svg { width:62%; height:62%; }
/* Emblem (z.B. Allianz-Wappen mit eigenem Hintergrund) füllt den Slot randlos */
.slot.emblem img { width:100%; height:100%; object-fit:cover; filter:none; }

/* roter Hinweis-Punkt (oben links, wie im Spiel) */
.dot { position:absolute; top:-5px; left:-5px; width:16px; height:16px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ff8a80,var(--red));
  border:2px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.4); z-index:3; }

/* ---------- Allianz: Unter-Tabs ---------- */
.ally-tabs { padding:8px 12px 0; }
.tabs { display:flex; gap:6px; align-items:flex-end; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.tabs::-webkit-scrollbar { display:none; }
.tab { flex:1 0 auto; text-align:center; padding:11px 14px 13px; cursor:pointer;
  border-radius:14px 14px 0 0;
  background:linear-gradient(180deg,var(--tab-1),var(--tab-2));
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35);
  font-family:var(--font-head); font-weight:700; color:#eaf4ff; font-size:13px; line-height:1.15;
  -webkit-text-stroke:1px rgba(22,56,93,.7); paint-order:stroke fill; white-space:nowrap; }
.tab--active { background:var(--tab-active); color:var(--ink); -webkit-text-stroke:0; text-shadow:none;
  transform:translateY(-2px); padding-bottom:15px; box-shadow:0 -3px 8px rgba(0,0,0,.2); }

/* ---------- Allianz: Mitglieder-Übersicht ---------- */
.ally-summary { font-family:var(--font-head); font-weight:800; color:var(--ink-soft); font-size:14px; margin-bottom:12px; }
.rank-band + .rank-band { margin-top:18px; }
.rank-head { display:flex; align-items:center; gap:8px; margin-bottom:9px; cursor:pointer; user-select:none; }
.rank-arrow { font-size:12px; color:var(--ink-soft); width:13px; flex:none; }
.rank-code { font-family:var(--font-head); font-weight:800; color:#fff; font-size:13px; padding:2px 9px; border-radius:9px;
  -webkit-text-stroke:1.5px rgba(10,30,55,.35); paint-order:stroke fill; box-shadow:inset 0 1px 0 rgba(255,255,255,.45); }
.rank-R5 { background:linear-gradient(180deg,#ffd24d,#f0a81f); }
.rank-R4 { background:linear-gradient(180deg,#5aa6e6,#3f86cf); }
.rank-R3 { background:linear-gradient(180deg,#54cf3a,#2f9a1e); }
.rank-R2 { background:linear-gradient(180deg,#7aa0c0,#5c7e9e); }
.rank-R1 { background:linear-gradient(180deg,#9fb0c2,#73879c); }
.rank-label { font-family:var(--font-head); font-weight:700; color:var(--ink); font-size:15px; }
.rank-count { margin-left:auto; font-weight:800; color:var(--ink-soft); font-size:13px;
  background:rgba(255,255,255,.6); border-radius:10px; padding:1px 10px; }
.member-list { display:flex; flex-direction:column; gap:7px; }
.member { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:12px;
  background:rgba(255,255,255,.5); border:1px solid rgba(255,255,255,.7); }
.member.editable { cursor:pointer; }
.member.editable:active { background:rgba(255,255,255,.7); }
.member-av { width:34px; height:34px; border-radius:9px; object-fit:cover; flex:none;
  border:1.5px solid var(--blue-ring); background:#0c2240; }
.member-name { flex:1; min-width:0; font-family:var(--font-head); font-weight:700; color:var(--ink); font-size:15px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.member .badge { flex:none; }
.mgr-star { flex:none; color:var(--gold); font-size:15px; text-shadow:0 1px 1px rgba(0,0,0,.25); }
.edit-chev { flex:none; color:var(--ink-mute); font-family:var(--font-head); font-weight:800; font-size:22px;
  line-height:1; margin-left:2px; }

/* Verwaltungs-Toolbar */
.ally-toolbar { display:flex; gap:8px; margin-bottom:14px; }
.ally-toolbar .btn { flex:1; width:auto; }
.btn.sm { font-size:14px; padding:.55em 1em; }
.btn.danger {
  background-image:
    radial-gradient(circle at 17% 24%, rgba(255,255,255,.5), rgba(255,255,255,0) 26%),
    linear-gradient(180deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,.1) 38%, rgba(255,255,255,0) 56%),
    linear-gradient(180deg, #f0675a 0%, #e1402f 48%, #cf3122 100%);
  border-color:#ffc4bc;
  box-shadow:inset 0 0 0 1.5px rgba(255,180,170,.5), inset 0 -6px 10px rgba(120,20,10,.4), 0 5px 9px rgba(0,0,0,.24);
}

/* Select wie Input */
select.input { appearance:none; -webkit-appearance:none; background-image:
  linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position:calc(100% - 18px) 20px, calc(100% - 12px) 20px; background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat; padding-right:38px; }
textarea.input { resize:vertical; min-height:120px; line-height:1.4; }

/* Rang-Picker im Bearbeiten-Dialog */
.rp-label { display:block; font-family:var(--font-head); font-weight:700; margin:2px 0 6px 4px; color:var(--ink); }
.rank-pick { display:flex; gap:6px; }
.rp { flex:1; padding:12px 0; border-radius:12px; cursor:pointer; border:2px solid rgba(255,255,255,.55);
  font-family:var(--font-head); font-weight:800; font-size:15px; color:#fff;
  background:linear-gradient(180deg,#93a6ba,#6f8499);
  -webkit-text-stroke:1.5px rgba(18,40,62,.4); paint-order:stroke fill;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45); transition:transform .07s ease; }
.rp:active { transform:translateY(1px); }
.rp.on { box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 3px var(--gold), 0 3px 6px rgba(0,0,0,.25); }
.rp-R5.on { background:linear-gradient(180deg,#ffd24d,#f0a81f); }
.rp-R4.on { background:linear-gradient(180deg,#5aa6e6,#3f86cf); }
.rp-R3.on { background:linear-gradient(180deg,#54cf3a,#2f9a1e); }
.rp-R2.on { background:linear-gradient(180deg,#7aa0c0,#5c7e9e); }
.rp-R1.on { background:linear-gradient(180deg,#9fb0c2,#73879c); }
.rp-current { text-align:center; font-family:var(--font-head); font-weight:700; color:var(--ink-soft);
  font-size:13px; margin:9px 0 8px; }

/* ---------- Modal ---------- */
.modal-ov { position:fixed; inset:0; z-index:200; background:rgba(4,12,26,.62);
  display:flex; align-items:center; justify-content:center; padding:20px; }
.modal-card { width:100%; max-width:380px; max-height:88vh; overflow:auto; }

/* ---------- Toast ---------- */
.toast { position:fixed; left:50%; bottom:26px; transform:translate(-50%,16px); z-index:300;
  background:rgba(16,40,68,.96); color:#eaf4ff; border:1.5px solid rgba(150,200,240,.4);
  font-family:var(--font-head); font-weight:700; font-size:14px; padding:11px 18px; border-radius:14px;
  box-shadow:0 8px 20px rgba(0,0,0,.4); opacity:0; transition:opacity .25s, transform .25s; max-width:88vw; text-align:center; }
.toast.show { opacity:1; transform:translate(-50%,0); }

/* ================= Bär-Event ================= */
.bear-datebar { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.navbtn { width:42px; height:42px; flex:none; border-radius:12px; border:2px solid var(--blue-ring); cursor:pointer;
  background:linear-gradient(180deg,var(--blue-1),var(--blue-2)); color:#fff; font-size:24px;
  font-family:var(--font-head); font-weight:800; box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 3px 0 var(--blue-deep); }
.bear-date { text-align:center; }
.bear-date-main { font-family:var(--font-head); font-weight:800; font-size:18px; color:var(--ink); }
.bear-date-sub { font-weight:800; font-size:12px; color:var(--ink-soft); }

.bear-falle { font-family:var(--font-head); font-weight:800; font-size:17px; color:var(--ink); }
.nsl-tag { font-family:var(--font-head); font-weight:800; font-size:11px; color:#fff; padding:1px 7px; border-radius:8px;
  background:linear-gradient(180deg,#8a63d8,#6a3fb8); border:1.5px solid #c3a8ee;
  -webkit-text-stroke:1px rgba(40,20,70,.5); paint-order:stroke fill; }
.bear-time { font-weight:800; font-size:12.5px; color:var(--ink-soft); }
.bear-pill { font-family:var(--font-head); font-weight:800; font-size:11.5px; color:#fff; padding:3px 10px; border-radius:11px;
  -webkit-text-stroke:1px rgba(0,0,0,.22); paint-order:stroke fill; white-space:nowrap; }
.ph-upcoming { background:linear-gradient(180deg,#7aa0c0,#5c7e9e); }
.ph-running  { background:linear-gradient(180deg,#54cf3a,#2f9a1e); }
.ph-grace    { background:linear-gradient(180deg,#5aa6e6,#3f86cf); }
.ph-ended    { background:linear-gradient(180deg,#9fb0c2,#73879c); }
.ph-locked   { background:linear-gradient(180deg,#ef6a5a,#cf3122); }
.ph-open     { background:linear-gradient(180deg,#ffb24a,#f3811d); }
.bear-stats { display:flex; gap:14px; flex-wrap:wrap; font-weight:800; font-size:13px; color:var(--ink-soft); }
.bear-stats b { color:var(--ink); }
.bear-lockrow { display:flex; gap:8px; margin-top:12px; }
.bear-lockrow .btn { flex:1; width:auto; }

.bear-note { font-family:var(--font-head); font-weight:700; color:var(--text-on-dark); opacity:.82; font-size:13px; margin:0 2px 8px; }
.bear-empty { color:var(--ink-soft); font-weight:700; text-align:center; padding:14px; }

/* Segment-Pille (Falle 1/2/3) */
.segpill { display:flex; gap:8px; background:rgba(20,52,88,.45); padding:6px; border-radius:18px; margin-bottom:12px; }
.segpill button { flex:1; border:none; cursor:pointer; padding:11px 6px; border-radius:13px; color:#cfe2f4;
  font-family:var(--font-head); font-weight:700; font-size:14px; background:transparent; }
.segpill button.is-active { background:linear-gradient(180deg,var(--blue-1),var(--blue-2)); color:#fff;
  -webkit-text-stroke:1.5px var(--ink); paint-order:stroke fill; box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 3px 0 var(--blue-deep); }

/* Zuordnung: Häkchen-Box */
.member .assign-box { width:22px; height:22px; flex:none; border-radius:7px; border:2px solid var(--blue-2);
  background:#fff; display:grid; place-items:center; color:#fff; font-weight:900; font-size:14px; }
.member.assigned { background:rgba(84,207,58,.16); border-color:rgba(84,207,58,.5); }
.member.assigned .assign-box { background:linear-gradient(180deg,#69d24f,#3fa330); border-color:var(--green-deep); }

/* Aktivität */
.actrow { display:flex; align-items:center; gap:8px; padding:9px 4px; }
.actrow + .actrow { border-top:1px solid rgba(22,56,93,.12); }
.actrow .member-name { flex:1; }
.rrole { font-family:var(--font-head); font-weight:700; font-size:11px; color:#fff; background:var(--blue-2); padding:1px 6px; border-radius:7px; }
.actbtn { border:2px solid var(--grey-2); background:rgba(255,255,255,.6); color:var(--grey-deep); cursor:pointer;
  font-family:var(--font-head); font-weight:800; font-size:13px; padding:7px 12px; border-radius:11px; min-width:64px; }
.actbtn.on { background:linear-gradient(180deg,#69d24f,#3fa330); color:#fff; border-color:var(--green-deep);
  -webkit-text-stroke:1px rgba(20,70,10,.4); paint-order:stroke fill; }
.actbtn:disabled { opacity:.5; cursor:default; }

/* Regeleinhaltung */
.rule-row .member-name { flex:1; }
.rule-chip { font-family:var(--font-head); font-weight:800; font-size:12px; padding:3px 10px; border-radius:10px; color:#fff; flex:none; }
.rule-chip.ok { background:linear-gradient(180deg,#54cf3a,#2f9a1e); }
.rule-chip.bad { background:linear-gradient(180deg,#ef6a5a,#cf3122); }
.rule-chip.neutral { background:rgba(110,130,150,.55); }
.rule-pick { display:flex; gap:8px; }
.rpk { flex:1; border:2px solid transparent; cursor:pointer; padding:13px 8px; border-radius:13px; color:#fff;
  font-family:var(--font-head); font-weight:800; font-size:14px; -webkit-text-stroke:1px rgba(0,0,0,.2); paint-order:stroke fill; }
.rpk.ok { background:linear-gradient(180deg,#7ed957,#4caf32); }
.rpk.bad { background:linear-gradient(180deg,#ff7a64,#e8462f); }
.rpk:not(.on) { filter:grayscale(.55) brightness(.93); }
.rpk.on { box-shadow:0 0 0 3px var(--gold); }
.viol { padding:9px 0; }
.viol + .viol { border-top:1px solid rgba(22,56,93,.12); }
.viol-head { display:flex; align-items:center; gap:8px; cursor:pointer; color:var(--ink); font-family:var(--font-head); font-weight:700; font-size:14px; }
.viol-head input { width:18px; height:18px; flex:none; }
.viol-detail { margin-top:8px; }

/* Gesamtschaden-Zeile in der Fallen-Karte */
.bear-dmg { display:flex; align-items:center; gap:8px; margin-top:10px; }
.bear-dmg-label { font-family:var(--font-head); font-weight:700; color:var(--ink-soft); font-size:13px; flex:none; }
.bear-dmg .input { flex:1; }
.bear-dmg .btn { width:auto; flex:none; }

/* Platzvergabe — Diamant-Board (scrollbar, Reihen-Modell) */
.plz-board-wrap { padding:12px; }
.plz-legend { font-family:var(--font-head); font-weight:700; color:var(--ink-soft); font-size:12px; margin-bottom:8px; line-height:1.4; }
.plz-board { position:relative; width:100%; max-width:560px; aspect-ratio:1; margin:0 auto; overflow:hidden; touch-action:pan-y; }
.plz-zoom { position:absolute; inset:0; transform-origin:center center; will-change:transform; }
.plz-guide { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.plz-guide polygon { fill:none; stroke:rgba(22,56,93,.16); stroke-width:.4; }
.plz-trap { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:12%; aspect-ratio:1; z-index:1; }
.plz-trap img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 2px 4px rgba(0,0,0,.45)); }
.pcell { position:absolute; transform:translate(-50%,-50%); width:6%; aspect-ratio:1; border-radius:50%;
  cursor:pointer; padding:0; display:grid; place-items:center; }
.pcell.empty { background:rgba(255,255,255,.4); border:1.5px dashed rgba(22,56,93,.4); }
.pcell.empty.r1 { border-color:rgba(240,168,31,.75); background:rgba(255,225,160,.35); }
.pcell.filled { border:2px solid #fff; box-shadow:0 2px 5px rgba(0,0,0,.35); color:#fff; }
.pcell.filled span { font-family:var(--font-head); font-weight:800; font-size:9px; line-height:1; text-align:center;
  max-width:94%; overflow:hidden; -webkit-text-stroke:.5px rgba(0,0,0,.35); paint-order:stroke fill; }
.pcell.selected { outline:3px solid var(--gold); outline-offset:1px; z-index:3; }
.plz-pool-title { font-family:var(--font-head); font-weight:800; color:var(--ink-soft); font-size:13px; margin-bottom:8px; }
.plz-pool { display:flex; flex-wrap:wrap; gap:6px; }
.pchip { border:2px solid #fff; border-radius:13px; padding:6px 10px; color:#fff; cursor:pointer;
  font-family:var(--font-head); font-weight:800; font-size:12px; -webkit-text-stroke:.6px rgba(0,0,0,.3); paint-order:stroke fill; }
.pchip.selected { outline:3px solid var(--gold); outline-offset:1px; }
.plz-pooldrop { margin-top:10px; text-align:center; padding:11px; border:2px dashed var(--blue-2); border-radius:12px;
  color:var(--ink-soft); font-family:var(--font-head); font-weight:800; cursor:pointer; }

/* Aktivität: falsche Falle hervorheben + Verschieben */
.actrow.wrong { background:rgba(247,148,30,.16); border:1.5px solid rgba(243,129,29,.55); border-radius:12px; padding:8px 8px; }
.wrong-tag { font-family:var(--font-head); font-weight:800; font-size:11px; color:#fff; padding:1px 7px; border-radius:8px;
  background:linear-gradient(180deg,#ffb24a,#ef7f1c); -webkit-text-stroke:1px rgba(120,60,8,.5); paint-order:stroke fill; white-space:nowrap; }
.movebtn { flex:none; width:36px; height:36px; border-radius:10px; cursor:pointer; font-size:18px;
  border:2px solid var(--blue-ring); background:linear-gradient(180deg,var(--blue-1),var(--blue-2)); color:#fff;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 2px 0 var(--blue-deep); }

/* Statistik */
.stat-row { display:flex; align-items:center; justify-content:space-between; font-family:var(--font-head); font-weight:700; color:var(--ink); font-size:14px; }
.stat-row b { font-size:15px; }
.bar { height:14px; border-radius:8px; background:rgba(60,98,134,.3); overflow:hidden; margin-top:6px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.25); }
.bar > i { display:block; height:100%; border-radius:8px; background:linear-gradient(180deg,#7be85e,var(--green)); box-shadow:inset 0 1px 0 rgba(255,255,255,.5); }
.bar--blue > i { background:linear-gradient(180deg,#7cc8f4,var(--blue-2)); }
.viol-stats { display:flex; gap:8px; margin-top:12px; }
.vs { flex:1; text-align:center; background:rgba(255,255,255,.5); border:1px solid rgba(255,255,255,.7); border-radius:12px; padding:10px 4px; }
.vs-n { display:block; font-family:var(--font-head); font-weight:800; font-size:22px; color:var(--red); line-height:1; }
.vs-l { display:block; font-weight:800; font-size:11px; color:var(--ink-soft); margin-top:4px; }
.trend { width:100%; height:130px; }
.trend polyline { fill:none; stroke:var(--blue-2); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; }
.trend circle { fill:var(--orange-2); }
.stat-mini { font-family:var(--font-head); font-weight:700; color:var(--ink-soft); font-size:12px; margin-top:6px; text-align:center; }
.wrong-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 0; }
.wrong-row + .wrong-row { border-top:1px solid rgba(22,56,93,.12); }
.phist { display:flex; flex-direction:column; gap:8px; }
.phist-row { background:rgba(255,255,255,.5); border:1px solid rgba(255,255,255,.7); border-radius:12px; padding:9px 11px; }
.phist-head { font-family:var(--font-head); font-weight:800; color:var(--ink); font-size:13.5px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.phist-tags { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.ptag { font-family:var(--font-head); font-weight:800; font-size:11px; padding:2px 9px; border-radius:9px; color:#fff; }
.ptag.ok { background:linear-gradient(180deg,#54cf3a,#2f9a1e); }
.ptag.bad { background:linear-gradient(180deg,#ef6a5a,#cf3122); }
.ptag.neutral { background:rgba(110,130,150,.55); }
.phist-viol { margin-top:6px; font-weight:800; font-size:12.5px; color:var(--red); }

/* Formations-Generator (Wizard) */
.form-actions { display:flex; gap:8px; margin-bottom:12px; }
.form-actions .btn { flex:1; width:auto; }

/* klappbare Generations-Karten */
.form-gen-card { padding:12px 14px; }
.form-gen-head { display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none; }
.form-gen-arrow { font-size:13px; color:var(--ink-soft); width:14px; }
.form-gen-title { font-family:var(--font-head); font-weight:800; color:var(--ink); font-size:15px; }
.form-gen-count { margin-left:auto; font-family:var(--font-head); font-weight:800; font-size:12px; color:#fff;
  background:linear-gradient(180deg,#54cf3a,#2f9a1e); padding:1px 9px; border-radius:9px; }

.hgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:8px; margin-top:10px; }

/* Listen-Heldenkarte (Bild links, Info rechts) */
.fhcard { display:flex; align-items:center; gap:10px; padding:8px; border-radius:12px; cursor:pointer;
  border:2px solid transparent; background:rgba(255,255,255,.4); }
.fhcard.owned { border-color:var(--cls); background:rgba(255,255,255,.78); }
.fhc-img { position:relative; width:54px; height:54px; flex:none; border-radius:10px; overflow:hidden; display:grid; place-items:center;
  background:linear-gradient(180deg,#cfe0f0,#a8c6e0); border:2px solid var(--cls); }
.fhc-img img { width:100%; height:100%; object-fit:cover; object-position:center 22%; }
.fhc-body { flex:1; min-width:0; }
.fhc-name { font-family:var(--font-head); font-weight:800; color:var(--ink); font-size:14px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fhc-gen { font-family:var(--font-body); font-weight:800; font-size:10px; color:#fff; background:var(--blue-2); padding:0 5px; border-radius:6px; }
.fhc-hint { font-weight:700; font-size:11px; color:var(--ink-mute); margin-top:2px; }
.fhc-rec { font-family:var(--font-head); font-weight:800; font-size:11px; color:var(--green-deep); margin-top:2px; }
.hph { font-family:var(--font-head); font-weight:800; color:#fff; font-size:17px; -webkit-text-stroke:1px rgba(0,0,0,.3); paint-order:stroke fill; }
.hcls { position:absolute; bottom:1px; left:1px; font-family:var(--font-head); font-weight:800; font-size:8.5px; color:#fff;
  background:var(--cls); padding:0 4px; border-radius:6px; }
.htag { position:absolute; top:1px; right:1px; min-width:15px; height:15px; padding:0 2px; border-radius:50%; color:#fff;
  font-family:var(--font-head); font-weight:800; font-size:10px; display:grid; place-items:center; }
.htag.rally { background:#f0a81f; } .htag.lead { background:#8a63d8; } .htag.rec { background:#2f9a1e; border-radius:8px; }

/* Sterne-Zacken-Widget (6 Zacken = 1 Stern) */
.zk { margin-top:4px; }
.zk-stars { position:relative; width:max-content; line-height:1; cursor:pointer; font-size:15px; letter-spacing:2px; }
.zk-base { color:rgba(22,56,93,.22); }
.zk-fill { position:absolute; top:0; left:0; overflow:hidden; white-space:nowrap; color:var(--gold); }
.zk-ctl { display:flex; align-items:center; gap:8px; margin-top:4px; }
.zk-btn { width:24px; height:24px; flex:none; border-radius:7px; cursor:pointer; color:#fff; font-weight:800; font-size:15px;
  border:1.5px solid var(--blue-ring); background:linear-gradient(180deg,var(--blue-1),var(--blue-2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5); }
.zk-val { font-family:var(--font-head); font-weight:800; font-size:12px; color:var(--ink-soft); min-width:54px; }

/* Ergebnis-Formationen */
.form-card.main { border:2px solid var(--gold); }
.form-head { font-family:var(--font-head); font-weight:800; color:var(--ink); font-size:16px;
  margin-bottom:10px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.form-badge { font-family:var(--font-head); font-weight:800; font-size:11px; color:#fff; padding:1px 8px; border-radius:9px;
  background:linear-gradient(180deg,#ffd24d,#f0a81f); -webkit-text-stroke:1px rgba(120,60,8,.4); paint-order:stroke fill; }
.form-heroes { display:flex; gap:8px; }
.fhero { flex:1; text-align:center; min-width:0; }
.fhero .fhc-img { width:100%; height:auto; aspect-ratio:1; margin:0 auto; }
.fhero-name { font-family:var(--font-head); font-weight:800; font-size:11.5px; color:var(--ink); margin-top:4px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.form-ratio { margin-top:10px; font-family:var(--font-head); font-weight:800; font-size:12.5px; color:var(--ink-soft); }

/* ---------- Toggle / Switch ---------- */
.row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 4px; }
.row + .row { border-top:1px solid rgba(22,56,93,.15); }
.switch { width:54px; height:30px; border-radius:20px; background:#9fb2c6; position:relative;
  cursor:pointer; border:none; transition:background .15s; flex:none; box-shadow:inset 0 2px 4px rgba(0,0,0,.25); }
.switch::after { content:""; position:absolute; top:3px; left:3px; width:24px; height:24px;
  border-radius:50%; background:#fff; box-shadow:0 2px 4px rgba(0,0,0,.3); transition:left .15s; }
.switch.on { background:linear-gradient(180deg,var(--blue-1),var(--blue-2)); }
.switch.on::after { left:27px; }

/* ---------- Profil (Einstellungen) ---------- */
.welcome { display:flex; align-items:center; gap:12px; }
.welcome .avatar { width:54px; height:54px; border-radius:14px; object-fit:cover;
  border:2px solid var(--blue-ring); box-shadow:var(--shadow); background:#0c2240; }
.welcome .who { font-family:var(--font-head); font-weight:800; font-size:20px; line-height:1.1; }

.settings-grid { display:grid; grid-template-columns:1fr; gap:16px; }

/* ---------- Intro video ---------- */
#intro { position:fixed; inset:0; background:#000; z-index:100; display:none; }
#intro.show { display:block; }
/* alles schwarz während des Intros -> keine farbigen Balken in den Safe-Areas */
html.intro-active, html.intro-active body { background:#000 !important; }
/* contain = ganzes Video sichtbar (kein Crop); Letterbox ist schwarz und fällt nicht auf */
#intro video { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; }
#intro .intro-sound { position:absolute; left:50%; bottom:calc(92px + env(safe-area-inset-bottom, 0px));
  transform:translateX(-50%); z-index:2; font-family:var(--font-head); font-weight:800; font-size:14px; color:#fff;
  background:rgba(20,40,68,.7); border:1.5px solid rgba(150,200,240,.4); padding:8px 16px; border-radius:20px; cursor:pointer; }
#intro .skip { position:absolute; right:16px; bottom:calc(24px + env(safe-area-inset-bottom, 0px));
  width:auto; padding:10px 20px; z-index:2; }

/* ---------- Placeholder feature page ---------- */
.coming { text-align:center; align-items:center; }
.coming .big-slot { width:120px; height:120px; }

.spinner { width:34px;height:34px;border:4px solid rgba(255,255,255,.25);border-top-color:#fff;
  border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* sanfter Auftritt für Panels/Kacheln */
@media (prefers-reduced-motion:no-preference){
  .anim-pop { animation:pop .42s cubic-bezier(.2,.8,.3,1.2) both; }
  @keyframes pop { from { transform:translateY(12px) scale(.97); opacity:.4; } to { transform:none; opacity:1; } }
}

/* ============ DESKTOP (eigens gestaltet, nicht skaliert) ============ */
@media (min-width:1024px){
  body { background:
      radial-gradient(70% 45% at 50% 0%, #1c4c7e, transparent 60%),
      linear-gradient(180deg,#0c2547 0%,#081a33 70%,#05101f 100%); }
  #app {
    max-width:1120px; margin:26px auto; min-height:calc(100dvh - 52px);
    border-radius:28px; overflow:hidden;
    border:1px solid rgba(120,180,230,.28);
    box-shadow:0 28px 70px rgba(0,0,0,.55), inset 0 0 90px rgba(0,0,0,.4);
  }
  .appbar { padding:18px 30px; }
  .appbar__title { font-size:27px; }
  .view { padding:26px 40px 44px; gap:18px; }
  .center-screen { padding:48px; }

  /* Startscreen: zentriertes 3er-Grid mit größeren Kacheln */
  .home-wrap { max-width:820px; margin:0 auto; width:100%; display:flex; flex-direction:column; gap:22px; }
  .tiles { grid-template-columns:repeat(3,1fr); gap:22px; }
  .slot { width:104px; height:104px; }

  /* Einstellungen zweispaltig */
  .settings-grid { grid-template-columns:1fr 1fr; gap:22px; align-items:start; }
  .view > .btn.cta { max-width:280px; margin-left:auto; margin-right:auto; }
  .home-strip, .namecard { max-width:820px; margin-left:auto; margin-right:auto; width:100%; }

  .login-card { max-width:420px; }
  .brand { width:150px; height:150px; }
  .tile:hover { transform:translateY(-4px); filter:brightness(1.1); }
}

@media (min-width:1440px){
  #app { max-width:1240px; }
  .home-wrap, .home-strip, .namecard { max-width:900px; }
}

@media (prefers-reduced-motion:reduce){
  .tile, .btn { transition:none; }
  .tile:hover, .tile:active { transform:none; }
  .spinner { animation-duration:1.6s; }
}