/* ============================================================
   Punto — tema "Vegas d'oro"
   oro zecchino · rubino · velluto. Un solo riflesso, ripetuto.
   Caricato DOPO app.css: sovrascrive la pelle, non la struttura.
   ============================================================ */

@font-face { font-family: 'Alfa Slab'; src: url('/assets/fonts/alfa-slab-one.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Bebas'; src: url('/assets/fonts/bebas-neue.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
  --velvet: #120709;
  --velvet-2: #1B0C10;
  --velvet-3: #241016;
  --ruby: #8E1026;
  --ruby-2: #B3162F;
  --gold: #D9B45B;
  --gold-2: #F3E3A8;
  --gold-3: #FBF0C4;
  --gold-deep: #8C6320;
  --ink: #F7EFDF;
  --muted: #C3B196;
  --line: rgba(217, 180, 91, .32);
  --line-2: rgba(217, 180, 91, .18);
  --ok: #7ED88F;
  --danger: #FF5F57;
  --bg: var(--velvet);
  --bg-2: var(--velvet-2);
  --surface: var(--velvet-2);
  --surface-2: var(--velvet-3);
  --accent: var(--gold);
  --accent-ink: #1A0D06;
  --fs-display: clamp(2.6rem, 6.4vw, 4.8rem);
  --font-sign: 'Alfa Slab', Georgia, serif;
  --font-label: 'Bebas', 'Inter Tight', sans-serif;
}

body {
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(179, 22, 47, .2), transparent 60%),
    radial-gradient(900px 500px at 88% 22%, rgba(217, 180, 91, .07), transparent 60%),
    radial-gradient(700px 400px at 8% 92%, rgba(179, 22, 47, .1), transparent 60%),
    linear-gradient(180deg, #0D0507 0%, var(--velvet) 40%, #0B0406 100%);
  color: var(--ink);
}
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; opacity: .35; z-index: 0;
  background-image: url('/assets/tex/velluto.webp');
  background-size: 512px 512px;
  mix-blend-mode: soft-light;
}
body > * { position: relative; z-index: 1; }

.sign { font-family: var(--font-sign); text-transform: uppercase; font-weight: 400; letter-spacing: .005em; }
.label { font-family: var(--font-label); text-transform: uppercase; letter-spacing: .14em; }

.foil {
  background: linear-gradient(180deg, #FDF3CE 0%, #F0D98C 16%, #D9B45B 38%, #A8721F 50%, #C99B45 62%, #F3E3A8 84%, #E5C87E 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .7)) drop-shadow(0 0 18px rgba(217, 180, 91, .16));
}

/* ---------------- nastro ---------------- */
.ribbon .label { font-size: .72rem; color: var(--gold-2); }
.ribbon .ticker { font-family: var(--font-label); font-size: 1rem; letter-spacing: .1em; color: #fff; }
.ribbon .ticker.gold { color: var(--gold-2); }
.ribbon-sep { width: 1px; height: 14px; background: rgba(243, 227, 168, .3); margin: 0 8px; }
.ribbon-right { margin-left: auto; color: rgba(243, 227, 168, .7); }

/* ---------------- testata ---------------- */
.app-header {
  background: transparent; border-bottom: 1px solid var(--line-2);
  height: 66px; gap: 30px;
  backdrop-filter: none;
}
.brand-mark {
  width: 26px; height: 26px; transform: rotate(45deg);
  background: linear-gradient(135deg, var(--gold-3), var(--gold) 45%, var(--gold-deep));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 0 16px rgba(217, 180, 91, .35);
}
.brand-name { font-family: var(--font-sign); font-size: 1.45rem; letter-spacing: .01em; }
.nav-links { gap: 24px; }
.nav-links a { font-family: var(--font-label); letter-spacing: .12em; font-size: .95rem; color: var(--muted); border-bottom: 2px solid transparent; padding: 6px 0; }
.nav-links a.on { color: var(--gold-2); border-color: var(--gold); }
.balance-chip {
  background: linear-gradient(180deg, var(--velvet-3), var(--velvet-2));
  border: 1px solid var(--line);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5), inset 0 0 22px rgba(217, 180, 91, .06);
  border-radius: 0; padding: 6px 16px;
}
.balance-label { font-family: var(--font-label); font-size: .62rem; letter-spacing: .2em; color: var(--muted); }
.balance-value { font-family: var(--font-label); font-size: 1.2rem; letter-spacing: .05em; color: var(--gold-2); }
.user-btn { background: linear-gradient(180deg, var(--velvet-3), var(--velvet-2)); border: 1px solid var(--line); color: var(--gold-2); font-family: var(--font-sign); }
.user-pop { background: var(--velvet-2); border: 1px solid var(--line); }

/* ---------------- bottoni ---------------- */
.btn { border-radius: 0; letter-spacing: .06em; }
.btn-primary, .spin-btn {
  color: #1A0D06;
  background: linear-gradient(180deg, #F7E7B0 0%, #E2C377 30%, #C79C3F 55%, #A9791F 70%, #E8CE8A 100%);
  border: 1px solid #FFEFC2;
  box-shadow: 0 2px 0 #6B4A0F, 0 10px 26px rgba(217, 180, 91, .2), inset 0 1px 0 #FFF6D8;
  font-family: var(--font-sign); text-transform: uppercase;
}
.btn-primary:hover, .spin-btn:hover { background: linear-gradient(180deg, #FFF3C9 0%, #EBCE8C 30%, #D2A94B 55%, #B8852A 70%, #F1DDA0 100%); }
.btn-ghost {
  color: var(--gold-2); border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(217, 180, 91, .06), transparent);
  font-family: var(--font-label); text-transform: uppercase; letter-spacing: .12em;
}
.btn-ghost:hover { border-color: var(--gold); }
.mini-toggle { border: 1px solid var(--line); color: var(--muted); font-family: var(--font-label); letter-spacing: .12em; text-transform: uppercase; }
.mini-toggle.on { color: var(--gold-2); border-color: var(--gold); }
.mini-toggle.on::before { background: var(--gold); }

/* ---------------- form ---------------- */
.input { background: var(--velvet); border: 1px solid var(--line); color: var(--ink); border-radius: 0; }
.input:focus { border-color: var(--gold); }
.field-label { color: var(--muted); font-family: var(--font-label); letter-spacing: .16em; }

/* ---------------- hero ---------------- */
.hero { gap: clamp(28px, 5vw, 64px); border-bottom: 1px solid var(--line-2); }
.hero-title {
  font-family: var(--font-sign); text-transform: uppercase;
  font-size: clamp(2.9rem, 6.4vw, 5.4rem); line-height: .92; letter-spacing: -.005em;
}
.hero-kicker { display: flex; align-items: center; gap: 10px; color: var(--gold); font-family: var(--font-label); letter-spacing: .18em; font-size: .72rem; margin-bottom: 14px; }
.hero-kicker::before { content: ''; width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); box-shadow: 0 0 10px rgba(217, 180, 91, .6); }
.hero-sub { color: var(--muted); }
.hero-meta { color: var(--gold); font-family: var(--font-label); letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; }
.hero-meta b { color: var(--gold-2); }

.cabinet {
  border: 1px solid var(--gold);
  background: linear-gradient(180deg, #2A1119, #170A0D 45%, #1F0D13);
  padding: 14px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .8),
    inset 0 0 0 3px rgba(0, 0, 0, .55),
    inset 0 0 0 4px rgba(217, 180, 91, .3),
    inset 0 0 46px rgba(217, 180, 91, .08),
    0 24px 60px rgba(0, 0, 0, .6),
    0 0 120px rgba(179, 22, 47, .2);
  display: grid; gap: 10px;
}
.cabinet .hero-reels { border: 0; box-shadow: none; background: transparent; padding: 0; margin: 0 auto; width: max-content; }
.cabinet-plate {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 7px 10px 2px; border-top: 1px solid var(--line-2); color: var(--gold);
}
.cabinet-plate .label { font-size: .68rem; }
.cabinet-plate strong { font-family: var(--font-sign); font-size: 1.5rem; color: var(--gold-2); }
.hero-reels .reel-view {
  background: linear-gradient(180deg, #1C0C11, #14080B);
  border: 1px solid rgba(217, 180, 91, .16);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 246, 216, .05);
}
.bulbs { display: flex; justify-content: space-between; padding: 0 4px 10px; }
.bulbs i {
  width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFF6D8, var(--gold) 55%, #7A5312 100%);
  box-shadow: 0 0 10px rgba(243, 227, 168, .55), 0 0 22px rgba(217, 180, 91, .3);
  animation: bulb 2.4s ease-in-out infinite;
}
.bulbs i:nth-child(2n) { animation-delay: .3s; }
.bulbs i:nth-child(3n) { animation-delay: .6s; }
.bulbs i:nth-child(4n) { animation-delay: .9s; }
@keyframes bulb { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* ---------------- statistiche ---------------- */
.stat-row { background: var(--line-2); border-color: var(--line-2); }
.stat {
  background: linear-gradient(180deg, rgba(217, 180, 91, .05), transparent);
  padding: 16px 20px;
}
.stat-label { font-family: var(--font-label); letter-spacing: .18em; color: var(--muted); }
.stat-value { font-family: var(--font-label); letter-spacing: .05em; font-size: 1.6rem; color: var(--gold-2); }

/* ---------------- rail e card ---------------- */
.rail-head h2 { font-family: var(--font-sign); color: var(--gold-2); font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.rail-head .count { font-family: var(--font-label); letter-spacing: .14em; color: var(--muted); }

.game-card {
  background: linear-gradient(180deg, #200E13, #14080B);
  border: 1px solid var(--line);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(0, 0, 0, .6);
}
.game-card:hover { border-color: var(--gold); box-shadow: 0 20px 44px rgba(0, 0, 0, .55), 0 0 26px rgba(217, 180, 91, .14); }
.mini-reels i { background: rgba(0, 0, 0, .3); border: 1px solid rgba(217, 180, 91, .1); }
.card-glyph, .card-motif { filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .55)); }
.card-info {
  background: linear-gradient(180deg, #F3E3A8 0%, #E2C377 40%, #C79C3F 100%);
  border-top: 1px solid rgba(0, 0, 0, .35);
  padding: 9px 12px 11px;
}
.card-info strong { color: #1A0D06; font-family: var(--font-sign); font-weight: 400; text-transform: uppercase; font-size: .84rem; letter-spacing: .01em; }
.card-info em { color: #4A3408; font-family: var(--font-label); letter-spacing: .1em; font-size: .58rem; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-scroll { padding-bottom: 12px; align-items: flex-start; }
.card-motif { color: var(--gold) !important; }
.card-flag { background: linear-gradient(180deg, var(--ruby-2), var(--ruby)); color: var(--gold-2); border: 1px solid rgba(243, 227, 168, .4); font-family: var(--font-label); }
.card-new { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #1A0D06; font-family: var(--font-label); }

/* ---------------- gioco ---------------- */
.game-body { background: var(--velvet); }
.game-top { background: transparent; border-bottom: 1px solid var(--line-2); }
.game-back { border: 1px solid var(--line); color: var(--gold-2); }
.game-title strong { font-family: var(--font-sign); text-transform: uppercase; font-weight: 400; letter-spacing: .01em; }
.game-title span { font-family: var(--font-label); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-size: .68rem; }
.game-balance {
  background: linear-gradient(180deg, var(--velvet-3), var(--velvet-2));
  border: 1px solid var(--line); color: var(--gold-2);
  font-family: var(--font-label); letter-spacing: .06em; font-size: 1.05rem;
}
.reels { background: linear-gradient(180deg, #2A1119, #170A0D 45%, #1F0D13); border: 1px solid var(--gold); padding: 12px; gap: 8px;
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .55), inset 0 0 0 4px rgba(217, 180, 91, .28), 0 20px 50px rgba(0, 0, 0, .55); }
.reel-view { background: linear-gradient(180deg, #1C0C11, #14080B); border: 1px solid rgba(217, 180, 91, .16); box-shadow: inset 0 0 18px rgba(0, 0, 0, .75); }
.game-betbar { background: linear-gradient(180deg, var(--velvet-2), #0D0507); border-top: 1px solid var(--line-2); }
.bet-stepper { border: 1px solid var(--line); }
.bet-value { font-family: var(--font-label); letter-spacing: .08em; font-size: 1.15rem; color: var(--gold-2); }
.win-card { background: rgba(18, 7, 9, .95); border: 1px solid var(--gold); box-shadow: 0 0 40px rgba(217, 180, 91, .2); }
.win-amount { color: var(--gold-2); }
.win-label { color: var(--gold); font-family: var(--font-label); }
.multiplier { font-family: var(--font-label); color: var(--gold-2); }
.free-strip { background: linear-gradient(90deg, var(--ruby-2), var(--ruby)); color: var(--gold-2); border-bottom: 1px solid rgba(217, 180, 91, .4); }
.toast { background: var(--velvet-3); border-left-color: var(--gold); }
.empty { border-color: var(--line); }

/* istantanei */
.instant-head .win-label { color: var(--muted); }
.mine-cell { background: linear-gradient(180deg, #1C0C11, #14080B); border: 1px solid rgba(217, 180, 91, .16); }
.mine-cell:hover { border-color: var(--line); }
.mine-cell.opened { color: var(--gold-2); border-color: var(--gold); background: rgba(217, 180, 91, .06); }
.keno-cell { background: linear-gradient(180deg, #1C0C11, #14080B); border: 1px solid rgba(217, 180, 91, .14); color: var(--muted); }
.keno-cell.picked { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #1A0D06; border-color: #FFEFC2; }
.keno-cell.drawn { background: #2A1018; border-color: var(--ruby-2); color: var(--gold-2); }
.keno-cell.drawn.picked { background: linear-gradient(180deg, #FFF3C9, var(--gold)); }
.rb-cell { background: linear-gradient(180deg, #1C0C11, #14080B); border: 1px solid rgba(217, 180, 91, .14); }
.rb-cell.red { background: linear-gradient(180deg, #5C0A16, #3A0610); border-color: #7A1220; }
.rb-cell.black { background: #14080B; }
.rb-cell.has { outline-color: var(--gold); }
.rb-cell.outside { color: var(--muted); font-family: var(--font-label); letter-spacing: .1em; text-transform: uppercase; font-size: .66rem; }
.roulette-result.red { color: #FF6B76; }
.roulette-result.black { color: var(--gold-2); }
.roulette-result.green { color: #7ED88F; }
.card { background: linear-gradient(180deg, #FBF6E9, #EADFC4); border: 1px solid var(--gold); color: #1A0D06; }
.card.red { color: #8E1026; }
.card.back { background: linear-gradient(180deg, var(--velvet-3), var(--velvet-2)); border-color: var(--line); color: var(--gold); }
.dice-scale, .range::-webkit-slider-runnable-track { background: rgba(217, 180, 91, .18); }
.range::-webkit-slider-thumb { background: linear-gradient(180deg, var(--gold-2), var(--gold)); }
.dice-result.ok { color: var(--gold-2); }
.dice-result.ko { color: var(--danger); }

/* ---------------- auth e pagine ---------------- */
.auth-card { background: linear-gradient(180deg, var(--velvet-2), var(--velvet)); border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
.auth-title { font-family: var(--font-sign); color: var(--gold-2); }
.page-head h1 { font-family: var(--font-sign); color: var(--gold-2); }
.list { border-color: var(--line-2); }
.list-row { border-bottom-color: var(--line-2); }
.amount-pos { color: var(--gold-2); }

/* ---------------- admin ---------------- */
.admin-side { background: var(--velvet-2); border-right-color: var(--line-2); }
.admin-nav a.on { border-left-color: var(--gold); background: rgba(217, 180, 91, .06); }
.admin-head h1 { font-family: var(--font-sign); color: var(--gold-2); }
.panel { border-color: var(--line-2); background: var(--velvet-2); }
.panel-head { border-bottom-color: var(--line-2); }
.panel-head h2 { font-family: var(--font-sign); font-weight: 400; color: var(--gold-2); letter-spacing: .01em; }
.kpi .cell { background: var(--velvet-2); border-color: var(--line-2); }
.kpi .k { color: var(--muted); }
.kpi .v { font-family: var(--font-label); letter-spacing: .04em; color: var(--gold-2); }
.tbl th { color: var(--muted); }
.tbl td { border-bottom-color: var(--line-2); }
.tbl tr:hover td { background: rgba(217, 180, 91, .04); }
.admin-tag { background: var(--gold); color: #1A0D06; }
.badge-status.ok { background: rgba(126, 216, 143, .12); color: var(--ok); }
.badge-status.ko { background: rgba(255, 95, 87, .12); color: var(--danger); }

/* ---------------- mobile ---------------- */
.bottom-nav { background: linear-gradient(180deg, var(--velvet-2), #0D0507); border-top-color: var(--line); }
.bottom-nav a { font-family: var(--font-label); letter-spacing: .12em; }
.bottom-nav a.on .bn-ico svg { stroke: var(--gold); }
@media (max-width: 900px) {
  .app-header { height: 60px; }
  .brand-name { font-size: 1.25rem; }
  .ribbon .ribbon-right { display: none; }
  .hero-title { font-size: clamp(2.2rem, 9.6vw, 3rem); }
  .hero-reels { padding: 10px; }
  .hero-cover { max-height: 250px; aspect-ratio: 16 / 11; }
  .cabinet { padding: 10px; }
  .card-info strong { font-size: .76rem; }
  .card-info em { font-size: .54rem; }
}

/* simboli: gemme e metalli, non caramelle */
.sy-cherry  { --s1: #E8556A; --s2: #6B0F1A; }
.sy-lemon   { --s1: #E8C56A; --s2: #6B4A0F; }
.sy-seven   { --s1: #F3E3A8; --s2: #8C6320; }
.sy-bell    { --s1: #E8C56A; --s2: #6B4A0F; }
.sy-gem     { --s1: #7FD3E8; --s2: #0E3A4A; }
.sy-star    { --s1: #F3E3A8; --s2: #8C6320; }
.sy-coin    { --s1: #E8C56A; --s2: #6B4A0F; }
.sy-crown   { --s1: #F3E3A8; --s2: #8C6320; }
.sy-skull   { --s1: #F7EFDF; --s2: #3A2A20; }
.sy-ankh    { --s1: #F3E3A8; --s2: #8C6320; }
.sy-pig     { --s1: #E8A0A8; --s2: #5A1A20; }
.sy-clover  { --s1: #7ED88F; --s2: #143A1E; }
.sy-wild    { --s1: #F7EFDF; --s2: #8E1026; }
.sy-scatter { --s1: #B9A8FF; --s2: #221449; }

/* RTP in un angolo della card, non nella targhetta */
.card-rtp {
  position: absolute; right: 8px; top: 8px; z-index: 2;
  font-family: var(--font-label); font-size: .6rem; letter-spacing: .12em;
  color: var(--gold-2); background: rgba(18, 7, 9, .82);
  border: 1px solid var(--line-2); padding: 2px 6px;
}

/* con il nastro in alto la sala non deve scrollare: il gioco sta in una schermata */
.game-body { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
.game-body .game-page { flex: 1 1 auto; min-height: 0; }
.game-body .game-body .game-stage { min-height: 0; }

.card-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.game-card:hover .card-cover { transform: scale(1.03); transition: transform .35s ease; }

.hero-cover { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid rgba(0, 0, 0, .65); }
.card-art::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 46px rgba(0, 0, 0, .55), inset 0 -16px 26px rgba(0, 0, 0, .35);
}

/* i tavoli si giocano sul feltro */
.game-stage.kind-roulette, .game-stage.kind-blackjack {
  background-image: linear-gradient(rgba(11, 4, 6, .55), rgba(11, 4, 6, .75)), url('/assets/tex/feltro.webp');
  background-size: auto, 420px 420px;
}

.roulette-result.muted { color: rgba(217, 180, 91, .35); font-size: clamp(1.6rem, 3vw, 2.2rem); }

/* il fondale della sala: la foto hero-sala, spenta sotto i gradienti */
.has-hero .hero { position: relative; isolation: isolate; }
.has-hero .hero::before {
  content: ''; position: absolute; z-index: -1; inset: 0 calc(-1 * var(--pad));
  background:
    linear-gradient(90deg, rgba(13, 5, 7, .97) 0%, rgba(13, 5, 7, .9) 42%, rgba(13, 5, 7, .62) 100%),
    url('/assets/art/hero-sala-2000.webp') center / cover no-repeat;
  opacity: .75;
}
@media (max-width: 900px) {
  .has-hero .hero::before {
    background:
      linear-gradient(180deg, rgba(13, 5, 7, .96) 0%, rgba(13, 5, 7, .88) 60%, rgba(13, 5, 7, .7) 100%),
      url('/assets/art/hero-sala-1200.webp') center / cover no-repeat;
    opacity: .8;
  }
}

/* ============================================================
   MOBILE — shell, rulli, sala. Aggiunto dopo la ricerca: safe area,
   target da 44-48 px, finestra del rullo con sfumatura, hero compatto.
   ============================================================ */

/* la tacca e la barra dei gesti: senza questo il nastro finisce sotto il notch */
.ribbon, .app-header { padding-top: env(safe-area-inset-top); }
.bottom-nav { padding-bottom: calc(env(safe-area-inset-bottom)); }

/* ---------- rulli: finestra, simboli immagine, atterraggio ---------- */
.reel-col {
  position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.reels { position: relative; isolation: isolate; }
.reels::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 4; border-radius: inherit;
  background: linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 14%, rgba(0, 0, 0, 0) 86%, rgba(0, 0, 0, .5));
  box-shadow: inset 0 0 30px rgba(0, 0, 0, .7);
}
.reel-view { position: relative; }
.reel-img {
  width: 94%; height: 94%; object-fit: contain; display: block;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .5));
}
.reel-view:has(.reel-img) svg { display: none; }
.reel-col.landed { animation: reelLand .24s ease-out; }
@keyframes reelLand {
  0% { transform: translateY(0); }
  40% { transform: translateY(2px); }
  100% { transform: translateY(0); }
}

/* ---------- partita su telefono: comandi grossi, saldo sempre in vista ---------- */
@media (max-width: 900px) {
  .game-back { width: 44px; height: 44px; display: grid; place-items: center; }
  .bet-stepper button { min-width: 48px; min-height: 48px; }
  .mini-toggle { min-width: 60px; min-height: 48px; }
  .game-betbar { padding-bottom: calc(env(safe-area-inset-bottom) + 6px); }
  .game-title strong { font-size: 1.15rem; }
  .game-stage { place-items: center; }
  .spin-btn { font-size: 1.15rem; }
}

/* ---------- sala: hero compatto, i giochi si vedono subito ---------- */
@media (max-width: 900px) {
  .hero { padding: 10px 0 6px; gap: 14px; }
  .hero-art { order: 1; }
  .hero-copy { order: 2; }
  .cabinet { padding: 8px; }
  .bulbs { display: none; }
  .cabinet-plate { display: none; }
  .hero-cover { max-height: 168px; aspect-ratio: 16 / 10; }
  .hero-kicker { margin: 0 0 8px; font-size: .58rem; }
  .hero-title { font-size: clamp(1.9rem, 8.6vw, 2.5rem); }
  .hero-sub { margin-top: 8px; font-size: .9rem; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .hero-meta { margin-top: 10px; gap: 8px 14px; font-size: .58rem; }
  .hero-actions { margin-top: 12px; gap: 8px; }
  .hero-actions .btn { min-height: 48px; }
  /* i tre numeri sono già nel nastro in alto: sul telefono non si ripetono */
  .stat-row { display: none; }
  .rail-head h2 { font-size: 1.15rem; }
  .game-card { flex-basis: 150px; }
  .rail { scroll-margin-top: 70px; }
}

/* ---------- target minimi su touch, senza gonfiare il desktop ---------- */
@media (pointer: coarse) {
  .nav-links a, .bottom-nav a, .btn, .mini-toggle, .tab, .chip, .ghost,
  button:not(.spin-btn):not(.bet-stepper button) { min-height: 44px; }
  .bottom-nav a { min-height: 56px; }
}

/* la sala in verticale: tabellone subito sotto l'intestazione, comandi in basso */
@media (max-width: 900px) {
  .game-stage { flex: 0 0 auto; place-items: start center; padding-top: 8px; }
  .game-betbar { margin-top: auto; }
  .game-top { position: sticky; top: 0; z-index: 5;
    background: linear-gradient(180deg, rgba(11, 5, 7, .96), rgba(11, 5, 7, .82));
    backdrop-filter: blur(6px); }
}

/* striscia dei simboli sotto i rulli (paga minima) */
.sym-strip { display: flex; gap: 10px; justify-content: center; align-items: flex-start;
  margin-top: 14px; padding: 0 6px; width: 100%; overflow-x: auto; scrollbar-width: none; }
.sym-strip::-webkit-scrollbar { display: none; }
.sym-chip { flex: 0 0 auto; display: grid; justify-items: center; gap: 2px; opacity: .92; }
.sym-chip img, .sym-chip svg { width: 42px; height: 42px; object-fit: contain; display: block;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }
.sym-chip span { font-family: var(--font-label); font-size: .58rem; letter-spacing: .08em;
  color: var(--gold-2); text-transform: uppercase; }
@media (min-width: 901px) { .sym-strip { display: none; } }

/* il rullo è una finestra: la colonna non deve crescere con la striscia che scorre */
.reel-col { height: calc(var(--ch) * var(--rows)); }

/* ---------- roulette su telefono: tabella che scorre, celle toccabili ---------- */
@media (max-width: 900px) {
  .roulette-board { grid-template-columns: 44px minmax(0, 1fr); overflow-x: auto; padding-bottom: 4px; }
  .rb-cell { min-width: 40px; min-height: 44px; }
  .rb-outside { grid-template-columns: repeat(6, minmax(56px, 1fr)); }
  .rb-zero .rb-cell { min-height: 44px; }
  /* header: logo e saldo toccabili */
  .brand { min-height: 44px; display: flex; align-items: center; }
  .balance-chip { min-height: 44px; }
  .user-btn { width: 44px; height: 44px; }
  .head-accedi, .head-register { min-height: 44px; display: inline-flex; align-items: center; }
}

/* roulette: la griglia numeri diventa scorrevole, celle da 40x48 (il pollice le prende) */
@media (max-width: 900px) {
  .roulette-board { grid-template-columns: 44px minmax(0, 1fr); }
  .rb-numbers, .rb-outside { grid-template-columns: repeat(12, minmax(40px, 1fr)); }
  .rb-cell { min-width: 44px !important; min-height: 44px !important; font-size: .74rem; }
  .rb-outside { overflow-x: auto; }
}

/* hold & win: moneta come medaglione, valore leggibile sopra */
.reel-view.blank-cell::after { display: none; }
.coin-val { background: rgba(6, 2, 4, .72); border: 1px solid rgba(217, 180, 91, .5);
  border-radius: 999px; padding: 1px 8px; font-family: var(--font-label); letter-spacing: .06em;
  color: var(--gold-3); top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* residui dell'audit mobile: link testuali e slider del dado */
@media (pointer: coarse) {
  .rail-links a { min-height: 44px; min-width: 44px; padding-right: 8px; display: flex; align-items: center; }
  .range { height: 44px; }
  .dice-track { min-height: 44px; align-items: center; }
}

/* striscia simboli: va a capo, non deve tagliare il primo simbolo */
.sym-strip { flex-wrap: wrap; row-gap: 10px; }

/* mines: le celle coperte devono leggersi come "coperte", non come buchi */
.mine-cell { position: relative; }
.mine-cell::after {
  content: ''; position: absolute; width: 10px; height: 10px; border-radius: 2px;
  border: 1px solid rgba(217, 180, 91, .28); transform: rotate(45deg);
}
.mine-cell.safe::after, .mine-cell.boom::after { display: none; }

/* la vincita non deve coprire i simboli che hanno vinto: su telefono va sopra i rulli */
@media (max-width: 900px) {
  .game-stage .win-layer { align-items: flex-start; padding-top: 4px; }
  .win-layer .win-card, .win-layer > div { max-width: 92%; }
}

/* ---------- interruttore suoni nella testata del gioco ---------- */
.game-sound {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 1px solid var(--line, #2a2f3a); border-radius: 999px;
  color: var(--muted, #9aa0aa); font: inherit; font-size: .72rem; letter-spacing: .02em;
  padding: 5px 10px; cursor: pointer; white-space: nowrap;
}
.game-sound .snd-ico { display: inline-flex; }
.game-sound .snd-ico svg { width: 15px; height: 15px; fill: currentColor; display: block; }
@media (max-width: 600px) {
  .game-sound .snd-txt { display: none; }   /* sul telefono basta l'icona */
  .game-sound { padding: 6px 8px; }
}
.game-sound:hover { color: var(--ink, #f7efdf); border-color: var(--gold, #d9b45b); }
.game-sound[aria-pressed="false"] { color: var(--danger, #e8483f); border-color: currentColor; }

/* ============================================================
   CELLE VUOTE — tessuto, non buchi.
   La cella senza simbolo deve leggersi come "carta pronta", non come un guasto.
   ============================================================ */
.reel-view.blank-cell {
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(217, 180, 91, .07), transparent 62%),
    repeating-linear-gradient(45deg, rgba(217, 180, 91, .05) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(-45deg, rgba(217, 180, 91, .05) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, #1C0D12, #120609);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 235, 180, .05);
}
.reel-view.blank-cell::before {
  content: ''; position: absolute; width: 30%; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(217, 180, 91, .16);
  background: radial-gradient(circle, rgba(217, 180, 91, .10), transparent 70%);
}

/* ============================================================
   ROULETTE — pannello mobile rifatto.
   Desktop: tabella vera, colonne da tre numeri (1-2-3 | 4-5-6 | …).
   Telefono: trasposta in 12 righe da 3 numeri, celle grandi sotto il pollice.
   ============================================================ */
.rb-numbers { grid-auto-flow: column; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(3, 1fr); }
.rb-outside { grid-template-columns: repeat(12, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .roulette-board { grid-template-columns: minmax(0, 1fr); overflow-x: visible; gap: 6px; }
  .rb-zero .rb-cell { min-height: 48px; width: 100%; }
  .rb-numbers {
    grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: none; grid-auto-rows: 48px; gap: 6px;
  }
  .rb-numbers .rb-cell { min-width: 0 !important; min-height: 48px !important; font-size: 1rem; }
  .rb-outside { grid-template-columns: repeat(3, 1fr); gap: 6px; overflow-x: visible; }
  .rb-outside .rb-cell { min-width: 0 !important; min-height: 48px !important; font-size: .68rem; letter-spacing: .02em; }
  .roulette-result { font-size: 2.2rem; margin-bottom: 8px; }
  .roulette-foot { margin-top: 10px; }
  .roulette-foot .btn { min-height: 44px; }
}

/* ============================================================
   TAVOLI — panno verde, carte vere, mani che si sovrappongono.
   ============================================================ */
.game-stage.kind-blackjack, .game-stage.kind-roulette {
  background:
    radial-gradient(70% 55% at 50% 22%, rgba(24, 92, 62, .38), transparent 70%),
    radial-gradient(120% 90% at 50% 100%, rgba(6, 22, 15, .9), transparent 70%),
    #08160F;
  border-radius: 14px;
}
.bj-wrap { padding: 10px 4px 4px; }
.bj-dealer, .bj-player { gap: 8px; }
.bj-cards { gap: 6px; min-height: 88px; align-items: flex-start; }
.win-label { font-family: var(--font-label); letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); font-size: .64rem; display: flex; align-items: center; gap: 8px; }
.win-label span:empty { display: none; }
.win-label span {
  font-family: var(--font-sign); font-size: .95rem; letter-spacing: 0; color: #1a0d06;
  background: linear-gradient(180deg, #FBF0C4, #D9B45B); border-radius: 999px; padding: 0 10px; line-height: 1.5;
}
.bj-sep { background: linear-gradient(90deg, transparent, rgba(217, 180, 91, .35), transparent); margin: 16px 0; }

.card {
  position: relative; width: 66px; height: 94px; border-radius: 8px; padding: 0;
  background: linear-gradient(160deg, #FFFDF6 0%, #F3EAD6 62%, #E6D9BE 100%);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(0, 0, 0, .06);
  color: #17120C; display: block; overflow: hidden;
}
.card .c-corner { position: absolute; top: 4px; left: 5px; display: grid; justify-items: center; line-height: .95; }
.card .c-corner b { font-family: var(--font-label); font-size: 1rem; letter-spacing: 0; }
.card .c-corner i { font-style: normal; font-size: .78rem; }
.card .c-corner--br { top: auto; left: auto; right: 5px; bottom: 4px; transform: rotate(180deg); }
.card .c-center { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2rem; opacity: .92; }
.card.red { color: #B3162F; }
.card.back {
  background:
    repeating-linear-gradient(45deg, rgba(217, 180, 91, .16) 0 2px, transparent 2px 7px),
    linear-gradient(160deg, #2A1119, #150708);
  border-color: rgba(217, 180, 91, .5);
}
.card.back .c-back-mark { position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-sign); font-size: 1.2rem; color: rgba(217, 180, 91, .55); }
.bj-cards.many .card + .card { margin-left: -22px; }
.bj-actions { gap: 8px; margin-top: 16px; }
.bj-actions .btn { flex: 1 1 0; min-height: 48px; }

@media (max-width: 900px) {
  .card { width: 58px; height: 82px; }
  .card .c-center { font-size: 1.7rem; }
  .card .c-corner b { font-size: .9rem; }
  .bj-cards { min-height: 82px; }
  .bj-actions { flex-wrap: wrap; }
  .bj-actions .btn { flex: 1 1 40%; }
}

/* tavoli su telefono: il panno riempie la scena, il tavolo scorre se serve */
@media (max-width: 900px) {
  .game-stage.kind-blackjack, .game-stage.kind-roulette { align-items: stretch; padding: 6px; }
  .game-stage.kind-roulette { overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 10px; }
  .bj-wrap { display: flex; flex-direction: column; height: 100%; }
  .bj-sep { margin: auto 0; }
  .bj-actions { margin-top: auto; }
}

/* la roulette è lunga: prende lo spazio che avanza e scorre dentro, non sotto la piega */
@media (max-width: 900px) {
  .game-stage.kind-roulette { flex: 1 1 auto; min-height: 0; }
  .game-stage.kind-blackjack { flex: 1 1 auto; min-height: 0; }
}

/* testata della partita: indietro e audio sempre toccabili, anche quando il titolo è lungo */
@media (max-width: 900px) {
  .game-back { flex: 0 0 auto; min-width: 44px; width: 44px; }
  .game-sound { min-width: 44px; min-height: 44px; flex: 0 0 auto; }
  .game-sound .snd-txt { display: none; }
  .user-sound { min-height: 44px; }
}

/* azioni del tavolo: tre pulsanti in fila, sempre dentro la scena */
@media (max-width: 900px) {
  .game-stage.kind-blackjack { overflow-y: auto; }
  .bj-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .bj-actions .btn { min-height: 48px; padding: 0 4px; font-size: .74rem; letter-spacing: .04em; }
}

/* ============================================================
   ANDROID / CO. — cose che il desktop non mostra
   ============================================================ */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overscroll-behavior-y: contain; }        /* il pull-to-refresh non deve ricaricare a giro aperto */
body { color-scheme: dark; }
body.book { color-scheme: light; }              /* la sala scommesse è chiara: niente controlli scuri */

/* doppio tocco rapido sul GIRA = zoom; il flash grigio non deve lampeggiare su ogni tasto */
a, button, .tab, .cell, .card, .game-card, [role=button], label {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn, button, .nav-links a, .bottom-nav a, .tab, .game-card, .sym-chip {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}

/* la partita deve stare in una schermata anche su un 360x640:
   la scena prende lo spazio che avanza e scorre se il tabellone è più alto */
@media (max-width: 900px) {
  .game-stage { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .game-betbar { margin-top: 0; }
}
@media (max-height: 720px) {
  .sym-strip { margin-top: 8px; row-gap: 6px; }
  .sym-chip img, .sym-chip svg { width: 34px; height: 34px; }
  .sym-chip span { font-size: .5rem; }
  .game-title strong { font-size: 1.05rem; }
}

/* schermi stretti (360-400 px): la barra puntata non deve spezzarsi male */
@media (max-width: 420px) {
  .bet-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; }
  .bet-stepper { grid-column: 1 / -1; }
  .bet-row .mini-toggle { min-height: 44px; }
  .game-betbar { gap: 8px; }
  .spin-btn { min-height: 54px; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .hero-meta { font-size: .54rem; }
}

/* ============================================================
   Correzioni viste sul telefono vero (OnePlus, 363x659 CSS, DPR 3.5)
   ============================================================ */
@media (max-width: 900px) {
  /* il pulsante audio era un cerchio da 100 px in mezzo alla testata */
  .game-sound {
    width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; flex: 0 0 44px;
    font-size: 1rem; border-radius: 50%;
  }
  .game-sound .snd-txt { display: none; }
  .game-sound svg { width: 20px; height: 20px; }
  /* la riga di meta (5x5 · cluster · …) non deve andare a capo tre volte */
  .game-title span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .game-title { min-width: 0; }
  .game-top { gap: 10px; }
}
@media (max-width: 420px) {
  .game-title strong { font-size: 1.05rem; }
  .game-title span { font-size: .56rem; letter-spacing: .08em; }
}

/* barra puntata: flex invece di griglia, così MAX da solo occupa la riga */
@media (max-width: 420px) {
  .bet-row { display: flex; flex-wrap: wrap; gap: 8px; }
  .bet-stepper { flex: 1 1 100%; }
  .bet-row .mini-toggle { flex: 1 1 0; min-width: 0; }
}

/* roulette: il totale puntata resta in vista e il fondo sfuma (si capisce che c'è altro) */
@media (max-width: 900px) {
  .game-stage.kind-roulette { position: relative; }
  .game-stage.kind-roulette .roulette-wrap { padding-bottom: 4px; }
  .roulette-foot {
    position: sticky; bottom: 0; z-index: 6; margin-top: 10px;
    padding: 10px 12px 12px;
    background: linear-gradient(180deg, rgba(6, 22, 15, 0), rgba(6, 22, 15, .94) 32%);
    backdrop-filter: blur(3px);
  }
}

/* blackjack: prima mano = due carte fantasma, non un tavolo vuoto */
.bj-cards:empty::before, .bj-cards:empty::after {
  content: ''; width: 66px; height: 94px; border-radius: 8px;
  border: 1px dashed rgba(217, 180, 91, .28); background: rgba(255, 255, 255, .03);
}
.bj-cards:empty::after { display: none; }
@media (max-width: 900px) {
  .bj-cards:empty::before, .bj-cards:empty::after { width: 58px; height: 82px; }
}

/* schermi bassi (telefono con barra del browser): la sala deve mostrare i giochi */
@media (max-width: 900px) and (max-height: 700px) {
  .hero { padding-top: 6px; gap: 10px; }
  .hero-cover { max-height: 124px; aspect-ratio: 16 / 8; }
  .hero-title { font-size: clamp(1.6rem, 8vw, 2rem); }
  .hero-sub { -webkit-line-clamp: 1; font-size: .82rem; }
  .hero-meta { display: none; }
  .hero-actions { margin-top: 10px; }
  .hero-actions .btn { min-height: 44px; }
}

/* senza il nastro in alto la testata della partita deve gestire da sola la tacca */
.game-top { padding-top: env(safe-area-inset-top); }

/* ============================================================
   PRESENTAZIONE DELLA VINCITA — gruppo acceso, importo del gruppo,
   totale che conta, linee disegnate. Tempi dalla ricerca: pausa 280-800 ms.
   ============================================================ */
.win-meter {
  position: absolute; right: 10px; top: 10px; z-index: 7; pointer-events: none;
  display: grid; justify-items: end; gap: 2px; padding: 8px 14px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(36, 14, 20, .92), rgba(12, 5, 8, .94));
  border: 1px solid rgba(243, 227, 168, .45);
  box-shadow: 0 14px 30px -14px #000, 0 0 26px rgba(217, 180, 91, .25);
  opacity: 0; transform: translateY(-6px) scale(.96); transition: opacity .25s ease, transform .25s ease;
}
.win-meter.on { opacity: 1; transform: translateY(0) scale(1); }
.win-meter span { font-family: var(--font-label); font-size: .56rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.win-meter b {
  font-family: var(--font-sign); font-size: 1.5rem; line-height: 1; color: var(--gold-3);
  font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 rgba(0, 0, 0, .6), 0 0 18px rgba(255, 214, 130, .35);
}

/* importo del singolo gruppo: piccola placca sopra il gruppo */
.win-float {
  position: absolute; z-index: 6; transform: translate(-50%, -50%) scale(.8);
  padding: 3px 9px; border-radius: 999px; pointer-events: none;
  font-family: var(--font-sign); font-size: .92rem; color: #1A0D06;
  background: linear-gradient(180deg, #FBF0C4, #D9B45B);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .5), 0 0 18px rgba(255, 224, 150, .45);
  animation: floatWin .9s cubic-bezier(.2, 1.4, .4, 1) forwards;
}
@keyframes floatWin {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
  35% { opacity: 1; transform: translate(-50%, -60%) scale(1.06); }
  100% { opacity: 0; transform: translate(-50%, -95%) scale(1); }
}

/* simboli vincenti accesi */
.reel-view.win { border-radius: 8px; }
.reel-view.win::after {
  content: ''; position: absolute; inset: -2px; border-radius: 9px; z-index: 3; pointer-events: none;
  box-shadow: inset 0 0 0 2px rgba(255, 232, 170, .85), 0 0 22px rgba(217, 180, 91, .55);
  animation: winPulse .9s ease-in-out infinite alternate;
}
@keyframes winPulse { from { opacity: .55; } to { opacity: 1; } }

/* linee vincenti disegnate sopra i rulli */
.win-lines { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.win-line-path {
  fill: none; stroke: rgba(255, 232, 170, .8); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(255, 214, 130, .8));
  stroke-dasharray: 600; stroke-dashoffset: 600; animation: drawLine .5s ease forwards;
}
@keyframes drawLine { to { stroke-dashoffset: 0; } }
.win-line-path:nth-child(even) { stroke: rgba(255, 180, 120, .75); }

@media (max-width: 900px) {
  .win-meter { right: 6px; top: 6px; padding: 6px 10px; }
  .win-meter b { font-size: 1.15rem; }
  .win-float { font-size: .8rem; padding: 2px 8px; }
}

/* chi ha chiesto meno movimento non deve vedere pulsazioni e voli */
@media (prefers-reduced-motion: reduce) {
  .win-float { animation: none; opacity: 1; transform: translate(-50%, -50%); }
  .win-line-path { animation: none; stroke-dashoffset: 0; }
  .reel-view.win::after { animation: none; }
}

/* vincita: quello che non ha vinto si abbassa, e le linee si vedono anche sui simboli chiari */
.reels.has-win .reel-view:not(.win) { opacity: .38; transition: opacity .18s ease; }
.reel-view.win { opacity: 1; }
.win-line-path {
  stroke-width: 5;
  paint-order: stroke;
  stroke: rgba(255, 236, 180, .95);
  filter: drop-shadow(0 0 3px rgba(60, 20, 10, .9)) drop-shadow(0 0 8px rgba(255, 214, 130, .85));
}
@media (max-width: 900px) {
  .win-line-path { stroke-width: 5.5; }
  .win-float { font-size: .95rem; padding: 3px 10px; }
}