/* ============================================================================
   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: #0b0d12; --tafel: #141821; --tafel2: #1b2130; --rand: #2c3446; --rand2: #3c4660;
  --text: #e6e2d6; --blass: #9aa0ae; --gold: #d6a85a; --gold2: #f3cf86; --glut: #b0283c; --gruen: #5fd17a; --rot: #ff5a5a;
  --quarz: #b98cff; --leiste: 172px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--grund); color: var(--text); font: 600 15px/1.35 Rajdhani, system-ui, sans-serif; overflow: hidden; }
button, input, select { font: inherit; color: inherit; }
button { background: linear-gradient(#2a3244, #1c2230); border: 1px solid var(--rand2); border-radius: 6px; padding: 7px 14px; cursor: pointer; letter-spacing: .02em; }
button:hover:not(:disabled) { border-color: var(--gold); color: var(--gold2); }
button:disabled { opacity: .45; cursor: default; }
button.gross { background: linear-gradient(#7a2232, #4a1420); border-color: #b04050; font-size: 17px; padding: 9px 20px; }
button.gross:hover:not(:disabled) { background: linear-gradient(#93293c, #5a1828); color: #fff; }
button.link { background: none; border: 0; padding: 0 4px; color: var(--gold); text-decoration: underline; }
input, select { background: #0f131b; border: 1px solid var(--rand2); border-radius: 5px; padding: 6px 8px; }
input[type=range] { padding: 0; accent-color: var(--gold); }
input[type=checkbox] { accent-color: var(--gold); width: 18px; height: 18px; }
kbd { background: #222a3a; border: 1px solid var(--rand2); border-radius: 4px; padding: 0 5px; font-size: 13px; }
h1, h2, h3 { font-family: Cinzel, serif; font-weight: 700; letter-spacing: .04em; margin: 0 0 8px; }
h2 { font-size: 24px; } h3 { font-size: 16px; color: var(--gold2); margin-top: 14px; }
.info { color: var(--blass); font-weight: 500; font-size: 13.5px; margin: 2px 0 8px; }
.klein { font-size: 13px; color: var(--blass); }
.fehler { color: var(--rot); }
.zeile { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.zeile.mitte { justify-content: center; }
.spalte { display: flex; flex-direction: column; gap: 8px; }
.spalte.zeilig { flex-direction: row; justify-content: flex-end; flex-wrap: wrap; }

.schirm { position: fixed; inset: 0; display: none; }
.schirm.aktiv { display: block; }

/* ------------------------------------------------ Hauptmenü */
#s-menue { display: none; place-items: center; }
#s-menue.aktiv { display: grid; }
.menue-hintergrund { position: absolute; inset: 0; }
#menue-bild { width: 100%; height: 100%; display: block; }
.menue-kasten { position: relative; text-align: center; padding: 34px 40px 22px; background: rgba(12, 14, 20, .78); border: 1px solid var(--rand2);
  border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 0 60px rgba(176, 40, 60, .12); backdrop-filter: blur(4px); width: min(460px, 92vw); }
