/* ============ KAKUMAL — identità grafica: lavagna e gesso ============
   Ogni gioco del sito ha una grafica propria. Qui niente neon indaco (è di
   Blokky), niente pixel art (è di Boing), niente blu petrolio da disegno
   tecnico (è di Addy), niente noce e ottone (è della Dama), niente laguna e
   sabbia (è di Wordio), niente carta di quaderno (è di Sudopoku). Kakumal è la
   lavagna dell'aula: ardesia verde scura, la polvere del cancellino che non va
   mai via del tutto, i numeri scritti col gesso. Le somme sui muri sono in gesso
   bianco, le cifre di chi gioca in gesso giallo, gli appunti in gesso sottile e
   gli sbagli in gesso rosso. */
:root{
  --slate: #1E332B;        /* l'ardesia */
  --slate-dark: #16261F;   /* i muri, più scuri del fondo */
  --slate-open: #2C463A;   /* le caselle bianche da riempire */
  --slate-peer: #33503F;   /* le due file della casella scelta */
  --slate-same: #2F4A3C;   /* le caselle con la stessa cifra */
  --slate-sel: #3D5C46;    /* la casella scelta */
  --wood: #4A3524;         /* la cornice della lavagna */
  --wood-dark: #33241A;

  --chalk: #F2EFE4;        /* il gesso bianco: somme e titoli */
  --chalk-soft: rgba(242, 239, 228, 0.62);
  --chalk-dim: rgba(242, 239, 228, 0.26);
  --chalk-yellow: #F5D97A; /* il gesso di chi gioca */
  --chalk-blue: #8FD4E8;   /* il gesso che segna dove si sta lavorando */
  --chalk-red: #F08A7A;    /* gli sbagli */
}

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

/* ---------- sfondo: la lavagna ---------- */
/* tutto fermo: non c'è niente da animare qui, e uno sfondo statico non costa un
   solo fotogramma mentre si gioca */
#bgLayer{
  position:fixed; inset:0; z-index:0;
  pointer-events:none;
  background: var(--slate);
}
/* le passate del cancellino: strisciate chiare larghe e appena accennate */
.slate-dust{
  position:absolute; inset:0;
  background:
    radial-gradient(60% 18% at 20% 30%, rgba(242,239,228,0.055) 0%, rgba(0,0,0,0) 100%),
    radial-gradient(55% 14% at 75% 62%, rgba(242,239,228,0.045) 0%, rgba(0,0,0,0) 100%),
    radial-gradient(45% 12% at 40% 85%, rgba(242,239,228,0.035) 0%, rgba(0,0,0,0) 100%);
}
.slate-shade{
  position:absolute; inset:0;
  background: radial-gradient(120% 90% at 50% 15%, rgba(255,255,255,0.045) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.35) 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(--slate);
  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:'Patrick Hand', cursive;
  font-size:32px; letter-spacing:7px;
  color: var(--chalk);
  padding-left:7px; /* compensa lo spazio finale della spaziatura */
  text-shadow: 0 0 8px rgba(242,239,228,0.25);
}
.spinner{
  width:30px; height:30px;
  border:2px solid rgba(242,239,228,0.18);
  border-top-color: var(--chalk-yellow);
  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:5px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(242,239,228,0.07);
  border: 1px solid rgba(242,239,228,0.2);
  color: var(--chalk);
  font-size:18px;
  cursor:pointer;
  text-decoration:none;
  flex:0 0 auto;
}
.icon-btn:active{ transform: scale(0.96); }
/* la freccia della home ha già il suo cerchio disegnato dentro: senza fondino
   non ne resta uno dentro l'altro */
a.icon-btn{ background:none; border:none; font-size:34px; line-height:0; }
.level-display{
  font-family:'Patrick Hand', cursive;
  font-size:16px; letter-spacing:1.5px;
  color: var(--chalk-soft);
  text-transform:uppercase;
  white-space:nowrap;
}

