/* Longbara — foglio di stile comune al sito e all'informativa.
   Le dieci ambientazioni sono quelle vere del gioco, prese da LevelPalette.cs:
   il colore che vedi qui e' lo stesso che vedi giocando. */

@font-face {
  font-family: 'Fraunces';
  src: url('fraunces-latin.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Bosco, l'ambientazione dei primi livelli */
  --sky:    #E4EDD8;
  --board:  #D3E2C4;
  --ground: #BCD2A8;
  --block:  #7FA46B;
  --body:   #BC8A5C;
  --ink:    #3B4A32;
  --accent: #E8A64E;

  --measure: 34rem;
  --edge: clamp(1.5rem, 6vw, 7rem);

  color-scheme: light;
}

[data-world="tramonto"] { --sky:#FDE7D6; --board:#F7D3BA; --ground:#EFBE9B; --block:#D08A66; --body:#B5794A; --ink:#4E2F22; --accent:#EE8B52; }
[data-world="lavanda"]  { --sky:#EDE6F6; --board:#DDD2EE; --ground:#C7B8E2; --block:#8570B0; --body:#BC8A5C; --ink:#3C3155; --accent:#B78FE0; }
[data-world="menta"]    { --sky:#DDF2E9; --board:#C6E7DA; --ground:#A9DAC7; --block:#4E9B83; --body:#C08A55; --ink:#21443B; --accent:#F2AF57; }
[data-world="sabbia"]   { --sky:#F8EFDC; --board:#F0E1C2; --ground:#E2CDA2; --block:#AE9160; --body:#AE7440; --ink:#4B3D26; --accent:#E9A845; }
[data-world="mirtillo"] { --sky:#E3E8F5; --board:#CFD8EE; --ground:#B5C2E2; --block:#5C6C9E; --body:#BE8A5A; --ink:#273052; --accent:#F0C063; }
[data-world="cielo"]    { --sky:#DEF0F8; --board:#C7E4F1; --ground:#A9D5E9; --block:#4F87A2; --body:#C08C5C; --ink:#1F3B46; --accent:#F5A155; }
[data-world="cacao"]    { --sky:#F3E5D6; --board:#E5D0B8; --ground:#D2B694; --block:#8A6446; --body:#9C6338; --ink:#3B2718; --accent:#D9884A; }
[data-world="rosa"]     { --sky:#FAE6E7; --board:#F2CFD4; --ground:#E7B6BF; --block:#AE6A7A; --body:#B5825C; --ink:#48292F; --accent:#E5828F; }
[data-world="muschio"]  { --sky:#F4F2D8; --board:#E5E5B8; --ground:#D3D69B; --block:#78854C; --body:#B4844A; --ink:#383B20; --accent:#DDA047; }

/* Scuro: non un tema inventato, ma la stessa ambientazione girata.
   L'inchiostro diventa il fondo, il cielo diventa il testo. */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; }
  body { background: var(--ink); color: var(--sky); }
  body::before { opacity: .10; }
  .rule { background: color-mix(in oklab, var(--sky) 22%, transparent); }
  .muted { color: color-mix(in oklab, var(--sky) 66%, var(--ink)); }
  .chip { border-color: color-mix(in oklab, var(--sky) 24%, transparent); color: var(--sky); }
  .chip[aria-pressed="true"] { background: var(--sky); color: var(--ink); border-color: var(--sky); }
  input, textarea { background: color-mix(in oklab, var(--sky) 8%, transparent); color: var(--sky);
                    border-color: color-mix(in oklab, var(--sky) 22%, transparent); }
  .tile { background: color-mix(in oklab, var(--sky) 12%, transparent); }
  .tile--filled { background: color-mix(in oklab, var(--body) 80%, var(--ink)); }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--sky);
  color: var(--ink);
  font: 400 clamp(1rem, .96rem + .2vw, 1.075rem)/1.7
        ui-rounded, "SF Pro Rounded", "Segoe UI", "Helvetica Neue", sans-serif;
  transition: background-color .5s cubic-bezier(.22,1,.36,1), color .5s cubic-bezier(.22,1,.36,1);
  overflow-x: hidden;
}

/* La griglia del gioco, appena accennata sul fondo. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: .55;
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--ground) 55%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--ground) 55%, transparent) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: radial-gradient(120% 90% at 78% 0%, #000 0%, transparent 72%);
}

main { max-width: 68rem; margin: 0 auto; padding: 0 var(--edge) clamp(4rem, 12vw, 9rem); }

/* --- tipografia --- */

h1, h2, h3, .display {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-variation-settings: 'opsz' 120, 'SOFT' 40;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(3.1rem, 1.6rem + 6.6vw, 7.5rem); }
h2 { font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.9rem); line-height: 1.1; }
h3 { font-size: clamp(1.12rem, 1rem + .5vw, 1.4rem); font-variation-settings: 'opsz' 20; }

p { margin: 0 0 1.1em; max-width: var(--measure); }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1.5px;
    text-decoration-color: color-mix(in oklab, var(--accent) 75%, transparent); }
a:hover { text-decoration-color: var(--accent); }

.muted { color: color-mix(in oklab, var(--ink) 62%, var(--sky)); }
.eyebrow {
  font: 600 .74rem/1 ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  letter-spacing: .19em; text-transform: uppercase;
  color: color-mix(in oklab, var(--ink) 55%, var(--sky));
  margin: 0 0 1.4rem;
}
.rule { height: 1px; border: 0; background: color-mix(in oklab, var(--ink) 16%, transparent); margin: 0; }

/* --- entrata: una sola sequenza, all'apertura --- */
.rise { opacity: 0; transform: translateY(14px); animation: rise .9s cubic-bezier(.16,1,.3,1) forwards; }
.rise:nth-child(2) { animation-delay: .06s; }
.rise:nth-child(3) { animation-delay: .12s; }
.rise:nth-child(4) { animation-delay: .18s; }
@keyframes rise { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rise { opacity: 1; transform: none; }
}