/* ============================================================================
   Erdacht und programmiert von Fabian Hammer, Spessartweg 10, 84048 Mainburg, Deutschland.
   (c) 2026 Fabian Hammer - Alle Rechte vorbehalten. Geistiges Eigentum.
   ============================================================================ */

@font-face { font-family: 'Cinzel'; font-weight: 700 900; font-display: swap; src: url(schrift/cinzel.woff2) format('woff2'); }
@font-face { font-family: 'Rajdhani'; font-weight: 500; font-display: swap; src: url(schrift/rajdhani-500.woff2) format('woff2'); }
@font-face { font-family: 'Rajdhani'; font-weight: 600; font-display: swap; src: url(schrift/rajdhani-600.woff2) format('woff2'); }
@font-face { font-family: 'Rajdhani'; font-weight: 700; font-display: swap; src: url(schrift/rajdhani-700.woff2) format('woff2'); }

:root {
  --grund: #0a0e15;
  --tafel: rgba(13, 17, 27, 0.82);
  --tafel-hell: rgba(255, 255, 255, 0.05);
  --rand: rgba(255, 211, 90, 0.2);
  --rand-hell: rgba(255, 255, 255, 0.09);
  --gold: #ffd35a;
  --gold-dunkel: #b8861c;
  --text: #eef2f7;
  --leise: #9aa7b8;
  --rot: #ff5d6c;
  --gruen: #7dff9a;
  --blau: #59c9ff;
  --hud-oben: 64px;
  --hud-unten: 104px;
  --seite: 0px;
  --schrift: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  --titel: 'Cinzel', Georgia, serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--grund); color: var(--text); font-family: var(--schrift); font-size: 17px; font-weight: 500; -webkit-tap-highlight-color: transparent; }
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }

#leinwand { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; touch-action: none; }
/* eine Canvas streckt sich nicht über top/bottom – die Höhe muss ausdrücklich stehen */
body.mit-seite { --seite: 232px; }
body.im-spiel #leinwand { width: calc(100vw - var(--seite)); top: var(--hud-oben); height: calc(100vh - var(--hud-oben) - var(--hud-unten)); height: calc(100dvh - var(--hud-oben) - var(--hud-unten)); }
#dimmer { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 40%, rgba(5, 8, 14, 0.25), rgba(5, 8, 14, 0.82)); transition: opacity 0.4s; }
body.im-spiel #dimmer { opacity: 0; }

/* ---------------------------------------------------------------- Schirme / Tafeln */
.schirm { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; padding: 24px 16px; overflow-y: auto; }
.schirm.aktiv { display: flex; animation: einblenden 0.35s ease; }
@keyframes einblenden { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.tafel { position: relative; width: min(560px, 100%); max-height: calc(100vh - 48px); overflow-y: auto; background: var(--tafel); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border: 1px solid var(--rand); border-radius: 18px; padding: 22px 26px 26px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06); margin: auto; }
.tafel.breit { width: min(980px, 100%); }
.tafel-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.tafel-kopf h2 { flex: 1; }
h1, h2, h3 { font-family: var(--titel); font-weight: 700; margin: 0; letter-spacing: 0.04em; }
h2 { font-size: 26px; color: var(--gold); text-shadow: 0 2px 12px rgba(255, 180, 40, 0.25); }
h3 { font-size: 15px; color: var(--leise); text-transform: uppercase; letter-spacing: 0.14em; margin: 20px 0 10px; }
h4 { margin: 18px 0 8px; font-size: 15px; color: var(--leise); display: flex; align-items: center; gap: 8px; }
.info { margin: 6px 0 0; color: var(--leise); font-size: 14.5px; line-height: 1.35; }
.info::before { content: 'ⓘ '; color: var(--gold); opacity: 0.8; }

.zurueck { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--rand-hell); background: var(--tafel-hell); cursor: pointer; font-size: 22px; line-height: 1; display: grid; place-items: center; transition: background 0.15s; }
.zurueck:hover { background: rgba(255, 255, 255, 0.12); }

