/* PolyBlast Mosaic - UI layer. Il gioco vive sul canvas, qui c'e' solo HUD e menu. */

:root{
  --ink:#eaf2ff; --ink-dim:#93a4c4;
  --bg-0:#05060f; --bg-1:#0b1024; --panel:rgba(12,18,38,.88);
  --accent:#00f0ff; --accent-2:#ff2bd6; --good:#39ff88; --warn:#ffd23f;
  --line:rgba(255,255,255,.10); --glow:0 0 18px rgba(0,240,255,.45);
  --radius:16px; --tap:48px;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-num:ui-monospace,"SF Mono",Menlo,Consolas,"Roboto Mono",monospace;
}
body.theme-neon{ --bg-0:#05060f; --bg-1:#0d1030; --accent:#00f0ff; --accent-2:#ff2bd6; --glow:0 0 18px rgba(0,240,255,.5); }
body.theme-crystal{ --bg-0:#04121a; --bg-1:#0a2a36; --accent:#7ff0e0; --accent-2:#b98cff; --ink:#eafcff; --ink-dim:#8fc0c8; --glow:0 0 18px rgba(127,240,224,.45); }
body.theme-cosmic{ --bg-0:#07040f; --bg-1:#1a0e35; --accent:#b08bff; --accent-2:#ff7ab8; --ink:#f2ecff; --ink-dim:#a294c8; --glow:0 0 22px rgba(176,139,255,.5); }
body.theme-candy{ --bg-0:#150419; --bg-1:#3d1236; --accent:#ff5fa2; --accent-2:#ffd23f; --ink:#fff0f7; --ink-dim:#d5a2bf; --glow:0 0 18px rgba(255,95,162,.5); }
body.theme-zen{ --bg-0:#050f0d; --bg-1:#122a24; --accent:#8fd6c4; --accent-2:#d9c39a; --ink:#eefaf5; --ink-dim:#93b5ab; --glow:0 0 15px rgba(143,214,196,.36); }
body.theme-flora{ --bg-0:#0b0412; --bg-1:#2d1033; --accent:#ff6fa8; --accent-2:#a685ff; --ink:#fdeef6; --ink-dim:#c2a0bb; --glow:0 0 20px rgba(255,111,168,.48); }

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; margin:0; overflow:hidden; overscroll-behavior:none; background:var(--bg-0); }
body{
  font-family:var(--font); color:var(--ink); font-size:16px; line-height:1.35;
  user-select:none; -webkit-user-select:none; touch-action:manipulation;
  transition:background .5s ease;
}
#sprite{ position:absolute; width:0; height:0; }
svg{ width:1em; height:1em; fill:currentColor; display:block; }

#app{ position:fixed; inset:0; }
/* La copia della M d'avvio di Android (avvio.js): la stessa immagine a 288 px al centro, come
   la disegna Android, sullo stesso fondo. Non prende tocchi: quelli vanno all'intro. */
#avvio{ position:fixed; inset:0; z-index:200; pointer-events:none; }
#avvio i{ position:absolute; inset:0; background:#05060F; }
#avvio img{ position:absolute; left:50%; top:50%; width:288px; height:288px; margin:-144px 0 0 -144px; }
#avvio.solo-m i{ display:none; }
#avvio.via{ opacity:0; transition:opacity .2s ease-out; }
#avvio.tolta{ display:none; }
#stage{ position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; }
#stage3d, #stage-top{ position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; }

.layer{ position:absolute; z-index:5; }
.hidden{ display:none !important; }

/* ---------- HUD ---------- */
/* Due righe: pausa, punteggio al centro e monete; sotto, l'obiettivo con la barra
   a tutta larghezza. Su una riga sola l'obiettivo sbordava sopra la pausa e ne
   rubava i tocchi (2026-09-26). In battaglia la seconda riga sparisce: la vita
   dell'avversario (#battle-hud) sta a 56px dall'alto. */
#hud{
  top:0; left:0; right:0; padding:var(--safe-t) 10px 0;
  display:flex; flex-direction:column; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.55), transparent);
}
.hud-top{ height:58px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; }
#btn-pause{ grid-column:1; justify-self:start; pointer-events:auto; }
.hud-score{ grid-column:2; }
.hud-top .hud-coins{ grid-column:3; justify-self:end; }   /* anche in battaglia, senza punteggio */
.hud-score{ font-family:var(--font-num); font-size:30px; font-weight:700; letter-spacing:.5px; line-height:1;
  text-shadow:var(--glow); }
/* Un colpo per ogni luce che arriva (reward.js): e' un'animazione, riparte a ogni
   classe rimessa. Prima era uno stato, e dopo il primo colpo restava ingrandito. */
.hud-score.bump{ animation:scoreHit .17s ease-out; }
@keyframes scoreHit{ 0%{ transform:scale(1); } 35%{ transform:scale(1.24); } 100%{ transform:scale(1); } }
.hud-goal{ padding:0 4px 10px; }
.goal-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.hud-goal .bar{ height:5px; margin-top:5px; }
.hud-goal #goal-text{ font-size:12px; letter-spacing:.3px; color:var(--ink-dim); text-transform:uppercase;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Mosse fatte, nel colore del podio: oro finche' valgono tre stelle, poi argento, poi bronzo. */
#hud-moves{ font-family:var(--font-num); font-size:12px; font-weight:800; line-height:11px; margin-right:3px;
  text-shadow:0 0 6px currentColor; transition:color .3s, transform .15s ease; }
#hud-moves.t3{ color:#ffd23f; } #hud-moves.t2{ color:#c9d4e3; } #hud-moves.t1{ color:#d98b4a; }
#hud-moves.drop{ transform:scale(1.3); }
#hud-stars{ display:flex; align-items:center; gap:2px; flex:none; }
#hud-stars .s{ font-size:12px; color:var(--warn); opacity:.2; transition:opacity .3s, filter .3s; }
#hud-stars .s.on{ opacity:1; filter:drop-shadow(0 0 5px currentColor); }
.bar{ height:4px; border-radius:4px; background:rgba(255,255,255,.14); overflow:hidden; margin-top:3px; }
.bar i{ display:block; height:100%; width:0%; border-radius:4px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition:width .35s cubic-bezier(.22,1,.36,1); }
.hud-coins{ display:flex; align-items:center; gap:5px; font-family:var(--font-num); font-weight:700; font-size:15px;
  padding:5px 10px; border-radius:999px; background:rgba(255,255,255,.07); border:1px solid var(--line);
  transition:transform .15s ease, border-color .15s; }
.hud-coins .coin{ color:var(--warn); font-size:16px; }

.icon-btn{
  width:var(--tap); height:var(--tap); min-width:var(--tap); display:grid; place-items:center;
  border:1px solid var(--line); background:rgba(255,255,255,.06); color:var(--ink);
  border-radius:14px; font-size:22px; cursor:pointer; transition:transform .1s ease, background .2s;
}
.icon-btn b{ font-size:10px; font-family:var(--font-num); letter-spacing:.5px; }
.icon-btn:active{ transform:scale(.92); background:rgba(255,255,255,.14); }
.icon-btn.toggle.off{ color:var(--ink-dim); opacity:.42; }

/* Resta a schermo finche' la combo e' viva; `top` lo mette hud.placeCombo()
   fra l'HUD e l'arena. Altezza 30px: COMBO_H in hud.js. */
#combo-badge{
  top:calc(70px + var(--safe-t)); left:50%; transform:translate(-50%,-6px) scale(.8);
  display:flex; align-items:center; gap:6px; height:30px; box-sizing:border-box; padding:0 12px; border-radius:999px;
  background:linear-gradient(90deg,var(--accent-2),var(--accent)); color:#06070f;
  font-weight:800; opacity:0; pointer-events:none; transition:opacity .18s, transform .18s cubic-bezier(.34,1.56,.64,1);
}
#combo-badge.show{ opacity:1; transform:translate(-50%,0) scale(1); }
#combo-badge b{ font-family:var(--font-num); font-size:18px; }
#combo-badge span{ font-size:10px; letter-spacing:2px; }
#combo-grace{ display:flex; gap:4px; }
#combo-grace:empty{ display:none; }
#combo-grace i{ width:7px; height:7px; border-radius:50%; border:1.5px solid #06070f; box-sizing:border-box; transition:background .2s; }
#combo-grace i.on{ background:#06070f; }
#combo-badge.pop{ animation:combo-pop .35s cubic-bezier(.34,1.56,.64,1); }
#combo-badge.last{ animation:combo-last .45s ease-in-out infinite alternate; }
@keyframes combo-pop{ from{ transform:translate(-50%,0) scale(1.35); } to{ transform:translate(-50%,0) scale(1); } }
@keyframes combo-last{
  from{ transform:translate(-50%,0) scale(1); box-shadow:0 0 0 0 rgba(255,80,80,0); }
  to{ transform:translate(-50%,0) scale(1.08); box-shadow:0 0 14px 3px rgba(255,80,80,.85); }
}
.hud-coins.gain{ transform:scale(1.18); border-color:var(--warn); }
.hud-coins.spend{ transform:scale(.88); border-color:#ff4d6d; }

/* ---------- Tools ---------- */
#tools{
  left:0; right:0; bottom:var(--safe-b); display:flex; justify-content:center; gap:8px; padding:6px 10px;
}
.tool{
  position:relative; width:64px; padding:7px 0 5px; border-radius:14px; cursor:pointer;
  border:1px solid var(--line); background:rgba(10,16,34,.72); color:var(--ink);
  display:flex; flex-direction:column; align-items:center; gap:3px;
  transition:transform .12s ease, border-color .2s, background .2s; backdrop-filter:blur(6px);
}
.tool svg{ font-size:22px; }
.tool u{ font-size:9px; text-decoration:none; color:var(--ink-dim); letter-spacing:.2px; }
/* Sul pallino il prezzo di un colpo (hud.setTools): niente cariche, si paga a ogni uso. */
.tool .count{
  position:absolute; top:-7px; right:-6px; height:19px; padding:0 6px 0 3px; border-radius:999px;
  display:flex; align-items:center; gap:2px; background:rgba(5,8,18,.94); border:1px solid rgba(255,210,63,.55);
  color:var(--warn); font-style:normal; font-family:var(--font-num); font-size:10.5px; font-weight:800;
}
.tool .count svg{ font-size:12px; }
.tool.empty{ opacity:.45; }
.tool.empty .count{ color:#ff8fa3; border-color:rgba(255,77,109,.6); }
.tool:active{ transform:scale(.93); }
.tool.armed{ border-color:var(--accent); background:rgba(0,240,255,.16); box-shadow:var(--glow); }
.tool.armed u{ color:var(--ink); }



/* ---------- Screens ---------- */
.screen{
  position:absolute; inset:0; z-index:10; display:none; flex-direction:column;
  padding:calc(var(--safe-t) + 12px) 16px calc(var(--safe-b) + 16px);
  /* traslucido: lo sfondo animato del capitolo resta visibile sotto ai menu */
  background:radial-gradient(120% 80% at 50% 0%, rgba(8,10,26,.72), rgba(3,4,10,.93) 70%);
}
.screen.active{ display:flex; animation:fadeIn .22s ease both; }
.screen.modal{ background:rgba(3,5,12,.74); backdrop-filter:blur(9px); justify-content:center; align-items:center; }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none; } }
/* Passaggi fra le schermate (screens.js, slide; durata = screens.slideMs): avanti
   la vecchia avanza verso chi guarda e sfuma e la nuova arriva da dietro,
   indietro il contrario. Come il selettore della Battaglia (battle.css), piu' svelto. */
