:root{--panel:rgba(8,12,20,.90);--line:rgba(255,255,255,.10);--text:#eef4ff;--muted:#9fb2cc;--gold:#ffd65c;--good:#7dff97;--bad:#ff7979;--accent:#78a8ff;}
*,*::before,*::after{box-sizing:border-box;}

body{
  margin:0;
  background:#0a101a;
  color:var(--text);
  font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;
  overflow:hidden;
  user-select:none;
  display:flex;
  flex-direction:column;
  height:100dvh;
  max-height:100dvh;
}

/* ── Top bar ────────────────────────────────────────────── */
#topBar{
  flex-shrink:0;
  padding:4px 14px;
  background:linear-gradient(180deg,rgba(12,19,30,.95),rgba(9,14,24,.88));
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:10px;
  align-items:center;
}
.baseCard{display:grid;gap:2px;}
.baseCard.enemy{text-align:right;}
.titleRow{font-size:10px;color:var(--muted);letter-spacing:.04em;}
.statRow{display:flex;gap:8px;align-items:center;font-size:12px;}
.enemy .statRow{justify-content:flex-end;}
.bar{width:160px;height:8px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.07);}
.fill{height:100%;background:linear-gradient(90deg,#71ff9d,#d8ff73);}
.enemy .fill{background:linear-gradient(90deg,#ffbc77,#ff6a6a);}
#centerStats{text-align:center;display:grid;gap:1px;}
#ageLabel{font-size:16px;font-weight:700;letter-spacing:.04em;}
#resourceRow{font-size:11px;color:var(--muted);}

/* ── Canvas wrap: pakt resterende ruimte, canvas sluit aan onderkant ── */
#canvasWrap{
  flex:1 1 0;
  min-height:0;
  width:100%;
  background:#050d18;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:stretch;
  overflow:hidden;
  position:relative;
}

/* Canvas vult volledige breedte, hoogte proportioneel.
   max-height zorgt dat het nooit buiten de wrap uitsteekt. */
#gameCanvas{
  display:block;
  width:100%;
  height:auto;
  max-height:100%;
  image-rendering:pixelated;
  background:#0c1322;
  flex-shrink:0;
}

/* ── Bottom bar ─────────────────────────────────────────── */
#bottomBar{
  flex-shrink:0;
  padding:4px 6px;
  padding-bottom:28px;
  background:linear-gradient(0deg,rgba(10,16,26,.97),rgba(14,22,36,.93));
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:1.4fr 1.6fr .85fr .85fr;
  gap:5px;
}
.panel{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.055);
  border-radius:8px;
  padding:5px 6px;
  display:flex;
  flex-direction:column;
  gap:4px;
  overflow-y:auto;
  max-height:120px;
}
.panel h3{margin:0;font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);flex-shrink:0;}
.btnRow{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;flex-shrink:0;}
#turretButtons{display:flex;flex-direction:column;gap:4px;}
#turretButtons .buyRow{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;}

/* ── Buttons ────────────────────────────────────────────── */
button{
  appearance:none;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(34,48,70,.9),rgba(18,26,42,.95));
  color:var(--text);
  border-radius:7px;
  padding:3px 5px;
  min-height:44px;
  cursor:pointer;
  font:inherit;
  font-size:11px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  transition:transform .08s,filter .1s,border-color .1s;
  white-space:normal;
  text-align:center;
  width:100%;
}
button:hover{transform:translateY(-1px);filter:brightness(1.07);}
button:active{transform:translateY(1px);}
button.disabled{opacity:.42;cursor:not-allowed;filter:grayscale(.3);pointer-events:none;}
button.ready{border-color:rgba(255,214,92,.8);box-shadow:0 0 0 1px rgba(255,214,92,.2),inset 0 0 14px rgba(255,214,92,.08);}
button.evolveReady{animation:pulse 1.1s infinite;border-color:rgba(125,255,151,.8);}
button.sellBtn{min-height:30px;background:linear-gradient(180deg,rgba(60,20,20,.7),rgba(38,14,14,.9));border-color:rgba(255,80,80,.3);width:100%;}
button.sellBtn:hover{border-color:rgba(255,80,80,.7);}
button.activeSpeed{border-color:rgba(120,168,255,.9);background:linear-gradient(180deg,rgba(30,55,100,.9),rgba(14,30,60,.95));box-shadow:0 0 0 1px rgba(120,168,255,.3),inset 0 0 14px rgba(120,168,255,.1);}
button.pauseActive{border-color:rgba(255,180,60,.9);background:linear-gradient(180deg,rgba(80,50,10,.9),rgba(40,25,5,.95));}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(125,255,151,.2);}50%{box-shadow:0 0 0 6px rgba(125,255,151,0);}}
.btnName{font-weight:700;font-size:10px;}
.btnMeta{font-size:9px;color:var(--muted);margin-top:1px;line-height:1.3;}
#slotUpgrade button{min-height:32px;}
.speedRow{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;flex-shrink:0;}
.speedRow button{min-height:30px;font-size:12px;font-weight:700;}

