/*
  bosco.css — Stili specifici del gioco Il Bosco delle Lettere.

  La struttura di pagina (wrapper, top-nav, card, screen, score-pill, result-card,
  bottoni, seo-static, footer) arriva da subject-quiz-theme.css: qui c'e' solo
  cio' che il gioco aggiunge.

  REGOLA OKABE: palette-okabe.css non va mai modificato. I token della scena sono
  dichiarati due volte: il blocco senza guardia porta i valori Okabe-Ito (che la
  modalita' accessibile eredita), il blocco con guardia
  html:not([data-palette="okabe-ito"]) li rimappa sui token Wada Sanzo.

  I token --bosco-* non sono decorazione CSS: js/bosco.js li legge con
  getComputedStyle e ci disegna il pixel art del canvas (stesso meccanismo di
  js/breakout.js). Cambiarli qui cambia la scena, in entrambe le palette.
*/

/* ---- Modalita' accessibile (valori Okabe-Ito, ereditati senza guardia) ----
   L'acqua passa da lilla a azzurro Sky Blue e le chiome a un solo verde
   Bluish Green: in scala di grigi restano tre livelli separati (terreno chiaro,
   acqua media, chiome scure), che nella versione Wada si distinguono per tinta. */
body.subject-bosco {
  --bg-1: #dff0e2;
  --bg-2: #eaf3e0;
  --bg-3: #fff8da;
  --card-bg: #fffdf7;
  --text-main: #1f2d3d;

  --bosco-ground: #e8d7b4;      /* terreno del bosco */
  --bosco-clearing: #f4e8cd;    /* radura calpestabile, piu' chiara */
  --bosco-leaf-dark: #00543d;   /* chioma in ombra */
  --bosco-leaf-light: #009E73;  /* chioma in luce (Okabe Bluish Green) */
  --bosco-trunk: #6b4a2a;
  --bosco-water: #56B4E9;       /* Okabe Sky Blue */
  --bosco-water-edge: #a5d9f4;
  --bosco-wood: #a06f00;        /* legno del tabellone */
  --bosco-tile: #fffdf7;        /* tessere delle lettere */
  --bosco-ink: #1f2d3d;         /* glifi disegnati sulle tessere */
  --bosco-glow: #E69F00;        /* lanterne, luce dorata */
  --bosco-accent: #D55E00;      /* Okabe Vermillion: funghi, mela, mantello */
  --bosco-hero-hood: #E69F00;
  --bosco-hero-body: #0072B2;
  --bosco-hero-skin: #f4c58a;
}

/* ---- Modalita' standard (Wada Sanzo) ---- */
html:not([data-palette="okabe-ito"]) body.subject-bosco {
  --accent-1: var(--subj-bosco-a);
  --accent-2: var(--subj-bosco-b);
  --accent-3: var(--subj-bosco-dec);
  --bg-1: #dcebcf;
  --bg-2: var(--ws-olive-buff);
  --bg-3: var(--ws-cartridge-buff);
  --card-bg: var(--ws-ivory);
  --text-main: var(--ws-slate-black);

  /* Registro caldo Wada Sanzo, calibrato sul concept art del gioco: terreno
     ocra/pesca, chiome dal verde bottiglia al verde oliva, pozze lilla.
     Sono grafica di gioco (WCAG 1.4.11, non testo): possono essere piu' sature
     dei token testo del sito. L'unico colore che fa da testo e' --bosco-ink,
     usato per i glifi sulle tessere chiare. */
  --bosco-ground: #dda96b;
  --bosco-clearing: #f0be83;
  --bosco-leaf-dark: #164c45;
  --bosco-leaf-light: #94b24c;
  --bosco-trunk: #614d2d;
  --bosco-water: #ae99c0;
  --bosco-water-edge: #deb6c2;
  --bosco-wood: #ad773c;
  --bosco-tile: #ffe8ac;
  --bosco-ink: #49331e;
  --bosco-glow: #ffc76c;
  --bosco-accent: var(--ws-terracotta);
  --bosco-hero-hood: #edb33e;
  --bosco-hero-body: #29887a;
  --bosco-hero-skin: #f4c58a;
}

/* ---- Scena ---- */
.bosco-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  position: relative;
}

/* La scena e' un contenitore posizionato: i due pulsanti che fanno avanzare il
   gioco stanno SOPRA il canvas, non sotto. Nella barra in fondo finivano fuori
   schermo appena la finestra era corta, e il bambino restava fermo su una parola
   gia' risolta senza vedere come proseguire. */
.bosco-scene {
  position: relative;
  width: min(100%, 860px, 136vh);
  display: flex;
}

.bosco-canvas {
  /* 8:5 fisso, come il canvas logico 800x500. */
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
  display: block;
  border: 4px solid var(--accent-1);
  border-radius: 20px;
  background: var(--bosco-ground);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
  touch-action: none;
  /* Il pixel art e' disegnato a 800x500 e ingrandito: nessuna interpolazione. */
  image-rendering: pixelated;
}

.bosco-canvas:focus-visible {
  outline: 4px solid var(--accent-3);
  outline-offset: 3px;
}

.bosco-btn.bosco-onstage {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 4;
  font-size: 1.05rem;
  padding: 14px 26px;
  background: var(--accent-1);
  color: #fff;
  border-color: var(--accent-1);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

.bosco-btn.bosco-onstage:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
}

@media (max-width: 540px) {
  .bosco-btn.bosco-onstage {
    bottom: 10px;
    font-size: 0.95rem;
    padding: 12px 18px;
  }
}

