/* ============================================================
   DIE LETZTE STADT · Stylesheet  (v2 · mobile-first)
   ============================================================ */
:root {
  --bg:#0b0a0f; --bg2:#12111a; --panel:#171622; --panel2:#1e1c2b;
  --ink:#e9e2d4; --ink-dim:#9a9384; --line:#2c2a3a;
  --ember:#ff7a2f; --ember-soft:#ffb15a; --toxic:#6fe0b0; --steel:#8fb8d0;
  --amber:#e0a94a; --violet:#b07adf; --danger:#ff5a4a; --gold:#ffce6a;
  --t-gebaeude:#7fa8c9; --t-charakter:#e0b060; --t-ressource:#7fd08a; --t-ereignis:#c98adf;
  --shadow:0 8px 26px rgba(0,0,0,.55); --shadow-s:0 3px 10px rgba(0,0,0,.5);
  --radius:14px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sat:env(safe-area-inset-top); --sab:env(safe-area-inset-bottom);
  --sal:env(safe-area-inset-left); --sar:env(safe-area-inset-right);
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
html,body { margin:0; height:100%; }
body {
  font-family:var(--font); color:var(--ink); background:var(--bg);
  background-image:
    radial-gradient(1200px 600px at 50% -10%, rgba(255,110,40,.10), transparent 60%),
    radial-gradient(900px 500px at 90% 110%, rgba(111,224,176,.05), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  line-height:1.4; -webkit-font-smoothing:antialiased; overscroll-behavior:none; touch-action:manipulation;
}
button { font-family:inherit; cursor:pointer; color:inherit; touch-action:manipulation; }
h1,h2,h3 { margin:0; font-weight:800; letter-spacing:.02em; }
.hidden { display:none !important; }
.mi { width:1em; height:1em; display:inline-block; vertical-align:-0.14em; flex:none; }
.cardimg { background-size:cover; background-position:center center; background-repeat:no-repeat; }

/* ---------- Buttons ---------- */
.btn { border:1px solid var(--line); background:linear-gradient(180deg,var(--panel2),var(--panel)); color:var(--ink); padding:12px 18px; border-radius:11px; font-weight:700; font-size:15px; transition:.12s; box-shadow:var(--shadow-s); letter-spacing:.02em; }
.btn:active { transform:scale(.97); }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn.primary { background:linear-gradient(180deg,#ff8a3a,#d9531b); border-color:#ff9a4a; color:#1a0f08; box-shadow:0 6px 20px rgba(255,110,40,.35); }
.btn.ghost { background:transparent; }
.btn.small { padding:8px 12px; font-size:13px; border-radius:9px; }
.btn.big { padding:15px 18px; font-size:16px; min-height:50px; }
@media (hover:hover){ .btn:hover{ border-color:var(--ember); } .btn.primary:hover{ filter:brightness(1.08);} }

input { font-family:inherit; font-size:16px; color:var(--ink); background:#0d0c14; border:1px solid var(--line); border-radius:10px; padding:13px 14px; width:100%; }
input:focus { outline:none; border-color:var(--ember); }
label.field { display:block; margin:0 0 14px; }
label.field span { display:block; font-size:12px; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-dim); margin-bottom:6px; }

/* ============================================================
   START / LOBBY / WARTERAUM
   ============================================================ */
.screen { min-height:100svh; display:flex; flex-direction:column; }
.hero-wrap { position:relative; overflow:hidden; padding-top:var(--sat); }
.herosvg { width:100%; height:clamp(190px,40vh,360px); display:block; }
.hero-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding-bottom:8px; text-align:center; background:linear-gradient(180deg,transparent 40%,rgba(11,10,15,.4)); }
.title { font-family:var(--serif); font-size:clamp(36px,8vw,84px); font-weight:800; letter-spacing:.06em; line-height:.95; text-transform:uppercase; color:#f4ead6; text-shadow:0 2px 0 #7a2a12, 0 0 34px rgba(255,120,50,.55), 0 6px 30px rgba(0,0,0,.7); }
.subtitle { margin-top:10px; color:var(--ember-soft); letter-spacing:.3em; text-transform:uppercase; font-size:clamp(10px,2.4vw,14px); font-weight:700; }
.lobby-panel { max-width:460px; width:calc(100% - 32px); margin:18px auto 24px; position:relative; z-index:2; background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px; }
.lobby-panel h2 { font-size:20px; margin-bottom:4px; }
.lobby-panel .hint { color:var(--ink-dim); font-size:13px; margin-bottom:18px; }
.row { display:flex; gap:10px; } .row > * { flex:1; }
.divider { display:flex; align-items:center; gap:12px; color:var(--ink-dim); font-size:12px; letter-spacing:.2em; margin:20px 0; text-transform:uppercase; }
.divider::before,.divider::after { content:""; flex:1; height:1px; background:var(--line); }
.err { color:var(--danger); font-size:13px; min-height:18px; margin-top:8px; font-weight:600; }
.foot-link { text-align:center; margin:8px 16px 26px; }
.foot-link a { color:var(--ink-dim); text-decoration:underline; cursor:pointer; font-size:13px; }
.waitroom { max-width:520px; width:calc(100% - 32px); margin:auto; padding:32px 0; text-align:center; }
.codecard { background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1px solid var(--ember); border-radius:var(--radius); padding:22px; box-shadow:0 0 30px rgba(255,110,40,.15),var(--shadow); margin-bottom:18px; }
.codecard .lbl { text-transform:uppercase; letter-spacing:.2em; font-size:11px; color:var(--ink-dim); }
.codecard .code { font-family:var(--serif); font-size:clamp(44px,13vw,72px); font-weight:800; letter-spacing:.22em; color:var(--gold); text-shadow:0 0 26px rgba(255,206,106,.4); margin:6px 0 10px; }
.seat-list { display:flex; flex-direction:column; gap:10px; margin:8px 0 18px; }
.seat { display:flex; align-items:center; gap:12px; background:var(--panel); border:1px solid var(--line); border-radius:11px; padding:12px 16px; text-align:left; }
.seat .dot { width:12px; height:12px; border-radius:50%; background:var(--toxic); box-shadow:0 0 8px var(--toxic); flex:none; }
.seat.off .dot { background:var(--ink-dim); box-shadow:none; }
.seat .who { font-weight:700; }
.seat .tag { margin-left:auto; font-size:11px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:.12em; }

/* ============================================================
   SPIELTISCH — mobile-first (HUD / Board scrollt / Hand fix)
   ============================================================ */
.table { display:flex; flex-direction:column; height:100svh; height:100dvh; overflow:hidden; }

.hud { flex:none; position:relative; z-index:30; padding:calc(var(--sat) + 7px) calc(var(--sar) + 10px) 7px calc(var(--sal) + 10px);
  background:linear-gradient(180deg,rgba(16,15,24,.98),rgba(16,15,24,.9)); border-bottom:1px solid var(--line); }
.hud-top { display:flex; align-items:center; gap:10px; }
.brand { font-family:var(--serif); font-weight:800; letter-spacing:.06em; text-transform:uppercase; font-size:14px; color:var(--ember-soft); line-height:1; }
.brand small { display:block; font-size:9px; letter-spacing:.14em; color:var(--ink-dim); margin-top:2px; }
.tb-meta { display:flex; gap:10px; align-items:center; color:var(--ink-dim); font-size:12px; margin-left:6px; }
.tb-meta b { color:var(--ink); margin-left:2px; } .tb-meta .mi { color:var(--ink-dim); }
.hud-btns { margin-left:auto; display:flex; gap:6px; }
.icon-btn { border:1px solid var(--line); background:var(--panel); border-radius:10px; width:40px; height:40px; font-size:17px; display:grid; place-items:center; }
.icon-btn:active { transform:scale(.94); }

.tb-res { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.chip { display:inline-flex; align-items:center; gap:4px; background:#0d0c14; border:1px solid var(--line); border-radius:999px; padding:5px 10px; font-weight:800; font-size:14px; white-space:nowrap; }
.chip .mi { width:15px; height:15px; }
.chip.r-schrott .mi{ color:var(--steel);} .chip.r-vorraete .mi{ color:var(--toxic);} .chip.r-ueber .mi{ color:#c9a0d0;}
.chip.c-sp { border-color:var(--gold); color:var(--gold); } .chip.c-sp .mi{ color:var(--gold);}
.chip.c-auf { border-color:var(--ember); color:var(--ember-soft); } .chip.c-auf .mi{ color:var(--ember-soft);}
.chip.c-arm { border-color:#4a6a8a; color:var(--steel); } .chip.c-arm .mi{ color:var(--steel);}
.chip.c-shield { border-color:var(--toxic); color:var(--toxic);} .chip.c-shield .mi{ color:var(--toxic);}
.chip.c-dog { border-color:var(--amber); color:var(--amber);} .chip.c-dog .mi{ color:var(--amber);}
.armbar { display:inline-block; width:26px; height:5px; background:#000a; border-radius:3px; overflow:hidden; margin-left:2px; }
.armbar i { display:block; height:100%; background:linear-gradient(90deg,var(--steel),#bfe0ff); }

.ticker { display:flex; align-items:center; gap:7px; width:100%; margin-top:7px; background:#0d0c1466; border:1px solid var(--line); border-radius:9px; padding:7px 10px; color:var(--ink-dim); font-size:12.5px; text-align:left; overflow:hidden; }
.ticker .tk-tx { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ticker .tk-ic { flex:none; }

.board { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:12px calc(var(--sar) + 12px) 12px calc(var(--sal) + 12px); display:flex; flex-direction:column; gap:12px; }

.turnbanner { display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:12px; background:linear-gradient(90deg,rgba(255,122,47,.14),transparent); border:1px solid var(--line); }
.turnbanner.you { border-color:var(--ember); box-shadow:0 0 22px rgba(255,110,40,.14); }
.turnbanner .tbi { font-size:20px; }
.turnbanner .big { font-family:var(--serif); font-size:17px; font-weight:800; }
.turnbanner .sub { color:var(--ink-dim); font-size:12.5px; }

/* Gegner-Chips (horizontal scroll) */
.opponents { display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; scroll-snap-type:x proximity; }
.opponents::-webkit-scrollbar { height:0; }
.oppchip { flex:0 0 auto; min-width:210px; max-width:78vw; display:flex; align-items:center; gap:10px; text-align:left; background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1px solid var(--line); border-radius:12px; padding:10px 12px; scroll-snap-align:start; }
.oppchip.beacon { border-color:var(--ember); box-shadow:0 0 16px rgba(255,110,40,.2); }
.oppchip.activeturn { outline:2px solid var(--toxic); outline-offset:-2px; }
.oppchip.off { opacity:.55; }
.oppchip .avatar { width:34px; height:34px; border-radius:9px; flex:none; display:grid; place-items:center; font-weight:800; color:#12111a; font-size:15px; }
.oc-mid { flex:1; min-width:0; }
.oc-name { display:block; font-weight:800; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.oc-stats { display:flex; flex-wrap:wrap; gap:7px; font-size:12px; color:var(--ink-dim); font-weight:700; margin-top:2px; }
.oc-stats .mi { width:13px; height:13px; vertical-align:-0.12em; }
.beacon-badge { background:var(--ember); color:#1a0f08; padding:0 5px; border-radius:5px; font-size:10px; }
.oc-city { flex:none; color:var(--ink-dim); font-size:12px; font-weight:700; }

/* Silhouette + eigene Stadt */
.selfwrap { display:flex; flex-direction:column; gap:10px; }
.sil-panel { background:linear-gradient(180deg,#171420,#0e0c14); border:1px solid var(--line); border-radius:12px; overflow:hidden; position:relative; }
.sil-label { position:absolute; top:6px; left:10px; font-size:10px; text-transform:uppercase; letter-spacing:.16em; color:var(--ink-dim); z-index:2; text-shadow:0 1px 3px #000; }
.silhouette { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.silhouette::-webkit-scrollbar { height:0; }
.silsvg { height:118px; display:block; width:100%; min-width:calc(var(--sil-ar,4.3) * 118px); }

.selfcity { background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1px solid #3a3550; border-radius:12px; padding:12px; box-shadow:var(--shadow-s); }
.selfcity.beacon { border-color:var(--ember); box-shadow:0 0 22px rgba(255,110,40,.18); }
.sc-head { display:flex; align-items:center; gap:10px; font-size:12px; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-dim); margin-bottom:10px; }
.sc-head .sc-stats { margin-left:auto; display:flex; gap:8px; align-items:center; font-weight:800; letter-spacing:0; text-transform:none; font-size:13px; }
.sc-stats .mi { width:14px; height:14px; }
.sc-stats .mi[class] { color:var(--ink); }

/* Mini-Karten */
.tableau { display:flex; flex-wrap:wrap; gap:7px; }
.mini { width:66px; border:1px solid var(--line); border-radius:9px; overflow:hidden; position:relative; background:#0d0c14; text-align:left; }
.mini .art { height:38px; } .mini .art > .artsvg { width:100%; height:100%; display:block; }
.mini .mini-ic { display:flex; flex-wrap:wrap; gap:2px; padding:2px 3px 0; min-height:14px; }
.mini .mini-ic .ic { font-size:8px; padding:0 2px; background:none; border:none; }
.mini .mini-ic .ic .mi { width:9px; height:9px; }
.mini .mini-ic .ic span { display:none; }
.mini .cap { font-size:8.5px; font-weight:700; text-align:center; padding:1px 2px 3px; line-height:1.05; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.mini.t-gebaeude { border-top:2px solid var(--t-gebaeude); } .mini.t-charakter { border-top:2px solid var(--t-charakter); }
.mini.start { opacity:.72; } .mini.ruin { filter:grayscale(.7) brightness(.55); }
.mini .ruin-x { position:absolute; top:2px; left:2px; right:2px; text-align:center; font-size:8px; font-weight:800; color:#ff9a8a; background:#0009; border-radius:4px; }

/* ---------- Hand + Aktionsleiste (fix unten) ---------- */
.hand-wrap { flex:none; z-index:20; background:linear-gradient(0deg,#0b0a0f 62%,rgba(11,10,15,.75) 90%,transparent); padding:8px calc(var(--sar) + 8px) calc(var(--sab) + 8px) calc(var(--sal) + 8px); border-top:1px solid var(--line); }
.hand-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 4px 6px; }
.hand-bar .lbl { font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-dim); }
#hand-hint { font-size:12px; color:var(--ink-dim); }
.hand { display:flex; gap:9px; overflow-x:auto; padding:4px 2px 8px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
.hand::-webkit-scrollbar { height:0; }
.empty-hand { color:var(--ink-dim); padding:16px; font-size:14px; }

.card { flex:none; width:118px; border-radius:12px; overflow:hidden; scroll-snap-align:start; background:linear-gradient(180deg,#211f2c,#171622); border:1px solid var(--line); box-shadow:var(--shadow-s); position:relative; }
.card.ready { border-color:#4a4560; }
.card.unaffordable { opacity:.62; }
.card.unaffordable .cost { color:var(--danger); }
.card:active { transform:scale(.97); }
.card .art { height:66px; position:relative; } .card .art > .artsvg { width:100%; height:100%; display:block; }
.card .type-tab { position:absolute; top:5px; left:5px; font-size:8.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; padding:2px 6px; border-radius:6px; background:#000a; color:#fff; }
.card.t-gebaeude .type-tab { color:var(--t-gebaeude);} .card.t-charakter .type-tab { color:var(--t-charakter);} .card.t-ressource .type-tab { color:var(--t-ressource);} .card.t-ereignis .type-tab { color:var(--t-ereignis);}
.card.t-gebaeude { border-top:3px solid var(--t-gebaeude);} .card.t-charakter { border-top:3px solid var(--t-charakter);} .card.t-ressource { border-top:3px solid var(--t-ressource);} .card.t-ereignis { border-top:3px solid var(--t-ereignis);}
.card .cost { position:absolute; top:5px; right:5px; display:flex; gap:3px; }
.card .cost .cst { font-size:11px; font-weight:800; background:#000b; border-radius:6px; padding:1px 5px; display:inline-flex; align-items:center; gap:1px; }
.card .cost .cst .mi { width:11px; height:11px; }
.face-ic { position:absolute; left:0; right:0; bottom:0; display:flex; flex-wrap:wrap; gap:2px; padding:3px 4px; background:linear-gradient(0deg,#000c,transparent); }
.ic { display:inline-flex; align-items:center; gap:1px; font-size:9.5px; font-weight:800; background:#000a; border-radius:5px; padding:1px 4px; line-height:1.3; }
.ic .mi { width:11px; height:11px; }
.ic.in{color:var(--steel);} .ic.sp{color:var(--gold);} .ic.auf{color:var(--ember-soft);} .ic.arm{color:#bfe0ff;} .ic.sh{color:var(--toxic);} .ic.act{color:#cbb8e6;} .ic.good{color:var(--toxic);} .ic.bad{color:#ff9a8a;} .ic.syn{color:var(--gold);} .ic.cool{color:var(--toxic);}
.card .body { padding:7px 8px 9px; }
.card .cname { font-family:var(--serif); font-weight:800; font-size:13px; line-height:1.05; margin-bottom:3px; }
.card .ctext { font-size:10px; color:var(--ink-dim); line-height:1.25; max-height:39px; overflow:hidden; }

.action-dock { display:flex; flex-wrap:wrap; gap:8px; margin-top:2px; }
.dock-btn { flex:1 1 0; min-width:0; min-height:50px; display:flex; align-items:center; justify-content:center; gap:5px; font-size:14px; padding:12px 8px; white-space:nowrap; }
.dock-btn .mi{ width:15px; height:15px; }
.dock-btn .cost-hint { color:var(--ember-soft); font-weight:800; display:inline-flex; align-items:center; gap:1px; }
.dock-btn .cost-hint .mi{ width:12px; height:12px; }
#btn-endturn { flex:1 1 100%; }
.dock-wait { color:var(--ink-dim); font-size:13px; text-align:center; padding:12px; width:100%; }
@media (min-width:560px){ #btn-endturn { flex:1 1 0; } }

/* Seiten-Spalte: mobil versteckt (per Sheets erreichbar) */
.side { display:none; }
.reconnect-bar { position:fixed; top:0; left:0; right:0; z-index:400; text-align:center; padding:calc(var(--sat) + 8px) 12px 8px; background:var(--danger); color:#1a0808; font-weight:800; font-size:13px; }

/* ============================================================
   BOTTOM-SHEETS
   ============================================================ */
.sheet-back { position:fixed; inset:0; z-index:150; background:rgba(6,5,10,.72); backdrop-filter:blur(4px); display:flex; align-items:flex-end; opacity:0; transition:opacity .2s; }
.sheet-back.in { opacity:1; }
.sheet { width:100%; max-height:90svh; background:linear-gradient(180deg,var(--panel2),var(--panel)); border-top:1px solid var(--line); border-radius:20px 20px 0 0; box-shadow:0 -10px 40px rgba(0,0,0,.6); overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:calc(var(--sab) + 14px); transform:translateY(30px); transition:transform .22s cubic-bezier(.2,.9,.3,1); overscroll-behavior:contain; }
.sheet-back.in .sheet { transform:translateY(0); }
.sheet-grip { width:42px; height:5px; border-radius:3px; background:var(--line); margin:9px auto 4px; }
.sheet.wide, .sheet.tall { max-height:92svh; }
@media (min-width:720px){ .sheet-back{ align-items:center; } .sheet{ max-width:560px; margin:0 auto; border-radius:18px; } }
.sheet .mh { padding:6px 18px 12px; display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--panel2); z-index:2; }
.sheet .mh h2 { font-family:var(--serif); font-size:20px; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sheet .mb { padding:14px 18px; }
.sheet-foot { display:flex; gap:10px; padding:12px 16px 4px; position:sticky; bottom:0; background:linear-gradient(0deg,var(--panel) 70%,transparent); }
.sheet-foot .btn { flex:1; }

/* Karten-Detail */
.card-sheet .cd { }
.cd-art { height:150px; position:relative; } .cd-art > .artsvg { width:100%; height:100%; display:block; }
.cd-art .type-tab { position:absolute; top:10px; left:12px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; padding:3px 9px; border-radius:7px; background:#000b; }
.cd-art.t-gebaeude .type-tab{color:var(--t-gebaeude);} .cd-art.t-charakter .type-tab{color:var(--t-charakter);} .cd-art.t-ressource .type-tab{color:var(--t-ressource);} .cd-art.t-ereignis .type-tab{color:var(--t-ereignis);}
.cd-art .cost.big { position:absolute; top:10px; right:12px; display:flex; gap:5px; }
.cd-art .cost.big .cst { font-size:15px; font-weight:800; background:#000c; border-radius:8px; padding:3px 8px; display:inline-flex; align-items:center; gap:2px;} .cd-art .cost.big .cst .mi{ width:15px; height:15px;}
.ruin-x.big { position:absolute; bottom:10px; left:12px; background:#000b; color:#ff9a8a; font-weight:800; padding:4px 10px; border-radius:7px; font-size:13px; }
.cd-body { padding:14px 18px 4px; }
.cd-title { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.cd-title h2 { font-family:var(--serif); font-size:24px; }
.tagpill { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; padding:3px 9px; border-radius:999px; border:1px solid var(--line); color:var(--ink-dim); }
.tagpill.tg-produktion{ color:var(--steel); border-color:#3a5a7a;} .tagpill.tg-verteidigung{ color:var(--toxic); border-color:#2a6a5a;} .tagpill.tg-menschen{ color:#c9a0d0; border-color:#5a3a5a;} .tagpill.tg-prestige{ color:var(--gold); border-color:#6a5a2a;} .tagpill.tg-handel{ color:var(--amber); border-color:#6a5030;}
.cd-rows { display:flex; flex-direction:column; gap:2px; margin-bottom:12px; }
.drow { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px; background:#0d0c1466; }
.drow.hl { background:rgba(255,206,106,.10); border:1px solid rgba(255,206,106,.25); }
.drow .di { width:22px; text-align:center; color:var(--ember-soft); } .drow .di .mi{ width:17px; height:17px; }
.drow .dl { flex:1; font-size:13.5px; color:var(--ink-dim); } .drow .dv { font-weight:800; font-size:14px; text-align:right; }
.drow.hl .dv { color:var(--gold); }
.cd-text { font-size:13.5px; color:var(--ink); line-height:1.5; }
.cd-flavor { font-size:12.5px; color:#7a7466; font-style:italic; margin-top:8px; }

/* Gegner-Stadt-Sheet */
.citysheet { padding:12px 16px; }
.cs-stats { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.cs-res { display:flex; gap:14px; color:var(--ink-dim); font-weight:800; font-size:14px; margin-bottom:10px; } .cs-res .mi{ width:14px; height:14px; }
.cs-sil { border:1px solid var(--line); border-radius:10px; overflow:hidden; margin-bottom:12px; overflow-x:auto; }
.cs-sil .silsvg{ height:100px; }

/* Handels-Sheet */
.tradebox { padding:14px 18px; }
.tr-sec { margin-bottom:6px; } .tr-h { font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-dim); margin-bottom:7px; }
.tr-opts { display:flex; gap:8px; } .tr-opt { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:12px 6px; border:1px solid var(--line); border-radius:11px; background:#0d0c14; font-weight:700; font-size:12px; color:var(--ink); }
.tr-opt .mi { width:22px; height:22px; }
.tr-opt.on { border-color:var(--ember); background:rgba(255,122,47,.12); color:var(--ember-soft); }
.tr-arrow { text-align:center; color:var(--ember); font-size:18px; margin:6px 0; }

/* Ziel-Auswahl */
.target-hint { color:var(--ink-dim); margin:0 0 12px; font-size:13.5px; }
.target-list { display:flex; flex-direction:column; gap:9px; }
.tgt { display:flex; align-items:center; gap:11px; text-align:left; padding:12px; }
.tgt .avatar { width:34px; height:34px; border-radius:9px; flex:none; display:grid; place-items:center; font-weight:800; color:#12111a; }
.tgt-mid { flex:1; min-width:0; } .tgt-mid b { display:block; }
.tgt-stats { font-size:12px; color:var(--ink-dim); font-weight:700; display:flex; flex-wrap:wrap; gap:6px; } .tgt-stats .mi{ width:12px; height:12px;}
.tgt-guard { font-size:11px; color:var(--amber); font-weight:800; } .tgt-guard .mi{ width:13px;height:13px;}

.sheet-log { max-height:64svh; padding:10px 16px; display:flex; flex-direction:column; gap:5px; font-size:13px; }
.sheet-chat { max-height:56svh; padding:10px 16px; display:flex; flex-direction:column; gap:5px; font-size:13.5px; }
.sheet .chat-in { display:flex; gap:8px; padding:10px 16px; border-top:1px solid var(--line); position:sticky; bottom:0; background:var(--panel2); }

/* ---------- Log-Zeilen ---------- */
.log, .sheet-log { }
.log .l, .sheet-log .l { padding:6px 9px; border-radius:7px; background:#0d0c1466; line-height:1.32; }
.l.disaster { background:rgba(255,90,74,.14); border-left:2px solid var(--danger); font-weight:600; }
.l.win { background:rgba(255,206,106,.16); border-left:2px solid var(--gold); font-weight:700; }
.l.system { color:var(--ember-soft); font-weight:700; text-align:center; background:none; }
.l.build { border-left:2px solid var(--t-gebaeude); }
.l.bad { color:#ff9a8a; } .l.good { color:var(--toxic); } .l.shield { color:var(--toxic); }
.chat-log .c b { color:var(--ember-soft); }

/* ============================================================
   MODAL (Regeln)
   ============================================================ */
.modal-back { position:fixed; inset:0; background:rgba(6,5,10,.8); backdrop-filter:blur(4px); z-index:160; display:grid; place-items:center; padding:0; }
.modal { background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); max-width:640px; width:100%; height:100svh; max-height:100svh; overflow:hidden; display:flex; flex-direction:column; }
@media (min-width:640px){ .modal{ height:auto; max-height:88svh; margin:16px; } .modal-back{ padding:16px; } }
.modal .mh { padding:calc(var(--sat) + 14px) 20px 14px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:12px; }
.modal .mh h2 { font-family:var(--serif); font-size:20px; }
.modal .mh .x { margin-left:auto; }
.modal .mb { padding:16px 20px calc(var(--sab) + 20px); overflow-y:auto; -webkit-overflow-scrolling:touch; }
.rules-tabs { display:flex; gap:4px; padding:0 12px; border-bottom:1px solid var(--line); overflow-x:auto; }
.rules-tabs::-webkit-scrollbar{ height:0; }
.rules-tabs button { background:none; border:none; padding:12px 10px; color:var(--ink-dim); font-weight:700; font-size:13px; border-bottom:2px solid transparent; white-space:nowrap; }
.rules-tabs button.on { color:var(--ember-soft); border-bottom-color:var(--ember); }
.rule-sec { display:none; } .rule-sec.on { display:block; }
.rule-sec h3 { font-family:var(--serif); font-size:17px; margin:14px 0 8px; color:var(--ember-soft); }
.rule-sec h3:first-child { margin-top:0; }
.rule-sec p, .rule-sec li { font-size:14px; color:var(--ink); line-height:1.55; }
.rule-sec ul { margin:6px 0 12px; padding-left:20px; }
.rule-sec .tk { display:inline-block; background:#0d0c14; border:1px solid var(--line); border-radius:6px; padding:0 6px; font-weight:700; font-size:13px; }
.rule-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:10px 0; }
@media(max-width:520px){ .rule-grid{ grid-template-columns:1fr; } }
.rtype { background:#0d0c14; border:1px solid var(--line); border-radius:10px; padding:10px 12px; }
.rtype b { display:block; margin-bottom:3px; }
.rtype.g b{color:var(--t-gebaeude);} .rtype.c b{color:var(--t-charakter);} .rtype.r b{color:var(--t-ressource);} .rtype.e b{color:var(--t-ereignis);}

/* ============================================================
   Katastrophen / Sieg / Toast
   ============================================================ */
.dis-overlay { position:fixed; inset:0; z-index:200; display:grid; place-items:center; background:rgba(8,4,4,.72); backdrop-filter:blur(3px); animation:fadein .3s; padding:16px calc(var(--sar) + 16px); }
.dis-card { width:min(94vw,420px); background:linear-gradient(180deg,#1a1016,#0e0a0c); border:1px solid var(--danger); border-radius:16px; overflow:hidden; box-shadow:0 0 60px rgba(255,60,40,.35); animation:dropin .4s cubic-bezier(.2,1.2,.4,1); max-height:90svh; overflow-y:auto; }
.dis-card .art { height:140px; } .dis-card .art > .artsvg { width:100%; height:100%; }
.dis-card .db { padding:16px 20px calc(var(--sab) + 20px); text-align:center; }
.dis-card .kicker { color:var(--danger); text-transform:uppercase; letter-spacing:.22em; font-size:11px; font-weight:800; }
.dis-card .dname { font-family:var(--serif); font-size:28px; font-weight:800; margin:4px 0 8px; }
.dis-card .dtext { color:var(--ink-dim); font-size:13.5px; margin-bottom:12px; }
.dis-card .hits { display:flex; flex-direction:column; gap:5px; margin-bottom:14px; }
.dis-card .hit { font-size:13px; font-weight:600; background:#0d0c14; border-radius:8px; padding:7px 10px; }
.dis-card .hit.saved { color:var(--toxic); } .dis-card .hit.hurt { color:#ff9a8a; }
@keyframes fadein { from{opacity:0} to{opacity:1} }
@keyframes dropin { from{opacity:0; transform:translateY(-30px) scale(.94)} to{opacity:1; transform:none} }

.win-overlay { position:fixed; inset:0; z-index:210; display:grid; place-items:center; background:rgba(8,6,3,.85); backdrop-filter:blur(5px); animation:fadein .4s; padding:20px calc(var(--sar) + 16px); }
.win-card { text-align:center; max-width:440px; width:100%; max-height:92svh; overflow-y:auto; }
.win-card .crown { font-size:58px; filter:drop-shadow(0 0 20px rgba(255,206,106,.6)); }
.win-card h1 { font-family:var(--serif); font-size:clamp(30px,8vw,50px); color:var(--gold); text-shadow:0 0 30px rgba(255,206,106,.5); margin:6px 0; }
.win-sub { color:var(--ember-soft); letter-spacing:.2em; text-transform:uppercase; font-size:12px; }
.win-card .standings { margin:18px 0; display:flex; flex-direction:column; gap:8px; }
.win-card .st { display:flex; align-items:center; gap:12px; background:var(--panel); border:1px solid var(--line); border-radius:11px; padding:12px 16px; }
.win-card .st .rk { font-weight:800; color:var(--ink-dim); width:24px; }
.win-card .st .avatar { width:28px; height:28px; border-radius:8px; display:grid; place-items:center; font-weight:800; color:#12111a; }
.win-card .st.first { border-color:var(--gold); }
.win-card .st b { flex:1; text-align:left; } .win-card .st .sp { color:var(--gold); font-weight:800; }

.toast { position:fixed; left:50%; bottom:calc(var(--sab) + 20px); transform:translateX(-50%); z-index:500; background:#1a1622; border:1px solid var(--danger); color:var(--ink); padding:12px 18px; border-radius:11px; box-shadow:var(--shadow); font-weight:600; font-size:14px; animation:fadein .2s; max-width:90vw; text-align:center; }
.toast.ok { border-color:var(--toxic); }
.ashfall { position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.55; }

/* ============================================================
   DESKTOP (>=940px): mehrspaltiges Board + Seitenspalte
   ============================================================ */
@media (min-width:940px) {
  .table { height:100dvh; }
  .board { flex-direction:row; align-items:flex-start; gap:16px; padding:16px; }
  .arena { flex:1; display:flex; flex-direction:column; gap:14px; min-width:0; }
  .side { display:flex; flex-direction:column; gap:14px; width:320px; flex:none; position:sticky; top:0; }
  .side .panel { background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1px solid var(--line); border-radius:13px; box-shadow:var(--shadow-s); overflow:hidden; }
  .side .ph { padding:10px 14px; border-bottom:1px solid var(--line); font-size:12px; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-dim); }
  .side .log { max-height:340px; overflow-y:auto; padding:8px 12px; display:flex; flex-direction:column; gap:5px; font-size:12.5px; }
  .side .nextdis { padding:12px 14px; display:flex; gap:12px; align-items:center; }
  .side .nextdis .thumb { width:64px; height:44px; border-radius:8px; overflow:hidden; flex:none; border:1px solid var(--line);} .side .nextdis .thumb .artsvg{ width:100%;height:100%;}
  .side .nextdis .txt b { color:var(--danger);} .side .nextdis .txt .t{ font-size:11.5px; color:var(--ink-dim);}
  .side .chat-log { max-height:150px; overflow-y:auto; padding:8px 12px; display:flex; flex-direction:column; gap:4px; font-size:12.5px;}
  .side .chat-in { display:flex; gap:6px; padding:8px; border-top:1px solid var(--line);}
  .hud-btns #btn-log, .hud-btns #btn-chat { display:none; }
  .ticker { display:none; }
  .opponents { flex-wrap:wrap; overflow:visible; }
  .oppchip { max-width:none; flex:1 1 240px; }
  .hand { justify-content:flex-start; }
  .card { width:130px; } .card .art { height:74px; }
  .silsvg { height:132px; }
}
@media (hover:hover) and (min-width:940px){
  .card { cursor:pointer; transition:transform .14s; } .card:hover{ transform:translateY(-6px); border-color:var(--ember);}
  .mini, .oppchip { cursor:pointer; }
}
/* Landscape auf niedrigen Höhen: kompakter */
@media (max-height:480px) and (orientation:landscape) {
  .silsvg { height:84px; }
  .card .art { height:54px; } .card { width:104px; }
  .hero-overlay .title{ font-size:40px; }
}

/* ============================================================
   POLITUR · Animationen, Feedback, Lade-/Busy-Zustände
   ============================================================ */
/* weiche Übergänge */
.chip, .oppchip, .icon-btn, .dock-btn, .mini { transition: transform .14s ease, border-color .14s ease, background .14s ease, opacity .14s ease; }
.armbar i { transition: width .45s cubic-bezier(.3,.8,.3,1); }
.oppchip:active { transform: scale(.98); }
.mini:active { transform: scale(.96); }

/* Ressourcen-Floaties */
.floater { position: fixed; top: calc(var(--sat) + 96px); left: 0; right: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; pointer-events: none; z-index: 36; padding: 0 12px; }
.floatie { display: inline-flex; align-items: center; gap: 3px; font-weight: 800; font-size: 15px; padding: 4px 11px; border-radius: 999px; background: rgba(18,17,26,.94); border: 1px solid var(--line); box-shadow: var(--shadow-s); animation: floatRise 1.4s ease-out forwards; }
.floatie .mi { width: 15px; height: 15px; }
.floatie.up { color: var(--toxic); border-color: #2a6a5a; }
.floatie.down { color: #ff9a8a; border-color: #6a2f2a; }
.floatie.sp { color: var(--gold); border-color: #6a5a2a; }
.floatie.auf { color: var(--ember-soft); border-color: #6a4020; }
@keyframes floatRise { 0% { opacity: 0; transform: translateY(8px) scale(.9); } 18% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-30px); } }

/* Karten-Einzug / Gebäude-Pop */
.card.deal { animation: dealIn .34s cubic-bezier(.2,.9,.3,1) both; }
@keyframes dealIn { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }
.mini.pop { animation: popIn .42s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes popIn { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: scale(1); } }

/* Am-Zug-Puls (dezent) */
.turnbanner.you .tbi { display: inline-block; animation: tbiPulse 1.7s ease-in-out infinite; color: var(--ember); }
@keyframes tbiPulse { 0%,100% { transform: scale(1); opacity: .75; } 50% { transform: scale(1.18); opacity: 1; } }

/* Katastrophen-Einschlag: Screen-Shake + roter Blitz */
#scr-game.shake { animation: shakeit .6s cubic-bezier(.36,.07,.19,.97); }
@keyframes shakeit { 10%,90% { transform: translateX(-2px); } 20%,80% { transform: translateX(3px); } 30%,50%,70% { transform: translateX(-6px); } 40%,60% { transform: translateX(6px); } }
#scr-game.shake::after { content: ""; position: fixed; inset: 0; background: radial-gradient(circle at 50% 45%, transparent 45%, rgba(255,60,40,.30)); animation: flashfade .6s ease-out forwards; pointer-events: none; z-index: 41; }
@keyframes flashfade { from { opacity: 1; } to { opacity: 0; } }

/* Busy-Sperre (Aktion in Arbeit -> kein Doppeltipp) */
body.busy .action-dock { opacity: .6; pointer-events: none; }
body.busy #hand { pointer-events: none; }

/* Lade-/Verbinde-Overlay */
.loading { position: fixed; inset: 0; z-index: 350; display: grid; place-items: center; background: var(--bg); padding: calc(var(--sat)) 16px calc(var(--sab)); }
.ld-box { text-align: center; }
.ld-spin { width: 46px; height: 46px; border: 3px solid var(--line); border-top-color: var(--ember); border-radius: 50%; margin: 0 auto 14px; animation: spin .9s linear infinite; }
.ld-txt { color: var(--ink-dim); letter-spacing: .08em; font-size: 14px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Sheet-/Overlay-Einblendung leicht weicher */
.dis-overlay, .win-overlay { will-change: opacity; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .floatie { animation: floatRiseRM 1s ease-out forwards; }
  @keyframes floatRiseRM { 0% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
}

/* ============================================================
   UPDATE v3 · neue UI-Elemente + Desktop-Ein-Screen
   ============================================================ */
/* Beacon-Warnung */
.beaconwarn { display:flex; align-items:center; gap:8px; padding:9px 13px; border-radius:11px; font-size:13.5px; line-height:1.3;
  background:linear-gradient(90deg, rgba(255,90,40,.22), rgba(255,90,40,.06)); border:1px solid var(--ember); color:var(--ember-soft);
  box-shadow:0 0 18px rgba(255,110,40,.18); animation:beaconPulse 1.8s ease-in-out infinite; }
.beaconwarn .mi { width:16px; height:16px; color:var(--ember); flex:none; }
.beaconwarn b { color:#ffd0a0; }
@keyframes beaconPulse { 0%,100%{ box-shadow:0 0 12px rgba(255,110,40,.14);} 50%{ box-shadow:0 0 22px rgba(255,110,40,.30);} }

/* Turn-Banner deutlicher */
.turnbanner.you { border-color:var(--ember); box-shadow:0 0 24px rgba(255,110,40,.22); background:linear-gradient(90deg,rgba(255,122,47,.22),transparent); }
.turnbanner.wait { opacity:.96; }
.turnbanner .big { font-size:18px; }

/* Dock-Hinweise */
.free-hint { font-size:10px; font-weight:800; color:var(--toxic); text-transform:uppercase; letter-spacing:.04em; margin-left:2px; }

/* Bot-Punkt im Warteraum */
.seat .dot.bot { background:var(--steel); box-shadow:0 0 8px var(--steel); }

/* Handels-Sheet: Live-Ressourcen + Optionen */
.tr-now { display:flex; gap:8px; justify-content:center; margin-bottom:14px; }
.mh-sub { font-size:12px; color:var(--ink-dim); font-weight:600; }
.tr-opts .tr-opt[disabled] { opacity:.35; }
.tr-opt b { color:var(--ink); font-size:15px; }

/* Reparieren/Abreißen im Karten-Sheet nutzt bestehende Foot-Buttons */

/* ------------------ Desktop: alles auf einen Screen, kein Seiten-Scroll ------------------ */
@media (min-width:940px) {
  .board { overflow:hidden; height:100%; }
  .arena { height:100%; min-height:0; display:flex; flex-direction:column; gap:10px; }
  .selfwrap { flex:1; min-height:0; display:flex; flex-direction:column; gap:8px; }
  .sil-panel { flex:none; }
  .silsvg { height:104px; }
  .selfcity { flex:1; min-height:0; display:flex; flex-direction:column; }
  .selfcity .tableau { overflow-y:auto; align-content:flex-start; }
  .opponents { flex:none; }
  .side { height:100%; min-height:0; }
  .side .log { max-height:none; flex:1; }
  .side .panel:nth-child(2) { display:flex; flex-direction:column; min-height:0; flex:1; }
  .side { display:flex; }
  .hand-wrap { padding-top:6px; }
  .hand .card { width:120px; } .hand .card .art { height:66px; }
}
/* niedrige Laptops kompakter */
@media (min-width:940px) and (max-height:800px) {
  .silsvg { height:88px; }
  .card { } .hand .card .art { height:58px; }
  .card .body { padding:6px 8px 8px; } .card .ctext { max-height:30px; }
  .turnbanner { padding:8px 12px; } .turnbanner .big { font-size:16px; }
}

/* ---------- Fix: Abwerfen ist eigener Button (nie mehr statt "Zurück") ---------- */
.discard-row { display:flex; justify-content:center; padding:10px 16px 0; }
.disc-btn { display:inline-flex; align-items:center; gap:7px; background:none; border:1px dashed var(--line); color:var(--ink-dim); border-radius:10px; padding:9px 15px; font-weight:700; font-size:13px; transition:.15s; }
.disc-btn .mi { width:14px; height:14px; }
.disc-btn .disc-hint { font-size:10.5px; color:#6a6456; font-weight:600; }
.disc-btn.armed { border-style:solid; border-color:var(--danger); color:#ff9a8a; background:rgba(255,90,74,.10); }
.disc-btn:active { transform:scale(.97); }

/* ---------- Eigene Zielscheiben-Anzeige (HUD-Chip + Stadt-Badge) ---------- */
.chip.c-auf.is-beacon { border-color:var(--danger); color:#ffb09a; box-shadow:0 0 14px rgba(255,90,74,.4); animation:beaconPulse 1.8s ease-in-out infinite; }
.chip.c-auf.is-beacon .mi { color:var(--danger); }
.chip .bz { font-size:9px; font-weight:800; background:var(--ember); color:#1a0f08; padding:1px 5px; border-radius:5px; margin-left:3px; letter-spacing:.06em; text-transform:uppercase; }
.sc-head .beacon-badge { font-size:10px; letter-spacing:.1em; }


/* ============================================================
   PATCH v4 · Einblendung, Timer, Cooldowns, Kick, Strategie
   ============================================================ */
:root { --t-strategie:#8a9adf; }
.card.t-strategie { border-top:3px solid var(--t-strategie); }
.card.t-strategie .type-tab { color:var(--t-strategie); }
.mini.t-strategie { border-top:2px solid var(--t-strategie); }

/* Karten-Einblendung für alle */
.playbanner { position:fixed; top:calc(var(--sat) + 118px); left:0; right:0; display:flex; justify-content:center; z-index:38; pointer-events:none; padding:0 14px; }
.pb { display:flex; align-items:center; gap:11px; max-width:430px; width:auto; background:linear-gradient(180deg,#211f2e,#15141f); border:1px solid var(--line); border-radius:13px; padding:8px 14px 8px 8px; box-shadow:var(--shadow); animation:pbIn .3s cubic-bezier(.2,1.1,.4,1), pbOut .35s ease-in forwards 2s; }
.pb.off { border-color:var(--danger); box-shadow:0 0 24px rgba(255,60,40,.3), var(--shadow); animation:pbIn .3s cubic-bezier(.2,1.1,.4,1), pbOut .35s ease-in forwards 2.8s; }
.pb.mine { opacity:.92; }
.pb-art { width:72px; height:44px; border-radius:8px; overflow:hidden; flex:none; border:1px solid var(--line); }
.pb-art .artsvg { width:100%; height:100%; }
.pb-txt { font-size:12.5px; color:var(--ink-dim); line-height:1.3; }
.pb-card { font-family:var(--serif); font-weight:800; font-size:15px; color:var(--ink); }
.pb-vs { display:block; color:#ff9a8a; font-weight:700; font-size:12px; margin-top:1px; }
.pb-vs .mi { width:12px; height:12px; color:var(--danger); }
@keyframes pbIn { from { opacity:0; transform:translateY(-14px) scale(.95); } to { opacity:1; transform:none; } }
@keyframes pbOut { to { opacity:0; transform:translateY(-8px); } }

/* Zug-Timer */
.turn-timer { font-variant-numeric:tabular-nums; font-weight:800; font-size:15px; color:var(--ink-dim); background:#0d0c14; border:1px solid var(--line); border-radius:9px; padding:6px 10px; white-space:nowrap; }
.turn-timer:empty { display:none; }
.turn-timer.warn { color:#ff9a8a; border-color:var(--danger); animation:tbiPulse 1s ease-in-out infinite; }

/* Cooldown-Badges & Bereit-Punkt */
.mini { position:relative; }
.mini .cdb { position:absolute; top:2px; right:2px; z-index:2; font-size:9px; font-weight:800; background:#000c; color:#cbb8e6; border:1px solid #4a4560; padding:1px 4px; border-radius:5px; }
.mini.oncd .art { filter:grayscale(.55) brightness(.75); }
.mini .abready { position:absolute; top:4px; right:4px; z-index:2; width:9px; height:9px; border-radius:50%; background:var(--toxic); box-shadow:0 0 8px var(--toxic); animation:tbiPulse 1.6s ease-in-out infinite; }

/* Wachhund-CD + Bann-Chips */
.chip.c-dog.cd { opacity:.65; border-style:dashed; }
.chip.c-ban { border-color:var(--danger); color:#ff9a8a; font-size:12px; }
.chip.c-ban.next { opacity:.75; border-style:dashed; }

/* Kick-Button im Warteraum */
.seat { position:relative; }
.kick-btn { margin-left:8px; flex:none; width:30px; height:30px; border-radius:8px; border:1px solid var(--line); background:transparent; color:var(--ink-dim); font-weight:800; font-size:13px; }
.kick-btn:active { transform:scale(.94); }
@media(hover:hover){ .kick-btn:hover { border-color:var(--danger); color:#ff9a8a; } }

.cd-art.t-strategie .type-tab { color:var(--t-strategie); }

/* ---------- Zugzeit-Auswahl (Warteraum + Menü) ---------- */
.timepick { max-width:340px; margin:0 auto 12px; }
.timepick.inmenu { max-width:none; margin:0 0 4px; }
.tp-lbl { font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-dim); margin-bottom:7px; text-align:center; }
.tp-opts { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.tp-opt { flex:1 1 30%; min-width:78px; padding:9px 6px; border:1px solid var(--line); border-radius:10px; background:#0d0c14; color:var(--ink-dim); font-weight:700; font-size:13px; }
.tp-opt.on { border-color:var(--ember); background:rgba(255,122,47,.12); color:var(--ember-soft); }
.tp-opt:disabled { opacity:.55; cursor:default; }
.tp-opt:not(:disabled):active { transform:scale(.97); }

.tp-free { display:flex; gap:6px; flex:1 1 100%; margin-top:2px; }
.tp-free input { flex:1; min-width:0; padding:8px 10px; font-size:14px; text-align:center; }
.tp-free .tp-set { flex:0 0 auto; min-width:72px; }

/* ---------- Katastrophen-Eskalation ---------- */
.chip.c-sp.esk1 { border-color:#c9a05a; }
.chip.c-sp.esk2 { border-color:#e08a4a; box-shadow:0 0 12px rgba(224,138,74,.28); }
.chip.c-sp.esk3 { border-color:var(--danger); box-shadow:0 0 16px rgba(255,90,74,.4); animation:beaconPulse 2s ease-in-out infinite; }
.esk-tag { font-size:9px; font-weight:800; margin-left:3px; padding:1px 4px; border-radius:5px; background:#000a; color:#ffb09a; }
.beaconwarn b.ek1 { color:#e0c060; } .beaconwarn b.ek2 { color:#ffa060; } .beaconwarn b.ek3 { color:#ff7a6a; }
.kick-esk { color:#ffb09a; }
.esk-mini { margin-right:3px; font-size:11px; }
.esk-mini.ek1 { color:#e0c060; } .esk-mini.ek2 { color:#ffa060; } .esk-mini.ek3 { color:#ff7a6a; }

/* ---------- Einkommens-Vorschau ---------- */
.chip.c-inc { border-color:#3a5a4a; color:var(--toxic); gap:5px; }
.chip.c-inc .mi { width:13px; height:13px; }
.chip.c-inc .inc-lbl { font-size:9px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-dim); font-weight:800; margin-right:2px; }
.chip.c-inc.blocked { border-color:var(--danger); color:#ff9a8a; }

/* ---------- "Du bist dran" prominent ---------- */
.turnalert { position:fixed; inset:0; display:grid; place-items:center; pointer-events:none; z-index:46; }
.turnalert:empty { display:none; }
.ta { display:flex; align-items:center; gap:14px; padding:18px 34px; border-radius:18px;
  background:linear-gradient(180deg,rgba(40,22,12,.97),rgba(24,14,10,.97)); border:2px solid var(--ember);
  box-shadow:0 0 60px rgba(255,110,40,.5); animation:taIn .35s cubic-bezier(.2,1.4,.4,1), taOut .4s ease-in forwards 1.25s; }
.ta-ic { font-size:30px; color:var(--ember); }
.ta-tx { font-family:var(--serif); font-size:30px; font-weight:800; color:#ffe0c0; letter-spacing:.02em; white-space:nowrap; }
@keyframes taIn { from { opacity:0; transform:scale(.82); } to { opacity:1; transform:none; } }
@keyframes taOut { to { opacity:0; transform:scale(1.06); } }
body.myturn .table::after { content:""; position:fixed; inset:0; pointer-events:none; z-index:44;
  box-shadow:inset 0 0 0 3px var(--ember), inset 0 0 26px rgba(255,110,40,.28); animation:frameGlow 2.4s ease-in-out infinite; }
@keyframes frameGlow { 0%,100% { opacity:.5; } 50% { opacity:1; } }
body.myturn .hand-wrap { box-shadow:0 -10px 30px rgba(255,110,40,.16); }

/* ---------- Verwerten ---------- */
.disc-btn.salv { border-style:solid; border-color:#3a5a4a; color:var(--toxic); }
.disc-btn.salv b { color:var(--toxic); }
.cverw { font-size:9.5px; color:var(--toxic); font-weight:800; margin-top:3px; }