/* ============================================================
   Tower Defense — Stylesheet
   ============================================================ */
:root {
  --bg:#13161d; --panel:#1b1f29; --panel-2:#212634; --line:#2c3340;
  --line-strong:#3a4253; --ink:#e6eaf2; --ink-dim:#97a0b2; --ink-mute:#646e80;
  --acc:#5aa9e6; --acc-soft:rgba(90,169,230,.16);
  --gold:#e9c46a; --red:#e06a6a; --green:#9cc97a; --teal:#6fc8bf;
  --radius:10px;
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; }
body {
  background:var(--bg);
  color:var(--ink); font-family:"Inter","Segoe UI",system-ui,sans-serif;
  display:flex; align-items:flex-start; justify-content:center; padding:14px;
  overscroll-behavior:none;
}
/* Spielfeld füllt den Screen, Sidebar sitzt rechtsbündig am Rand */
#game {
  display:flex; gap:14px; width:100%; max-width:none;
  height:calc(100vh - 28px); height:calc(100dvh - 28px);
}
#playArea { flex:1; min-width:0; display:flex; align-items:center; justify-content:center; }
#canvasWrap {
  position:relative; width:100%;
  /* Breite so begrenzen, dass das 800:500-Feld nie höher als der Screen wird */
  max-width:calc((100vh - 28px) / 500 * 800);
  max-width:calc((100dvh - 28px) / 500 * 800);
}
canvas#canvas {
  background:#1d222b; border-radius:var(--radius); display:block; cursor:crosshair;
  width:100%; height:auto; aspect-ratio:800/500; touch-action:none;
  box-shadow:0 10px 30px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.03);
}

/* ----- Sidebar: Kopf + Stats fixiert, Turmliste scrollt, Wellen-Start unten fixiert ----- */
#sidebar {
  width:232px; flex:none; border-radius:var(--radius);
  background:var(--panel); border:1px solid var(--line);
  display:flex; flex-direction:column; user-select:none; -webkit-user-select:none;
  overflow:hidden;
}
.sideTop { flex:none; padding:12px 12px 0; display:flex; flex-direction:column; gap:10px; }
.sideBottom { flex:none; padding:10px 12px 12px; display:flex; flex-direction:column; gap:8px;
  border-top:1px solid var(--line); }

#sideHead { display:flex; flex-direction:column; gap:8px; }
#sideHead h2 { font-size:14px; font-weight:600; letter-spacing:.2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.toolbar { display:flex; gap:6px; }
.toolbar .iconbtn { flex:1 1 0; width:auto; min-width:0; } /* gleichmäßig auf die volle Breite verteilen, kein Überlauf */
.iconbtn {
  width:32px; height:30px; flex:none; border:1px solid var(--line); border-radius:8px;
  background:var(--panel-2); color:var(--ink-dim);
  font-size:12px; font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:color .12s, border-color .12s, background .12s;
}
.iconbtn:hover { color:var(--ink); border-color:var(--line-strong); background:#272d3c; }
.ico { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; display:block; }

#stats { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.stat {
  background:var(--panel-2); border:1px solid var(--line); border-radius:8px;
  padding:6px 9px; font-size:11px; color:var(--ink-mute); letter-spacing:.3px;
}
.stat b { display:block; font-size:16px; font-weight:600; color:var(--ink); margin-top:1px; }
#gold b { color:var(--gold); } #lives b { color:var(--red); }
#waveLbl b { color:var(--acc); } #score b { color:var(--green); }

h3 { font-size:10px; text-transform:uppercase; letter-spacing:1.6px; color:var(--ink-mute);
  font-weight:600; }

