/* Fortalesa Mutant — interfície sci-fi acolorida */
:root {
  --bg: #060a16;
  --bg2: #0a1024;
  --panel: rgba(14, 22, 48, 0.82);
  --panel-line: rgba(90, 150, 255, 0.22);
  --txt: #d8e6ff;
  --dim: #8195bd;
  --cyan: #3ad6ff;
  --violet: #b48bff;
  --pink: #ff6ee7;
  --lime: #7dffaf;
  --amber: #ffd24d;
  --orange: #ff9f2e;
  --red: #ff5b6e;
  --r: 12px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%;
  overscroll-behavior: none;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  background: var(--bg);
  color: var(--txt);
  font-family: Rajdhani, 'Segoe UI', system-ui, sans-serif;
  overflow: hidden;
}
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(1000px 600px at 12% -10%, rgba(58,214,255,.14), transparent 60%),
    radial-gradient(900px 600px at 90% 110%, rgba(255,110,231,.13), transparent 60%);
}

#app {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr) 300px;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "top top top" "left stage right";
  gap: 12px; height: 100%; padding: 12px;
}

/* ── BARRA SUPERIOR ── */
#topbar {
  grid-area: top;
  display: flex; align-items: center; gap: 18px;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: var(--r);
  padding: 10px 16px;
  backdrop-filter: blur(8px);
}
.brand { display: flex; align-items: center; gap: 11px; min-width: 232px; }
.brand .logo {
  font-size: 30px; color: var(--cyan);
  text-shadow: 0 0 18px var(--cyan);
  animation: spin 9s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }
.brand h1 {
  font-family: Orbitron, sans-serif; font-size: 18px; font-weight: 800;
  margin: 0; letter-spacing: 1.6px;
  background: linear-gradient(90deg, var(--cyan), var(--pink));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand .sub { font-size: 11px; color: var(--dim); letter-spacing: 1px; }

.resources { display: flex; gap: 10px; }
.res {
  position: relative; min-width: 96px;
  background: rgba(6, 12, 30, .72);
  border: 1px solid var(--panel-line);
  border-radius: 10px; padding: 7px 12px 16px;
  display: flex; align-items: baseline; gap: 6px;
  transition: transform .18s, box-shadow .18s;
}
.res b { font-size: 21px; font-family: Orbitron, sans-serif; }
.res .max { font-size: 12px; color: var(--dim); }
.res .ico { font-size: 15px; }
.res label {
  position: absolute; left: 12px; bottom: 3px;
  font-size: 9px; letter-spacing: 1.4px; color: var(--dim);
}
.res-energy { border-color: rgba(255,210,77,.4); } .res-energy b, .res-energy .ico { color: var(--amber); }
.res-scrap  { border-color: rgba(125,255,175,.4); } .res-scrap b, .res-scrap .ico { color: var(--lime); }
.res-core   { border-color: rgba(58,214,255,.4); } .res-core b, .res-core .ico { color: var(--cyan); }
.res.bump { transform: translateY(-3px) scale(1.04); box-shadow: 0 0 22px rgba(255,255,255,.18); }
.res.hurt { animation: hurt .5s; }
@keyframes hurt {
  0%,100% { transform: none; }
  25% { transform: translateX(-6px); } 75% { transform: translateX(6px); }
}

.wavebox { flex: 1; min-width: 150px; }
.wavenum { font-size: 12px; letter-spacing: 2px; color: var(--dim); }
.wavenum b { font-family: Orbitron, sans-serif; font-size: 17px; color: var(--txt); }
.wavename { font-size: 15px; font-weight: 700; color: var(--pink); letter-spacing: .5px; }
.wavebar { height: 5px; border-radius: 3px; background: rgba(255,255,255,.1); margin-top: 5px; overflow: hidden; }
.wavebar i { display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--cyan), var(--pink)); transition: width .35s; }

.phasebox { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
#phaseTag {
  font-family: Orbitron, sans-serif; font-size: 12px; letter-spacing: 2px;
  padding: 6px 14px; border-radius: 999px; border: 1px solid;
}
.phase-planning { color: var(--cyan); border-color: var(--cyan); background: rgba(58,214,255,.1); }
.phase-invasion { color: var(--red); border-color: var(--red); background: rgba(255,91,110,.12);
  animation: alarm 1.1s infinite; }
