/* ─────────────────────────────────────────────────────────────
   Holdfast – HUD im Stil klassischer Echtzeit-Strategie:
   dunkle Stahlpaneele, abgeschrägte Ecken, cyan leuchtende Kanten,
   orange Hauptaktionen. Desktop: Befehlsleiste rechts.
   Handy/Tablet: Vollbild-Karte, Bauleiste unten, Minimap oben rechts,
   Menü als ausfahrbare Leiste.
   ───────────────────────────────────────────────────────────── */
:root {
  --bg: #070b12;
  --steel-1: #1a2636;
  --steel-2: #0f1724;
  --steel-3: #0a111b;
  --edge: #2fb8ff;
  --edge-dim: #1d5b80;
  --edge-glow: rgba(47, 184, 255, .35);
  --text: #d6e9ff;
  --muted: #7f97b2;
  --accent: #ffb020;
  --accent-2: #ff8a00;
  --danger: #ff4d5e;
  --ok: #3ddc84;
  --purple: #8b5cf6;
  --side-w: 300px;
  --cut: 10px;
  --dock-h: 104px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --font: "Bahnschrift", "Rajdhani", "Roboto Condensed", "Arial Narrow", "Segoe UI", system-ui, sans-serif;
  font-family: var(--font);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); overflow: hidden; }
body { display: flex; height: 100dvh; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }

#stage { position: relative; flex: 1; min-width: 0; }
#game { display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }

/* ── Grundbausteine ─────────────────────────────────────────── */
.chamfer, .hud, .panel, .frame, button, .card, #menu, #selSection {
  --c: var(--cut);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
}
/* Leuchtkante: Hintergrund = Kante, ::before = Füllung 1px weiter innen */
.hud, .panel, .frame, .card, #menu {
  position: relative; isolation: isolate;
  background: linear-gradient(135deg, var(--edge) 0%, var(--edge-dim) 30%, var(--edge-dim) 70%, var(--edge) 100%);
}
.hud::before, .panel::before, .frame::before, .card::before, #menu::before {
  content: ""; position: absolute; inset: 1px; z-index: -1;
  clip-path: inherit;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, var(--steel-1), var(--steel-2) 60%, var(--steel-3));
}

h2 {
  margin: 0 0 8px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700;
  color: var(--edge); text-shadow: 0 0 8px var(--edge-glow);
  display: flex; align-items: center; gap: 8px;
}
h2::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--edge-dim), transparent); }

.brand {
  padding: 12px 14px; font-weight: 800; letter-spacing: .32em; font-size: 20px;
  color: #eaf6ff; text-shadow: 0 0 12px var(--edge-glow);
}
.brand b { color: var(--accent); text-shadow: 0 0 12px rgba(255, 176, 32, .45); }
.brand.big { font-size: 30px; padding: 0 0 6px; }