/* ---------------------------------------------------------------- Knöpfe */
.knopf { position: relative; border: 1px solid var(--rand-hell); background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)); padding: 10px 18px; border-radius: 12px; cursor: pointer; font-weight: 700; font-size: 17px; letter-spacing: 0.03em; transition: transform 0.12s, background 0.15s, box-shadow 0.15s, border-color 0.15s; }
.knopf:hover:not(:disabled) { background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06)); border-color: rgba(255, 255, 255, 0.2); transform: translateY(-1px); }
.knopf:active:not(:disabled) { transform: translateY(1px); }
.knopf:disabled { opacity: 0.45; cursor: not-allowed; }
.knopf:focus-visible, .zurueck:focus-visible, .karte-wahl button:focus-visible, .segment button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.knopf.gold { background: linear-gradient(180deg, #ffe08a, #e8a92c); color: #2a1a04; border-color: #ffe9a8; box-shadow: 0 6px 22px rgba(255, 190, 60, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
.knopf.gold:hover:not(:disabled) { background: linear-gradient(180deg, #fff0b8, #f2b83c); }
.knopf.rot { background: linear-gradient(180deg, #ff8090, #d63a4c); border-color: #ffa0aa; color: #fff; }
.knopf.gross { padding: 14px 26px; font-size: 20px; }
.knopf small { font-weight: 600; opacity: 0.75; font-size: 14px; display: block; }
.mini { border: 1px solid var(--rand-hell); background: var(--tafel-hell); border-radius: 8px; padding: 3px 10px; cursor: pointer; font-weight: 600; font-size: 14px; }
.mini:hover { background: rgba(255, 255, 255, 0.12); }
.aktionen { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; margin-top: 24px; }
.tafel > .aktionen { position: sticky; bottom: -26px; margin: 24px -26px -26px; padding: 14px 26px 18px; background: linear-gradient(180deg, rgba(13, 17, 27, 0), rgba(13, 17, 27, 0.96) 30%); border-radius: 0 0 18px 18px; z-index: 2; }

/* ---------------------------------------------------------------- Hauptmenü */
#s-menue { flex-direction: column; gap: 34px; }
.logo-block { text-align: center; }
.logo-block svg { width: 96px; height: 110px; filter: drop-shadow(0 10px 30px rgba(255, 180, 40, 0.35)); animation: schweben 5s ease-in-out infinite; }
@keyframes schweben { 50% { transform: translateY(-6px); } }
.logo-block h1 { font-size: clamp(54px, 11vw, 112px); font-weight: 900; letter-spacing: 0.12em; background: linear-gradient(180deg, #fff6d6 10%, #ffd35a 50%, #c4841a 90%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 24px rgba(255, 170, 40, 0.35)); line-height: 1; margin-top: 6px; }
.unterzeile { margin: 6px 0 0; letter-spacing: 0.5em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); font-weight: 600; font-size: 14px; }
.menue-knoepfe { display: grid; gap: 12px; width: min(360px, 100%); }
.menue-knoepfe .knopf { width: 100%; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background: rgba(12, 16, 26, 0.62); }
.menue-knoepfe .knopf.gold { background: linear-gradient(180deg, #ffe08a, #e8a92c); }
.fuss { position: fixed; bottom: 12px; left: 0; right: 0; text-align: center; color: rgba(255, 255, 255, 0.35); font-size: 13px; letter-spacing: 0.08em; }

/* ---------------------------------------------------------------- Karten- und Stufenwahl */
.karten-wahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.karten-wahl button { position: relative; padding: 0; border: 2px solid transparent; border-radius: 14px; overflow: hidden; cursor: pointer; background: #111; text-align: left; transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; }
.karten-wahl button img { display: block; width: 100%; aspect-ratio: 5 / 3; object-fit: cover; }
.karten-wahl button .name { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 8px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.85)); font-family: var(--titel); font-weight: 700; font-size: 17px; }
.karten-wahl button:hover { transform: translateY(-2px); }
.karten-wahl button.an { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255, 211, 90, 0.25), 0 12px 30px rgba(0, 0, 0, 0.5); }
.karten-wahl.klein { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.karten-wahl.klein button .name { font-size: 14px; padding: 16px 8px 6px; }

.segment { display: inline-flex; flex-wrap: wrap; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--rand-hell); border-radius: 12px; padding: 4px; gap: 4px; }
.segment button { border: 0; background: transparent; padding: 8px 18px; border-radius: 9px; cursor: pointer; font-weight: 700; color: var(--leise); transition: background 0.15s, color 0.15s; }
.segment button.an { background: linear-gradient(180deg, rgba(255, 211, 90, 0.95), rgba(222, 160, 40, 0.95)); color: #241604; }
.segment button:hover:not(.an) { color: var(--text); background: rgba(255, 255, 255, 0.06); }

.feld { display: grid; gap: 6px; margin-top: 12px; font-weight: 600; color: var(--leise); font-size: 15px; }
.feld input, .feld select, .code-zeile input, .chat input, #chat-hud-eingabe { background: rgba(0, 0, 0, 0.4); border: 1px solid var(--rand-hell); border-radius: 10px; padding: 10px 12px; color: var(--text); font-weight: 600; font-size: 17px; outline: none; transition: border-color 0.15s; }
.feld input:focus, .feld select:focus, .code-zeile input:focus, .chat input:focus, #chat-hud-eingabe:focus { border-color: var(--gold); }
.feld select option { background: #1a1f2b; }
.zwei-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.karte-block { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--rand-hell); border-radius: 14px; padding: 4px 18px 18px; }
.code-zeile { display: flex; gap: 10px; }
.code-zeile input { flex: 1; text-transform: uppercase; letter-spacing: 0.4em; font-family: var(--titel); text-align: center; min-width: 0; }

.schalter { display: flex; align-items: center; gap: 12px; margin-top: 14px; cursor: pointer; font-weight: 600; }
.schalter input { position: absolute; opacity: 0; width: 0; height: 0; }
.schalter span { position: relative; width: 46px; height: 26px; border-radius: 13px; background: rgba(255, 255, 255, 0.15); transition: background 0.2s; flex: none; }
.schalter span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform 0.2s; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); }
.schalter input:checked + span { background: var(--gold-dunkel); }
.schalter input:checked + span::after { transform: translateX(20px); }
.schalter input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }

.regler { margin-top: 16px; }
.regler label { display: flex; justify-content: space-between; font-weight: 700; }
.regler label output { color: var(--gold); }
.regler input[type=range] { width: 100%; accent-color: var(--gold); margin: 8px 0 0; }
.regler .stellung { margin: 2px 0 0; color: var(--text); font-size: 14.5px; opacity: 0.85; }

.raumliste, .spielerliste { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.raumliste li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--rand-hell); }
.raumliste li .code { font-family: var(--titel); color: var(--gold); letter-spacing: 0.2em; }
.raumliste li .was { flex: 1; color: var(--leise); font-size: 15px; }
.raumliste .leer { color: var(--leise); justify-content: center; }
.spielerliste li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--rand-hell); font-weight: 700; }
.spielerliste .punkt { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 10px currentColor; }
.spielerliste .rolle { margin-left: auto; font-size: 14px; color: var(--leise); }
.spielerliste .bereit { color: var(--gruen); }
.spielerliste .offline { opacity: 0.45; }
.code { font-family: var(--titel); color: var(--gold); letter-spacing: 0.25em; }
.netzstatus { font-size: 14px; color: var(--leise); }
.netzstatus.ok { color: var(--gruen); }

.chat { display: flex; flex-direction: column; min-height: 280px; }
.chat-log { flex: 1; min-height: 200px; max-height: 320px; overflow-y: auto; background: rgba(0, 0, 0, 0.3); border-radius: 10px; padding: 10px 12px; font-size: 15.5px; line-height: 1.4; border: 1px solid var(--rand-hell); }
.chat-log .sys { color: var(--leise); font-style: italic; }
.chat form { display: flex; gap: 8px; margin-top: 8px; }
.chat form input { flex: 1; min-width: 0; }

/* ---------------------------------------------------------------- Bestenliste / Anleitung */
.tabelle { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 16px; }
.tabelle th { text-align: left; color: var(--leise); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; padding: 6px 8px; border-bottom: 1px solid var(--rand-hell); }
.tabelle td { padding: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.tabelle tr:nth-child(1) td:first-child { color: var(--gold); font-weight: 700; }
.filterzeile { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.filterzeile select { background: rgba(0, 0, 0, 0.4); border: 1px solid var(--rand-hell); border-radius: 10px; padding: 8px 10px; }
.liste-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.eintrag { display: flex; gap: 12px; align-items: flex-start; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--rand-hell); border-radius: 12px; padding: 10px 12px; }
.eintrag img { width: 52px; height: 52px; flex: none; }
.eintrag b { display: block; font-size: 17px; }
.eintrag span { color: var(--leise); font-size: 14.5px; line-height: 1.3; display: block; }
.tasten { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; }
kbd { display: inline-block; min-width: 28px; text-align: center; padding: 2px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); border-bottom-width: 3px; font-family: var(--schrift); font-weight: 700; }

/* ---------------------------------------------------------------- Spiel-HUD */
#hud { position: fixed; inset: 0; pointer-events: none; }
#hud > * { pointer-events: auto; }
.hud-oben { position: absolute; top: 0; left: 0; right: 0; height: var(--hud-oben); display: flex; align-items: center; gap: 16px; padding: 0 14px; background: linear-gradient(180deg, rgba(10, 13, 21, 0.96), rgba(10, 13, 21, 0.86)); border-bottom: 1px solid var(--rand); }
.hud-werte { display: flex; align-items: center; gap: 18px; flex: 1; min-width: 0; }
.wert { display: flex; align-items: baseline; gap: 6px; font-size: 16px; color: var(--leise); white-space: nowrap; }
.wert b { font-size: 26px; color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; transition: color 0.3s; }
.wert.leben b { color: #ff8a96; }
.wert.gold b { color: var(--gold); }
.wert small { font-size: 14px; }
.wert svg, .wert .muenze { width: 22px; height: 22px; align-self: center; }
.muenze { display: inline-block; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6c0, #ffd35a 45%, #b8861c); box-shadow: 0 0 10px rgba(255, 211, 90, 0.5); }
.wert.puls b { animation: puls 0.5s; }
@keyframes puls { 30% { transform: scale(1.25); color: #fff; } }
.vorschau { display: flex; gap: 4px; align-items: center; padding: 4px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--rand-hell); font-size: 13px; color: var(--leise); }
.vorschau img { width: 26px; height: 26px; }
.vorschau span { font-weight: 700; color: var(--text); margin-right: 6px; font-size: 14px; }
.hud-mitte { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.welle-knopf { padding: 8px 18px; font-size: 16px; }
.welle-knopf.puls { animation: knopfpuls 1.6s infinite; }
@keyframes knopfpuls { 50% { box-shadow: 0 0 0 6px rgba(255, 211, 90, 0.25), 0 6px 22px rgba(255, 190, 60, 0.5); } }
#h-countdown { font-size: 13px; color: var(--leise); min-height: 16px; }
.hud-rechts { display: flex; align-items: center; gap: 10px; flex: 1; justify-content: flex-end; }
.tempo { display: inline-flex; background: rgba(0, 0, 0, 0.35); border-radius: 10px; padding: 3px; border: 1px solid var(--rand-hell); }
.tempo button { border: 0; background: transparent; padding: 5px 10px; border-radius: 7px; cursor: pointer; font-weight: 700; color: var(--leise); }
.tempo button.an { background: rgba(255, 211, 90, 0.9); color: #241604; }
.tempo button:disabled { cursor: default; }
.rund { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rand); background: rgba(255, 255, 255, 0.07); cursor: pointer; display: grid; place-items: center; color: var(--text); transition: background 0.15s; }
.rund:hover { background: rgba(255, 255, 255, 0.16); }

.bauleiste { position: absolute; left: 0; right: 0; bottom: 0; height: var(--hud-unten); display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 12px; background: linear-gradient(0deg, rgba(10, 13, 21, 0.97), rgba(10, 13, 21, 0.86)); border-top: 1px solid var(--rand); overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.bau { position: relative; flex: none; width: 92px; height: 88px; border-radius: 12px; border: 1px solid var(--rand-hell); background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 0 2px 5px; transition: transform 0.12s, border-color 0.15s, background 0.15s; }
.bau img { width: 54px; height: 54px; position: absolute; top: 2px; left: 50%; transform: translateX(-50%); filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.5)); }
.bau .n { font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap; }
.bau .p { font-size: 14px; font-weight: 700; color: var(--gold); line-height: 1.1; }
.bau kbd { position: absolute; top: 4px; left: 5px; font-size: 11px; min-width: 18px; padding: 0 4px; border-bottom-width: 2px; }
.bau:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.25); }
.bau.an { border-color: var(--gold); background: linear-gradient(180deg, rgba(255, 211, 90, 0.22), rgba(255, 211, 90, 0.05)); box-shadow: 0 0 0 2px rgba(255, 211, 90, 0.25); }
.bau.teuer { opacity: 0.5; }
.bau.teuer .p { color: var(--rot); }
.bau.faehigkeit { width: 96px; background: linear-gradient(180deg, rgba(255, 120, 40, 0.18), rgba(255, 120, 40, 0.04)); border-color: rgba(255, 140, 60, 0.4); }
.bau .abkling { position: absolute; inset: 0; border-radius: 12px; background: conic-gradient(rgba(0, 0, 0, 0.65) var(--anteil, 0%), transparent 0); display: grid; place-items: center; font-weight: 700; font-size: 22px; }
.trenner { width: 1px; height: 64px; background: var(--rand-hell); margin: 0 4px; flex: none; }

.turm-tafel { position: absolute; right: 12px; top: calc(var(--hud-oben) + 12px); width: 280px; z-index: 5; background: var(--tafel); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--rand); border-radius: 16px; padding: 14px 16px 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); animation: einblenden 0.2s; }
.turm-tafel .kopf { display: flex; align-items: center; gap: 10px; }
.turm-tafel .kopf img { width: 56px; height: 56px; }
.turm-tafel .kopf b { font-family: var(--titel); font-size: 18px; display: block; }
.turm-tafel .kopf .sterne { color: var(--gold); letter-spacing: 2px; }
.turm-tafel .schliessen { margin-left: auto; align-self: flex-start; background: none; border: 0; font-size: 22px; cursor: pointer; color: var(--leise); }
.werte { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; margin: 10px 0; font-size: 15px; }
.werte span { color: var(--leise); }
.werte b { text-align: right; font-variant-numeric: tabular-nums; }
.werte .plus { color: var(--gruen); font-size: 13px; margin-left: 4px; }
.zielmodi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 8px 0 12px; }
.zielmodi button { border: 1px solid var(--rand-hell); background: rgba(255, 255, 255, 0.04); border-radius: 8px; padding: 5px 2px; font-size: 13px; font-weight: 700; cursor: pointer; color: var(--leise); }
.zielmodi button.an { background: rgba(89, 201, 255, 0.22); border-color: var(--blau); color: var(--text); }
.turm-tafel .knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.turm-tafel .knoepfe .knopf { padding: 9px 6px; font-size: 15px; }