@keyframes alarm { 50% { box-shadow: 0 0 22px rgba(255,91,110,.55); } }
.ctrls { display: flex; gap: 6px; }

button {
  font-family: Rajdhani, sans-serif; font-weight: 700; cursor: pointer;
  border-radius: 9px; border: 1px solid var(--panel-line);
  background: rgba(30, 44, 88, .7); color: var(--txt);
  padding: 7px 12px; font-size: 13px; letter-spacing: .6px;
  transition: all .15s;
}
button:hover:not(:disabled) { background: rgba(58,214,255,.2); border-color: var(--cyan); transform: translateY(-1px); }
button:disabled { opacity: .42; cursor: not-allowed; }
button.ghost { padding: 6px 10px; min-width: 34px; }
button.ghost.on { background: rgba(58,214,255,.24); border-color: var(--cyan); color: #fff; }
button.primary {
  background: linear-gradient(135deg, #2ea8ff, #b44dff);
  border: none; color: #fff; padding: 12px 26px; font-size: 16px;
  font-family: Orbitron, sans-serif; letter-spacing: 1.4px;
  box-shadow: 0 6px 24px rgba(90,110,255,.4);
}
button.primary:hover:not(:disabled) { filter: brightness(1.15); transform: translateY(-2px); }
button.danger { background: linear-gradient(135deg, #ff4d6b, #ff9a2e); border: none; color: #fff; }

/* ── PANELLS ── */
aside { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
#left { grid-area: left; } #right { grid-area: right; }
.panel {
  background: var(--panel); border: 1px solid var(--panel-line);
  border-radius: var(--r); padding: 11px 13px; backdrop-filter: blur(8px);
  min-height: 0; display: flex; flex-direction: column;
}
.panel.grow { flex: 1; overflow: hidden; }
.panel h2 {
  font-family: Orbitron, sans-serif; font-size: 11px; letter-spacing: 2px;
  color: var(--dim); margin: 0 0 9px; text-transform: uppercase;
  border-bottom: 1px solid var(--panel-line); padding-bottom: 7px; flex: none;
}
.hint { font-size: 13px; color: var(--dim); line-height: 1.5; }

/* ── PALETA DE TORRES ── */
.palette { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tcard {
  position: relative; text-align: left; padding: 9px 9px 8px;
  border-radius: 10px; border: 1px solid var(--panel-line);
  background: rgba(8, 14, 34, .8); cursor: pointer; transition: all .15s;
}
.tcard:hover { transform: translateY(-2px); }
.tcard .tname { font-family: Orbitron, sans-serif; font-size: 11px; letter-spacing: .7px; }
.tcard .tcost { font-size: 12px; color: var(--lime); font-weight: 700; margin-top: 3px; }
.tcard .tstat { font-size: 11px; color: var(--dim); }
.tcard.sel { box-shadow: 0 0 0 2px currentColor, 0 0 20px -4px currentColor; }
.tcard.poor { opacity: .45; }
.tcard .glyph {
  position: absolute; right: 7px; top: 6px; width: 22px; height: 22px;
  border-radius: 5px; opacity: .9;
}

/* ── INSPECTOR ── */
.insp-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.insp-head .dot { width: 15px; height: 15px; border-radius: 4px; box-shadow: 0 0 12px currentColor; }
.insp-head .nm { font-family: Orbitron, sans-serif; font-size: 13px; }
.insp-head .tier { font-size: 10px; padding: 2px 7px; border-radius: 999px; border: 1px solid currentColor; }
.insp-desc { font-size: 12.5px; color: var(--txt); opacity: .85; line-height: 1.45; margin-bottom: 9px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 9px; margin-bottom: 9px; }
.stat { font-size: 12px; display: flex; justify-content: space-between;
  border-bottom: 1px dotted rgba(140,170,230,.2); padding-bottom: 2px; }
.stat span { color: var(--dim); } .stat b { font-family: Orbitron, sans-serif; font-size: 11px; }
.tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.tag { font-size: 10px; padding: 2px 8px; border-radius: 999px;
  background: rgba(58,214,255,.14); border: 1px solid rgba(58,214,255,.35); color: var(--cyan); }
.killbars { margin-bottom: 10px; }
.killrow { display: flex; align-items: center; gap: 7px; font-size: 11px; margin-bottom: 3px; }
.killrow .kb { flex: 1; height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.killrow .kb i { display: block; height: 100%; border-radius: 3px; transition: width .3s; }
.mutbox {
  border: 1px dashed var(--lime); border-radius: 9px; padding: 8px 10px;
  background: rgba(125,255,175,.08); margin-bottom: 9px; font-size: 12px;
}
.mutbox b { color: var(--lime); font-family: Orbitron, sans-serif; font-size: 11px; }
.acts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.acts button { font-size: 12px; padding: 8px 6px; }
.acts .full { grid-column: 1 / -1; }
.cost { font-size: 10px; opacity: .8; display: block; font-weight: 400; }

/* ── ESCENARI ── */
#stage { grid-area: stage; display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; }
#canvasWrap {
  position: relative; flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--panel-line);
  background: #060a16;
  box-shadow: inset 0 0 90px rgba(0,0,0,.65);
}
#board { width: 100%; height: 100%; display: block; cursor: crosshair;
  touch-action: none; outline: none; }

#banner {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  font-family: Orbitron, sans-serif; font-size: 44px; letter-spacing: 6px;
  color: #fff; text-shadow: 0 0 34px var(--cyan); pointer-events: none;
  animation: bannerIn 1.5s forwards; white-space: nowrap;
}
@keyframes bannerIn {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.75); letter-spacing: 22px; }
  22% { opacity: 1; transform: translate(-50%,-50%) scale(1); letter-spacing: 6px; }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%,-58%) scale(1.03); }
}