.screen.leaving{ display:flex; pointer-events:none; }
.screen.leave-fwd{ z-index:11; animation:leaveFwd .36s ease-in both; }
.screen.leave-back{ z-index:9; animation:leaveBack .36s ease-in both; }
.screen.active.enter-fwd{ animation:enterFwd .36s cubic-bezier(.2,.75,.3,1) both; }
.screen.active.enter-back{ animation:enterBack .36s cubic-bezier(.2,.75,.3,1) both; }
/* Quella che esce e' gia' sparita ai due terzi, mentre continua a muoversi:
   le scritte delle due schermate non restano a lungo una sull'altra. */
@keyframes leaveFwd{ 65%{ opacity:0; } to{ opacity:0; transform:scale(1.3); } }
@keyframes leaveBack{ 65%{ opacity:0; } to{ opacity:0; transform:scale(.88); } }
@keyframes enterFwd{ from{ opacity:0; transform:scale(.88); } }
@keyframes enterBack{ from{ opacity:0; transform:scale(1.3); } }

/* Il logo: la M di semi e la scritta, messe da intro.js (placeLogo) dove l'intro le lascia. */
.logo{ position:absolute; inset:0; pointer-events:none; }
.logo img{ position:absolute; display:block; }

.menu-stack{ display:flex; flex-direction:column; gap:10px; width:min(330px,100%); margin:auto auto 0; }
.btn{
  min-height:52px; padding:12px 18px; border-radius:var(--radius); cursor:pointer;
  border:1px solid var(--line); background:rgba(255,255,255,.07); color:var(--ink);
  font-size:16px; font-weight:700; letter-spacing:.4px; font-family:var(--font);
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:transform .1s ease, filter .2s;
}
.btn:active{ transform:scale(.97); }
.btn.primary{ background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#05060f; border-color:transparent; box-shadow:var(--glow); }
.btn.ghost{ background:transparent; color:var(--ink-dim); }
.btn[disabled]{ opacity:.4; pointer-events:none; }
.btn .coin{ color:var(--warn); font-size:17px; }
.btn.primary .coin{ color:#3a2a00; }

.menu-foot{ display:flex; gap:10px; justify-content:center; margin:22px auto 0; width:min(330px,100%); }
.menu-gear{ position:absolute; top:calc(var(--safe-t) + 12px); right:16px; z-index:1; }

/* Impostazioni: una riga per voce, l'interruttore a destra (spento = .off da syncToggles). */
.settings{ display:flex; flex-direction:column; gap:10px; width:min(360px,100%); margin:0 auto; }
.set-row{ display:flex; align-items:center; gap:14px; min-height:58px; padding:12px 16px; flex:none;
  border-radius:var(--radius); border:1px solid var(--line); background:rgba(255,255,255,.06); color:var(--ink);
  font-family:var(--font); font-size:16px; font-weight:700; text-align:left; cursor:pointer; transition:transform .1s ease; }
.set-row:active{ transform:scale(.98); }
.set-row > svg{ font-size:22px; flex:none; color:var(--accent); }
.set-row b{ flex:1; }
.set-row em{ font-style:normal; font-family:var(--font-num); font-size:14px; font-weight:800; color:var(--accent); }
.set-row .switch{ position:relative; flex:none; width:46px; height:26px; border-radius:13px; background:var(--accent); transition:background .2s; }
.set-row .switch::after{ content:''; position:absolute; top:3px; left:23px; width:20px; height:20px; border-radius:50%;
  background:#05060f; transition:left .2s, background .2s; }
.set-row.off > svg{ color:var(--ink-dim); }
.set-row.off .switch{ background:rgba(255,255,255,.14); }
.set-row.off .switch::after{ left:3px; background:var(--ink-dim); }
.set-row .chev{ flex:none; width:8px; height:8px; margin-right:4px; border:solid var(--ink-dim); border-width:2px 2px 0 0; transform:rotate(45deg); }

.topbar{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.topbar h2{ flex:1; margin:0; font-size:19px; font-weight:800; letter-spacing:.3px; }
.scroll{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:20px; }
.scroll::-webkit-scrollbar{ width:0; }

/* Chapter cards */
.chapter{
  position:relative; border-radius:20px; overflow:hidden; margin-bottom:14px; padding:18px;
  border:1px solid var(--line); min-height:132px; display:flex; flex-direction:column; justify-content:flex-end;
  cursor:pointer; transition:transform .12s ease;
}
.chapter:active{ transform:scale(.985); }
.chapter .tag{ font-size:10px; letter-spacing:3px; opacity:.75; }
.chapter h3{ margin:3px 0 6px; font-size:23px; font-weight:900; letter-spacing:-.3px; }
.chapter p{ margin:0; font-size:12px; opacity:.8; max-width:80%; }
.chapter .prog{ margin-top:10px; display:flex; align-items:center; gap:8px; font-size:11px; font-family:var(--font-num); }
.chapter .prog .bar{ flex:1; }
/* I semi veri del capitolo (renderer.seedImage), con l'alone del loro colore. L'alone e' uno
   sfondo sfumato DIETRO al seme, non un filtro: drop-shadow su una WebP animata, nel WebView del
   telefono, lasciava riquadri scuri attorno al seme che cambiavano a ogni fotogramma (il farfallio
   segnalato dall'utente il 2026-09-28; solo le sfere di Quantum Cosmic, tonde, non lo facevano). */
.seed{ display:block; object-fit:contain;
  background:radial-gradient(closest-side, color-mix(in srgb, currentColor 55%, transparent),
             color-mix(in srgb, currentColor 18%, transparent) 60%, transparent); }
.chapter .seeds{ position:absolute; top:13px; right:14px; display:flex; gap:4px; }
.chapter .seeds .seed{ width:22px; height:22px; }
.chapter.locked{ filter:grayscale(.85) brightness(.55); }
.chapter .lock{ position:absolute; inset:0; display:grid; place-items:center; font-size:30px; color:#fff; }

/* Level grid */
.grid-levels{ display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:10px; align-content:start; }
.level{
  aspect-ratio:1; border-radius:18px; border:1px solid var(--line); cursor:pointer;
  background:rgba(255,255,255,.05); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  transition:transform .12s ease;
}
.level:active{ transform:scale(.94); }
.level b{ font-family:var(--font-num); font-size:24px; font-weight:800; }
.level .s{ display:flex; gap:2px; font-size:11px; color:var(--warn); }
.level .s svg{ opacity:.22; }
.level .s svg.on{ opacity:1; filter:drop-shadow(0 0 5px currentColor); }
.level .goal{ font-size:9px; color:var(--ink-dim); letter-spacing:.2px; }
.level.locked{ opacity:.4; pointer-events:none; }
.level.current{ border-color:var(--accent); box-shadow:var(--glow); background:rgba(0,240,255,.09); }

/* Panels */
.panel{
  width:min(360px,100%); background:var(--panel); border:1px solid var(--line); border-radius:24px;
  padding:24px 20px; text-align:center; box-shadow:0 24px 60px rgba(0,0,0,.6);
  animation:pop .3s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes pop{ from{ opacity:0; transform:scale(.88) translateY(10px);} to{ opacity:1; transform:none; } }
.panel h2{ margin:0 0 4px; font-size:22px; font-weight:800; }
.big-score{ font-family:var(--font-num); font-size:42px; font-weight:800; color:var(--accent);
  text-shadow:var(--glow); margin:6px 0 10px; }
.win-par{ margin:-4px 0 14px; font-size:11.5px; color:var(--ink-dim); letter-spacing:.2px; }
.panel-stats{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:16px; }
.panel-stats div{ flex:1 1 40%; background:rgba(255,255,255,.05); border-radius:12px; padding:8px 6px; }
.panel-stats b{ display:block; font-family:var(--font-num); font-size:17px; }
.panel-stats span{ font-size:10px; color:var(--ink-dim); letter-spacing:.6px; text-transform:uppercase; }
/* Schermata Obiettivi: le schede sono quelle della Bottega (riquadro, testo,
   pillola del prezzo) e i capitoli hanno i colori della scelta del seme. */
.task-group{
  position:relative; display:flex; align-items:center; gap:12px; cursor:pointer;
  padding:12px 38px 12px 12px; margin-bottom:10px; border-radius:18px;
  border:1px solid var(--line); background:rgba(255,255,255,.05); transition:transform .1s ease;
}
.task-group:active{ transform:scale(.985); }
.task-group::after{ content:''; position:absolute; right:17px; top:50%; width:7px; height:7px; margin-top:-6px;
  border-right:2px solid var(--ink-dim); border-bottom:2px solid var(--ink-dim);
  transform:rotate(45deg); transition:transform .2s ease; }
.task-group.closed::after{ transform:rotate(-45deg); margin-top:-4px; right:19px; }
.task-group .ic{ width:46px; height:46px; border-radius:14px; display:grid; place-items:center; font-size:24px; flex:none;
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#05060f; }
.task-group .ic.emblem{ background:rgba(0,0,0,.3); }
.task-group .ic.emblem .seed{ width:34px; height:34px; background:none; }   /* senza colore: sarebbe un disco grigio */
.task-group .info{ flex:1; min-width:0; }
.task-group .info b{ display:block; font-size:15px; font-weight:800; }
.task-group .prog{ display:flex; align-items:center; gap:6px; margin-top:6px; font-family:var(--font-num); font-size:11px; }
.task-group .prog svg{ font-size:13px; color:var(--good); flex:none; }
.task-group .prog .bar{ flex:1; margin:0; }
.task-group > .badge{ position:absolute; top:-6px; right:-4px; margin:0; }
.task-body.closed{ display:none; }
.task-body{ margin-bottom:16px; }
.badge{
  display:inline-flex; align-items:center; justify-content:center; min-width:19px; height:19px;
  padding:0 5px; margin-left:6px; border-radius:10px; background:var(--warn); color:#1a1205;
  font-family:var(--font-num); font-size:11px; font-weight:800; font-style:normal;
}
.task-item{
  display:flex; align-items:center; gap:12px; padding:12px 14px; margin-bottom:8px;
  border-radius:16px; border:1px solid var(--line); background:rgba(255,255,255,.035);
}
.task-item .info{ flex:1; min-width:0; }
.task-item .info b{ display:block; font-size:14px; }
.task-item .info span{ font-size:11px; color:var(--ink-dim); }
.task-item .bar{ margin:7px 0 5px; }
.task-item .reward{ flex:none; display:flex; align-items:center; gap:5px; padding:6px 11px; border-radius:999px;
  background:rgba(255,255,255,.07); border:1px solid var(--line);
  font-family:var(--font-num); font-size:14px; font-weight:700; }
.task-item .reward .coin{ color:var(--warn); font-size:15px; }
.task-item.done{ opacity:.55; }
.task-item.done .reward{ color:var(--good); font-size:16px; padding:6px 9px; }
.task-item.ready{ border-color:var(--accent); box-shadow:var(--glow); background:rgba(255,255,255,.07);
  background:color-mix(in srgb, var(--accent) 10%, transparent); }
.task-item .claim{
  flex:none; display:flex; align-items:center; gap:5px; min-height:40px; padding:8px 13px;
  border:0; border-radius:12px; cursor:pointer; color:#05060f;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  font-family:var(--font); font-size:13px; font-weight:800; letter-spacing:.3px;
  animation:claimPulse 1.8s ease-in-out infinite;
}
.task-item .claim .coin{ color:#3a2a00; font-size:15px; }
.task-item .claim:active{ transform:scale(.94); animation:none; }
@keyframes claimPulse{ 0%,100%{ transform:scale(1); filter:brightness(1); } 50%{ transform:scale(1.05); filter:brightness(1.12); } }

/* Obiettivi pronti, ricordati a fine partita con un avviso solo */
.task-list{ margin:-6px 0 16px; text-align:left; }
.task-note{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 12px; border-radius:12px;
  border:1px solid rgba(255,210,63,.35); background:rgba(255,210,63,.09);
  font-size:12.5px; font-weight:700; color:var(--warn);
  animation:taskIn .4s cubic-bezier(.34,1.56,.64,1) both;
}
.task-note svg{ width:15px; height:15px; fill:var(--warn); flex:0 0 auto; }
@keyframes taskIn{ from{ opacity:0; transform:translateY(8px) scale(.96);} to{ opacity:1; transform:none; } }

.stars{ display:flex; justify-content:center; gap:10px; margin-bottom:10px; }
.stars .star{ font-size:40px; color:var(--warn); opacity:.2; transform:scale(.7); }
.stars .star.on{ opacity:1; transform:scale(1); filter:drop-shadow(0 0 12px currentColor);
  animation:starPop .45s cubic-bezier(.34,1.56,.64,1) both; }
.stars .star.on:nth-child(2){ animation-delay:.14s; }
.stars .star.on:nth-child(3){ animation-delay:.28s; }
@keyframes starPop{ from{ opacity:0; transform:scale(.2) rotate(-40deg);} to{ opacity:1; transform:none; } }

/* Livello vinto: il resoconto nasce dall'esplosione del finale (finale.js). Parte
   minuscolo dal punto dello scoppio (--bx/--by dal centro dello schermo) e si
   apre; le stelle arrivano quando il pannello e' gia' aperto. */
#screen-complete.from-burst.active, #screen-round.from-burst.active{ animation-duration:.45s; }
#screen-complete.from-burst .panel, #screen-round.from-burst .panel{ animation:burstIn .6s cubic-bezier(.22,1.2,.36,1) both; }
#screen-complete.from-burst .stars .star.on{ animation-delay:.3s; }
#screen-complete.from-burst .stars .star.on:nth-child(2){ animation-delay:.44s; }
#screen-complete.from-burst .stars .star.on:nth-child(3){ animation-delay:.58s; }
/* L'opacita' arriva subito: se il pannello cresceva ancora trasparente,
   sembrava spuntare invece di nascere dallo scoppio (visto sul telefono). */
@keyframes burstIn{
  from{ opacity:0; transform:translate(var(--bx,0px), var(--by,0px)) scale(.06); }
  10%{ opacity:1; }
  to{ opacity:1; transform:none; }
}

/* Shop */
.shop-item{
  display:flex; align-items:center; gap:14px; padding:14px; margin-bottom:10px;
  border-radius:18px; border:1px solid var(--line); background:rgba(255,255,255,.05);
}
.shop-item .ic{ width:50px; height:50px; border-radius:14px; display:grid; place-items:center; font-size:26px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#05060f; flex:none; }
.shop-item .info{ flex:1; min-width:0; }
.shop-item .info b{ display:block; font-size:15px; }
.shop-item .info span{ font-size:11px; color:var(--ink-dim); }
.shop-item .buy{ flex:none; min-height:42px; padding:8px 14px; border-radius:12px; cursor:pointer;
  border:1px solid var(--line); background:rgba(255,255,255,.08); color:var(--ink);
  font-weight:800; font-family:var(--font-num); font-size:14px; display:flex; align-items:center; gap:5px; }
.shop-item .buy:active{ transform:scale(.95); }
.shop-item .buy .coin{ color:var(--warn); font-size:15px; }
.shop-item .buy[disabled]{ opacity:.4; }
.shop-note{ font-size:11px; color:var(--ink-dim); text-align:center; padding:8px 20px 0; line-height:1.5; }
/* Negozio in euro (shop.js): pile di monete, offerta in evidenza, nastrini. */
.ic.gold{ display:flex; flex-wrap:wrap-reverse; justify-content:center; align-content:center; padding:0 7px;
  background:linear-gradient(135deg,rgba(255,210,63,.24),rgba(255,140,60,.10));
  border:1px solid rgba(255,210,63,.4); color:var(--warn); font-size:23px; }
.ic.gold svg{ margin:-2px -4px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.ic.gold.stack1{ font-size:34px; }
.ic.gold.stack2{ font-size:25px; }
.ic.gold.stack3, .ic.gold.stack4{ font-size:23px; }
.shop-item.featured{ position:relative; margin-top:16px; border-color:var(--accent); }
.shop-item .ribbon{ position:absolute; top:-9px; left:14px; padding:2px 9px; border-radius:999px;
  background:linear-gradient(90deg,var(--accent-2),var(--accent)); color:#06070f;
  font-style:normal; font-size:9.5px; font-weight:800; letter-spacing:.5px; }
.shop-offer{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:14px 14px 16px; margin-bottom:6px;
  border-radius:20px; border:1px solid var(--accent); box-shadow:var(--glow);
  background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
}
.shop-offer .tag{ flex:1 1 100%; font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--accent); }
.shop-offer .ic{ width:56px; height:56px; border-radius:16px; display:flex; flex:none; }
.shop-offer .info{ flex:1; min-width:0; }
.shop-offer .info b{ display:block; font-size:19px; font-weight:900; }
.shop-offer .info span{ font-size:11px; color:var(--ink-dim); }
.shop-offer .buy{ flex:none; min-height:44px; padding:8px 16px; border:0; border-radius:12px; cursor:pointer;
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#05060f;
  font-family:var(--font-num); font-size:15px; font-weight:800; }
.shop-offer .buy:active{ transform:scale(.95); }

/* Obiettivo del livello, al via (hud.intro): al centro dell'arena, non blocca
   il gioco, se ne va da solo (INTRO_MS in hud.js) o al primo tocco (.gone). */
#level-intro{
  left:50%; width:min(310px,86vw); padding:18px 18px 16px; border-radius:22px; text-align:center;
  background:var(--panel); border:1px solid var(--accent); box-shadow:var(--glow), 0 24px 60px rgba(0,0,0,.6);
  pointer-events:none; transform:translate(-50%,-50%); animation:introShow 3.2s ease both;
}
#level-intro.gone{ animation:introGone .22s ease both; }
#level-intro .tag{ font-size:10px; letter-spacing:2px; color:var(--accent); }
#level-intro b{ display:block; margin:6px 0 12px; font-size:24px; font-weight:900; letter-spacing:-.2px; }
#level-intro .par{ display:flex; justify-content:center; gap:8px; flex-wrap:wrap; }
#level-intro .par:empty{ display:none; }
#level-intro .par span{ display:flex; align-items:center; gap:2px; padding:4px 10px; border-radius:999px;
  background:rgba(255,255,255,.07); border:1px solid var(--line); font-size:11px; font-family:var(--font-num); }
#level-intro .par svg{ font-size:11px; color:var(--warn); }
#level-intro .par span svg:last-of-type{ margin-right:4px; }
@keyframes introShow{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.86); }
  10%{ opacity:1; transform:translate(-50%,-50%) scale(1); }
  85%{ opacity:1; transform:translate(-50%,-50%) scale(1); }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(.96); }
}
@keyframes introGone{ from{ opacity:1; } to{ opacity:0; transform:translate(-50%,-50%) scale(.94); } }

/* Ingresso in battaglia: la scena si compone dall'alto verso il basso, poi il
   conto (battle.startCompose; i pezzi disegnati seguono battle.entered). */
#app.compose #hud .hud-top{ animation:dropIn .35s cubic-bezier(.22,1,.36,1) both; }
#app.compose #battle-hud .life.foe{ animation:dropIn .35s .1s cubic-bezier(.22,1,.36,1) both; }
#app.compose #battle-hud .round-tag{ animation:dropIn .35s .16s cubic-bezier(.22,1,.36,1) both; }
#app.compose #battle-hud .life.you{ animation:dropIn .35s .62s cubic-bezier(.22,1,.36,1) both; }
@keyframes dropIn{ from{ opacity:0; transform:translateY(-16px); } }

/* Conto alla rovescia della battaglia (hud.countdown): 3, 2, 1, VIA! */
#countdown{ inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  pointer-events:none; background:radial-gradient(circle, rgba(3,5,12,.55), transparent 70%); }
#countdown .tag{ font-size:12px; letter-spacing:3px; text-transform:uppercase; color:var(--ink-dim); margin-bottom:6px; }
#countdown b{ font-family:var(--font-num); font-size:96px; font-weight:900; line-height:1; color:var(--accent);
  text-shadow:var(--glow), 0 0 40px var(--accent); }
#countdown b.beat{ animation:countBeat .7s cubic-bezier(.22,1,.36,1) both; }
#countdown.go b{ font-size:72px; color:var(--accent-2); }
#countdown.go .tag{ visibility:hidden; }
@keyframes countBeat{ from{ opacity:0; transform:scale(1.9); } 25%{ opacity:1; } to{ opacity:1; transform:scale(1); } }

@media (max-height:620px){
  .tool{ width:58px; } .tool u{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ---------- Battaglia ---------- */
#battle-hud{ inset:0; pointer-events:none; }
#battle-hud .life{ position:absolute; left:12px; right:12px; display:flex; align-items:center; gap:9px; }
#battle-hud .life.foe{ top:calc(56px + var(--safe-t)); }
#battle-hud .life.you{ bottom:calc(10px + var(--safe-b)); flex-direction:row-reverse; }
#battle-hud .life .bar{ flex:1; height:13px; margin:0; border-radius:8px;
  background:rgba(0,0,0,.55); border:1px solid var(--line); overflow:hidden; }
#battle-hud .life .bar i{ display:block; height:100%; width:100%; border-radius:8px;
  transition:width .35s cubic-bezier(.22,1,.36,1); }
#battle-hud .life.foe .bar i{ background:linear-gradient(90deg,#ff4d6d,#ff9d6f); }
#battle-hud .life.you .bar i{ background:linear-gradient(90deg,var(--accent),var(--accent-2)); }
#battle-hud .life .bar i.low{ animation:lifeLow .7s ease-in-out infinite; }
@keyframes lifeLow{ 0%,100%{ filter:brightness(1); } 50%{ filter:brightness(1.9); } }
#battle-hud .life .num{ font-family:var(--font-num); font-size:15px; font-weight:800;
  min-width:36px; text-align:center; text-shadow:0 2px 6px rgba(0,0,0,.85); }
#battle-hud .life.foe .num{ color:#ff8fa3; }
#battle-hud .life.you .num{ color:var(--accent); }
#battle-hud .round-tag{ position:absolute; top:calc(78px + var(--safe-t)); left:0; right:0;
  text-align:center; font-size:10px; letter-spacing:2px; color:var(--ink-dim); }
#hurt-num{ position:absolute; right:44px; top:-4px; font-family:var(--font-num);
  font-size:21px; font-weight:800; color:#ff4d6d; opacity:0; }
#hurt-num.show{ animation:hurtPop 1s ease-out both; }
@keyframes hurtPop{
  0%{ opacity:0; transform:translateY(0) scale(.7); }
  18%{ opacity:1; transform:translateY(-7px) scale(1.15); }
  100%{ opacity:0; transform:translateY(-28px) scale(1); }
}

/* Schermata di preparazione */
.setup-head{ margin:20px 2px 10px; }
.setup-head:first-child{ margin-top:6px; }
.setup-head b{ display:block; font-size:14px; font-weight:800; margin-bottom:3px; }
.setup-head span{ display:block; font-size:11px; line-height:1.4; color:var(--ink-dim); }