/* =========================================================
   STILE UI (overlay HTML sopra il canvas 3D)
   ========================================================= */
:root {
  --bg: #11161f;
  --panel: rgba(12, 16, 24, 0.78);
  --panel-solid: #141a25;
  --line: rgba(255, 255, 255, 0.09);
  --text: #e8ecf3;
  --muted: #8a94a6;
  --hp: #ff4d5e;
  --xp: #3df5ff;
  --gold: #ffc94d;
  --accent: #f2a03d;
  --ally: #33a6ff;          /* compagno: azzurro, in contrasto con i ceppi rossi/arancio/viola */
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--bg); color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;
}
canvas { width: 100%; height: 100%; display: block; outline: none; touch-action: none; }
.hidden { display: none !important; }
.num { font-variant-numeric: tabular-nums; }
.label {
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; }

/* Mirino a croce centrale */
#crosshair { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
#crosshair i {
  position: absolute; background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .55);
}
#crosshair .h { width: 9px; height: 2px; top: -1px; }
#crosshair .v { width: 2px; height: 9px; left: -1px; }
#crosshair .l { left: -14px; } #crosshair .r { left: 5px; }
#crosshair .t { top: -14px; }  #crosshair .b { top: 5px; }
#crosshair .dot { width: 2px; height: 2px; left: -1px; top: -1px; }

/* Munizioni sotto il mirino e barra di ricarica */
#ammo {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, 24px); text-align: center;
  font-weight: 800; font-size: 13px; line-height: 1; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); opacity: .9;
}
#ammo .max { color: var(--muted); font-size: 11px; margin-left: 2px; }
#ammo.low #ammoText { color: #ff6b5e; }
#ammo.reloading #ammoText { color: #9ff8ff; font-size: 11px; letter-spacing: .1em; }
#ammo.reloading .max { display: none; }
#reloadBar { display: none; width: 56px; height: 3px; margin: 5px auto 0; border-radius: 2px; background: rgba(255, 255, 255, .18); overflow: hidden; }
#reloadFill { height: 100%; width: 0; background: #3df5ff; }
#ammo.reloading #reloadBar { display: block; }