#tooltip {
  position: absolute; pointer-events: none; z-index: 20;
  background: rgba(6, 12, 30, .96); border: 1px solid var(--cyan);
  border-radius: 9px; padding: 8px 11px; font-size: 12px; max-width: 250px;
  box-shadow: 0 10px 30px rgba(0,0,0,.6);
}
#tooltip .tt-name { font-family: Orbitron, sans-serif; font-size: 12px; margin-bottom: 4px; }
#tooltip .tt-row { color: var(--dim); }
#tooltip .tt-row b { color: var(--txt); }

#actionbar {
  display: flex; align-items: center; gap: 14px; flex: none;
  background: var(--panel); border: 1px solid var(--panel-line);
  border-radius: var(--r); padding: 9px 14px;
}
.action-hint { flex: 1; font-size: 13px; color: var(--dim); }
.action-hint b { color: var(--amber); }
.action-hint.err { color: var(--red); animation: hurt .4s; }

/* ── DRETA ── */
#eventPanel.active { border-color: var(--pink); box-shadow: 0 0 26px -8px var(--pink); }
.ev { display: flex; gap: 10px; align-items: flex-start; }
.ev .evi { font-size: 24px; line-height: 1; }
.ev .evn { font-family: Orbitron, sans-serif; font-size: 12px; margin-bottom: 3px; }
.ev .evt { font-size: 12px; color: var(--dim); line-height: 1.45; }
.ev.bad .evn { color: var(--red); } .ev.good .evn { color: var(--lime); }

.wavelist { display: flex; flex-direction: column; gap: 6px; }
.wrow { display: flex; align-items: center; gap: 8px; font-size: 12.5px; cursor: help; }
.wrow .wd { width: 13px; height: 13px; border-radius: 4px; box-shadow: 0 0 10px currentColor; flex: none; }
.wrow .wn { flex: 1; } .wrow .wc { font-family: Orbitron, sans-serif; font-size: 11px; color: var(--amber); }

