/* ============================================================================
   STORMKEEP — Styles (forest · teal · brass)
   Bühne: feste Logik 1280×720, per JS-Transform skaliert; HUD-Elemente in
   Logik-Pixeln, Touchziele ≥ 48 px.
   ============================================================================ */

:root {
  --ink:        #e9e2cd;
  --ink-dim:    #a8b3a0;
  --parch:      #f2e8cf;
  --forest-0:   #050f0b;
  --forest-1:   #081a13;
  --forest-2:   #0d2a1f;
  --panel-bg:   rgba(9, 28, 22, 0.88);
  --panel-bg-2: rgba(6, 20, 16, 0.94);
  --teal:       #35d9b0;
  --teal-deep:  #0f7a60;
  --brass:      #c9973f;
  --brass-lite: #f0c060;
  --brass-dim:  #7d5a24;
  --gold:       #ffd97a;
  --danger:     #e8604c;
  --arcane:     #b596ff;
  --frost:      #8fdcff;
  --line:       rgba(201, 151, 63, 0.45);
  --shadow-lg:  0 18px 42px rgba(0, 0, 0, 0.55);
  --serif: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 8%, #0b231a 0%, var(--forest-1) 52%, var(--forest-0) 100%);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  overscroll-behavior: none;
}

#viewport {
  position: fixed;
  inset: 0;
}

/* ---------- Bühne (feste Logikgröße, skaliert per JS) ---------- */

#stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1280px;
  height: 720px;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center center;
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 0 0 2px var(--brass-dim),
    0 0 0 5px #241705,
    0 0 0 6px rgba(240, 192, 96, 0.35),
    var(--shadow-lg),
    0 0 90px rgba(53, 217, 176, 0.08);
}

#game {
  position: absolute;
  inset: 0;
  width: 1280px;
  height: 720px;
  display: block;
  touch-action: none;
}

#hud { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
#hud button, #hud .clickable, #hud a, #hud #panel { pointer-events: auto; }

/* ---------- Topbar ---------- */

#topbar {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 12px;
  background:
    linear-gradient(180deg, rgba(4, 14, 10, 0.92) 0%, rgba(5, 17, 12, 0.78) 68%, rgba(5, 17, 12, 0) 100%);
  border-bottom: 1px solid rgba(201, 151, 63, 0.28);
}

#crest { display: flex; align-items: center; gap: 9px; min-width: 150px; }

#crest-glyph {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  font-size: 0;
  color: #1c1204;
  background: radial-gradient(circle at 35% 30%, var(--brass-lite), var(--brass) 55%, #8a5f1d);
  border-radius: 50% 50% 50% 8%;
  transform: rotate(-42deg);
  box-shadow: inset 0 0 6px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.5), 0 0 0 2px #2b1c07;
}
#crest-glyph::before {
  content: "⚔";
  transform: rotate(42deg);
  font-size: 20px;
}

#crest-text { line-height: 1.05; }
#game-title {
  font-family: var(--serif);
  font-size: 21px;
  letter-spacing: 4.5px;
  font-weight: 700;
  background: linear-gradient(180deg, #ffe9ad, var(--brass-lite) 45%, #9c6f22);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.6));
}
#game-sub { font-size: 9.5px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--ink-dim); }

