/* =========================================================
   FOUNDER AGENCY — GAME
   ========================================================= */

@font-face{
  font-family: "Britanica";
  src: url("assets/Britanica-Regular Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Britanica";
  src: url("assets/Britanica-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root{
  --bg: #0d0d0f;
  --bg-2: #17171b;
  --fg: #f4f2ee;
  --muted: #9a978f;
  --accent: #F84100;     /* sticker arancione / brand */
  --accent-2: #ffb27a;
  --bg-orange: #a83210;  /* mid del gradient di sfondo */
  --ok: #3ddc82;
  --danger: #ff4d4d;
  --radius: 14px;
  --font: "Britanica", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --font-mono: "Fragment Mono", ui-monospace, Menlo, Consolas, monospace;
  --accent-dark: #4f1500;   /* hover/dark orange dal sito cosette.studio */
  --text-secondary: #b3b3b3;
}

*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; height:100%; background:var(--bg); color:var(--fg); font-family:var(--font); -webkit-font-smoothing:antialiased; }
body{ overflow:hidden; }

/* Fix: senza questo, le regole con display:flex/grid ignorano l'attributo HTML hidden */
[hidden]{ display: none !important; }

/* ---------- ACCESSIBILITY ---------- */
/* Contenuto visibile solo agli screen reader */
.sr-only{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Focus visible custom: contorno arancione ben visibile su tutti gli interattivi */
:focus-visible{
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.btn:focus-visible,
.btn-ghost:focus-visible,
.btn-link:focus-visible,
.card:focus-visible,
.hud-btn:focus-visible{
  outline: 3px solid #fff;
  outline-offset: 4px;
}

#app{
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  overflow: hidden;
  background: #000;
}

/* ---------- STAGE / CANVAS ---------- */
/* Altezza SEMPRE full viewport; larghezza limitata da aspect 2:3 (o dalla viewport se più stretta) */
.stage{
  position: relative;
  flex: 0 0 auto;
  height: 100vh;
  height: 100dvh;
  width: min(100vw, calc(100dvh * 2 / 3));
  background: #0a0a0c;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  isolation: isolate;              /* isola il compositing → no repaint sul resto */
  contain: layout style paint;     /* isola layout/paint → no ripple sull'esterno */
}
canvas#game{
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
}

/* ---------- HUD IN-CANVAS ---------- */
/* HEADER: score chip · brand · timer chip */
.hud-top{
  position: absolute;
  top: 18px; left: 18px; right: 18px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px;
  pointer-events: none;
  z-index: 5;
}
.hud-brand{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; justify-content: center;
  height: clamp(13px, 1.5vw, 22px);   /* ridotto del 30% */
  max-width: 40%;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.hud-brand img{
  height: 100%;
  width: auto;
  display: block;
  /* drop-shadow rimosso: causava repaint continui sul HUD durante gameplay */
}

/* Pill outlined: icona + numero grande, bordo bianco pill */
.pill{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 14px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  color: #fff;
}
.pill-ico{
  width: clamp(18px, 1.9vw, 22px);
  height: clamp(18px, 1.9vw, 22px);
  flex: 0 0 auto;
  color: #fff;
}
/* Numeri del gioco: Inter (Britanica solo per il resto) — rendering pulito garantito */
.pill-value{
  display: inline-block;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  font-style: normal;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1;
  letter-spacing: -.01em;
  color: inherit;
  -webkit-text-stroke: 0 transparent;
  text-shadow: none;
  text-decoration: none;
  font-synthesis: none;
  font-variant-numeric: tabular-nums;
  transform-origin: center;
  min-width: 4ch;
  text-align: center;
}

.pill-score{ color: var(--ok); }
.pill-score .pill-value{ color: var(--ok); }

/* Microinterazioni score sul numero */
.pill-score.pulse-up .pill-value{
  animation: pillPop .5s cubic-bezier(.2,1.5,.3,1);
}
.pill-score.pulse-down .pill-value{
  animation: pillShake .45s ease;
  color: var(--danger);
}
@keyframes pillPop{
  0%,100%{ transform: scale(1); }
  40%   { transform: scale(1.28); }
}
@keyframes pillShake{
  0%,100%{ transform: translateX(0); }
  20%{ transform: translateX(-5px); }
  40%{ transform: translateX( 5px); }
  60%{ transform: translateX(-4px); }
  80%{ transform: translateX( 4px); }
}

/* Timer: rosso pulsante negli ultimi 10 secondi */
.pill-time.warning{
  color: var(--danger);
  border-color: var(--danger);
  animation: timeWarn .9s ease-in-out infinite;
}
.pill-time.warning .pill-ico{ color: var(--danger); }
@keyframes timeWarn{
  0%,100%{ transform: scale(1); opacity: 1; }
  50%   { transform: scale(1.06); opacity: .85; }
}

/* Streak chip disattivata */
.hud-streak{ display: none !important; }
.hud-streak--disabled-original{
  position: absolute;
  top: 66px; left: 18px;
  color: #fff;
  background: var(--accent);
  font: 400 10px/1 var(--font-mono); letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 9px; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(248,65,0,.5);
  opacity: 0;
  transform: translateY(-4px) scale(.9);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
  z-index: 5;
}
.hud-streak.on{
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: streakPulse 1.2s ease-in-out infinite;
}
@keyframes streakPulse{
  0%,100%{ box-shadow: 0 4px 14px rgba(248,65,0,.5); }
  50%   { box-shadow: 0 4px 22px rgba(248,65,0,.9); }
}

/* Barra tempo full-width sotto l'header — fill cresce da sinistra col gradiente */
.hud-progress{
  position: absolute;
  top: calc(18px + clamp(46px, 5vw, 60px) + 12px);
  left: 18px; right: 18px;
  height: 4px;
  background: rgba(255,255,255,.10);
  border-radius: 999px;
  overflow: hidden;
  z-index: 4;
  pointer-events: none;
}
.hud-progress-fill{
  height: 100%; width: 0%;
  background: linear-gradient(90deg,
    var(--ok) 0%,
    #ffd23f 40%,
    var(--accent) 70%,
    var(--danger) 100%);
  transition: width .18s linear;
  border-radius: 999px;
}
.hud-progress-fill.danger{
  animation: barPulse .8s ease-in-out infinite;
}
@keyframes barPulse{ 0%,100%{ opacity: 1; } 50%{ opacity: .55; } }

/* Bottoni HUD (pausa, musica, frecce) */
.hud-btn{
  position: absolute;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.55);   /* opacità maggiore invece del blur */
  border: 1.5px solid rgba(255,255,255,.9);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  /* backdrop-filter rimosso: causava flicker sul canvas che si aggiorna 60fps sotto */
  transition: transform .12s ease, background .18s ease, border-color .18s ease;
  z-index: 6;
}
.hud-btn:hover{ background: rgba(255,255,255,.12); }
.hud-btn:active{ transform: scale(.94); }
.hud-btn.on{ background: var(--accent); border-color: var(--accent); }
.hud-btn svg{ width: 55%; height: 55%; display: block; }

.hud-btn-sm{ width: 44px; height: 44px; }
.hud-btn-lg{ width: 62px; height: 62px; }

.hud-btn-pause{ bottom: 110px; left: 18px; }
.hud-btn-music{ bottom: 110px; right: 18px; }
.hud-arrow-left{ bottom: 30px; left: 18px; }
.hud-arrow-right{ bottom: 30px; right: 18px; }

/* Toggle icone (nessun uso di [hidden]: solo classi CSS) */
.hud-btn-pause .ico-play,
.hud-btn-pause.on .ico-pause      { display: none; }
.hud-btn-pause.on .ico-play       { display: block; }

.hud-btn-music .ico-music-off,
.hud-btn-music.off .ico-music     { display: none; }
.hud-btn-music.off .ico-music-off { display: block; }

/* ---------- MODALI IN-GAME (tic toc / hai vinto) ---------- */
.game-modal{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  z-index: 10;
}
.game-modal[hidden]{ display: none; }
.game-modal__backdrop{
  position: absolute; inset: 0;
  background: rgba(0,0,0,.65);
}
.game-modal__card{
  position: relative;
  z-index: 1;
  background: rgba(0,0,0,.75);
  border: 1.5px solid rgba(255,255,255,.9);
  /* Rimosso backdrop-filter: causava flicker su canvas che si aggiorna 60fps sotto */
  border-radius: 22px;
  padding: 34px 30px 26px;
  max-width: 90%;
  min-width: min(320px, 80%);
  text-align: center;
  animation: modalIn .3s ease;
}
@keyframes modalIn{
  from{ opacity: 0; transform: translateY(10px) scale(.96); }
  to  { opacity: 1; transform: none; }
}
.game-modal__title{
  font-family: var(--font); font-weight: 400;
  font-size: clamp(30px, 5.4vw, 48px);
  color: #fff;
  letter-spacing: -.01em;
  line-height: 1;
  margin: 0 0 14px;
  text-transform: lowercase;
}
.game-modal__text{
  font-family: var(--font); font-weight: 400;
  font-size: clamp(14px, 1.7vw, 17px);
  line-height: 1.45;
  color: var(--text-secondary);
  margin: 0 0 18px;
}
.game-modal__hint{
  font-family: var(--font-mono); font-weight: 400;
  font-size: 11px;
  letter-spacing: .06em;
  color: rgba(255,255,255,.6);
  margin: 0 0 22px;
}

/* ---------- HUD interno al canvas (solo narrativa/hint/pausa) ---------- */
.hud{
  position:absolute; inset:0; pointer-events:none;
  font: 600 11px/1.2 var(--font); letter-spacing:.12em; text-transform:uppercase;
  color:var(--fg);
}
.hud-paused{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,.75);
  color:#fff;
  font: 800 42px/1 var(--font); letter-spacing:.24em;
  /* backdrop-filter rimosso: causava flicker durante il gameplay */
  pointer-events:none;
}