/* ---------- hud ---------- */
.hud-row{
  display:flex; align-items:stretch; gap:8px;
  padding: 10px 16px 0;
}
.hud-box{
  flex:1 1 0;
  border:1px solid rgba(242,239,228,0.16);
  border-radius:5px;
  background: rgba(0,0,0,0.14);
  padding:6px 10px 7px;
  text-align:center;
}
.hud-label{
  font-weight:700; font-size:9px; letter-spacing:1.8px;
  color: var(--chalk-soft);
  margin-bottom:1px;
}
.hud-value{
  font-family:'Patrick Hand', cursive;
  font-size:23px; line-height:1.1;
  color: var(--chalk);
  font-variant-numeric: tabular-nums;
}

.title-wrap{ padding: 10px 16px 0; }
.title-wrap h1{
  font-family:'Patrick Hand', cursive;
  font-weight:400; font-size:24px; letter-spacing:7px;
  margin:0; padding-left:7px;
  color: var(--chalk);
  text-align:center;
  text-shadow: 0 0 8px rgba(242,239,228,0.2);
}
.title-rule{
  height:1px; margin-top:6px;
  background: rgba(242,239,228,0.18);
}

/* ---------- lo schema ---------- */
.game-zone{
  position:relative;
  /* base 0, non auto: l'altezza di questa zona è "quello che avanza" fra
     l'intestazione e il tastierino, e non dipende da quanto è grande lo schema
     che ci sta dentro (altrimenti la misura sarebbe circolare) */
  flex:1 1 0;
  display:flex; align-items:center; justify-content:center;
  padding: 10px 14px;
  min-height:0;
}
/* la cornice di legno della lavagna */
.board-frame{
  position:relative;
  width: var(--board, 300px);
  height: var(--board, 300px);
  background: var(--slate-dark);
  border:2px solid var(--wood);
  border-radius:3px;
  box-shadow: 0 0 0 2px var(--wood-dark), 0 8px 20px rgba(0,0,0,0.4);
}
.kk-board{
  position:absolute; inset:0;
  display:grid;
  grid-template-columns: repeat(var(--n, 9), 1fr);
  grid-template-rows: repeat(var(--n, 9), 1fr);
}
.kk-cell, .kk-wall{
  position:relative;
  border-right:1px solid rgba(0,0,0,0.35);
  border-bottom:1px solid rgba(0,0,0,0.35);
  overflow:hidden;
}
.kk-cell{
  display:flex; align-items:center; justify-content:center;
  background: var(--slate-open);
  font-family:'Patrick Hand', cursive;
  font-size: calc(var(--cell, 32px) * 0.66);
  line-height:1;
  color: var(--chalk-yellow);
  cursor:pointer;
}
.kk-wall{ background: var(--slate-dark); }

/* il muro con le somme: la riga diagonale separa la somma della fila che va a
   destra (in alto) da quella della fila che scende (in basso) */
.slash{
  position:absolute; inset:0;
  background: linear-gradient(to bottom right,
    rgba(0,0,0,0) calc(50% - 0.6px),
    var(--chalk-dim) calc(50% - 0.6px),
    var(--chalk-dim) calc(50% + 0.6px),
    rgba(0,0,0,0) calc(50% + 0.6px));
}
.clue-across, .clue-down{
  position:absolute;
  font-family:'Patrick Hand', cursive;
  font-size: calc(var(--cell, 32px) * 0.40);
  line-height:1;
  color: var(--chalk);
}
.clue-across{ top:8%; right:7%; }
.clue-down{ bottom:8%; left:7%; }
/* fila completata e giusta: la somma si smorza, così si vede a colpo d'occhio
   quanto manca senza ricontare le caselle */
.kk-wall.across-done .clue-across{ color: var(--chalk-dim); }
.kk-wall.down-done .clue-down{ color: var(--chalk-dim); }