#stats { display: flex; gap: 8px; }
.stat {
  display: flex; align-items: center; gap: 7px;
  min-height: 40px;
  padding: 4px 13px 4px 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(20, 46, 36, .95), rgba(9, 26, 20, .95));
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 230, 170, 0.09), 0 3px 10px rgba(0,0,0,.35);
  font-size: 16.5px;
}
.stat .stat-icon { font-size: 16px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.stat b { font-variant-numeric: tabular-nums; letter-spacing: 0.4px; }
.stat.gold b { color: var(--gold); }
.stat.lives b { color: #ffd9d2; }
.stat.wave b { color: #cfeee4; font-size: 14px; }
.stat.pulse { animation: statPulse .55s ease; }
@keyframes statPulse { 30% { transform: scale(1.12); box-shadow: 0 0 14px rgba(255, 217, 122, .45); } }
.stat.danger { border-color: rgba(232, 96, 76, .8); animation: dangerPulse 1s infinite; }
@keyframes dangerPulse { 50% { box-shadow: 0 0 14px rgba(232, 96, 76, .5); border-color: rgba(232, 96, 76, 1); } }

/* ---------- Welle-Mittelfeld ---------- */

#wave-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
}
#wave-status {
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: 1.2px;
  color: var(--parch);
  text-shadow: 0 2px 6px rgba(0,0,0,.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#wave-preview { display: flex; gap: 6px; flex-wrap: nowrap; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 10px;
  border-radius: 999px;
  background: rgba(7, 22, 17, .85);
  border: 1px solid rgba(201, 151, 63, .35);
  font-size: 12.5px; color: var(--ink);
  white-space: nowrap;
}
.chip .dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 6px currentColor; }
.chip.boss { border-color: rgba(232, 96, 76, .85); color: #ffd2c6; animation: bossGlow 1.4s infinite; }
@keyframes bossGlow { 50% { box-shadow: 0 0 12px rgba(232, 96, 76, .55); } }

#countdown-wrap { display: flex; align-items: center; gap: 8px; }
#countdown-ring {
  --p: 100%;
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid; place-items: center;
  background:
    radial-gradient(closest-side, #0a1f18 76%, transparent 78% 100%),
    conic-gradient(var(--teal) var(--p), rgba(255,255,255,.12) 0);
  box-shadow: 0 0 10px rgba(53, 217, 176, .35);
}
#countdown-num { font-size: 16px; font-weight: 700; color: var(--teal); font-variant-numeric: tabular-nums; }
#countdown-label { font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-dim); }

/* ---------- Steuer-Buttons ---------- */

#controls { display: flex; align-items: center; gap: 8px; }
#speed-group {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(7, 22, 17, .9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.ctl {
  min-width: 48px; min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--ink-dim);
  font-family: var(--sans);
  font-size: 15px; font-weight: 700;
  cursor: pointer;
  transition: color .15s, background .15s, box-shadow .15s, transform .06s;
}
.ctl:active { transform: scale(.94); }
#speed-group .ctl + .ctl { border-left: 1px solid rgba(201,151,63,.25); }
.ctl.speed.active {
  color: #14200f;
  background: linear-gradient(180deg, var(--brass-lite), var(--brass) 70%);
  box-shadow: inset 0 0 8px rgba(255, 240, 200, .5);
}
#btn-pause, #btn-help {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(21, 50, 39, .95), rgba(9, 26, 20, .95));
  color: var(--ink);
  font-size: 17px;
}
#btn-pause.paused { color: var(--teal); border-color: var(--teal-deep); box-shadow: 0 0 12px rgba(53,217,176,.35); }

/* ---------- Start-Button unten ---------- */

#start-wrap {
  position: absolute;
  left: 16px; bottom: 16px;
  display: flex; flex-direction: column; gap: 5px;
  pointer-events: none;
}
#start-wrap button { pointer-events: auto; }
#btn-start-wave {
  align-self: flex-start;
  min-height: 54px;
  padding: 10px 22px;
  border-radius: 12px;
  border: 1px solid #5b3f12;
  background:
    linear-gradient(180deg, rgba(37, 78, 60, .95), rgba(12, 38, 28, .95));
  color: var(--parch);
  font-family: var(--serif);
  font-size: 18px; letter-spacing: 1px;
  box-shadow: 0 4px 18px rgba(0,0,0,.5), inset 0 0 0 1px rgba(240,192,96,.35), 0 0 22px rgba(53,217,176,.18);
  cursor: pointer;
  animation: readyPulse 1.8s infinite;
}
@keyframes readyPulse {
  50% { box-shadow: 0 4px 18px rgba(0,0,0,.5), inset 0 0 0 1px rgba(240,192,96,.65), 0 0 30px rgba(255, 217, 122, .35); }
}
#btn-start-wave:active { transform: scale(.97); }
#btn-start-wave[disabled] { opacity: .45; animation: none; cursor: default; }
#start-hint { font-size: 11.5px; color: var(--ink-dim); text-shadow: 0 1px 3px #000; }