.log { overflow-y: auto; font-size: 12px; line-height: 1.45; flex: 1; padding-right: 4px; }
.log div { padding: 3px 0; border-bottom: 1px solid rgba(140,170,230,.08); color: var(--dim); }
.log .good { color: var(--lime); } .log .bad { color: var(--red); }
.log .warn { color: var(--amber); } .log .mutate { color: var(--pink); font-weight: 700; }
.log .phase { color: var(--cyan); font-family: Orbitron, sans-serif; font-size: 10px; letter-spacing: 1.2px; }
::-webkit-scrollbar { width: 7px; } ::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(120,160,240,.3); border-radius: 4px; }

/* ── OVERLAY ── */
.overlay {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  background: rgba(3, 6, 16, .88); backdrop-filter: blur(6px);
}
.overlay.hidden { display: none; }
.modal {
  width: min(860px, 92vw); max-height: 88vh; overflow-y: auto;
  background: linear-gradient(160deg, rgba(16,26,58,.97), rgba(9,14,34,.97));
  border: 1px solid var(--panel-line); border-radius: 18px; padding: 28px 32px;
  box-shadow: 0 30px 90px rgba(0,0,0,.7);
  animation: modalIn .35s cubic-bezier(.2,.9,.3,1.3);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(24px) scale(.96); } }
.modal h2 {
  font-family: Orbitron, sans-serif; font-size: 28px; margin: 0 0 6px; letter-spacing: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--pink));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.modal h3 { font-family: Orbitron, sans-serif; font-size: 13px; letter-spacing: 1.4px;
  color: var(--amber); margin: 20px 0 8px; }
.modal p, .modal li { font-size: 14.5px; line-height: 1.6; color: var(--txt); opacity: .9; }
.modal ul { margin: 6px 0; padding-left: 20px; }
.modal .lead { font-size: 15px; color: var(--dim); margin-bottom: 4px; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.modal .kbd { font-family: Orbitron, sans-serif; font-size: 11px; background: rgba(58,214,255,.15);
  border: 1px solid rgba(58,214,255,.4); border-radius: 5px; padding: 1px 6px; }
.modal .actions { display: flex; gap: 10px; margin-top: 22px; }
.endstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 18px 0; }
.endstat { background: rgba(6,12,30,.7); border: 1px solid var(--panel-line);
  border-radius: 10px; padding: 12px; text-align: center; }
.endstat b { display: block; font-family: Orbitron, sans-serif; font-size: 24px; color: var(--cyan); }
.endstat span { font-size: 10px; letter-spacing: 1.4px; color: var(--dim); }
.hidden { display: none !important; }


/* ── Controls de zoom sobre el tauler ── */
#zoomctl {
  position: absolute; left: 10px; bottom: 10px; z-index: 15;
  display: flex; flex-direction: row; gap: 6px;
}
#zoomctl button {
  width: 36px; height: 36px; padding: 0; font-size: 17px; line-height: 1;
  background: rgba(8, 14, 34, .82); border-color: rgba(90,150,255,.35);
  backdrop-filter: blur(6px);
}

/* ── Barra de confirmació (col·locació en dos temps, tàctil) ── */
#confirmBar {
  display: flex; align-items: center; gap: 10px; flex: none;
  background: linear-gradient(90deg, rgba(125,255,175,.16), rgba(14,22,48,.9));
  border: 1px solid var(--lime); border-radius: var(--r);
  padding: 8px 10px 8px 14px;
  animation: slideUp .2s ease-out;
}
@keyframes slideUp { from { opacity: 0; transform: translateY(10px); } }
#confirmText { flex: 1; font-size: 13.5px; font-weight: 600; }
#confirmText b { color: var(--lime); }
#confirmText .no { color: var(--red); }
button.tiny {
  padding: 9px 16px; font-size: 13px;
  font-family: Orbitron, sans-serif; letter-spacing: 1px;
}
#confirmBar.bad { border-color: var(--red);
  background: linear-gradient(90deg, rgba(255,91,110,.16), rgba(14,22,48,.9)); }
#confirmBar.bad #confirmYes { opacity: .4; pointer-events: none; }