/* ----- Turm-Auswahl: einziger scrollbarer Bereich ----- */
#towerButtons {
  flex:1 1 0; min-height:0; overflow-y:auto;
  display:flex; flex-direction:column; gap:6px;
  padding:8px 12px; margin:0;
  scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent;
}
#towerButtons::-webkit-scrollbar { width:8px; }
#towerButtons::-webkit-scrollbar-thumb { background:var(--line-strong); border-radius:4px; }
.tbtn {
  background:var(--panel-2); border:1px solid var(--line); border-radius:8px;
  padding:7px 9px; cursor:pointer;
  transition:border-color .12s, background .12s;
  display:flex; align-items:center; gap:9px; min-height:48px;
}
.tbtn:hover { border-color:var(--line-strong); background:#272d3c; }
.tbtn.active {
  border-color:var(--acc); background:var(--acc-soft);
}
.tbtn.poor { opacity:.42; }
.ticon { width:34px; height:34px; flex:none; }
.tmid { flex:1; min-width:0; }
.tname { font-size:13.5px; font-weight:600; display:flex; gap:6px; align-items:baseline; }
.tname .cost { margin-left:auto; color:var(--gold); font-size:12.5px; font-weight:600; }

/* Detail-Tooltip der Turmauswahl (erscheint nach 1,5 s Hovern) */
.ttip {
  position:fixed; z-index:30; width:248px; max-width:62vw;
  background:#0e1117; border:1px solid var(--line-strong); border-radius:9px;
  padding:9px 11px; box-shadow:0 14px 32px rgba(0,0,0,.6);
  opacity:0; transition:opacity .12s; pointer-events:none;
}
.ttip.show { opacity:1; }
.ttip .ttipName { display:flex; gap:6px; align-items:baseline;
  font-size:13px; font-weight:700; color:var(--ink); }
.ttip .ttipName .cost { margin-left:auto; color:var(--gold); font-size:12.5px; font-weight:600; }
.ttip .ttipStats { font-size:11.5px; color:var(--teal); margin-top:5px; line-height:1.45; }
.ttip .ttipDesc { font-size:11px; color:var(--ink-dim); margin-top:5px; line-height:1.45; }

/* ----- Turm-Panel: schwebt über/unter dem angeklickten Turm ----- */
#towerPanel {
  position:absolute; z-index:6; width:236px;
  background:rgba(22,26,34,.97);
  border:1px solid var(--line-strong); border-radius:var(--radius);
  padding:11px; font-size:12px;
  box-shadow:0 16px 36px rgba(0,0,0,.55);
}
#towerPanel.hidden { display:none; }
#tpName { font-size:14px; font-weight:700; margin-bottom:5px; }
#tpStats { color:var(--ink-dim); line-height:1.55; }
#tpTotal { color:var(--gold); line-height:1.4; margin-top:3px; }
#tpNext { color:var(--teal); line-height:1.4; margin-top:6px; }
#towerPanel button {
  width:100%; margin-top:6px; padding:9px; border:1px solid transparent; border-radius:7px;
  font-size:13px; font-weight:600; cursor:pointer; min-height:40px; color:var(--ink);
  transition:filter .1s, background .12s;
}
#towerPanel button:hover:not(:disabled) { filter:brightness(1.12); }
#tpUpgrade { background:#2f7d44; }
#tpUpgrade:disabled { background:#2a3140; color:var(--ink-mute); }
#tpSell { background:#8a3d3d; }
#tpFuse { background:#6a52b5; }
#tpFuse:disabled { background:#2a3140; color:var(--ink-mute); }
#towerPanel .upbtn {
  background:#2f7d44; margin-top:4px; padding:7px 10px; min-height:34px; font-size:12px; text-align:left;
}
#towerPanel .upbtn:disabled { background:#2a3140; color:var(--ink-mute); }

#tpTargetRow { display:flex; align-items:center; gap:6px; margin-top:6px; }
#tpTargetRow label { color:var(--ink-dim); font-size:11px; white-space:nowrap; }
#tpTarget {
  flex:1; min-width:0; background:#171b23; color:var(--ink);
  border:1px solid var(--line-strong); border-radius:6px; padding:5px 6px; font-size:12px;
}

/* ----- Wellen-Steuerung (unten fixiert) ----- */
#startWave {
  padding:13px; border:none; border-radius:8px;
  background:var(--acc); color:#0c1118;
  font-size:14.5px; font-weight:700; letter-spacing:.2px; cursor:pointer; min-height:48px;
  transition:filter .1s;
}
#startWave:hover:not(:disabled) { filter:brightness(1.07); }
#startWave:disabled { background:#2a3140; color:var(--ink-mute); }
#msg { min-height:15px; font-size:12px; color:var(--teal); text-align:center; }

#autoBtn {
  padding:8px; border:1px solid var(--line); border-radius:8px;
  background:var(--panel-2); color:var(--ink-dim);
  font-size:12px; font-weight:600; cursor:pointer; min-height:38px;
  transition:border-color .12s, color .12s, background .12s;
}
#autoBtn.on { border-color:var(--green); color:var(--green); background:rgba(156,201,122,.1); }