/* ── Knöpfe ─────────────────────────────────────────────────── */
button {
  --c: 7px;
  font: inherit; font-size: 13px; color: var(--text); cursor: pointer; text-align: left; line-height: 1.2;
  border: 0; padding: 8px 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 45%),
    linear-gradient(180deg, #1d2c40, #111b29);
  box-shadow: inset 0 0 0 1px var(--edge-dim);
  transition: box-shadow .12s, filter .12s, transform .06s;
}
button:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--edge), inset 0 0 14px rgba(47,184,255,.25); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .38; cursor: not-allowed; filter: grayscale(.8); }
button.active { box-shadow: inset 0 0 0 2px var(--accent), inset 0 0 18px rgba(255,176,32,.3); }
button.primary {
  color: #1d1202; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  background: linear-gradient(180deg, #ffd060, var(--accent) 45%, var(--accent-2));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}
button.primary:hover:not(:disabled) { filter: brightness(1.08); box-shadow: inset 0 0 0 1px #fff3, 0 0 0 0; }
button.danger { box-shadow: inset 0 0 0 1px #7a2430; color: #ffb3bb; }
button.danger:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--danger), inset 0 0 14px rgba(255,77,94,.25); }
button .cost { display: block; font-size: 11px; color: var(--accent); margin-top: 2px; font-variant-numeric: tabular-nums; }
button.wide { width: 100%; text-align: center; margin-top: 8px; }
button.small { --c: 5px; padding: 4px 8px; font-size: 11px; }
.muted { color: var(--muted); font-size: 13px; }
p.small { font-size: 11px; margin: 4px 0 0; }

.hud-btn { text-align: center; font-size: 15px; min-width: 40px; min-height: 36px; }
.hud-btn small { display: block; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 1px; }
.hud-btn.icon { padding: 4px 10px; font-size: 18px; }

/* Bau-/Produktionskacheln mit Symbol */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.tile {
  --c: 9px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: 4px 4px 5px; min-height: 86px; text-align: center; font-size: 12px; font-weight: 600;
}
.tile canvas, .tile .ph { flex: none; margin-bottom: 2px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.tile .ph { width: 44px; height: 44px; display: grid; place-items: center; font-size: 22px; color: var(--edge); }
.tile .name { line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tile .cost { font-size: 11px; font-weight: 600; white-space: nowrap; }
.tile .lock { position: absolute; top: 4px; right: 6px; font-size: 10px; color: var(--muted); }
.tile .qn { position: absolute; top: 3px; left: 7px; font-size: 12px; font-weight: 800; color: var(--accent); text-shadow: 0 0 6px #000; }

/* ── Ressourcen-Leiste ──────────────────────────────────────── */
#topbar {
  --c: 12px;
  position: absolute; top: calc(10px + var(--safe-t)); left: 50%; transform: translateX(-50%);
  display: flex; gap: 18px; align-items: center; padding: 7px 18px;
  font-variant-numeric: tabular-nums; font-size: 14px; white-space: nowrap; z-index: 3;
}
#topbar .res { display: flex; align-items: center; gap: 7px; }
.credits b { color: var(--accent); font-size: 20px; font-weight: 800; text-shadow: 0 0 10px rgba(255,176,32,.5); }
.gem {
  width: 13px; height: 13px; display: inline-block; transform: rotate(45deg);
  background: linear-gradient(135deg, #ffe08a, var(--accent) 50%, #b86b00); box-shadow: 0 0 8px rgba(255,176,32,.6);
}
.bolt { color: #7fe3ff; font-style: normal; text-shadow: 0 0 8px var(--edge-glow); }
.power-bar {
  width: 86px; height: 9px; overflow: hidden; position: relative;
  background: repeating-linear-gradient(90deg, #0b1522 0 6px, #050a12 6px 8px);
  box-shadow: inset 0 0 0 1px var(--edge-dim);
}
.power-bar i {
  display: block; height: 100%; width: 0; transition: width .3s;
  background: repeating-linear-gradient(90deg, var(--ok) 0 6px, transparent 6px 8px);
  filter: drop-shadow(0 0 3px var(--ok));
}
.power-bar i.low { background: repeating-linear-gradient(90deg, var(--danger) 0 6px, transparent 6px 8px); filter: drop-shadow(0 0 3px var(--danger)); }
#powerText { color: var(--muted); font-size: 13px; }
.wave { color: var(--muted); }
.wave.soon { color: var(--danger); text-shadow: 0 0 8px rgba(255,77,94,.5); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .55; } }
.conn { color: var(--muted); font-size: 12px; }
.conn.ok { color: var(--ok); }
#menuBtn { display: none; }

#hint {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 3;
  --c: 8px; clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  background: rgba(7, 14, 24, .9); box-shadow: inset 0 0 0 1px var(--edge-dim);
  padding: 7px 14px; font-size: 13px; color: var(--text); pointer-events: none; white-space: nowrap; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis;
}
#hint:empty { display: none; }

#touchbar, #placebar { display: none; }

/* ── Befehlsleiste (Desktop) ────────────────────────────────── */
#side {
  width: var(--side-w); display: flex; flex-direction: column; gap: 8px; padding: 8px; overflow-y: auto;
  background: linear-gradient(180deg, #0c1420, #070b12); box-shadow: inset 1px 0 0 var(--edge-dim);
}
#side .panel { padding: 10px 12px; }
#menu { display: contents; }
#menu::before { display: none; }
.menu-head, .menu-only { display: none !important; }
#side section.grow { flex: 1 0 180px; display: flex; flex-direction: column; min-height: 180px; }

.frame { --c: 14px; padding: 6px; flex: none; }
.frame::after { /* Eckklammern */
  content: ""; position: absolute; inset: 3px; pointer-events: none;
  background:
    linear-gradient(var(--edge), var(--edge)) top left / 18px 2px no-repeat,
    linear-gradient(var(--edge), var(--edge)) top left / 2px 18px no-repeat,
    linear-gradient(var(--edge), var(--edge)) bottom right / 18px 2px no-repeat,
    linear-gradient(var(--edge), var(--edge)) bottom right / 2px 18px no-repeat;
  filter: drop-shadow(0 0 4px var(--edge));
}
#minimap { width: 100%; aspect-ratio: 1; display: block; background: #000; cursor: pointer; image-rendering: pixelated; touch-action: none; }

#selection .row { display: flex; justify-content: space-between; font-size: 13px; margin: 2px 0; gap: 8px; }
#selection .row b { color: #eaf6ff; }
#selection .hp { height: 7px; margin: 5px 0 8px; background: repeating-linear-gradient(90deg, #0b1522 0 5px, #050a12 5px 6px); box-shadow: inset 0 0 0 1px var(--edge-dim); }
#selection .hp i { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--ok) 0 5px, transparent 5px 6px); }
#selection .queue { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; align-items: center; }
#selection .queue span { font-size: 11px; padding: 2px 6px; box-shadow: inset 0 0 0 1px var(--edge-dim); }
#selection .queue span:first-child { box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); }
#selection .tiles { margin-top: 4px; }

#players { list-style: none; margin: 0; padding: 0; font-size: 13px; }
#players li { display: flex; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px solid rgba(47,184,255,.08); }
#players .dot { width: 11px; height: 11px; flex: none; transform: rotate(45deg); box-shadow: 0 0 6px currentColor; }
#players .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#players .on { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); flex: none; }
#players .on.yes { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
#players .war { color: var(--danger); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }

#log { flex: 1 1 0; min-height: 90px; overflow-y: auto; font-size: 12px; line-height: 1.45; user-select: text; -webkit-user-select: text; }
#log div { margin-bottom: 2px; color: var(--muted); }
#log .warn { color: #ffb26b; }
#log .chat { color: var(--text); }
input {
  font: inherit; font-size: 14px; color: var(--text); background: #050a12; border: 0; padding: 8px 10px; width: 100%;
  box-shadow: inset 0 0 0 1px var(--edge-dim); outline: none;
  --c: 6px; clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
}
input:focus { box-shadow: inset 0 0 0 1px var(--edge), inset 0 0 12px rgba(47,184,255,.2); }
#chat input { margin-top: 6px; }
.accform { display: flex; gap: 6px; margin-top: 8px; }
.accform input { flex: 1; min-width: 0; font-size: 13px; padding: 6px 8px; }

/* Admin-Menü */
.card.wide-card { width: min(980px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; }
.menu-head.show { display: flex !important; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.menu-head.show h2 { margin: 0; flex: 1; }
.agrid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 22px; }
.agrid h3 { margin: 14px 0 6px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.arow { display: grid; grid-template-columns: 1fr 120px 70px 26px; align-items: center; gap: 8px; font-size: 13px; padding: 3px 0; color: var(--text); }
.card label.arow { display: grid; margin-top: 0; color: var(--text); font-size: 13px; letter-spacing: 0; }
.card .arow input { margin-top: 0; }
.arow:has(input[type=checkbox]) { grid-template-columns: 1fr auto; }
.arow input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--accent); clip-path: none; box-shadow: none; }
.arow input[type=range] { padding: 0; clip-path: none; box-shadow: none; accent-color: var(--edge); }
.arow .anum { padding: 4px 6px; font-size: 13px; }
.arow i { font-style: normal; color: var(--muted); font-size: 12px; }
.abar { display: flex; gap: 8px; margin-top: 12px; }
.atable { width: 100%; border-collapse: collapse; font-size: 12px; }
.atable th { text-align: left; color: var(--muted); font-weight: 600; padding: 4px; border-bottom: 1px solid var(--edge-dim); }
.atable td { padding: 5px 4px; border-bottom: 1px solid rgba(47,184,255,.08); vertical-align: middle; }
.atable .dot { display: inline-block; width: 9px; height: 9px; transform: rotate(45deg); margin-right: 6px; }
.atable .aact { white-space: nowrap; text-align: right; }
.atable .aact button { margin-left: 2px; }
.ok { color: var(--ok); }
code { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: var(--edge); }
#pauseBanner {
  position: fixed; top: calc(64px + var(--safe-t)); left: 50%; transform: translateX(-50%); z-index: 6;
  padding: 8px 22px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); pointer-events: none;
}
#pauseBanner[hidden] { display: none; }
@media (max-width: 760px) {
  .agrid { grid-template-columns: 1fr; }
  .arow { grid-template-columns: 1fr 90px 60px 22px; }
  .atable th:nth-child(4), .atable td:nth-child(4) { display: none; }
}

/* Lautstärke-Regler */
.slider { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin: 6px 0; }
.slider input[type=range] { -webkit-appearance: none; appearance: none; clip-path: none; box-shadow: none; padding: 0; height: 22px; background: transparent; }
.slider input[type=range]::-webkit-slider-runnable-track { height: 6px; background: repeating-linear-gradient(90deg, #0b1522 0 5px, #050a12 5px 6px); box-shadow: inset 0 0 0 1px var(--edge-dim); }
.slider input[type=range]::-moz-range-track { height: 6px; background: #0b1522; box-shadow: inset 0 0 0 1px var(--edge-dim); }
.slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 20px; margin-top: -7px; background: linear-gradient(180deg, #ffd060, var(--accent-2)); clip-path: polygon(50% 0, 100% 25%, 100% 100%, 0 100%, 0 25%); }
.slider input[type=range]::-moz-range-thumb { width: 14px; height: 20px; border: 0; border-radius: 0; background: var(--accent); }
#muteBtn { padding: 2px 8px; font-size: 15px; min-height: 30px; }

/* ── Overlays ───────────────────────────────────────────────── */
.overlay {
  position: fixed; inset: 0; display: grid; place-items: center; z-index: 20; padding: 16px;
  background: radial-gradient(ellipse at center, rgba(10, 30, 55, .75), rgba(3, 6, 10, .94));
}
.overlay[hidden] { display: none; }
.card { --c: 18px; padding: 24px; width: min(380px, 100%); }
.card h2 { font-size: 13px; }
.card label { display: block; font-size: 12px; color: var(--muted); margin-top: 12px; letter-spacing: .04em; }
.card input { margin-top: 5px; }
.card button.wide { margin-top: 16px; padding: 12px; font-size: 15px; }
.error { color: var(--danger); font-size: 13px; min-height: 1em; }
#awayText .row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid rgba(47,184,255,.12); font-size: 14px; }
#awayText .row b { color: var(--accent); }

/* ─────────────────────────────────────────────────────────────
   Handy & Tablet
   ───────────────────────────────────────────────────────────── */
@media (max-width: 900px), (pointer: coarse) {
  body { display: block; }
  #stage { position: fixed; inset: 0; }
  #game { cursor: default; }

  #topbar {
    --c: 9px; left: 8px; right: 8px; transform: none; justify-content: flex-start;
    gap: 12px; padding: 5px 6px 5px 12px; font-size: 13px;
  }
  .credits b { font-size: 18px; }
  .power-bar { width: 54px; }
  #topbar .conn { display: none; }
  #menuBtn { display: block; margin-left: auto; }

  #hint { bottom: calc(var(--dock-h) + var(--safe-b) + 10px); font-size: 12px; white-space: normal; text-align: center; width: max-content; }

  /* Seitenleiste wird zur Ebene mit frei platzierten Teilen */
  #side { position: fixed; inset: 0; width: auto; padding: 0; background: none; box-shadow: none; overflow: visible; pointer-events: none; z-index: 4; display: block; }
  #side > * { pointer-events: auto; }
  #side .brand { display: none; }

  #miniFrame { position: fixed; top: calc(58px + var(--safe-t)); right: 8px; width: 132px; padding: 4px; --c: 10px; }

  /* Bauleiste unten */
  #buildSection {
    position: fixed; left: 0; right: 0; bottom: 0; --c: 0px;
    padding: 6px 8px calc(6px + var(--safe-b));
    height: calc(var(--dock-h) + var(--safe-b));
  }
  #buildSection h2 { display: none; }
  #buildList { display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; height: 100%; scrollbar-width: none; scroll-snap-type: x proximity; }
  #buildList::-webkit-scrollbar { display: none; }
  #buildList .tile { flex: 0 0 86px; min-height: 0; height: 100%; scroll-snap-align: start; justify-content: center; gap: 1px; }
  #respawn { position: absolute; inset: 8px; width: auto; margin: 0; font-size: 16px; }

  /* Auswahl als schwebende Karte über der Bauleiste */
  #selSection {
    position: fixed; left: 60px; bottom: calc(var(--dock-h) + var(--safe-b) + 8px);
    width: min(380px, calc(100% - 210px)); max-height: 46dvh; overflow-y: auto; padding: 10px 12px;
  }
  #selSection.empty { display: none; }

  /* Schnellbefehle links */
  #touchbar {
    display: flex; flex-direction: column; gap: 5px; position: absolute; left: 8px; top: calc(58px + var(--safe-t));
    padding: 6px 5px; --c: 8px; z-index: 3;
  }
  #touchbar .hud-btn { min-width: 44px; min-height: 44px; padding: 4px 2px; font-size: 17px; }
  #touchbar .hud-btn.active { box-shadow: inset 0 0 0 2px var(--accent); }

  /* Bauplatz bestätigen */
  #placebar:not([hidden]) {
    display: flex; gap: 8px; align-items: center; position: absolute; z-index: 5;
    left: 50%; transform: translateX(-50%); bottom: calc(var(--dock-h) + var(--safe-b) + 10px);
    padding: 6px 6px 6px 14px; font-size: 13px; white-space: nowrap;
  }
  #placebar .hud-btn { min-height: 42px; padding: 6px 14px; font-size: 15px; }
  body.placing #hint { display: none; }

  /* Menü fährt von rechts ein */
  #menu {
    display: flex; flex-direction: column; gap: 8px; position: fixed; top: 0; right: 0; bottom: 0;
    width: min(360px, 92vw); padding: calc(10px + var(--safe-t)) 10px calc(10px + var(--safe-b)); --c: 0px;
    transform: translateX(105%); transition: transform .22s ease; z-index: 10; overflow-y: auto;
  }
  #menu::before { display: block; }
  body.menu-open #menu { transform: none; box-shadow: -20px 0 40px rgba(0,0,0,.6); }
  .menu-head { display: flex !important; align-items: center; justify-content: space-between; }
  .menu-head h2 { margin: 0; flex: 1; }
  .menu-head h2::after { margin-right: 10px; }
  .menu-only { display: block !important; }
  #menu section.grow { min-height: 240px; }
}

