/* ============ BILIO — identità grafica: sala da biliardo di notte ============
   Ogni gioco del sito ha una grafica sua: qui niente pixel art (è di Boing),
   niente neon indaco su griglia (è di Blokky), niente foglio da disegno (è di
   Addy), niente noce e ottone (è della Dama), niente panno verde e maioliche
   (è della Scopa). Bilio è una sala buia con una lampada bassa: panno indaco
   violaceo, sponde di grafite col filetto d'alluminio, luce fredda che cade dal
   soffitto e un solo colore acceso — il verde acqua della linea di mira.
   Caratteri: Oswald stretto per i titoli (le insegne dei circoli) e Manrope per
   tutto il resto. Nessuno dei due è usato altrove sul sito. */
:root{
  --ink: #15121D;
  --ink-2: #1E1A2A;
  --ink-3: #272235;

  --felt: #3B2E63;
  --felt-dark: #2A2047;

  --rail: #23202E;
  --rail-hi: #3A3548;
  --alu: #8A93A6;
  --alu-soft: rgba(138, 147, 166, 0.34);
  --alu-faint: rgba(138, 147, 166, 0.14);

  /* il verde acqua è il colore di quello che risponde al dito: la mira, il
     turno, i segni. L'arredo resta alluminio, se no si accende tutto */
  --teal: #5FD0C5;
  --teal-soft: rgba(95, 208, 197, 0.34);
  --teal-faint: rgba(95, 208, 197, 0.12);

  --chalk: #E8E3F5;
  --text: #E8E3F5;
  --text-dim: rgba(232, 227, 245, 0.62);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; user-select:none; }
html,body{ height:100%; }
body{
  margin:0; padding:0; min-height:100%;
  font-family:'Manrope', sans-serif;
  background: var(--ink);
  color: var(--text);
  overscroll-behavior: none;
}

/* ---------- sfondo ---------- */
/* tutto fermo: non c'è niente da animare qui, e uno sfondo statico non costa
   nemmeno un fotogramma mentre le palle rotolano */
#bgLayer{
  position:fixed; inset:0; z-index:0;
  pointer-events:none;
  background: linear-gradient(178deg, #100E17 0%, var(--ink) 40%, #0C0A12 100%);
}
.room-floor{
  position:absolute; inset:0;
  opacity:0.5;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.018) 0 1px, rgba(0,0,0,0) 1px 26px),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.16) 0 1px, rgba(0,0,0,0) 1px 26px);
}
/* il cono della lampada bassa, che cade dall'alto sul tavolo */
.lamp-cone{
  position:absolute; inset:0;
  background:
    radial-gradient(58% 40% at 50% 6%, rgba(255, 236, 200, 0.13) 0%, rgba(255,236,200,0) 72%),
    radial-gradient(90% 60% at 50% 46%, rgba(120, 150, 255, 0.05) 0%, rgba(0,0,0,0) 70%);
}

#app{
  position:relative; z-index:1;
  width:100%;
  min-height:100vh;
  min-height:100dvh;
  max-width:480px;
  margin:0 auto;
  display:flex; flex-direction:column;
  overflow-x:hidden;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---------- caricamento ---------- */