/* ----- Overlays (Sieg/Niederlage, Levelauswahl) ----- */
#overlay {
  position:absolute; inset:0; z-index:8;
  background:rgba(13,16,22,.93); border-radius:var(--radius);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; text-align:center; padding:16px;
  backdrop-filter:blur(2px);
}
#overlay.hidden { display:none; }
#overlay h1 { font-size:min(40px, 9vw); font-weight:700; }
#overlay.win h1 { color:var(--green); } #overlay.lose h1 { color:var(--red); }
#overlay p { font-size:16px; color:var(--ink-dim); }
#overlay button {
  padding:12px 30px; border:none; border-radius:8px;
  background:var(--acc); color:#0c1118; font-size:15px; font-weight:700; cursor:pointer;
}
#ovLevels { background:#2a3140 !important; color:var(--ink) !important; }

/* Online-Bestenliste (Vibe Games) im Spielende-Overlay */
#ovBoard { width:min(340px, 90%); margin:2px 0 4px; }
#ovBoard.hidden { display:none; }
.ovBoardTitle {
  font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  color:var(--ink-dim); margin-bottom:6px;
}
.ovBoardLoading { font-size:13px; color:var(--ink-dim); }
.ovBoardList { list-style:none; margin:0; padding:0; counter-reset:rank; }
.ovBoardList li {
  display:flex; justify-content:space-between; gap:10px;
  font-size:13px; padding:3px 8px; border-radius:6px; background:rgba(255,255,255,.04);
  margin-bottom:3px; counter-increment:rank;
}
.ovBoardList li::before { content:counter(rank) "."; color:var(--ink-dim); width:22px; text-align:right; }
.ovBoardName { flex:1; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ovBoardVal { font-weight:700; color:var(--acc); }

#levelSelect {
  position:absolute; inset:0; z-index:9;
  background:rgba(13,16,22,.95); border-radius:var(--radius);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:8px; text-align:center; padding:20px 16px; overflow-y:auto;
}
#levelSelect.hidden { display:none; }
#levelSelect h1 { font-size:min(28px, 7vw); font-weight:700; margin-bottom:2px; }
#levelSelect p { font-size:13px; color:var(--ink-dim); }
#levelBtns { display:flex; flex-direction:column; gap:7px; width:100%; align-items:center; }

.tierHead {
  width:min(440px, 92%); text-align:left;
  font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  margin-top:12px; padding:0 2px; color:var(--ink-mute);
}
.tierHead.tier0 { color:var(--green); }
.tierHead.tier1 { color:#e0b877; }
.tierHead.tier2 { color:#e0876a; }

.lvlbtn {
  width:min(440px, 92%); background:var(--panel-2);
  border:1px solid var(--line); border-radius:10px;
  padding:11px 14px; cursor:pointer; color:var(--ink); text-align:left;
  transition:border-color .12s, background .12s; font-family:inherit;
}
.lvlbtn:hover { background:#272d3c; }
.lvlbtn.tier0:hover { border-color:var(--green); }
.lvlbtn.tier1:hover { border-color:#e0b877; }
.lvlbtn.tier2:hover { border-color:#e0876a; }
.lvlbtn b { font-size:15px; font-weight:600; }
.lvlbtn span { display:block; font-size:11.5px; color:var(--ink-dim); margin-top:2px; }
.lvlbtn:disabled { opacity:.42; cursor:not-allowed; }
.lvlbtn:disabled:hover { border-color:var(--line); background:var(--panel-2); }

/* ----- Level-verlassen-Abfrage ----- */
#quitOverlay {
  position:fixed; inset:0; background:rgba(10,12,16,.8); z-index:11;
  display:flex; align-items:center; justify-content:center; padding:14px;
  backdrop-filter:blur(2px);
}
#quitOverlay.hidden { display:none; }
#quitBox {
  background:var(--panel); border:1px solid var(--line-strong); border-radius:12px;
  width:min(340px, 100%); padding:20px; text-align:center;
  box-shadow:0 18px 44px rgba(0,0,0,.55);
}
#quitBox h2 { font-size:17px; font-weight:600; }
#quitBox p { font-size:13px; color:var(--ink-dim); margin:10px 0 6px; line-height:1.5; }
#quitBox button {
  width:100%; margin-top:8px; padding:11px; border:none; border-radius:8px;
  font-size:14px; font-weight:600; cursor:pointer; transition:filter .1s; color:var(--ink);
}
#quitBox button:hover { filter:brightness(1.12); }
#quitYes { background:#8a3d3d; }
#quitNo { background:#2a3140; }

/* ----- Endlosmodus-Abfrage nach Welle 40 ----- */
#endlessOverlay {
  position:fixed; inset:0; background:rgba(10,12,16,.8); z-index:11;
  display:flex; align-items:center; justify-content:center; padding:14px;
  backdrop-filter:blur(2px);
}
#endlessOverlay.hidden { display:none; }
#endlessBox {
  background:var(--panel); border:1px solid var(--line-strong); border-radius:12px;
  width:min(420px, 100%); max-height:92vh; overflow-y:auto;
  padding:20px; text-align:center;
  box-shadow:0 18px 44px rgba(0,0,0,.55);
}
#endlessBox h2 { font-size:17px; font-weight:600; color:var(--green); }
#endlessBox p { font-size:13px; color:var(--ink-dim); margin:10px 0 6px; line-height:1.5; }
#endlessBox .endlessInfo { text-align:left; font-size:12px; color:var(--ink-dim); }
#endlessBox button {
  width:100%; margin-top:8px; padding:11px; border:none; border-radius:8px;
  font-size:14px; font-weight:600; cursor:pointer; transition:filter .1s; color:var(--ink);
}
#endlessBox button:hover { filter:brightness(1.12); }
#endlessYes { background:#6a52b5; }
#endlessNo { background:#2f7d44; }