.kbd {
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-bottom-width: 2.5px;
  border-radius: 6px;
  background: rgba(255,255,255,.06);
  font-size: .72em; font-weight: 600; color: var(--parch);
  letter-spacing: .5px;
}

/* ---------- Kontext-Panel (Shop / Turm) ---------- */

#panel {
  position: absolute;
  width: 282px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--panel-bg), var(--panel-bg-2));
  border: 1px solid rgba(201, 151, 63, .55);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 235, 190, .1), 0 0 34px rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: panelIn .16s ease-out;
  z-index: 8;
}
@keyframes panelIn { from { transform: translateY(8px) scale(.97); opacity: 0; } }
#panel::before {
  content: "";
  position: absolute; left: 14px; right: 14px; top: 6px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(240, 192, 96, .65), transparent);
}

.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 12px 6px;
}
.panel-title { font-family: var(--serif); font-size: 17px; letter-spacing: 1.2px; color: var(--parch); }
.panel-title small { color: var(--ink-dim); font-size: 11px; letter-spacing: 2px; margin-left: 6px; }
.panel-close {
  width: 40px; height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(201,151,63,.4);
  background: rgba(255,255,255,.05);
  color: var(--ink-dim); font-size: 15px; cursor: pointer;
}
.panel-close:active { transform: scale(.94); }
.panel-sub { padding: 0 14px 8px; font-size: 11.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--teal); }