.hud-narrative{
  position:absolute; left:50%; top:38%; transform:translate(-50%, -50%);
  padding:10px 18px; border-radius:999px;
  background:rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.1);
  font: 700 14px/1 var(--font); letter-spacing:.08em; text-transform:uppercase;
  opacity:0; transition:opacity .3s ease;
  white-space:nowrap; max-width:80%;
}
.hud-narrative.show{ opacity:1; }

/* (Il vecchio hud-hint è stato completamente rimosso dall'HTML — istruzioni solo nella modale "tic toc") */

/* ---------- SCREENS: FULL VIEWPORT, NO SCROLL ---------- */
.screen{
  position: fixed; inset: 0; z-index: 20;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  overflow: hidden;
  background: radial-gradient(80% 60% at 50% 30%, rgba(255,122,26,.08), transparent 60%),
              linear-gradient(180deg, rgba(13,13,15,.96), rgba(13,13,15,.98));
  animation: fadeIn .35s ease;
}
.screen-inner{
  width: 100%;
  text-align: center;
  padding-top: clamp(50px, 6vw, 80px);   /* spazio per il logo top center */
}
.screen[hidden]{ display:none; }
.screen-inner{ max-width:720px; width:100%; text-align:center; }

.eyebrow{
  color:var(--accent); font: 400 11px/1 var(--font-mono);
  letter-spacing:.18em; text-transform:uppercase; margin:0 0 14px;
}
.title{
  font: 800 clamp(38px, 7vw, 72px)/1.02 var(--font);
  letter-spacing:-.02em; margin:0 0 18px;
}
.title-sm{
  font: 800 clamp(24px, 4.4vw, 40px)/1.1 var(--font);
  letter-spacing:-.01em; margin:0 0 18px;
}
.lead{
  color:var(--muted); font-size:16px; line-height:1.55;
  margin:0 auto 28px; max-width:52ch;
}
.role{ color:var(--accent-2); margin:-8px 0 18px; font: 600 14px/1 var(--font); letter-spacing:.12em; text-transform:uppercase; }
.micro{ color:var(--muted); font-size:12px; margin-top:22px; letter-spacing:.06em; }