/* ----- Gegner-Index + Turm-Index ----- */
#dexOverlay, .dexOverlay {
  position:fixed; inset:0; background:rgba(10,12,16,.8); z-index:10;
  display:flex; align-items:center; justify-content:center; padding:14px;
  backdrop-filter:blur(2px);
}
#dexOverlay.hidden, .dexOverlay.hidden { display:none; }
#dexBox, .dexBox {
  background:var(--panel); border:1px solid var(--line-strong); border-radius:12px;
  width:min(560px, 100%); max-height:min(640px, 92vh);
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 18px 44px rgba(0,0,0,.55);
}
#dexHead, .dexHead { display:flex; align-items:center; padding:12px 14px; border-bottom:1px solid var(--line); }
#dexHead h2, .dexHead h2 { font-size:16px; font-weight:600; flex:1; }
#dexNote, .dexNote { padding:9px 14px 0; font-size:11px; color:var(--ink-dim); line-height:1.5; }
#dexList, .dexList { overflow-y:auto; padding:10px 14px 14px; display:flex; flex-direction:column; gap:8px; }
.dexEntry {
  display:flex; gap:10px; background:var(--panel-2);
  border:1px solid var(--line); border-radius:10px; padding:8px 10px; align-items:center;
}
.dexEntry.unknown { opacity:.5; }
.dexIcon { width:44px; height:44px; flex:none; }
.dexName { font-weight:700; font-size:14px; }
.dexVals { font-size:11.5px; color:var(--teal); margin-top:2px; line-height:1.45; }
.dexDesc { font-size:11.5px; color:var(--ink-dim); margin-top:2px; line-height:1.4; }
.codexCost { color:var(--gold); font-weight:600; margin-left:6px; font-size:12px; }

/* ----- Handy-Layout (hochkant) ----- */
@media (max-width: 840px) {
  body { padding:6px; }
  #game { flex-direction:column; gap:8px; height:auto; }
  #canvasWrap { max-width:none; }
  #sidebar { width:100%; overflow:visible; }
  #towerButtons { flex:none; overflow:visible; display:grid; grid-template-columns:1fr 1fr; }
  #stats { grid-template-columns:repeat(4, 1fr); }
  .tdesc { font-size:9.5px; }
  #towerPanel { width:210px; }
}

/* ----- Handy-Layout (quer) ----- */
@media (max-height: 540px) and (orientation: landscape) {
  body { padding:6px; align-items:stretch; }
  #game {
    flex-direction:row; gap:8px;
    height:calc(100vh - 12px); height:calc(100dvh - 12px);
  }
  #playArea { flex:none; }
  #canvasWrap { height:100%; width:auto; max-width:none; aspect-ratio:800/500; }
  canvas#canvas { width:100%; height:100%; }
  #sidebar { flex:1; min-width:172px; width:auto; overflow:hidden; }
  .sideTop { padding:8px 8px 0; gap:6px; }
  .sideBottom { padding:8px; gap:6px; }
  #towerButtons { display:grid; grid-template-columns:1fr 1fr; gap:5px; padding:6px 8px; }
  #sideHead h2 { display:none; }
  .tbtn { min-height:38px; padding:4px 6px; gap:5px; }
  .ticon { width:24px; height:24px; }
  .tdesc { display:none; }
  #startWave { padding:9px; min-height:40px; font-size:13px; }
  #autoBtn { min-height:32px; padding:5px; }
  #towerPanel { width:196px; font-size:11px; }
}