.shop-list { padding: 0 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.shop-card {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 9px;
  align-items: center;
  min-height: 48px;
  padding: 9px 10px;
  border-radius: 11px;
  border: 1px solid rgba(201, 151, 63, .3);
  background: linear-gradient(180deg, rgba(24, 56, 44, .6), rgba(10, 30, 23, .75));
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color .12s, background .12s, transform .06s;
}
.shop-card:active { transform: scale(.985); }
.shop-card:hover, .shop-card.sel { border-color: var(--teal); box-shadow: 0 0 0 1px rgba(53,217,176,.35), 0 0 18px rgba(53,217,176,.15); }
.shop-card.poor { opacity: .55; cursor: not-allowed; }
.shop-card.poor:hover { border-color: rgba(232, 96, 76, .6); box-shadow: none; }
.sc-icon {
  width: 44px; height: 44px; display: grid; place-items: center;
  font-size: 23px;
  border-radius: 10px;
  background: radial-gradient(circle at 35% 30%, #1e4a3a, #0a2019);
  border: 1px solid rgba(201,151,63,.35);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.5);
}
.sc-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sc-name { font-family: var(--serif); font-size: 15.5px; color: var(--parch); display: flex; align-items: center; gap: 6px; }
.sc-tag { font-size: 11px; color: var(--teal); letter-spacing: .3px; }
.sc-stats { font-size: 11.5px; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.sc-note { font-size: 10.5px; color: #8ea193; line-height: 1.35; }
.sc-cost {
  align-self: flex-start;
  margin-top: 3px;
  font-weight: 800; font-size: 14.5px;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sc-cost.bad { color: var(--danger); }
.dmg-tag {
  font-size: 9px; font-weight: 700; letter-spacing: 1px;
  padding: 1.5px 6px; border-radius: 999px;
  text-transform: uppercase; font-family: var(--sans);
}
.dmg-tag.phys  { color: #f4e8c8; border: 1px solid rgba(244, 232, 200, .45); }
.dmg-tag.arcane { color: var(--arcane); border: 1px solid rgba(181, 150, 255, .55); background: rgba(88, 52, 160, .18); }

/* Turm-Details */
.tower-head { display: flex; align-items: center; gap: 10px; padding: 4px 12px 8px; }
.tower-head .sc-icon { width: 48px; height: 48px; font-size: 25px; }
.tower-name { font-family: var(--serif); font-size: 17px; color: var(--parch); }
.pips { display: inline-flex; gap: 4px; margin-left: 2px; }
.pip { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--brass-dim); background: #13291f; }
.pip.on { background: radial-gradient(circle at 35% 30%, #ffe9ad, var(--brass)); box-shadow: 0 0 7px rgba(255, 217, 122, .6); border-color: var(--brass); }

.statrows { padding: 2px 14px 10px; display: flex; flex-direction: column; gap: 5px; }
.statrow {
  display: grid;
  grid-template-columns: 86px 1fr auto;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  padding: 5px 9px;
  border-radius: 8px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.05);
}
.statrow .sl { color: var(--ink-dim); font-size: 11px; letter-spacing: .4px; text-transform: uppercase; }
.statrow .sv { color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.statrow .sv i { font-style: normal; color: #6f8578; margin: 0 6px; }
.statrow .sv b { color: var(--parch); }
.statrow .sv .up { color: var(--teal); font-weight: 800; }
.statrow .delta { font-size: 10.5px; color: #79d9b8; }
.statrow.special { border-color: rgba(143, 220, 255, .3); background: rgba(143, 220, 255, .06); }
.statrow.special.rune { border-color: rgba(181, 150, 255, .35); background: rgba(181, 150, 255, .07); }

.panel-actions {
  display: flex; gap: 8px;
  padding: 2px 12px 14px;
}
.act {
  flex: 1;
  min-height: 50px;
  border-radius: 11px;
  border: 1px solid #5b3f12;
  background: linear-gradient(180deg, var(--brass-lite), var(--brass) 60%, #8a5f1d);
  color: #201503;
  font-weight: 800; font-size: 14.5px;
  font-family: var(--sans);
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.45);
  line-height: 1.25;
}
.act small { display: block; font-weight: 600; font-size: 10.5px; opacity: .75; }
.act:active { transform: scale(.97); }
.act[disabled] { filter: grayscale(.85) brightness(.6); cursor: not-allowed; }
.act.sell {
  background: linear-gradient(180deg, rgba(46, 74, 62, .9), rgba(14, 34, 26, .95));
  color: #d8cdb0;
  border-color: rgba(201,151,63,.4);
  box-shadow: none;
  flex: 0 0 38%;
}
.act.sell.confirm { background: linear-gradient(180deg, #7c2f22, #571d14); color: #ffd9d2; border-color: var(--danger); }
.max-note { padding: 0 14px 12px; font-size: 12px; color: var(--gold); letter-spacing: 1px; text-align: center; }

/* ---------- Toasts ---------- */

#toasts {
  position: absolute;
  top: 70px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  z-index: 9;
  pointer-events: none;
}
.toast {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(6, 20, 15, .92);
  border: 1px solid var(--line);
  color: var(--parch);
  font-size: 14px; font-weight: 600;
  box-shadow: 0 6px 20px rgba(0,0,0,.5);
  animation: toastIn .18s ease-out, toastOut .35s ease 1.9s forwards;
  white-space: nowrap;
}
.toast.good { border-color: rgba(53, 217, 176, .7); color: #bdf3e3; }
.toast.bad  { border-color: rgba(232, 96, 76, .75); color: #ffcfc6; }
.toast.gold { border-color: rgba(255, 217, 122, .8); color: var(--gold); }
@keyframes toastIn  { from { transform: translateY(-8px); opacity: 0; } }
@keyframes toastOut { to   { transform: translateY(-6px); opacity: 0; } }

/* ---------- Pause-Banner ---------- */

#pause-banner {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--serif);
  font-size: 44px; letter-spacing: 14px;
  color: rgba(233, 226, 205, .92);
  text-shadow: 0 0 26px rgba(53, 217, 176, .5), 0 4px 12px #000;
  border: 2px solid rgba(201,151,63,.6);
  border-radius: 16px;
  padding: 12px 34px 12px 46px;
  background: rgba(5, 16, 12, .55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: pauseIn .2s ease-out;
  pointer-events: none;
  z-index: 7;
}
#pause-banner span { font-size: 14px; letter-spacing: 2px; color: var(--ink-dim); display: block; text-align: center; }
@keyframes pauseIn { from { transform: translate(-50%, -50%) scale(.9); opacity: 0; } }

/* ---------- Alle-Spiele-Link ---------- */

#games-link {
  position: absolute;
  right: 12px; bottom: 9px;
  font-size: 12.5px;
  letter-spacing: .6px;
  color: rgba(240, 192, 96, .8);
  text-decoration: none;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid rgba(201, 151, 63, .3);
  background: rgba(6, 18, 13, .65);
  opacity: .82;
  transition: opacity .15s, color .15s;
  min-height: 32px;
  display: inline-flex; align-items: center;
}
#games-link:hover { opacity: 1; color: var(--gold); text-decoration: underline; }

/* ---------- Overlays ---------- */

.overlay {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background:
    radial-gradient(90% 80% at 50% 30%, rgba(9, 32, 24, .55), rgba(3, 9, 7, .88) 85%);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 20;
  animation: fadeIn .3s ease;
  padding: 16px;
}
.overlay[hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0; } }

.overlay-card {
  position: relative;
  width: min(760px, 96%);
  max-height: 690px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  text-align: center;
  padding: 26px 34px 28px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(15, 40, 31, .97), rgba(7, 22, 17, .98));
  border: 1px solid rgba(201, 151, 63, .6);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(240, 192, 96, .12), 0 0 70px rgba(53, 217, 176, .07);
  animation: cardIn .35s cubic-bezier(.2, .9, .3, 1.15);
}
.overlay-card::after {
  content: "";
  position: absolute; inset: 6px;
  border: 1px solid rgba(201, 151, 63, .25);
  border-radius: 13px;
  pointer-events: none;
}
@keyframes cardIn { from { transform: translateY(16px) scale(.96); opacity: 0; } }

.overlay-card.wide { width: min(980px, 98%); text-align: left; }

#title-emblem { display: grid; place-items: center; margin-bottom: 4px; }
#title-keep {
  font-size: 54px;
  filter: drop-shadow(0 0 18px rgba(255, 217, 122, .45)) drop-shadow(0 4px 6px rgba(0,0,0,.8));
  animation: keepFloat 4s ease-in-out infinite;
}
@keyframes keepFloat { 50% { transform: translateY(-5px); } }

.title-logo {
  font-family: var(--serif);
  font-size: 56px;
  letter-spacing: 14px;
  font-weight: 800;
  padding-left: 14px; /* optischer Ausgleich des Letterspacing */
  background: linear-gradient(180deg, #ffefc0 15%, var(--brass-lite) 45%, #8a5f1d 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.8)) drop-shadow(0 0 24px rgba(255, 217, 122, .25));
}
.title-tag { margin: 6px 0 16px; color: var(--ink-dim); font-size: 15px; font-style: italic; font-family: var(--serif); letter-spacing: .6px; }
.title-tips { list-style: none; margin: 0 auto 16px; max-width: 620px; display: flex; flex-direction: column; gap: 7px; text-align: left; }
.title-tips li {
  font-size: 14px; color: var(--ink);
  padding: 8px 12px;
  border-left: 3px solid var(--teal-deep);
  background: rgba(255,255,255,.04);
  border-radius: 0 9px 9px 0;
  line-height: 1.4;
}
.title-tips b { color: var(--parch); }
.title-tips li:nth-child(4) { border-left-color: var(--brass); }

.tower-mini-row { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.tower-mini {
  width: 158px;
  padding: 10px 8px 9px;
  border-radius: 12px;
  border: 1px solid rgba(201,151,63,.35);
  background: rgba(255,255,255,.04);
}
.tower-mini .tm-icon { font-size: 26px; }
.tower-mini .tm-name { font-family: var(--serif); font-size: 14px; color: var(--parch); margin-top: 2px; }
.tower-mini .tm-tag { font-size: 10.5px; color: var(--teal); margin-top: 2px; line-height: 1.3; }

.title-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.btn-primary {
  min-height: 54px;
  padding: 12px 30px;
  border-radius: 12px;
  border: 1px solid #5b3f12;
  background: linear-gradient(180deg, var(--brass-lite), var(--brass) 58%, #8a5f1d);
  color: #1d1304;
  font-family: var(--serif);
  font-size: 19px; font-weight: 800; letter-spacing: 1.5px;
  cursor: pointer;
  box-shadow: 0 5px 18px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.5), 0 0 26px rgba(255, 217, 122, .2);
  transition: transform .08s, filter .15s;
}
.btn-primary.big { font-size: 21px; }
.btn-primary:hover { filter: brightness(1.07); }
.btn-primary:active { transform: scale(.97); }
.btn-ghost {
  min-height: 54px;
  padding: 12px 22px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.05);
  color: var(--ink);
  font-size: 15.5px; font-weight: 600;
  cursor: pointer;
}
.btn-ghost:active { transform: scale(.97); }

/* Hilfe */
.help-card h2 { font-family: var(--serif); letter-spacing: 6px; text-align: center; font-size: 26px; color: var(--parch); margin-bottom: 14px; }
.help-cols { display: grid; grid-template-columns: 1fr 1.15fr; gap: 20px; }
.help-cols h3 {
  font-family: var(--serif); color: var(--brass-lite);
  font-size: 15.5px; letter-spacing: 2.5px; text-transform: uppercase;
  margin: 12px 0 7px; padding-bottom: 4px;
  border-bottom: 1px solid rgba(201,151,63,.3);
}
.help-cols h3:first-child { margin-top: 0; }
.help-cols p, .help-cols li { font-size: 13.5px; line-height: 1.55; color: var(--ink); }
.help-cols ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.keys .kbd { margin-right: 2px; }

.help-towers { display: flex; flex-direction: column; gap: 8px; }
.ht-row {
  display: grid; grid-template-columns: 40px 1fr; gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(201,151,63,.25);
  border-radius: 10px;
  background: rgba(255,255,255,.035);
}
.ht-icon { font-size: 22px; text-align: center; }
.ht-name { font-family: var(--serif); color: var(--parch); font-size: 14.5px; }
.ht-desc { font-size: 12px; color: var(--ink-dim); line-height: 1.45; margin-top: 2px; }
.ht-desc b.s { color: #7fdcb6; }
.ht-desc b.w { color: #efa49a; }

.help-enemies { display: flex; flex-wrap: wrap; gap: 6px; }
.he-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--ink);
  padding: 5px 9px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  white-space: nowrap;
}
.he-chip .dot { width: 9px; height: 9px; border-radius: 50%; }
.he-chip em { font-style: normal; color: var(--ink-dim); }

/* Ende */
.end-card h1 { font-family: var(--serif); font-size: 44px; letter-spacing: 8px; margin: 4px 0 6px; }
.end-card.win h1 { color: var(--gold); text-shadow: 0 0 30px rgba(255,217,122,.4); }
.end-card.lose h1 { color: #ff9d8c; text-shadow: 0 0 30px rgba(232,96,76,.35); }
#end-emblem { font-size: 56px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.7)); }
#end-sub { color: var(--ink-dim); font-family: var(--serif); font-style: italic; font-size: 16px; margin-bottom: 16px; }
#end-stats {
  display: flex; justify-content: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 22px;
}
.endstat {
  min-width: 120px;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid rgba(201,151,63,.35);
  background: rgba(255,255,255,.04);
}
.endstat b { display: block; font-size: 24px; color: var(--parch); font-variant-numeric: tabular-nums; }
.endstat span { font-size: 10.5px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--ink-dim); }

/* ---------- Drehhinweis (Hochformat) ---------- */

#rotate-hint {
  position: fixed;
  left: 50%; bottom: 18px;
  transform: translateX(-50%);
  z-index: 60;
  animation: fadeIn .4s ease;
}
#rotate-hint[hidden] { display: none; }
.rotate-inner {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 12px 22px;
  border-radius: 14px;
  background: rgba(6, 20, 15, .94);
  border: 1px solid var(--line);
  color: var(--parch);
  font-size: 13px;
  box-shadow: var(--shadow-lg);
}
.rotate-inner b { font-family: var(--serif); letter-spacing: 2px; }
.rotate-icon { font-size: 26px; animation: rotateWig 2.2s infinite ease-in-out; display: block; }
@keyframes rotateWig { 30% { transform: rotate(-80deg); } 60% { transform: rotate(12deg); } }

/* ---------- Feinschliff ---------- */

::selection { background: rgba(53, 217, 176, .35); }

/* Sehr kleine Fenster: HUD kompakter (Inhalte bleiben bedienbar) */
@media (max-height: 430px) {
  #rotate-hint { display: none !important; }
}

/* Sichere Bereiche (Notch) */
@supports (padding: env(safe-area-inset-bottom)) {
  #games-link { bottom: calc(9px + env(safe-area-inset-bottom) * .2); }
}