#loadingScreen{
  position:fixed; inset:0; z-index:60;
  background: var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px;
  transition: opacity 0.3s ease;
}
#loadingScreen.hidden{ display:none; }
.loading-title{
  font-family:'Oswald', sans-serif;
  font-weight:500; font-size:34px; letter-spacing:5px; text-transform:uppercase;
  color: var(--chalk);
}
.spinner{
  width:30px; height:30px;
  border:2px solid rgba(95,208,197,0.2);
  border-top-color: var(--teal);
  border-radius:50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

/* ---------- barra in alto ---------- */
.topbar{
  position:relative; z-index:5;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding: max(10px, env(safe-area-inset-top)) 16px 2px;
}
.icon-group{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.icon-btn{
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: rgba(138,147,166,0.1);
  border: 1px solid var(--alu-soft);
  color: var(--text);
  font-size:19px; line-height:1;
  cursor:pointer;
  text-decoration:none;
  flex:0 0 auto;
}
.icon-btn:active{ transform: scale(0.94); }
/* la freccia per la home ha già il suo cerchio dentro all'icona: il fondino del
   pulsante gliene faceva un secondo intorno */
a.icon-btn{ background:none; border:none; font-size:36px; line-height:0; }
/* di chi è il turno: la riga più importante della pagina, sempre in alto */
.turn-pill{
  font-size:12px; font-weight:700;
  letter-spacing:0.3px;
  color: var(--text);
  background: rgba(138,147,166,0.1);
  border:1px solid var(--alu-soft);
  border-radius:999px;
  padding:6px 12px;
  text-align:right;
  min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.turn-pill.thinking{ color: var(--teal); border-color: var(--teal-soft); }

.title-wrap{ padding: 8px 16px 0; }
.title-wrap h1{
  font-family:'Oswald', sans-serif;
  font-weight:500; font-size:24px; letter-spacing:4px; text-transform:uppercase;
  margin:0;
  color: var(--chalk);
  text-align:center;
}
.title-rule{
  position:relative;
  height:1px; margin-top:6px;
  background: linear-gradient(90deg, rgba(138,147,166,0) 0%, var(--alu-soft) 20%, var(--alu-soft) 80%, rgba(138,147,166,0) 100%);
}
.title-rule::before{
  content:'';
  position:absolute; left:50%; top:-3px; transform:translateX(-50%);
  width:7px; height:7px; border-radius:50%;
  background: var(--teal);
  box-shadow: 0 0 8px rgba(95,208,197,0.7);
}

/* ---------- targhe dei due giocatori ---------- */
/* stanno attaccate ai due lati corti del tavolo e sono larghe quanto lui: sono
   i due posti intorno al biliardo, non due barre appiccicate allo schermo */
.player-plate{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; max-width: var(--table-w, 300px);
  padding:6px 11px;
  border:1px solid var(--alu-faint);
  border-radius:8px;
  background: rgba(0,0,0,0.25);
}
/* chi gioca dall'altro capo del tavolo legge sottosopra: la sua targa è girata */
.player-plate.flipped{ transform: rotate(180deg); }
.player-plate.is-turn{ border-color: var(--teal-soft); background: rgba(95,208,197,0.1); }
.plate-name{
  font-family:'Oswald', sans-serif;
  font-weight:500; font-size:15px; letter-spacing:1px;
  color: var(--chalk);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* le palle che gli restano da imbucare, disegnate piccole come sono sul tavolo */
.plate-balls{
  flex:0 0 auto;
  display:flex; align-items:center; gap:3px;
  min-height:14px;
}
.plate-ball{
  width:13px; height:13px; border-radius:50%;
  border:1px solid rgba(0,0,0,0.45);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.35);
}
/* le mezze: la fascia di colore in mezzo al bianco */
.plate-ball.striped{
  background: #F4F1E8;
  background-image: linear-gradient(180deg, transparent 0 26%, var(--bc) 26% 74%, transparent 74% 100%);
}
.plate-dash{ font-size:12px; color: var(--text-dim); letter-spacing:1px; }

/* ---------- il tavolo ---------- */
.game-zone{
  position:relative;
  /* base 0, non auto: l'altezza di questa zona dev'essere "quello che avanza" e
     basta. Con base auto la misura è circolare — il tavolo decide l'altezza
     della zona e la zona decide la misura del tavolo — e dopo un cambio di
     orientamento resta tarata su quella di prima, sforando in fondo. */
  flex:1 1 0;
  display:flex; align-items:center; justify-content:center;
  padding: 8px 12px max(10px, env(safe-area-inset-bottom));
  min-height:0;
  touch-action: none;
}
.table-stack{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  width:100%;
}
/* Niente ombra né angoli tondi qui: la tela è più grande del tavolo (attorno
   c'è l'aria in cui ci sta la stecca) e resta trasparente ai bordi, quindi
   un'ombra sul riquadro cadrebbe staccata dal tavolo. L'ombra la disegna il
   codice dentro alla tela, attaccata alle sponde. */
.table-frame{
  position:relative;
  line-height:0;
}
#tableCanvas{
  display:block;
  touch-action:none;
}

/* messaggi di gioco: al centro del campo, dove si sta guardando */
.center-toast{
  position:absolute; left:50%; top:50%;
  transform: translate(-50%, -50%) scale(0.94);
  padding:9px 16px;
  border-radius:999px;
  background: rgba(10,8,16,0.86);
  border:1px solid var(--teal-soft);
  color: var(--chalk);
  font-size:13px; font-weight:700; letter-spacing:0.3px;
  /* niente nowrap: certi messaggi in francese sono lunghi e su uno schermo da
     320px uscivano dal panno */
  max-width:86%;
  text-align:center;
  pointer-events:none;
  opacity:0;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index:3;
}
.center-toast.show{ opacity:1; transform: translate(-50%, -50%) scale(1); }

/* ---------- pannelli ---------- */
.overlay{
  position:fixed; inset:0; z-index:50;
  background: rgba(8, 6, 13, 0.86);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  opacity:0; pointer-events:none; transition: opacity 0.2s ease;
}
.overlay.show{ opacity:1; pointer-events:auto; }
.card{
  position:relative;
  width:100%; max-width:340px;
  max-height:88vh; overflow-y:auto;
  background: linear-gradient(170deg, var(--ink-3) 0%, var(--ink-2) 100%);
  border:1px solid var(--alu-soft);
  border-radius:12px;
  padding:24px 20px 20px;
  text-align:center;
  box-shadow: 0 18px 40px rgba(0,0,0,0.6);
}
.card h2{
  font-family:'Oswald', sans-serif;
  font-weight:500; font-size:21px; letter-spacing:1.5px;
  margin:0 0 8px;
  color: var(--chalk);
}
.card p{
  font-size:14px; font-weight:400; line-height:1.5;
  color: var(--text-dim);
  margin:0 0 16px;
}
.section-label, .menu-section-label{
  font-size:11px !important; font-weight:700 !important;
  letter-spacing:2px; text-transform:uppercase;
  color: var(--teal) !important;
  margin:16px 0 10px !important;
}
.end-icon, .creator-badge{
  font-size:30px; line-height:1;
  color: var(--teal);
  margin-bottom:8px;
}
.taunt-name{
  font-size:11px !important; font-weight:700 !important;
  letter-spacing:2px; text-transform:uppercase;
  color: var(--teal) !important;
  margin:0 0 6px !important;
}
.taunt-line{ font-style:italic; }
.table-figure{ width:100%; max-width:200px; height:auto; margin:0 auto 14px; display:block; }
.shot-figure{ width:100%; height:auto; margin:0 auto 16px; display:block; border-radius:10px; }

/* il link per uscire da un pannello che non ha un dietro */
.home-link{
  display:block;
  margin-top:12px;
  font-size:12px; font-weight:600;
  color: var(--text-dim);
  text-decoration:none;
}
.home-link:active{ color: var(--teal); }

.primary-btn, .secondary-btn, .menu-row, .language-option, .difficulty-option, .choice-btn, .lb-tab{
  font-family:'Manrope', sans-serif;
  font-weight:700;
  cursor:pointer;
  border-radius:8px;
}
.primary-btn{
  display:block; width:100%;
  font-size:15px;
  padding:13px 16px;
  margin-bottom:8px;
  color:#0F1A19;
  background: linear-gradient(180deg, #7FE3D8, #4FBFB4);
  border:1px solid #9BEDE4;
}
.primary-btn:active{ transform: translateY(1px); }
.secondary-btn{
  display:block; width:100%;
  font-size:13px;
  padding:11px 16px;
  margin-top:6px;
  color: var(--text);
  background: rgba(138,147,166,0.1);
  border:1px solid var(--alu-soft);
}
.secondary-btn:active{ transform: translateY(1px); }

.choice-btn{
  display:flex; align-items:center; gap:14px;
  width:100%;
  padding:14px 16px;
  margin-bottom:10px;
  text-align:left;
  color: var(--text);
  background: rgba(138,147,166,0.1);
  border:1px solid var(--alu-soft);
}
.choice-btn:active{ transform: translateY(1px); }
.choice-icon{ font-size:26px; flex:0 0 auto; color: var(--teal); }
.choice-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.choice-title{ font-family:'Oswald', sans-serif; font-weight:500; font-size:16px; letter-spacing:1px; color: var(--chalk); }
.choice-sub{ font-size:12px; font-weight:400; color: var(--text-dim); }

.difficulty-list{ display:flex; flex-direction:column; gap:8px; }
.difficulty-option{
  width:100%;
  font-size:15px;
  padding:12px 16px;
  color: var(--text);
  background: rgba(138,147,166,0.1);
  border:1px solid var(--alu-soft);
}
.difficulty-option:active{ transform: translateY(1px); }
/* la difficoltà con cui si sta giocando, accesa: si vede da dove si riparte */
.difficulty-option.active{
  border-color: var(--teal);
  color: var(--teal);
  box-shadow: inset 0 0 0 1px var(--teal-faint);
}

.menu-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:6px; }
.menu-row{
  display:flex; align-items:center; gap:10px;
  width:100%;
  font-size:14px; font-weight:600;
  padding:12px 14px;
  color: var(--text);
  background: rgba(138,147,166,0.1);
  border:1px solid var(--alu-soft);
  text-align:left;
}
.menu-row:active{ transform: translateY(1px); }
/* interruttore della linea di mira */
.toggle-row{ justify-content:flex-start; }
.switch{
  margin-left:auto; flex:0 0 auto;
  width:40px; height:22px; border-radius:999px;
  background: rgba(138,147,166,0.18);
  border:1px solid var(--alu-soft);
  position:relative;
  transition: background 0.16s ease, border-color 0.16s ease;
}
.switch i{
  position:absolute; top:2px; left:2px;
  width:16px; height:16px; border-radius:50%;
  background: var(--alu);
  transition: transform 0.16s ease, background 0.16s ease;
}
.switch.on{ background: rgba(95,208,197,0.28); border-color: var(--teal); }
.switch.on i{ transform: translateX(18px); background: var(--teal); }

.rules-card{ max-width:380px; }
.rule-row{
  display:flex; align-items:flex-start; gap:12px;
  text-align:left;
  margin-bottom:13px;
}
.rule-icon{
  font-family:'Oswald', sans-serif;
  font-size:17px; font-weight:500; line-height:1.35;
  flex:0 0 24px; text-align:center; color: var(--teal);
}
.rule-row p{ margin:0; font-size:14px; color: var(--text); }

.language-list{ display:flex; flex-direction:column; gap:8px; }
.language-option{
  display:flex; align-items:center; gap:12px;
  width:100%;
  font-size:14px; font-weight:600;
  padding:11px 14px;
  color: var(--text);
  background: rgba(138,147,166,0.1);
  border:1px solid var(--alu-soft);
  text-align:left;
}
.language-option:active{ transform: translateY(1px); }
.language-option.active{ border-color: var(--teal); background: rgba(95,208,197,0.14); }
.language-flag{ font-size:19px; }

/* classifica */
.lb-note{ font-size:12px !important; margin-bottom:12px !important; }
.lb-tabs{ display:flex; gap:6px; margin-bottom:12px; }
.lb-tab{
  flex:1 1 0;
  font-size:12px;
  padding:8px 4px;
  color: var(--text-dim);
  background: rgba(138,147,166,0.07);
  border:1px solid var(--alu-faint);
}
.lb-tab.active{ color:#0F1A19; background: var(--teal); border-color: var(--teal); }
.leaderboard-list{
  display:flex; flex-direction:column; gap:6px;
  max-height:246px; overflow-y:auto;
  margin-bottom:6px;
}
.leaderboard-row{
  display:flex; align-items:center; gap:10px;
  flex:0 0 auto;
  padding:8px 10px;
  border-radius:6px;
  background: rgba(0,0,0,0.28);
  border:1px solid var(--alu-faint);
  font-size:13px;
}
.leaderboard-row.is-me{ border-color: var(--teal); background: rgba(95,208,197,0.14); }
.leaderboard-rank{ flex:0 0 auto; font-weight:700; color: var(--teal); min-width:34px; text-align:left; }
.leaderboard-name{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; }
.leaderboard-score{ flex:0 0 auto; font-weight:700; font-variant-numeric: tabular-nums; }
.leaderboard-empty{ font-size:13px; color: var(--text-dim); padding:16px 6px; }

/* schermi bassi: il tavolo vale più del titolo */
@media (max-height: 700px){
  .title-wrap{ display:none; }
  .player-plate{ padding:4px 10px; }
}
/* tablet e computer: il tavolo è alto il doppio di quanto è largo, quindi in
   verticale è l'ALTEZZA a decidere quanto può crescere. I limiti si alzano per
   gradi (10"-14" compresi), la misura vera la calcola il codice sullo spazio
   che resta davvero. */
@media (min-width: 700px){
  #app{ max-width: 620px; }
  .title-wrap h1{ font-size:28px; }
  .plate-name{ font-size:17px; }
  .plate-ball{ width:15px; height:15px; }
}
@media (min-width: 900px){
  #app{ max-width: 700px; }
}
@media (min-width: 1200px){
  #app{ max-width: 760px; }
  .title-wrap h1{ font-size:31px; }
}
@media (min-width: 1500px){
  #app{ max-width: 820px; }
}