/* StudyCop: catalogo dei personaggi, versione adulta. Grigio caldo, inchiostro, accenti salvia / prugna / albicocca / cielo / ocra */
/* caratteri serviti dal sito (OFL, sottoinsieme latin variabile scaricato da Google Fonts): nessuna richiesta a terzi per i font */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 500 800; font-display: swap; src: url(fonts/bricolage-grotesque.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/figtree.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --legal: 44px;
  --ground: #F4F2EE; --paper: #FFFFFF; --paper-2: #FAF9F6; --ink: #1C1F2E; --mute: #5C6070; --line: #E5E1D8; --line-2: #D2CDC2;
  --sage: #3E8E6A; --sage-ink: #2D6E51; --sage-bg: #E3F0E8;
  --plum: #6B4FA8; --plum-ink: #563C92; --plum-bg: #ECE7F5;
  --apri: #E8875A; --apri-ink: #A44C26; --apri-bg: #FBE8DD;
  --sky: #3F7FC9; --sky-ink: #2B60A0; --sky-bg: #E2ECF7;
  --ocra: #D9A23A; --ocra-ink: #84600F; --ocra-bg: #F8EDD3;
  --coin: #E3A92B; --coin-d: #A8740F; --danger: #B4432A;
  --action: #1C1F2E; --on-action: #FFFFFF;
  --shadow: 0 1px 2px rgba(28, 31, 46, .06), 0 10px 28px -16px rgba(28, 31, 46, .22);
  --shadow-up: 0 2px 6px rgba(28, 31, 46, .08), 0 22px 44px -18px rgba(28, 31, 46, .34);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --f-d: "Bricolage Grotesque", Figtree, system-ui, sans-serif; --f-t: Figtree, system-ui, sans-serif;
  --owl: #8E79C9; --owl-d: #6E58AE; --belly: #F2EEF9; --disc: #FBFAFD; --cap: #1C1F2E; --cap-d: #0F111A; --cheek: #E8875A;
  --tom: #E2553E; --tom-d: #B23A27; --tom-ink: #A9361F; --leaf: #4F9A4A; --leaf-d: #3B7A37;
  --k0: #3E8E6A; --k1: #6B4FA8; --k2: #E8875A; --k3: #3F7FC9; --k4: #D9A23A;
  --l0: #A8754C; --l1: #8D97AA; --l2: #D9A23A; --l3: #2F9C95; --l4: #6B4FA8;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #15161C; --paper: #1E2029; --paper-2: #1A1C24; --ink: #ECEAE4; --mute: #A3A6B4; --line: #2C2F3B; --line-2: #3B3F4D;
    --sage: #5DB48B; --sage-ink: #8FD3B0; --sage-bg: #1C2E26; --plum: #9C84DB; --plum-ink: #C3B3F1; --plum-bg: #29243E;
    --apri: #EE9A72; --apri-ink: #F4B394; --apri-bg: #3A2620; --sky: #6FA6E4; --sky-ink: #A6C8F1; --sky-bg: #1D293B;
    --ocra: #E3B456; --ocra-ink: #EBC77E; --ocra-bg: #352C18; --danger: #E06A4F;
    --action: #ECEAE4; --on-action: #15161C;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 28px -14px rgba(0, 0, 0, .6);
    --shadow-up: 0 2px 6px rgba(0, 0, 0, .35), 0 24px 44px -16px rgba(0, 0, 0, .7);
    --owl: #8C78C6; --owl-d: #6A55A8; --belly: #E9E3F6; --disc: #F6F3FB; --cap: #2B2F45; --cap-d: #12131A;
    --tom-ink: #F39A86;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--line-2) transparent; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 1rem/1.55 var(--f-t); min-height: 100dvh; caret-color: var(--plum); }
::selection { background: var(--plum-bg); color: var(--ink); }
[hidden] { display: none !important; }
h1, h2, h3, .brand, .num, .bigxp { font-family: var(--f-d); font-weight: 700; line-height: 1.1; margin: 0; letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 1.5rem + 1.8vw, 3.25rem); font-weight: 800; letter-spacing: -.035em; }
h2 { font-size: 1.5rem; } h3 { font-size: 1.125rem; letter-spacing: -.01em; }
p { margin: 0; }
b, strong { font-weight: 700; }
a { color: var(--plum-ink); text-underline-offset: 3px; }
:focus-visible { outline: 2.5px solid var(--plum); outline-offset: 3px; border-radius: 10px; }
.lead { font-size: 1.0625rem; color: var(--mute); margin-top: 8px; max-width: 60ch; }
.mute { color: var(--mute); }
.small { font-size: .875rem; }
.loading { color: var(--mute); padding: 60px 0; text-align: center; }
.stack > * + * { margin-top: 16px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* guscio: barra laterale su desktop, barra in alto e schede in basso sul telefono */
.shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); grid-template-rows: 1fr auto; min-height: 100dvh; }
.side { grid-row: 1 / 3; position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; gap: 32px; padding: 28px 16px 24px; background: var(--paper-2); border-right: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 10px; font-size: 1.375rem; font-weight: 800; letter-spacing: -.03em; color: var(--ink); text-decoration: none; }
.brand svg { width: 34px; height: 34px; } .brand .b0 { fill: var(--ink); } .brand .b1 { fill: var(--paper); } .brand .b2 { fill: var(--coin); }
#tabs { display: grid; gap: 4px; }
#tabs a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: var(--mute); font-weight: 600; text-decoration: none; transition: background-color .2s, color .2s; }
#tabs a:hover { background: var(--line); color: var(--ink); }
#tabs a[aria-current=page] { background: var(--ink); color: var(--paper); }
.side-note { margin-top: auto; padding: 0 10px; font-size: .8125rem; color: var(--mute); max-width: 26ch; }
main { width: 100%; max-width: 1280px; padding: 40px clamp(20px, 3.5vw, 56px) 72px; outline: none; }

/* bottoni: pillole piene d'inchiostro; ghost con filetto */
.btn { --c: var(--action); --t: var(--on-action); display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 20px;
  border: 0; border-radius: 999px; background: var(--c); color: var(--t); font: 600 1rem/1.2 var(--f-t); cursor: pointer; text-decoration: none; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(28, 31, 46, .1), 0 8px 18px -10px rgba(28, 31, 46, .55); transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s; }
.btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(28, 31, 46, .12), 0 14px 24px -12px rgba(28, 31, 46, .6); }
.btn:active:not(:disabled) { transform: translateY(1px) scale(.98); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.big { min-height: 56px; padding: 14px 28px; font-size: 1.0625rem; }
.btn.small { min-height: 36px; padding: 6px 14px; font-size: .9375rem; }
.btn.block { width: 100%; }
.btn.ghost { --c: transparent; --t: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.btn.ghost:hover:not(:disabled) { --c: var(--paper); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn.red { --c: var(--danger); --t: #fff; }
.btn .coin { width: 18px; height: 18px; }
.link { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--plum-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.card { background: var(--paper); border-radius: 22px; padding: 22px; box-shadow: var(--shadow); }
a.card { color: inherit; text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
a.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-up); }
.narrow { max-width: 560px; margin-inline: auto; }
.notice { background: var(--ocra-bg); border-radius: 14px; padding: 12px 16px; font-weight: 600; margin-bottom: 20px; }
.notice.bad { background: var(--apri-bg); color: var(--apri-ink); }
.err { color: var(--apri-ink); font-weight: 600; min-height: 1.5em; }
.err:empty { min-height: 0; }
.ok { color: var(--sage-ink); font-weight: 700; }

/* moduli */
label.f { display: grid; gap: 6px; font-weight: 600; font-size: .9375rem; }
input[type=text], input[type=email], input[type=password] { font: inherit; width: 100%; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--line-2);
  background: var(--paper-2); color: var(--ink); transition: border-color .2s, background-color .2s; }
input[type=text]:hover, input[type=email]:hover, input[type=password]:hover { border-color: var(--mute); }
input:focus-visible { outline-offset: 1px; background: var(--paper); }
details summary { cursor: pointer; font-weight: 600; color: var(--plum-ink); }
.obh { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.obh output { font: 700 1.0625rem var(--f-d); color: var(--sage-ink); font-variant-numeric: tabular-nums; }
.slider { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; margin: 14px 0 4px; border-radius: 99px; cursor: pointer;
  background: linear-gradient(to right, var(--sage) var(--p, 0%), var(--line) var(--p, 0%)); }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--paper); border: 3px solid var(--ink);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: transform .15s var(--ease); }
.slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--paper); border: 3px solid var(--ink); }
.slider:active::-webkit-slider-thumb { transform: scale(1.15); }
.slider:focus-visible { outline-offset: 10px; }
.obs { display: flex; justify-content: space-between; font-weight: 600; }
.switch { display: flex; align-items: center; gap: 12px; font-weight: 500; cursor: pointer; }
.switch input { -webkit-appearance: none; appearance: none; flex: none; width: 40px; height: 24px; margin: 0; border-radius: 99px; background: var(--line-2); position: relative; cursor: pointer; transition: background-color .2s; }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--paper); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .25s var(--ease); }
.switch input:checked { background: var(--sage); }
.switch input:checked::after { transform: translateX(16px); }

/* accesso */
.auth { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, 440px); gap: clamp(32px, 5vw, 80px); align-items: center; min-height: calc(100dvh - 112px); }
.auth .intro .owl { width: 140px; margin-bottom: 20px; }
.punti { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 18px; max-width: 52ch; }
.punti li { display: flex; gap: 14px; align-items: flex-start; color: var(--mute); }
.punti li b { color: var(--ink); }
.punti .ic { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--plum-bg); color: var(--plum-ink); }
.punti li:nth-child(2) .ic { background: var(--sage-bg); color: var(--sage-ink); } .punti li:nth-child(3) .ic { background: var(--ocra-bg); color: var(--ocra-ink); }
.auth form h2, .auth .card h2 { font-size: 1.75rem; }
.sw { text-align: center; }