.btn{
  display:inline-block; cursor:pointer; user-select:none;
  padding:14px 28px; border-radius:999px;
  font: 400 15px/1 var(--font); letter-spacing:.01em; text-transform:none;
  border:1.5px solid transparent; text-decoration:none;
  transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{ background:var(--accent-dark); }
.btn-secondary{ background:transparent; color:var(--fg); border-color:rgba(255,255,255,.9); }
.btn-secondary:hover{ background:#fff; color:#111; }

/* ---------- SCREEN: SELECT (cosette.studio) ---------- */
.screen--select{
  background: #000;
  align-items: stretch;
  padding: 0;
}
/* Grid: top 40% = logo/title/subtitle, bottom 60% = personaggi + cards */
.select-inner{
  display: grid;
  grid-template-rows: 40vh 60vh;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}
.select-header{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;      /* logo+title+sub centrati verticalmente nel top 40vh */
  gap: 10px;
  padding: 0 20px;
}

/* ---------- LOGO BRAND UNIFICATO (top center in ogni pagina) ---------- */
.brand-logo{
  position: absolute;
  top: clamp(16px, 2.4vw, 28px);
  left: 50%;
  transform: translateX(-50%);
  height: clamp(18px, 2.2vw, 32px);
  z-index: 15;
  display: block;
  text-decoration: none;
  color: inherit;
}
.brand-logo img{
  height: 100%;
  width: auto;
  display: block;
}
/* Logo inline dentro il select-header — deve stare DOPO .brand-logo per vincere */
.brand-logo--inline{
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  z-index: auto;
  margin: 0 0 clamp(40px, 7vh, 90px);   /* spazio ampio sotto il logo, prima del titolo */
}
.select-title{
  font-family: var(--font);
  font-weight: 400;
  font-size: clamp(30px, 4.6vw, 56px);
  color: #fff;
  line-height: 1.1;
  letter-spacing: -.01em;
  margin: 0;
}
.select-sub{
  font-family: var(--font);
  font-weight: 400;
  font-size: clamp(14px, 1.4vw, 18px);
  color: var(--accent);
  margin: 0;
}

/* ---------- CARDS (SELECT) ---------- */
.cards{
  --char-w: clamp(220px, 20vw, 320px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--char-w);       /* = larghezza omino: i due si toccano ma non si sovrappongono */
  align-items: center;
  align-self: center;       /* cards centrate nel 60vh area */
  justify-content: center;
  margin: 0 auto;
  padding: 0 24px;
  max-width: 1300px;
  width: 100%;
}
/* (Rimosso il vecchio breakpoint 820px 1-column: sostituito dalla logica portrait/landscape sotto) */

.card{
  position: relative;
  background: #17171b;
  border: 2px solid var(--accent);
  border-radius: 22px;
  padding: 22px 26px;
  min-height: 210px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
  text-align: left;
}
.card:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(248,65,0,.18);
}
.card:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* Personaggio centrato verticalmente sul bordo INTERNO della card
   (a destra per la left, a sinistra per la right — i due si "guardano") */
.card__char{
  position: absolute;
  top: 50%;
  transform: translateY(-50%) scale(1);
  transform-origin: center center;
  transition: transform .4s cubic-bezier(.2, .8, .2, 1);
  width: var(--char-w);
  height: calc(var(--char-w) * 1.65);
  z-index: 2;
  cursor: pointer;      /* stesso cursor della card */
  /* pointer-events auto (default): click sul personaggio bolla al parent .card */
}
.card__char img{ pointer-events: none; }   /* impedisce drag dell'immagine */
/* Tablet landscape / desktop touch senza hover: layout desktop → transform translateY */
@media (hover: none) and (min-width: 721px) and (orientation: landscape){
  .card__char{ transition: none; }
  .card:hover .card__char,
  .card:active .card__char,
  .card:focus .card__char{
    transform: translateY(-50%) !important;
  }
}
/* Mobile (< 721px) + tablet portrait (≤ 1200px, orientation portrait): layout mobile → translateX */
@media (max-width: 720px), (orientation: portrait) and (max-width: 1200px){
  .card__char{ transition: none; }
  .card:hover .card__char,
  .card:active .card__char,
  .card:focus .card__char{
    transform: translateX(-50%) !important;
  }
}
.card__char img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
}
/* Left card → personaggio sul lato DESTRO (interno) */
.card--left .card__char{
  right: calc(var(--char-w) * -0.5);
  left: auto;
  bottom: auto;
}
/* Right card → personaggio sul lato SINISTRO (interno) */
.card--right .card__char{
  left: calc(var(--char-w) * -0.5);
  right: auto;
  bottom: auto;
}

