/* ==========================================================================
   web/css/ar.css — scansione AR degli obiettivi (DESIGN §6.9), modulo /js/ar/scan.js.
   Layer: #ar-layer (fotocamera / canvas three.js) e #overlay-root (UI; in WebXR e' il
   dom-overlay: l'unico DOM visibile). Token da app.css (con valori di riserva).
   Regola: si animano solo transform/opacity; prefers-reduced-motion in fondo.
   ========================================================================== */

/* ---------------------------------------------------------------- layer */
#ar-layer, #overlay-root { position: fixed; inset: 0; display: none; }
#ar-layer { z-index: 1200; overflow: hidden; background: #000; }
#overlay-root {
  z-index: 1201;
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: transparent;
}
#ar-layer[data-kind="boot"], #ar-layer[data-kind="sim"] {
  background:
    radial-gradient(ellipse 120% 80% at 50% 42%, rgba(20, 110, 50, .28), transparent 70%),
    var(--bg-0, #010a04);
}
#ar-layer video, #ar-layer canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* dietro allo scanner: mappa e schermate nascoste (sono coperte comunque; meno lavoro di composizione) */
body.is-scanning #map-layer, body.is-scanning #app { visibility: hidden; }

/* ---------------------------------------------------------------- radice UI */
.ars {
  --ret: min(64vw, 40vh, 300px);
  --ret-y: 50%; /* = centro ottico della camera: il mirino deve coincidere con l'inquadratura */
  --ars-ph: var(--ph-2, #5cff8a);
  --ars-hot: var(--ph-1, #39ff14);
  --ars-gold: var(--gold, #ffc83d);
  --ars-card: var(--cardboard, #b08850);
  --ars-alert: var(--alert, #ff2a2a);
  --ars-codec: var(--codec, #7fe8ff);
  --ars-outline: 0 0 2px rgba(0, 0, 0, .95), 0 1px 3px rgba(0, 0, 0, .8);
  position: absolute; inset: 0;
  color: var(--ars-ph);
  font: 400 16px/1.35 var(--font-hud, 'Share Tech Mono', ui-monospace, monospace);
  letter-spacing: .02em;
  pointer-events: none;
  animation: ars-power-on 260ms var(--ease-out, cubic-bezier(.2, .8, .2, 1)) both;
  transition: opacity 170ms ease;
}
.ars.is-leaving { opacity: 0; }
@keyframes ars-power-on {
  0% { opacity: 0; transform: scaleY(.02); }
  55% { opacity: 1; transform: scaleY(1.02); }
  100% { opacity: 1; transform: none; }
}
.ars button { pointer-events: auto; }

/* superficie per mirare trascinando (solo scena simulata) */
.ars__aim { position: absolute; inset: 0; touch-action: none; }
.ars[data-mode="none"] .ars__aim { pointer-events: auto; cursor: grab; }
.ars[data-mode="none"] .ars__aim:active { cursor: grabbing; }

/* leggibilita' sopra la fotocamera: sfumature in alto/in basso + vignettatura */
.ars__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(1, 10, 4, .8) 0, rgba(1, 10, 4, .45) 90px, rgba(1, 10, 4, 0) 170px),
    linear-gradient(to top, rgba(1, 10, 4, .85) 0, rgba(1, 10, 4, .5) 120px, rgba(1, 10, 4, 0) 250px),
    radial-gradient(ellipse 95% 75% at 50% 48%, transparent 58%, rgba(0, 0, 0, .45) 100%);
}
/* esito: il sottotitolo bianco (≈ 220-300 px dall'alto) cadeva dove la sfumatura alta è già a 0 (170 px)
   e spariva contro un cielo chiaro: sfumatura alta più scura e lunga finché l'esito è in vista */
.ars[data-phase="revealed"] .ars__shade {
  background:
    linear-gradient(to bottom, rgba(1, 10, 4, .88) 0, rgba(1, 10, 4, .7) 250px, rgba(1, 10, 4, 0) 340px),
    linear-gradient(to top, rgba(1, 10, 4, .85) 0, rgba(1, 10, 4, 0) 250px),
    radial-gradient(ellipse 95% 75% at 50% 48%, transparent 58%, rgba(0, 0, 0, .45) 100%);
}
/* in WebXR #fx non si vede: scanline proprie, leggere */
.ars[data-mode="webxr"] .ars__shade::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, .9) 2px 3px);
  opacity: .07;
}

/* lampo a tutto schermo all'esito */
.ars__flash { position: absolute; inset: 0; opacity: 0; pointer-events: none; background: #fff3c0; }
.ars[data-flash="gold"] .ars__flash { background: radial-gradient(circle at 50% 45%, #fffbe6 0, #ffc83d 38%, rgba(255, 150, 0, .6) 100%); }
.ars[data-flash="card"] .ars__flash { background: radial-gradient(circle at 50% 45%, #f3dfb5 0, #b08850 60%, rgba(60, 38, 12, .7) 100%); }
.ars[data-flash="alert"] .ars__flash { background: radial-gradient(circle at 50% 45%, rgba(255, 42, 42, .2) 30%, rgba(255, 42, 42, .75) 100%); }
.ars.is-flashing .ars__flash { animation: ars-flash 900ms ease-out both; }
.ars.is-flashing[data-flash="alert"] .ars__flash { animation-duration: 520ms; }
@keyframes ars-flash { 0% { opacity: 0; } 8% { opacity: .92; } 100% { opacity: 0; } }

/* ---------------------------------------------------------------- intestazione */
.ars__top {
  position: absolute; left: 0; right: 0; top: 0;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: calc(var(--sat, env(safe-area-inset-top, 0px)) + 12px) calc(var(--sar, 0px) + 12px) 0 calc(var(--sal, 0px) + 16px);
}
.ars__head { min-width: 0; }
.ars__label {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display, 'Black Ops One', Impact, sans-serif);
  font-size: clamp(17px, 5.2vw, 22px); line-height: 1.1; letter-spacing: .12em;
  text-shadow: var(--ars-outline), 0 0 10px rgba(57, 255, 20, .45);
  white-space: nowrap;
}
.ars__rec {
  flex: none; width: 10px; height: 10px; border-radius: 50%;
  background: var(--ars-alert); box-shadow: 0 0 8px rgba(255, 42, 42, .9);
  animation: ars-blink 1.1s steps(1) infinite;
}
@keyframes ars-blink { 50% { opacity: .15; } }
.ars__meta {
  display: flex; align-items: center; gap: 10px; margin-top: 6px;
  font-family: var(--font-pixel, 'VT323', monospace); font-size: 19px; line-height: 1; letter-spacing: .08em;
  color: var(--ars-ph); text-shadow: var(--ars-outline);
}
.ars__sig { opacity: .85; }
.ars__chip {
  padding: 3px 7px 2px; border: 1px solid currentColor;
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
  background: rgba(1, 10, 4, .6);
  color: var(--ars-codec); text-shadow: 0 0 6px rgba(127, 232, 255, .5);
}
.ars[data-mode="none"] .ars__chip, .ars[data-mode="flat"] .ars__chip { color: var(--caution, #ffb000); text-shadow: 0 0 6px rgba(255, 176, 0, .45); }
.ars__close { flex: none; }

.ars__notice {
  position: absolute; left: 50%; top: calc(var(--sat, 0px) + 84px);
  max-width: min(92vw, 420px); padding: 7px 12px 6px;
  transform: translateX(-50%);
  color: #1a1000; background: var(--caution, #ffb000);
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase; text-align: center; text-shadow: none;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  animation: ars-drop 240ms var(--ease-snap, cubic-bezier(.3, 1.4, .5, 1)) both;
  pointer-events: auto;
}
@keyframes ars-drop { from { opacity: 0; transform: translate(-50%, -12px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* minacce di gioco durante la scansione (l'HUD e' coperto): ! ALLERTA / EVASIONE + esposizione */
.ars__threat {
  --tc: var(--ars-alert);
  --tc-rgb: 255, 42, 42;
  position: absolute; left: 50%; top: calc(var(--sat, env(safe-area-inset-top, 0px)) + 70px);
  display: flex; align-items: center; gap: 10px;
  width: min(calc(100vw - 24px), 420px); padding: 6px 12px 6px 8px;
  transform: translateX(-50%);
  color: var(--tc);
  background: rgba(30, 0, 0, .86);
  border: 1px solid var(--tc);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  pointer-events: none;
  animation: ars-drop 220ms var(--ease-snap, cubic-bezier(.3, 1.4, .5, 1)) both;
}
.ars__threat[hidden] { display: none; }
.ars__threat[data-alert="evasion"] { --tc: var(--caution, #ffb000); --tc-rgb: 255, 176, 0; background: rgba(28, 16, 0, .86); }
.ars__threat-bang {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px;
  font-family: var(--font-display, 'Black Ops One', Impact, sans-serif); font-size: 22px; line-height: 1;
  color: #fff; background: var(--tc);
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
  text-shadow: 0 0 2px rgba(0, 0, 0, .8);
}
.ars__threat[data-alert="alert"] .ars__threat-bang { animation: ars-threat-blink .5s steps(1) infinite; }
.ars__threat[data-alert="alert"] .ars__threat-lbl { text-shadow: var(--ars-outline), var(--alert-glow, 0 0 10px rgba(255, 42, 42, .8)); }
.ars__threat[data-alert="evasion"] .ars__threat-bang { color: #1a1000; }
.ars__threat-lbl {
  flex: none;
  font-family: var(--font-display, 'Black Ops One', Impact, sans-serif); font-size: 17px; line-height: 1; letter-spacing: .1em;
  text-shadow: var(--ars-outline), 0 0 10px rgba(var(--tc-rgb), .75);
}
.ars__threat-bar { flex: 1; min-width: 0; display: flex; align-items: stretch; gap: 2px; height: 14px; }
.ars__threat-bar i { flex: 1; background: rgba(var(--tc-rgb), .18); transform: skewX(-14deg); }
.ars__threat-bar i.is-on { background: var(--tc); box-shadow: 0 0 5px rgba(var(--tc-rgb), .8); }
.ars__threat.is-danger .ars__threat-bar i.is-on { animation: ars-threat-blink .5s steps(1) infinite; }
.ars__threat-pct {
  flex: none; min-width: 5.2em; text-align: right;
  font-family: var(--font-pixel, 'VT323', monospace); font-size: 21px; line-height: 1; letter-spacing: .06em;
  color: #fff; text-shadow: var(--ars-outline), 0 0 8px rgba(var(--tc-rgb), .8);
}
@keyframes ars-threat-blink { 50% { opacity: .35; } }
/* con la striscia visibile avviso ed esito scendono sotto */
.ars:not([data-threat="none"]) .ars__notice { top: calc(var(--sat, 0px) + 116px); }
.ars:not([data-threat="none"]) .ars__result { top: calc(var(--sat, 0px) + 118px); }

/* ---------------------------------------------------------------- mirino */
.ars__reticle {
  position: absolute; left: 50%; top: var(--ret-y);
  width: var(--ret); height: var(--ret);
  transform: translate(-50%, -50%);
  transition: opacity 240ms ease, transform 320ms var(--ease-out, ease);
}
.ars__c {
  --len: calc(var(--ret) * .16);
  position: absolute; width: var(--len); height: var(--len);
  color: var(--ars-ph);
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 100% 3px no-repeat,
    linear-gradient(currentColor, currentColor) 0 0 / 3px 100% no-repeat;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, .95)) drop-shadow(0 0 5px rgba(57, 255, 20, .55));
  will-change: transform;
  transition: transform 220ms var(--ease-snap, cubic-bezier(.3, 1.4, .5, 1)), color 160ms;
  animation: ars-corner-in 520ms var(--ease-snap, cubic-bezier(.3, 1.4, .5, 1)) both;
}
.ars__c--tl { left: 0; top: 0; --fx: -30vw; --fy: -26vh; }
.ars__c--tr { right: 0; top: 0; rotate: 90deg; --fx: 30vw; --fy: -26vh; }
.ars__c--br { right: 0; bottom: 0; rotate: 180deg; --fx: 30vw; --fy: 26vh; }
.ars__c--bl { left: 0; bottom: 0; rotate: 270deg; --fx: -30vw; --fy: 26vh; }
@keyframes ars-corner-in {
  from { opacity: 0; translate: var(--fx) var(--fy); }
  to { opacity: 1; translate: 0 0; }
}
/* agganciato: gli angoli scattano verso l'interno e diventano oro */
.ars[data-framed="1"] .ars__c, .ars[data-phase="analyzing"] .ars__c {
  color: var(--ars-gold);
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, .95)) drop-shadow(0 0 6px rgba(255, 200, 61, .7));
  transform: translate(9%, 9%) scale(.92);
}
/* in cerca (spawn): gli angoli "respirano" */
.ars[data-phase="spawning"] .ars__c, .ars[data-phase="starting"] .ars__c { animation: ars-corner-in 520ms var(--ease-snap, ease) both, ars-breathe 1.4s ease-in-out 520ms infinite; }
@keyframes ars-breathe { 50% { transform: translate(-10%, -10%); } }

.ars__ticks, .ars__ring { position: absolute; inset: 9%; width: 82%; height: 82%; overflow: visible; }
.ars__ticks { animation: ars-spin 18s linear infinite; opacity: .8; }
.ars__ticks-c { fill: none; stroke: var(--ars-ph); stroke-width: 2; stroke-dasharray: 1.2 4.87; opacity: .5; }
.ars__ring { transform: rotate(-90deg); }
.ars__ring-track { fill: none; stroke: rgba(92, 255, 138, .22); stroke-width: 3; }
.ars__ring-fill {
  fill: none; stroke: var(--ars-gold); stroke-width: 5;
  filter: drop-shadow(0 0 3px rgba(255, 200, 61, .8));
}
.ars[data-phase="analyzing"] .ars__ticks { animation-duration: 2.4s; opacity: 1; }
.ars[data-phase="analyzing"] .ars__ticks-c { stroke: var(--ars-gold); opacity: .9; }
.ars[data-phase="analyzing"] .ars__ring { animation: ars-ring-pulse .7s ease-in-out infinite; }
@keyframes ars-ring-pulse { 50% { transform: rotate(-90deg) scale(1.04); opacity: .75; } }
@keyframes ars-spin { to { transform: rotate(360deg); } }

.ars__cross {
  position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px;
  background:
    linear-gradient(var(--ars-ph), var(--ars-ph)) center / 100% 2px no-repeat,
    linear-gradient(var(--ars-ph), var(--ars-ph)) center / 2px 100% no-repeat;
  opacity: .8;
  filter: drop-shadow(0 0 1px #000);
}
.ars[data-framed="1"] .ars__cross { opacity: 0; }

.ars__pct {
  position: absolute; left: 50%; bottom: 100%;
  margin-bottom: 10px; transform: translateX(-50%);
  font-family: var(--font-pixel, 'VT323', monospace); font-size: 30px; line-height: 1;
  color: var(--ars-gold); text-shadow: var(--ars-outline), 0 0 8px rgba(255, 200, 61, .6);
  opacity: 0; transition: opacity 200ms;
}
.ars__pct small { font-size: 18px; margin-left: 2px; }
.ars[data-framed="1"] .ars__pct, .ars[data-phase="analyzing"] .ars__pct { opacity: 1; }

.ars[data-phase="starting"] .ars__reticle { opacity: .45; }
.ars[data-phase="revealed"] .ars__reticle { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
.ars[data-phase="failed"] .ars__reticle, .ars[data-phase="blocked"] .ars__reticle { opacity: .2; }

/* freccia verso l'ologramma fuori mira (ruota attorno al centro del mirino) */
.ars__arrow {
  position: absolute; left: 50%; top: var(--ret-y); width: 0; height: 0;
  opacity: 0; transition: opacity 200ms;
}
.ars__arrow.is-on { opacity: 1; }
.ars[data-phase="analyzing"] .ars__arrow, .ars[data-phase="revealed"] .ars__arrow { opacity: 0; }
.ars__arrow i {
  position: absolute; left: -17px; top: calc(var(--ret) * -.5 - 40px);
  width: 34px; height: 34px;
  animation: ars-nudge .9s ease-in-out infinite;
}
.ars__arrow i::before, .ars__arrow i::after {
  content: ''; position: absolute; left: 7px; top: 12px; width: 20px; height: 20px;
  border-left: 4px solid var(--ars-ph); border-top: 4px solid var(--ars-ph);
  transform: rotate(45deg);
  filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 5px rgba(57, 255, 20, .6));
}
.ars__arrow i::after { top: 22px; opacity: .45; }
@keyframes ars-nudge { 50% { transform: translateY(-8px); } }

/* ---------------------------------------------------------------- analisi */
.ars__analysis {
  position: absolute; left: 0; right: 0; top: calc(var(--ret-y) + var(--ret) * .5 + 44px);
  text-align: center; opacity: 0; transform: translateY(8px);
  transition: opacity 160ms, transform 200ms var(--ease-out, ease);
}
.ars[data-phase="analyzing"] .ars__analysis { opacity: 1; transform: none; }
.ars__glitch {
  position: relative; display: inline-block;
  font-family: var(--font-display, 'Black Ops One', Impact, sans-serif);
  font-size: clamp(20px, 6.4vw, 28px); letter-spacing: .1em;
  color: var(--ars-codec); text-shadow: var(--ars-outline), 0 0 10px rgba(127, 232, 255, .7);
}
.ars__glitch::before, .ars__glitch::after {
  content: attr(data-text); position: absolute; inset: 0; opacity: 0;
}
.ars__glitch::before { color: var(--ars-alert); clip-path: inset(0 0 55% 0); }
.ars__glitch::after { color: var(--ars-ph); clip-path: inset(50% 0 0 0); }
.ars[data-phase="analyzing"] .ars__glitch::before { animation: ars-glitch-a 1.3s steps(1) infinite; }
.ars[data-phase="analyzing"] .ars__glitch::after { animation: ars-glitch-b 1.3s steps(1) infinite; }
@keyframes ars-glitch-a {
  0%, 62%, 100% { opacity: 0; transform: none; }
  64% { opacity: .9; transform: translateX(-6px); }
  70% { opacity: .7; transform: translateX(4px); }
  76% { opacity: 0; }
}
@keyframes ars-glitch-b {
  0%, 30%, 100% { opacity: 0; transform: none; }
  32% { opacity: .85; transform: translateX(5px); }
  38% { opacity: .6; transform: translateX(-3px); }
  44% { opacity: 0; }
}
.ars__hex {
  margin-top: 6px;
  font-family: var(--font-pixel, 'VT323', monospace); font-size: 19px; letter-spacing: .12em;
  color: var(--ars-ph); text-shadow: var(--ars-outline);
}

/* ---------------------------------------------------------------- ologramma piatto (niente WebGL) */
.ars__flat { display: none; }
.ars[data-mode="flat"] .ars__flat {
  display: block; position: absolute; left: 50%; top: var(--ret-y);
  width: calc(var(--ret) * .62); height: calc(var(--ret) * .62);
  transform: translate(-50%, -50%);
}
.ars__flat-holo {
  position: absolute; inset: 0; display: grid; place-items: center;
  border: 2px solid rgba(92, 255, 138, .7); border-radius: 50%;
  background: radial-gradient(circle, rgba(57, 255, 20, .28), rgba(57, 255, 20, .05) 60%, transparent 72%);
  box-shadow: 0 0 22px rgba(57, 255, 20, .35), inset 0 0 22px rgba(57, 255, 20, .3);
  animation: ars-float 2.2s ease-in-out infinite;
}
.ars__flat-holo span {
  font-family: var(--font-display, 'Black Ops One', Impact, sans-serif); font-size: calc(var(--ret) * .3); line-height: 1;
  color: #c8ffd9; text-shadow: 0 0 12px rgba(57, 255, 20, .95), var(--ars-outline);
}
.ars[data-phase="analyzing"] .ars__flat-holo { animation: ars-float 2.2s ease-in-out infinite, ars-blink .16s steps(1) infinite; }
.ars__flat-item { position: absolute; inset: 6%; opacity: 0; transform: scale(.2); }
.ars__flat-item svg { width: 100%; height: 100%; color: var(--ars-gold); filter: drop-shadow(0 0 14px rgba(255, 200, 61, .6)); }
.ars[data-mode="flat"][data-phase="revealed"] .ars__flat-holo { opacity: 0; transform: scale(1.6); transition: opacity 250ms, transform 250ms; animation: none; }
.ars[data-mode="flat"][data-phase="revealed"] .ars__flat-item { animation: ars-pop 560ms var(--ease-snap, cubic-bezier(.3, 1.4, .5, 1)) 180ms both; }
@keyframes ars-float { 50% { transform: translateY(-6%); } }
@keyframes ars-pop { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- esito */
.ars__result {
  position: absolute; left: 0; right: 0; top: calc(var(--sat, 0px) + 88px);
  padding: 0 16px; text-align: center;
  opacity: 0; visibility: hidden;
}
.ars[data-phase="revealed"] .ars__result { opacity: 1; visibility: visible; }
.ars__kicker {
  font-size: 13px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--ars-ph); text-shadow: var(--ars-outline);
}
.ars__verdict {
  position: relative; margin-top: 4px;
  font-family: var(--font-display, 'Black Ops One', Impact, sans-serif); font-weight: 400;
  font-size: clamp(34px, 11.5vw, 58px); line-height: .98; letter-spacing: .05em;
}
.ars__sub {
  max-width: 30ch; margin: 10px auto 0;
  font-size: 16px; color: #e9fff0; text-shadow: var(--ars-outline);
  text-wrap: balance; /* righe bilanciate: niente "squadra." da sola sull'ultima riga */
}
.ars[data-outcome="real"] .ars__verdict {
  color: var(--ars-gold);
  text-shadow: 0 2px 0 #6b4500, 0 0 3px #000, 0 0 18px rgba(255, 200, 61, .85), 0 0 42px rgba(255, 170, 0, .45);
}
.ars[data-outcome="real"] .ars__kicker { color: var(--ars-gold); }
.ars[data-outcome="decoy"] .ars__verdict {
  color: #e8c48a;
  text-shadow: 0 3px 0 #4a3216, 0 0 3px #000, 0 0 16px rgba(176, 136, 80, .7);
}
.ars[data-outcome="decoy"] .ars__kicker { color: #e8c48a; }
.ars[data-phase="revealed"] .ars__kicker { animation: ars-fade-up 320ms ease-out both; }
.ars[data-phase="revealed"][data-outcome="real"] .ars__verdict { animation: ars-stamp 520ms var(--ease-snap, cubic-bezier(.3, 1.4, .5, 1)) 120ms both; }
.ars[data-phase="revealed"][data-outcome="decoy"] .ars__verdict { animation: ars-stamp-wobble 760ms cubic-bezier(.3, 1.2, .4, 1) 380ms both; }
.ars[data-phase="revealed"] .ars__sub { animation: ars-fade-up 360ms ease-out 520ms both; }
@keyframes ars-stamp { 0% { opacity: 0; transform: scale(2.2); } 60% { opacity: 1; transform: scale(.94); } 100% { opacity: 1; transform: none; } }
@keyframes ars-stamp-wobble {
  0% { opacity: 0; transform: scale(1.8) rotate(-8deg); }
  45% { opacity: 1; transform: scale(.96) rotate(3deg); }
  70% { transform: scale(1.02) rotate(-2deg); }
  100% { opacity: 1; transform: rotate(-1.5deg); }
}
@keyframes ars-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* raggi dorati dietro il verdetto (solo VERO) */
.ars__rays {
  position: absolute; left: 50%; top: 40px; width: 150vmin; height: 150vmin; margin: -75vmin 0 0 -75vmin;
  opacity: 0; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 200, 61, .22) 0 7deg, transparent 7deg 20deg);
  -webkit-mask-image: radial-gradient(circle, #000 0, rgba(0, 0, 0, .6) 22%, transparent 55%);
  mask-image: radial-gradient(circle, #000 0, rgba(0, 0, 0, .6) 22%, transparent 55%);
}
.ars[data-phase="revealed"][data-outcome="real"] .ars__rays { opacity: 1; animation: ars-spin 22s linear infinite; transition: opacity 600ms; }

/* ---------------------------------------------------------------- parte bassa: stato + azioni */
.ars__bottom {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 0 calc(var(--sar, 0px) + 16px) calc(var(--sab, env(safe-area-inset-bottom, 0px)) + 18px) calc(var(--sal, 0px) + 16px);
}
.ars__status { text-align: center; min-height: 58px; transition: opacity 200ms; }
.ars__hint {
  display: inline-block; max-width: min(94vw, 440px); padding: 8px 14px 7px;
  font-size: 17px; letter-spacing: .08em; text-transform: uppercase;
  color: #eafff0; text-shadow: var(--ars-outline);
  background: rgba(1, 10, 4, .62);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.ars__hint:empty { display: none; }
.ars[data-framed="1"] .ars__hint { color: var(--ars-gold); }
.ars__tele {
  margin-top: 6px; min-height: 20px;
  font-family: var(--font-pixel, 'VT323', monospace); font-size: 20px; line-height: 1; letter-spacing: .1em;
  color: var(--ars-ph); text-shadow: var(--ars-outline); opacity: .9;
}
.ars[data-phase="revealed"] .ars__status, .ars[data-phase="failed"] .ars__status, .ars[data-phase="blocked"] .ars__status { opacity: 0; }
.ars__actions { width: min(100%, 420px); animation: ars-fade-up 320ms ease-out 700ms both; }
.ars__actions .btn { pointer-events: auto; }

/* ---------------------------------------------------------------- pannello (permessi / errore) */
.ars__panel {
  position: absolute; left: 50%; bottom: calc(var(--sab, env(safe-area-inset-bottom, 0px)) + 20px);
  width: min(calc(100vw - 32px), 420px);
  transform: translateX(-50%);
  pointer-events: auto; text-align: center;
  animation: ars-panel-in 260ms var(--ease-out, ease) both;
}
@keyframes ars-panel-in { from { opacity: 0; transform: translate(-50%, 16px) scaleY(.6); } to { opacity: 1; transform: translate(-50%, 0); } }
.ars__panel[data-kind="alert"] { --frame-c: var(--ars-alert); }
.ars__panel[data-kind="caution"] { --frame-c: var(--caution, #ffb000); }
.ars__panel-icon { width: 48px; height: 48px; margin: 2px auto 10px; }
.ars__panel-icon svg { width: 100%; height: 100%; }
.ars__panel[data-kind="alert"] .ars__panel-icon { color: var(--ars-alert); filter: drop-shadow(0 0 8px rgba(255, 42, 42, .6)); }
.ars__panel[data-kind="caution"] .ars__panel-icon { color: var(--caution, #ffb000); filter: drop-shadow(0 0 8px rgba(255, 176, 0, .5)); }
.ars__panel-title { font-size: 21px; }
.ars__panel[data-kind="alert"] .ars__panel-title { color: var(--ars-alert); text-shadow: 0 0 8px rgba(255, 42, 42, .6); }
.ars__panel[data-kind="caution"] .ars__panel-title { color: var(--caution, #ffb000); text-shadow: 0 0 8px rgba(255, 176, 0, .45); }
.ars__panel-text { margin: 8px 0 16px; font-size: 15px; color: #d9ffe4; }
.ars__panel-actions { display: flex; flex-direction: column; gap: 10px; }

/* schermi bassi (telefono in orizzontale, iPhone SE): mirino e testi piu' compatti */
@media (max-height: 560px) {
  .ars { --ret: min(46vw, 42vh, 220px); }
  .ars__result { top: calc(var(--sat, 0px) + 64px); }
  .ars:not([data-threat="none"]) .ars__result { top: calc(var(--sat, 0px) + 108px); }
  .ars__verdict { font-size: clamp(28px, 8vh, 44px); }
  .ars__sub { font-size: 14px; }
}

/* ---------------------------------------------------------------- movimento ridotto */
@media (prefers-reduced-motion: reduce) {
  .ars { animation: ars-fade 120ms ease-out both; }
  .ars__c { animation: none; transition: color 120ms; }
  .ars[data-phase="spawning"] .ars__c, .ars[data-phase="starting"] .ars__c { animation: none; }
  .ars__ticks, .ars[data-phase="analyzing"] .ars__ticks, .ars[data-phase="analyzing"] .ars__ring { animation: none; }
  .ars__rec { animation: none; }
  .ars__threat { animation: ars-fade 150ms ease-out both; transform: translateX(-50%); }
  .ars__threat[data-alert="alert"] .ars__threat-bang, .ars__threat.is-danger .ars__threat-bar i.is-on { animation: none; }
  .ars__arrow i { animation: none; }
  .ars[data-phase="analyzing"] .ars__glitch::before, .ars[data-phase="analyzing"] .ars__glitch::after { animation: none; }
  .ars__flat-holo, .ars[data-phase="analyzing"] .ars__flat-holo { animation: none; }
  .ars[data-phase="revealed"] .ars__verdict, .ars[data-phase="revealed"] .ars__sub,
  .ars[data-phase="revealed"] .ars__kicker, .ars__actions, .ars__notice, .ars__panel { animation: ars-fade 150ms ease-out both; }
  .ars__panel { transform: translateX(-50%); }
  .ars__notice { transform: translateX(-50%); }
  .ars[data-phase="revealed"][data-outcome="real"] .ars__rays { animation: none; }
  .ars.is-flashing .ars__flash { animation-duration: 400ms; }
  .ars[data-mode="flat"][data-phase="revealed"] .ars__flat-item { animation: ars-fade 150ms ease-out both; opacity: 1; transform: none; }
}
@keyframes ars-fade { from { opacity: 0; } to { opacity: 1; } }