/* Kleine Handys hochkant */
@media (max-width: 520px) {
  :root { --dock-h: 92px; }
  #buildList .tile { flex-basis: 76px; font-size: 11px; }
  .tile .pw { display: none; }
  #touchbar .hud-btn { min-height: 40px; min-width: 42px; font-size: 15px; }
  #touchbar .hud-btn small { font-size: 8px; letter-spacing: .06em; }
  #topbar { gap: 9px; }
  #topbar .wave { font-size: 11px; }
  .power-bar { width: 40px; }
  #powerText { display: none; }
  #miniFrame { width: 104px; }
  #selSection { left: 60px; width: calc(100% - 68px); }
  body.has-mini-sel #selSection { width: calc(100% - 180px); }
}

/* Tablets: etwas größer */
@media (pointer: coarse) and (min-width: 901px) {
  :root { --dock-h: 116px; }
  #buildList .tile { flex-basis: 100px; font-size: 13px; }
  #miniFrame { width: 190px; }
  #selSection { width: 420px; }
}

/* Querformat auf dem Handy: wenig Höhe */
@media (max-height: 480px) and (pointer: coarse) {
  :root { --dock-h: 80px; }
  #buildList .tile { flex-basis: 84px; font-size: 10px; padding-top: 2px; }
  #buildList .tile .ph { width: 28px; height: 28px; font-size: 16px; }
  .tile .pw { display: none; }
  #miniFrame { width: 104px; top: calc(50px + var(--safe-t)); }
  #touchbar { top: calc(50px + var(--safe-t)); flex-direction: row; }
  #selSection { max-height: 40dvh; }
}