/* "Testa" misteriosa: cerchio arancione con bordo bianco — sovrapposta al personaggio */
.card__head{
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: var(--accent);
  border: 5px solid #fff;
  box-shadow: 0 6px 14px rgba(0,0,0,.4);
}
/* Card sbloccata: foto del founder al posto del cerchio arancione */
.card__head--unlocked{
  width: 120px;
  height: 138px;
  border-radius: 48% 52% 44% 56% / 44% 46% 54% 56%;
  background: #2a2a30 center / cover no-repeat;
  border: 5px solid #fff;
  top: 0;
  box-shadow: 0 6px 16px rgba(0,0,0,.45);
}

/* Corpo card con testi e barre */
.card__body{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
/* Left card: testo a SX, personaggio a DX (interno) → padding-right per lo spazio del char */
.card--left{ padding-right: calc(var(--char-w) * 0.55); }
.card--left .card__body{ padding: 0; text-align: left; align-items: flex-start; }
/* Right card: testo a DX, personaggio a SX (interno) → padding-left per lo spazio del char */
.card--right{ padding-left: calc(var(--char-w) * 0.55); }
.card--right .card__body{ padding: 0; text-align: right; align-items: flex-end; }

.card__row{ display: flex; flex-direction: column; gap: 3px; width: 100%; }
/* Right card: label/valori/barre allineati a destra */
.card--right .card__body,
.card--right .card__row,
.card--right .stat{
  align-items: flex-end;
  text-align: right;
}
.stat{ width: 100%; }
.stat-bar{ width: 100%; }
.card__row .k{
  font-family: var(--font-mono); font-weight: 400;
  font-size: 14px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-secondary);
}
.card__row .v{
  font-family: var(--font); font-weight: 800;
  font-size: 17px; color: #fff; letter-spacing: -.005em;
}