.bosco-controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.bosco-btn {
  padding: 10px 18px;
  border: 3px solid var(--accent-1);
  background: var(--card-bg);
  color: var(--text-main);
  border-radius: 50px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.bosco-btn:hover {
  background: var(--accent-1);
  color: #fff;
}

.bosco-btn[disabled] {
  opacity: 0.45;
  cursor: default;
}

.bosco-btn[disabled]:hover {
  background: var(--card-bg);
  color: var(--text-main);
}

.bosco-hint {
  display: none;
  font-size: 0.85rem;
  font-weight: 700;
  opacity: 0.75;
  text-align: center;
}

@media (hover: none) {
  .bosco-hint {
    display: block;
  }
}

/* ---- Barra attivita': parola in costruzione + lettere da scegliere ---- */
.bosco-activity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin-top: 4px;
  padding: 16px 20px;
  background: var(--card-bg);
  border: 3px solid var(--accent-1);
  border-radius: var(--radius-lg, 28px);
}

.bosco-prompt {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.bosco-label {
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-1);
}

.bosco-word {
  display: flex;
  gap: 8px;
  font-family: 'Fredoka One', 'Fredoka One Fallback', cursive;
  font-size: clamp(1.6rem, 6vw, 2.3rem);
  line-height: 1.1;
  color: var(--text-main);
}

.bosco-word .missing {
  color: var(--accent-3);
}

.bosco-note {
  font-size: 0.9rem;
  font-weight: 700;
  opacity: 0.8;
}

.bosco-choices {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.bosco-choices button {
  /* I gruppi arrivano a quattro caratteri (SCIE): larghezza minima, non fissa. */
  min-width: 64px;
  padding: 0 14px;
  height: 64px;
  border: 3px solid var(--accent-1);
  border-radius: 18px;
  background: var(--bg-3, #fff8da);
  color: var(--text-main);
  font-family: 'Fredoka One', 'Fredoka One Fallback', cursive;
  font-size: 1.7rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}

.bosco-choices button:hover {
  background: var(--accent-1);
  color: #fff;
}

.bosco-choices button:active {
  transform: translateY(2px);
}

.bosco-choices button[disabled] {
  opacity: 0.45;
  cursor: default;
}

.bosco-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* ---- Scelta della classe ----
   Cambia quali parole possono uscire, non quanto il gioco e' severo: la classe
   3ª aggiunge le parole piu' lunghe, non toglie tempo ne' aggiunge penalita'. */
.bosco-classe {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.bosco-classe-label {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, #6e6357);
}

.bosco-classe .icon-btn[aria-pressed="true"],
.bosco-classe .icon-btn[data-modalita][aria-pressed="true"] {
  background: var(--accent-1);
  border-color: var(--accent-1);
  color: #fff;
}

/* ---- Riga per l'adulto che guarda ----
   Quali gruppi il bambino sta sbagliando. Non e' un punteggio e non e' rivolta
   a lui: nel gioco non compaiono voti ne' classifiche. */
.bosco-ripasso {
  margin-top: 6px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--muted, #6e6357);
}

/* ---- Il gufo che spiega ----
   Compare solo dopo una scelta sbagliata, con la regola sul caso concreto.
   Sta nel flusso della pagina e non sopra la scena: il testo resta selezionabile
   e leggibile dallo screen reader, e non copre il gioco. */
.bosco-owl {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 14px 18px;
  background: var(--bg-3, #fff8da);
  border: 3px solid var(--accent-3);
  border-radius: var(--radius-md, 18px);
}

.bosco-owl-face {
  font-size: 1.8rem;
  line-height: 1;
}

.bosco-owl-text {
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.45;
}

/* ---- Tappe dell'avventura: tre pill, una per parola ---- */
.bosco-journey {
  display: flex;
  gap: 8px;
  align-items: center;
}

.bosco-step {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 3px solid var(--accent-1);
  background: var(--card-bg);
  color: var(--accent-1);
  font-family: 'Fredoka One', 'Fredoka One Fallback', cursive;
  font-size: 1rem;
}

.bosco-step.current {
  background: var(--accent-3);
  border-color: var(--accent-3);
  color: #fff;
}

.bosco-step.finished {
  background: var(--accent-1);
  border-color: var(--accent-1);
  color: #fff;
}

/* ---- Overlay pausa / istruzioni / finale ----
   Copre solo la scena, non tutta la pagina: la parte SEO sotto resta leggibile
   e navigabile da tastiera anche a dialog aperto. */
.bosco-overlay {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  padding: 16px;
  border-radius: 20px;
  background: rgba(31, 45, 61, 0.55);
  z-index: 5;
}

.bosco-overlay.open {
  display: grid;
}

.bosco-overlay-card {
  max-width: 460px;
  max-height: 100%;
  overflow-y: auto;
  padding: 22px 24px;
  text-align: center;
  background: var(--card-bg);
  border: 4px solid var(--accent-1);
  border-radius: var(--radius-lg, 28px);
  box-shadow: var(--shadow-card, 0 14px 34px rgba(0, 0, 0, 0.2));
}

.bosco-overlay-card h2 {
  margin-bottom: 10px;
  font-family: 'Fredoka One', 'Fredoka One Fallback', cursive;
  font-size: 1.5rem;
  color: var(--accent-1);
}

.bosco-overlay-card p {
  margin-bottom: 10px;
  font-size: 0.98rem;
  line-height: 1.5;
}

.bosco-overlay-card p:last-of-type {
  margin-bottom: 16px;
}

.bosco-overlay-card .btn-replay {
  margin: 0 auto;
}

@media (max-width: 640px) {
  .bosco-activity {
    flex-direction: column;
    align-items: stretch;
    padding: 14px;
  }

  .bosco-choices,
  .bosco-actions {
    justify-content: center;
  }

  .bosco-choices button {
    min-width: 72px;
    height: 72px;
  }
}