/* ── Pestanyes del full inferior (només pantalles petites) ── */
#tabbar { display: none; grid-area: tabs; gap: 8px; }
#tabbar button {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 7px 4px; font-size: 10.5px; letter-spacing: .8px;
  background: rgba(10, 18, 42, .85);
}
#tabbar button .ti { font-size: 17px; line-height: 1; }
#tabbar button.on {
  background: rgba(58,214,255,.2); border-color: var(--cyan); color: #fff;
  box-shadow: 0 0 18px -6px var(--cyan);
}

/* ── Adaptació a portàtils estrets ── */
@media (max-width: 1360px) {
  #app { grid-template-columns: 236px minmax(0,1fr) 262px; }
  .brand h1 { font-size: 15px; }
  .res { min-width: 82px; }
}

/* ── Pantalla de càrrega (hi és quan es crida firstFrameReady) ── */
#loading {
  position: fixed; inset: 0; z-index: 300;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; background: var(--bg);
  transition: opacity .4s ease;
}
#loading.gone { opacity: 0; pointer-events: none; }
.load-logo {
  font-size: 54px; color: var(--cyan); text-shadow: 0 0 30px var(--cyan);
  animation: spin 3s linear infinite;
}
.load-title {
  font-family: Orbitron, sans-serif; font-size: 20px; letter-spacing: 4px;
  background: linear-gradient(90deg, var(--cyan), var(--pink));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.load-bar {
  width: min(240px, 60vw); height: 4px; border-radius: 3px;
  background: rgba(255,255,255,.1); overflow: hidden;
}
.load-bar i {
  display: block; height: 100%; width: 40%; border-radius: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--pink));
  animation: loadSlide 1.1s ease-in-out infinite;
}
@keyframes loadSlide {
  0% { transform: translateX(-100%); } 100% { transform: translateX(350%); }
}
.load-msg { font-size: 13px; color: var(--dim); letter-spacing: 1px; }


/* ══════════════════════════════════════════════════════════
   DISPOSICIONS ADAPTATIVES
   Requisit de disseny 1 de Playables: jugable de 9:32 a 32:9,
   ajustant-se sol quan canvia el viewport. Cada bloc és autònom:
   no depèn que n'hi hagi cap altre d'actiu.
   ══════════════════════════════════════════════════════════ */

/* Fragment compartit pels dos modes compactes: els panells van a un full
   amb pestanyes i #left/#right comparteixen cel·la. */
@media (max-width: 900px), (max-height: 620px) and (orientation: landscape) {
  html, body { height: 100%; overflow: hidden; }
  #left, #right {
    grid-area: sheet; overflow-y: auto; -webkit-overflow-scrolling: touch;
    gap: 8px; padding-bottom: 2px;
  }
  #left > .panel, #right > .panel { flex: 0 0 auto; }
  .panel.grow { flex: 0 0 auto; overflow: visible; }
  .panel { padding: 10px 12px; }
  .log { max-height: none; }
  #tabbar { display: grid; grid-template-columns: repeat(3, 1fr); }

  body[data-tab="build"] #right { display: none; }
  body[data-tab="wave"] #left,
  body[data-tab="log"]  #left { display: none; }
  body[data-tab="wave"] #panelLog { display: none; }
  body[data-tab="log"]  #eventPanel,
  body[data-tab="log"]  #panelWave { display: none; }

  #banner {
    font-size: 23px; letter-spacing: 2px; max-width: 92%;
    white-space: normal; text-align: center; line-height: 1.15;
  }
  #tooltip { max-width: 220px; font-size: 12.5px; }
  .modal { padding: 20px 18px; border-radius: 14px; }
  .modal h2 { font-size: 21px; }
  .modal p, .modal li { font-size: 13.5px; }
  .cols { grid-template-columns: 1fr; gap: 4px; }
  .endstats { grid-template-columns: repeat(2, 1fr); }
}

