style.css

:root{
  --bg-dark: #17102A;
  --bg-darker: #0B0718;
  --coral: #F2622E;
  --coral-dark: #A2380F;
  --gold: #F4B740;
  --teal: #14A085;
  --purple: #7B5FC7;
  --sand: #FBEBC9;
  --sand-dark: #EAD3A0;
  --navy-text: #0B2B3C;
  --white: #FFFDF8;
}
*{ 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:'Press Start 2P', monospace;
  background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-darker) 100%);
  color: var(--white);
}

/* sfondo a tema: un cielo stellato in pixel art (stelline quadrate, non
   cerchi sfumati), coerente con l'estetica retro/arcade del gioco */
#bgLayer{
  position:fixed; inset:0; z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.pixel-star{
  position:absolute;
  background: var(--white);
  animation: pixel-twinkle 2.6s ease-in-out infinite;
}
@keyframes pixel-twinkle{
  0%, 100%{ opacity:0.2; }
  50%{ opacity:1; }
}

#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);
}

/* topbar (icone/livello/vite: stesso standard del sito) */
.topbar{
  position:relative; z-index:5;
  display:flex; align-items:center; justify-content:space-between;
  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:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.1);
  border: 1.5px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(6px);
  color:var(--white);
  font-size:19px;
  cursor:pointer;
  text-decoration:none;
  flex:0 0 auto;
}
.icon-btn:active{ transform: scale(0.96); }
/* La freccia per tornare in home ha gia' il suo cerchio disegnato dentro
   all'icona: il fondino del pulsante ci faceva un secondo cerchio intorno.
   Via il fondino, e l'icona si prende tutta la misura che aveva il tondo.
   Il bersaglio da toccare resta largo uguale. */
a.icon-btn{ background:none; border:none; backdrop-filter:none; font-size:34px; line-height:0; }
/* Il livello sta nello spazio fra le icone e le vite, non centrato di forza
   sullo schermo: con la quarta icona (il ↻) il centro esatto cade DENTRO al
   gruppo di icone e la scritta ci finiva sotto su un telefono stretto. */
.level-display{
  flex:1 1 auto;
  justify-content:center;
  min-width:0;
  font-family:'Press Start 2P', monospace;
  font-size:13px;
  letter-spacing:1px;
  display:flex; align-items:center; gap:5px;
  white-space:nowrap;
}
.lv-label{ opacity:0.85; }
.lives{
  flex:0 0 auto;
  width:72px; height:18px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.score-block{
  text-align:center;
  padding: 2px 0 0;
}
#scoreValue{
  font-family:'Press Start 2P', monospace;
  font-size:24px;
  color: var(--gold);
  line-height:1.15;
}

.title-wrap{
  text-align:center;
  padding: 0 0 4px;
}
.title-wrap h1{
  font-family:'Press Start 2P', monospace;
  font-weight:800;
  font-size:18px;
  letter-spacing:1px;
  margin:0;
  color: var(--white);
}

/* zona di gioco */
.game-zone{
  position:relative;
  flex:1 1 auto;
  display:flex; align-items:center; justify-content:center;
  padding: 10px 16px max(16px, env(safe-area-inset-bottom));
  min-height:0;
}
#gameCanvas{
  width:100%;
  max-width:360px;
  aspect-ratio: 2 / 3;
  height:auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #0B0718;
  border-radius:10px;
  border: 3px solid rgba(255,255,255,0.12);
  touch-action:none;
}
.tap-hint{
  position:absolute; bottom: 8%; left:0; right:0;
  text-align:center;
  font-family:'Press Start 2P', monospace;
  font-weight:700;
  font-size:13px;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
  pointer-events:none;
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ opacity:0.55; } 50%{ opacity:1; } }
.center-toast{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  text-align:center;
  font-family:'Press Start 2P', monospace;
  font-size:11px;
  line-height:1.6;
  color: var(--white);
  background: rgba(6,4,14,0.75);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius:12px;
  padding:10px 16px;
  max-width:80%;
  pointer-events:none;
  z-index:10;
}
/* icona del potenziamento appena preso, davanti alla frase. Un filo piu' grande
   del testo: il font del gioco e' minuto e a 11px la lumaca non si capiva. */
.center-toast .toast-ico{
  font-size:16px;
  margin-right:7px;
  vertical-align:-0.22em;
}
/* il cuore e' rosso sempre, non del colore del testo: e' lo stesso rosso delle
   vite disegnate in alto */
.toast-ico-life{ color: var(--coral); }

/* overlay/card: estetica propria di Boing (arcade scuro/neon), non quella
   "da spiaggia" di Wordio — anche i modal condivisi seguono il tema del
   gioco in cui vivono */