.seitenleiste { position: absolute; right: 0; top: var(--hud-oben); bottom: var(--hud-unten); width: var(--seite); padding: 10px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; overflow-x: hidden; background: linear-gradient(90deg, rgba(10, 13, 21, 0.9), rgba(10, 13, 21, 0.97)); border-left: 1px solid var(--rand); scrollbar-width: thin; }
.seitenleiste .titel-klein { font-size: 12.5px; color: var(--leise); text-transform: uppercase; letter-spacing: 0.1em; }
.hud-mitspieler { display: grid; gap: 6px; }
.mitspieler { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; background: var(--tafel); border: 1px solid var(--rand-hell); font-weight: 700; font-size: 15px; }
.mitspieler .punkt { width: 10px; height: 10px; border-radius: 50%; }
.mitspieler .g { color: var(--gold); margin-left: auto; font-variant-numeric: tabular-nums; }
.mitspieler .mini { padding: 1px 7px; font-size: 13px; }

.hud-gegner { display: grid; gap: 8px; }
.gegner-karte { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--rand-hell); border-radius: 12px; padding: 6px; width: 100%; text-align: left; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, opacity 0.2s; }
.gegner-karte canvas { width: 100%; height: auto; aspect-ratio: 5 / 3; border-radius: 8px; display: block; }
.gegner-karte .zeile { display: flex; justify-content: space-between; gap: 8px; margin-top: 5px; font-weight: 700; font-size: 15px; }
.gegner-karte .punkt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.gegner-karte .zielmarke { display: none; color: #ff8fa8; font-size: 12.5px; font-weight: 700; margin-top: 2px; }
.gegner-karte.ziel { border-color: #ff6f91; box-shadow: 0 0 0 2px rgba(255, 111, 145, 0.3); }
.gegner-karte.ziel .zielmarke { display: block; }
.gegner-karte.aus { opacity: 0.4; cursor: default; }
.soeldner .titel { font-size: 12.5px; color: var(--leise); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; display: grid; gap: 2px; }
.soeldner .titel b { color: var(--gold); }
.soeldner .reihe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.soeldner button { width: 100%; border-radius: 10px; border: 1px solid var(--rand-hell); background: rgba(255, 255, 255, 0.05); cursor: pointer; padding: 3px 2px 4px; display: flex; flex-direction: column; align-items: center; font-weight: 700; font-size: 12px; line-height: 1.1; }
.soeldner button img { width: 30px; height: 30px; }
.soeldner button .p { color: var(--gold); }
.soeldner button .e { color: var(--gruen); }
.soeldner button:disabled { opacity: 0.4; cursor: not-allowed; }
.soeldner button:hover:not(:disabled) { border-color: rgba(255, 255, 255, 0.3); }

.banner { position: absolute; top: calc(var(--hud-oben) + 26%); left: 50%; transform: translateX(-50%); text-align: center; pointer-events: none !important; opacity: 0; }
.banner.zeigen { animation: banner 2.6s ease forwards; }
@keyframes banner { 0% { opacity: 0; transform: translate(-50%, 20px) scale(0.9); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -14px); } }
.banner b { display: block; font-family: var(--titel); font-weight: 900; font-size: clamp(36px, 6vw, 64px); letter-spacing: 0.08em; color: #fff; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.8), 0 0 40px rgba(255, 200, 80, 0.45); }
.banner span { font-size: 20px; font-weight: 700; color: var(--gold); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8); }
.banner.boss b { color: #ffb0a0; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.8), 0 0 50px rgba(255, 60, 40, 0.7); }

.toasts { position: fixed; left: 50%; transform: translateX(-50%); top: calc(var(--hud-oben) + 14px); display: grid; gap: 6px; justify-items: center; pointer-events: none !important; z-index: 45; }
body:not(.im-spiel) .toasts { top: auto; bottom: 24px; }
.toast { padding: 8px 16px; border-radius: 10px; background: rgba(12, 16, 26, 0.92); border: 1px solid var(--rand-hell); font-weight: 700; animation: toast 3s forwards; }
.toast.fehler { border-color: rgba(255, 93, 108, 0.6); color: #ffc0c6; }
@keyframes toast { 0% { opacity: 0; transform: translateY(8px); } 8%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }

.chat-hud { margin-top: auto; width: 100%; }
#chat-hud-log { display: grid; gap: 2px; margin-bottom: 6px; font-size: 15px; text-shadow: 0 1px 3px #000; }
#chat-hud-log div { animation: chatweg 12s forwards; }
@keyframes chatweg { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }
#chat-hud-eingabe { width: 100%; padding: 6px 10px; font-size: 15px; background: rgba(0, 0, 0, 0.55); opacity: 0.7; }
#chat-hud-eingabe:focus { opacity: 1; }

/* ---------------------------------------------------------------- Overlays */
.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(4, 6, 12, 0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 20; padding: 16px; animation: einblenden 0.25s; }
.overlay .tafel { text-align: center; }
.overlay .knopf-stapel { display: grid; gap: 10px; margin-top: 20px; }
.overlay h2 { font-size: 40px; }
.pause-titel { font-size: 54px !important; letter-spacing: 0.3em; }
.ende-titel.sieg { color: var(--gold); }
.ende-titel.niederlage { color: var(--rot); text-shadow: 0 2px 20px rgba(255, 60, 80, 0.4); }
.statistik { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 18px 0 6px; }
.statistik div { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--rand-hell); border-radius: 12px; padding: 10px; }
.statistik b { display: block; font-size: 26px; color: var(--gold); }
.statistik span { color: var(--leise); font-size: 14px; }
.eintragen { display: flex; gap: 8px; margin-top: 14px; }
.eintragen input { flex: 1; min-width: 0; background: rgba(0, 0, 0, 0.4); border: 1px solid var(--rand-hell); border-radius: 10px; padding: 10px 12px; }
#o-countdown { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none; }
.gross-zahl { font-family: var(--titel); font-size: 140px; font-weight: 900; color: #fff; text-shadow: 0 0 40px rgba(255, 211, 90, 0.7), 0 8px 30px #000; animation: zahl 1s infinite; }
@keyframes zahl { 0% { transform: scale(1.4); opacity: 0; } 30% { transform: scale(1); opacity: 1; } 100% { opacity: 0.2; } }
.drehhinweis { display: none; }

/* ---------------------------------------------------------------- Schmal */
@media (max-width: 900px) {
  :root { --hud-oben: 56px; --hud-unten: 92px; }
  .zwei-spalten { grid-template-columns: 1fr; }
  .vorschau { display: none; }
  .wert b { font-size: 21px; }
  .hud-werte { gap: 10px; }
  .wert.welle small, .wert .label { display: none; }
  .bau { width: 74px; height: 78px; }
  .bau img { width: 46px; height: 46px; }
  .bau .n { font-size: 11.5px; }
  .bauleiste { justify-content: flex-start; }
  .turm-tafel { width: min(280px, calc(100vw - 24px)); }
  body.mit-seite { --seite: 176px; }
  .seitenleiste { padding: 6px; gap: 6px; }
  .soeldner button img { width: 24px; height: 24px; }
  .tafel { padding: 18px 16px 20px; }
  .tafel > .aktionen { bottom: -20px; margin: 20px -16px -20px; padding: 12px 16px 16px; }
}
@media (max-width: 600px) {
  .welle-knopf { padding: 6px 10px; font-size: 14px; }
  .tempo button { padding: 4px 6px; }
  .hud-oben { gap: 8px; padding: 0 8px; }
}
@media (orientation: portrait) and (max-width: 700px) {
  body.im-spiel .drehhinweis { display: block; animation: chatweg 6s forwards; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5; background: var(--tafel); border: 1px solid var(--rand); border-radius: 14px; padding: 14px 18px; text-align: center; pointer-events: none; font-weight: 700; opacity: 0.92; }
}
.mitspieler > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zoom { display: inline-flex; gap: 4px; }
.rund.klein { width: 34px; height: 34px; font-size: 19px; font-weight: 700; line-height: 1; }
@media (max-width: 600px) { .zoom { display: none; } }
.karten-gruppe + .karten-gruppe { margin-top: 16px; }
.karten-titel { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--leise); }
.karten-titel::after { content: ''; flex: 1; height: 1px; background: var(--rand-hell); }
.karten-gruppe:nth-child(2) .karten-titel { color: var(--gold); }
.karten-wahl button .abzeichen { position: absolute; top: 8px; right: 8px; padding: 2px 9px; border-radius: 999px; background: linear-gradient(180deg, #ffe08a, #e8a92c); color: #241604; font-weight: 700; font-size: 12px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); }
.karten-wahl.klein button .abzeichen { top: 6px; right: 6px; font-size: 11px; padding: 1px 7px; }
.feld select optgroup { background: #1a1f2b; color: var(--gold); font-style: normal; }
.tafel, .seitenleiste, .chat-log { scrollbar-width: thin; scrollbar-color: rgba(255, 211, 90, 0.35) transparent; }
.tafel::-webkit-scrollbar, .seitenleiste::-webkit-scrollbar, .chat-log::-webkit-scrollbar { width: 8px; }
.tafel::-webkit-scrollbar-thumb, .seitenleiste::-webkit-scrollbar-thumb, .chat-log::-webkit-scrollbar-thumb { background: rgba(255, 211, 90, 0.3); border-radius: 8px; }
.tafel::-webkit-scrollbar-track, .seitenleiste::-webkit-scrollbar-track, .chat-log::-webkit-scrollbar-track { background: transparent; }
.hud-gegner.sehr-viele { grid-template-columns: 1fr 1fr; gap: 6px; }
.hud-gegner.sehr-viele .gegner-karte { padding: 4px; }
.hud-gegner.sehr-viele .gegner-karte .zeile { font-size: 12.5px; flex-direction: column; gap: 0; }
.gegner-karte .gname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ki-marke, .team-marke { margin-left: 5px; padding: 0 5px; border-radius: 5px; font-size: 10.5px; vertical-align: 1px; }
.ki-marke { background: rgba(255, 138, 90, 0.25); color: #ffb08a; }
.team-marke { background: rgba(125, 255, 154, 0.18); color: var(--gruen); }
.gegner-karte.kollege { cursor: default; border-style: dashed; }
.spielerliste .ki-zeile { opacity: 0.75; border-style: dashed; }