/* ── Vertical i quadrat (fins a 9:32): tot en una columna ── */
@media (max-width: 900px) {
  #app {
    height: 100vh; height: 100dvh;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "top" "stage" "sheet" "tabs";
    gap: 8px; padding: 8px;
    padding-top: calc(8px + env(safe-area-inset-top));
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }

  #topbar { flex-wrap: wrap; row-gap: 8px; column-gap: 10px; padding: 8px 10px; }
  .brand { min-width: 0; flex: 0 0 auto; gap: 7px; }
  .brand h1 { font-size: 13px; letter-spacing: 1px; }
  .brand .sub { display: none; }
  .brand .logo { font-size: 22px; }
  .resources { order: 3; flex: 1 1 100%; gap: 6px; }
  .res { flex: 1; min-width: 0; padding: 5px 8px 13px; }
  .res b { font-size: 17px; }
  .res label { font-size: 8px; left: 8px; }
  .wavebox { flex: 1 1 auto; min-width: 90px; }
  .wavenum { font-size: 10px; } .wavenum b { font-size: 14px; }
  .wavename { font-size: 12px; }
  .phasebox { flex-direction: row; align-items: center; gap: 6px; }
  #phaseTag { font-size: 9.5px; padding: 5px 9px; letter-spacing: 1.2px; }

  /* el tauler manté la relació 3:2 exacta de la graella: cap marge mort */
  #stage { grid-area: stage; gap: 7px; }
  #canvasWrap { flex: none; aspect-ratio: 3 / 2; max-height: 50dvh; }
  #zoomctl button { width: 40px; height: 40px; }

  #actionbar { padding: 7px 9px; gap: 9px; }
  .action-hint { font-size: 11.5px; line-height: 1.35; }
  button.primary { padding: 12px 16px; font-size: 13px; letter-spacing: 1px; }
}

/* Molt estret i alt (9:32, 9:21): encara menys alçada per al tauler */
@media (max-aspect-ratio: 1/2) and (max-width: 900px) {
  #canvasWrap { max-height: 32dvh; }
}

/* ── Horitzontal baix (mòbil girat, 21:9, 32:9): tauler a l'esquerra ── */
@media (max-height: 620px) and (orientation: landscape) {
  #app {
    height: 100vh; height: 100dvh;
    grid-template-columns: minmax(0, 1fr) clamp(228px, 20vw, 330px);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "top sheet" "stage sheet" "stage tabs";
    gap: 7px; padding: 7px;
    padding-left: calc(7px + env(safe-area-inset-left));
    padding-right: calc(7px + env(safe-area-inset-right));
  }
  #topbar { grid-area: top; flex-wrap: nowrap; padding: 6px 9px; gap: 9px; }
  #stage { grid-area: stage; gap: 6px; }
  #canvasWrap { aspect-ratio: auto; max-height: none; flex: 1; }

  .brand, .wavebox .wavename, .wavebar { display: none; }
  .resources { order: 0; flex: 1 1 auto; }
  .res { padding: 4px 8px 11px; min-width: 0; }
  .res b { font-size: 15px; }
  .res label { font-size: 7.5px; bottom: 2px; left: 8px; }
  .wavebox { flex: 0 1 auto; min-width: 62px; }
  .phasebox { flex: none; }
  #actionbar { padding: 6px 9px; gap: 8px; }
  .action-hint { font-size: 10.5px; }
  button.primary { padding: 10px 14px; font-size: 12px; }
  #confirmBar { padding: 6px 8px 6px 11px; }
  #confirmText { font-size: 11.5px; }
  #tabbar button span:not(.ti) { display: none; }
  #tabbar button { padding: 9px 4px; }
}

/* Alçada molt curta: la pista de text sobra abans que res */
@media (max-height: 430px) {
  #topbar { padding: 4px 8px; }
  .res { padding: 3px 7px 10px; }
  .res b { font-size: 14px; }
  #actionbar { padding: 5px 8px; }
  button.primary { padding: 8px 12px; font-size: 11.5px; }
  .action-hint { display: none; }
}

/* ── Panoràmica amb alçada suficient (21:9, 32:9 en monitor gran) ── */
@media (min-aspect-ratio: 2/1) and (min-width: 901px) and (min-height: 621px) {
  #app { grid-template-columns: 220px minmax(0, 1fr) 240px; }
  .panel { padding: 8px 10px; }
  .panel h2 { margin-bottom: 6px; padding-bottom: 5px; }
}