.stat{ display: flex; flex-direction: column; gap: 5px; }
.stat .k{
  font-family: var(--font-mono); font-weight: 400;
  font-size: 14px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-secondary);
}
.stat-bar{
  height: 6px;
  background: rgba(255,255,255,.10);
  border-radius: 999px;
  overflow: hidden;
}
.stat-bar > span{
  display: block; height: 100%;
  background: var(--accent);
  border-radius: 999px;
}

/* Mobile (< 721px) + tablet portrait (≤ 1200px, orientation portrait): layout mobile con char sopra */
@media (max-width: 720px), (orientation: portrait) and (max-width: 1200px){
  /* Card mobile: 2 colonne affiancate; personaggio SOPRA la card (feet nel bordo alto) */
  .cards{
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 0 10px;
    max-width: 100%;
    margin: 0 auto;
    align-self: center;
  }
  .card{
    padding: clamp(120px, 30vw, 180px) 14px 20px;   /* padding-top per far spazio ai feet */
    min-height: auto;
    overflow: visible;
    text-align: left;
    border-width: 2px;
  }
  .card__char{
    position: absolute;
    left: 50%;
    right: auto;
    top: clamp(-120px, -26vw, -80px);   /* sporgenza contenuta, non arriva ai testi */
    bottom: auto;
    transform: translateX(-50%);
    width: min(96%, 200px);
    height: clamp(200px, 50vw, 280px);
  }
  /* Override desktop left/right */
  .card--left .card__char,
  .card--right .card__char{
    left: 50% !important;
    right: auto !important;
  }
  .card__body{
    padding: 0 !important;
    gap: 8px;
    align-items: flex-start;
    width: 100%;
  }
  /* Mobile: nascondi Superpotere/Punto debole/Skill (solo barre stats) */
  .card__row{ display: none; }
  .stat .k{ font-size: 9px; letter-spacing: .14em; }
  /* Mobile: header centrato verticalmente + font titolo/subtitle più grandi */
  .select-header{
    justify-content: center;
    padding: 20px 20px;
  }
  .select-title{ font-size: clamp(34px, 8vw, 44px); margin: 0; }
  .select-sub{ font-size: 16px; margin: 0; }
}

