/* Enclavo — stile "da gioco": fondo viola notte, titoli pieni con il contorno scuro, pulsanti in rilievo che si
   schiacciano, blocchi lucidi. Nessun servizio esterno: anche i font stanno dentro il gioco (public/fonts, licenze libere).
   Font scelti da Mirko (9/10, prova 3 di anteprima/font.html): Luckiest Guy per titoli, pulsanti e numeri, Fredoka per
   i testi. (Le caselline sopra le I le ha provate e fatte togliere.) */
@font-face { font-family: 'Luckiest Guy'; src: url('/fonts/LuckiestGuy-Regular.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Fredoka'; src: url('/fonts/Fredoka.ttf') format('truetype'); font-weight: 300 900; font-display: swap; }
:root {
  --font-title: 'Luckiest Guy', system-ui, sans-serif;
  --font-text: 'Fredoka', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bg: #170b3f;
  --text: #f8f4ff;
  --muted: #bdb2e2;
  --line: rgba(255, 255, 255, .14);
  --ink: #2a0d5e;
  --gold: #ffd23f;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; min-height: 100%; background: radial-gradient(120% 60% at 50% 0%, #3a1f8f 0%, #1a0e4a 45%, #0b0626 100%) fixed, #0e0729; }
body {
  margin: 0; min-height: 100vh; color: var(--text); font: 500 16px/1.5 var(--font-text);
  background: transparent; /* lo sfondo sta su html, così la partita dei bot può stare dietro a tutto */
  -webkit-tap-highlight-color: transparent;
}
a { color: #c4a5ff; }
h1, h2, h3 { line-height: 1.2; margin: 0; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid #c4a5ff; outline-offset: 2px; }
main { max-width: 560px; margin: 0 auto; padding: 0 0 calc(28px + var(--sab)); }
.loading { padding: 80px 0; text-align: center; color: var(--muted); }
/* prima che parta il gioco (index.html): il simbolo che ondeggia, sullo sfondo della home */
.boot img { display: block; margin: 0 auto; animation: sp-bob 1.6s ease-in-out infinite; }
/* la pagina d'avvio (Mirko 11/10): il simbolo che fluttua, la scritta che cade e fa l'onda, le bandiere delle lingue */
.splash { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px 16px calc(24px + var(--sab));
  background: radial-gradient(120% 60% at 50% 0%, #3a1f8f 0%, #1a0e4a 45%, #0b0626 100%), #0e0729; transition: opacity .4s ease; }
.splash.out { opacity: 0; pointer-events: none; }
.sp-in { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; max-width: 420px; }
.splash .fl-load { margin: 0; }
.sp-name { width: min(330px, 82vw); animation: sp-bob 3.2s ease-in-out 1.6s infinite; }
.sp-ask { margin: 12px 0 0; font-weight: 800; color: #ddd6fe; text-align: center; }
.sp-langs { display: flex; gap: 16px; margin-top: 8px; }
.sp-lang { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 18px 10px; border: 3px solid rgba(255, 255, 255, .12);
  border-radius: 18px; background: rgba(8, 4, 30, .45); cursor: pointer; font: inherit; color: #fff; transition: transform .15s ease; }
.sp-lang:active { transform: scale(.94); }
.sp-lang.on { border-color: #ffd23f; background: rgba(255, 210, 63, .12); box-shadow: 0 0 0 3px rgba(255, 210, 63, .2); }
.sp-flag { display: block; width: 58px; height: 39px; border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 3px #1b0b45, 0 5px 0 #1b0b45; }
.sp-flag svg { display: block; width: 100%; height: 100%; }
.sp-lang b { font-family: var(--font-title); font-weight: 400; font-size: 19px; letter-spacing: .5px; }
.cbar { display: block; width: min(264px, 70vw); margin-top: 10px; overflow: visible; }
.cbar use { animation: cb-drop .4s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes cb-drop { from { transform: translateY(-34px); opacity: 0; } to { transform: none; opacity: 1; } }
.sp-load { margin: 0; font-size: 13px; font-weight: 700; color: var(--muted); animation: sp-blink 1.4s ease-in-out infinite; }
@keyframes sp-wave { 0%, 24%, 100% { transform: translateY(0); } 8% { transform: translateY(-9px); } 16% { transform: translateY(2px); } }
@keyframes sp-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes sp-blink { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .sp-name, .sp-name use, .sp-load, .cbar use, .boot img, .splash .fl-cube, .splash .fl-shadow { animation: none !important; } }

/* titoli e numeri "da gioco" */
.gt { font-weight: 900; letter-spacing: -.3px; color: #fff; paint-order: stroke fill; -webkit-text-stroke: 6px var(--ink);
  text-shadow: 0 4px 0 var(--ink), 0 8px 16px rgba(0, 0, 0, .35); }
/* il font dei titoli: titoli, pulsanti, numeri grossi della partita */
.gt, h1, h2, .btn, .tr-time, .tr-pct, .tr-opct, .tr-pk b, .pw b { font-family: var(--font-title); font-weight: 400; letter-spacing: .3px; }

/* pulsanti in rilievo */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 16px; padding: 12px 18px;
  font-weight: 900; color: #fff; text-decoration: none; white-space: nowrap; cursor: pointer;
  background: linear-gradient(180deg, #f472b6, #db2777); text-shadow: 0 2px 0 rgba(0, 0, 0, .2);
  box-shadow: 0 5px 0 #9d174d, 0 10px 20px rgba(0, 0, 0, .3); transition: transform .08s, box-shadow .08s, filter .15s; }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #9d174d, 0 4px 8px rgba(0, 0, 0, .3); }
.btn.big { width: 100%; padding: 16px; border-radius: 20px; font-size: 19px; box-shadow: 0 7px 0 #9d174d, 0 14px 26px rgba(0, 0, 0, .35); }
.btn.big:active { transform: translateY(6px); box-shadow: 0 1px 0 #9d174d, 0 6px 12px rgba(0, 0, 0, .35); }
.btn.soft { background: linear-gradient(180deg, #7c5cc4, #5b3fa0); box-shadow: 0 4px 0 #34205f, 0 8px 14px rgba(0, 0, 0, .25); }
.btn.soft:active { transform: translateY(3px); box-shadow: 0 1px 0 #34205f; }
.btn.ghost { background: rgba(255, 255, 255, .08); border: 2px solid rgba(255, 255, 255, .18); box-shadow: 0 4px 0 rgba(0, 0, 0, .3); text-shadow: none; }
.btn.ghost:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
.btn.wa { background: linear-gradient(180deg, #4ade80, #22c55e); box-shadow: 0 4px 0 #15803d; }
.btn.wa:active { transform: translateY(3px); box-shadow: 0 1px 0 #15803d; }
.link-btn { border: 0; background: none; padding: 4px 0; color: #c4a5ff; font-weight: 700; font-size: 14px; cursor: pointer; text-decoration: underline; }

/* le icone disegnate al posto delle emoji */
.gi { display: inline-block; width: 1.32em; height: 1.32em; vertical-align: -0.3em; object-fit: contain; pointer-events: none; user-select: none; -webkit-user-drag: none; }

/* foglio dal basso, avvisi, coriandoli */
.sheet-bg { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; background: rgba(8, 3, 20, .6); animation: fade .15s; }
.sheet { width: 100%; max-width: 560px; max-height: 88vh; overflow: auto; padding: 16px 16px calc(20px + var(--sab)); border-radius: 24px 24px 0 0;
  background: linear-gradient(180deg, #2c1868, var(--bg) 45%); border: 1px solid var(--line); border-bottom: 0; animation: up .2s ease-out; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.sheet-head h2 { font-size: 20px; font-weight: 900; }
.x { flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; font-size: 20px; cursor: pointer; color: var(--muted); background: rgba(255, 255, 255, .1); }
@keyframes fade { from { opacity: 0; } }
@keyframes up { from { transform: translateY(40px); opacity: .5; } }
/* gli avvisi: un fumetto bianco che scende dall'alto, con l'icona */
.toast { position: fixed; left: 50%; top: calc(var(--sat) + 12px); z-index: 80; display: flex; align-items: center; gap: 10px; width: max-content;
  max-width: min(360px, calc(100vw - 32px)); padding: 9px 16px 9px 10px; border-radius: 18px; background: #fff; color: var(--ink);
  border: 2.5px solid var(--ink); box-shadow: 0 5px 0 var(--ink), 0 14px 30px rgba(0, 0, 0, .45); font-size: 15px; font-weight: 900; line-height: 1.25;
  opacity: 0; transform: translate(-50%, -30px) scale(.9); transition: opacity .2s, transform .35s cubic-bezier(.2, 1.6, .4, 1); pointer-events: none; }
.toast.on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.toast img { flex: none; width: 30px; height: 30px; filter: drop-shadow(0 2px 0 rgba(27, 11, 69, .35)); }
.toast-err { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-style: normal; font-size: 19px; font-weight: 900;
  color: #fff; background: linear-gradient(180deg, #ff6b7d, #e92c49); border: 2.5px solid var(--ink); }
/* la festa (vittorie, scrigni, acquisti): un canvas sopra tutto, disegnato da celebrate in gioco.js */
.festa { position: fixed; inset: 0; z-index: 70; width: 100vw; height: 100vh; pointer-events: none; }

/* condividi */
.share-preview { display: block; width: min(56%, 220px); margin: 0 auto 14px; border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.share-wait { padding: 40px 0; text-align: center; color: var(--muted); font-weight: 700; }
.share-btns { display: grid; gap: 12px; }
.share-btns .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.share-btns .btn { width: 100%; }

/* menu: installa, piè di pagina */
.tm-install { display: flex; align-items: center; gap: 12px; margin: 16px 16px 0; padding: 12px 14px; border-radius: 18px;
  background: linear-gradient(135deg, rgba(43, 132, 244, .25), rgba(232, 64, 142, .22)); border: 2px solid rgba(255, 255, 255, .12); }
.tm-install img.mk { flex: none; width: 40px; height: 40px; }
.tm-install p { margin: 0; font-size: 13px; font-weight: 700; line-height: 1.35; color: #ece6ff; }
.tm-install b { color: #fff; }
.tm-install .btn { flex: none; padding: 8px 12px; font-size: 14px; }
.site-foot { margin: 26px 16px 0; text-align: center; font-size: 12px; color: var(--muted); }
.site-foot nav { display: flex; justify-content: center; gap: 18px; margin-bottom: 6px; }
.site-foot a { color: var(--muted); font-weight: 700; }
.site-foot p { margin: 2px 0; }

/* privacy e termini */
.legal { padding: 16px 18px 10px; line-height: 1.6; }
.legal .back { display: inline-block; margin-bottom: 14px; font-weight: 800; text-decoration: none; }
.legal h1 { font-size: 28px; font-weight: 900; margin-bottom: 2px; }
.legal h2 { font-size: 17px; font-weight: 900; margin: 22px 0 6px; }
.legal p, .legal li { font-size: 15px; }
.legal ul { padding-left: 20px; }
.legal mark { background: rgba(251, 191, 36, .25); color: #fde68a; border-radius: 4px; padding: 0 3px; }
.legal .muted { color: var(--muted); font-size: 14px; }

/* =====================================================================
   IL GIOCO: menu e partita a schermo intero
   ===================================================================== */
/* i blocchetti lucidi di menu, home e spiegazione */
.tb { display: inline-block; width: 18px; height: 18px; border-radius: 5px; background: linear-gradient(180deg, var(--t1), var(--t2));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), inset 2px 0 0 rgba(255, 255, 255, .18), inset 0 -3px 0 rgba(0, 0, 0, .3), inset -2px 0 0 rgba(0, 0, 0, .15); }
.tb.b { --t1: #66c8ff; --t2: #2b84f4; }
.tb.r { --t1: #ff7587; --t2: #e92c49; }
.tb.y { --t1: #ffd953; --t2: #f2a20c; }
.tb.g { --t1: #66e494; --t2: #1dab53; }
.tb.e { --t1: #2a2070; --t2: #231b62; box-shadow: inset 0 3px 4px rgba(0, 0, 0, .35); }
.tb.ghost { --t1: rgba(102, 200, 255, .3); --t2: rgba(43, 132, 244, .3); box-shadow: none; outline: 2px dashed rgba(160, 220, 255, .75); outline-offset: -2px; }
/* la casella del mosaico: blu con la cornice d'oro dentro */
.tb.mk { --t1: #66c8ff; --t2: #2b84f4; outline: 2.5px solid #ffd23f; outline-offset: -6px; }
.flag-ico { display: inline-block; width: 1.4em; height: 1.4em; vertical-align: -0.35em; }
.tb.gold { --t1: #fff3a8; --t2: #ffb800; animation: tb-pulse 1s ease-in-out infinite; }
@keyframes tb-pulse { 50% { filter: brightness(1.3); transform: scale(1.1); } }

/* il menu, con una partita finta di bot che gira sullo sfondo */
.tm { margin: 0; }
.tm-hero { position: relative; height: min(64vw, 320px); overflow: hidden; border-radius: 0 0 30px 30px; background: #0f0930; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.tm-demo, .tm-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tm-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(15, 9, 48, .1) 0%, rgba(15, 9, 48, .3) 40%, rgba(16, 8, 42, .96) 100%); }
.tm-head { position: absolute; left: 0; right: 0; bottom: 16px; z-index: 1; padding: 0 16px; text-align: center; }
.tm-logo { font-size: clamp(42px, 13vw, 68px); line-height: 1; letter-spacing: 1px; color: #ffd23f; -webkit-text-stroke-width: 9px; }
.tm-head p { max-width: 340px; margin: 10px auto 0; font-weight: 700; color: #ece6ff; text-shadow: 0 2px 6px rgba(0, 0, 0, .7); }
.tm-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 22px 16px 0; }
.tm-mode { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 10px 14px; border-radius: 22px; text-align: center; text-decoration: none; color: #fff;
  background: linear-gradient(180deg, #4b37b8, #33238a); border: 2px solid rgba(255, 255, 255, .14); box-shadow: 0 6px 0 #1c1258, 0 12px 22px rgba(0, 0, 0, .3);
  transition: transform .08s, box-shadow .08s; }
.tm-mode:active { transform: translateY(5px); box-shadow: 0 1px 0 #1c1258; }
.tm-mode.hot { background: linear-gradient(180deg, #f472b6, #db2777); box-shadow: 0 6px 0 #9d174d, 0 12px 22px rgba(0, 0, 0, .3); }
.tm-mode.hot:active { box-shadow: 0 1px 0 #9d174d; }
.tm-mode b { font-size: 18px; font-weight: 900; line-height: 1.15; text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.ti-vs { display: flex; align-items: center; gap: 6px; min-height: 42px; }
.ti-vs i { font-style: normal; font-weight: 900; font-size: 13px; color: #fcd34d; text-shadow: 0 2px 0 var(--ink); }
.ti-side { display: grid; grid-auto-flow: column; gap: 3px; }
.ti-grid { display: grid; grid-template-columns: repeat(2, 18px); gap: 3px; min-height: 42px; align-content: center; }
.tm-note { margin: 22px 16px 0; text-align: center; font-size: 14px; font-weight: 700; color: var(--muted); }

/* la partita: schermo intero, come un gioco dello store */
body.terr-on { overflow: hidden; overscroll-behavior: none; }
.terr { position: fixed; inset: 0; z-index: 50; overflow: hidden; padding: var(--sat) 0 var(--sab); touch-action: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  background: radial-gradient(120% 70% at 50% 0%, #3a1f8f 0%, #1a0e4a 45%, #0b0626 100%); }
.tr-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
/* congelato dal Gelo del rivale: il bordo dello schermo si copre di brina (i pezzi e i cubi di ghiaccio li disegna gioco.js) */
.terr.tr-slowed::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; animation: tr-frost-in .35s ease-out both;
  background: radial-gradient(ellipse at center, rgba(190, 235, 255, 0) 58%, rgba(190, 235, 255, .32) 100%); box-shadow: inset 0 0 70px rgba(200, 240, 255, .6); }
@keyframes tr-frost-in { from { opacity: 0; } to { opacity: 1; } }
.tr-hud { position: relative; z-index: 2; display: grid; grid-template-columns: auto 1fr auto 1fr; align-items: center; gap: 8px; max-width: 540px; margin: 0 auto; padding: 10px 14px 0; pointer-events: none; }
.tr-hud > * { pointer-events: auto; }
.tr-btn { justify-self: start; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 14px; cursor: pointer; color: #fff;
  background: linear-gradient(180deg, #6a54d8, #4a35b0); box-shadow: 0 4px 0 #2b1d78; }
.tr-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #2b1d78; }
.tr-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; }
.tr-clock { padding: 5px 16px; border-radius: 16px; background: rgba(8, 4, 30, .55); border: 2px solid rgba(255, 255, 255, .12); }
.tr-time { font-size: 26px; font-weight: 900; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 2px 0 var(--ink); }
.tr-clock.hot { border-color: #ff5d73; animation: tr-hot .5s ease-in-out infinite alternate; }
.tr-clock.hot .tr-time { color: #ff8a9a; }
@keyframes tr-hot { to { transform: scale(1.08); } }
/* tu e l'avversario più forte, faccia a faccia */
.tr-side { --tb: #2b84f4; display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px 0 6px; border-radius: 14px; line-height: 1;
  background: var(--tb); border: 2.5px solid var(--ink); box-shadow: 0 3px 0 var(--ink), inset 0 2px 0 rgba(255, 255, 255, .35); }
.tr-me { justify-self: start; }
.tr-op { justify-self: end; padding: 0 6px 0 12px; --tb: #e92c49; }
.tr-pct, .tr-opct { display: block; font-size: 22px; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; paint-order: stroke fill; -webkit-text-stroke: 5px var(--ink); }
.tr-dot { flex: none; width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--ink);
  background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .2)); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2); }
@media (max-width: 360px) { .tr-side { height: 36px; padding: 0 8px 0 4px; } .tr-op { padding: 0 4px 0 8px; } .tr-pct, .tr-opct { font-size: 18px; } .tr-dot { width: 18px; height: 18px; } .tr-time { font-size: 22px; } }
.tr-pct.up { animation: tr-up .35s ease-out; }
@keyframes tr-up { 40% { transform: scale(1.3); color: #fff; } }
.tr-bar { position: relative; z-index: 2; display: flex; height: 16px; max-width: 512px; margin: 10px auto 0; border-radius: 9px; overflow: hidden; background: #120c38;
  border: 2.5px solid var(--ink); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .5), 0 3px 0 rgba(0, 0, 0, .3); }
@media (max-width: 540px) { .tr-bar { margin-left: 14px; margin-right: 14px; } }
.tr-bar i { display: block; width: 0; transition: width .35s ease; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35); }
.tr-bar i.tr-free { background: transparent; box-shadow: none; }
/* le perk (sfida 1 contro 1): l'energia e i due pulsanti, tra la griglia e il ripiano */
.tr-perks { position: absolute; z-index: 3; display: flex; gap: 8px; }
.tr-perks[hidden] { display: none; }
.tr-en { flex: 1.15; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 0 10px 0 6px; border-radius: 14px;
  background: rgba(8, 4, 30, .55); border: 2px solid rgba(255, 255, 255, .12); }
.tr-en img { flex: none; width: 24px; height: 24px; }
.tr-en-bar { flex: 1; min-width: 20px; height: 12px; border-radius: 7px; overflow: hidden; background: #120c38; border: 2px solid var(--ink); }
.tr-en-bar i { display: block; height: 100%; width: 0; background: linear-gradient(180deg, #fff3a6, #ffcd38 55%, #e58a00); transition: width .3s ease; }
.tr-en b { min-width: 24px; text-align: right; font-size: 17px; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; paint-order: stroke fill; -webkit-text-stroke: 4px var(--ink); }
/* i pulsanti delle perk: come le carte della scelta (alone colorato dietro l'icona, costo in energia, bordo d'oro) */
.tr-pk { flex: 1; min-width: 0; position: relative; display: flex; align-items: center; gap: 4px; padding: 0 8px 0 2px; border: 2px solid rgba(255, 255, 255, .2); border-radius: 14px;
  cursor: pointer; color: #fff; font: inherit; text-align: left; background: linear-gradient(180deg, rgba(104, 82, 214, .95), rgba(48, 33, 132, .95));
  box-shadow: 0 4px 0 var(--ink), inset 0 2px 0 rgba(255, 255, 255, .22); transition: border-color .15s, filter .15s; }
.tr-pk:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink), inset 0 2px 0 rgba(255, 255, 255, .22); }
.tr-pk-ico { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: radial-gradient(circle, var(--halo) 0%, transparent 70%); }
.tr-pk-ico img { width: 28px; height: 28px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); }
.tr-pk > span:last-child { min-width: 0; line-height: 1.05; }
.tr-pk b { display: block; font-size: 14px; font-weight: 900; }
.tr-pk small { display: flex; align-items: center; gap: 2px; font-size: 11.5px; font-weight: 900; color: #ffd23f; white-space: nowrap; }
.tr-pk small img { width: 12px; height: 12px; }
.tr-pk small i { font-style: normal; }
.tr-pk.wait small { color: #c4b5fd; }
.tr-pk.wait small img { display: none; }
.tr-pk.off { filter: saturate(.3) brightness(.7); }
.tr-pk.on { border-color: #ffd23f; box-shadow: 0 0 0 2px rgba(255, 210, 63, .3), 0 4px 0 var(--ink), inset 0 2px 0 rgba(255, 255, 255, .22); }
/* telefoni stretti: l'energia più compatta, così i nomi delle perk ci stanno interi */
@media (max-width: 360px) {
  .tr-perks { gap: 6px; }
  .tr-en { flex: .75; gap: 3px; padding: 0 6px 0 3px; }
  .tr-en img { width: 18px; height: 18px; }
  .tr-en-bar { min-width: 12px; height: 10px; }
  .tr-en b { min-width: 0; font-size: 15px; }
  .tr-pk { padding-right: 5px; }
  .tr-pk-ico { width: 32px; height: 32px; }
  .tr-pk-ico img { width: 24px; height: 24px; }
  .tr-pk b { font-size: 13px; }
}
.tr-pmsg { position: absolute; left: 0; right: 0; bottom: 100%; margin: 0 0 4px; text-align: center; font-size: 12.5px; font-weight: 800; color: #fff;
  text-shadow: 0 2px 0 var(--ink); pointer-events: none; }
/* l'energia del rivale: un bollino sotto il suo riquadro */
.tr-op { position: relative; }
.tr-oen { position: absolute; right: 2px; top: calc(100% - 6px); z-index: 1; display: flex; align-items: center; gap: 2px; padding: 1px 6px 1px 3px; border-radius: 9px;
  background: #120c38; border: 2px solid var(--ink); font-size: 11.5px; font-weight: 900; line-height: 1.1; color: #fff; font-variant-numeric: tabular-nums; }
.tr-oen img { width: 13px; height: 13px; }
/* il rivale congelato dal tuo Gelo: il suo riquadro diventa di ghiaccio */
.tr-op.frozen { --tb: #8fc7ee; }
.terr.assault::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; box-shadow: inset 0 0 70px 12px rgba(255, 45, 85, .5);
  animation: tr-alarm .9s ease-in-out infinite alternate; }
@keyframes tr-alarm { from { opacity: .3; } to { opacity: 1; } }
.tr-layer { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.tr-count { position: absolute; inset: 0; display: grid; place-items: center; }
.tr-count b { font-size: 120px; line-height: 1; color: #ffd23f; -webkit-text-stroke-width: 11px; animation: tr-pop .95s cubic-bezier(.2, 1.4, .4, 1) both; }
.tr-count.go b { font-size: 100px; color: #ffd23f; } /* il VIA giallo come i numeri (Mirko 11/10: niente verde) */
@keyframes tr-pop { 0% { transform: scale(.2); opacity: 0; } 25% { transform: scale(1.15); opacity: 1; } 40% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(1.1); } }
.tr-banner { position: absolute; left: 0; right: 0; top: 34%; text-align: center; animation: tr-banner 2.3s ease both; }
.tr-banner b { display: block; font-size: clamp(34px, 10vw, 54px); line-height: 1.05; color: #ff6b7d; -webkit-text-stroke-width: 8px; }
.tr-banner small { display: inline-block; margin-top: 10px; padding: 4px 12px; border-radius: 10px; background: rgba(8, 4, 30, .75); font-weight: 800; }
@keyframes tr-banner { 0% { transform: scale(2.2); opacity: 0; } 12% { transform: scale(1); opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(-20px); } }
.tr-modal { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(6, 2, 22, .74); pointer-events: auto; animation: fade .15s; }
.tr-card { width: min(100%, 360px); display: flex; flex-direction: column; gap: 12px; padding: 22px 18px; border-radius: 26px; text-align: center;
  background: linear-gradient(180deg, #3d2aa0, #24186a); border: 2px solid rgba(255, 255, 255, .16); box-shadow: 0 8px 0 #140c44, 0 20px 40px rgba(0, 0, 0, .5); }
.tr-card h2 { margin-bottom: 4px; font-size: 34px; }
.tr-card .btn { width: 100%; }
.tut-step { display: flex; align-items: center; gap: 14px; text-align: left; }
.tut-step p { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: #e6e0ff; }
.tut-step b { color: #fff; }
.tut-art { flex: none; width: 70px; display: grid; justify-content: center; gap: 3px; }
.tut-art.a1, .tut-art.a2 { grid-template-columns: repeat(3, 18px); }
.tut-art.a3 { display: flex; height: 14px; border-radius: 7px; overflow: hidden; box-shadow: 0 0 0 2px rgba(255, 255, 255, .1); }
.tut-art.a3 i { display: block; }
.tut-art.a3 .b { width: 62%; background: #2b84f4; }
.tut-art.a3 .r { width: 38%; background: #e92c49; }
.tr-end { position: absolute; inset: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: calc(var(--sat) + 22px) 20px calc(var(--sab) + 24px); background: rgba(6, 2, 22, .84); pointer-events: auto; animation: fade .25s; }
.tr-end > * { width: min(100%, 380px); flex: none; }
.tr-kick { margin: 0; text-align: center; font-size: 13px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; color: #c9bff5; }
.tr-res { margin: 0; text-align: center; font-size: clamp(44px, 13vw, 64px); line-height: 1.05; -webkit-text-stroke-width: 9px; animation: tr-pop-in .6s cubic-bezier(.2, 1.4, .4, 1) both; }
.tr-end.win .tr-res { color: #ffd23f; }
.tr-end.lose .tr-res { color: #ff8a9a; }
@keyframes tr-pop-in { from { transform: scale(.3); opacity: 0; } }
.tr-sub { margin: 0; text-align: center; font-weight: 800; color: #e6e0ff; }
.tr-end .tr-snap { display: block; width: min(100%, 250px); margin: 4px auto; border-radius: 18px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.tr-final { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.tr-final b { font-size: 44px; color: #8fd8ff; }
.tr-final span { font-weight: 800; color: #c9bff5; }
.tr-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tr-stats span { display: flex; flex-direction: column; align-items: center; padding: 10px; border-radius: 16px; background: rgba(255, 255, 255, .07); font-size: 12px; font-weight: 700; color: #c9bff5; }
.tr-stats b { font-size: 24px; font-weight: 900; color: #fff; }
.tr-end .btn.big { margin-top: 6px; }

/* fine partita con coppe e grado, pausa, menu con il grado */
.terr-on .sheet-bg { z-index: 60; }
.tr-banner.end { animation: tr-banner-in .45s cubic-bezier(.2, 1.4, .4, 1) both; }
.tr-banner.end b { color: #ffd23f; }
@keyframes tr-banner-in { from { transform: scale(2); opacity: 0; } }
.tr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tr-row .btn { width: 100%; padding-left: 8px; padding-right: 8px; }
.tr-cups { padding: 12px 14px; border-radius: 18px; background: rgba(255, 255, 255, .07); }
.tr-cups-top { display: flex; align-items: center; gap: 8px; }
.tr-cup { font-size: 26px; line-height: 1; }
.tr-cupn { font-size: 26px; font-weight: 900; font-variant-numeric: tabular-nums; color: #fff; }
.tr-delta { padding: 2px 8px; border-radius: 10px; font-size: 15px; font-style: normal; font-weight: 900; color: #c9bff5; background: rgba(255, 255, 255, .08); }
.tr-delta.up { background: rgba(74, 222, 128, .18); color: #7dff9e; }
.tr-delta.down { background: rgba(251, 113, 133, .18); color: #ff8a9a; }
.tr-rname { margin-left: auto; font-weight: 900; color: #fcd34d; }
.tr-prog { display: block; height: 10px; margin-top: 8px; border-radius: 6px; overflow: hidden; background: #120c38; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .5); }
.tr-prog i { display: block; width: 0; height: 100%; border-radius: 6px; background: linear-gradient(180deg, #ffe066, #f59e0b); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45); transition: width .9s ease; }
.tr-next { display: block; margin-top: 6px; font-size: 12px; font-weight: 700; color: #c9bff5; }
.tr-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.tr-chip { padding: 5px 12px; border-radius: 12px; font-size: 13px; font-weight: 900; }
.tr-chip.fire { background: rgba(249, 115, 22, .2); color: #ffb37a; }
.tr-chip.gold { background: rgba(251, 191, 36, .18); color: #ffd23f; }
.tr-rankup { text-align: center; animation: tr-pop-in .6s cubic-bezier(.2, 1.4, .4, 1) both; }
.tr-rankup small { display: block; font-size: 12px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; color: #c9bff5; }
.tr-rankup b { font-size: 36px; color: #ffd23f; }
.tm-rank { display: flex; align-items: center; gap: 12px; margin: 18px 16px 0; padding: 12px 14px; border-radius: 20px; background: rgba(255, 255, 255, .07); border: 2px solid rgba(255, 255, 255, .1); }
.tm-cup { font-size: 36px; line-height: 1; }
.tm-rank b { font-size: 18px; font-weight: 900; color: #fcd34d; }
.tm-rank .tr-prog { margin-top: 6px; }
.tm-rank small { display: block; margin-top: 5px; font-size: 12px; font-weight: 700; color: var(--muted); }
.tm-wins { flex: none; text-align: center; line-height: 1; }
.tm-wins b { display: block; font-size: 24px; color: #fff; }
.tm-wins small { margin-top: 3px; }
.tm-how { display: block; margin: 16px auto 0; }
.tm-tut .tut-step + .tut-step { margin-top: 14px; }
.tr-card .tut-step + .tut-step { margin-top: 2px; }

/* fine partita compatta (tutto in uno schermo, centrata se c'è spazio) e festa del nuovo grado */
.tr-end { gap: 8px; }
.tr-end > :first-child { margin-top: auto; }
.tr-end > :last-child { margin-bottom: auto; }
.tr-end .tr-snap { width: min(100%, 190px); }
@media (min-height: 860px) { .tr-end .tr-snap { width: min(100%, 240px); } }
.tr-res { font-size: clamp(40px, 12vw, 58px); }
.tr-final b { font-size: 40px; }
.tr-chip { background: rgba(255, 255, 255, .08); color: #e6e0ff; }
.tr-rname.new { color: #fff; animation: tr-up .6s ease-out 2; }
.tr-rankup { position: absolute; left: 0; right: 0; top: 36%; z-index: 4; text-align: center; pointer-events: none; animation: tr-banner 2.6s ease both; }
.tr-rankup small { font-size: 15px; color: #fff; text-shadow: 0 2px 0 var(--ink); }
.tr-rankup b { display: block; margin-top: 6px; font-size: clamp(38px, 11vw, 56px); color: #ffd23f; -webkit-text-stroke-width: 9px; }

/* il simbolo (due blocchi sovrapposti) nel menu */
.tm-mark { display: block; width: 84px; height: 84px; margin: 0 auto 6px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); animation: tm-float 3.2s ease-in-out infinite; }
@keyframes tm-float { 50% { transform: translateY(-5px) rotate(-3deg); } }
.tm-hero { height: min(78vw, 360px); }

.grow { flex: 1; min-width: 0; }

/* la barra in alto: menu, nome del gioco, suoni */
.bar { position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 8px;
  padding: calc(var(--sat) + 8px) 12px 8px; background: rgba(23, 11, 63, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line); }
.bar-btn { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 14px; cursor: pointer; color: #fff; font-size: 18px;
  background: linear-gradient(180deg, #6a54d8, #4a35b0); box-shadow: 0 4px 0 #2b1d78; }
.bar-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #2b1d78; }
.bar-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.bar-logo { justify-self: center; display: flex; align-items: center; gap: 8px; text-decoration: none; }
.bar-logo img { width: 34px; height: 34px; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .4)); }
.bar-name .wm { height: clamp(22px, 7.4vw, 28px); width: auto; filter: drop-shadow(0 2px 0 #1b0b45); }
.bar-shop { display: grid; place-items: center; width: 44px; height: 44px; text-decoration: none; transition: transform .08s; }
.bar-shop:active { transform: translateY(3px); }
.bar-house { width: 42px; height: 42px; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .35)); }

/* il menu: titolo in chiaro in alto, la partita dei bot in una cornice */
.tm-tag { margin: 16px 20px 0; text-align: center; text-wrap: balance; font-size: 19px; font-weight: 900; line-height: 1.3; color: #fff; text-shadow: 0 2px 0 var(--ink); }
.tm-tag span { display: block; color: #fcd34d; }
.tm-hero { height: min(50vw, 240px); margin: 14px 16px 0; border-radius: 24px; border: 2px solid rgba(255, 255, 255, .14);
  box-shadow: 0 8px 0 rgba(10, 4, 34, .6), 0 18px 34px rgba(0, 0, 0, .4); }
.tm-hero::after { background: linear-gradient(180deg, rgba(15, 9, 48, 0) 55%, rgba(15, 9, 48, .55) 100%); }

/* il menu ☰ */
.drawer-bg { position: fixed; inset: 0; z-index: 55; background: rgba(8, 3, 20, .6); animation: fade .15s; }
.drawer { position: absolute; top: 0; bottom: 0; left: 0; width: min(84vw, 320px); display: flex; flex-direction: column; gap: 6px;
  padding: calc(var(--sat) + 14px) 14px calc(var(--sab) + 16px); overflow-y: auto;
  background: linear-gradient(180deg, #2c1868, #170b3f); border-right: 1px solid var(--line); box-shadow: 10px 0 40px rgba(0, 0, 0, .45); animation: slide .2s ease-out; }
@keyframes slide { from { transform: translateX(-30px); opacity: .4; } }
.drawer-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.drawer-name { flex: 1; }
.drawer-name .wm { height: 27px; width: auto; filter: drop-shadow(0 2px 0 #1b0b45); }
.drawer-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 14px; border: 0; border-radius: 16px; cursor: pointer;
  text-align: left; text-decoration: none; font-size: 17px; font-weight: 800; color: #fff; background: rgba(255, 255, 255, .06); }
.drawer-item:active { background: rgba(255, 255, 255, .14); }
/* le due pagine del menu ☰ (11/10): la seconda è Impostazioni, con "‹ Menu" per tornare */
.dr-page { display: flex; flex-direction: column; gap: 6px; }
.dr-page.from-right { animation: dr-right .2s ease-out; }
.dr-page.from-left { animation: dr-left .2s ease-out; }
@keyframes dr-right { from { opacity: 0; transform: translateX(26px); } }
@keyframes dr-left { from { opacity: 0; transform: translateX(-26px); } }
.dr-back { flex: none; display: inline-flex; align-items: center; height: 34px; padding: 0 13px 0 10px; border: 0; border-radius: 12px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 900; color: #fff; background: linear-gradient(180deg, #6a54d8, #4a35b0); box-shadow: 0 3px 0 #2b1d78;
  transition: transform .08s, box-shadow .08s; }
.dr-back:active { transform: translateY(2px); box-shadow: 0 1px 0 #2b1d78; }
.dr-title { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; font-family: var(--font-title); font-weight: 400;
  font-size: clamp(15px, 4.6vw, 19px); letter-spacing: .5px; color: #fff; text-shadow: 0 2px 0 #1b0b45; }
@media (max-width: 360px) { .dr-title .gi { display: none; } } /* (sui telefoni stretti il titolo sta, senza la rotella) */
@media (prefers-reduced-motion: reduce) { .dr-page { animation: none !important; } }
/* la lingua nel menu ☰ (11/10): la bandiera al posto dell'icona; toccandola, sotto il menu piccolino con le due lingue */
.dr-flag { display: block; flex: none; width: 27px; height: 18px; border-radius: 5px; overflow: hidden; box-shadow: 0 0 0 2px #1b0b45; }
.dr-flag svg { display: block; width: 100%; height: 100%; }
.dr-langs { display: flex; gap: 8px; padding: 8px; border-radius: 16px; background: rgba(8, 4, 30, .5); animation: dr-open .18s ease-out; }
.dr-pick { flex: 1; display: flex; align-items: center; gap: 9px; min-width: 0; padding: 11px 10px; border: 0; border-radius: 12px; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 800; color: #fff; background: rgba(255, 255, 255, .06); }
.dr-pick:active { transform: scale(.96); }
.dr-pick.on { background: rgba(255, 255, 255, .17); }
.dr-ok { width: 16px; height: 16px; margin-left: auto; fill: none; stroke: #ffd23f; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
@keyframes dr-open { from { opacity: 0; transform: translateY(-6px); } }
.drawer-foot { margin: auto 0 0; padding-top: 16px; font-size: 12px; color: var(--muted); text-align: center; }

/* la partita dei bot del menu: riquadro quadrato con la griglia intera */
.tm-hero { width: min(66vw, 260px); height: auto; aspect-ratio: 1; margin: 16px auto 0; border-radius: 28px; background: #120a36; }
.tm-hero::after { display: none; }

/* =====================================================================
   AVVENTURA: riquadro nel menu, la scalata dei livelli, livello, stelle
   ===================================================================== */
.gem-ico { display: inline-block; width: 1.4em; height: 1.4em; vertical-align: -0.35em; filter: drop-shadow(0 2px 3px rgba(255, 190, 0, .35)); }
.av-star { width: 1.2em; height: 1.2em; vertical-align: -0.25em; }
.av-star path { stroke: #1b0b45; stroke-width: 1.6; }
.av-star.on path { fill: #ffd23f; }
.av-star.off path { fill: rgba(255, 255, 255, .14); stroke: rgba(27, 11, 69, .9); }
.av-star.xs { width: 14px; height: 14px; }
.av-star.sm { width: 26px; height: 26px; }

/* nel menu */
.tm-sec { margin: 22px 18px 0; font-size: 13px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); }
.tb.p { --t1: #ff94c8; --t2: #e8408e; }
.tm-adv { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; margin: 18px 16px 0; padding: 14px 12px; border-radius: 22px;
  text-decoration: none; color: #fff; background: linear-gradient(135deg, #3d2aa0 0%, #5a2d9e 55%, #7a2f8f 100%); border: 2px solid rgba(255, 210, 63, .55);
  box-shadow: 0 6px 0 #1f1260, 0 14px 28px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .18); transition: transform .08s, box-shadow .08s; }
.tm-adv::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 130% at 0% 0%, rgba(255, 210, 63, .2), transparent 60%); }
.tm-adv:active { transform: translateY(5px); box-shadow: 0 1px 0 #1f1260; }
.ta-art { flex: none; width: 60px; height: 60px; display: grid; place-items: center; border-radius: 18px; background: linear-gradient(180deg, #2a1d78, #160d45);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .15), inset 0 -3px 0 rgba(0, 0, 0, .35), 0 0 0 2px rgba(255, 210, 63, .35); }
.ta-art .gem-ico { width: 40px; height: 40px; vertical-align: 0; animation: ta-gem 2.4s ease-in-out infinite; }
@keyframes ta-gem { 50% { transform: translateY(-3px) rotate(-6deg); } }
.tm-adv small { display: block; font-size: 12px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; color: #ffd23f; }
.tm-adv b { display: block; font-size: 22px; font-weight: 900; line-height: 1.15; text-shadow: 0 2px 0 var(--ink); }
.ta-prog { display: block; height: 8px; margin-top: 6px; border-radius: 5px; overflow: hidden; background: rgba(8, 4, 30, .55); }
.ta-prog i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(180deg, #ffe066, #f59e0b); }
.ta-stars { display: block; margin-top: 4px; font-size: 12px; font-weight: 800; color: #e9e3ff; }
.ta-go { flex: none; padding: 10px 14px; border-radius: 16px; font-weight: 900; background: linear-gradient(180deg, #f472b6, #db2777); box-shadow: 0 4px 0 #9d174d;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .2); }

/* la scalata */
.av-map { padding-bottom: 10px; }
.av-top { display: flex; align-items: center; justify-content: space-between; margin: 14px 16px 0; }
/* "‹ Menu": un pulsantino in rilievo come quelli della barra, solo più piccolo */
.av-back { display: inline-flex; align-items: center; height: 34px; padding: 0 13px 0 10px; border-radius: 12px; font-size: 14px; font-weight: 900; color: #fff;
  text-decoration: none; background: linear-gradient(180deg, #6a54d8, #4a35b0); box-shadow: 0 3px 0 #2b1d78; transition: transform .08s, box-shadow .08s; }
.av-back:active { transform: translateY(2px); box-shadow: 0 1px 0 #2b1d78; }
.av-total { padding: 5px 12px; border-radius: 14px; font-weight: 900; background: rgba(8, 4, 30, .55); box-shadow: 0 0 0 2px rgba(255, 255, 255, .12); }
.av-world { margin: 14px 16px 0; padding: 14px 16px; border-radius: 22px; text-align: center; background: linear-gradient(160deg, #4b37b8, #2a1d78);
  border: 2px solid rgba(255, 210, 63, .5); box-shadow: 0 6px 0 #140c44, 0 14px 26px rgba(0, 0, 0, .3); }
.av-world small { display: block; font-size: 12px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; color: #ffd23f; }
.av-world b { display: block; font-size: 36px; line-height: 1.05; color: #fff; }
.av-world .grow > span { display: block; margin-top: 4px; font-size: 13px; font-weight: 700; color: #ddd6fe; }
.av-world { display: flex; align-items: center; gap: 8px; }
.av-world .grow { min-width: 0; }
.av-world small svg { width: 12px; height: 12px; vertical-align: -1px; }
.av-world b { font-size: clamp(22px, 7vw, 32px); }
/* i pulsanti per cambiare mondo: in rilievo come gli altri, la freccia (o il lucchetto) giusta in mezzo */
.av-arrow { flex: none; align-self: center; display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 4px; border-radius: 14px;
  text-decoration: none; background: linear-gradient(180deg, #a184ff, #6a45e6 55%, #5032c4); border: 2px solid var(--ink);
  box-shadow: 0 4px 0 var(--ink), inset 0 2px 0 rgba(255, 255, 255, .4); transition: transform .08s, box-shadow .08s; }
.av-arrow:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink), inset 0 2px 0 rgba(255, 255, 255, .4); }
.av-arrow svg { display: block; width: 26px; height: 26px; }
.av-arrow .ch-o, .av-arrow .ch-i { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.av-arrow .ch-o { stroke: var(--ink); stroke-width: 7; }
.av-arrow .ch-i { stroke: #fff; stroke-width: 3.4; }
.av-arrow.off { background: linear-gradient(180deg, #5b4f9a, #3a2f78); box-shadow: 0 4px 0 var(--ink), inset 0 2px 0 rgba(255, 255, 255, .18); }
.av-arrow.off img { display: block; width: 24px; height: 24px; }
.av-arrow.none { visibility: hidden; }
.av-summit small a { color: #ffd23f; font-weight: 900; }
.av-trail { position: relative; margin: 12px 12px 0; border-radius: 28px; overflow: hidden; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .08);
  background:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 34px 34px,
    radial-gradient(120% 40% at 50% 0%, rgba(255, 210, 63, .18), transparent 60%),
    linear-gradient(180deg, #2a1a6e, #170d45 55%, #0f0830); }
.av-line { position: absolute; inset: 0; width: 100%; height: 100%; }
.av-line path { fill: none; stroke: rgba(255, 210, 63, .6); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 14; }
.av-summit { position: absolute; top: 22px; left: 50%; z-index: 1; width: 76%; transform: translateX(-50%); text-align: center; }
.av-crown { display: block; font-size: 42px; line-height: 1; filter: drop-shadow(0 0 14px rgba(255, 210, 63, .5)); }
.av-summit b { display: block; margin-top: 4px; font-size: 17px; font-weight: 900; color: #ffd23f; text-shadow: 0 2px 0 var(--ink); }
.av-summit small { display: block; font-size: 12px; font-weight: 700; color: var(--muted); }
/* l'aspetto di ogni mondo (mondi.js): il cielo e i disegni dietro al sentiero */
.wsky { position: absolute; left: 0; right: 0; top: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.wsky-d { position: absolute; display: block; transform: translateX(-50%); }
.wsky-d svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .3)); }
.w-drift { animation: w-drift 9s ease-in-out infinite alternate; }
.w-tw { animation: w-tw 2.2s ease-in-out infinite; }
.w-float { animation: w-float 4.5s ease-in-out infinite; }
.w-flick svg { animation: w-flick .5s ease-in-out infinite alternate; transform-origin: 50% 100%; filter: drop-shadow(0 0 10px rgba(255, 177, 61, .9)); }
.w-dash { animation: w-dash 2.6s linear infinite; }
.w-wave svg { animation: w-wave 1.6s ease-in-out infinite alternate; transform-origin: 20% 100%; }
.w-rain { animation: w-rain 1s linear infinite; }
.w-flash { animation: w-flash 4s steps(1) infinite; }
@keyframes w-drift { from { transform: translateX(-62%); } to { transform: translateX(-38%); } }
@keyframes w-tw { 0%, 100% { transform: translateX(-50%) scale(.7); opacity: .4; } 50% { transform: translateX(-50%) scale(1.15); } }
@keyframes w-float { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -8px); } }
@keyframes w-flick { from { transform: scale(.92, 1.05); } to { transform: scale(1.06, .94); } }
@keyframes w-dash { from { transform: translateX(-70%); opacity: 0; } 30% { opacity: 1; } to { transform: translateX(-20%); opacity: 0; } }
@keyframes w-wave { from { transform: skewY(-4deg); } to { transform: skewY(5deg); } }
@keyframes w-rain { from { transform: translate(-50%, -6px); } to { transform: translate(-58%, 10px); } }
@keyframes w-flash { 0%, 86%, 92%, 100% { opacity: 0; } 88%, 94% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .wsky-d, .wsky-d svg { animation: none !important; } }
/* i bivacchi, uno per mondo (Mirko 10/10): partite bonus accanto al sentiero */
.av-line .av-side { stroke-dasharray: 2 6; opacity: .7; }
.av-biv { position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 2px; transform: translate(-50%, -50%);
  padding: 0; border: 0; background: none; font: inherit; color: #fff; cursor: pointer; }
.av-biv-art { position: relative; display: block; width: 62px; filter: drop-shadow(0 0 14px rgba(255, 159, 90, .55)); animation: biv-bob 3s ease-in-out infinite; }
.av-biv-art svg { display: block; width: 100%; height: auto; }
.av-biv-fire { position: absolute; right: -8px; bottom: -2px; width: 24px; }
.av-biv-fire svg { animation: w-flick .5s ease-in-out infinite alternate; transform-origin: 50% 100%; }
.av-biv small { padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 900; letter-spacing: .04em; background: rgba(8, 4, 30, .8); color: #ffd9a8; }
.av-biv.won small { color: var(--ink); background: linear-gradient(180deg, #fff3a6, #ffc21a); }
.av-biv.lock .av-biv-art { filter: grayscale(.8) brightness(.6); animation: none; }
.av-biv.lock .av-biv-fire { display: none; }
@keyframes biv-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.biv-sub { margin: 0 0 12px; font-size: 15px; font-weight: 600; line-height: 1.4; color: #e6e0ff; }
.biv-prizes { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.biv-or { flex: none; font-style: normal; font-size: 13px; font-weight: 800; color: var(--muted); }
.biv-prize { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; border-radius: 18px; font: inherit; color: #fff; text-align: center;
  background: linear-gradient(180deg, rgba(84, 64, 196, .6), rgba(42, 29, 120, .8)); border: 2px solid rgba(255, 255, 255, .14); }
button.biv-prize { cursor: pointer; border-color: #ffd23f; box-shadow: 0 0 0 2px rgba(255, 210, 63, .25), 0 6px 0 rgba(27, 11, 69, .6); }
button.biv-prize:active { transform: translateY(3px); }
.biv-prize span { display: flex; gap: 2px; }
.biv-prize b { font-size: 15px; }
.biv-prize small { font-size: 12px; font-weight: 800; color: #ffd23f; }
.biv-prize.on { border-color: #ffd23f; }
.biv-prize.off { opacity: .45; }
/* i bivacchi (uno per mondo): la palla sulla tenda, la regola nella scheda */
.av-biv-kind { position: absolute; left: -10px; top: -8px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 15px; font-style: normal;
  background: radial-gradient(circle at 35% 30%, #fff3a6, #ffc21a 60%, #c27006); box-shadow: 0 0 0 2.5px var(--ink), 0 3px 0 rgba(27, 11, 69, .6); }
.av-biv.lock .av-biv-kind { filter: grayscale(1) brightness(.7); }
.av-biv-kind img { width: 22px; height: 22px; display: block; }
.biv-stars { display: inline-flex; gap: 1px; vertical-align: middle; }
.biv-trial { display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px; padding: 12px 14px; border-radius: 16px; background: rgba(8, 4, 30, .55); border: 2px solid rgba(255, 210, 63, .45); }
.biv-trial b { font-family: var(--font-title); font-size: 19px; font-weight: 400; letter-spacing: .02em; color: #ffd23f; }
.biv-trial span { font-size: 15px; font-weight: 700; line-height: 1.35; color: #fff; }
.biv-trial small { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: #cfc6ff; }
.biv-prize .si-cv, .biv-prize .si-cv.big { width: 64px; height: 64px; border-radius: 12px; }
.biv-prize .biv-had { display: block; font-size: 11px; font-weight: 700; color: #cfc6ff; }
/* la partita della prova: in alto l'obiettivo al posto della barra dei territori */
.terr.trial .tr-side { visibility: hidden; }
.terr.trial-ball .tr-en { visibility: hidden; }
.tr-bar.goal { height: auto; justify-content: center; padding: 5px 12px; overflow: visible; background: rgba(8, 4, 30, .78); border: 2px solid rgba(255, 210, 63, .55); border-radius: 14px; }
.tr-goal { font-family: var(--font-title); font-size: 20px; font-weight: 400; letter-spacing: .03em; color: #fff; paint-order: stroke fill; -webkit-text-stroke: 4px var(--ink); }
/* il premio della vetta (Mirko 10/10): si vede prima di arrivarci */
.av-prize { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 8px auto 6px; }
.av-prize .si-cv, .av-prize .si-cv.big { width: 76px; height: 76px; border-radius: 14px; box-shadow: 0 0 0 2px rgba(255, 210, 63, .55), 0 0 22px rgba(255, 210, 63, .35); }
.av-prize small { color: #e6e0ff; }
.av-prize small b { display: inline; margin: 0; font-size: inherit; color: #fff; text-shadow: none; }
.av-prize.won .si-cv { box-shadow: 0 0 0 3px #ffd23f, 0 0 26px rgba(255, 210, 63, .6); }
.sum-prize { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 6px 0 14px; text-align: center; }
.sum-prize .si-cv, .sum-prize .si-cv.big { width: 140px; height: 140px; border-radius: 22px; box-shadow: 0 0 0 3px #ffd23f, 0 0 34px rgba(255, 210, 63, .5); }
.sum-prize p { margin: 0; font-size: 17px; font-weight: 700; }
.sum-prize small { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.av-node { position: absolute; z-index: 1; width: 68px; height: 68px; transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 20px;
  text-decoration: none; color: #fff; border: 3px solid #1b0b45; background: linear-gradient(180deg, #7b6ad6, #4b37a8);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35), inset 0 -5px 0 rgba(0, 0, 0, .25), 0 6px 0 #1b0b45, 0 12px 18px rgba(0, 0, 0, .45); }
.av-node b { font-size: 28px; font-weight: 900; line-height: 1; paint-order: stroke fill; -webkit-text-stroke: 5px #1b0b45; }
.av-node:active { transform: translate(-50%, calc(-50% + 4px)); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35), 0 2px 0 #1b0b45; }
.av-node.done { background: linear-gradient(180deg, #ffe680, #f5a50f); }
.av-node.cur { background: linear-gradient(180deg, #ff8ac4, #e0367f); animation: av-pulse 1.2s ease-in-out infinite; }
@keyframes av-pulse { 50% { box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35), inset 0 -5px 0 rgba(0, 0, 0, .25), 0 6px 0 #1b0b45, 0 0 0 10px rgba(244, 114, 182, .25); } }
.av-node.lock { background: linear-gradient(180deg, #4b4566, #2e2a44); color: rgba(255, 255, 255, .5); }
.av-node.lock b { font-size: 22px; -webkit-text-stroke-width: 4px; }
.av-node.lock i { position: absolute; right: -8px; bottom: -8px; font-style: normal; font-size: 16px; }
.av-nstars { position: absolute; bottom: -21px; left: 50%; transform: translateX(-50%); display: flex; gap: 1px; white-space: nowrap; }
.av-play { position: absolute; top: -27px; left: 50%; transform: translateX(-50%); padding: 3px 10px; border-radius: 10px; font-size: 12px; font-weight: 900;
  background: #fff; color: #db2777; box-shadow: 0 3px 0 rgba(0, 0, 0, .3); }

/* il livello */
.av-hud .av-goal { justify-self: center; display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: 18px;
  background: rgba(8, 4, 30, .6); border: 2px solid rgba(255, 210, 63, .45); }
.av-goal .gem-ico { width: 30px; height: 30px; vertical-align: 0; }
.av-goal .tb { width: 22px; height: 22px; }
.av-gnum { font-size: 24px; font-weight: 900; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 2px 0 var(--ink); }
.av-goal.up { animation: tr-up .4s ease-out; }
.av-moves { justify-self: end; text-align: center; line-height: 1; padding: 6px 12px; border-radius: 16px; background: rgba(8, 4, 30, .6); border: 2px solid rgba(255, 255, 255, .12); }
.av-mnum { display: block; font-size: 26px; font-weight: 900; color: #8fd8ff; text-shadow: 0 2px 0 var(--ink); }
.av-mnum.up { animation: tr-up .3s ease-out; }
.av-moves small { display: block; margin-top: 2px; font-size: 10px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; color: #c9bff5; }
.av-moves.hot { border-color: #ff5d73; animation: tr-hot .5s ease-in-out infinite alternate; }
.av-moves.hot .av-mnum { color: #ff8a9a; }
.av-intro .tr-kick { margin-bottom: 2px; }
.av-goal-big { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px; border-radius: 18px; background: rgba(8, 4, 30, .45);
  font-size: 18px; font-weight: 800; text-align: left; }
.av-goal-big .gem-ico, .av-goal-big .flag-ico { width: 46px; height: 46px; flex: none; vertical-align: 0; }
.av-goal-big .tb { width: 34px; height: 34px; flex: none; }
.av-goal-big .tb.mk { outline-offset: -8px; outline-width: 3px; }
.av-goal-big b { color: #ffd23f; }
.av-goal .flag-ico { width: 30px; height: 30px; vertical-align: 0; }
/* la regola del mondo, prima di giocare */
.av-rules { margin: 0; padding: 10px 12px 10px 30px; border-radius: 14px; background: rgba(255, 210, 63, .1); border: 2px solid rgba(255, 210, 63, .35);
  font-size: 14px; font-weight: 700; line-height: 1.35; text-align: left; color: #fff3c4; }
.av-rules li + li { margin-top: 4px; }
.av-tip { margin: 0; font-size: 14px; font-weight: 600; color: #ddd6fe; text-align: center; }
.av-intro-stars { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.av-intro-stars small { font-size: 12px; font-weight: 700; color: var(--muted); }
.av-stars-big { display: flex; justify-content: center; align-items: flex-end; gap: 6px; }
.av-sb { display: block; animation: av-star-in .55s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: var(--d); }
.av-sb .av-star { width: 74px; height: 74px; }
.av-sb:nth-child(2) .av-star { width: 92px; height: 92px; }
.av-sb .av-star.on path { filter: drop-shadow(0 0 10px rgba(255, 210, 63, .6)); }
@keyframes av-star-in { from { transform: scale(0) rotate(-40deg); opacity: 0; } }
.av-end .tr-res { font-size: clamp(38px, 11vw, 54px); }
.av-srow { display: flex; gap: 4px; }

/* nel menu la partita dei bot fa da sfondo a tutto schermo: ferma dietro mentre scorri, un po' sfumata */
.bg-demo { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .34;
  -webkit-mask-image: radial-gradient(130% 95% at 50% 45%, #000 45%, rgba(0, 0, 0, .55) 80%, rgba(0, 0, 0, .2) 100%);
  mask-image: radial-gradient(130% 95% at 50% 45%, #000 45%, rgba(0, 0, 0, .55) 80%, rgba(0, 0, 0, .2) 100%); }
.bg-demo:empty { display: none; }
.bg-demo .tm-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tm-tag { margin-top: 26px; margin-bottom: 6px; font-size: 21px; }

/* =====================================================================
   PROFILO: schermata iniziale, blocchi avatar, scheda del profilo, pareri
   ===================================================================== */
.stack { display: flex; flex-direction: column; gap: 12px; }
.f { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 800; color: #e6e0ff; }
.f input, .f textarea, .stack > input { width: 100%; padding: 13px 14px; border-radius: 14px; border: 2px solid rgba(255, 255, 255, .14); outline: none;
  background: rgba(8, 4, 30, .55); color: #fff; font-size: 16px; font-weight: 700; resize: vertical; }
.f input:focus, .f textarea:focus, .stack > input:focus { border-color: #c4a5ff; }
.check { display: flex; align-items: center; gap: 10px; font-weight: 800; color: #e6e0ff; cursor: pointer; }
.check input { flex: none; width: 22px; height: 22px; accent-color: #db2777; }
.form-error { margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(251, 113, 133, .16); color: #ffb4c0; font-weight: 800; font-size: 14px; }
.form-error.ok { background: rgba(75, 167, 255, .16); color: #bfe3ff; }
.fr-add + .form-error { margin: 8px 16px 0; animation: form-in .22s ease-out both; }
@keyframes form-in { from { opacity: 0; transform: translateY(-6px); } }
form.bad input { border-color: #ff6b7d; animation: form-shake .35s ease-in-out; }
@keyframes form-shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
.btn.danger { background: linear-gradient(180deg, #fb7185, #e11d48); box-shadow: 0 4px 0 #9f1239; }
.btn.danger:active { transform: translateY(3px); box-shadow: 0 1px 0 #9f1239; }
.btn:disabled { opacity: .6; cursor: default; }
.sheet .stack .btn, .sheet form .btn { width: 100%; }

/* il tuo blocco */
.avb { --t1: #66c8ff; --t2: #2b84f4; flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px;
  cursor: pointer; color: #fff; font-size: 22px; font-weight: 900; line-height: 1;
  /* la lettera come i titoli del gioco: bianca con il contorno scuro, si legge su tutti i colori (anche il bianco e il giallo) */
  paint-order: stroke fill; -webkit-text-stroke: .2em var(--ink); text-shadow: 0 .1em 0 var(--ink);
  background: linear-gradient(180deg, var(--t1), var(--t2));
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45), inset 2px 0 0 rgba(255, 255, 255, .15), inset 0 -4px 0 rgba(0, 0, 0, .28), 0 3px 0 rgba(27, 11, 69, .6); }
.avb.a1 { --t1: #ff94c8; --t2: #e8408e; }
.avb.a2 { --t1: #ffe066; --t2: #f5a50f; }
.avb.a3 { --t1: #b39dff; --t2: #7c3aed; }
.avb.a4 { --t1: #ffb36b; --t2: #f97316; }
.avb.a5 { --t1: #7ff0ff; --t2: #06b6d4; }
.avb.a6 { --t1: #ff7587; --t2: #e92c49; }
.avb.a7 { --t1: #eef2f7; --t2: #94a3b8; }
.avb.md { width: 52px; height: 52px; border-radius: 14px; font-size: 26px; }
.avb.lg { width: 72px; height: 72px; border-radius: 18px; font-size: 36px; }
.av-pick { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
/* nella scelta: tasselli come i blocchi della griglia (paintBlock in gioco.js): bordo smussato chiaro in alto, scuro in
   basso e a destra, la faccia lucida con il riflesso; senza lettere (scelta di Mirko 9/10) */
.av-pick .avb { position: relative; box-sizing: border-box; width: 100%; height: auto; aspect-ratio: 1; font-size: 0; transition: transform .1s;
  border: 5px solid; border-color: rgba(255, 255, 255, .55) rgba(0, 0, 0, .3) rgba(0, 0, 0, .5) rgba(255, 255, 255, .22); border-radius: 7px;
  background-origin: border-box; box-shadow: 0 3px 0 rgba(27, 11, 69, .6); }
.av-pick .avb::before { content: ''; position: absolute; left: 7%; top: 6%; width: 54%; height: 20%; border-radius: 3px; background: rgba(255, 255, 255, .36); }
.av-pick .avb.on { outline: 3px solid #fff; outline-offset: 2px; transform: translateY(-3px); }

/* la schermata iniziale */
body.gate .bar { display: none; }
.gate { min-height: 100vh; padding: calc(var(--sat) + 26px) 18px 10px; text-align: center; }
.gate-mark { width: 96px; height: 96px; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .5)); animation: tm-float 3.2s ease-in-out infinite; }
.gate-logo { margin: 8px 0 0; }
.gate-logo .wm { width: min(290px, 76vw); margin: 0 auto; }
.gate-sub { margin: 10px 0 18px; font-weight: 800; color: #ece6ff; text-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.gate-card { max-width: 420px; margin: 0 auto; padding: 14px 16px 16px; border-radius: 26px; text-align: left; background: rgba(24, 12, 70, .86);
  border: 2px solid rgba(255, 255, 255, .14); box-shadow: 0 8px 0 #140c44, 0 20px 40px rgba(0, 0, 0, .45); }
.gate-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 14px; padding: 5px; border-radius: 16px; background: rgba(8, 4, 30, .6); }
.gate-tabs button { padding: 10px; border: 0; border-radius: 12px; cursor: pointer; font-weight: 900; color: #c9bff5; background: none; }
.gate-tabs button.on { color: #fff; background: linear-gradient(180deg, #6a54d8, #4a35b0); box-shadow: 0 3px 0 #2b1d78; }
.gate-form { display: flex; flex-direction: column; gap: 14px; }
.gate-form .link-btn { align-self: center; }
.gate-note { margin: 0; font-size: 13px; font-weight: 600; text-align: center; color: var(--muted); }

/* il profilo nel menu e nella sua scheda */
.tm-rank.me { cursor: pointer; }
.tm-grade { margin-left: 8px; padding: 2px 8px; border-radius: 8px; vertical-align: 2px; font-size: 12px; font-style: normal; font-weight: 900; color: #4a2a00;
  background: linear-gradient(180deg, #ffe066, #f59e0b); }
.tm-join { display: flex; align-items: center; gap: 10px; margin: 12px 16px 0; padding: 12px 14px; border-radius: 16px; text-decoration: none; font-weight: 900;
  color: #fde68a; background: rgba(255, 210, 63, .08); border: 2px dashed rgba(255, 210, 63, .5); }
.tm-join span { flex: 1; }
.pf-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.pf-head b { display: block; font-size: 26px; }
.pf-head small { color: var(--muted); font-weight: 700; }
.pf-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.pf-stats span { display: flex; flex-direction: column; align-items: center; padding: 10px 4px; border-radius: 14px; background: rgba(255, 255, 255, .06);
  font-size: 11px; font-weight: 700; text-align: center; color: #c9bff5; }
.pf-stats b { font-size: 15px; font-weight: 900; color: #fff; }
.pf-note { margin: 12px 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.pf-del { margin-top: 16px; }
.pf-del summary { cursor: pointer; font-weight: 800; color: #ff8a9a; }
.pf-del form { margin-top: 10px; }
.pf-del p { margin: 0; font-size: 14px; color: #e6e0ff; }
.rec-intro { margin: 0; color: #e6e0ff; }
.rec-code { margin: 14px 0; padding: 16px; border-radius: 16px; text-align: center; letter-spacing: 2px; user-select: all; -webkit-user-select: all;
  font: 900 26px/1 ui-monospace, Menlo, Consolas, monospace; color: var(--gold); background: rgba(8, 4, 30, .6); border: 2px dashed rgba(255, 210, 63, .5); }

/* i pareri */
.fb-intro { margin: 0; font-weight: 700; color: #e6e0ff; }
.fb-stars { display: flex; justify-content: center; gap: 6px; }
.fb-star { padding: 2px; border: 0; background: none; cursor: pointer; }
.fb-star .av-star { width: 42px; height: 42px; }

/* =====================================================================
   AMICI: riquadro nel menu, lista, sfida, invito in arrivo, stanza
   ===================================================================== */
.tm-friends { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; margin: 18px 16px 0; padding: 14px 12px; border-radius: 22px;
  text-decoration: none; color: #fff; background: linear-gradient(135deg, #2b84f4 0%, #5a3fc0 50%, #e8408e 100%); border: 2px solid rgba(255, 255, 255, .22);
  box-shadow: 0 6px 0 #241466, 0 14px 28px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform .08s, box-shadow .08s; }
.tm-friends:active { transform: translateY(5px); box-shadow: 0 1px 0 #241466; }
.tm-friends small { display: block; font-size: 12px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; color: #fff7c2; }
.tm-friends b { display: block; font-size: 22px; font-weight: 900; line-height: 1.15; text-shadow: 0 2px 0 var(--ink); }
.tf-meta { display: block; margin-top: 3px; font-size: 13px; font-weight: 700; color: #f3edff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-friends .grow { min-width: 0; }
.tf-meta.live { color: #fff; }
.tf-meta .dot { width: 8px; height: 8px; margin-right: 2px; vertical-align: 1px; }
.tm-friends { flex-wrap: wrap; row-gap: 10px; }
.tf-online { flex: 1 0 100%; display: flex; align-items: center; gap: 8px; min-width: 0; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .22); }
.tf-online:empty { display: none; }
.tf-chip { flex: 0 1 auto; display: flex; align-items: center; gap: 7px; min-width: 0; padding: 3px 11px 3px 3px; border-radius: 999px;
  background: rgba(27, 11, 69, .38); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.tf-chip .avb { position: relative; width: 26px; height: 26px; border-radius: 8px; font-size: 14px; cursor: inherit;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -3px 0 rgba(0, 0, 0, .28); }
.tf-chip .avb::after { content: ''; position: absolute; right: -3px; bottom: -3px; width: 10px; height: 10px; border-radius: 50%;
  background: #4ade80; border: 2px solid #2a1a6e; }
.tf-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; font-weight: 900; color: #fff; }
.tf-more { flex: none; font-size: 14px; font-weight: 900; color: #fff7c2; }
.dr-on { margin-left: auto; font-size: 13px; font-weight: 800; color: #c9f7d8; white-space: nowrap; }
.dr-on .dot { width: 8px; height: 8px; margin-right: 3px; vertical-align: 1px; }
.tf-art { flex: none; display: flex; align-items: center; gap: 4px; padding: 10px 8px; border-radius: 16px; background: rgba(8, 4, 30, .4); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35); }
.tf-art .tb { width: 18px; height: 18px; }
.tf-art i { font-style: normal; font-size: 11px; font-weight: 900; color: #fcd34d; text-shadow: 0 2px 0 var(--ink); }
.tf-art.big { padding: 14px 12px; gap: 8px; }
.tf-art.big .tb { width: 30px; height: 30px; }
.tf-art.big i { font-size: 16px; }

.fr { padding-bottom: 10px; }
.fr-title { margin: 6px 0 0; text-align: center; font-size: 40px; color: var(--gold); -webkit-text-stroke-width: 8px; }
.fr-add { display: flex; gap: 8px; margin: 16px 16px 0; }
.fr-add input { flex: 1; min-width: 0; padding: 13px 14px; border-radius: 14px; border: 2px solid rgba(255, 255, 255, .14); outline: none;
  background: rgba(8, 4, 30, .55); color: #fff; font-size: 16px; font-weight: 700; }
.fr-add input:focus { border-color: #c4a5ff; }
.fr-me { margin: 10px 18px 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.fr-me b { color: #fff; }
.fr-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 16px 0; }
.fr-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 18px; background: rgba(24, 12, 70, .78); border: 2px solid rgba(255, 255, 255, .1); }
.fr-row.on { border-color: rgba(74, 222, 128, .45); }
.fr-row.hot { border-color: rgba(255, 210, 63, .7); background: rgba(80, 40, 10, .45); }
.fr-row b { display: block; font-size: 17px; font-weight: 900; color: #fff; }
.fr-row small { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.fr-row .btn { flex: none; padding: 9px 14px; font-size: 15px; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 8px #4ade80; }
.fr-empty, .fr-note { margin: 12px 18px 0; font-size: 14px; font-weight: 600; color: var(--muted); }
.fr-need { margin: 20px 16px 0; padding: 22px 16px; border-radius: 24px; text-align: center; background: rgba(24, 12, 70, .78); border: 2px solid rgba(255, 255, 255, .12); }
.fr-need .tf-art { display: inline-flex; }
.fr-need h1 { margin: 14px 0 8px; font-size: 28px; color: var(--gold); }
.fr-need p { margin: 0 0 16px; font-weight: 600; color: #e6e0ff; }

.ch-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ch-mode { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border-radius: 18px; cursor: pointer; color: #fff;
  background: rgba(255, 255, 255, .06); border: 2px solid rgba(255, 255, 255, .12); }
.ch-mode b { font-size: 15px; font-weight: 900; }
.ch-mode.on { background: linear-gradient(180deg, #6a54d8, #4a35b0); border-color: #c4a5ff; box-shadow: 0 4px 0 #2b1d78; }
.ch-mode .ti-vs, .ch-mode .ti-grid { min-height: 36px; }
.ch-sub { margin: 14px 0 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.ch-pick { cursor: pointer; margin: 0; }
.ch-pick input { width: 24px; height: 24px; accent-color: #db2777; }
.sheet .fr-list { margin: 10px 0 0; }
.sheet > .btn.big { width: 100%; margin-top: 16px; }
.ch-remove { display: block; margin: 14px auto 0; color: #ff8a9a; }

.inv-pop { position: fixed; left: 50%; top: calc(var(--sat) + 12px); z-index: 75; transform: translateX(-50%); width: min(calc(100vw - 24px), 440px);
  display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 20px; color: #fff;
  background: linear-gradient(135deg, #3d2aa0, #6a2f9e); border: 2px solid rgba(255, 210, 63, .7); box-shadow: 0 8px 0 #1f1260, 0 18px 40px rgba(0, 0, 0, .55);
  animation: inv-in .45s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes inv-in { from { transform: translate(-50%, -140%); } }
.inv-pop b { display: block; font-size: 17px; font-weight: 900; }
.inv-pop small { font-size: 12px; font-weight: 700; color: #e6e0ff; }
.inv-pop .btn { flex: none; padding: 10px 14px; }

.lb { padding: 16px 16px 10px; text-align: center; }
.lb-kick { margin: 6px 0 0; font-size: 13px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; color: #c9bff5; }
.lb-title { margin: 4px 0 16px; font-size: clamp(36px, 11vw, 52px); color: var(--gold); -webkit-text-stroke-width: 8px; }
.lb-teams { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.lb-team { padding: 12px; border-radius: 20px; background: rgba(24, 12, 70, .8); border: 3px solid var(--tc); box-shadow: 0 5px 0 rgba(0, 0, 0, .35); }
.lb-team h3 { margin: 0 0 8px; font-size: 13px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; color: var(--tc); filter: brightness(1.4); }
.lb-seat { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; border-radius: 14px; text-align: left; color: #fff; background: rgba(255, 255, 255, .05); font: inherit; }
.lb-seat + .lb-seat { margin-top: 6px; }
.lb-seat span { display: flex; flex-direction: column; font-weight: 900; }
/* il blocchetto del profilo resta un quadrato con la lettera al centro (la regola sopra è per il nome, non per lui) */
.lb-seat .avb, .lb-inv .avb, .lb-seat .lb-bot { display: inline-grid; place-items: center; flex-direction: initial; gap: 0; }
.lb-seat em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--muted); }
.lb-seat.free { opacity: .75; border: 2px dashed rgba(255, 255, 255, .2); background: none; }
button.lb-seat.free { cursor: pointer; opacity: 1; }
.lb-bot { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; font-size: 13px; font-weight: 900; color: var(--muted); background: rgba(255, 255, 255, .08); }
.lb-vs { align-self: center; font-size: 18px; font-weight: 900; color: #fcd34d; text-shadow: 0 2px 0 var(--ink); }
.lb-inv { display: flex; flex-direction: column; gap: 6px; margin: 14px 0 0; text-align: left; }
.lb-inv span { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #e6e0ff; }
.lb-inv .avb { width: 26px; height: 26px; font-size: 13px; border-radius: 8px; }
.lb-inv .no { opacity: .55; text-decoration: line-through; }
.lb .btn.big { margin-top: 18px; }
.lb-note, .lb-wait { margin: 10px 0 0; font-size: 14px; font-weight: 700; color: var(--muted); }
.lb-wait { color: #fde68a; animation: tr-alarm 1.2s ease-in-out infinite alternate; }
.lb-leave { display: block; margin: 16px auto 0; }
.tr-wait { margin: 0; text-align: center; font-weight: 700; color: #fde68a; }

/* =====================================================================
   NEGOZIO: lingotti, riquadro nel menu, pagina, bonus del giorno, blocchetti del profilo comprati
   ===================================================================== */
.dr-coins { color: #ffd23f; }
.coin-gain { margin: 4px 0 10px; font-size: 20px; font-weight: 900; color: #ffd23f; text-shadow: 0 2px 0 var(--ink); }
.coin-gain img, .shop-item .btn img, .db-note img { width: 1.15em; height: 1.15em; vertical-align: -.22em; }

.shop { padding-bottom: 32px; }
.shop-title { margin: 12px 16px 0; text-align: center; font-size: 38px; }
.shop-how { margin: 8px 18px 0; text-align: center; font-size: 13px; font-weight: 700; color: #ddd6fe; line-height: 1.4; }
/* nel negozio: i lingotti senza riquadro, allineati alla casetta della barra (stessi margini) e della sua grandezza */
.shop .av-top { margin: 10px 12px 0; }
.shop-coins { display: flex; align-items: center; gap: 6px; font-size: 23px; font-weight: 900; line-height: 1; color: #ffd23f; text-shadow: 0 2px 0 var(--ink); font-variant-numeric: tabular-nums; }
.shop-coins img { width: 32px; height: 32px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); }
.shop-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; margin: 16px 16px 0; padding: 5px; border-radius: 18px; background: rgba(8, 4, 30, .55); }
.shop-tab { min-width: 0; padding: 10px 1px; border: 0; border-radius: 13px; font: inherit; font-size: 12.5px; font-weight: 900; color: #c4b5fd; background: transparent; cursor: pointer; }
.shop-tab.on { color: #fff; background: linear-gradient(180deg, #7c5cff, #5a3fd6); box-shadow: 0 3px 0 #2b1d7a; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 16px 16px 0; }
.shop-item { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 10px; border-radius: 20px; text-align: center;
  background: linear-gradient(180deg, rgba(84, 64, 196, .55), rgba(42, 29, 120, .7)); border: 2px solid rgba(255, 255, 255, .12); }
.shop-item.use { border-color: #ffd23f; box-shadow: 0 0 0 2px rgba(255, 210, 63, .25), 0 8px 22px rgba(0, 0, 0, .3); }
.shop-item > b { font-size: 17px; font-weight: 900; }
.si-prev { display: grid; place-items: center; width: 96px; height: 96px; }
.si-cv { width: 96px; height: 96px; }
/* le palle: anteprima più grande, è una scena in movimento */
.si-prev:has(.si-cv.big) { width: 128px; height: 128px; }
.si-cv.big { width: 128px; height: 128px; }
.si-prev .avb.lg { cursor: default; }
.si-state { padding: 8px 14px; border-radius: 14px; font-weight: 900; color: #1b0b45; background: #ffd23f; }
.shop-item .btn { width: 100%; padding: 9px 10px; }
.buy-line { margin: 4px 0 14px; text-align: center; font-size: 17px; font-weight: 700; }
.buy-line img { width: 1.1em; height: 1.1em; vertical-align: -.2em; }
.pf-shop { display: block; margin: 8px 0 0; text-align: center; }

.db-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin: 6px 0 12px; }
.db-day { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; border-radius: 14px; background: rgba(8, 4, 30, .45);
  border: 2px solid transparent; opacity: .8; }
.db-day small { font-size: 9px; font-weight: 900; text-transform: uppercase; color: #c4b5fd; }
.db-day b { font-size: 15px; font-weight: 900; }
.db-day.done { opacity: .45; }
.db-day.got { position: relative; animation: db-got .55s cubic-bezier(.2, 1.6, .4, 1) both; border-color: #ffd23f; background: linear-gradient(180deg, #fff3a6, #ffc21a); color: var(--ink); }
.db-day.got small { color: var(--ink); }
.db-day.got::after { content: ''; position: absolute; top: -8px; right: -6px; width: 22px; height: 22px; background: url(/gi/check.svg) center / contain no-repeat; }
@keyframes db-got { 0% { transform: scale(1); } 45% { transform: scale(1.25) rotate(-4deg); } 100% { transform: scale(1.08); } }
.btn.got { background: linear-gradient(180deg, #ffe066, #f5a700); color: var(--ink); box-shadow: 0 5px 0 #b45f00; }
.btn.got img { vertical-align: -6px; }
.db-day.now { opacity: 1; border-color: #ffd23f; background: linear-gradient(180deg, rgba(255, 210, 63, .25), rgba(255, 157, 0, .12)); animation: ta-gem 1.6s ease-in-out infinite; }
.db-note { margin: 0 0 14px; text-align: center; font-weight: 700; color: #ddd6fe; }

/* i blocchetti del profilo del negozio (gli amici li vedono): disegni al posto del colore pieno */
.avb.a8 { background: repeating-linear-gradient(135deg, #66c8ff 0 7px, #2b84f4 7px 14px); }
.avb.a9 { background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .6) 0 2.5px, transparent 3px) 0 0 / 11px 11px, linear-gradient(180deg, #ff94c8, #e8408e); }
.avb.a10 { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.2 6.8.7-5.1 4.6 1.5 6.7L12 16.8 5.9 20.2l1.5-6.7L2.3 8.9l6.8-.7z' fill='%23ffd23f' opacity='.55'/%3E%3C/svg%3E") center / 92% no-repeat, linear-gradient(180deg, #b39dff, #6a2fd6); }
.avb.a11 { background: linear-gradient(135deg, #ff5a5a, #ffb13d, #ffe14d, #4dd2ff, #7c5cff, #ff5ab4); }
.avb.a12 { background: radial-gradient(circle at 22% 30%, #fff 0 1px, transparent 1.5px), radial-gradient(circle at 72% 22%, #fff 0 1.2px, transparent 1.8px),
  radial-gradient(circle at 60% 74%, #fff 0 .9px, transparent 1.4px), radial-gradient(circle at 30% 80%, #fff 0 .8px, transparent 1.3px), linear-gradient(180deg, #2a2070, #0b0626); }
.avb.a13 { background: linear-gradient(180deg, #ffd23f, #ff6a00 55%, #c4002b); }
.avb.a14 { background: linear-gradient(160deg, #ffffff, #bfeeff 35%, #5fb8f0 75%, #2f74c9); }
.avb.a15 { background: linear-gradient(160deg, #fff7c2, #ffd23f 40%, #e09b00 75%, #b06d00); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .6), inset 0 -4px 0 rgba(0, 0, 0, .25), 0 0 12px rgba(255, 210, 63, .6), 0 3px 0 rgba(27, 11, 69, .6); }
.avb.a16 { background: repeating-conic-gradient(#b39dff 0 25%, #6d28d9 0 50%) 0 0 / 14px 14px; }
.avb.a17 { background: repeating-linear-gradient(115deg, #ffb13d 0 7px, #ff8a00 7px 9px, #1b0b45 9px 12px); }
.avb.a18 { background: radial-gradient(circle at 70% 30%, rgba(255, 90, 180, .65), transparent 48%), radial-gradient(circle at 25% 70%, #fff 0 1px, transparent 1.6px),
  radial-gradient(circle at 80% 78%, #fff 0 1px, transparent 1.5px), radial-gradient(circle at 40% 22%, #fff 0 .8px, transparent 1.3px), linear-gradient(180deg, #2a1070, #0b0626); }
.avb.a19 { background: repeating-linear-gradient(45deg, #ff94c8 0 6px, #ffffff 6px 12px); }
.avb.a20 { background: radial-gradient(circle at 50% 115%, #ffd23f, #ff6a00 38%, #b3001b 72%, #3a0008); }
.avb.a21 { background: radial-gradient(120% 60% at 50% 100%, #0b4f9c 0 40%, transparent 41%), radial-gradient(120% 60% at 50% 70%, #06b6d4 0 40%, transparent 41%), linear-gradient(180deg, #b8f6ff, #4fd1f0); }
.avb.a22 { background: repeating-linear-gradient(60deg, #ffffff 0 6px, #1b0b45 6px 11px); }
.avb.a23 { background: linear-gradient(135deg, #e0fbff, #7fd8ff 40%, #ffffff 55%, #5fb8f0 80%); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .7), inset 0 -4px 0 rgba(0, 0, 0, .2), 0 0 12px rgba(127, 216, 255, .7), 0 3px 0 rgba(27, 11, 69, .6); }

/* scrigni di benvenuto */
.tm-chest { display: flex; align-items: center; gap: 12px; width: calc(100% - 32px); margin: 14px 16px 0; padding: 10px 12px; border: 2px solid rgba(255, 210, 63, .35);
  border-radius: 20px; font: inherit; color: #fff; text-align: left; text-decoration: none; background: linear-gradient(135deg, rgba(122, 47, 143, .75), rgba(42, 29, 120, .75)); }
.tm-chest b { display: block; font-size: 16px; font-weight: 900; }
.tm-chest small { display: block; font-size: 12px; font-weight: 700; color: #ddd6fe; }
.tm-chest[data-act] { cursor: pointer; }
.tm-chest .grow { flex: 1; }
.tm-chest > b { flex: none; white-space: nowrap; }
.tm-chest img { flex: none; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .35)); }
.tm-chest.ready { cursor: pointer; border-color: #ffd23f; box-shadow: 0 5px 0 #2b1270, 0 0 18px rgba(255, 210, 63, .35); }
.tm-chest.ready img { animation: chest-wobble 1.4s ease-in-out infinite; }
.ch-mini { flex: none; padding: 5px 10px; border-radius: 12px; font-weight: 900; color: #ffd23f; background: rgba(8, 4, 30, .55); }
.ch-track { display: flex; justify-content: center; gap: 6px; margin: 4px 0 6px; }
.ch-dot { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; font-weight: 900; font-size: 14px; color: #c4b5fd;
  background: rgba(8, 4, 30, .5); border: 2px solid transparent; }
.ch-dot.done { color: #1b0b45; background: #ffd23f; }
.ch-dot.now { color: #fff; border-color: #ffd23f; }
.chest { display: grid; place-items: center; height: 170px; }
.chest img { width: 150px; height: 150px; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .45)); animation: chest-wobble 1.4s ease-in-out infinite; }
.chest.open img { animation: chest-pop .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.chest-in { margin: 0 0 14px; text-align: center; font-size: 16px; font-weight: 700; color: #f3edff; line-height: 1.5; }
.chest-in .coin-gain { font-size: 26px; }
.chest-in img { width: 1.15em; height: 1.15em; vertical-align: -.22em; }
@keyframes chest-wobble { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(-7deg); } 82% { transform: rotate(6deg); } 88% { transform: rotate(-4deg); } 94% { transform: rotate(2deg); } }
@keyframes chest-pop { from { transform: scale(.6); } to { transform: scale(1); } }

/* pareri dei giocatori (solo per chi gestisce il gioco) */
.pr { padding-bottom: 32px; }
.pr .av-top { margin: 10px 12px 0; }
.pr-title { margin: 12px 16px 0; text-align: center; font-size: 38px; }
.pr-sum { display: flex; align-items: center; gap: 16px; margin: 16px 16px 0; padding: 14px; border-radius: 20px; background: linear-gradient(180deg, rgba(84, 64, 196, .55), rgba(42, 29, 120, .7)); }
.pr-avg { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 96px; }
.pr-avg b { font-size: 44px; line-height: 1; color: var(--gold); }
.pr-avg small { font-size: 12px; font-weight: 700; color: #ddd6fe; text-align: center; }
.pr-stars { color: #ffd23f; letter-spacing: 1px; font-size: 15px; }
.pr-stars i { font-style: normal; color: rgba(255, 255, 255, .22); }
.pr-bars { flex: 1; min-width: 0; display: grid; gap: 4px; }
.pr-bar { display: grid; grid-template-columns: 34px 1fr 24px; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: #ddd6fe; }
.pr-bar i { height: 8px; border-radius: 4px; background: rgba(8, 4, 30, .55); overflow: hidden; }
.pr-bar i b { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #ffd23f, #ff9d00); }
.pr-bar em { font-style: normal; text-align: right; }
.pr-list { display: grid; gap: 10px; margin: 14px 16px 0; }
.pr-item { padding: 12px 14px; border-radius: 18px; background: rgba(8, 4, 30, .45); border: 1px solid rgba(255, 255, 255, .1); }
.pr-item header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pr-item header b { font-size: 16px; font-weight: 900; }
.pr-none { font-size: 12px; font-weight: 700; color: #a78bfa; }
.pr-item p { margin: 8px 0 0; font-size: 15px; line-height: 1.4; }
.pr-item p small { display: block; font-size: 11px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; color: #ffd23f; }
.pr-item footer { margin-top: 8px; font-size: 12px; font-weight: 700; color: #a78bfa; }

/* sfida online con un giocatore a caso */
.tm-online { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; margin: 18px 16px 0; padding: 14px 12px; border-radius: 22px;
  text-decoration: none; color: #fff; background: linear-gradient(135deg, #ff8a3d 0%, #e8408e 55%, #7c3aed 100%); border: 2px solid rgba(255, 255, 255, .25);
  box-shadow: 0 6px 0 #5b1a5e, 0 14px 28px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform .08s, box-shadow .08s; }
.tm-online:active { transform: translateY(5px); box-shadow: 0 1px 0 #5b1a5e; }
.tm-online .grow { min-width: 0; }
.tm-online small { display: block; font-size: 12px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; color: #fff7c2; }
.tm-online b { display: block; font-size: 22px; font-weight: 900; line-height: 1.15; text-shadow: 0 2px 0 var(--ink); }
.tb.q { display: inline-grid; place-items: center; font-size: 13px; font-weight: 900; color: #fff; background: linear-gradient(180deg, #a78bfa, #6d28d9); }
.srch { display: flex; flex-direction: column; align-items: center; padding: 0 0 32px; text-align: center; }
.srch .av-top { align-self: stretch; margin: 10px 12px 0; }
/* il caricamento: i due cubi del simbolo che fluttuano a turno */
.fl-load { position: relative; width: 190px; height: 180px; margin: 30px 0 6px; }
.fl-cube { position: absolute; display: block; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .35)); }
.fl-cube svg { display: block; width: 100%; height: 100%; }
.fl-cube.p { left: 78px; top: 16px; width: 86px; height: 86px; animation: fl-up-p 2.6s ease-in-out infinite; }
.fl-cube.b { left: 26px; top: 58px; width: 96px; height: 96px; animation: fl-up-b 2.6s ease-in-out infinite; }
.fl-shadow { position: absolute; top: 166px; height: 12px; border-radius: 50%; background: radial-gradient(closest-side, rgba(5, 0, 25, .6), transparent); }
.fl-shadow.p { left: 92px; width: 70px; opacity: .6; animation: fl-sh 2.6s ease-in-out infinite -1.3s; }
.fl-shadow.b { left: 30px; width: 88px; animation: fl-sh 2.6s ease-in-out infinite; }
.fl-load.still .fl-cube, .fl-load.still .fl-shadow { animation: none; }
@keyframes fl-up-b { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-18px) rotate(5deg); } }
@keyframes fl-up-p { 0%, 100% { transform: translateY(-16px) rotate(6deg); } 50% { transform: translateY(2px) rotate(-5deg); } }
@keyframes fl-sh { 0%, 100% { transform: scaleX(1); opacity: .9; } 50% { transform: scaleX(.7); opacity: .45; } }
.srch-title { margin: 6px 16px 0; font-size: 30px; }
.srch-sub { max-width: 330px; margin: 10px 18px 20px; font-size: 15px; font-weight: 700; color: #ddd6fe; line-height: 1.45; }
/* =====================================================================
   POTERI prima della sfida 1 contro 1 (nel codice "perk"). Scelta di Mirko (9/10): "più semplificato e non chiamarlo
   perk" → titolo, una riga, i 5 poteri come tasselli (icona e nome, il numero su quelli scelti), una riga che spiega
   l'ultimo toccato, Gioca. Le stesse icone e lo stesso alone colorato dei pulsanti in partita (.tr-pk).
   ===================================================================== */
.perk-pick { padding-bottom: 28px; }
.perk-pick .av-top { margin: 10px 12px 0; }
.pk-label { margin: 16px 16px 6px; font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.pw-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 18px 16px 0; }
.pw { position: relative; flex: 0 0 calc((100% - 20px) / 3); display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0;
  padding: 10px 4px 12px; border-radius: 20px; cursor: pointer; font: inherit; color: #fff; transition: transform .12s, border-color .15s;
  background: linear-gradient(180deg, rgba(84, 64, 196, .55), rgba(42, 29, 120, .7)); border: 2px solid rgba(255, 255, 255, .12); }
.pw:active { transform: scale(.96); }
.pw.on { border-color: #ffd23f; box-shadow: 0 0 0 2px rgba(255, 210, 63, .25), 0 0 20px -4px var(--glow), 0 8px 22px rgba(0, 0, 0, .3); }
.pw b { font-size: 17px; }
/* un potere non ancora tuo (si compra nello shop): più spento, con il lucchetto e il prezzo */
.pw.locked { background: rgba(8, 4, 30, .55); border-style: dashed; }
.pw.locked .pk-ico, .pw.locked b { filter: grayscale(.7) brightness(.75); }
.pw-lock { position: absolute; top: 6px; right: 6px; display: inline-flex; align-items: center; gap: 2px; padding: 2px 7px 2px 4px; border-radius: 10px;
  font-style: normal; font-size: 12px; font-weight: 800; color: #ffd23f; background: rgba(8, 4, 30, .8); }
.pw-shop { display: inline-block; margin-top: 6px; font-weight: 800; color: #ffd23f; text-decoration: none; }
.pk-num { position: absolute; top: -9px; right: -7px; display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; font-style: normal;
  font-size: 15px; font-weight: 900; color: var(--ink); background: linear-gradient(180deg, #fff3a6, #ffc21a); border: 2.5px solid var(--ink); }
/* l'icona con l'alone del suo colore (anche nei pulsanti in partita) */
.pk-ico { display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle, var(--halo) 0%, transparent 68%); }
.pk-ico img { filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .35)); }
/* sotto i tasselli, in una riga: cosa fa l'ultimo toccato e quanta energia costa */
.pw-info { margin: 16px 20px 0; font-size: 15px; font-weight: 600; line-height: 1.4; text-align: center; color: #e6e0ff; }
.pw-info b { margin-right: 4px; font-family: var(--font-title); font-weight: 400; color: #fff; }
.pw-cost { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; font-family: var(--font-title); color: #ffd23f; white-space: nowrap; }
/* la prova sul PC (mappe e tetto delle zone): mai nell'app né online */
.pk-lab { margin: 16px 16px 0; padding: 2px 12px 12px; border-radius: 20px; background: rgba(8, 4, 30, .55); border: 2px dashed rgba(215, 123, 255, .55); }
.pk-lab .pk-label { margin: 10px 0 2px; color: #e9b8ff; }
.pk-lab-t { margin: 10px 0 6px; font-size: 13px; font-weight: 900; color: #e6e0ff; }
.pk-lab-row { display: flex; flex-wrap: wrap; gap: 6px; }
.pk-lab-b { padding: 7px 12px; border-radius: 12px; font: inherit; font-size: 14px; font-weight: 900; color: #e6e0ff; cursor: pointer;
  background: linear-gradient(180deg, rgba(84, 64, 196, .55), rgba(42, 29, 120, .7)); border: 2px solid rgba(255, 255, 255, .14); }
.pk-lab-b.on { color: var(--ink); background: linear-gradient(180deg, #fff3a6, #ffc21a); border-color: var(--ink); }
.pk-lab-how { margin: 10px 0 0; font-size: 13px; font-weight: 700; line-height: 1.4; color: #b9adf0; }
.pk-go { margin: 20px 16px 0; }
/* lo stesso GIOCA della home */
/* (.pk-go davanti: .ho-play, più in basso nel file, ha i margini di lato della home e lo faceva uscire di 22px) */
.pk-go .pk-play { box-sizing: border-box; width: 100%; margin: 0; padding: 0; font: inherit; cursor: pointer; }
.pk-play:disabled { cursor: default; filter: saturate(.35) brightness(.8); }
.pk-play:disabled b { font-size: 24px; }
@media (max-width: 340px) { .pw .pk-ico { width: 52px; height: 52px; } .pw .pk-ico img { width: 38px; height: 38px; } .pw b { font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { .pw.sh-got { animation: none; } }
.srch-time { margin: 14px 0 22px; padding: 6px 20px; border-radius: 999px; font-size: 24px; font-weight: 900; color: #ffd23f; font-variant-numeric: tabular-nums;
  background: rgba(8, 4, 30, .55); border: 2px solid rgba(255, 210, 63, .45); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .4); }
.srch .stack { width: min(340px, calc(100% - 32px)); }

/* il livello guidato: la nuvoletta in alto sulla griglia */
.av-guide { position: absolute; left: 50%; width: min(360px, calc(100% - 32px)); transform: translateX(-50%); padding: 10px 14px; border-radius: 16px;
  background: #fff; color: var(--ink); font-size: 15px; font-weight: 800; line-height: 1.35; text-align: center;
  border: 2px solid var(--ink); box-shadow: 0 4px 0 var(--ink), 0 10px 24px rgba(0, 0, 0, .35); }
.av-guide.pop { animation: av-guide-pop .32s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes av-guide-pop { from { transform: translateX(-50%) scale(.85); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }

/* la prova con la mano prima della prima sfida */
.lesson-art { display: flex; gap: 5px; margin: 44px 0 14px; }
.lesson-art .tb { width: 46px; height: 46px; border-radius: 11px; }
.lesson-art .tb.ghost { animation: lesson-ghost 1.4s ease-in-out infinite; }
@keyframes lesson-ghost { 0%, 100% { transform: translateY(-14px); opacity: .55; } 50% { transform: translateY(0); opacity: 1; } }

/* la "i" e il suo fumetto */
.info-i { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-left: -4px; padding: 0; border-radius: 50%;
  font: italic 900 15px/1 Georgia, 'Times New Roman', serif; color: var(--ink); cursor: pointer;
  background: linear-gradient(180deg, #fff6c2, #ffcd38 55%, #e58a00); border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink); }
.info-i:active { transform: translateY(2px); box-shadow: none; }
.info-i[aria-expanded="true"] { background: linear-gradient(180deg, #ffffff, #ffe680); }
.tip-bubble { position: absolute; z-index: 20; top: calc(100% + 12px); left: 16px; right: 16px; padding: 14px 16px 16px; border-radius: 18px;
  background: #fff; color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.4; text-align: left;
  border: 2px solid var(--ink); box-shadow: 0 5px 0 var(--ink), 0 14px 30px rgba(0, 0, 0, .45); animation: tip-pop .28s cubic-bezier(.2, 1.6, .4, 1); }
.tip-bubble::before { content: ''; position: absolute; top: -9px; left: var(--ax, 40px); width: 16px; height: 16px; background: #fff;
  border-top: 2px solid var(--ink); border-left: 2px solid var(--ink); border-top-left-radius: 4px; transform: translateX(-50%) rotate(45deg); }
.tip-bubble > b { display: block; margin-bottom: 4px; font-size: 16px; font-weight: 900; }
.tip-bubble p { margin: 0 0 8px; }
.tip-bubble p b { color: #7c3aed; }
.tip-bubble .tip-go { display: block; width: 100%; margin-top: 4px; text-align: center; }
@keyframes tip-pop { from { transform: scale(.9) translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }

/* gli aiuti dell'Avventura: la fila di badge sotto i pezzi */
.av-aids { position: absolute; z-index: 2; left: 50%; width: min(400px, calc(100% - 16px)); transform: translateX(-50%); display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.av-aid { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0; border: 0; background: none; color: #fff;
  font: inherit; cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.av-aid-ico { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(180deg, #8e6cff, #5b3fd6 60%, #4a2fbf);
  border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink), inset 0 3px 0 rgba(255, 255, 255, .35); transition: transform .12s; }
.av-aid-ico img { display: block; width: 32px; height: 32px; filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .3)); pointer-events: none; }
.av-aid:active .av-aid-ico { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink), inset 0 3px 0 rgba(255, 255, 255, .35); }
.av-aid small { font-size: 10px; font-weight: 900; color: #ddd6fe; }
.av-aid-n { position: absolute; top: -4px; right: calc(50% - 33px); display: grid; place-items: center; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 11px;
  font-size: 12px; font-weight: 900; color: var(--ink); background: linear-gradient(180deg, #fff6c2, #ffcd38); border: 2px solid var(--ink); }
.av-aid.none .av-aid-ico { filter: grayscale(.8) brightness(.75); }
.av-aid.none .av-aid-n { background: #c9c3dd; }
.av-aid.on .av-aid-ico { transform: scale(1.12); background: linear-gradient(180deg, #ffe89a, #f7b21a 60%, #dc8a00); box-shadow: 0 4px 0 var(--ink), 0 0 18px rgba(255, 210, 63, .85); }
.av-aid-tip { position: absolute; z-index: 6; width: 224px; padding: 12px 14px; border-radius: 16px; background: #fff; color: var(--ink); text-align: center; pointer-events: auto;
  border: 2px solid var(--ink); box-shadow: 0 5px 0 var(--ink), 0 12px 26px rgba(0, 0, 0, .45); transform: translateX(-50%); animation: av-aid-tip .25s cubic-bezier(.2, 1.6, .4, 1) both; }
.av-aid-tip::after { content: ''; position: absolute; bottom: -9px; left: var(--ax, 50%); width: 16px; height: 16px; background: #fff;
  border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); border-bottom-right-radius: 4px; transform: translateX(-50%) rotate(45deg); }
.av-aid-tip-head { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 17px; font-weight: 900; }
.av-aid-price { display: inline-flex; align-items: center; gap: 3px; padding: 2px 9px; border-radius: 10px; font-size: 15px; background: #fff3c4; color: #8a4b00; }
.av-aid-tip p { margin: 6px 0 0; font-size: 13px; font-weight: 700; line-height: 1.35; color: #4a3a7a; }
@keyframes av-aid-tip { from { transform: translateX(-50%) scale(.85) translateY(8px); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
.av-rescue { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.av-rescue img { flex: none; }
.av-aid-have { padding: 2px 8px; border-radius: 10px; font-size: 13px; background: rgba(8, 4, 30, .3); }
/* l'esplosione della bomba */
.av-blast, .av-ring { position: absolute; z-index: 4; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; pointer-events: none; }
.av-blast { background: radial-gradient(circle, #fffbe0 0 20%, #ffcd38 35%, #ff7a1a 60%, rgba(255, 60, 40, 0) 72%); animation: av-blast .6s ease-out both; }
.av-ring { border: 4px solid #fff6c2; animation: av-ring .55s ease-out both; }
@keyframes av-blast { 0% { transform: scale(.2); opacity: 1; } 70% { opacity: 1; } 100% { transform: scale(4.2); opacity: 0; } }
@keyframes av-ring { from { transform: scale(.3); opacity: 1; } to { transform: scale(4.8); opacity: 0; } }

/* il negozio: la scheda degli aiuti */
.shop-item.aid .si-prev { display: grid; place-items: center; }
.shop-item.aid .si-prev img { filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .35)); }
.si-info { display: block; margin: -2px 4px 0; font-size: 11px; font-weight: 700; line-height: 1.3; color: #c9bff5; text-align: center; }
.si-have { font-size: 12px; font-weight: 900; color: #ffd23f; }
/* i titoletti dentro una scheda (Pezzi: blocchi e palla; Effetti: quando conquisti e quando vinci) */
.shop-sec { grid-column: 1 / -1; margin: 8px 2px -2px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.shop-sec:first-child { margin-top: 0; }
/* come averlo: quanti lingotti mancano e quante stelle o giorni di bonus servono */
.si-need { display: block; margin: -2px 2px 0; font-size: 11.5px; font-weight: 700; line-height: 1.35; color: #c9bff5; }
.si-need .gi { width: 14px; height: 14px; vertical-align: -2px; }
/* negozio: quanto manca, sulla carta; il tremolio quando tocchi senza abbastanza lingotti; quello appena preso si illumina */
.shop-item .btn.poor { color: #ffc2cc; }
.sh-nope { animation: sh-nope .4s ease-in-out; }
@keyframes sh-nope { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
.shop-coins.sh-nope { animation: sh-coins .6s ease-in-out; }
@keyframes sh-coins { 0%, 100% { transform: none; } 25% { transform: scale(1.18); color: #ff6b7d; } 50% { transform: scale(1.1) rotate(-4deg); color: #ff6b7d; } }
.shop-item.sh-got, .si-have.sh-got { animation: sh-got .7s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes sh-got { 0% { transform: scale(.9); } 50% { transform: scale(1.12); filter: brightness(1.4); } 100% { transform: none; } }
/* un pulsante che ha appena risposto ("Copiato", "Salvata") */
.btn.said img { vertical-align: -4px; }
.pl-wait.ok { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 0; color: #1a5bc4; font-weight: 900; }
.fb-thanks { display: grid; justify-items: center; gap: 6px; padding: 26px 0 30px; text-align: center; animation: sh-got .6s cubic-bezier(.2, 1.6, .4, 1); }
.fb-thanks b { font-size: 34px; color: #ffd23f; -webkit-text-stroke-width: 7px; }
.fb-thanks p { margin: 0; font-size: 15px; font-weight: 800; color: #ddd6fe; }

/* la classifica della settimana */
.tm-rank { display: flex; align-items: center; gap: 12px; margin: 14px 16px 0; padding: 10px 14px; border-radius: 20px; color: #fff; text-decoration: none;
  background: linear-gradient(135deg, rgba(255, 196, 0, .22), rgba(42, 29, 120, .75)); border: 2px solid rgba(255, 210, 63, .45); }
.tm-rank img { flex: none; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .35)); }
.tm-rank .grow { flex: 1; min-width: 0; }
.tm-rank b { display: block; font-size: 16px; font-weight: 900; }
.tm-rank small { display: block; font-size: 12px; font-weight: 800; color: #ffe9a3; }
.tm-rank small svg, .rk svg.av-star, .av-rank-gain svg { width: 13px; height: 13px; vertical-align: -1px; }
.rk { padding-bottom: 32px; }
.rk .av-top { display: flex; align-items: center; justify-content: space-between; margin: 10px 12px 0; }
.rk-ends { padding: 5px 12px; border-radius: 12px; font-size: 12px; font-weight: 900; color: #ffd23f; background: rgba(8, 4, 30, .55); }
.rk-title { margin: 8px 16px 0; font-size: 34px; text-align: center; }
.rk-sub { margin: 4px 16px 0; text-align: center; font-size: 14px; font-weight: 700; color: #ddd6fe; }
.rk-tabs { grid-template-columns: 1fr 1fr 1fr; }
/* la Classificata: le leghe (bollini colorati, dal bronzo al campione), la tua riga e la scritta prima del via */
.lg-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 10px; border: 2px solid var(--ink); font-size: 13px; font-weight: 900;
  line-height: 1.2; white-space: nowrap; color: var(--ink); box-shadow: 0 2px 0 var(--ink), inset 0 2px 0 rgba(255, 255, 255, .45); }
.lg-badge.sm { padding: 1px 7px; font-size: 11px; border-width: 1.5px; box-shadow: 0 1.5px 0 var(--ink), inset 0 1px 0 rgba(255, 255, 255, .45); }
.lg-badge.new { animation: sh-got .7s cubic-bezier(.2, 1.6, .4, 1); }
.lg-bronzo { background: linear-gradient(180deg, #ffd9b0, #e09a5a 55%, #a8612a); }
.lg-argento { background: linear-gradient(180deg, #ffffff, #cfd3e6 55%, #9aa0bd); }
.lg-oro { background: linear-gradient(180deg, #fff6c2, #ffcd38 55%, #e58a00); }
.lg-platino { background: linear-gradient(180deg, #f0faff, #b8e6ff 55%, #6fb3e0); }
.lg-diamante { background: linear-gradient(180deg, #e2dcff, #9b8cff 55%, #6a4fe0); color: #fff; text-shadow: 0 1px 0 var(--ink); }
.lg-campione { background: linear-gradient(180deg, #ffd3e8, #ff6fb5 55%, #d11f75); color: #fff; text-shadow: 0 1px 0 var(--ink); }
.lg-piazzamento { background: rgba(255, 255, 255, .12); color: #ddd6fe; border-color: rgba(255, 255, 255, .25); box-shadow: none; }
/* il tuo riquadro nella Classificata: lega e punti, la barra verso la prossima lega, la posizione; Gioca a destra */
.rk-me { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 12px; margin: 14px 16px 0; padding: 12px 14px; border-radius: 18px;
  background: linear-gradient(135deg, rgba(43, 132, 244, .35), rgba(43, 132, 244, .15)); border: 1.5px solid rgba(102, 200, 255, .6); }
.rk-me-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rk-me-top b { font-size: 22px; font-weight: 900; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.rk-me-top b small { font-size: 12px; color: #c9eeff; }
.rk-me .tr-prog { grid-column: 1; height: 10px; margin-top: 0; }
.rk-me-note { grid-column: 1; font-size: 12.5px; font-weight: 800; color: #c9eeff; }
.rk-me > .btn { grid-column: 2; grid-row: 1 / 4; padding: 12px 18px; }
.rk-how { display: block; margin: 10px auto 0; font-size: 13px; }
/* il foglio delle leghe: dalla più alta alla più bassa, con la soglia */
.lg-list { display: grid; gap: 8px; margin: 4px 0 12px; padding: 0; list-style: none; }
.lg-list li { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 14px; background: rgba(255, 255, 255, .06); }
.lg-list li span { font-size: 14px; font-weight: 800; color: #ddd6fe; }
.lg-rules { margin: 0 0 6px; font-size: 13.5px; font-weight: 700; line-height: 1.45; color: #ddd6fe; }
.rk-row .lg-badge { flex: none; }
/* le regole della mappa in prova, prima del via: restano finché parte la partita */
.tr-banner.prova { top: 9%; padding: 0 16px; pointer-events: none; animation: tr-banner-in .45s cubic-bezier(.2, 1.4, .4, 1) both; }
.tr-banner.prova b { color: #d77bff; font-size: clamp(26px, 8vw, 40px); }
.tr-banner.prova small { display: block; width: max-content; max-width: 100%; margin: 6px auto 0; font-size: 13px; }
.tr-banner.rk { top: 16%; }
.tr-banner.rk b { color: #ffd23f; }
.tr-rk { margin-top: 10px; }
.tr-rk .tr-cups-top .lg-badge { flex: none; }
.tr-rk .tr-chip { display: inline-block; margin-top: 8px; }
.rk-prizes { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 12px 16px 0; }
.rk-prizes span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 12px; font-size: 13px; font-weight: 900; color: #ffd23f; background: rgba(8, 4, 30, .5); }
.rk-list { list-style: none; margin: 12px 16px 0; padding: 0; display: grid; gap: 6px; }
.rk-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1.5px solid rgba(255, 255, 255, .06); }
.rk-row.me { background: linear-gradient(135deg, rgba(43, 132, 244, .35), rgba(43, 132, 244, .15)); border-color: rgba(102, 200, 255, .6); }
.rk-row .avb { width: 34px; height: 34px; border-radius: 10px; font-size: 15px; }
.rk-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 900; }
.rk-name small { margin-left: 4px; padding: 1px 6px; border-radius: 8px; font-size: 11px; color: var(--ink); background: #7fd2ff; }
.rk-stars { flex: none; font-size: 15px; font-weight: 900; color: #ffd23f; }
.rk-pos { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 14px; font-weight: 900; color: #ddd6fe; background: rgba(8, 4, 30, .5); }
.rk-pos.p1, .rk-pos.p2, .rk-pos.p3 { color: var(--ink); border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink); }
.rk-pos.p1 { background: linear-gradient(180deg, #fff6c2, #ffcd38 55%, #e58a00); }
.rk-pos.p2 { background: linear-gradient(180deg, #ffffff, #cfd3e6 55%, #9aa0bd); }
.rk-pos.p3 { background: linear-gradient(180deg, #ffd9b0, #e09a5a 55%, #a8612a); }
.rk-mine { margin-top: 6px; padding-top: 6px; border-top: 2px dashed rgba(255, 255, 255, .12); }
.rk-empty { margin: 24px 16px; text-align: center; font-size: 15px; font-weight: 800; color: #ddd6fe; }
.rk-cta { margin: 16px 16px 0; padding: 14px; border-radius: 18px; text-align: center; background: rgba(8, 4, 30, .45); }
.rk-cta p { margin: 0 0 10px; font-size: 14px; font-weight: 800; color: #ddd6fe; }
.rk-won { display: grid; justify-items: center; gap: 4px; margin: 6px 0 14px; }
.rk-won p { margin: 0; font-size: 17px; font-weight: 900; }
.rk-won b { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; color: #ffd23f; }
.av-rank-gain { margin: 2px 0 0; font-size: 14px; font-weight: 900; color: #7fd2ff; }

/* la schermata d'ingresso: prima "Gioca subito" (come ospite), poi il profilo */
.gate-play { max-width: 420px; margin: 0 auto; }
.gate-play .btn.big { font-size: 22px; padding: 18px; }
.gate-play-note { margin: 10px 0 0; font-size: 14px; font-weight: 800; color: #ece6ff; text-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.gate-or { display: flex; align-items: center; gap: 12px; max-width: 420px; margin: 18px auto 14px; font-size: 13px; font-weight: 900; color: #c9bff5; text-transform: uppercase; letter-spacing: 1px; }
.gate-or::before, .gate-or::after { content: ''; flex: 1; height: 2px; border-radius: 2px; background: rgba(201, 191, 245, .25); }
.btn.big.soft { box-shadow: 0 7px 0 #34205f, 0 14px 26px rgba(0, 0, 0, .35); }
.btn.big.soft:active { box-shadow: 0 1px 0 #34205f, 0 6px 12px rgba(0, 0, 0, .35); }

/* la home (scelta di Mirko: "Barra in basso"): niente barra di sempre, tutto più grande e pulito */
body.home .bar { display: none; }
body.home { background: radial-gradient(120% 60% at 50% 0%, rgba(124, 92, 255, .45), transparent 60%),
  radial-gradient(90% 50% at 50% 100%, rgba(232, 64, 142, .22), transparent 70%), linear-gradient(180deg, #23125e, #120a38 70%, #0c0628) fixed; }
.ho { position: relative; max-width: 480px; margin: 0 auto; padding: calc(var(--sat) + 10px) 0 calc(var(--sab) + 110px); }
.ho::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 34px 34px; mask-image: linear-gradient(180deg, #000, transparent 80%); -webkit-mask-image: linear-gradient(180deg, #000, transparent 80%); }
.ho-top { display: flex; align-items: center; gap: 8px; padding: 4px 12px 8px; }
.ho-me { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 12px 4px 4px; border-radius: 16px; border: 2px solid rgba(255, 255, 255, .08);
  font: inherit; color: #fff; text-align: left; text-decoration: none; background: rgba(8, 4, 30, .55); cursor: pointer; }
.ho-me .avb { width: 38px; height: 38px; border-radius: 11px; font-size: 18px; }
.ho-me b { display: block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 900; line-height: 1.15; }
.ho-me small { display: flex; align-items: center; gap: 3px; white-space: nowrap; font-size: 11px; font-weight: 900; color: #ffd23f; }
.ho-sp { flex: 1; }
.ho-coin { display: flex; align-items: center; gap: 5px; height: 38px; padding: 0 14px 0 8px; border-radius: 19px; font-weight: 900; color: #ffe9a3; text-decoration: none;
  background: rgba(8, 4, 30, .6); border: 2px solid rgba(255, 210, 63, .45); }
.ho-coin b { font-size: 16px; }
.ho-burger { display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 14px; cursor: pointer;
  background: linear-gradient(180deg, #8e6cff, #5b3fd6); box-shadow: 0 4px 0 #2a1470, inset 0 2px 0 rgba(255, 255, 255, .35); }
.ho-burger:active { transform: translateY(3px); box-shadow: 0 1px 0 #2a1470; }
.ho-burger span { display: block; width: 18px; height: 3px; border-radius: 2px; background: #fff; box-shadow: 0 6px 0 #fff, 0 -6px 0 #fff; }
.ho-hero { position: relative; display: grid; justify-items: center; margin-top: clamp(4px, 2vh, 20px); }
.ho-logo { width: clamp(110px, 19vh, 160px); height: auto; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .5)); animation: ho-float 3s ease-in-out infinite; }
.ho-name { width: min(300px, 80vw); margin-top: 8px; }
.ho-left { position: absolute; left: 14px; top: 10px; }
.ho-side { position: relative; display: grid; justify-items: center; gap: 3px; padding: 0; border: 0; background: none; color: #fff; font: inherit; cursor: pointer; }
.ho-side > span { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 17px; border: 3px solid var(--ink);
  background: linear-gradient(180deg, #8e6cff, #5b3fd6 60%, #4a2fbf); box-shadow: 0 4px 0 var(--ink), inset 0 3px 0 rgba(255, 255, 255, .35); }
.ho-side small { font-size: 11px; font-weight: 900; color: #ddd6fe; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.ho-side.ready > span { background: linear-gradient(180deg, #ffe89a, #f7b21a 60%, #dc8a00); animation: chest-wobble 1.4s ease-in-out infinite; }
.ho-badge { position: absolute; top: -6px; right: -8px; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px;
  font-size: 12px; font-style: normal; font-weight: 900; color: #fff; background: #e9405e; border: 2px solid var(--ink); }
.ho-badge.dim { color: var(--ink); background: #e9e3ff; }
.ho-badge.gold { color: var(--ink); background: linear-gradient(180deg, #fff6c2, #ffcd38); }
.ho-badge.on { background: #2b84f4; }
.ho-badge.ask { animation: ho-ask 1.6s ease-in-out infinite; }
@keyframes ho-ask { 0%, 70%, 100% { transform: none; } 80% { transform: scale(1.25); } 90% { transform: scale(.95); } }
.ho-badge[hidden] { display: none; }
.ho-mode { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: clamp(10px, 2.4vh, 20px) 30px 12px; padding: 6px; border-radius: 20px; background: rgba(8, 4, 30, .55); }
.ho-arrow { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 13px; border: 2px solid var(--ink); cursor: pointer;
  background: linear-gradient(180deg, #a184ff, #6a45e6 55%, #5032c4); box-shadow: 0 3px 0 var(--ink), inset 0 2px 0 rgba(255, 255, 255, .4); }
.ho-arrow:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.ho-arrow svg { width: 22px; height: 22px; }
.ho-arrow .ch-o, .ho-arrow .ch-i { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ho-arrow .ch-o { stroke: var(--ink); stroke-width: 7; }
.ho-arrow .ch-i { stroke: #fff; stroke-width: 3.4; }
.ho-mode-name { display: grid; justify-items: center; text-align: center; }
.ho-mode-name b { font-size: 18px; font-weight: 900; }
.ho-mode-name small { font-size: 12px; font-weight: 800; color: #c9bff5; }
.ho-play { display: grid; place-items: center; height: 74px; margin: 0 22px; border-radius: 24px; border: 3px solid var(--ink); text-decoration: none;
  background: linear-gradient(180deg, #ff8fc4, #f0428f 55%, #c8206c); box-shadow: 0 7px 0 #7a0f40, 0 16px 30px rgba(232, 64, 142, .35), inset 0 3px 0 rgba(255, 255, 255, .45);
  transition: transform .08s, box-shadow .08s; }
.ho-play:active { transform: translateY(6px); box-shadow: 0 1px 0 #7a0f40, inset 0 3px 0 rgba(255, 255, 255, .45); }
.ho-play b { font-size: 36px; }
.ho #tm-adv-box .tm-adv { margin-top: clamp(16px, 3vh, 26px); }
.ho-nav { position: fixed; z-index: 20; left: 50%; bottom: 0; width: min(480px, 100%); transform: translateX(-50%); display: grid; grid-template-columns: repeat(5, 1fr);
  align-items: end; padding: 8px 6px calc(var(--sab) + 12px); background: linear-gradient(180deg, rgba(10, 5, 34, .7), rgba(10, 5, 34, .96) 40%);
  border-top: 2px solid rgba(255, 255, 255, .07); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ho-nav-i { display: grid; justify-items: center; gap: 2px; padding: 0; border: 0; background: none; font: inherit; font-size: 11px; font-weight: 900; color: #a99bd8;
  text-decoration: none; cursor: pointer; }
.ho-nav-i > span { position: relative; display: grid; place-items: center; width: 44px; height: 40px; }
.ho-nav-i img { width: 30px; height: 30px; opacity: .85; }
/* la pagina in cui sei: icona piena e una lineetta d'oro sotto il nome */
.ho-nav-i.on { color: #fff; }
.ho-nav-i.on img { opacity: 1; transform: scale(1.12); }
.ho-nav-i.on:not(.big)::after { content: ''; width: 18px; height: 4px; margin-top: 1px; border-radius: 3px; background: #ffd23f; box-shadow: 0 1px 0 var(--ink); }
/* il pulsante centrale, la casa: un cubo come quelli del logo (scelta di Mirko), blu quando sei in home e rosa nelle
   altre pagine, con lo smusso dei blocchi e la stella sempre gialla */
.ho-nav-i.big > span { --hi: #ffd3e8; --lf: #ff7bb6; --dr: #c42a72; --dk: #7d0f45;
  width: 62px; height: 62px; margin-top: -26px; border-radius: 18px; border: 3px solid var(--ink);
  background: linear-gradient(180deg, #ff94c8, #e8408e);
  box-shadow: 0 5px 0 var(--ink), inset 0 5px 0 var(--hi), inset 5px 0 0 var(--lf), inset -5px 0 0 var(--dr), inset 0 -6px 0 var(--dk); }
.ho-nav-i.big > span::before { content: ''; position: absolute; left: 10px; top: 9px; width: 20px; height: 7px; border-radius: 5px; background: rgba(255, 255, 255, .45); }
.ho-nav-i.big img { position: relative; width: 38px; height: 38px; opacity: 1; filter: drop-shadow(0 2px 0 rgba(27, 11, 69, .55)); }
.ho-nav-i.big.on > span { --hi: #c9eeff; --lf: #4ba7ff; --dr: #1a5bc4; --dk: #0f3a8a; background: linear-gradient(180deg, #6acbff, #2b84f4);
  box-shadow: 0 5px 0 var(--ink), inset 0 5px 0 var(--hi), inset 5px 0 0 var(--lf), inset -5px 0 0 var(--dr), inset 0 -6px 0 var(--dk), 0 0 22px rgba(75, 167, 255, .55); }
.ho-nav-i.big.on img { transform: none; }
.ho-nav-i.big:active > span { transform: translateY(3px);
  box-shadow: 0 2px 0 var(--ink), inset 0 5px 0 var(--hi), inset 5px 0 0 var(--lf), inset -5px 0 0 var(--dr), inset 0 -6px 0 var(--dk); }
/* nelle pagine con la barra: spazio sotto per non coprire niente, e niente "‹ Menu" (si torna a casa dalla barra) */
body.tabs:not(.home) main { padding-bottom: calc(var(--sab) + 100px); }
body.tabs .av-back { display: none; }
body.tabs .av-top { justify-content: flex-end; }
.ho-nav-i .ho-badge { top: -4px; right: -4px; }
@keyframes ho-float { 50% { transform: translateY(-10px) rotate(-3deg); } }
.ho .tm-adv { margin-left: 18px; margin-right: 18px; padding: 10px 12px; gap: 12px; }
.ho .tm-adv .grow { min-width: 0; }
.ho .tm-adv small, .ho .ta-stars { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* classifica: i giocatori si toccano */
.rk-row[data-act] { cursor: pointer; transition: transform .08s, background .12s; }
.rk-row[data-act]:active { transform: scale(.98); background: rgba(255, 255, 255, .12); }
.rk { position: relative; }
.pl-pop { position: absolute; z-index: 10; left: 50%; width: min(300px, calc(100% - 32px)); transform: translateX(-50%); padding: 12px; border-radius: 18px;
  background: #fff; color: var(--ink); border: 2px solid var(--ink); box-shadow: 0 5px 0 var(--ink), 0 14px 30px rgba(0, 0, 0, .45);
  animation: pl-pop .22s cubic-bezier(.2, 1.6, .4, 1) both; }
.pl-pop::before { content: ''; position: absolute; top: -9px; left: 50%; width: 16px; height: 16px; background: #fff;
  border-top: 2px solid var(--ink); border-left: 2px solid var(--ink); border-top-left-radius: 4px; transform: translateX(-50%) rotate(45deg); }
.pl-pop-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pl-pop-head .avb { width: 40px; height: 40px; border-radius: 12px; font-size: 18px; }
.pl-pop-head b { display: block; font-size: 16px; font-weight: 900; }
.pl-pop-head small { display: flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 800; color: #6b5a9e; }
.pl-pop-head small svg { width: 13px; height: 13px; }
.pl-pop .btn { width: 100%; }
.pl-wait { margin: 0; text-align: center; font-size: 13px; font-weight: 800; color: #6b5a9e; }
@keyframes pl-pop { from { transform: translateX(-50%) scale(.9) translateY(-6px); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }

/* la scritta ENCLAVO di cubi (scritta.js) */
.wm { display: block; height: auto; overflow: visible; filter: drop-shadow(0 3px 0 #1b0b45) drop-shadow(0 7px 9px rgba(0, 0, 0, .4)); }
.wm-drop use { animation: wm-drop .45s cubic-bezier(.2, 1.5, .4, 1) both; }
.wm-drop .wm-rim { animation: wm-rim .3s 1.1s ease-out both; } /* il contorno arriva quando i cubi sono atterrati */
@keyframes wm-rim { from { opacity: 0; } to { opacity: 1; } }
@keyframes wm-drop { from { transform: translateY(-70px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .wm-drop use, .wm-drop .wm-rim { animation: none; } }
/* l'inizio dei bivacchi (Mirko 11/10): "SFIDA DEL BIVACCO" a cubi come il simbolo, al centro, poi la regola e il conto */
.bo-intro { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 0 16px; pointer-events: none; animation: bo-in .25s ease both;
  background: radial-gradient(ellipse 80% 42% at 50% 50%, rgba(8, 4, 30, .86), rgba(8, 4, 30, .6) 62%, rgba(8, 4, 30, .25)); }
.bo-intro .bo-title { width: min(460px, 86vw); }
.bo-rule { margin: 6px 0 0; max-width: 340px; text-align: center; font-weight: 800; font-size: 15px; line-height: 1.35;
  text-shadow: 0 2px 0 #1b0b45; animation: bo-rule .4s 1.1s cubic-bezier(.2, 1.4, .4, 1) both; }
.bo-count { display: block; height: 70px; font-size: 62px; line-height: 70px; color: #ffd23f; -webkit-text-stroke-width: 9px; }
.bo-count.pop { animation: tr-pop .95s cubic-bezier(.2, 1.4, .4, 1) both; }
.bo-intro.out { animation: bo-out .3s ease both; }
@keyframes bo-in { from { opacity: 0; } }
@keyframes bo-out { to { opacity: 0; transform: scale(1.12); } }
@keyframes bo-rule { from { opacity: 0; transform: translateY(10px) scale(.92); } }
@media (prefers-reduced-motion: reduce) { .bo-rule { animation: none; } }