style.css

/* ============ ADDY — identità grafica: foglio da disegno tecnico ============
   Ogni gioco del sito ha una grafica propria: qui niente pixel art (è di Boing),
   niente neon indaco (è di Blokko), niente laguna/sabbia (è di Wordio). Addy è
   un foglio da progettista: blu petrolio, reticolo millimetrato, tratti sottili,
   e le tessere sono etichette di carta stampata con il numero in monospaziato.
   I numeri bassi restano carta, salendo scaldano verso l'arancio, e gli ultimi
   due passano all'inchiostro del foglio: si vede a colpo d'occhio quanto sei
   arrivato in alto senza dover leggere la cifra. */
:root{
  --ink: #08202A;
  --ink-2: #0C2C38;
  --ink-3: #123847;
  --line: rgba(143, 182, 196, 0.16);
  --line-strong: rgba(143, 182, 196, 0.42);
  --steel: #8FB6C4;
  --paper: #EFE7D6;
  --orange: #E8622C;
  --amber: #F0A860;

  --text: #DCE9EE;
  --text-dim: rgba(220, 233, 238, 0.58);
}

*{ 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:'Archivo', sans-serif;
  background: var(--ink);
  color: var(--text);
  overscroll-behavior: none;
}

/* ---------- sfondo: foglio millimetrato ---------- */
/* tutto statico: non c'è niente da animare qui, e uno sfondo fermo non costa
   nemmeno un fotogramma mentre si gioca */
#bgLayer{
  position:fixed; inset:0; z-index:0;
  pointer-events:none;
  background: linear-gradient(170deg, var(--ink-2) 0%, var(--ink) 55%, #061A22 100%);
}
.blueprint-grid{
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(to right, rgba(143,182,196,0.22) 0 1px, transparent 1px 130px),
    repeating-linear-gradient(to bottom, rgba(143,182,196,0.22) 0 1px, transparent 1px 130px);
}
.blueprint-vignette{
  position:absolute; inset:0;
  background: radial-gradient(120% 90% at 50% 30%, rgba(0,0,0,0) 40%, rgba(3,14,19,0.72) 100%);
}

#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:'IBM Plex Mono', monospace;
  font-weight:700; font-size:28px; letter-spacing:10px;
  color: var(--paper);
  padding-left:10px; /* compensa lo spazio finale della spaziatura */
}
.spinner{
  width:30px; height:30px;
  border:2px solid rgba(143,182,196,0.25);
  border-top-color: var(--orange);
  border-radius:50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

/* ---------- topbar ---------- */
.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:3px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(143,182,196,0.08);
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-size:18px;
  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; font-size:34px; line-height:0; }
/* quota dell'obiettivo, scritta come su un disegno tecnico */
.goal-display{
  display:flex; align-items:baseline; gap:7px;
  font-family:'IBM Plex Mono', monospace;
  white-space:nowrap;
}
.goal-label{
  font-size:9px; letter-spacing:2px; font-weight:500;
  color: var(--text-dim);
}
.goal-value{
  font-size:15px; font-weight:700;
  color: var(--orange);
}

/* ---------- hud ---------- */
.hud-row{
  display:flex; align-items:stretch; gap:10px;
  padding: 10px 16px 0;
}
.hud-box{
  flex:1 1 0;
  border:1px solid var(--line-strong);
  border-radius:3px;
  background: rgba(143,182,196,0.05);
  padding:7px 10px 8px;
}
.hud-label{
  font-family:'IBM Plex Mono', monospace;
  font-weight:500; font-size:9px; letter-spacing:2.4px;
  color: var(--text-dim);
  margin-bottom:2px;
}
.hud-value{
  font-family:'IBM Plex Mono', monospace;
  font-weight:700; font-size:24px; line-height:1;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}

.title-wrap{ padding: 12px 16px 2px; }
.title-wrap h1{
  font-family:'IBM Plex Mono', monospace;
  font-weight:700; font-size:20px; letter-spacing:9px;
  margin:0; padding-left:9px;
  color: var(--paper);
  text-align:center;
}
/* riga di squadratura sotto il titolo, con i due trattini di quota agli estremi */
.title-rule{
  position:relative;
  height:1px; margin-top:8px;
  background: var(--line-strong);
}
.title-rule::before, .title-rule::after{
  content:''; position:absolute; top:-3px;
  width:1px; height:7px;
  background: var(--line-strong);
}
.title-rule::before{ left:0; }
.title-rule::after{ right:0; }