/* Objectius tàctils prou grans a qualsevol pantalla amb dit */
@media (pointer: coarse) {
  button { min-height: 42px; }
  button.ghost { min-width: 42px; }
  .tcard { min-height: 76px; }
  .acts button { min-height: 46px; font-size: 12.5px; }
  #zoomctl button { min-height: 0; }
  .log div { padding: 5px 0; }
  .wrow { padding: 3px 0; }
}

/* Amb els dos interruptors d'àudio la fila de controls arriba a sis botons:
   a pantalles estretes s'han d'estrènyer o no hi caben. */
@media (max-width: 900px) {
  .ctrls { gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
  .phasebox { flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
}
@media (max-width: 480px) {
  .ctrls button.ghost { min-width: 36px; padding: 6px 5px; font-size: 12px; }
  #phaseTag { font-size: 9px; padding: 5px 7px; letter-spacing: 1px; }
  .brand h1 { font-size: 11.5px; }
}

/* ── Elecció de mutació ── */
.mutopts { display: grid; gap: 6px; margin: 8px 0 6px; }
.mutopt {
  display: grid; grid-template-columns: 1fr auto; gap: 1px 8px;
  text-align: left; padding: 8px 10px; border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--mc) 55%, transparent);
  background: color-mix(in srgb, var(--mc) 12%, rgba(8, 14, 34, .85));
  transition: all .15s;
}
.mutopt:hover:not(:disabled) {
  background: color-mix(in srgb, var(--mc) 26%, rgba(8, 14, 34, .85));
  border-color: var(--mc);
  transform: translateY(-1px);
}
.mutopt .mo-name {
  font-family: Orbitron, sans-serif; font-size: 11px; letter-spacing: .6px; color: var(--mc);
}
.mutopt .mo-cost { font-size: 11px; color: var(--amber); font-weight: 700; }
.mutopt .mo-desc {
  grid-column: 1 / -1; font-size: 11px; font-weight: 400; line-height: 1.35;
  color: var(--dim); letter-spacing: 0;
}
.mo-note { display: block; font-size: 11px; color: var(--dim); line-height: 1.35; }

/* Navegadors sense color-mix: prou contrast igualment */
@supports not (background: color-mix(in srgb, red 10%, blue)) {
  .mutopt { border-color: var(--mc); background: rgba(8, 14, 34, .85); }
  .mutopt:hover:not(:disabled) { background: rgba(30, 44, 88, .9); }
}

/* Galó de nivell a la capçalera de l'inspector */
.insp-head .lvl {
  font-family: Orbitron, sans-serif; font-size: 10px; letter-spacing: .5px;
  padding: 2px 7px; border-radius: 999px;
  color: var(--amber); border: 1px solid var(--amber);
  background: rgba(255, 210, 77, .12);
}

/* ── Inspector: botó de tancar ── */
.insp-close {
  margin-left: auto; padding: 2px 8px; min-height: 0;
  font-size: 13px; line-height: 1; border-radius: 6px;
  background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18);
}

/* ══════════════════════════════════════════════════════════
   Al mòbil el full inferior és curt i l'inspector hi creix.
   Dues mesures perquè les accions no quedin mai fora de pantalla:
   amagar la paleta mentre hi ha una torre seleccionada, i pujar
   les accions per damunt de les dades.
   ══════════════════════════════════════════════════════════ */
@media (max-width: 900px), (max-height: 620px) and (orientation: landscape) {
  body[data-sel="tower"] #panelBuild { display: none; }

  #inspectorBody { display: flex; flex-direction: column; }
  #inspectorBody > .insp-head { order: 0; }
  #inspectorBody > .mutbox    { order: 1; }
  #inspectorBody > .acts      { order: 2; }
  #inspectorBody > .insp-desc { order: 4; }
  #inspectorBody > .stats     { order: 5; }
  #inspectorBody > .tags      { order: 6; }
  #inspectorBody > .killbars  { order: 7; }
  #inspectorBody > .mo-note   { order: 8; }
  #inspectorBody > .hint      { order: 9; }

  /* la descripció llarga i la nota de millores es poden llegir a l'escriptori */
  #inspectorBody > .insp-desc { font-size: 12px; }
  #inspectorBody > .mo-note { font-size: 10.5px; }
}