.kk-cell.wrong{ color: var(--chalk-red); }
.kk-cell.peer{ background: var(--slate-peer); }
.kk-cell.same{ background: var(--slate-same); }
.kk-cell.sel{ background: var(--slate-sel); box-shadow: inset 0 0 0 2px var(--chalk-blue); }
.kk-cell.hinted{ animation: hint-flash 0.6s ease-out; }
@keyframes hint-flash{
  from{ background: rgba(245,217,122,0.55); }
  to{ background: var(--slate-open); }
}

/* gli appunti: nove posti fissi dentro la casella, così il 5 sta sempre in
   mezzo e si ritrova a colpo d'occhio */
.notes{
  position:absolute; inset:1px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  font-family:'Quicksand', sans-serif;
  font-weight:600;
  font-size: calc(var(--cell, 32px) * 0.26);
  color: var(--chalk-soft);
  line-height:1;
}
.notes span{ display:flex; align-items:center; justify-content:center; }

/* ---------- "tocca per continuare" / "preparo lo schema" ---------- */
.resume-hint{
  position:absolute; inset:0; z-index:10;
  display:flex; align-items:center; justify-content:center;
  padding:16px;
  background: rgba(22,38,31,0.78);
  cursor:pointer;
}
.resume-hint.hidden{ display:none; }
.resume-hint-text{
  font-family:'Patrick Hand', cursive;
  font-size:20px; letter-spacing:1px;
  text-align:center; line-height:1.4;
  color: var(--chalk);
  background: var(--slate-dark);
  border:1px solid rgba(242,239,228,0.25);
  border-radius:5px;
  padding:10px 18px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  animation: resume-pulse 1.8s ease-in-out infinite;
}
@keyframes resume-pulse{
  0%, 100%{ opacity:1; }
  50%{ opacity:0.55; }
}
@media (prefers-reduced-motion: reduce){
  .resume-hint-text{ animation:none; }
}

/* ---------- la barra delle somme ---------- */
/* Per la casella scelta: la somma della fila che va a destra e di quella che
   scende, e i gruppi di cifre che possono ancora farle. I gruppi si possono
   spegnere dalle impostazioni. */
.clue-bar{
  padding: 0 14px;
  min-height:56px;
}
.clue-line{
  display:flex; align-items:center; gap:6px;
  padding:3px 0;
  overflow-x:auto;
  scrollbar-width:none;
}
.clue-line::-webkit-scrollbar{ display:none; }
.clue-dir{ font-size:15px; color: var(--chalk-blue); flex:0 0 auto; }
.clue-sum{
  font-family:'Patrick Hand', cursive;
  font-size:20px; line-height:1;
  color: var(--chalk);
  flex:0 0 auto;
}
.clue-in{ font-size:11px; color: var(--chalk-soft); flex:0 0 auto; }
.clue-len{
  font-family:'Patrick Hand', cursive;
  font-size:16px; color: var(--chalk-soft); flex:0 0 auto;
}
.clue-combos{ display:flex; gap:5px; flex:0 0 auto; padding-left:4px; }
.combo{
  font-size:12px; font-weight:600;
  color: var(--chalk-yellow);
  background: rgba(245,217,122,0.1);
  border:1px solid rgba(245,217,122,0.28);
  border-radius:4px;
  padding:2px 6px;
  white-space:nowrap;
}
.clue-empty{
  font-size:12px; color: var(--chalk-soft);
  padding:18px 0;
  text-align:center;
}

/* ---------- attrezzi e tastierino ---------- */
.pad-zone{
  padding: 4px 14px max(12px, env(safe-area-inset-bottom));
}
.tool-row{
  display:flex; gap:7px;
  margin-bottom:8px;
}
.tool-btn{
  position:relative;
  flex:1 1 0;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  font-family:'Quicksand', sans-serif;
  font-weight:600; font-size:11px;
  padding:8px 4px 7px;
  border-radius:5px;
  color: var(--chalk);
  background: rgba(242,239,228,0.07);
  border:1px solid rgba(242,239,228,0.18);
  cursor:pointer;
}
.tool-btn .ffr-ico{ font-size:17px; color: var(--chalk-soft); }
.tool-btn:active{ transform: translateY(1px); }
.tool-btn:disabled{ opacity:0.4; cursor:default; }
.tool-btn:disabled:active{ transform:none; }
/* matita accesa: si vede da lontano che si stanno scrivendo appunti e non
   risposte, altrimenti si riempie la griglia di numerini per sbaglio */