/* ---------- area di gioco ---------- */
.game-zone{
  position:relative;
  /* base 0, non auto: così l'altezza di questa zona è "quello che avanza" e
     basta, e NON dipende da quanto è grande il campo che ci sta dentro.
     Con base auto la misura è circolare — il campo decide l'altezza della zona
     e la zona decide la misura del campo — e dopo un cambio di orientamento
     restava tarata sulla misura precedente, sforando in fondo alla pagina. */
  flex:1 1 0;
  display:flex; align-items:center; justify-content:center;
  padding: 12px 16px;
  min-height:0;
  touch-action: none; /* gli scorrimenti sono mosse di gioco, non scroll della pagina */
}
.board-frame{
  position:relative;
  width: var(--board, 300px);
  height: var(--board, 300px);
  border:1px solid var(--line-strong);
  border-radius:3px;
  background: rgba(6, 24, 31, 0.55);
  /* seconda riga di squadratura staccata, come il bordo di un foglio da disegno */
  outline:1px solid rgba(143,182,196,0.16);
  outline-offset:5px;
}
.board-cells, .board-tiles{ position:absolute; inset:0; }
.cell{
  position:absolute;
  width: var(--cell); height: var(--cell);
  border:1px solid rgba(143,182,196,0.14);
  border-radius:2px;
  background: rgba(143,182,196,0.035);
}

/* ---------- tessere ---------- */
.tile{
  position:absolute;
  width: var(--cell); height: var(--cell);
  display:flex; align-items:center; justify-content:center;
  border-radius:2px;
  border:1px solid rgba(0,0,0,0.18);
  background: var(--bg, var(--paper));
  color: var(--fg, #123240);
  font-family:'IBM Plex Mono', monospace;
  font-weight:700;
  font-variant-numeric: tabular-nums;
  letter-spacing:-0.5px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.25);
  /* si anima solo transform: la scheda grafica la gestisce da sola, senza
     obbligare il browser a ridisegnare la tessera a ogni fotogramma */
  transition: transform 0.1s ease-out;
  will-change: transform;
}
.tile.is-new{ animation: tile-appear 0.14s ease-out; }
.tile.is-merged{ animation: tile-pop 0.16s ease-out; }
@keyframes tile-appear{
  from{ opacity:0; }
  to{ opacity:1; }
}
@keyframes tile-pop{
  0%{ filter:brightness(1); }
  45%{ filter:brightness(1.35); }
  100%{ filter:brightness(1); }
}

/* dimensione della cifra: cala man mano che le cifre aumentano, così anche
   65536 resta dentro la tessera */
.tile.d1, .tile.d2{ font-size: calc(var(--cell) * 0.42); }
.tile.d3{ font-size: calc(var(--cell) * 0.34); }
.tile.d4{ font-size: calc(var(--cell) * 0.26); }
.tile.d5{ font-size: calc(var(--cell) * 0.21); }