/* ── Mode overlay ───────────────────────────────────────── */
#modeOverlay{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(4,7,14,.85);
  backdrop-filter:blur(4px);
  z-index:30;
}
#modeOverlay.show{display:flex;}
#modeCard{
  width:min(520px,90vw);
  padding:28px 22px;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(12,18,30,.98),rgba(8,14,24,.99));
  border:1px solid rgba(255,255,255,.09);
  text-align:center;
  box-shadow:0 28px 70px rgba(0,0,0,.6);
}
#modeCard h1{margin:0 0 6px;font-size:32px;}
#modeCard p{color:var(--muted);margin:0 0 16px;}
.modeGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.modeGrid button{min-height:76px;border-radius:12px;}

/* ── Stats overlay ──────────────────────────────────────── */
#statsOverlay{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(4,7,14,.80);
  backdrop-filter:blur(3px);
  z-index:25;
}
#statsOverlay.show{display:flex;}
#statsCard{
  width:min(640px,94vw);
  max-height:88vh;
  overflow-y:auto;
  padding:22px;
  border-radius:16px;
  background:linear-gradient(180deg,rgba(12,18,28,.98),rgba(16,25,40,.99));
  border:1px solid rgba(255,255,255,.09);
  text-align:left;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
#statsCard h2{margin:0 0 12px;text-align:center;}
.statsSection{margin-bottom:14px;}
.statsSection h3{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:0 0 7px;}
.statsGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;}
.statBox{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:8px;padding:7px 9px;}
.statBox .label{font-size:10px;color:var(--muted);}
.statBox .val{font-size:17px;font-weight:700;color:var(--text);}
.scoreTable{width:100%;border-collapse:collapse;font-size:12px;}
.scoreTable th{color:var(--muted);font-weight:600;text-align:left;padding:4px 6px;border-bottom:1px solid var(--line);}
.scoreTable td{padding:4px 6px;border-bottom:1px solid rgba(255,255,255,.04);}
.achievGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:7px;}
.achievBox{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:8px;padding:7px 9px;}
.achievBox.unlocked{border-color:rgba(255,214,92,.5);background:rgba(255,214,92,.06);}
.achievBox.locked{opacity:.4;}
.aicon{font-size:20px;margin-bottom:3px;}
.aname{font-size:11px;font-weight:700;}
.adesc{font-size:10px;color:var(--muted);margin-top:2px;}

/* ── Game overlay (win/lose/start) ── FIXED over alles ──── */
#overlay{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(4,7,14,.80);
  backdrop-filter:blur(3px);
  z-index:20;
}
#overlay.show{display:flex;}
#overlayCard{
  width:min(480px,92vw);
  padding:26px 22px;
  border-radius:16px;
  background:linear-gradient(180deg,rgba(12,18,30,.98),rgba(8,14,24,.99));
  border:1px solid rgba(255,255,255,.09);
  text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,.6);
}
#overlayCard h1{margin:0 0 8px;font-size:28px;}
#overlayCard p{color:var(--muted);margin:0 0 14px;white-space:pre-line;}
#overlayCard button{max-width:260px;}

/* ── Hint bar ── FIXED onderin, zweeft over bottomBar ────── */
#hint{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  padding:3px 12px;
  font-size:9.5px;
  color:var(--muted);
  background:rgba(4,7,14,.82);
  border-top:1px solid var(--line);
  z-index:10;
  line-height:1.4;
  pointer-events:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ── Tooltip ────────────────────────────────────────────── */
#tooltip{
  position:fixed;
  display:none;
  background:rgba(8,14,26,.97);
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  padding:7px 11px;
  font-size:12px;
  line-height:1.5;
  pointer-events:none;
  z-index:50;
  max-width:260px;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
}