.overlay{
  position:fixed; inset:0; z-index:30;
  background: rgba(6,4,14,0.82);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity 0.25s ease;
}
.overlay.show{ opacity:1; pointer-events:auto; }
.card{
  background: #201736;
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius:22px;
  padding: 26px 22px 20px;
  width: 82%;
  max-width:320px;
  max-height: 82vh;
  overflow-y: auto;
  text-align:center;
  color: var(--white);
  box-shadow: 0 20px 40px rgba(0,0,0,0.6), 0 0 30px rgba(242,98,46,0.12);
  transform: translateY(10px) scale(0.96);
  transition: transform 0.25s ease;
}
.overlay.show .card{ transform: translateY(0) scale(1); }
.card h2{
  font-family:'Press Start 2P', monospace;
  font-size:15px; line-height:1.5;
  margin:4px 0 10px;
  color: var(--gold);
  text-shadow: 0 0 10px rgba(244,183,64,0.55);
}
.card p{ font-size:13px; color: rgba(255,255,255,0.75); margin:4px 0 16px; font-weight:600; }
.crown-icon{ font-size:40px; margin-bottom:4px; }

.difficulty-list{ display:flex; flex-direction:column; gap:8px; }
.menu-section-label{
  font-size:11px; font-weight:800; letter-spacing:1px; text-transform:uppercase;
  color: rgba(255,255,255,0.45);
  margin: 14px 0 8px; text-align:left;
}
.difficulty-option{
  font-family:'Press Start 2P', monospace; font-weight:700; font-size:15px;
  background: rgba(255,255,255,0.06); color: var(--white);
  border: 1px solid rgba(255,255,255,0.1); border-radius:12px;
  padding:12px 14px;
  cursor:pointer;
}
.difficulty-option:active{ background: rgba(255,255,255,0.12); }
.difficulty-option[data-difficulty="easy"]{ border-left: 6px solid var(--teal); }
.difficulty-option[data-difficulty="medium"]{ border-left: 6px solid var(--gold); }
.difficulty-option[data-difficulty="hard"]{ border-left: 6px solid var(--coral); }
.difficulty-option.active{ outline: 2px solid rgba(255,255,255,0.5); outline-offset: -2px; }