/* ---------- INTRO ---------- */
.intro-avatar, .reveal-avatar{
  display:flex; align-items:center; justify-content:center;
  margin: 0 auto 18px; width:140px; height:140px; position:relative;
}
/* Sticker principale (intro/reveal) */
.ball{
  position:relative;
  display:block; width:120px; height:120px; border-radius:50%;
  background: var(--accent);
  border: 6px solid #fff;
  box-shadow:
    4px 5px 0 rgba(0,0,0,.4),
    0 12px 30px rgba(255,122,26,.25);
  animation: bob 2.2s ease-in-out infinite;
  transform: rotate(-8deg);
}
.ball::after{
  content:'';
  position:absolute; right:-2px; bottom:-2px;
  width:26px; height:26px;
  background: linear-gradient(135deg, #fff 60%, #d9d9d9 60%);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  filter: drop-shadow(-1px -1px 1px rgba(0,0,0,.25));
}
@keyframes bob{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-8px); } }

/* ---------- END ---------- */
.end-stats, .profile-stats{
  list-style:none; padding:0; margin:0 auto 28px;
  display:grid; grid-template-columns:1fr 1fr; gap:8px 24px;
  max-width:520px; text-align:left;
}
.end-stats li, .profile-stats li{
  display:flex; justify-content:space-between; gap:16px;
  padding:10px 0; border-bottom:1px dashed rgba(255,255,255,.08);
  font-size:14px;
}
.end-stats li b, .profile-stats li b{ color:var(--accent-2); font-weight:700; }

/* ---------- REVEAL (landing di vittoria) ---------- */
.screen--reveal{ background: #000; }
.reveal-inner{
  max-width: 1100px; width: 100%;
  text-align: center;
  padding: clamp(40px, 5vw, 60px) 20px 40px;
}

/* Card orizzontale: personaggio a SX sporgente dal bordo, testo a DX dentro */
.reveal-card{
  position: relative;
  border: 2px solid var(--accent);
  border-radius: 22px;
  background: #17171b;
  padding: clamp(28px, 3.5vw, 44px);
  padding-left: clamp(190px, 22vw, 300px);   /* spazio per l'omino a SX */
  min-height: clamp(240px, 26vw, 320px);
  max-width: min(920px, 100%);
  margin: 0 auto;
  text-align: left;
}
/* Personaggio (PNG scoperto): sta sul bordo SX, metà fuori-metà dentro */
.reveal-character{
  position: absolute;
  left: clamp(-40px, -3vw, -20px);
  bottom: clamp(-30px, -2vw, -14px);
  width: clamp(220px, 24vw, 300px);
  height: clamp(300px, 34vw, 420px);
  pointer-events: none;
  z-index: 2;
}
.reveal-character img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  display: block;
}

.reveal-body{
  display: flex; flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-height: clamp(200px, 22vw, 260px);
}
.reveal-name{
  font-family: var(--font); font-weight: 400;
  font-size: clamp(38px, 5.4vw, 72px);
  color: #fff;
  line-height: 1;
  letter-spacing: -.02em;
  margin: 0 0 6px;
}
.reveal-role{
  color: var(--accent);
  font-family: var(--font-mono); font-weight: 400;
  font-size: clamp(14px, 1.4vw, 17px);
  letter-spacing: .2em;
  text-transform: uppercase;
  margin: 0 0 18px;
}
.reveal-tag{
  color: #fff;
  font-family: var(--font); font-weight: 400;
  font-size: clamp(15px, 1.5vw, 19px);
  line-height: 1.5;
  margin: 0;
  max-width: 46ch;
}

/* CTA sotto la card, centrate orizzontalmente nella pagina */
.reveal-ctas{
  display: flex; flex-direction: column; align-items: center;
  gap: 14px;
  margin-top: clamp(20px, 3vh, 32px);
  max-width: min(920px, 100%);
  margin-left: auto;
  margin-right: auto;
}
.btn-link{
  background: none;
  border: none;
  color: #fff;
  font: 400 16px/1 var(--font);
  cursor: pointer;
  padding: 6px 4px;
  text-decoration: none;
  letter-spacing: .01em;
}
.btn-link:hover{ color: var(--accent); }