/* la scala dei colori: carta → arancio → inchiostro del foglio */
.tile[data-v="2"]{    --bg:#EFE7D6; --fg:#123240; }
.tile[data-v="4"]{    --bg:#E2D5B8; --fg:#123240; }
.tile[data-v="8"]{    --bg:#F0C48D; --fg:#2A1408; }
.tile[data-v="16"]{   --bg:#EDA968; --fg:#2A1408; }
.tile[data-v="32"]{   --bg:#E88B45; --fg:#231003; }
.tile[data-v="64"]{   --bg:#E0692A; --fg:#FFF6EA; }
.tile[data-v="128"]{  --bg:#D24F28; --fg:#FFF6EA; }
.tile[data-v="256"]{  --bg:#BB3A28; --fg:#FFF6EA; }
.tile[data-v="512"]{  --bg:#9C2A2A; --fg:#FFF6EA; }
.tile[data-v="1024"]{ --bg:#2E6B7A; --fg:#EAF7FA; }
.tile[data-v="2048"]{
  --bg:#17454F; --fg:#FFD79A;
  border-color: var(--orange);
  box-shadow: 0 0 0 1px rgba(232,98,44,0.55), 0 1px 0 rgba(0,0,0,0.25);
}
/* oltre l'obiettivo: si continua a giocare, e la tessera è solo inchiostro */
.tile.is-beyond{ --bg:#0E3441; --fg:#FFD79A; border-color: rgba(232,98,44,0.4); }

/* ---------- pulsanti sotto il campo ---------- */
.action-row{
  display:flex; gap:10px;
  padding: 4px 16px max(14px, env(safe-area-inset-bottom));
}
.action-btn{
  flex:1 1 0;
  display:flex; align-items:center; justify-content:center; gap:7px;
  font-family:'Archivo', sans-serif;
  font-weight:600; font-size:13px;
  padding:11px 10px;
  border-radius:3px;
  color: var(--text);
  background: rgba(143,182,196,0.07);
  border:1px solid var(--line-strong);
  cursor:pointer;
}
.action-btn:active{ transform: translateY(1px); }
.action-btn:disabled{ opacity:0.35; cursor:default; }
.action-btn:disabled:active{ transform:none; }
.action-icon{ font-size:14px; line-height:1; color: var(--steel); }
.undo-count{
  font-family:'IBM Plex Mono', monospace;
  font-weight:700; font-size:11px;
  color: var(--orange);
  border:1px solid rgba(232,98,44,0.5);
  border-radius:2px;
  padding:0 4px;
}

/* ---------- overlay e pannelli ---------- */
.overlay{
  position:fixed; inset:0; z-index:50;
  background: rgba(4, 18, 24, 0.82);
  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: var(--ink-2);
  border:1px solid var(--line-strong);
  border-radius:3px;
  padding:24px 20px 20px;
  text-align:center;
  outline:1px solid rgba(143,182,196,0.14);
  outline-offset:5px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.5);
}
.card h2{
  font-family:'IBM Plex Mono', monospace;
  font-weight:700; font-size:16px; letter-spacing:2px;
  margin:0 0 8px;
  color: var(--paper);
}
.card p{
  font-size:14px; font-weight:500; line-height:1.45;
  color: var(--text-dim);
  margin:0 0 16px;
}
.big-icon{
  font-family:'IBM Plex Mono', monospace;
  font-weight:700; font-size:26px; letter-spacing:2px;
  color: var(--orange);
  line-height:1; margin-bottom:10px;
}
/* punteggio finale e record su due righe */
#gameOverSub{ white-space: pre-line; font-family:'IBM Plex Mono', monospace; }

.primary-btn, .secondary-btn, .menu-row, .language-option{
  font-family:'Archivo', sans-serif;
  font-weight:600;
  cursor:pointer;
  border-radius:3px;
}
.primary-btn{
  display:block; width:100%;
  font-size:14px;
  padding:12px 16px;
  margin-bottom:8px;
  color:#2A1002;
  background: var(--orange);
  border:1px solid #F07C4B;
}
.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(143,182,196,0.07);
  border:1px solid var(--line-strong);
}
.secondary-btn:active{ transform: translateY(1px); }

.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:13px;
  padding:12px 14px;
  color: var(--text);
  background: rgba(143,182,196,0.07);
  border:1px solid var(--line-strong);
  text-align:left;
}
.menu-row:active{ transform: translateY(1px); }

.tutorial-card{ max-width:360px; }
.tutorial-row{
  display:flex; align-items:flex-start; gap:12px;
  text-align:left;
  margin-bottom:12px;
}
.tutorial-icon{ font-size:18px; line-height:1.3; flex:0 0 24px; text-align:center; color: var(--steel); }
.tutorial-row p{ margin:0; font-size:14px; }
/* Il grazie a chi ha reso famose queste regole. Sta in fondo alle istruzioni,
   piu' piccolo e piu' tenue: non e' una regola del gioco, e' un ringraziamento.
   La riga sopra lo stacca dalle istruzioni vere. */
.tutorial-credit{
  margin:16px 0 0;
  padding-top:12px;
  border-top:1px solid rgba(143,182,196,0.22);
  font-size:11.5px; line-height:1.5;
  text-align:left;
  color: var(--steel);
  opacity:0.85;
}

/* lingua */
.language-list{ display:flex; flex-direction:column; gap:8px; }
.language-option{
  display:flex; align-items:center; gap:12px;
  width:100%;
  font-size:13px;
  padding:11px 14px;
  color: var(--text);
  background: rgba(143,182,196,0.07);
  border:1px solid var(--line-strong);
  text-align:left;
}
.language-option:active{ transform: translateY(1px); }
.language-option.active{ border-color: var(--orange); background: rgba(232,98,44,0.12); }
.language-flag{ font-size:19px; }

/* schermi bassi: il campo vale più del titolo */
@media (max-height: 640px){
  .title-wrap{ display:none; }
  .hud-value{ font-size:20px; }
}
/* tablet: la larghezza cresce per gradi (10"–14" sta tutto qui dentro),
   e con lei il campo, che si misura da solo sullo spazio rimasto */
/* Il campo è quadrato, quindi in verticale è la LARGHEZZA a decidere quanto
   può essere grande: su un tablet in piedi lo spazio in altezza avanza sempre.
   Per questo qui i limiti di larghezza sono più generosi che negli altri giochi
   del sito — con il tetto di 560px un tablet da 820px restava con il campo da
   telefono e due bande vuote ai lati. In orizzontale non cambia niente: lì
   comanda l'altezza e il campo si ferma prima da solo. */
@media (min-width: 700px){
  #app{ max-width: 660px; }
  .title-wrap h1{ font-size:24px; }
  .hud-value{ font-size:28px; }
}
@media (min-width: 900px){
  #app{ max-width: 740px; }
  .action-btn{ font-size:14px; padding:13px 10px; }
}
@media (min-width: 1200px){
  #app{ max-width: 820px; }
  .hud-value{ font-size:32px; }
  .title-wrap h1{ font-size:28px; letter-spacing:11px; }
}
@media (min-width: 1500px){
  #app{ max-width: 880px; }
}