/* I comandi touch di Parry Brawl Survivor (18/10/2026). Vedi hud.js. */
#pbs-hud {
  --oro: #ffd84a; --rosso: #ff3b30; --azzurro: #8fd3ff; --vetro: rgba(14, 12, 22, .58); --filo: rgba(255, 255, 255, .16);
  --testo: #f6f4ff; --tenue: rgba(246, 244, 255, .62);
  --su: env(safe-area-inset-top, 0px); --giu: env(safe-area-inset-bottom, 0px);
  --sx: env(safe-area-inset-left, 0px); --dx: env(safe-area-inset-right, 0px);
  position: fixed; inset: 0; z-index: 2147483647; pointer-events: none;
  font: 600 14px/1.25 "Archivo", system-ui, sans-serif; color: var(--testo);
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: none;
}
#pbs-hud button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#pbs-hud .tocca { pointer-events: auto; }
#pbs-hud [hidden] { display: none !important; }

/* ·· La capsula in alto ·· */
.pbs-capsula {
  position: absolute; top: calc(var(--su) + 10px); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px;
  background: var(--vetro); border: 1px solid var(--filo); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .35); transition: opacity .25s;
}
.pbs-icona { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; }
.pbs-icona:active { background: rgba(255, 255, 255, .12); }
.pbs-icona svg { width: 20px; height: 20px; fill: currentColor; }
.pbs-avatar { width: 38px; height: 38px; position: relative; display: grid; place-items: center; }
.pbs-avatar svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.pbs-avatar circle { fill: none; stroke-width: 3.2; }
.pbs-avatar .fondo { stroke: rgba(255, 255, 255, .14); }
.pbs-avatar .vita { stroke-linecap: round; transition: stroke-dasharray .25s; }
.pbs-avatar b { font-weight: 900; font-size: 15px; }
.pbs-avatar.mio::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid var(--oro); }
.pbs-avatar.ko b { opacity: .35; }
.pbs-punti { min-width: 64px; padding: 0 8px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 13.5px; }
.pbs-punti small { display: block; font-weight: 600; font-size: 10.5px; color: var(--tenue); max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }

/* ·· La croce invisibile: compare sotto il pollice (hud.js la mette lì) ·· */
.pbs-croce {
  position: absolute; width: 132px; height: 132px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .05) 0 54%, rgba(255, 255, 255, .14) 55% 57%, rgba(14, 12, 22, .3) 58%);
  border: 1px solid var(--filo); animation: pbs-appare .12s ease-out;
}
@keyframes pbs-appare { from { transform: scale(.7); opacity: 0; } }
.pbs-croce::before, .pbs-croce::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; margin-top: -6px; border: 6px solid transparent; opacity: .5; }
.pbs-croce::before { left: 10px; border-right-color: #fff; }
.pbs-croce::after { right: 10px; border-left-color: #fff; }
.pbs-pomello {
  position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .55), rgba(255, 255, 255, .18) 60%);
  border: 1px solid rgba(255, 255, 255, .4); box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
.pbs-croce .su { position: absolute; left: 50%; top: -22px; margin-left: -8px; width: 16px; height: 16px; opacity: .55; }

/* ·· Il gruppo d'azione, tutto dentro la fascia del terreno (18/10/2026) ··
   Da destra: la parata grande, l'aura, le quattro abilità in un quadrato 2×2. Nessun tasto sopra la linea del terreno:
   hud.js mette in --k quanto rimpicciolire il gruppo (alto 104 px) per la fascia e in --pad il margine sotto. */
.pbs-azioni {
  position: absolute; right: calc(var(--dx) + 10px); bottom: calc(var(--giu) + var(--pad, 12px)); width: 290px; height: 104px;
  transform: scale(var(--k, 1)); transform-origin: right bottom; transition: opacity .25s;
}
.pbs-parata { position: absolute; right: 0; bottom: 0; width: 104px; height: 104px; border-radius: 50%; }
.pbs-parata canvas { position: absolute; left: 50%; top: 50%; width: 186px; height: 186px; margin: -93px 0 0 -93px; pointer-events: none; }
.pbs-parata .scritta {
  position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, 0); white-space: nowrap; pointer-events: none;
  font-weight: 900; font-size: 15px; letter-spacing: .04em; color: var(--oro); text-shadow: 0 2px 0 #17171c, 0 0 14px rgba(255, 216, 74, .6);
  opacity: 0;
}
.pbs-parata .scritta.via { animation: pbs-scritta .9s ease-out; }
.pbs-parata .scritta.perfetto { font-size: 18px; color: #fff6c4; }
.pbs-parata .scritta.rossa { color: #ff8a80; text-shadow: 0 2px 0 #17171c; }
@keyframes pbs-scritta { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.7); } 15% { opacity: 1; transform: translate(-50%, -6px) scale(1.12); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -26px) scale(1); } }
/* La guida ha fermato il tempo (vedi «La guida, giocata» nel motore): la parata pulsa d'oro e sopra dice cosa fare. */
.pbs-parata.chiama { animation: pbs-chiama .7s ease-in-out infinite; z-index: 5; }
.pbs-parata.chiama::before {
  content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 3px solid var(--oro); pointer-events: none;
  box-shadow: 0 0 22px rgba(255, 216, 74, .75), inset 0 0 14px rgba(255, 216, 74, .45); animation: pbs-anello .7s ease-out infinite;
}
.pbs-parata.chiama::after {
  content: attr(data-chiama); position: absolute; right: calc(100% + 18px); top: 50%; transform: translateY(-50%); white-space: nowrap; z-index: 4;
  padding: 5px 12px; border-radius: 999px; background: var(--oro); color: #17171c; font-weight: 900; font-size: 15px; letter-spacing: .04em;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .4); pointer-events: none;
}
@keyframes pbs-chiama { 50% { transform: scale(1.08); } }
@keyframes pbs-anello { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.18); opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .pbs-parata.chiama, .pbs-parata.chiama::before { animation: none; } }
.pbs-catena {
  position: absolute; right: 0; top: 0; min-width: 30px; height: 24px; padding: 0 7px; border-radius: 12px;
  display: grid; place-items: center; font-weight: 900; font-size: 13px; color: #17171c; background: var(--oro);
  box-shadow: 0 0 14px rgba(255, 216, 74, .55); transition: transform .15s;
}
.pbs-abilita {
  position: absolute; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--colore, var(--oro)) calc(var(--k, 1) * 360deg), rgba(255, 255, 255, .12) 0);
  transition: transform .1s, filter .25s, opacity .25s;
}
.pbs-abilita::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: rgba(14, 12, 22, .82); }
.pbs-abilita span { position: relative; font-size: 22px; line-height: 1; }
.pbs-abilita.scarica { filter: grayscale(1) brightness(.75); }
.pbs-abilita.pronta { box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 0 14px color-mix(in srgb, var(--colore, #ffd84a) 55%, transparent); }
.pbs-abilita:active { transform: scale(.9); }
.pbs-abilita.no { animation: pbs-no .25s; }
@keyframes pbs-no { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
/* Il quadrato delle abilità a sinistra dell'aura: la prima (nella corsa il colpo finale) in basso vicino al pollice. */
.pbs-abilita[data-posto="0"] { right: 182px; bottom: 0; }
.pbs-abilita[data-posto="1"] { right: 182px; bottom: 56px; }
.pbs-abilita[data-posto="2"] { right: 238px; bottom: 0; }
.pbs-abilita[data-posto="3"] { right: 238px; bottom: 56px; }
.pbs-aura {
  position: absolute; right: 114px; bottom: 23px; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--colore, #56e1ff) calc(var(--k, 0) * 360deg), rgba(255, 255, 255, .12) 0); transition: transform .1s, filter .25s;
}
.pbs-aura::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: radial-gradient(circle at 50% 70%, rgba(86, 225, 255, .25), rgba(14, 12, 22, .9) 70%); }
.pbs-aura .nome { position: relative; font-weight: 900; font-size: 11px; letter-spacing: .07em; }
.pbs-aura:active { transform: scale(.9); }
.pbs-aura.spenta { filter: grayscale(1) brightness(.6); }
.pbs-aura.no { animation: pbs-no .25s; }
.pbs-aura.limit { animation: pbs-limit .9s ease-in-out infinite; }
.pbs-aura.limit::before { background: radial-gradient(circle at 50% 60%, rgba(255, 216, 74, .55), rgba(40, 24, 8, .9) 70%); }
.pbs-aura.limit .nome { color: var(--oro); text-shadow: 0 0 10px rgba(255, 216, 74, .8); }
@keyframes pbs-limit { 50% { transform: scale(1.07); box-shadow: 0 0 24px rgba(255, 216, 74, .7); } }
@media (prefers-reduced-motion: reduce) { .pbs-aura.limit { animation: none; } }

/* ·· Le speciali: parata tenuta e dito in su (19/10/2026, vedi hud.js) ··
   Dentro il gruppo d'azione (quindi nella fascia del terreno, con la stessa scala): a sinistra della parata, alta quanto
   il gruppo, su due righe che si riempiono da destra. Aura, abilità e catena intanto si fanno da parte. */
.pbs-fila {
  position: absolute; right: 114px; bottom: 0; height: 104px; box-sizing: border-box; padding: 4px 6px 5px; border-radius: 16px;
  background: rgba(14, 12, 22, .86); border: 1px solid color-mix(in srgb, var(--colore, #ffd84a) 55%, transparent);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .4); animation: pbs-fila .14s ease-out; transform-origin: right bottom; pointer-events: auto;
}
@keyframes pbs-fila { from { transform: translateY(10px) scale(.94); opacity: 0; } }
.pbs-fila-nome {
  height: 16px; margin: 0 2px 4px; font-weight: 900; font-size: 11.5px; letter-spacing: .04em; line-height: 16px; color: var(--oro);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right;
}
.pbs-fila-tasti { display: grid; grid-template-rows: repeat(2, var(--b, 40px)); grid-auto-flow: column; grid-auto-columns: var(--b, 40px); gap: 5px; direction: rtl; }
.pbs-spec {
  position: relative; width: var(--b, 40px); height: var(--b, 40px); border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--colore, var(--oro)) calc(var(--k, 1) * 360deg), rgba(255, 255, 255, .12) 0);
  transition: transform .08s, filter .2s;
}
.pbs-spec::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: rgba(14, 12, 22, .9); }
.pbs-spec span { position: relative; font-size: calc(var(--b, 40px) * .5); line-height: 1; direction: ltr; }
.pbs-spec.scarica { filter: grayscale(1) brightness(.7); }
.pbs-spec.sopra { transform: scale(1.14); box-shadow: 0 0 0 2px #fff, 0 0 16px var(--colore, #ffd84a); filter: none; }
.pbs-spec.sopra.scarica { box-shadow: 0 0 0 2px #e0443a; }
.pbs-fila-su .pbs-aura, .pbs-fila-su .pbs-abilita, .pbs-fila-su .pbs-catena { opacity: 0; pointer-events: none !important; }
.pbs-fila-su .pbs-parata.chiama::after { display: none; }
@media (prefers-reduced-motion: reduce) { .pbs-fila { animation: none; } }

.pbs-nascosti .pbs-croce, .pbs-nascosti .pbs-azioni { opacity: 0; pointer-events: none !important; }
.pbs-nascosti .pbs-azioni * { pointer-events: none !important; }

/* ·· Fogli: menu, taratura, avvio ·· */
.pbs-velo { position: absolute; inset: 0; background: rgba(6, 5, 12, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.pbs-foglio {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(460px, 100%); box-sizing: border-box;
  max-height: 86vh; overflow: auto; padding: 10px 14px calc(var(--giu) + 16px); border-radius: 20px 20px 0 0;
  background: #17151f; border: 1px solid var(--filo); border-bottom: 0; box-shadow: 0 -12px 40px rgba(0, 0, 0, .5);
  animation: pbs-su .22s ease-out;
}
@keyframes pbs-su { from { transform: translate(-50%, 30px); opacity: 0; } }
.pbs-foglio::before { content: ""; display: block; width: 38px; height: 4px; margin: 2px auto 10px; border-radius: 2px; background: rgba(255, 255, 255, .25); }
.pbs-foglio h2 { margin: 2px 4px 10px; font-size: 17px; font-weight: 900; }
.pbs-riga {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 10px; border-radius: 12px; text-align: left;
}
.pbs-riga:active { background: rgba(255, 255, 255, .07); }
.pbs-riga .ico { width: 28px; text-align: center; font-size: 19px; }
.pbs-riga .nome { flex: 1; }
.pbs-riga .nome small { display: block; color: var(--tenue); font-weight: 500; font-size: 12px; margin-top: 2px; }
.pbs-riga .val { color: var(--oro); font-weight: 800; font-size: 13px; }

.pbs-taratura { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px; }
.pbs-taratura .scheda { width: min(380px, 100%); }
.pbs-taratura h2 { margin: 0 0 6px; font-size: 20px; font-weight: 900; }
.pbs-taratura p { margin: 0 0 18px; color: var(--tenue); font-weight: 500; }
.pbs-bersaglio {
  width: 170px; height: 170px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle, rgba(255, 216, 74, .2), rgba(255, 216, 74, .05) 60%, transparent 70%);
  border: 2px solid var(--oro); font-weight: 900; font-size: 34px; color: var(--oro); transition: transform .06s;
}
.pbs-bersaglio.batte { transform: scale(1.06); }
.pbs-taratura .esito { min-height: 22px; font-weight: 800; margin-bottom: 14px; }
.pbs-tasto {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; margin: 4px;
  border-radius: 999px; font-weight: 800; background: var(--oro); color: #17171c !important;
}
.pbs-tasto.secondo { background: rgba(255, 255, 255, .1); color: var(--testo) !important; }
/* (i tasti del sito sono <button>: `#pbs-hud button` toglie lo sfondo a tutti, qui lo si rimette) */
#pbs-hud .pbs-tasto { background: var(--oro); }
#pbs-hud .pbs-tasto.secondo { background: rgba(255, 255, 255, .1); }

/* ·· Sul PC (18/10/2026): comanda il motore (controller radiale, tendina, tastiera); il menu del sito è nella sua barretta ·· */
.pbs-pc .pbs-capsula, .pbs-pc .pbs-croce, .pbs-pc .pbs-azioni { display: none !important; }
.pbs-pc .pbs-foglio { bottom: 50%; transform: translate(-50%, 50%); border-radius: 20px; border-bottom: 1px solid var(--filo); padding-bottom: 16px; animation: none; }
.pbs-pc .pbs-foglio::before { display: none; }

/* ·· Installa sul telefono ·· */
.pbs-installa h2 { margin-bottom: 6px; }
.pbs-installa h3 { margin: 0 0 4px; font-size: 15px; font-weight: 900; }
.pbs-piatt { margin: 12px 0 0; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid var(--filo); }
.pbs-testo { margin: 0 0 10px; color: var(--tenue); font-weight: 500; font-size: 13px; }
.pbs-nota { margin: 8px 0 0; color: var(--tenue); font-weight: 500; font-size: 12px; }
.pbs-nota b, .pbs-passi b { color: var(--testo); }
.pbs-passi { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.pbs-passi li { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; font-size: 13.5px; }
.pbs-passi .num { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--oro); color: #17171c; font-weight: 900; font-size: 12px; }
.pbs-cond { width: 18px; height: 18px; fill: var(--azzurro); vertical-align: -3px; }
.pbs-apk { display: flex; margin: 0; text-decoration: none; }
.pbs-apk small { font-weight: 600; opacity: .7; margin-left: 4px; }
#pbs-hud .pbs-apk.spento { background: rgba(255, 255, 255, .1); color: var(--tenue) !important; pointer-events: none; }
.pbs-indirizzo { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: rgba(0, 0, 0, .3); border: 1px solid var(--filo); }
.pbs-indirizzo code { flex: 1; min-width: 0; overflow-wrap: anywhere; font: 600 13px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--oro); }
.pbs-indirizzo .pbs-tasto { min-height: 36px; padding: 0 14px; margin: 0; }
.pbs-chiudi { display: flex; width: calc(100% - 8px); margin-top: 14px; }

/* (in orizzontale il gruppo lo rimpicciolisce hud.js, secondo la fascia del terreno) */

/* ·· iPhone: l'interruttore trasparente sopra ogni tasto, per il «tic» di Safari (vedi «La vibrazione» in hud.js) ·· */
#pbs-hud .con-aptico { position: relative; }
#pbs-hud .pbs-parata.con-aptico, #pbs-hud .pbs-aura.con-aptico, #pbs-hud .pbs-abilita.con-aptico { position: absolute; }
.pbs-aptico {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; z-index: 3;
  clip-path: inset(0 round 999px); -webkit-tap-highlight-color: transparent; touch-action: none; cursor: pointer;
}
.pbs-riga .pbs-aptico, .pbs-tasto .pbs-aptico { clip-path: inset(0 round 12px); }

/* ---------- L'account (18/10/2026): nick, email, password ---------- */
.pbs-schede { display: flex; gap: 6px; margin: 0 0 12px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .06); }
.pbs-schede button { flex: 1; min-height: 34px; border: 0; border-radius: 999px; background: none; color: var(--tenue); font: inherit; font-weight: 800; font-size: 13px; cursor: pointer; }
#pbs-hud .pbs-schede button[aria-selected="true"] { background: var(--oro); color: #17171c; }
.pbs-foglio.pbs-account { padding-left: 18px; padding-right: 18px; }
.pbs-modulo { display: grid; gap: 10px; }
.pbs-modulo label { display: grid; gap: 4px; font-size: 12px; font-weight: 700; color: var(--tenue); }
.pbs-modulo input { box-sizing: border-box; width: 100%; min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--filo); background: rgba(0, 0, 0, .35);
                    color: var(--testo); font: inherit; font-size: 16px; font-weight: 600; outline: none; }
.pbs-modulo input:focus { border-color: var(--oro); box-shadow: 0 0 0 3px rgba(255, 216, 74, .18); }
.pbs-modulo .pbs-tasto { margin: 4px 0 0; width: 100%; box-sizing: border-box; min-height: 46px; border: 0; font: inherit; font-weight: 900; font-size: 15px; cursor: pointer; }
.pbs-modulo .pbs-tasto[disabled] { opacity: .6; cursor: progress; }
.pbs-errore { min-height: 18px; margin: 0; color: #ff8a80; font-size: 13px; font-weight: 700; }
.pbs-profilo { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; }
.pbs-profilo .tondo { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--oro); color: #17171c; font-weight: 900; font-size: 22px; }
.pbs-profilo b { display: block; font-size: 17px; }
.pbs-profilo small { color: var(--tenue); font-size: 12px; }