/* Zeitriss – Oberfläche des Prototyps */
:root {
  --grund: #0b0a0d;
  --flaeche: rgba(16, 13, 14, 0.86);
  --rand: rgba(242, 236, 226, 0.16);
  --text: #f2ece2;
  --leise: #b8ad9e;
  --akzent: #ffb347;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--grund);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

#spielfeld, #spielfeld canvas {
  position: fixed;
  inset: 0;
  touch-action: none;
}

.leiste {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  left: 12px;
  right: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 10px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.marke {
  font-weight: 800;
  letter-spacing: 6px;
  font-size: 18px;
}

.version {
  font-weight: 400;
  letter-spacing: 1px;
  font-size: 12px;
  color: var(--leise);
}

.steuerung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.steuerung label {
  font-size: 13px;
  color: var(--leise);
}

input, select, button {
  font: inherit;
  font-size: 15px;
  min-height: 40px;
  border-radius: 8px;
  border: 1px solid var(--rand);
  background: #1d191b;
  color: var(--text);
  padding: 6px 10px;
}

#seed { width: 130px; text-transform: uppercase; }

button { cursor: pointer; }
button:hover { border-color: var(--akzent); }
button.haupt { background: var(--akzent); color: #1a1208; border-color: var(--akzent); font-weight: 700; }
button.aktiv { background: #3a2a10; border-color: var(--akzent); color: var(--akzent); font-weight: 700; }
button[hidden] { display: none; }
.drehung { min-width: 18px; text-align: center; font-weight: 700; color: var(--leise); font-size: 13px; }
#links-drehen, #rechts-drehen { font-size: 20px; padding: 4px 10px; }
.trenner { width: 1px; height: 28px; background: var(--rand); margin: 0 2px; }

.vorrat {
  position: fixed;
  top: calc(var(--leiste-unten, calc(max(10px, env(safe-area-inset-top)) + 62px)) + 8px);
  left: 12px;
  padding: 6px 12px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--akzent);
  font-variant-numeric: tabular-nums;
}

.befehle {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(max(12px, env(safe-area-inset-bottom)) + 52px);
  display: flex;
  gap: 8px;
  padding: 8px;
  background: var(--flaeche);
  border: 1px solid var(--akzent);
  border-radius: 10px;
}

.befehle[hidden] { display: none; }
.befehle { flex-wrap: wrap; justify-content: center; max-width: calc(100vw - 24px); }
.befehle button { min-height: 44px; }
.befehle button.zweizeilig { display: flex; flex-direction: column; align-items: center; line-height: 1.2; padding: 6px 10px; width: 150px; }
.befehle button small { font-size: 11px; font-weight: 400; color: var(--leise); margin-top: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.befehle button.gesperrt { background: #2a2729; border-style: dashed; }
.befehle button.gesperrt small { color: #8e867c; }
button:disabled { opacity: 0.45; cursor: default; }

.info, .hilfe {
  position: fixed;
  left: 12px;
  padding: 8px 12px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 8px;
  font-size: 14px;
}

.info { bottom: max(12px, env(safe-area-inset-bottom)); max-width: calc(55vw - 24px); }

.hilfe {
  right: max(12px, env(safe-area-inset-right));
  left: auto;
  bottom: calc(max(12px, env(safe-area-inset-bottom)) + var(--minimap-h) + 10px);
  color: var(--leise);
  font-size: 12px;
  max-width: min(40vw, 420px);
}

.laden {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 14px 20px;
  background: var(--flaeche);
  border: 1px solid var(--akzent);
  border-radius: 10px;
  font-size: 16px;
}

.laden[hidden] { display: none; }

@media (max-width: 1100px) {
  .hilfe { display: none; }
  .info { max-width: calc(100vw - 24px); }
}

@media (max-width: 640px) {
  .hilfe { display: none; }
  #seed { width: 100px; }
}

/* Musik-Knopf: durchgestrichen, wenn aus */
#ton { min-width: 44px; font-size: 18px; }
/* Lautstärke-Feld unter der Leiste, rechts */
.tonfeld { position: fixed; z-index: 30; right: max(12px, env(safe-area-inset-right)); top: calc(var(--leiste-unten, 80px) + 8px);
  display: grid; gap: 12px; padding: 14px 16px; min-width: 260px;
  background: rgba(20, 17, 14, 0.94); border: 1px solid #4a3a22; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.45); }
.tonfeld[hidden] { display: none; }
.tonfeld label { display: grid; grid-template-columns: 110px 1fr 46px; align-items: center; gap: 10px; color: #e8dcc8; font-size: 15px; }
.tonfeld input[type=range] { width: 100%; accent-color: var(--akzent); height: 28px; }
.tonfeld span { text-align: right; font-variant-numeric: tabular-nums; color: var(--akzent); }

/* Minimap unten rechts */
:root { --minimap-b: 232px; --minimap-h: 116px; }
@media (max-width: 760px) { :root { --minimap-b: 168px; --minimap-h: 84px; } }
.minimap { position: fixed; z-index: 20; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom));
  width: var(--minimap-b); height: var(--minimap-h); background: rgba(12, 10, 8, 0.82); border: 1px solid var(--rand); border-radius: 10px;
  touch-action: none; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,0.4); }

/* Hilfe ausblendbar */
.hilfe { padding-right: 34px; }
.hilfe[hidden] { display: none; }
.hilfe-zu { position: absolute; top: 4px; right: 4px; min-width: 26px; min-height: 26px; padding: 0; font-size: 16px; line-height: 1; border-radius: 6px; }
#hilfe-knopf { min-width: 44px; font-weight: 700; }

/* Speicherfeld (💾) unter der Leiste, rechts */
#speichern { min-width: 44px; font-size: 18px; }
.speicherfeld { position: fixed; z-index: 31; right: max(12px, env(safe-area-inset-right)); top: calc(var(--leiste-unten, 80px) + 8px);
  width: min(460px, calc(100vw - 24px)); max-height: calc(100vh - var(--leiste-unten, 80px) - 24px); overflow-y: auto;
  display: grid; gap: 10px; padding: 14px 16px;
  background: rgba(20, 17, 14, 0.96); border: 1px solid #4a3a22; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  -webkit-user-select: none; user-select: none; }
.speicherfeld[hidden] { display: none; }
.speicherfeld.beschaeftigt { opacity: 0.6; pointer-events: none; }
.speicher-kopf { font-size: 14px; color: var(--leise); line-height: 1.4; }
.speicher-kopf strong { color: var(--text); }
.speicher-kopf a, .speicher-menue { color: var(--akzent); }
.speicher-plaetze { display: grid; gap: 6px; }
.speicher-platz { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center;
  padding: 6px; border: 1px solid var(--rand); border-radius: 8px; background: rgba(255,255,255,0.03); }
.speicher-platz.leer { opacity: 0.75; }
.speicher-bild { width: 64px; height: 32px; border-radius: 4px; background: #0c0a08 center / cover no-repeat; }
.speicher-text { display: grid; min-width: 0; }
.speicher-text strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.speicher-text small { font-size: 12px; color: var(--leise); }
.speicher-knoepfe { display: flex; gap: 6px; }
.speicher-knoepfe button { min-height: 36px; padding: 4px 10px; font-size: 13px; }
.speicher-unten { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.speicher-unten button { min-height: 36px; font-size: 13px; }
.speicher-menue { margin-left: auto; font-size: 14px; }
@media (max-width: 480px) { .speicher-platz { grid-template-columns: 1fr; } .speicher-bild { display: none; } }

/* Laborfenster: Stufe, Checkliste, laufende Forschung (links oben) */
.laborfeld { position: fixed; z-index: 25; left: max(12px, env(safe-area-inset-left)); top: calc(var(--leiste-unten, 80px) + 44px);
  width: min(300px, calc(100vw - 24px)); display: grid; gap: 8px; padding: 12px 14px;
  background: rgba(20, 17, 14, 0.94); border: 1px solid #4a3a22; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  color: #e8dcc8; font-size: 14px; pointer-events: none; }
.laborfeld[hidden] { display: none; }
.labor-kopf { font-size: 15px; }
.labor-kopf strong { color: var(--akzent); }
.labor-titel { color: var(--leise); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
.labor-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.labor-liste li { display: grid; grid-template-columns: 22px 1fr auto; gap: 6px; align-items: baseline; color: #b9ad99; }
.labor-liste li.ok { color: #e8dcc8; }
.labor-liste small { color: #8e867c; font-size: 11px; white-space: nowrap; }
.labor-balken { height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; margin-top: 4px; overflow: hidden; }
.labor-balken span { display: block; height: 100%; background: var(--akzent); }
.labor-hinweis { color: #8e867c; font-size: 12px; line-height: 1.35; }
@media (max-width: 640px) { .laborfeld { top: auto; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 160px); } }

/* Entwicklermodus (nur mit Freigabe in der Verwaltung oder ?test) */
.entwickler-knopf { position: fixed; z-index: 32; right: calc(max(12px, env(safe-area-inset-right)) + var(--minimap-b, 232px) + 10px); bottom: max(12px, env(safe-area-inset-bottom));
  width: 40px; height: 40px; padding: 0; font-size: 20px; border-radius: 10px; }
.entwicklerfeld { position: fixed; z-index: 33; right: calc(max(12px, env(safe-area-inset-right)) + var(--minimap-b, 232px) + 10px); bottom: calc(max(12px, env(safe-area-inset-bottom)) + 48px);
  width: 190px; display: grid; gap: 6px; padding: 10px 12px;
  background: rgba(20, 17, 14, 0.95); border: 1px solid #4a3a22; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.45); }
.entwicklerfeld[hidden] { display: none; }
.entwicklerfeld button { width: 100%; text-align: left; }
.entwickler-kopf { color: var(--akzent); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; }

/* Mini-Status: laufende Bauten, Ausbildungen, Forschungen (links unter dem Vorrat, antippen springt hin) */
.ministatus { position: fixed; z-index: 22; left: max(12px, env(safe-area-inset-left)); top: calc(var(--leiste-unten, 80px) + 46px);
  display: grid; gap: 4px; max-width: min(320px, calc(100vw - 24px)); pointer-events: auto; }
.ministatus[hidden] { display: none; }
.ministatus button { text-align: left; min-height: 28px; padding: 4px 10px; font-size: 12.5px; font-weight: 500;
  background: rgba(20, 17, 14, 0.86); border: 1px solid #3c3122; border-radius: 8px; color: #e8dcc8;
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ministatus button.warnung { border-color: #a0503c; color: #f0b8a0; }
@media (max-width: 640px) { .ministatus { top: auto; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 120px); } .ministatus button { font-size: 11.5px; min-height: 24px; } }

/* Sandkasten-Feld (Entwicklermodus → Sandkasten): rechts unter der Leiste */
.sandkastenfeld { position: fixed; z-index: 24; right: max(12px, env(safe-area-inset-right)); top: calc(var(--leiste-unten, 80px) + 8px);
  width: 238px; max-height: calc(100vh - var(--leiste-unten, 80px) - var(--minimap-h, 160px) - 40px); overflow-y: auto; overscroll-behavior: contain;
  display: grid; gap: 7px; padding: 10px 12px; font-size: 13px;
  background: rgba(20, 17, 14, 0.95); border: 1px solid #4a3a22; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.45); color: #e8dcc8; }
.sandkastenfeld[hidden] { display: none; }
.sandkastenfeld button { min-height: 32px; padding: 4px 6px; font-size: 12.5px; }
.sandkastenfeld button.aktiv { outline: 2px solid var(--akzent); background: #3a2e1c; }
.sandkastenfeld label { display: flex; justify-content: space-between; align-items: center; gap: 6px; color: #b9ad99; }
.sandkastenfeld select { max-width: 140px; font-size: 12.5px; }
.sandkastenfeld .sk-kopf { color: var(--akzent); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em;
  background: none; border: none; padding: 0; min-height: 24px; text-align: left; display: flex; justify-content: space-between; }
.sandkastenfeld.zu > :not(.sk-kopf) { display: none; }
.sandkastenfeld.zu .sk-pfeil { display: inline-block; transform: rotate(-90deg); }
@media (max-height: 500px) { .sandkastenfeld { max-height: calc(100vh - var(--leiste-unten, 80px) - 16px); z-index: 34; } }
.sk-titel { color: #8e867c; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; display: flex; justify-content: space-between; align-items: center; }
.sk-seiten, .sk-tempo { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.sk-seiten .blau { border-color: #3d8bff; color: #a8ccff; }
.sk-seiten .rot { border-color: #ff4545; color: #ffb0a8; }
.sk-zaehler { display: grid; gap: 3px; font-size: 12px; color: #cfc3ad; font-variant-numeric: tabular-nums; }
.sk-zaehler .blau strong { color: #8ab8ff; }
.sk-zaehler .rot strong { color: #ff9a90; }
.sk-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.sk-klein { min-height: 22px !important; padding: 1px 8px !important; font-size: 11px !important; }
.sk-protokoll { margin: 0; padding-left: 16px; display: grid; gap: 3px; font-size: 11.5px; color: #cfc3ad; max-height: 150px; overflow-y: auto; }
@media (max-width: 640px) { .sandkastenfeld { width: 200px; top: calc(var(--leiste-unten, 80px) + 4px); } }

/* ---------- Partie gegen den Gegner: Aufgeben-Frage und Abschlussbildschirm ---------- */
.speicher-aufgeben { border-color: rgba(239, 90, 74, 0.6); color: #ffb0a6; }
.speicher-aufgeben[data-sicher="1"] { background: #5a1d17; color: #fff; }
.partiefeld {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 4, 6, 0.55);
  padding: 16px;
}
.partiefeld.frage { background: rgba(5, 4, 6, 0.35); }
.partie-karte {
  width: min(440px, 100%); max-height: 100%; overflow: auto;
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: 14px;
  padding: 18px 20px; text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  -webkit-user-select: text; user-select: text;
}
.partie-karte h2 { margin: 0 0 8px; font-size: 20px; }
.partie-karte p { margin: 6px 0; color: var(--leise); font-size: 14px; }
.partie-titel { font-size: 34px !important; letter-spacing: 0.06em; }
.partiefeld.sieg .partie-titel { color: var(--akzent); text-shadow: 0 0 18px rgba(255, 179, 71, 0.5); }
.partiefeld.niederlage .partie-titel { color: #ef5a4a; }
.partie-zeit { font-variant-numeric: tabular-nums; }
.partie-tabelle { width: 100%; margin: 12px 0 4px; border-collapse: collapse; font-size: 14px; }
.partie-tabelle th, .partie-tabelle td { padding: 5px 6px; border-bottom: 1px solid var(--rand); text-align: left; }
.partie-tabelle th:not(:first-child), .partie-tabelle td.zahl { text-align: right; font-variant-numeric: tabular-nums; }
.partie-knoepfe { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.partie-knoepfe button { min-height: 40px; padding: 0 16px; font-size: 15px; }