.tool-btn.on{
  background: var(--chalk-yellow);
  border-color: var(--chalk-yellow);
  color: var(--slate-dark);
}
.tool-btn.on .ffr-ico{ color: var(--slate-dark); }
.tool-state{ font-size:9px; letter-spacing:1px; opacity:0.85; }
.tool-count{
  position:absolute; top:4px; right:6px;
  font-weight:700; font-size:10px;
  color: var(--chalk-yellow);
}
.tool-btn.on .tool-count{ color: var(--slate-dark); }

.keypad{
  display:grid;
  grid-template-columns: repeat(9, 1fr);
  gap:5px;
}
.key{
  font-family:'Patrick Hand', cursive;
  font-size:22px;
  padding:10px 0 11px;
  border-radius:5px;
  color: var(--chalk-yellow);
  background: rgba(242,239,228,0.08);
  border:1px solid rgba(242,239,228,0.18);
  cursor:pointer;
}
.key:active{ transform: translateY(1px); }

/* ---------- overlay e pannelli ---------- */
.overlay{
  position:fixed; inset:0; z-index:50;
  background: rgba(10, 20, 16, 0.62);
  backdrop-filter: blur(2px);
  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(--slate-dark);
  border:1px solid rgba(242,239,228,0.2);
  border-radius:6px;
  padding:24px 20px 20px;
  text-align:center;
  color: var(--chalk);
  box-shadow: 0 0 0 2px var(--wood-dark), 0 18px 40px rgba(0,0,0,0.5);
}
.card h2{
  font-family:'Patrick Hand', cursive;
  font-weight:400; font-size:22px; letter-spacing:1px;
  margin:0 0 8px;
  color: var(--chalk);
}
.card p{
  font-size:14px; font-weight:500; line-height:1.45;
  color: var(--chalk-soft);
  margin:0 0 16px;
}
.big-icon{
  font-size:30px;
  color: var(--chalk-yellow);
  line-height:1; margin-bottom:10px;
}
#winSub{ white-space: pre-line; font-family:'Patrick Hand', cursive; font-size:17px; color: var(--chalk); }

.primary-btn, .secondary-btn, .menu-row, .language-option, .difficulty-option, .lb-tab{
  font-family:'Quicksand', sans-serif;
  font-weight:700;
  cursor:pointer;
  border-radius:5px;
}
.primary-btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%;
  font-size:14px;
  padding:12px 16px;
  margin-bottom:8px;
  color: var(--slate-dark);
  background: var(--chalk-yellow);
  border:1px solid #D9BC5A;
}
.primary-btn:active{ transform: translateY(1px); }
.secondary-btn{
  display:block; width:100%;
  font-size:13px;
  padding:11px 16px;
  margin-top:6px;
  color: var(--chalk);
  background: rgba(242,239,228,0.08);
  border:1px solid rgba(242,239,228,0.2);
}
.secondary-btn:active{ transform: translateY(1px); }
.home-link{
  display:block;
  margin-top:12px;
  font-size:13px; font-weight:600;
  color: var(--chalk-soft);
  text-decoration:none;
}

.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(--chalk);
  background: rgba(242,239,228,0.08);
  border:1px solid rgba(242,239,228,0.2);
  text-align:left;
}
.menu-row:active{ transform: translateY(1px); }
/* lo stato acceso/spento sta in fondo alla riga, non dentro al testo: il testo
   tradotto si scrive con textContent e si porterebbe via qualsiasi cosa
   annidata */