@media (max-width: 700px){
  /* Reveal mobile: layout verticale, omino IN COLONNA sopra al testo (non absolute) */
  .reveal-card{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 22px 28px;
    padding-left: 22px;
    min-height: 0;
    text-align: center;
    overflow: visible;
  }
  .reveal-character{
    position: relative;      /* non più absolute: entra nel flusso */
    left: auto; right: auto; top: auto; bottom: auto;
    transform: none;
    width: min(220px, 55vw);
    height: min(300px, 70vw);
    margin: -50px 0 4px;      /* sporge appena sopra il bordo della card */
    align-self: center;
    flex: 0 0 auto;
    z-index: 1;
  }
  .reveal-body{
    align-items: center; text-align: center;
    min-height: 0;
    width: 100%;
  }
  .reveal-tag{ margin-left: auto; margin-right: auto; }
  .reveal-ctas{
    align-items: center;
    padding-left: 0;
  }
}

/* ---------- PROFILE ---------- */
.compat{
  display:flex; align-items:baseline; justify-content:center; gap:12px;
  margin: 4px 0 24px;
}
.compat .k{ color:var(--muted); font: 600 12px/1 var(--font); letter-spacing:.12em; text-transform:uppercase; }
.compat .v{ color:var(--accent); font: 800 42px/1 var(--font); }
.cta-row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

@keyframes fadeIn{ from{ opacity:0; transform: translateY(4px); } to{ opacity:1; transform:none; } }

/* ---------- ACCESSIBILITY ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}


/* Mobile + tablet portrait: stage occupa TUTTA la viewport, niente banda nera */
@media (max-width: 720px), (orientation: portrait) and (max-width: 1200px){
  #app{ padding: 0; }
  .stage{
    aspect-ratio: unset;
    width: 100vw;
    height: 100vh;
    height: 100dvh;         /* accounts for iOS Safari bars */
    max-width: none;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
  }
  .hud-top{ top: 12px; left: 12px; right: 12px; }
  .hud-btn-sm{ width: 40px; height: 40px; }
  .hud-btn-lg{ width: 56px; height: 56px; }
  .hud-btn-pause, .hud-btn-music{ bottom: 140px; }
  .hud-arrow-left, .hud-arrow-right{ bottom: 62px; }
  .hud-streak{ top: 58px; left: 12px; font-size: 9px; padding: 4px 7px; }
  .hud-progress{ top: 58px; left: 12px; right: 12px; }
}

/* ============================================================
   MODE SELECTOR SCREEN (landing con 2 CTA: normale / pixel)
   ============================================================ */