/* pagina d'ingresso: il gufo in piedi sul prato di esempio (la scena e' .scena, come in Oggi); Accedi e Registrati sono una finestra */
body.fuori .shell { display: block; }
body.fuori .side { display: none; }
body.fuori .scena { inset: 0; --barra: 0px; }
body.fuori main { padding: clamp(24px, 6dvh, 56px) 20px 0; }
.prato.ingresso { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; height: calc(100dvh - clamp(24px, 6dvh, 56px) - var(--legal)); min-height: 600px; }
.ingresso .hello .lead { margin-inline: auto; }
.ingresso .owl { width: clamp(130px, min(28dvh, 42vw), 270px); margin-top: 8px; position: relative; z-index: 1; animation: rise .7s var(--ease); }
.ingresso .o-pl, .ingresso .o-pr { transition: transform .12s var(--ease); }
.entra { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; padding: 8px; border-radius: 999px; background: var(--paper); box-shadow: var(--shadow-up); position: relative; z-index: 1; }   /* un foglio sotto i bottoni: sul bosco, a ogni ora, il primario si legge */
.fatti { list-style: none; margin: 0; padding: 0; position: absolute; left: 0; right: 0; bottom: 24px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ingresso .chip { box-shadow: var(--shadow), inset 0 0 0 1px var(--line); }
.prato.ingresso > .finestra { position: absolute; left: 0; right: 0; bottom: 0; height: 74%; grid-column: auto; grid-row: auto; }
dialog.modal.accesso { text-align: left; overflow: auto; max-height: calc(100dvh - 32px); }
.accesso .stack { margin-top: 4px; }
.accesso .obs { margin-top: 8px; }

/* prato: la scena 3D fissa (canvas .g3 sul cielo dell'ora) dietro alle pagine Oggi e Giardino; la pagina sta davanti */
.shell { position: relative; z-index: 1; }
.su-prato .shell { pointer-events: none; }   /* il prato riceve i clic dove la pagina e' vuota */
.su-prato .side, .su-prato .legal, .su-prato main > :not(.prato) { pointer-events: auto; }   /* errori e caricamento sopra il prato restano cliccabili */
.su-prato main { max-width: none; padding-bottom: 32px; }
.scena { --c1: #A9D3EE; --c2: #EAF4F4; --astro: #FFD36B; --barra: 0px;
  position: fixed; z-index: 0; inset: 0 0 0 236px; overflow: hidden; isolation: isolate; container-type: inline-size; user-select: none; -webkit-tap-highlight-color: transparent;
  background: linear-gradient(var(--c1) 8%, var(--c2) 45%); }   /* il colore pieno in alto, dove sta il saluto */
.scena[data-fase=alba] { --c1: #F0B6A3; --c2: #FCE6CF; --astro: #FFB271; }
.scena[data-fase=tramonto] { --c1: #574A93; --c2: #F2A677; --astro: #FF995B; }
.scena[data-meteo=nuvole] { --c1: #B7C9D6; --c2: #E6ECEE; }
.scena[data-meteo=pioggia] { --c1: #8E9DAD; --c2: #CBD3DA; }
/* la sera nuvolosa o piovosa resta scura: il saluto e' bianco */
.scena[data-fase=tramonto][data-meteo=nuvole] { --c1: #4F4A80; --c2: #B8908A; }
.scena[data-fase=tramonto][data-meteo=pioggia] { --c1: #3E4160; --c2: #7D7B8E; }
.scena[data-fase=notte] { --c1: #141A39; --c2: #353968; --astro: #FFF1C9; }
.scena[data-fase=notte][data-meteo=pioggia] { --c1: #1C2134; --c2: #2E3448; }
/* sole, luna (falce) e stelle: nel cielo sopra il bosco */
.scena::before { content: ""; position: absolute; z-index: -1; top: calc(var(--barra) + 4.5%); right: 7%; width: max(36px, 4cqw); aspect-ratio: 1; border-radius: 50%; background: var(--astro); }
.scena[data-fase=alba]::before { right: auto; left: 7%; top: calc(var(--barra) + 9%); }
.scena[data-fase=tramonto]::before { top: calc(var(--orizzonte, 234px) - 34px); right: 36%; }   /* basso, dietro le cime del bosco (--orizzonte da giardino3d.js) */
.scena[data-fase=notte]::before { background: transparent; box-shadow: inset -1.1cqw .55cqw 0 0 var(--astro); }   /* falce di luna */
.scena[data-meteo=pioggia]::before { opacity: 0; } .scena[data-meteo=nuvole]::before { opacity: .6; }
/* stelle: un punto ripetuto con ombre nette (niente sfocatura), posizioni in % della larghezza */
.scena::after { content: ""; position: absolute; z-index: -1; top: var(--barra); left: 0; width: 2px; height: 2px; border-radius: 50%; display: none; pointer-events: none;
  box-shadow: 7cqw 6cqw #FFF6D8, 18cqw 2cqw #FFF6D8, 27cqw 9cqw #FFF6D8, 38cqw 3cqw #FFF6D8, 52cqw 2cqw #FFF6D8, 63cqw 7cqw #FFF6D8,
    74cqw 3cqw #FFF6D8, 88cqw 10cqw #FFF6D8, 94cqw 4cqw #FFF6D8, 12cqw 13cqw #FFF6D8, 46cqw 11cqw #FFF6D8, 81cqw 14cqw #FFF6D8,
    3cqw 3.5cqw #FFF6D8, 9cqw 10cqw #FFF6D8, 15cqw 8cqw #FFF6D8, 21cqw 5cqw #FFF6D8, 31cqw 5.5cqw #FFF6D8, 41cqw 8cqw #FFF6D8, 49cqw 6cqw #FFF6D8,
    56cqw 9cqw #FFF6D8, 60cqw 4cqw #FFF6D8, 68cqw 11cqw #FFF6D8, 77cqw 8cqw #FFF6D8, 84cqw 11.5cqw #FFF6D8, 97cqw 12cqw #FFF6D8,
    15cqw 1cqw #FFF6D899, 23cqw 12cqw #FFF6D899, 34cqw 13cqw #FFF6D899, 43cqw 1cqw #FFF6D899, 58cqw 13.5cqw #FFF6D899, 70cqw 1.5cqw #FFF6D899,
    79cqw 5cqw #FFF6D899, 85cqw 2cqw #FFF6D899, 91cqw 14cqw #FFF6D899, 99cqw 7cqw #FFF6D899, 97cqw 1.5cqw #FFF6D899, 5cqw 15.5cqw #FFF6D899,
    28cqw 15cqw #FFF6D899, 38cqw 16cqw #FFF6D899, 65cqw 15cqw #FFF6D899, 75cqw 14.5cqw #FFF6D899, 2cqw 9cqw #FFF6D899, 52cqw 14cqw #FFF6D899; }
.scena[data-fase=notte]:not([data-meteo=pioggia])::after { display: block; }
.scena .g3 { position: absolute; inset: 0; display: block; width: 100%; height: 100%; transition: opacity .6s var(--ease); }
.scena.carica .g3 { opacity: 0; }
#gi { position: absolute; inset: 0; }
#gi[inert] { pointer-events: none; }

/* strato DOM: bottoni trasparenti sopra modelli e posti (posizioni da giardino3d.js); si vedono solo col fuoco da tastiera */
.it, .posto { position: absolute; padding: 0; border: 0; background: none; color: inherit; font: inherit; }
.it { border-radius: 40%; cursor: grab; touch-action: none; }
.it.ani { cursor: pointer; touch-action: auto; }
.posto { border-radius: 50%; cursor: pointer; }
.it:focus-visible, .posto:focus-visible { outline: 2.5px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px rgba(28, 31, 46, .35); }
.scena.sposta .it:not(.sel) { cursor: pointer; }
.it.piano { width: 9%; padding: 6px; border-radius: 10px; background: var(--paper); font-size: .8125rem; font-weight: 600; box-shadow: var(--shadow); }   /* senza 3D */
.it .cuore { position: absolute; left: 50%; top: 0; width: 22px; margin-left: -11px; pointer-events: none; animation: g-cuore 1.1s ease-out forwards; }
.cuore path { fill: #EE6F8A; stroke: #fff; stroke-width: 1.5; }
.btn .cuore { width: 18px; height: 18px; }
@keyframes g-cuore { from { transform: translateY(0) scale(.4); opacity: 0; } 20% { transform: translateY(-8px) scale(1.15); opacity: 1; } to { transform: translateY(-44px) scale(.9); opacity: 0; } }
.gvuoto { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max-content; max-width: 80%; text-align: center; background: var(--paper);
  border-radius: 14px; padding: 10px 16px; font-weight: 600; box-shadow: var(--shadow-up); z-index: 150; }

/* pagina sopra il prato: saluto nel cielo, finestra libera sul prato, pannello a destra */
.prato { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); grid-template-rows: auto minmax(0, 1fr); column-gap: 32px;
  height: calc(100dvh - 72px - var(--legal)); min-height: 560px; }
.prato > * { pointer-events: auto; }
.prato > .hello { grid-column: 1 / -1; padding-bottom: 28px; }
.prato > .finestra { grid-column: 1; grid-row: 2; position: relative; min-height: 0; pointer-events: none; }
.prato > .pannello { grid-column: 2; grid-row: 2; align-self: start; max-height: 100%; overscroll-behavior: contain; box-shadow: var(--shadow-up); }
.prato > .pannello.col { overflow: auto; }
.finestra .confetti { z-index: 5; }
/* il saluto sta sul cielo, che ha i suoi colori in entrambi i temi: inchiostro di giorno, bianco la sera e la notte */
.hello { margin-bottom: 32px; }
.prato > .hello { margin: 0; }
.prato .hello { --ink: #1C1F2E; --mute: #2E3346; --action: #1C1F2E; --on-action: #FFFFFF; --paper: #FFFFFF; --line: rgba(28, 31, 46, .12); color: var(--ink); }
.prato[data-fase=tramonto] .hello, .prato[data-fase=notte] .hello { --ink: #FFFFFF; --mute: #FFFFFF; --action: #FFFFFF; --on-action: #1C1F2E; --paper: #2B2F52; --line: rgba(255, 255, 255, .2); }
.hello .lead { max-width: 52ch; }
.hello .btn { margin-top: 20px; }
.hello .chip { margin-top: 14px; }
.vista .seg { display: flex; margin-bottom: 18px; } .vista .seg button, .voto .seg button { flex: 1; }
.voto .seg { display: flex; margin-top: 8px; }
.hello .notice { margin: 16px 0 0; max-width: 52ch; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 10px; border-radius: 99px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line);
  font-size: .8125rem; font-weight: 600; color: var(--mute); white-space: nowrap; }
.chip .ic { width: 16px; height: 16px; }

/* pannello delle statistiche: un solo foglio, sezioni divise da filetti tratteggiati */
.card.col { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.col > * { padding: 22px; flex: none; }
.col > * + * { border-top: 1px dashed var(--line-2); }
.col > .err:empty { display: none; }
.goal { display: flex; align-items: center; gap: 18px; }
.ring { width: 116px; flex: none; }
.ring .rb { fill: none; stroke: var(--line); stroke-width: 10; }
.ring .rp { fill: none; stroke: var(--sage); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p));
  transform: rotate(-90deg); transform-origin: 60px 60px; animation: ring 1.2s var(--ease); }
.ring.done .rp { stroke: var(--coin); }
.ring text { font: 700 24px var(--f-d); fill: var(--ink); text-anchor: middle; font-variant-numeric: tabular-nums; }
.ring tspan.s { font: 500 11px var(--f-t); fill: var(--mute); }
@keyframes ring { from { stroke-dashoffset: 100; } }
.goal h2 { font-size: 1.25rem; margin-bottom: 4px; }
.col > .pair { display: grid; grid-template-columns: 1fr 1fr; padding: 0; }
.stat { display: flex; align-items: center; gap: 12px; padding: 18px 22px; }
.stat + .stat { border-left: 1px dashed var(--line-2); }
.stat svg { width: 30px; height: 36px; flex: none; }
.stat span { display: block; line-height: 1.25; }
.stat .num { font-size: 2rem; display: block; font-variant-numeric: tabular-nums; }
a.stat { color: inherit; text-decoration: none; transition: background-color .2s; }
a.stat:hover { background: var(--paper-2); }
.flame path { fill: var(--line-2); }
.flame.on path { fill: var(--apri); } .flame.on .fi { fill: var(--coin); }
.flame.on { animation: flicker 1.6s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes flicker { 50% { transform: scale(1.04, 1.08) rotate(-2deg); } }
.xp path { fill: var(--coin); stroke: var(--coin-d); stroke-width: 1.5; stroke-linejoin: round; }
.leaguecard { display: flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; transition: background-color .2s; }
.leaguecard:hover { background: var(--paper-2); }
.leaguecard > div { flex: 1; }
.leaguecard > .ic { color: var(--mute); transition: transform .25s var(--ease); }
.leaguecard:hover > .ic { transform: translateX(3px); color: var(--ink); }
.badge { width: 46px; flex: none; }
.badge .bs { fill: var(--lc, var(--l0)); }
.badge path.ch { fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.l0 { --lc: var(--l0); } .l1 { --lc: var(--l1); } .l2 { --lc: var(--l2); } .l3 { --lc: var(--l3); } .l4 { --lc: var(--l4); }
/* monete, prossimo acquisto e ingresso al giardino */
.gbar { display: grid; gap: 16px; }
.gtop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.coins { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px 6px 6px; border-radius: 99px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line);
  font: 700 1.25rem var(--f-d); font-variant-numeric: tabular-nums; }
.coin { width: 28px; height: 28px; flex: none; }
.coin .c1 { fill: var(--coin); stroke: var(--coin-d); stroke-width: 1.5; } .coin .c2 { fill: none; stroke: var(--coin-d); stroke-width: 1.2; opacity: .6; }
.coin .c3 { fill: var(--coin-d); stroke: var(--coin-d); stroke-width: 1.2; stroke-linecap: round; }
.next { display: grid; grid-template-columns: auto minmax(80px, 1fr); align-items: center; gap: 4px 14px; }
.next:empty { display: none; }
.next .nl { font-weight: 500; } .next .small { grid-column: 1 / -1; }
.bar { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.bar i { display: block; height: 100%; width: 100%; background: var(--coin); border-radius: inherit; transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease); }

/* tinte delle schede da catalogo */
.t-salvia { --t: var(--sage); --ti: var(--sage-ink); --tb: var(--sage-bg); } .t-prugna { --t: var(--plum); --ti: var(--plum-ink); --tb: var(--plum-bg); }
.t-albicocca { --t: var(--apri); --ti: var(--apri-ink); --tb: var(--apri-bg); } .t-cielo { --t: var(--sky); --ti: var(--sky-ink); --tb: var(--sky-bg); }
.t-ocra { --t: var(--ocra); --ti: var(--ocra-ink); --tb: var(--ocra-bg); }

/* giardino: il pannello e' il negozio, con in cima la scheda di chi hai toccato */
.prato.giardino > .pannello { align-self: stretch; }
.negozio .ph { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 14px; background: var(--paper); }
.scheda { position: relative; background: var(--tb); animation: scheda .35s var(--ease) both; }
@keyframes scheda { from { opacity: 0; transform: translateY(-6px); } }
.scheda .sh { display: flex; gap: 12px; align-items: center; padding-right: 30px; }
.scheda .num, .si .num { display: grid; place-items: center; min-width: 36px; height: 36px; padding: 0 6px; border-radius: 10px; background: var(--ti); color: var(--paper);
  font: 700 .9375rem var(--f-d); font-variant-numeric: tabular-nums; }
.scheda h3 { font-size: 1.25rem; }
.scheda .meta { font-size: .8125rem; color: var(--mute); margin-top: 2px; }
.scheda .nota { margin: 12px 0 14px; padding: 10px 12px; border-radius: 12px; background: var(--paper); color: var(--ti); font-size: .9375rem; font-weight: 500; }
.scheda .sq { margin-bottom: 12px; }
.scheda .x, .modal .x { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--mute); cursor: pointer; }
.scheda .x:hover, .modal .x:hover { background: var(--paper); color: var(--ink); }
.scheda .x .ic, .modal .x .ic { width: 18px; height: 18px; }
.scheda.muovi .sq { margin-bottom: 12px; }
.negozio .catalogo > * + * { margin-top: 10px; }
.ch { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ch h2 { font-size: 1.5rem; letter-spacing: -.02em; }
.seg { display: inline-flex; padding: 4px; border-radius: 99px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); }
.seg button { border: 0; background: none; padding: 7px 13px; border-radius: 99px; font: 600 .875rem var(--f-t); color: var(--mute); cursor: pointer; transition: background-color .2s, color .2s; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed=true] { background: var(--ink); color: var(--paper); }
/* il catalogo: tessere piatte dentro il foglio (niente carte dentro la carta) */
.shop { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px !important; }
.shop[data-f=pianta] .si:not([data-tipo=pianta]), .shop[data-f=animale] .si:not([data-tipo=animale]) { display: none; }
.si { display: flex; flex-direction: column; gap: 4px; padding: 6px 6px 12px; border: 0; border-radius: 18px; background: transparent; color: var(--ink); text-align: left; font: inherit;
  cursor: pointer; transition: background-color .2s, transform .25s var(--ease); }
.si:hover:not(:disabled) { background: var(--paper-2); }
.si:hover:not(:disabled) .art img { transform: translateY(-4px) scale(1.04); }
.si:active:not(:disabled) { transform: scale(.98); }
.si:disabled { cursor: not-allowed; }
.si .art { position: relative; aspect-ratio: 4 / 3; margin-bottom: 6px; border-radius: 14px; background: var(--tb); }
.si .art img { position: absolute; left: 0; top: 4%; width: 100%; height: 92%; object-fit: contain; transition: transform .35s var(--ease);
  filter: drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff) drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff); }
.si .num { position: absolute; z-index: 1; top: 6px; left: 6px; min-width: 28px; height: 24px; font-size: .75rem; border-radius: 7px; }
.si .own { position: absolute; z-index: 1; top: 6px; right: 6px; padding: 2px 8px; border-radius: 99px; background: var(--paper); color: var(--ink); font-size: .75rem; font-weight: 700; }
.si .sn { padding: 0 4px; font: 700 1rem/1.2 var(--f-d); letter-spacing: -.01em; }
.si .nota { padding: 0 4px; font-size: .8125rem; line-height: 1.4; color: var(--mute); flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.si .sp { display: flex; align-items: center; gap: 6px; padding: 8px 4px 0; margin-top: 4px; border-top: 1px dashed var(--line-2); font: 700 .9375rem var(--f-d); font-variant-numeric: tabular-nums; }
.si .sp .coin { width: 18px; height: 18px; }
.si .manca { margin-left: auto; font: 500 .75rem var(--f-t); color: var(--mute); white-space: nowrap; }
/* non ancora tuoi e fuori portata: in grigio; quelli che hai gia' restano a colori, solo il prezzo si spegne */
.si:disabled:not([data-own]) .art { background: var(--paper-2); }
.si:disabled:not([data-own]) .art img { filter: grayscale(1) opacity(.45); }
.si:disabled:not([data-own]) .num { background: var(--line-2); color: var(--mute); }
.si:disabled .sp { color: var(--mute); }

/* lega */
/* streak: il mese a calendario, i giorni di fila uniti in una catena albicocca */
.streak { max-width: 560px; }
.streak .lhead { flex-wrap: nowrap; gap: 18px; }
.streak .lhead > div { min-width: 0; }
.streak .lhead .flame { width: 60px; height: 72px; flex: none; }
.mh { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; }
.sett, .cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; }
.sett { font-size: .75rem; font-weight: 700; color: var(--mute); }
.stack > .sett + .cal { margin-top: 6px; }
.cal { list-style: none; margin: 0; padding: 0; row-gap: 6px; }
.cal li { position: relative; display: grid; place-items: center; }
.cal .d { position: relative; z-index: 1; display: grid; place-items: center; width: min(40px, 100%); aspect-ratio: 1; border-radius: 50%; font-weight: 600; font-variant-numeric: tabular-nums; }
.cal .poi .d { color: var(--mute); }
.cal .oggi .d { box-shadow: inset 0 0 0 2px var(--ink); }
.cal .on .d { background: var(--apri); color: #1C1F2E; font-weight: 700; }   /* inchiostro scuro anche nel tema scuro: l'albicocca resta chiara */
.cal .sx::before, .cal .dx::after { content: ""; position: absolute; inset-block: 0; width: 50%; background: var(--apri); }
.cal .sx::before { left: 0; } .cal .dx::after { right: 0; }
.lega { max-width: 900px; }
.lhead { display: flex; align-items: center; gap: 24px; margin-bottom: 28px; flex-wrap: wrap; }
.lhead > div { flex: 1; min-width: 260px; }
.lhead .badge { width: 76px; }
.lhead .small { margin-top: 6px; }
.roster { padding: 10px; }
.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rows li { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 14px; }
.rows li.up { background: var(--sage-bg); } .rows li.down { background: var(--apri-bg); }
.rows li.me { box-shadow: inset 0 0 0 2px var(--ink); font-weight: 700; }
.rows .rk { display: grid; place-items: center; width: 34px; height: 30px; border-radius: 8px; font: 700 1rem var(--f-d); font-variant-numeric: tabular-nums; color: var(--mute); }
/* oro, argento, bronzo scuri: testo bianco sopra 4.5:1 in entrambi i temi */
.rows .rk.p1 { background: #84600F; color: #fff; } .rows .rk.p2 { background: #5F6A80; color: #fff; } .rows .rk.p3 { background: #7E5434; color: #fff; }
.rows .av { width: 38px; height: 38px; border-radius: 12px; flex: none; display: grid; place-items: center; font: 700 1rem var(--f-d); color: #1C1F2E; background: hsl(var(--h) 55% 82%); }
.rows .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rows .nm em { font-style: normal; color: var(--mute); font-weight: 500; }
.rows .xpv { font: 700 1.0625rem var(--f-d); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; min-width: 5ch; }
.rows .xpv small { font: 500 .8125rem var(--f-t); color: var(--mute); }
.rows li.zone { display: flex; gap: 8px; padding: 14px 14px 6px; font-size: .8125rem; font-weight: 700; letter-spacing: .02em; }
.rows li.zone .ic { width: 16px; height: 16px; }
.zone.up { color: var(--sage-ink); } .zone.down { color: var(--apri-ink); }
.empty { text-align: center; }
.empty .owl { width: 130px; margin-inline: auto; }

/* studio */
.sgrid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 28px; align-items: start; }
.sleft { display: grid; gap: 16px; }
.sright { position: sticky; top: 32px; display: grid; gap: 18px; }
.come h1 { font-size: 2.25rem; }
.cam { position: relative; padding: 0; overflow: hidden; }
.cam video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #121318; transform: scaleX(-1); }
.cam .live { position: absolute; left: 14px; bottom: 14px; padding: 4px 12px; border-radius: 99px; background: rgba(15, 17, 26, .7); color: #fff; font-size: .8125rem; font-weight: 600; }
.stage { position: relative; display: grid; justify-items: center; gap: 4px; padding: 22px 22px 18px; border-radius: 22px; background: var(--paper); box-shadow: var(--shadow); transition: background-color .4s; }
.stage .owl { width: 150px; }
.stage.studio { background: var(--sage-bg); } .stage.non { background: var(--apri-bg); }
.bubble { position: relative; width: 100%; padding: 12px 16px; border-radius: 16px; background: var(--paper-2); font-weight: 600; text-align: center; box-shadow: inset 0 0 0 1px var(--line); }
.stage.studio .bubble { color: var(--sage-ink); background: var(--paper); } .stage.non .bubble { color: var(--apri-ink); background: var(--paper); }
.warm { display: grid; gap: 8px; font-weight: 600; }
/* tempi della sessione: un pannello, in camera in testa, le quattro voci in righe, focus in fondo */
.tiles { padding: 4px 22px; }
.tcam, .trows li, .tfoc { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.tcam { padding: 18px 0 16px; }
.trows { list-style: none; margin: 0; padding: 0; }
.trows li, .tfoc { border-top: 1px dashed var(--line-2); }
.tiles .ic { width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: var(--paper-2); color: var(--mute); }
.tiles .l { font-weight: 600; color: var(--mute); }
.tiles .num { margin-left: auto; font-size: 1.375rem; font-variant-numeric: tabular-nums; }
.tcam .num { font-size: 2.5rem; letter-spacing: -.03em; }
.tcam .l { color: var(--ink); }
.trows .stu .ic { background: var(--sage-bg); color: var(--sage-ink); } .trows .stu .num { color: var(--sage-ink); }
.trows .non .ic { background: var(--apri-bg); color: var(--apri-ink); } .trows .non .num { color: var(--apri-ink); }
.trows .unc .ic { background: var(--plum-bg); color: var(--plum-ink); } .trows .pen .ic { background: var(--ocra-bg); color: var(--ocra-ink); }
.tfoc .ic { background: var(--sky-bg); color: var(--sky-ink); }
/* pausa del pomodoro: i tempi si fermano (pillola cielo come l'anello in pausa, numeri attenuati) */
.tferme { display: none; width: fit-content; margin: 18px 0 0; padding: 5px 12px; border-radius: 99px; background: var(--sky-bg); color: var(--sky-ink); font-size: .875rem; font-weight: 600; }
.tiles.ferme .tferme { display: block; }
.tiles .num { transition: opacity .3s; } .tiles.ferme .num { opacity: .45; }
.pop { position: absolute; right: 18px; top: 14px; font: 800 1.375rem var(--f-d); color: var(--coin-d); pointer-events: none; animation: pop 1.4s var(--ease) forwards; }
/* pomodoro: il pomodoro disegnato dentro l'anello (rosso in focus, cielo in pausa), tempo e comandi a destra, durate sotto */
.pomo { --pc: var(--tom); --pi: var(--tom-ink); display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 18px 20px; align-items: center; }
.pomo[data-fase=pausa] { --pc: var(--sky); --pi: var(--sky-ink); }
.pring .ring { display: block; width: 100%; overflow: visible; }
.pomo .ring .rp { stroke: var(--pc); transition: stroke-dashoffset 1s linear, stroke .4s; }
.pctl { display: grid; justify-items: start; }
.pctl h2 { display: flex; align-items: center; gap: 10px; font-size: 1.125rem; }
.ptime { margin: 4px 0 0; font-size: 2.5rem; letter-spacing: -.03em; }
#p-f { margin: 2px 0 12px; font-weight: 600; color: var(--pi); transition: color .4s; }
/* il personaggio: stessi movimenti del gufo (blink, bob, breathe, hop, zz) */
.t-body { fill: var(--tom); } .t-leaf { fill: var(--leaf); }
.pring .t-shadow { fill: rgba(0, 0, 0, .12); }
.pring .t-lobe { fill: none; stroke: var(--tom-d); stroke-width: 2.4; stroke-linecap: round; opacity: .3; }
.pring .t-hi { fill: #fff; opacity: .45; }
.pring .t-stem { fill: none; stroke: var(--leaf-d); stroke-width: 3.2; stroke-linecap: round; }
.pring .t-leaf { stroke: var(--leaf); stroke-width: 2.5; stroke-linejoin: round; }
.pring .t-eyes { fill: #1C1F2E; transform-origin: 60px 68px; animation: blink 5s infinite; }
.pring .t-shine { fill: #fff; }
.pring .t-line { fill: none; stroke: #1C1F2E; stroke-width: 2.6; stroke-linecap: round; }
.pring .t-mouth { fill: #1C1F2E; }
.pring .t-cheek { fill: #FFB4A2; opacity: .75; }
.pring .t-z { font: 700 13px var(--f-d); fill: var(--sky-ink); }
.pring [class*="for-"] { display: none; }
.pring[data-m=idle] .for-idle, .pring[data-m=focus] .for-focus, .pring[data-m=pausa] .for-pausa, .pring[data-m=attesa] .for-attesa { display: inline; }
.pring .t-all { transform-origin: 60px 94px; }
.pring[data-m=idle] .t-all { animation: bob 3.2s ease-in-out infinite; }
.pring[data-m=focus] .t-all { animation: breathe 2.4s ease-in-out infinite; }
.pring[data-m=pausa] .t-all { animation: breathe 4s ease-in-out infinite; }
.pring[data-m=pausa] .t-z { animation: zz 2.4s ease-in-out infinite; }
.pring[data-m=attesa] .t-all { animation: hop .8s ease-in-out infinite; }
.pring.salta .t-all { animation: salta .8s var(--ease); }
@keyframes salta { 30% { transform: translateY(-14px) scale(.95, 1.06); } 60% { transform: translateY(0) scale(1.07, .93); } }
/* un pomodorino per ogni focus finito, accanto al titolo */
.tomi { display: inline-flex; align-items: center; gap: 2px; }
.tomi svg { width: 16px; height: 16px; }
.tomi svg:last-of-type { animation: spunta .6s cubic-bezier(.3, 1.6, .5, 1); }
.tomi b { margin-left: 2px; font: 700 .8125rem var(--f-d); color: var(--tom-ink); }
@keyframes spunta { from { transform: scale(0) rotate(-40deg); } }
/* durate: pillole con − e +, sotto un filetto; poi la partenza automatica */
.pset { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: end; gap: 14px 20px; padding-top: 16px; border-top: 1px dashed var(--line-2); }
.step { display: grid; gap: 6px; font-size: .875rem; font-weight: 600; color: var(--mute); }
.step .sp { display: inline-flex; align-items: center; gap: 2px; padding: 4px; border-radius: 99px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); }
.step button { width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--paper); color: var(--ink); font: 700 1.125rem/1 var(--f-d); cursor: pointer;
  box-shadow: 0 1px 2px rgba(28, 31, 46, .14); transition: transform .15s var(--ease); }
.step button:hover:not(:disabled) { transform: scale(1.08); }
.step input { width: 3ch; padding: 0; border: 0; background: none; color: var(--ink); text-align: center; font: 700 1.125rem var(--f-d); font-variant-numeric: tabular-nums;
  -moz-appearance: textfield; appearance: textfield; }
.step input::-webkit-inner-spin-button, .step input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.step .u { margin-right: 6px; font-size: .8125rem; color: var(--mute); }
.step :disabled { opacity: .45; cursor: not-allowed; }
.pset .switch { flex-basis: 100%; font-size: .9375rem; }
@keyframes pop { 0% { transform: translateY(16px) scale(.7); opacity: 0; } 20% { transform: translateY(0) scale(1.1); opacity: 1; } 100% { transform: translateY(-46px); opacity: 0; } }

/* profilo */
.pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.sum { display: grid; grid-template-columns: repeat(3, 1fr); }
.sum div { padding: 2px 16px; border-left: 1px dashed var(--line-2); }
.sum div:first-child { padding-left: 0; border-left: 0; }
.sum b { display: block; font: 700 1.25rem var(--f-d); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.sum span { font-size: .8125rem; color: var(--mute); font-weight: 600; }
.chart { width: 100%; height: auto; display: block; }
.chart text { fill: var(--mute); font: 500 10px var(--f-t); }
.chart .gl { stroke: var(--line); stroke-width: 1; }
.chart .bc { fill: var(--plum-bg); } .chart .bs { fill: var(--sage); }
.legend { display: flex; gap: 16px; font-size: .8125rem; font-weight: 600; color: var(--mute); flex-wrap: wrap; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 6px; vertical-align: -1px; }
.legend .lc { background: var(--plum-bg); box-shadow: inset 0 0 0 1px var(--plum); } .legend .ls { background: var(--sage); }
.danger h2 { font-size: 1.25rem; }

/* footer legale (informativa e cookie): in fondo al guscio, sempre in prima schermata sulle pagine a tutto schermo */
.legal { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: var(--legal); padding: 0 clamp(20px, 3.5vw, 56px); position: relative; z-index: 1; }
.legal a { padding: 3px 12px; border-radius: 99px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); color: var(--mute); font-size: .8125rem; font-weight: 600; text-decoration: none; }
.legal a:hover { color: var(--ink); }
body.fuori .legal, body.doc .legal { justify-content: center; }

/* privacy.html: pagina di testo */
.doc-main { max-width: 760px; margin: 0 auto; padding: 40px 20px 24px; }
.doc-main h1 { margin: 24px 0 8px; }
.doc-main h2 { font-size: 1.375rem; margin: 40px 0 12px; }
.doc-main h3 { margin: 24px 0 8px; }
.doc-main p + p, .doc-main p + ul, .doc-main ul + p, .doc-main table + p { margin-top: 12px; }
.doc-main ul { padding-left: 22px; margin: 0; } .doc-main li + li { margin-top: 6px; }
.doc-main table { display: block; overflow-x: auto; border-collapse: collapse; margin: 12px 0; font-size: .9375rem; }
.doc-main th, .doc-main td { min-width: 9rem; padding: 10px 12px; vertical-align: top; text-align: left; border-bottom: 1px solid var(--line); }
.doc-main th { font-weight: 700; background: var(--paper-2); }
code { font-size: .875em; padding: 1px 5px; border-radius: 6px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); }
mark.todo { background: var(--ocra-bg); color: var(--ocra-ink); padding: 0 4px; border-radius: 4px; }   /* da compilare prima del deploy: cerca class="todo" */
body.doc .legal { grid-column: auto; padding-bottom: 0; }

/* finestre */
dialog.modal { border: 0; border-radius: 26px; background: var(--paper); color: var(--ink); width: min(440px, calc(100vw - 32px)); padding: 28px 24px 24px; text-align: center;
  overflow: hidden; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5); }
dialog.modal::backdrop { background: rgba(21, 22, 28, .55); }
dialog.modal[open] { animation: rise .4s var(--ease); }
@keyframes rise { from { transform: translateY(24px) scale(.96); opacity: 0; } }
dialog.modal .owl { width: 110px; margin-inline: auto; }
dialog.modal h2 { margin-bottom: 8px; }
dialog.modal .stack { text-align: left; margin-top: 18px; }
.bigxp { font-size: 3.25rem; font-weight: 800; color: var(--coin-d); letter-spacing: -.04em; margin-top: 4px; }
.modal .row { justify-content: center; margin-top: 22px; }
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.confetti i { position: absolute; top: -16px; left: var(--x); width: 8px; height: 14px; background: var(--c); border-radius: 2px; animation: fall var(--t) var(--d) ease-in forwards; }
@keyframes fall { to { transform: translateY(640px) rotate(calc(var(--r) + 600deg)); opacity: .9; } }

/* mascotte: l'Agente Gufo */
.owl { display: block; overflow: visible; }
.owl .o-shadow { fill: rgba(0, 0, 0, .12); }
.owl .o-feet { fill: var(--coin-d); }
.owl .o-body { fill: var(--owl); }
.owl .o-wing { fill: var(--owl-d); }
.owl .o-belly { fill: var(--belly); }
.owl .o-feather { fill: none; stroke: var(--owl-d); stroke-width: 3; stroke-linecap: round; opacity: .35; }
.owl .o-tuft { fill: var(--owl-d); }
.owl .o-disc { fill: var(--disc); }
.owl .o-eye { fill: #fff; stroke: var(--owl-d); stroke-width: 2; }
.owl .o-pupil { fill: #1C1F2E; } .owl .o-hi { fill: #fff; }
.owl .o-beak { fill: var(--coin); stroke: var(--coin-d); stroke-width: 2; stroke-linejoin: round; }
.owl .o-cheek { fill: var(--cheek); opacity: .35; }
.owl .o-lid, .owl .o-brow { fill: none; stroke: #1C1F2E; stroke-width: 5; stroke-linecap: round; }
.owl .o-brow { stroke: var(--owl-d); stroke-width: 6; }
.owl .o-cap { fill: var(--cap); } .owl .o-band { fill: var(--cap-d); }.owl .o-badge { fill: var(--coin); stroke: var(--coin-d); stroke-width: 2; } .owl .o-star { fill: var(--cap-d); }
.owl .o-whistle rect, .owl .o-whistle circle.w { fill: #D9DFEA; stroke: #8E99B0; stroke-width: 2; }
.owl .o-whistle circle.h { fill: #4B5368; }
.owl .o-wave { fill: none; stroke: var(--apri); stroke-width: 4; stroke-linecap: round; animation: wave .5s ease-out infinite; }
.owl .o-z, .owl .o-q { font: 700 26px var(--f-d); fill: var(--plum-ink); }
.owl .o-spark { fill: var(--coin); }
.owl [class*="for-"] { display: none; }
.owl.m-neutral .for-neutral, .owl.m-happy .for-happy, .owl.m-alarm .for-alarm, .owl.m-confused .for-confused, .owl.m-sleep .for-sleep { display: inline; }
.owl .o-eyes { transform-origin: 100px 106px; animation: blink 5s infinite; }
.owl.m-neutral .o-pupils { animation: glance 6s ease-in-out infinite; }
.owl.m-alarm .o-pupil, .owl.m-alarm .o-hi { transform: scale(.6); transform-box: fill-box; transform-origin: center; }
.owl.m-confused .o-pl { transform: translate(4px, -5px); } .owl.m-confused .o-pr { transform: translate(-5px, 4px); }
.owl.m-neutral .o-all { animation: bob 3.2s ease-in-out infinite; }
.owl.m-happy .o-all { animation: hop .8s ease-in-out infinite; }
.owl.m-alarm .o-all { animation: shake .4s linear infinite; }
.owl.m-confused .o-all { transform-origin: 100px 200px; animation: tilt 2.6s ease-in-out infinite; }
.owl.m-sleep .o-all { transform-origin: 100px 205px; animation: breathe 4s ease-in-out infinite; }
.owl.m-sleep .o-z { animation: zz 2.4s ease-in-out infinite; }
.owl.m-happy .o-wl { transform-origin: 54px 124px; animation: flapl .4s ease-in-out infinite alternate; }
.owl.m-happy .o-wr { transform-origin: 146px 124px; animation: flapr .4s ease-in-out infinite alternate; }
.owl.m-happy .o-spark { animation: twinkle 1s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.08); } }
@keyframes glance { 0%, 15% { transform: translateX(0); } 30%, 45% { transform: translateX(-4px); } 60%, 80% { transform: translateX(4px); } 100% { transform: translateX(0); } }
@keyframes bob { 50% { transform: translateY(-4px); } }
@keyframes hop { 50% { transform: translateY(-10px); } }
@keyframes shake { 25% { transform: translateX(-3px) rotate(-1.5deg); } 75% { transform: translateX(3px) rotate(1.5deg); } }
@keyframes tilt { 50% { transform: rotate(7deg); } }
@keyframes breathe { 50% { transform: scale(1.02, 1.03); } }
@keyframes zz { 0%, 100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(-8px); opacity: 1; } }
@keyframes flapl { to { transform: rotate(18deg); } } @keyframes flapr { to { transform: rotate(-18deg); } }
@keyframes twinkle { to { transform: scale(1.4) rotate(20deg); opacity: .6; } }
@keyframes wave { from { opacity: 1; transform: translateX(-3px); } to { opacity: 0; transform: translateX(6px); } }

/* schermi medi e stretti */
@media (max-width: 1180px) {
  .prato { grid-template-columns: minmax(0, 1fr) 340px; column-gap: 24px; }
}
@media (max-width: 960px) {
  .shell { display: block; }
  .side { position: sticky; z-index: 20; height: auto; flex-direction: row; align-items: center; padding: 12px 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand { padding: 0; font-size: 1.25rem; } .brand svg { width: 30px; height: 30px; }
  .side-note { display: none; }
  #tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: var(--paper); border-top: 1px solid var(--line); }
  #tabs[hidden] { display: none !important; }
  #tabs a { flex-direction: column; gap: 2px; padding: 6px 4px; font-size: .8125rem; }
  main { padding: 24px 16px 24px; }
  .legal { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }   /* sotto le schede fisse */
  .auth, .sgrid, .pgrid { grid-template-columns: minmax(0, 1fr); }
  .auth { min-height: 0; gap: 28px; }
  .auth .intro .owl { width: 104px; }
  .sright { position: static; order: -1; }
  .stage { grid-template-columns: 96px 1fr; justify-items: start; align-items: center; text-align: left; }
  .stage .owl { width: 96px; }
  .bubble { text-align: left; }
  /* telefono: il prato in una fascia sotto il saluto, il pannello scorre sopra */
  .scena { inset: 0; --barra: 62px; }
  .su-prato main { padding-bottom: 24px; }
  .prato { display: block; height: auto; min-height: 0; }
  .prato > .hello { padding-bottom: 16px; }
  .prato > .finestra { height: min(46dvh, 80vw); min-height: 240px; }   /* il prato inquadrato e' largo ~1,25 volte la sua altezza */
  .scena::before, .scena[data-fase]::before { top: calc(var(--barra) + 12px); right: 16px; left: auto; width: 30px; min-width: 0; }
  .prato > .pannello, .prato > .pannello.col { max-height: none; overflow: hidden; }
  .negozio .ph { position: static; }
  /* scheda di chi tocchi: barra fissa sopra le schede in basso, cosi' le azioni sono a portata e il prato resta in vista */
  .negozio > .scheda { position: fixed; z-index: 21; left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); padding: 14px 16px;
    border: 0; border-radius: 18px; box-shadow: var(--shadow-up); }
  .negozio > .scheda .nota, .negozio > .scheda .meta { display: none; }
  .negozio > .scheda .row { margin-top: 12px; }
  .negozio > .scheda .x { top: 10px; right: 10px; }
}
@media (max-width: 560px) {
  .hello { margin-bottom: 24px; }
  .hello .btn, .entra .btn { width: 100%; }
  .entra { flex-direction: column; width: 100%; max-width: 360px; border-radius: 30px; }
  .fatti { gap: 6px; bottom: 16px; } .ingresso .chip { padding: 4px 10px 4px 8px; font-size: .75rem; }
  .prato.ingresso > .finestra { height: 56%; bottom: 80px; }   /* il prato tra i bottoni e le chip */
  .si .nota { -webkit-line-clamp: 2; }
  .ch .seg { width: 100%; } .seg button { flex: 1; padding: 8px 10px; }
  .pomo { grid-template-columns: 112px minmax(0, 1fr); gap: 16px; } .ptime { font-size: 2rem; }
  .card { padding: 18px; }
  .rows li { gap: 10px; padding: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .confetti { display: none !important; }
}