.primary-btn{
  font-family:'Press Start 2P', monospace; font-weight:700; font-size:16px;
  background: linear-gradient(180deg, var(--coral), var(--coral-dark));
  color:white; border:none; padding:12px 30px; border-radius:999px;
  box-shadow: 0 4px 0 #6d2409, 0 0 18px rgba(242,98,46,0.4);
  cursor:pointer;
  margin-bottom: 4px;
}
.primary-btn:active{ transform:translateY(3px); box-shadow:0 1px 0 #6d2409; }
.secondary-btn{
  font-family:'Press Start 2P', monospace; font-weight:700; font-size:14px;
  background: transparent; color: rgba(255,255,255,0.75); border: 2px solid rgba(255,255,255,0.2);
  padding:9px 20px; border-radius:999px;
  cursor:pointer;
  margin-top:6px;
}
.secondary-btn:active{ transform:scale(0.96); }

.home-link{
  display:block; margin-top:14px;
  font-family:'Press Start 2P', monospace;
  font-size:10px;
  color: rgba(255,255,255,0.5);
  text-decoration:underline;
}

.menu-list{ display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.menu-row{
  display:flex; align-items:center; gap:8px;
  font-family:'Press Start 2P', monospace; font-weight:700; font-size:14px;
  background: rgba(255,255,255,0.06); color: var(--white);
  border: 1px solid rgba(255,255,255,0.1); border-radius:12px;
  padding:11px 14px;
  cursor:pointer;
  text-align:left;
}
.menu-row:active{ background: rgba(255,255,255,0.12); }

.language-list{ display:flex; flex-direction:column; gap:8px; padding: 4px 0 8px; }
.language-option{
  display:flex; align-items:center; gap:12px;
  width:100%;
  background: rgba(255,255,255,0.06); border-radius:12px; padding:11px 14px;
  border: 1px solid rgba(255,255,255,0.1); cursor:pointer;
  font-family:'Press Start 2P', monospace; font-weight:700; font-size:15px;
  color: var(--white);
  text-align:left;
}
.language-option:active{ background: rgba(255,255,255,0.12); }
.language-option.active{ outline: 2px solid var(--teal); outline-offset: -2px; }
.language-flag{ font-size:22px; }

/* tutorial */
.tutorial-card{ max-width:340px; }
.tutorial-row{
  display:flex; align-items:center; gap:12px;
  text-align:left;
  margin-bottom:14px;
}
.tutorial-icon{
  flex:0 0 auto; width:44px; text-align:center;
  font-size:20px;
}
/* nella riga dei potenziamenti il cuore sta in fila ai quadratini colorati,
   che sono allineati a meta' altezza */
.tutorial-icon .ffr-ico{ vertical-align:middle; }
.tutorial-row p{ margin:0; font-size:12.5px; line-height:1.4; }
.pu-swatch{
  display:inline-block; width:11px; height:11px; margin:0 2px;
  background: var(--c);
  box-shadow: 0 0 6px var(--c);
  border-radius:2px;
  vertical-align:middle;
}

/* classifica */
/* schede difficoltà: ogni difficoltà ha la sua classifica */
.lb-tabs{ display:flex; gap:6px; margin: 6px 0 12px; }
.lb-tab{
  flex:1 1 0; min-width:0;
  font-family:'Press Start 2P', monospace; font-size:9px; line-height:1.3;
  padding:9px 4px; border-radius:10px; cursor:pointer;
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.12);
}
.lb-tab.active{
  background: rgba(242,98,46,0.22); color: var(--white);
  border-color: var(--coral);
  box-shadow: 0 0 10px rgba(242,98,46,0.35);
}
/* regola condivisa del sito: se ne vedono 6 per volta, il resto scorrendo.
   6 righe da 38px + 5 spazi da 8px = 268px */
.leaderboard-list{ display:flex; flex-direction:column; gap:8px; margin: 4px 0 16px; max-height:268px; overflow-y:auto; }
.leaderboard-row{
  display:flex; align-items:center; gap:10px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  border-radius:12px; padding:9px 14px;
  font-family:'Press Start 2P', monospace; font-weight:700; font-size:11px; color: var(--white);
  flex: 0 0 auto;
}
/* la riga di chi sta guardando, per ritrovarsi a colpo d'occhio */
.leaderboard-row.is-me{
  background: rgba(242,98,46,0.2);
  border-color: var(--coral);
  color: var(--white);
}
.leaderboard-row.is-me .leaderboard-rank{ color: var(--coral); }
.leaderboard-rank{ flex:0 0 auto; min-width:40px; text-align:left; color: rgba(255,255,255,0.5); }
.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; color: var(--gold); }
.leaderboard-empty{ font-size:13px; color: rgba(255,255,255,0.6); font-weight:600; padding: 6px 4px 16px; line-height:1.4; }

#loadingScreen{
  position:fixed; inset:0; z-index:50;
  background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-darker) 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:white; font-family:'Press Start 2P', monospace;
  transition: opacity 0.3s ease;
}
.spinner{
  width:34px; height:34px; border-radius:50%;
  border:4px solid rgba(255,255,255,0.2); border-top-color:var(--coral);
  animation: spin 0.8s linear infinite; margin-top:14px;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.hidden{ display:none !important; }

/* tablet / desktop: la card e il canvas crescono IN PROPORZIONE diretta
   allo schermo (min(vw, tetto in px)) invece di scalini fissi indovinati a
   caso — così qualsiasi tablet, da 10" a 14", porta la sua taglia reale
   invece di doverla far combaciare con un breakpoint scelto a mano. Il
   tetto in px serve solo a non farlo diventare assurdo su monitor giganti. */
@media (min-width: 700px){
  #app{ max-width: min(92vw, 1200px); }
  /* 170px copre topbar + titolo + punteggio + padding della game-zone: prima
     il tetto era un 60vh fisso, una stima che ignorava quanto poco spazio
     occupi davvero quell'intestazione, tenendo il gioco piccolo anche dove
     c'era spazio verticale abbondante (tablet alti) */
  #gameCanvas{ max-width: min(88vw, calc((100dvh - 170px) / 1.5), 900px); }
  .icon-btn{ width:42px; height:42px; font-size:23px; }
  a.icon-btn{ font-size:42px; }
  .level-display{ font-size:16px; }
  .lives{ width:90px; height:22px; }
  #scoreValue{ font-size:30px; }
  .title-wrap h1{ font-size:22px; }
}
@media (min-width: 1024px){
  body{ display:flex; align-items:center; }
  #app{
    min-height:auto;
    max-height:96vh;
    border-radius:28px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    overflow-y:auto;
  }
  .icon-btn{ width:48px; height:48px; font-size:26px; }
  a.icon-btn{ font-size:48px; }
  .level-display{ font-size:18px; }
  .lives{ width:104px; height:26px; }
  #scoreValue{ font-size:34px; }
  .title-wrap h1{ font-size:26px; }
}