.screen--mode{
  background: #000;
  align-items: center;
  justify-content: center;
}
.mode-inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3vh, 32px);
  padding: 20px;
  text-align: center;
}
.mode-title{
  font-family: var(--font);
  font-weight: 400;
  font-size: clamp(32px, 4.6vw, 56px);
  color: #fff;
  line-height: 1.1;
  letter-spacing: -.01em;
  margin: 0;
}
.mode-sub{
  font-family: var(--font);
  font-weight: 400;
  font-size: clamp(14px, 1.4vw, 18px);
  color: var(--accent);
  margin: 0 0 clamp(20px, 3vh, 30px);
}
.mode-ctas{
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

/* ============================================================
   PIXEL MODE (attivo solo se body ha classe .pixel-mode)
   ============================================================ */
body.pixel-mode{
  font-family: "Press Start 2P", "VT323", monospace;
}
/* image-rendering solo su img/svg — il canvas gestisce internamente via imageSmoothingEnabled */
body.pixel-mode img,
body.pixel-mode svg{
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
}
body.pixel-mode *{
  border-radius: 0 !important;
}
body.pixel-mode button,
body.pixel-mode .btn,
body.pixel-mode a,
body.pixel-mode .card,
body.pixel-mode .hud-btn,
body.pixel-mode .pill{
  transition: none !important;
}
body.pixel-mode{
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
  font-smooth: never;
}

/* Bordi spessi tipo NES */
body.pixel-mode .card,
body.pixel-mode .reveal-card,
body.pixel-mode .game-modal__card,
body.pixel-mode .pill,
body.pixel-mode .hud-btn{
  border-width: 4px !important;
  border-style: solid !important;
}

/* Font: Press Start 2P per titoli, VT323 per testi */
body.pixel-mode .select-title,
body.pixel-mode .reveal-name,
body.pixel-mode .game-modal__title,
body.pixel-mode .mode-title{
  font-family: "Press Start 2P", monospace !important;
  font-size: clamp(18px, 2.6vw, 32px) !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}
body.pixel-mode .select-sub,
body.pixel-mode .reveal-tag,
body.pixel-mode .game-modal__text,
body.pixel-mode .mode-sub{
  font-family: "VT323", monospace !important;
  font-size: clamp(18px, 1.8vw, 24px) !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
}
body.pixel-mode .reveal-role,
body.pixel-mode .card__row .k,
body.pixel-mode .stat .k,
body.pixel-mode .eyebrow,
body.pixel-mode .game-modal__hint{
  font-family: "Press Start 2P", monospace !important;
  font-size: 10px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  line-height: 1.5 !important;
}
body.pixel-mode .card__row .v{
  font-family: "VT323", monospace !important;
  font-size: 16px !important;
  color: #fff !important;
  letter-spacing: 0 !important;
}

/* Bottoni squadrati con bordo pixel */
body.pixel-mode .btn{
  font-family: "Press Start 2P", monospace !important;
  font-size: 10px !important;
  letter-spacing: .05em !important;
  padding: 14px 22px !important;
  text-transform: uppercase !important;
  border-width: 3px !important;
  border-style: solid !important;
}
body.pixel-mode .btn-primary{ border-color: #fff !important; background: var(--accent) !important; color: #fff !important; }
body.pixel-mode .btn-secondary{ border-color: #fff !important; background: transparent !important; color: #fff !important; }
body.pixel-mode .btn-primary:hover{ background: #fff !important; color: var(--accent) !important; }
body.pixel-mode .btn-secondary:hover{ background: #fff !important; color: #111 !important; }
body.pixel-mode .btn-link{
  font-family: "VT323", monospace !important;
  font-size: 18px !important;
}

/* Pill score/timer squadrati pixel */
body.pixel-mode .pill{
  padding: 6px 14px !important;
  border-width: 3px !important;
  border-color: #fff !important;
  background: rgba(0,0,0,.5) !important;
  gap: 6px !important;
}
body.pixel-mode .pill-value{
  font-family: "Press Start 2P", monospace !important;
  font-size: 18px !important;
  letter-spacing: 0 !important;
}

/* Bottoni HUD pixel squadrati */
body.pixel-mode .hud-btn{
  border-radius: 0 !important;
  border-width: 3px !important;
  background: rgba(0,0,0,.5) !important;
}

/* Logo: nascondi SVG, mostra testo pixel */
body.pixel-mode .brand-logo img,
body.pixel-mode .hud-brand img{ display: none !important; }
body.pixel-mode .brand-logo::after,
body.pixel-mode .hud-brand::after{
  content: "COSETTE.STUDIO";
  font-family: "Press Start 2P", monospace;
  color: #fff;
  letter-spacing: 0;
  white-space: nowrap;
}
body.pixel-mode .brand-logo::after{ font-size: clamp(10px, 1.2vw, 14px); }
body.pixel-mode .hud-brand::after{ font-size: 10px; }
body.pixel-mode .brand-logo,
body.pixel-mode .hud-brand{ height: auto !important; }

/* Modali con bordo pixel arancione spesso */
body.pixel-mode .game-modal__card{
  border-color: var(--accent) !important;
  border-width: 4px !important;
  background: #000 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.pixel-mode .card,
body.pixel-mode .reveal-card{
  border-color: var(--accent) !important;
  border-width: 4px !important;
}

/* Stat bar e progress bar squadrate pixel */
body.pixel-mode .stat-bar{
  height: 10px !important;
  border: 2px solid #fff !important;
  background: #000 !important;
}
body.pixel-mode .stat-bar > span{
  background: var(--accent) !important;
}
body.pixel-mode .hud-progress{
  height: 8px !important;
  border: 2px solid #fff !important;
  background: #000 !important;
}

/* Pixel mode + mobile: pill più compatti così il logo COSETTE.STUDIO non viene coperto */
@media (max-width: 720px), (orientation: portrait) and (max-width: 1200px){
  body.pixel-mode .pill{
    padding: 4px 10px !important;
    gap: 4px !important;
    border-width: 2px !important;
  }
  body.pixel-mode .pill-value{
    font-size: 13px !important;
  }
  body.pixel-mode .pill-ico{
    width: 14px !important;
    height: 14px !important;
  }
}