.logo { width: 88px; height: 88px; filter: drop-shadow(0 0 18px rgba(185, 140, 255, .45)); }
.menue-kasten h1 { font-size: 44px; color: var(--gold2); text-shadow: 0 2px 0 #3a1a10, 0 0 26px rgba(214, 168, 90, .35); margin: 6px 0 2px; }
.unterzeile { color: var(--blass); margin: 0 0 14px; }
.name-zeile { margin-bottom: 16px; }
.menue-knoepfe { display: flex; flex-direction: column; gap: 10px; }
.menue-knoepfe button { width: 100%; }
.fuss { margin: 18px 0 0; font-size: 12px; color: #6d7384; }

/* ------------------------------------------------ Tafeln */
.tafel { position: relative; margin: 4vh auto; width: min(640px, 94vw); max-height: 92vh; overflow: auto; background: linear-gradient(var(--tafel), #10141c);
  border: 1px solid var(--rand2); border-radius: 12px; padding: 18px 22px; box-shadow: 0 20px 60px rgba(0,0,0,.55); }
.tafel.breit { width: min(1180px, 96vw); }
.tafel.klein { width: min(380px, 92vw); text-align: center; }
.tafel header { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.tafel header h2 { margin: 0; }
.tafel footer { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 12px; border-top: 1px solid var(--rand); padding-top: 12px; }
.tafel footer .fehler { margin-right: auto; }
.zurueck { padding: 5px 10px; }
.status { margin-left: auto; color: var(--blass); font-size: 13px; }
.raumcode { margin-left: auto; font-family: Cinzel, serif; font-size: 22px; letter-spacing: .25em; color: var(--gold2); background: #0f131b; border: 1px dashed var(--gold); padding: 2px 12px; border-radius: 6px; cursor: copy; }

.mp-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.karte-kasten { background: var(--tafel2); border: 1px solid var(--rand); border-radius: 10px; padding: 12px 14px; }
.karte-kasten h3 { margin-top: 0; }
#mp-code { width: 110px; text-transform: uppercase; letter-spacing: .3em; font-family: Cinzel, serif; }
.raumliste { display: grid; gap: 8px; }
.raumliste .raum { display: flex; gap: 12px; align-items: center; background: var(--tafel2); border: 1px solid var(--rand); border-radius: 8px; padding: 8px 12px; }
.raumliste .raum b { font-family: Cinzel, serif; color: var(--gold2); letter-spacing: .15em; }
.raumliste .raum span { color: var(--blass); }
.raumliste .raum button { margin-left: auto; }
.leer { color: var(--blass); }

/* ------------------------------------------------ Aufstellung */
.auf-raster { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; }
.vorlagen-zeile label { color: var(--gold2); }
.vorlagen-zeile select { flex: 1; }
.slots { display: grid; gap: 6px; margin: 6px 0 12px; }
.slot { display: grid; grid-template-columns: 22px minmax(90px, 1.3fr) minmax(90px, 1fr) 62px 46px; gap: 6px; align-items: center; background: var(--tafel2);
  border: 1px solid var(--rand); border-left: 5px solid var(--farbe, #444); border-radius: 7px; padding: 5px 7px; }
.slot .nr { color: var(--blass); text-align: center; }
.slot select { padding: 4px 4px; min-width: 0; width: 100%; }
.slot .wer { display: flex; align-items: center; gap: 6px; min-width: 0; }
.slot .wer b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot .wer i { font-style: normal; font-size: 12px; color: var(--gruen); }
.slot .wer i.nein { color: var(--blass); }
.slot.zu { opacity: .5; }
.slot .farbe-knopf { width: 100%; height: 28px; padding: 0; border-radius: 5px; background: var(--farbe); border: 2px solid rgba(255,255,255,.35); }
.optionen { display: grid; grid-template-columns: 1fr; gap: 2px; background: var(--tafel2); border: 1px solid var(--rand); border-radius: 8px; padding: 10px 12px; }
.optionen label { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.optionen label.haken { justify-content: flex-start; }
.optionen .info { margin: 0 0 6px; }
.kartenkopf { display: flex; gap: 12px; align-items: flex-start; }
#auf-vorschau { width: 150px; height: 150px; border-radius: 8px; border: 1px solid var(--rand2); background: #000; image-rendering: auto; flex: none; }
.kartenkopf h3 { margin-top: 2px; }
.spielerzahl { display: flex; gap: 4px; margin: 10px 0 6px; flex-wrap: wrap; }
.spielerzahl button { padding: 3px 10px; }
.spielerzahl button.an { border-color: var(--gold); color: var(--gold2); background: #2b2a24; }
.kartenliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; max-height: 300px; overflow: auto; padding-right: 2px; }
.kartenliste button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px; font-size: 13px; }
.kartenliste button canvas { width: 100%; aspect-ratio: 1; border-radius: 4px; background: #000; }
.kartenliste button.an { border-color: var(--gold); background: #2b2a24; color: var(--gold2); }
.kartenliste button:disabled { opacity: .45; }
.chat-kasten { margin-top: 10px; background: #0f131b; border: 1px solid var(--rand); border-radius: 8px; padding: 6px; }
.chatlog { max-height: 150px; overflow: auto; font-size: 14px; font-weight: 500; }
.chatlog p { margin: 1px 0; }
.chatlog .sys { color: var(--blass); font-style: italic; }
.chat-kasten input { width: 100%; margin-top: 6px; }

/* ------------------------------------------------ Einstellungen & Hilfe */
.einst-liste { display: grid; gap: 2px; }
.einst-liste label { display: flex; align-items: center; gap: 10px; justify-content: space-between; margin-top: 8px; }
.einst-liste label input[type=range] { flex: 1; max-width: 260px; }
.einst-liste label b { width: 90px; text-align: right; color: var(--gold2); font-weight: 600; }
.farbwahl { display: flex; flex-wrap: wrap; gap: 5px; }
.farbwahl button { width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 2px solid transparent; }
.farbwahl button.an { border-color: #fff; box-shadow: 0 0 0 2px var(--gold); }
.hilfe ul { padding-left: 18px; font-weight: 500; }
.hilfe li { margin: 4px 0; }
.fraktionen { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.fraktion { background: var(--tafel2); border: 1px solid var(--rand); border-top: 4px solid var(--fc); border-radius: 8px; padding: 10px 12px; font-weight: 500; }
.fraktion h4 { margin: 0; font-family: Cinzel, serif; color: var(--gold2); font-size: 17px; }
.fraktion .titel { color: var(--blass); font-size: 13px; }
.fraktion p { margin: 5px 0; font-size: 14px; }
.fraktion .einheiten { font-size: 13px; color: #c3c7d2; }
.rollen { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 14px; font-weight: 500; font-size: 14px; }

/* ------------------------------------------------ Spiel */
#s-spiel { background: #000; }
#welt { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% - var(--leiste)); display: block; touch-action: none; }
#hud-oben { position: absolute; left: 0; right: 0; top: 0; height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 8px;
  background: linear-gradient(rgba(10,12,18,.92), rgba(10,12,18,.6)); border-bottom: 1px solid rgba(214,168,90,.25); pointer-events: none; }
#hud-oben > * { pointer-events: auto; }
.spacer { flex: 1; pointer-events: none !important; }
.hud-knopf { padding: 3px 9px; min-width: 34px; position: relative; }
.hud-knopf.aus { opacity: .45; }
.hud-knopf i { position: absolute; top: -4px; right: -4px; background: var(--glut); color: #fff; font-style: normal; font-size: 11px; border-radius: 8px; padding: 0 5px; }
.geld { display: flex; align-items: center; gap: 6px; font-size: 19px; color: var(--quarz); min-width: 110px; }
.quarz-symbol { width: 14px; height: 18px; background: linear-gradient(135deg, #f0d8ff, #9a5cff 55%, #4a2390); clip-path: polygon(50% 0, 100% 35%, 80% 100%, 20% 100%, 0 35%); display: inline-block; filter: drop-shadow(0 0 4px #a070ff); }
.energie { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.energie span { color: #ffd84a; }
.ebalken { position: relative; width: 120px; height: 10px; background: #1a1f2a; border: 1px solid var(--rand2); border-radius: 5px; overflow: hidden; }
.ebalken div { position: absolute; left: 0; top: 0; bottom: 0; }
#h-eP { background: linear-gradient(90deg, #2e8a46, #5fd17a); }
#h-eV { background: rgba(255, 90, 90, .85); height: 4px; top: auto; }
.energie.mangel b { color: var(--rot); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .35; } }
.zeit { color: var(--blass); font-variant-numeric: tabular-nums; }
.super-knopf { background: linear-gradient(#5a1430, #2a0a18); border-color: #ff5a8a; color: #ffd0dc; padding: 3px 12px; }
.super-knopf.bereit { animation: puls 1.2s infinite; background: linear-gradient(#b02050, #601030); color: #fff; }
@keyframes puls { 50% { box-shadow: 0 0 18px #ff4a7a; } }
#meldungen { position: absolute; top: 46px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; z-index: 5; }
#meldungen p { margin: 0; padding: 4px 14px; background: rgba(10, 12, 18, .82); border: 1px solid var(--rand2); border-radius: 14px; font-size: 15px; pointer-events: auto; cursor: pointer;
  animation: rein .25s ease-out; transition: opacity .5s; }
#meldungen p.alarm { border-color: var(--rot); color: #ffc0c0; }
#meldungen p.fertig { border-color: var(--gold); color: var(--gold2); }
#meldungen p.fehler { color: #ffb070; }
@keyframes rein { from { transform: translateY(-8px); opacity: 0; } }
.schwebe { position: absolute; z-index: 6; background: rgba(14, 17, 24, .94); border: 1px solid var(--rand2); border-radius: 8px; padding: 8px 10px; }
#spielerliste { top: 46px; right: 8px; min-width: 260px; font-weight: 500; }
#spielerliste .sp { display: flex; gap: 8px; align-items: center; padding: 2px 0; }
#spielerliste .sp i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
#spielerliste .sp.raus { opacity: .45; text-decoration: line-through; }
#chat { left: 8px; bottom: calc(var(--leiste) + 8px); width: min(420px, 90vw); }
#chat .chatlog { max-height: 180px; }
#chat .zeile { margin-top: 6px; flex-wrap: nowrap; }
#chat input#chateingabe { flex: 1; }

#hud-unten { position: absolute; left: 0; right: 0; bottom: 0; height: var(--leiste); display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 470px); gap: 8px;
  padding: 6px 8px; background: linear-gradient(#141821, #0c0f15); border-top: 2px solid #3a3020; box-shadow: 0 -6px 18px rgba(0,0,0,.5); }
.minikarte-kasten { position: relative; width: 160px; height: 160px; border: 1px solid var(--rand2); border-radius: 6px; overflow: hidden; background: #000; }
#minikarte { width: 100%; height: 100%; display: block; cursor: crosshair; touch-action: none; }
#kein-radar { position: absolute; left: 0; right: 0; bottom: 0; padding: 1px 4px; text-align: center; color: var(--blass); background: rgba(0,0,0,.72); font-size: 11px; pointer-events: none; }
#kein-radar[hidden] { display: none; }
.auswahl { display: flex; flex-direction: column; gap: 6px; min-width: 0; overflow: hidden; }
.auswahl .kopf { display: flex; gap: 10px; align-items: center; }
.auswahl .kopf canvas { width: 56px; height: 56px; background: #0f131b; border: 1px solid var(--rand2); border-radius: 6px; flex: none; }
.auswahl .kopf h4 { margin: 0; font-family: Cinzel, serif; font-size: 16px; color: var(--gold2); }
.auswahl .kopf p { margin: 0; font-size: 13px; color: var(--blass); font-weight: 500; }
.auswahl .lp { height: 6px; background: #2a1414; border-radius: 3px; overflow: hidden; margin-top: 4px; width: 180px; }
.auswahl .lp div { height: 100%; background: var(--gruen); }
.auswahl .aktionen { display: flex; gap: 5px; flex-wrap: wrap; }
.auswahl .aktionen button { padding: 4px 9px; font-size: 14px; }
.auswahl .aktionen button.an { border-color: var(--gold); color: var(--gold2); }
.auswahl .gruppe { display: flex; flex-wrap: wrap; gap: 3px; overflow: auto; max-height: 96px; }
.auswahl .gruppe button { position: relative; width: 38px; height: 38px; padding: 0; }
.auswahl .gruppe button canvas { width: 100%; height: 100%; }
.auswahl .gruppe button b { position: absolute; right: 2px; bottom: 0; font-size: 12px; text-shadow: 0 0 3px #000; }
.auswahl .leer-text { color: var(--blass); font-weight: 500; font-size: 14px; padding: 8px; }
.baukasten { display: flex; flex-direction: column; min-width: 0; }
.reiter { display: flex; gap: 3px; }
.reiter button { flex: 1; padding: 3px 4px; font-size: 13px; border-radius: 6px 6px 0 0; position: relative; }
.reiter button.an { border-color: var(--gold); color: var(--gold2); background: #2b2a24; }
.reiter button .fertig-punkt { position: absolute; top: 2px; right: 3px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold2); box-shadow: 0 0 6px var(--gold); }
.baugitter { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); grid-auto-rows: 64px; gap: 4px; overflow: auto; padding-top: 4px; }
.bauknopf { position: relative; padding: 0; overflow: hidden; display: block; }
.bauknopf canvas { width: 100%; height: 100%; display: block; }
.bauknopf .preis { position: absolute; left: 0; right: 0; bottom: 0; font-size: 11px; background: rgba(0,0,0,.6); color: var(--quarz); text-align: center; }
.bauknopf .anz { position: absolute; top: 1px; right: 4px; font-size: 14px; color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000; }
.bauknopf .uhr { position: absolute; inset: 0; pointer-events: none; }
.bauknopf.gesperrt { filter: grayscale(1) brightness(.5); }
.bauknopf.bereit { border-color: var(--gold2); box-shadow: inset 0 0 14px rgba(243, 207, 134, .6); }
.bauknopf.bereit::after { content: 'BEREIT'; position: absolute; top: 20px; left: 0; right: 0; text-align: center; font-size: 12px; color: var(--gold2); text-shadow: 0 0 4px #000, 0 0 4px #000; }
#tooltip { position: fixed; z-index: 20; max-width: 280px; background: rgba(12, 14, 20, .96); border: 1px solid var(--gold); border-radius: 7px; padding: 7px 10px; font-weight: 500; font-size: 13.5px; pointer-events: none; }
#tooltip b { color: var(--gold2); font-size: 15px; }
#tooltip .zeile { gap: 10px; color: var(--blass); }
#touch-leiste { position: absolute; right: 8px; bottom: calc(var(--leiste) + 8px); display: none; gap: 6px; }
#touch-leiste button.an { border-color: var(--gold); color: var(--gold2); }
body.touch #touch-leiste { display: flex; }

.overlay { position: fixed; inset: 0; background: rgba(4, 5, 8, .62); z-index: 30; display: grid; place-items: center; }
.overlay[hidden] { display: none; }
.overlay .tafel { margin: 0; }
#ende-tabelle table { width: 100%; border-collapse: collapse; font-weight: 500; font-size: 14px; }
#ende-tabelle th, #ende-tabelle td { padding: 4px 6px; border-bottom: 1px solid var(--rand); text-align: right; }
#ende-tabelle th:nth-child(-n+2), #ende-tabelle td:nth-child(-n+2) { text-align: left; }
#ende-tabelle td i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; }
#ende-tabelle tr.sieg td:first-child { color: var(--gold2); }
#toast { position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 40; background: rgba(12, 14, 20, .95); border: 1px solid var(--gold); border-radius: 8px; padding: 8px 16px; }

@media (max-width: 900px) {
  .auf-raster, .mp-raster { grid-template-columns: 1fr; }
  :root { --leiste: 150px; }
  #hud-unten { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 1fr; }
  #hud-unten .auswahl { display: none; }
  .minikarte-kasten { width: 134px; height: 134px; }
  .energie .ebalken { width: 60px; }
  .zeit { display: none; }
}
@media (max-height: 560px) {
  :root { --leiste: 124px; }
  .minikarte-kasten { width: 110px; height: 110px; }
  .baugitter { grid-auto-rows: 52px; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); }
  .auswahl .kopf canvas { width: 40px; height: 40px; }
}