.menu-state{
  margin-left:auto;
  font-size:11px; font-weight:700; letter-spacing:1px;
  color: var(--chalk-yellow);
}

.menu-section-label{
  font-size:10px; font-weight:700; letter-spacing:2px;
  text-transform:uppercase;
  color: var(--chalk-soft);
  margin:14px 0 8px;
}
.difficulty-list{ display:flex; flex-direction:column; gap:8px; }
.difficulty-option{
  display:block; width:100%;
  font-size:14px;
  padding:12px 16px;
  color: var(--chalk);
  background: rgba(242,239,228,0.08);
  border:1px solid rgba(242,239,228,0.2);
}
.difficulty-option:active{ transform: translateY(1px); }
.difficulty-option.active{ border-color: var(--chalk-yellow); color: var(--chalk-yellow); }

.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(--chalk-yellow); }
.tutorial-row p{ margin:0; font-size:14px; color: var(--chalk); }
.tutorial-row-plain p{ color: var(--chalk-soft); }

/* 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(--chalk);
  background: rgba(242,239,228,0.08);
  border:1px solid rgba(242,239,228,0.2);
  text-align:left;
}
.language-option:active{ transform: translateY(1px); }
.language-option.active{ border-color: var(--chalk-yellow); background: rgba(245,217,122,0.12); }
.language-flag{ font-size:19px; }

/* classifica */
.lb-tabs{ display:flex; gap:6px; margin-bottom:12px; }
.lb-tab{
  flex:1 1 0;
  font-size:12px;
  padding:8px 4px;
  color: var(--chalk-soft);
  background: rgba(242,239,228,0.07);
  border:1px solid rgba(242,239,228,0.16);
}
.lb-tab.active{ color: var(--chalk-yellow); border-color: var(--chalk-yellow); background: rgba(245,217,122,0.12); }
.leaderboard-list{ display:flex; flex-direction:column; gap:6px; min-height:60px; }
.leaderboard-row{
  display:flex; align-items:center; gap:10px;
  padding:8px 12px;
  border-radius:5px;
  background: rgba(242,239,228,0.06);
  border:1px solid rgba(242,239,228,0.14);
  font-size:13px;
}
.leaderboard-row.is-me{ border-color: var(--chalk-yellow); background: rgba(245,217,122,0.12); }
.leaderboard-rank{ font-weight:700; color: var(--chalk-soft); flex:0 0 38px; text-align:left; }
.leaderboard-name{ flex:1 1 auto; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.leaderboard-score{ font-family:'Patrick Hand', cursive; font-size:16px; color: var(--chalk-yellow); }
.leaderboard-empty{
  font-size:13px; color: var(--chalk-soft);
  padding:14px 10px; line-height:1.4;
}

/* l'icona dopo il testo dentro un pulsante (il triangolo di "Riprendi") */
.ffr-ico-trail{ margin-left:0.5em; }

/* schermi bassi: lo schema vale più del titolo */
@media (max-height: 700px){
  .title-wrap{ display:none; }
  .hud-value{ font-size:20px; }
  .tool-btn{ font-size:10px; padding:6px 3px; }
  .clue-bar{ min-height:50px; }
}
/* tablet: lo schema è quadrato, quindi in verticale è la LARGHEZZA a decidere
   quanto può crescere — lo spazio in altezza lì avanza sempre */
@media (min-width: 700px){
  #app{ max-width: 620px; }
  .title-wrap h1{ font-size:28px; }
  .hud-value{ font-size:28px; }
  .key{ font-size:25px; padding:12px 0 13px; }
  .clue-sum{ font-size:23px; }
  .combo{ font-size:13px; }
}
@media (min-width: 900px){
  #app{ max-width: 700px; }
  .tool-btn{ font-size:12px; }
}
@media (min-width: 1200px){
  #app{ max-width: 760px; }
  .title-wrap h1{ font-size:31px; letter-spacing:9px; }
}