/* Numeri del danno vicino al punto d'impatto */
#dmgLayer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.dmg {
  position: absolute; left: 0; top: 0; white-space: nowrap; will-change: transform, opacity;
  font-weight: 800; font-size: 15px; color: #fff; font-variant-numeric: tabular-nums;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 0 2px 3px rgba(0, 0, 0, .7);
}
.dmg.aoe { font-size: 12px; color: #ffcf8a; }
.dmg.dodge { font-size: 13px; font-style: italic; color: #9ff8ff; }
.dmg.weak { font-size: 18px; color: #ff9b4a; } /* colpo alla testa del boss */
.dmg.crit {
  font-size: 24px; color: #ffd84d;
  text-shadow: 2px 2px 0 #3a1000, -2px -2px 0 #3a1000, 2px -2px 0 #3a1000, -2px 2px 0 #3a1000, 0 0 10px rgba(255, 90, 20, .9);
}

.panel {
  position: absolute; background: var(--panel);
  border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px;
  backdrop-filter: blur(4px);
}
.bar { height: 10px; background: rgba(255, 255, 255, .08); border-radius: 2px; overflow: hidden; }
.bar > div { height: 100%; width: 100%; transition: width .12s linear; }

#hpPanel { left: 16px; top: 16px; width: 280px; }
#hpPanel .row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
#hpText { font-size: 15px; font-weight: 700; }
#hpFill { background: var(--hp); }

#statsPanel { right: 16px; top: 16px; display: flex; gap: 18px; }
#statsPanel .v { font-size: 18px; font-weight: 700; margin-top: 2px; }

#poolPanel { right: 16px; top: 86px; width: 230px; }
#poolList { margin-top: 8px; display: grid; gap: 5px; }
.pool-row { display: grid; grid-template-columns: 16px 1fr auto auto; gap: 8px; align-items: center; font-size: 12.5px; }
.pool-row .pg { color: var(--muted); font-size: 11px; }
.pool-row .pp { width: 38px; text-align: right; font-weight: 700; }
.pool-row.contenuto .pn { color: var(--gold); }

/* Glifi della forma base dei ceppi */
.glyph { display: inline-block; width: 14px; height: 14px; background: var(--c); }
.glyph.monolite { width: 8px; height: 16px; margin: 0 3px; }
.glyph.prisma { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.glyph.capsula { width: 9px; height: 16px; border-radius: 6px; margin: 0 2.5px; }

#xpWrap {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  width: min(720px, calc(100% - 32px)); display: flex; align-items: center; gap: 12px;
}
#levelBadge {
  background: var(--xp); color: #062126; font-weight: 800; font-size: 13px;
  padding: 4px 9px; border-radius: 4px; letter-spacing: .06em; white-space: nowrap;
}
#xpWrap .bar { flex: 1; height: 8px; }
#xpFill { background: var(--xp); width: 0; }
#xpText { font-size: 12px; color: var(--muted); white-space: nowrap; }

#toasts { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); display: grid; gap: 6px; justify-items: center; }
.toast {
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  padding: 7px 12px; border-radius: 4px; font-size: 13px; animation: toastIn .25s ease-out;
}
.toast.avvistato { border-left-color: var(--gold); }
.toast b { color: var(--accent); }
.toast.avvistato b { color: var(--gold); }
.toast.heal { border-left-color: #3dff8a; }
.toast.heal b { color: #3dff8a; }
.toast.bomb { border-left-color: #ff4d2e; }
.toast.bomb b { color: #ff7a5c; }
.toast.boss { border-left-color: #ff6a1f; }
.toast.boss b { color: #ff8a4a; }

/* Boss: nome e barra della vita in alto al centro (in basso su schermi stretti e touch) */
#bossBar {
  position: absolute; left: 50%; top: 18px; transform: translateX(-50%);
  width: min(480px, calc(100% - 660px)); min-width: 240px; text-align: center;
}
.boss-head {
  display: flex; justify-content: center; align-items: baseline; gap: 8px; margin-bottom: 5px;
  font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: #ffb070; text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
}
#bossPhase { color: #ff5a3a; font-size: 11px; }
#bossBar .bar {
  position: relative; height: 12px; border: 1px solid rgba(255, 140, 60, .45);
  background: rgba(20, 8, 4, .7); box-shadow: 0 0 12px rgba(255, 90, 20, .35);
}
#bossFill { background: linear-gradient(90deg, #8a1c0c, #ff6a1f); }
#bossBar .mark { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: rgba(255, 255, 255, .35); }
#bossBar.furia #bossFill { background: linear-gradient(90deg, #a0100a, #ff2a1a); animation: bossPulse .6s infinite alternate; }
@keyframes bossPulse { from { filter: brightness(1); } to { filter: brightness(1.4); } }
@media (max-width: 900px) { #bossBar { top: auto; bottom: 46px; width: min(480px, calc(100% - 32px)); } }
body.touch #bossBar { top: auto; bottom: 46px; width: min(420px, calc(100% - 340px)); }

/* Predatore dell'arena: barra verde, sotto quella del boss quando ci sono tutti e due */
#predBar {
  position: absolute; left: 50%; top: 18px; transform: translateX(-50%);
  width: min(380px, calc(100% - 660px)); min-width: 220px; text-align: center;
}
#bossBar:not(.hidden) ~ #predBar { top: 62px; }
#predBar .boss-head { color: #c8ff9a; font-size: 11px; margin-bottom: 4px; }
#predPhase { color: #8fdc5a; font-size: 10px; }
#predBar .bar {
  position: relative; height: 9px; border: 1px solid rgba(140, 255, 90, .4);
  background: rgba(6, 16, 4, .7); box-shadow: 0 0 10px rgba(110, 255, 60, .25);
}
#predFill { background: linear-gradient(90deg, #2f6a12, #9dff4a); }
#predMark { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(255, 255, 255, .6); }
#predBar.furia .boss-head, #predBar.furia #predPhase { color: #ff8a6a; }
#predBar.furia #predFill { background: linear-gradient(90deg, #a0100a, #ff5a2a); animation: bossPulse .6s infinite alternate; }
@media (max-width: 900px) {
  #predBar { top: auto; bottom: 46px; width: min(400px, calc(100% - 32px)); }
  #bossBar:not(.hidden) ~ #predBar { top: auto; bottom: 90px; }
}
body.touch #predBar { top: auto; bottom: 46px; width: min(380px, calc(100% - 340px)); }
body.touch #bossBar:not(.hidden) ~ #predBar { top: auto; bottom: 90px; }
.toast.pred { border-left-color: #9dff4a; }
.toast.pred b { color: #b8ff7a; }

/* Bombe: icone nell'HUD, zona d'effetto e lampo a schermo */
.bomb-row { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
#bombIcons { display: flex; gap: 5px; }
.bomb-ico { width: 13px; height: 13px; border-radius: 50%; background: #262a33; border: 2px solid #4a4f5c; }
.bomb-ico.on { background: #ff4d2e; border-color: #ffb08a; box-shadow: 0 0 8px rgba(255, 77, 46, .7); }
.bomb-row .hint { margin-left: auto; font-size: 11px; color: var(--muted); }
.bomb-row kbd {
  font-family: inherit; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 3px;
  background: rgba(255, 255, 255, .08); border: 1px solid var(--line);
}
#bombFlash {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(ellipse at center, rgba(255, 244, 220, .85), rgba(255, 150, 70, .45) 60%, rgba(255, 80, 30, 0) 100%);
}
#bombFlash.go { animation: bombFlash .7s ease-out; }
@keyframes bombFlash { 0% { opacity: .95; } 100% { opacity: 0; } }
/* L'ellisse coincide con la zona colpita (80% della larghezza, 85% dell'altezza) */
#bombZone {
  position: absolute; left: 50%; top: 50%; width: 80vw; height: 85vh; border-radius: 50%; opacity: 0;
  transform: translate(-50%, -50%) scale(.15);
  border: 3px solid rgba(255, 224, 170, .95);
  box-shadow: 0 0 40px rgba(255, 140, 60, .8), inset 0 0 70px rgba(255, 140, 60, .55);
}
#bombZone.go { animation: bombZone .75s ease-out; }
@keyframes bombZone {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(.15); }
  70% { opacity: .9; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}
@keyframes toastIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Bagliore rosso sul bordo: lampo quando si subisce danno */
#damageVignette {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(ellipse at center, rgba(255, 40, 60, 0) 50%, rgba(255, 30, 50, .45) 80%, rgba(220, 0, 30, .8) 100%);
  box-shadow: inset 0 0 90px 20px rgba(255, 20, 40, .55);
}
/* Vita bassa: bagliore fisso (sotto 20%) e più intenso con vista offuscata (sotto 10%) */
#lowHpVignette {
  position: absolute; inset: 0; opacity: 0; transition: opacity .5s;
  background: radial-gradient(ellipse at center, rgba(255, 30, 50, 0) 52%, rgba(200, 0, 25, .55) 100%);
}
#hud.low #lowHpVignette { animation: lowPulse 1.6s ease-in-out infinite; }
#hud.critical #lowHpVignette { animation: critPulse .85s ease-in-out infinite; }
@keyframes lowPulse { 0%, 100% { opacity: .5; } 50% { opacity: .65; } }
@keyframes critPulse { 0%, 100% { opacity: .7; } 50% { opacity: .95; } }
/* Offuscamento: bordi sfocati e desaturati (visione a tunnel) + leggera sfocatura generale */
#blurEdge {
  position: absolute; inset: 0; opacity: 0; transition: opacity .6s;
  backdrop-filter: blur(7px) saturate(.4); -webkit-backdrop-filter: blur(7px) saturate(.4);
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 28%, #000 72%);
  mask-image: radial-gradient(ellipse at center, transparent 28%, #000 72%);
}
#hud.critical #blurEdge { opacity: 1; }
canvas { transition: filter .6s; }
body.critical canvas { filter: blur(.8px) saturate(.6) brightness(.9); }

/* ---------- OVERLAY / SCHERMATE ---------- */
.overlay {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 16px;
  background: rgba(8, 11, 17, .72); backdrop-filter: blur(3px);
}
.modal {
  background: var(--panel-solid); border: 1px solid var(--line); border-radius: 10px;
  padding: 26px 28px; width: min(520px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.modal.wide { width: min(1080px, 100%); }
/* Errore del gioco nella schermata di pausa: testo da copiare e mandare a chi sviluppa */
.errore {
  margin: 0 0 18px; padding: 10px 12px; border: 1px solid var(--hp); border-radius: 6px;
  background: rgba(255, 77, 94, .08); font: 12px/1.45 ui-monospace, Menlo, Consolas, monospace;
  white-space: pre-wrap; word-break: break-word; max-height: 40vh; overflow: auto; user-select: text;
}
.errore b { font-family: inherit; color: var(--hp); }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .18em; color: var(--accent); text-transform: uppercase; }
h1, h2, h3 { margin: 0; }
h1 { font-size: 40px; letter-spacing: -.01em; margin: 6px 0 10px; }
h2 { font-size: 26px; margin: 6px 0 6px; }
h3 { font-size: 15px; margin: 22px 0 10px; display: flex; align-items: center; gap: 10px; }
.sub, .hint { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 0; }
.hint { font-size: 13px; margin: -4px 0 12px; }
.step {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: #1a1206; font-size: 12px; font-weight: 800;
}
.keys { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 20px 0; font-size: 14px; }
.keys kbd {
  font-family: inherit; font-size: 12px; font-weight: 700; padding: 3px 7px; border-radius: 4px;
  background: rgba(255, 255, 255, .08); border: 1px solid var(--line); white-space: nowrap;
}
button {
  font: inherit; font-weight: 700; font-size: 15px; letter-spacing: .04em; cursor: pointer;
  background: var(--accent); color: #1a1206; border: 0; border-radius: 6px; padding: 12px 22px;
}
button:hover:not(:disabled) { filter: brightness(1.1); }
button:disabled { opacity: .35; cursor: not-allowed; }
button.full { width: 100%; }

/* Carte di scelta (bonus e prede) */
.cards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.card {
  text-align: left; background: rgba(255, 255, 255, .03); border: 1px solid var(--line);
  border-radius: 8px; padding: 12px 14px; color: var(--text); font-weight: 400; letter-spacing: 0;
  font-size: 14px; transition: border-color .12s, background .12s;
}
.card:hover:not(:disabled) { filter: none; border-color: rgba(255, 255, 255, .25); }
.card.sel { border-color: var(--accent); background: rgba(242, 160, 61, .1); }
#contenCards .card.sel { border-color: var(--gold); background: rgba(255, 201, 77, .09); }
.thumb {
  height: 128px; margin: -2px -4px 10px; border-radius: 6px; overflow: hidden;
  background: radial-gradient(ellipse 60% 30% at 50% 82%, rgba(0, 0, 0, .35), transparent 70%),
              radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, .07), transparent 70%),
              rgba(0, 0, 0, .2);
}
.thumb img { width: 100%; height: 100%; object-fit: contain; display: block; opacity: 0; transition: opacity .25s; }
.thumb img.ready { opacity: 1; }
.card .t { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.bico {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 6px;
  color: var(--accent); background: rgba(242, 160, 61, .12);
}
.bico svg { width: 20px; height: 20px; display: block; }
.card.sel .bico { color: #1a1206; background: var(--accent); }
.card .d { color: var(--muted); font-size: 13px; margin-top: 4px; }
.card .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; font-size: 12.5px; margin-top: 8px; }
.card .stats span { color: var(--muted); }
/* Anteprima della selezione: valori prima → dopo */
.card .stats span.hl { color: var(--text); }
.card .stats i { font-style: normal; }
.card .stats .was { color: var(--muted); font-weight: 600; }
.card .stats .arr { color: var(--muted); margin: 0 4px; }
.card .stats .good { color: var(--gold); }
.card .stats .up { color: #ff6b5e; }
.card .stats .neu { color: var(--text); }
/* L'anteprima occupa sempre lo stesso spazio (i tre testi sono sovrapposti e se ne vede uno):
   la carta non cambia ingombro al passaggio del mouse né alla scelta */
.effetto {
  display: grid; margin-top: 8px; font-size: 12px; font-weight: 700; padding: 4px 8px; border-radius: 4px;
  border: 1px dashed transparent; color: var(--muted);
}
.effetto > span { grid-area: 1 / 1; visibility: hidden; }
.effetto .en { visibility: visible; font-weight: 400; }
.card.preview-contenuto .effetto { color: #1d1503; background: var(--gold); }
.card.preview-muta .effetto { color: #ffb3a8; background: rgba(255, 77, 94, .12); border-color: rgba(255, 107, 94, .55); }
.card.preview-contenuto .effetto .en, .card.preview-muta .effetto .en { visibility: hidden; }
.card.preview-contenuto .effetto .ep, .card.preview-muta .effetto .em { visibility: visible; }
/* I valori "prima → dopo" restano su una riga: l'anteprima non aggiunge righe */
#contenCards .stats b { white-space: nowrap; }
/* Contenuto in alto (i bottoni lo centrerebbero) e anteprima in fondo: carte affiancate allineate */
#contenCards .card { display: flex; flex-direction: column; justify-content: flex-start; }
#contenCards .chips { margin-bottom: 8px; }
#contenCards .effetto { margin-top: auto; }
#contenCards .card.preview-muta:not(.sel) { border-color: rgba(255, 107, 94, .4); }
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.chip { font-size: 11px; padding: 2px 6px; border-radius: 3px; background: rgba(255, 255, 255, .07); color: #c5ccd8; }
.chip.base { opacity: .55; }
.chip.nuova-chip { background: rgba(242, 160, 61, .22); color: var(--accent); font-weight: 700; opacity: 1; }

/* Esito dell'evoluzione: cosa è cambiato in ogni ceppo */
.card.static { cursor: default; }
.card.static:hover { border-color: var(--line); }
.card .nuova { margin-top: 6px; font-size: 13px; }
.card .nuova .lbl { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; margin-right: 6px; }
.card .nuova b { color: var(--accent); }
.card .effparte { font-size: 12.5px; margin-top: 3px; color: #e6c27a; }
.card .effparte.off { color: var(--muted); }
#esitoNote { color: var(--muted); font-size: 13px; line-height: 1.5; flex: 1; min-width: 240px; }
.badge { font-size: 10px; font-weight: 800; letter-spacing: .1em; color: #1d1503; background: var(--gold); padding: 2px 5px; border-radius: 3px; }
.modal-foot {
  display: flex; gap: 16px; align-items: center; justify-content: space-between;
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); flex-wrap: wrap;
}
/* Il piè di pagina con il pulsante di conferma resta visibile mentre si scorrono le carte */
.modal.wide .modal-foot {
  position: sticky; bottom: -26px; z-index: 1; background: var(--panel-solid);
  margin-bottom: -26px; padding-bottom: 16px;
}
#luSummary { color: var(--muted); font-size: 13px; line-height: 1.5; flex: 1; min-width: 240px; min-height: 4.5em; } /* 3 righe: a scelta fatta il riepilogo non allarga il riquadro */
#luSummary b { color: var(--text); }

.go-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0 20px; }
.go-stats div { background: rgba(255, 255, 255, .04); border-radius: 6px; padding: 10px 12px; }
.go-stats .v { font-size: 22px; font-weight: 800; margin-top: 2px; }
#goNote { font-size: 13px; color: var(--muted); margin: 0 0 18px; line-height: 1.5; }

/* Glifi dei corpi introdotti dalla corsa */
.glyph.ragno { width: 16px; height: 9px; margin: 2.5px 0; border-radius: 50% 50% 30% 30%; }
.glyph.sfera { border-radius: 50%; }
.glyph.medusa { height: 10px; margin: 2px 0; border-radius: 8px 8px 2px 2px; }
.glyph.totem { width: 10px; height: 16px; margin: 0 2px; clip-path: polygon(10% 0, 90% 0, 90% 30%, 100% 30%, 100% 65%, 85% 65%, 85% 100%, 15% 100%, 15% 65%, 0 65%, 0 30%, 10% 30%); }
.pool-row.locked { opacity: .4; }
.card .beh { font-size: 11.5px; color: var(--accent); margin-top: 3px; }

.mode-link { display: block; text-align: center; margin-top: 12px; color: var(--muted); font-size: 13px; }
.mode-link:hover { color: var(--text); }

/* Carte compatte (scelta ed evoluzione del compagno) */
.cards.compact { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.cards.compact .card { padding: 9px 10px; position: relative; }
.cards.compact .thumb { height: 92px; margin-bottom: 6px; }
.cards.compact .t { font-size: 13.5px; }
.cards.compact .d { font-size: 12px; }
.gen { font-size: 11px; font-weight: 700; color: var(--muted); margin-left: auto; }
#companionCards .card { display: flex; flex-direction: column; justify-content: flex-start; } /* i bottoni centrano il contenuto: le miniature restano allineate in alto */
#companionCards .card.sel { border-color: var(--ally); background: rgba(51, 166, 255, .12); }
.strain-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; font-weight: 700; }
.strain-head:first-child { margin-top: 0; }
/* Evoluzione del compagno: cosa fa la parte su di lui e cosa fa sui mostri */
.card .alleato { color: var(--ally); font-size: 12px; margin-top: 5px; }
.card .nemico { color: var(--muted); font-size: 11.5px; margin-top: 4px; }
.card .alleato b, .card .nemico b { font-weight: 700; }
.card .off { opacity: .7; }
.pips.ally i.on { background: rgba(51, 166, 255, .55); }
.pips.ally i.next { background: var(--ally); box-shadow: 0 0 6px rgba(51, 166, 255, .7); }
.go-stats.four { grid-template-columns: repeat(4, 1fr); }
button.ghost { background: rgba(255, 255, 255, .07); color: var(--text); border: 1px solid var(--line); }
.btn-row { display: flex; gap: 10px; }
.btn-row button { flex: 1; }
.pool-row.ally .pn { color: var(--ally); }
.pool-row.ally.down { opacity: .5; }
.pool-row .allyhp { grid-column: 1 / -1; height: 4px; background: rgba(255, 255, 255, .12); border-radius: 2px; overflow: hidden; }
.pool-row .allyhp i { display: block; height: 100%; background: var(--ally); transition: width .15s linear; }

/* ---------- CONTROLLI TOUCH (mobile) ---------- */
body:not(.touch) .only-touch { display: none !important; }
body.touch .only-desk { display: none !important; }
#touchUI { position: absolute; inset: 0; pointer-events: none; }
#joyBase {
  position: absolute; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .05);
  left: calc(90px + env(safe-area-inset-left)); top: calc(100% - 120px); opacity: .55; transition: opacity .15s;
}
#joyBase.active { opacity: 1; transition: none; }
#joyKnob {
  position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%;
  background: rgba(255, 255, 255, .28); border: 2px solid rgba(255, 255, 255, .5);
}
.tbtn {
  position: absolute; pointer-events: auto; touch-action: none; border-radius: 50%; padding: 0;
  display: grid; place-items: center; color: var(--text); background: rgba(12, 16, 24, .6);
  border: 2px solid rgba(255, 255, 255, .25); font-size: 12px; font-weight: 800; letter-spacing: .06em;
}
#bombBtn {
  width: 74px; height: 74px; right: calc(28px + env(safe-area-inset-right)); bottom: 62px;
  border-color: #ff7a5c; color: #ffb08a;
}
#bombBtn::after {
  content: attr(data-n); position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; border-radius: 11px;
  background: #ff4d2e; color: #fff; font-size: 12px; display: grid; place-items: center;
}
#bombBtn.empty { opacity: .35; }
#pauseBtn { width: 44px; height: 44px; left: 50%; top: calc(10px + env(safe-area-inset-top)); margin-left: -22px; font-size: 14px; }
body.touch .bomb-row .hint { display: none; }
@media (orientation: landscape) {
  body.touch #hpPanel { left: calc(12px + env(safe-area-inset-left)); top: calc(10px + env(safe-area-inset-top)); }
  body.touch #statsPanel { right: calc(12px + env(safe-area-inset-right)); top: calc(10px + env(safe-area-inset-top)); }
}
@media (orientation: portrait) {
  #pauseBtn { left: auto; right: 16px; margin: 0; top: 112px; }
}
#rotateHint { display: none; color: var(--gold); margin: 0 0 14px; }
@media (orientation: portrait) { body.touch #rotateHint { display: block; } }

/* Schermi bassi (telefono in orizzontale): HUD e modali compatti */
@media (max-height: 520px) {
  #poolPanel { display: none; }
  #hpPanel { width: 210px; padding: 7px 10px; }
  #hpText { font-size: 13px; }
  #statsPanel { gap: 12px; padding: 7px 10px; }
  #statsPanel .v { font-size: 15px; }
  #xpWrap { bottom: 10px; width: min(560px, calc(100% - 220px)); }
  #toasts { top: 22%; }
  .toast { font-size: 12px; padding: 5px 10px; }
  .modal { padding: 16px 18px; }
  h1 { font-size: 30px; margin: 4px 0 6px; }
  h2 { font-size: 21px; }
  h3 { margin: 14px 0 8px; }
  .keys { margin: 12px 0; gap: 6px 12px; font-size: 13px; }
  .thumb { height: 90px; }
  .cards.compact .thumb { height: 72px; }
  .go-stats { margin: 10px 0 12px; }
  .go-stats .v { font-size: 18px; }
  .modal-foot { margin-top: 14px; padding-top: 12px; }
  .modal.wide .modal-foot { bottom: -16px; margin-bottom: -16px; padding-bottom: 12px; }
}

@media (max-width: 640px) {
  .go-stats.four { grid-template-columns: 1fr 1fr; }
  #poolPanel { display: none; }
  #hpPanel { width: calc(100% - 32px); }
  #statsPanel { top: 112px; left: 16px; right: auto; }
}

/* ---------- ARMI E POTENZIAMENTI ---------- */
/* Numeri del danno dei potenziamenti */
.dmg.burn { font-size: 12px; color: #ff9d3a; }
.dmg.lama { font-size: 12px; color: #bfe9ff; }
.dmg.rad { font-size: 12px; color: #7dffcf; }

/* Le lame non hanno munizioni */
body[data-arma="lame"] #ammo { display: none; }

/* Scelta dell'arma */
.modal.start { width: min(860px, 100%); }
.scelta-arma { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 18px; }
.arma-card .d.num { color: var(--text); font-size: 12px; margin-top: 8px; }
.arma-card .bonus-arma { color: var(--accent); font-size: 12px; }
.arma-card .bonus-no { font-size: 12px; opacity: .8; }
.scelta-arma.mini .d:not(.num) { display: none; }
.scelta-arma.mini .card { padding: 9px 12px; }

/* Carte dei potenziamenti a livelli: etichetta e tacche del livello */
.card .t .bn { flex: 1; }
.lv {
  font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  padding: 2px 6px; border-radius: 3px; color: var(--accent); background: rgba(242, 160, 61, .14);
}
.lv.nuovo { color: #1a1206; background: var(--accent); }
.pips { display: flex; gap: 4px; margin-top: 8px; }
.pips i { flex: 1; max-width: 26px; height: 5px; border-radius: 2px; background: rgba(255, 255, 255, .1); }
.pips i.on { background: rgba(242, 160, 61, .55); }
.pips i.next { background: var(--accent); box-shadow: 0 0 6px rgba(242, 160, 61, .7); }

/* Simboli dei potenziamenti presi, nel pannello della vita */
.bonus-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.bonus-row:empty { display: none; }
.bb {
  position: relative; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 5px;
  color: var(--accent); background: rgba(242, 160, 61, .12); border: 1px solid rgba(242, 160, 61, .25);
}
.bb .bbi, .bb svg { width: 15px; height: 15px; display: block; }
.bb i {
  position: absolute; right: -5px; bottom: -5px; min-width: 13px; height: 13px; padding: 0 2px; border-radius: 7px;
  font-style: normal; font-size: 9px; font-weight: 800; line-height: 13px; text-align: center;
  color: #1a1206; background: var(--accent);
}
.bb.max { border-color: var(--gold); color: var(--gold); }
.bb.max i { background: var(--gold); font-size: 7.5px; }
.bb.arma { color: var(--xp); background: rgba(61, 245, 255, .1); border-color: rgba(61, 245, 255, .3); margin-right: 4px; }
@media (max-height: 520px) {
  .bonus-row { gap: 4px; margin-top: 6px; }
  .bb { width: 20px; height: 20px; }
  .bb .bbi, .bb svg { width: 13px; height: 13px; }
}
.arma-card { display: flex; flex-direction: column; justify-content: flex-start; }