/* Il foglio di stile di tutto il sito (docs/sito-grafica.md). Una pagina non si inventa un pezzo: se manca, si aggiunge qui.
   I pezzi vengono dal gioco (mondo.js: WIN_CSS, cornicePrisma, RARITA_COL, ELEM_COL), copiati e non imitati. */

:root {
  --fondo: #03090c; --petrolio: #0a2228; --acqua: #9feee6; --acqua-scura: #3f8f8a;
  --testo: #e9e4d4; --tenue: #a9b8b4; --oro: #e9d29a;
  --alto: env(safe-area-inset-top, 0px); --basso: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fondo); color: var(--testo); }
/* lo spazio della barra di scorrimento c'e' sempre: quando l'intro se ne va e la barra compare, la pagina non si
   stringe (la taverna si ridimensionava di lato). Durante l'intro la striscia e' nera come l'intro */
html { scrollbar-gutter: stable; }
body { font: 15px/1.5 'Alegreya Sans', system-ui, sans-serif; }

/* ---- la barra del sito */
.testata { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; gap: 24px;
  padding: calc(14px + var(--alto)) max(20px, env(safe-area-inset-right, 0px)) 14px max(20px, env(safe-area-inset-left, 0px));
  background: linear-gradient(rgba(3,9,12,.85), rgba(3,9,12,0)); }
.firma { display: flex; align-items: center; gap: 10px; color: var(--testo); text-decoration: none;
  font: 600 18px 'Cinzel', Georgia, serif; letter-spacing: .32em; }
.firma svg { width: 22px; height: 30px; }
.menu { display: flex; gap: 22px; margin-left: auto; }
.menu a { color: var(--tenue); text-decoration: none; font: 500 13px 'Cinzel', Georgia, serif; letter-spacing: .14em; text-transform: uppercase; }
.menu a:hover, .menu a:focus-visible { color: var(--acqua); }
/* in alto a destra: la lingua, i suoni, Discord */
.angolo { display: flex; align-items: center; gap: 14px; }
.lingua { display: flex; align-items: center; gap: 2px; color: var(--tenue); font: 500 13px 'Cinzel', Georgia, serif; letter-spacing: .1em; }
.lingua button { min-width: 32px; min-height: 32px; padding: 0 4px; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; }
.lingua button[aria-pressed="true"] { color: var(--testo); font-weight: 700; }
.lingua button:hover, .lingua button:focus-visible { color: var(--acqua); }
.icona { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; background: none; color: var(--tenue); cursor: pointer; }
.icona svg { width: 20px; height: 20px; fill: currentColor; }
.icona:hover, .icona:focus-visible { color: var(--acqua); }
.icona .no { display: none; }
.icona[aria-pressed="false"] .si { display: none; }
.icona[aria-pressed="false"] .no { display: inline; }
@media (max-width: 760px) {
  /* sul telefono il menu scende in una riga sua sotto il marchio, in home come nelle altre pagine: se non ci sta, scorre */
  .testata { flex-wrap: wrap; gap: 4px 12px; }
  .menu { order: 5; flex-basis: 100%; margin: 0; gap: 14px; justify-content: space-between; overflow-x: auto; scrollbar-width: none; }
  .menu::-webkit-scrollbar { display: none; }
  .menu a { flex: none; display: grid; align-items: center; min-height: 40px; font-size: 12px; letter-spacing: .09em; }
  .angolo { margin-left: auto; gap: 8px; }
}

/* ---- i tasti: angoli tagliati e filo color acqua, come la cornice Prisma del gioco */
.tasto { --taglio: 10px; position: relative; isolation: isolate; display: inline-grid; place-items: center; min-width: 230px; min-height: 54px;
  padding: 0 28px; color: var(--testo); text-decoration: none; font: 600 15px 'Cinzel', Georgia, serif; letter-spacing: .16em; text-transform: uppercase;
  clip-path: polygon(var(--taglio) 0, calc(100% - var(--taglio)) 0, 100% var(--taglio), 100% calc(100% - var(--taglio)), calc(100% - var(--taglio)) 100%, var(--taglio) 100%, 0 calc(100% - var(--taglio)), 0 var(--taglio));
  background: linear-gradient(#9feee6, #3f8f8a 60%, #1f5a58); transition: transform .12s; -webkit-tap-highlight-color: transparent; }
/* la lastra: il filo e' chiaro in alto e scuro in basso, e sotto e' piu' spesso, cosi' il tasto ha un suo spessore senza ombre
   ne' aloni. Sopra passa un riflesso piatto quando ci si va sopra; premuto, il tasto scende di un punto */
.tasto::before { content: ""; position: absolute; inset: 2px 2px 4px; z-index: -2; clip-path: inherit;
  background: linear-gradient(#17474c, #0d2c32 55%, #071a1f); }
.tasto::after { content: ""; position: absolute; inset: 2px 2px 4px; z-index: -1; clip-path: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.22) 50%, transparent 58%) 130% 0 / 260% 100% no-repeat; transition: background-position .55s ease; }
.tasto.primo { background: linear-gradient(#ffffff, #6fc9c1 55%, #2f7f7a); color: #04161a; font-weight: 700; }
.tasto.primo::before { background: linear-gradient(#e6fbf8, #a9f0e9 45%, #7ed8d0); }
.tasto.primo::after { background-image: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.7) 50%, transparent 58%); }
.tasto:hover::after, .tasto:focus-visible::after { background-position: -30% 0; }
.tasto:hover, .tasto:focus-visible { color: #fff; }
.tasto.primo:hover, .tasto.primo:focus-visible { color: #04161a; }
.tasto:active { transform: translateY(1px); }
.tasto:active::before, .tasto:active::after { inset: 2px 2px 3px; }
.tasto:focus-visible { outline: none; }
/* i due tasti grandi della home: la scritta fra due rombi col loro filo, come il cristallo del marchio */
.tasto.grande { --taglio: 13px; min-width: 264px; min-height: 60px; padding: 0 22px 2px; font-size: 16px; letter-spacing: .18em; }
.tasto.grande span { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.tasto.grande span::before, .tasto.grande span::after { content: ""; flex: none; width: 26px; height: 7px; opacity: .8; transition: width .25s ease, opacity .25s;
  background: currentColor;
  clip-path: polygon(0 3px, calc(100% - 11px) 3px, calc(100% - 11px) 3.5px, calc(100% - 7px) 3.5px, calc(100% - 3.5px) 0, 100% 3.5px, calc(100% - 3.5px) 100%, calc(100% - 7px) 3.5px, calc(100% - 11px) 3.5px, calc(100% - 11px) 4px, 0 4px); }
.tasto.grande span::after { transform: scaleX(-1); }
.tasto.grande:hover span::before, .tasto.grande:hover span::after, .tasto.grande:focus-visible span::before, .tasto.grande:focus-visible span::after { width: 36px; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .tasto, .tasto::after, .tasto.grande span::before, .tasto.grande span::after { transition: none; } }

/* il cursore del gioco: la punta d'osso di mondo.js (CURSORI.base), anche sui pulsanti come nell'interfaccia del gioco */
html, html * { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22a%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23f2ece0%22%2F%3E%3Cstop%20offset%3D%22.55%22%20stop-color%3D%22%23b8b2a4%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%236a6458%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M3%202L4.2%2022.5L9.4%2017.2L19.5%2016.2Z%22%20fill%3D%22%2304090c%22%20stroke%3D%22%2304090c%22%20stroke-width%3D%223%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M3%202L4.2%2022.5L9.4%2017.2L19.5%2016.2Z%22%20fill%3D%22url(%23a)%22%2F%3E%3Cpath%20d%3D%22M4.3%205.2L5.2%2018.6%22%20stroke%3D%22%239feee6%22%20stroke-width%3D%221.3%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M5%204.4L16.2%2015.4%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%22.8%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.55%22%2F%3E%3C%2Fsvg%3E") 3 2, auto !important; }

/* ================= le pagine da consultare (wiki e le altre): fitte e sobrie, coi pezzi del gioco ================= */
:root {
  --uif: 'Cinzel', Georgia, serif; --txt: 'Alegreya Sans', system-ui, sans-serif; --num: 'Fira Sans Condensed', 'Alegreya Sans', sans-serif;
  --filo: rgba(233,228,212,.2); --filo-acqua: rgba(159,238,230,.18);
  /* rarita' (RARITA_COL) */
  --r-comune: #e9e4d4; --r-non_comune: #8fe0a0; --r-raro: #8fc0ff; --r-epico: #c9a2ff; --r-leggendario: #ffb85a;
  /* elementi (ELEM_COL) */
  --el-neutro: #d8d1bd; --el-fuoco: #ff8a4c; --el-acqua: #62b6ff; --el-terra: #d6a85a; --el-tuono: #ffd84a;
  --el-veleno: #9fe060; --el-ombra: #ff5a6e; --el-sacro: #fff0a8; --el-spirito: #c8b0ff; --el-nonmorto: #b9a6c9;
  /* le barre del gioco (COL) */
  --hp: #d9584f; --sp: #4fa3d9; --exp: #c7a557; --classe: #9a86c8;
}
/* la barra di scorrimento del gioco */
:where(html:has(.consulta), .consulta *)::-webkit-scrollbar { width: 10px; height: 10px; }
:where(html:has(.consulta), .consulta *)::-webkit-scrollbar-button, :where(html:has(.consulta), .consulta *)::-webkit-scrollbar-corner { display: none; background: transparent; }
:where(html:has(.consulta), .consulta *)::-webkit-scrollbar-track { background: linear-gradient(90deg, transparent 4px, rgba(233,228,212,.18) 4px, rgba(233,228,212,.18) 6px, transparent 6px); }
:where(html:has(.consulta), .consulta *)::-webkit-scrollbar-track:horizontal { background: linear-gradient(0deg, transparent 4px, rgba(233,228,212,.18) 4px, rgba(233,228,212,.18) 6px, transparent 6px); }
:where(html:has(.consulta), .consulta *)::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #4a5658, #cfc9b6 50%, #4a5658); border: 1px solid #04090c; box-shadow: inset 0 0 0 1px rgba(159,238,230,.35); min-height: 28px; }
:where(html:has(.consulta), .consulta *)::-webkit-scrollbar-thumb:horizontal { background: linear-gradient(0deg, #4a5658, #cfc9b6 50%, #4a5658); }
@supports not selector(::-webkit-scrollbar) { :where(html:has(.consulta), .consulta *) { scrollbar-color: #cfc9b6 transparent; scrollbar-width: thin; } }

/* la barra piena delle pagine interne: bassa, ferma in alto; sulla home resta trasparente */
.testata.piena { position: sticky; gap: 20px; min-height: 46px; padding-top: calc(6px + var(--alto)); padding-bottom: 6px;
  background: var(--petrolio); border-bottom: 1px solid var(--filo-acqua); }
.testata.piena .firma { font-size: 15px; letter-spacing: .28em; }
.testata.piena .firma svg { width: 17px; height: 24px; }
.testata.piena .menu a[aria-current] { color: var(--acqua); }
.lingua a { display: grid; place-items: center; min-width: 32px; min-height: 32px; padding: 0 4px; color: inherit; text-decoration: none; }
.lingua a[aria-current] { color: var(--testo); font-weight: 700; }
.lingua a:hover, .lingua a:focus-visible { color: var(--acqua); }
.tasto.piccolo::before, .tasto.piccolo::after { inset: 2px; }
.tasto.piccolo { --taglio: 7px; min-width: 0; min-height: 32px; padding: 0 16px; font-size: 12px; letter-spacing: .14em; }

/* la pagina, sul modello delle banche dati dei giochi: la ricerca veloce in alto, le scatole col titolo a sinistra, il pannello al centro */
.pagina { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 14px 18px; align-items: start; max-width: 1360px; margin: 0 auto;
  padding-block: 16px 64px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.pagina > main { display: grid; gap: 14px; min-width: 0; }
.svelta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 6px 12px; border: 1px solid var(--filo-acqua);
  background: linear-gradient(90deg, rgba(23,71,76,.55), rgba(10,34,40,.5)); }
.svelta > b { color: var(--tenue); font: 600 12px var(--uif); letter-spacing: .12em; text-transform: uppercase; }
.svelta form { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; }
/* i suggerimenti sotto il campo: il nome, e accanto la riga che l'ha fatto trovare */
.suggerimenti { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0; min-width: 320px; max-height: 70vh; overflow-y: auto; background: #071a1f; border: 1px solid var(--filo-acqua); }
.suggerimenti a { display: grid; gap: 1px; padding: 7px 11px; border-bottom: 1px solid var(--filo); color: var(--testo); text-decoration: none; }
.suggerimenti a b { font: 600 14.5px var(--num); }
.suggerimenti a span { color: var(--tenue); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggerimenti a:hover, .suggerimenti a.qui { background: rgba(159,238,230,.14); }
.suggerimenti a.tutti b { color: var(--acqua); font: 600 12px var(--uif); letter-spacing: .1em; text-transform: uppercase; }
.suggerimenti p { margin: 0; padding: 9px 11px; color: var(--tenue); font-size: 13.5px; }
mark { color: inherit; background: rgba(233,210,154,.2); box-shadow: 0 1px 0 var(--oro); }
.ordina b .nota { margin-left: 6px; font: 500 14px var(--num); }
.anche { margin: 0; font-size: 14px; }
.filtri-tipo { display: flex; flex-wrap: wrap; gap: 8px; }
.filtri-tipo a[aria-current] { border-color: var(--acqua); color: #fff !important; }
.modulo .campo.corto { width: 96px; }
.missione .testo { margin: 0; }
.missione .testo + .elenco { margin-top: 8px; }
.missione .elenco + .testo { margin-top: 14px; }
.svelta label { display: flex; align-items: center; gap: 8px; color: var(--tenue); font-size: 14px; }
.svelta .campo { width: 190px; min-height: 30px; }
.svelta .pulsante { min-height: 30px; }
.svelta .casa { margin-left: auto; color: var(--tenue); text-decoration: none; font: 600 12px var(--uif); letter-spacing: .12em; text-transform: uppercase; }
.svelta .casa:hover, .svelta .casa:focus-visible { color: var(--acqua); }
.colonna { position: sticky; top: calc(62px + var(--alto)); display: grid; gap: 14px; min-width: 0; align-content: start;
  max-height: calc(100vh - 74px - var(--alto)); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--filo) transparent; }
/* una sezione con le sotto-voci e' una tendina: il tasto accanto al nome la apre e la chiude */
.colonna .gruppo { display: grid; grid-template-columns: minmax(0, 1fr) auto; border-bottom: 1px solid var(--filo); }
.colonna .gruppo > a { border-bottom: 0; }
.colonna .gruppo .apri { width: 30px; padding: 0; border: 0; border-left: 1px solid var(--filo); color: var(--tenue); background: none; font: 600 15px/1 var(--uif); cursor: pointer; }
.colonna .gruppo .apri:hover, .colonna .gruppo .apri:focus-visible { color: var(--acqua); background: rgba(159,238,230,.07); }
.colonna .gruppo.aperto .apri { transform: rotate(90deg); border-left: 0; border-top: 1px solid var(--filo); }
.colonna .gruppo .sotto { display: none; grid-column: 1 / -1; border-top: 1px solid var(--filo); }
.colonna .gruppo.aperto .sotto { display: grid; }
.riquadro.scatola { --lato: 10px; padding: 16px 10px 10px; gap: 6px; }
.colonna nav { display: grid; }
.colonna nav a { display: flex; align-items: baseline; gap: 8px; min-height: 28px; padding: 4px 6px 3px 8px; color: var(--testo); text-decoration: none;
  font: 600 13px var(--uif); letter-spacing: .05em; border-bottom: 1px solid var(--filo); }
.colonna nav a:last-child { border-bottom: 0; }
.colonna nav a.sotto-voce { min-height: 26px; padding-left: 22px; color: var(--tenue); font: 14.5px var(--txt); letter-spacing: 0; }
.colonna nav a small { margin-left: auto; font: 500 12.5px var(--num); color: rgba(233,228,212,.5); }
.colonna nav a:hover, .colonna nav a:focus-visible { color: var(--acqua); background: rgba(159,238,230,.07); }
.colonna nav a[aria-current] { color: #fff; background: linear-gradient(90deg, rgba(159,238,230,.2), transparent); }
.colonna nav a.presto { color: rgba(233,228,212,.35); pointer-events: none; }
.colonna nav a.presto small { color: rgba(233,228,212,.25); }
.seconda nav a { font: 14.5px var(--txt); letter-spacing: 0; color: var(--tenue); align-items: center; }
.quadro { flex: none; display: inline-block; width: 9px; height: 9px; background: currentColor; }

.consulta :where(h1, h2, h3) { margin: 0; font-family: var(--uif); font-weight: 600; text-wrap: balance; }
.pagina h1 { font-size: 24px; letter-spacing: .05em; text-shadow: 0 0 16px rgba(159,238,230,.4); }
.pagina h2 { font-size: 16px; letter-spacing: .06em; }
.pagina h3 { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); }
.pagina p { margin: 0; max-width: 68ch; }
.nota { color: var(--tenue); font-size: 13px; }
.pagina main a { color: var(--acqua); text-decoration: none; }
.pagina main a:hover, .pagina main a:focus-visible { text-decoration: underline; }
.num { font-family: var(--num); font-variant-numeric: tabular-nums; }

/* la cornice Prisma: la finestra del gioco (.pw di WIN_CSS), ferma nella pagina */
.riquadro { position: relative; isolation: isolate; display: grid; gap: 12px; padding: 16px 20px 18px; min-width: 0; }
.riquadro::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(135deg, #9feee6, #3c8c88 40%, #d8fff9 60%, #3c8c88);
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px); }
.riquadro::after { content: ""; position: absolute; inset: 2px; --c: 10.83px; z-index: -1; pointer-events: none;
  background: linear-gradient(var(--filo-acqua), var(--filo-acqua)) left 12px top 4px / calc(100% - 24px) 1px no-repeat,
    linear-gradient(var(--filo-acqua), var(--filo-acqua)) left 12px bottom 4px / calc(100% - 24px) 1px no-repeat,
    linear-gradient(var(--filo-acqua), var(--filo-acqua)) left 4px top 12px / 1px calc(100% - 24px) no-repeat,
    linear-gradient(var(--filo-acqua), var(--filo-acqua)) right 4px top 12px / 1px calc(100% - 24px) no-repeat,
    radial-gradient(ellipse 70% 80% at 25% 20%, #17474c 0%, #0a2228 45%, #03090c 82%), #03090c;
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c)); }
.riquadro > header { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.riquadro > header .nota { font: 500 13px var(--num); }

/* la barra del titolo: la fascia in cima a un riquadro, tagliata agli angoli come lui */
.barra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: calc(2px - var(--su, 16px)) calc(2px - var(--lato, 20px)) 0; padding: 7px calc(var(--lato, 20px) - 2px + 4px) 6px;
  background: linear-gradient(90deg, rgba(159,238,230,.24), rgba(159,238,230,.05)); border-bottom: 1px solid rgba(159,238,230,.4);
  clip-path: polygon(10.83px 0, calc(100% - 10.83px) 0, 100% 10.83px, 100% 100%, 0 100%, 0 10.83px); }
.pagina .barra, .pagina .barra :where(h1, h2) { font-size: 16px; letter-spacing: .06em; color: #fff; text-shadow: 0 0 12px rgba(159,238,230,.45); }
.pagina h2.barra { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.pagina .barra a { color: inherit; }
.barra .nota { margin-left: auto; font: 500 13px var(--num); text-shadow: none; }

/* i dati di una scheda: etichetta tenue e valore, fitti, a colonne che si adattano */
.dati { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 16px; margin: 0; }
.dati > div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--filo); min-width: 0; }
.dati dt { color: var(--tenue); font-size: 13px; white-space: nowrap; }
.dati dd { margin: 0; font: 500 14px var(--num); font-variant-numeric: tabular-nums; text-align: right; }

/* tabelle fitte: niente cornice loro, righe col filo, una si' e una no appena piu' chiara */
.scorre { overflow-x: auto; min-width: 0; }
.tab { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tab th { padding: 6px 10px; text-align: left; white-space: nowrap; color: var(--tenue); font: 600 12px var(--uif); letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid rgba(159,238,230,.4); }
.tab td { padding: 6px 10px; border-bottom: 1px solid var(--filo); vertical-align: middle; }
.tab tbody tr:nth-child(even) { background: rgba(233,228,212,.035); }
.tab tbody tr { transition: background .12s; }
.tab tbody tr:hover { background: rgba(159,238,230,.1); }
.tab .n, .tab th.n { text-align: right; font-family: var(--num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tab td.n { font-size: 14px; }

/* campi, menu a tendina, caselle a rombo: scuri col filo chiaro, come la riga della chat */
.campo, .tendina { min-height: 34px; padding: 4px 10px; color: var(--testo); background: rgba(2,7,9,.55); border: 1px solid rgba(233,228,212,.35);
  border-radius: 0; font: 15px var(--txt); outline: 0; min-width: 0; }
.campo::placeholder { color: rgba(233,228,212,.4); }
.campo:focus, .tendina:focus { border-color: var(--acqua); box-shadow: 0 0 8px rgba(159,238,230,.25); }
.tendina { appearance: none; padding-right: 26px;
  background-image: linear-gradient(45deg, transparent 50%, var(--testo) 50%), linear-gradient(135deg, var(--testo) 50%, transparent 50%);
  background-position: right 13px top 14px, right 8px top 14px; background-size: 5px 5px; background-repeat: no-repeat; }
.tendina option { background: #06161a; color: var(--testo); }
.spunta { display: inline-flex; align-items: center; gap: 10px; min-height: 34px; color: var(--tenue); }
.spunta input { appearance: none; flex: none; width: 11px; height: 11px; margin: 0 3px; border: 1.5px solid currentColor; transform: rotate(45deg); background: none; }
.spunta input:checked { background: var(--acqua); border-color: var(--acqua); }
.spunta:has(input:checked) { color: var(--testo); }
.spunta:has(input:focus-visible) { color: var(--acqua); }
.filtri { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: end; }
.filtri label:not(.spunta) { display: grid; gap: 2px; color: var(--tenue); font-size: 13px; min-width: 0; }

/* il pulsante del gioco per le azioni nella pagina */
.pulsante { display: inline-grid; place-items: center; min-height: 34px; padding: 0 16px; color: var(--testo) !important; background: rgba(2,7,9,.55);
  border: 1px solid rgba(233,228,212,.45); font: 600 13px var(--uif); letter-spacing: .08em; text-decoration: none !important; transition: border-color .12s, background .12s; }
.pulsante:hover, .pulsante:focus-visible { border-color: var(--testo); background: rgba(159,238,230,.16); }

/* le linguette col rombo (.pw-tabs) */
.linguette { display: flex; gap: 20px; overflow-x: auto; scrollbar-width: none; }
.linguette::-webkit-scrollbar { display: none; }
.linguette a { position: relative; flex: none; display: grid; align-items: center; min-height: 36px; padding: 0 2px 9px; color: rgba(233,228,212,.62) !important;
  font: 600 14.5px var(--uif); letter-spacing: .04em; text-decoration: none !important; }
.linguette a:hover { color: var(--testo) !important; }
.linguette a[aria-current] { color: #fff !important; text-shadow: 0 0 12px rgba(159,238,230,.65); }
.linguette a[aria-current]::after { content: ""; position: absolute; left: 50%; bottom: 1px; width: 8px; height: 8px; transform: translateX(-50%) rotate(45deg); background: var(--testo); }

/* le schede piccole (.pw-card): icona, nome, nota */
.carta { display: flex; gap: 10px; align-items: center; min-width: 0; padding: 5px 8px 5px 5px; color: inherit !important; text-decoration: none !important;
  background: rgba(2,7,9,.38); border: 1px solid var(--filo); transition: border-color .12s; }
.carta:hover, .carta:focus-visible { border-color: rgba(233,228,212,.55); }
.carta svg, .carta img { flex: none; width: 36px; height: 36px; }
.carta span { min-width: 0; }
.carta b { display: block; font: 600 14px var(--uif); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carta small { font: italic 13px var(--txt); color: rgba(233,228,212,.62); }
.carte { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
/* un conto: quante schede ha una sezione */
.carta.conto { flex-direction: column; align-items: flex-start; gap: 0; padding: 10px 14px; }
.carta.conto strong { font: 600 26px var(--num); color: var(--oro); line-height: 1.1; }
.carta.conto b { font-size: 13px; letter-spacing: .08em; }

/* i colori che hanno un significato */
.r-comune { color: var(--r-comune) !important; } .r-non_comune { color: var(--r-non_comune) !important; } .r-raro { color: var(--r-raro) !important; }
.r-epico { color: var(--r-epico) !important; } .r-leggendario { color: var(--r-leggendario) !important; }
.el-neutro { color: var(--el-neutro) !important; } .el-fuoco { color: var(--el-fuoco) !important; } .el-acqua { color: var(--el-acqua) !important; }
.el-terra { color: var(--el-terra) !important; } .el-tuono { color: var(--el-tuono) !important; } .el-veleno { color: var(--el-veleno) !important; }
.el-ombra { color: var(--el-ombra) !important; } .el-sacro { color: var(--el-sacro) !important; } .el-spirito { color: var(--el-spirito) !important; }
.el-nonmorto { color: var(--el-nonmorto) !important; }
.c-hp { color: var(--hp); } .c-sp { color: var(--sp); } .c-exp { color: var(--exp); } .c-classe { color: var(--classe); } .c-oro { color: var(--oro); }
.forte { color: #8fe0a0; } .debole { color: #e9b0a0; } .nullo { color: rgba(233,228,212,.4); } .cura { color: #8ec8ff; }
/* la tabella degli elementi: chi attacca nelle righe, chi difende nelle colonne */
.matrice th, .matrice td { padding: 6px 8px; text-align: center; }
.matrice tbody th { text-align: left; background: rgba(159,238,230,.07); border-bottom: 1px solid var(--filo); }
.matrice td.forte { background: rgba(143,224,160,.1); } .matrice td.debole { background: rgba(233,176,160,.07); } .matrice td.cura { background: rgba(142,200,255,.1); }
.matrice thead th a, .matrice tbody th a { text-decoration: none; }
.legenda > .forte, .legenda > .debole, .legenda > .nullo, .legenda > .cura { font: 600 11.5px var(--uif); letter-spacing: .08em; text-transform: uppercase; }
.legenda > .forte::before, .legenda > .debole::before, .legenda > .nullo::before, .legenda > .cura::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 6px; background: currentColor; }

/* ---- la wiki: la ricerca a tessere, i risultati, le schede a celle */
.etichetta { display: inline-block; padding: 1px 7px; vertical-align: middle; color: var(--oro); border: 1px solid currentColor; font: 600 11px var(--uif); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; text-shadow: none; }
.figura { display: block; flex: none; object-fit: contain; }
.figura.vuota { border: 1px dashed var(--filo); }
.con-icona { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.con-icona svg { flex: none; }
.con-icona span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* la ricerca avanzata: righe con l'etichetta a sinistra e le scelte a destra */
.avanzata > summary { display: flex; align-items: center; gap: 10px; min-height: 30px; cursor: pointer; list-style: none; color: var(--tenue); font: 600 12px var(--uif); letter-spacing: .12em; text-transform: uppercase; }
.avanzata > summary::-webkit-details-marker { display: none; }
.avanzata > summary::before { content: ""; flex: none; width: 7px; height: 7px; margin: 0 3px; border: 1.5px solid currentColor; transform: rotate(45deg); }
.avanzata[open] > summary::before { background: var(--acqua); border-color: var(--acqua); }
.avanzata > summary:hover, .avanzata > summary:focus-visible { color: var(--acqua); outline: 0; }
.avanzata > summary .nota { font: 500 13px var(--num); letter-spacing: 0; text-transform: none; color: var(--oro); }
.modulo { display: grid; margin-top: 6px; border: 1px solid var(--filo); border-bottom: 0; }
.riga { display: grid; grid-template-columns: 150px minmax(0, 1fr); border-bottom: 1px solid var(--filo); }
.riga > :first-child { display: flex; align-items: center; padding: 6px 10px; background: rgba(159,238,230,.07); border-right: 1px solid var(--filo); color: var(--tenue); font: 600 12px var(--uif); letter-spacing: .1em; text-transform: uppercase; }
.riga > :last-child { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 6px 10px; min-width: 0; }
.tessere { display: flex; flex-wrap: wrap; gap: 5px; }
.tessera { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 11px; color: var(--tenue); background: rgba(2,7,9,.5); border: 1px solid var(--filo);
  font-size: 14.5px; cursor: pointer; user-select: none; transition: border-color .12s, background .12s, color .12s; }
.tessera input { position: absolute; opacity: 0; pointer-events: none; }
.tessera:hover { color: var(--testo); border-color: rgba(233,228,212,.55); }
.tessera:has(input:checked) { color: #fff; border-color: var(--acqua); background: rgba(159,238,230,.18); box-shadow: inset 0 0 10px rgba(159,238,230,.22); }
.tessera:has(input:focus-visible) { outline: 1px solid var(--testo); outline-offset: 1px; }
.breve { display: inline-flex; align-items: center; gap: 8px; color: var(--tenue); font-size: 14px; }
.breve .campo { width: 64px; }
.riga .tendina { min-width: 220px; max-width: 100%; }
.riga #f-q { width: 320px; max-width: 100%; }
/* sopra i risultati: quanti, l'ordine, la spunta; e le pagine */
.risultati { padding-block: 10px; gap: 8px; }
.ordina { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.ordina b { margin-right: auto; color: var(--oro); font: 600 15px var(--num); }
.ordina label:not(.spunta) { display: inline-flex; align-items: center; gap: 8px; color: var(--tenue); font-size: 14px; }
.pagine { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.pagine :where(a, b, span) { display: grid; place-items: center; min-width: 32px; min-height: 30px; padding: 0 9px; font: 500 14px var(--num); }
.pagine a { color: var(--testo) !important; border: 1px solid var(--filo); background: rgba(2,7,9,.45); text-decoration: none !important; }
.pagine a:hover, .pagine a:focus-visible { border-color: var(--testo); background: rgba(159,238,230,.16); }
.pagine b { color: #03090c; background: var(--acqua); }
/* la scheda: la barra, quattro colonne di celle, le fasce larghe sotto */
.scheda { gap: 10px; }
.griglia { display: grid; grid-template-columns: minmax(0, 1.6fr) 172px minmax(0, 1fr) 178px; gap: 10px; align-items: start; }
.celle { display: grid; grid-template-columns: repeat(2, max-content minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--filo); border-left: 1px solid var(--filo); }
.celle.una { grid-template-columns: minmax(0, 1fr) max-content; }
.celle :where(dt, dd) { margin: 0; padding: 3px 8px 2px; min-width: 0; border-right: 1px solid var(--filo); border-bottom: 1px solid var(--filo); }
.celle dt { color: var(--tenue); background: rgba(159,238,230,.06); font-size: 13.5px; white-space: nowrap; }
.celle dd { font: 500 14px/1.55 var(--num); font-variant-numeric: tabular-nums; text-align: right; }
.celle dd a { color: inherit !important; text-decoration: underline; text-decoration-color: rgba(159,238,230,.5); text-underline-offset: 3px; }
.celle dd a:hover { text-decoration-color: currentColor; }
.centro { display: grid; gap: 10px; }
.griglia.png { grid-template-columns: 172px minmax(0, 1fr); }
.npc-dati { display: grid; min-width: 0; align-content: start; }
.npc-dati h3 { margin-top: 10px; }
.griglia.png .testo { margin: 0; padding: 6px 8px; border: 1px solid var(--filo); border-bottom: 0; }
.tab td.fig { width: 44px; padding: 0 4px; text-align: center; }
.tab td.fig .figura { display: block; width: 40px; height: 40px; }
.ritratto { display: grid; place-items: center; min-height: 164px; padding: 6px; border: 1px solid var(--filo); background: radial-gradient(closest-side, rgba(159,238,230,.14), rgba(2,7,9,.35)); }
.blocco, .fascia { display: grid; min-width: 0; }
.scheda h3 { padding: 4px 8px 3px; color: var(--testo); background: rgba(159,238,230,.13); border: 1px solid var(--filo); border-bottom: 0; font-size: 11.5px; letter-spacing: .12em; }
.blocco h3:not(:first-child) { margin-top: 10px; }
.scheda h3 .nota { float: right; font: 500 12px var(--num); letter-spacing: 0; text-transform: none; }
.elenco.skill .num { font-size: 13px; color: var(--tenue); text-align: right; }
.elenco.skill b { font-weight: 500; }
.elenco { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--filo); border-bottom: 0; }
.elenco li { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 3px 8px 2px; border-bottom: 1px solid var(--filo); }
.modi { padding: 4px 8px; border: 1px solid var(--filo); font-size: 14.5px; }
.drop { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--filo); border-left: 1px solid var(--filo); }
.drop li { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; padding: 3px 8px; min-width: 0; border-right: 1px solid var(--filo); border-bottom: 1px solid var(--filo); }
.drop li > .num { flex: none; font-size: 14px; }
.drop.legami li { justify-content: flex-start; }
.drop.legami li > span:first-child { color: var(--tenue); font-size: 13.5px; }
.drop.legami li > .num { margin-left: auto; }
.fascia .testo { max-width: none; padding: 6px 8px; border: 1px solid var(--filo); }
/* la scheda di un oggetto */
.scheda.oggetto > .fascia, .scheda .fascia.due { margin-top: 10px; }
.scheda .castoni { color: var(--tenue); font: 500 14px var(--num); }
.fascia.due { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
.fascia.due > div { display: grid; min-width: 0; }
.elenco.effetti li { justify-content: flex-start; font-size: 14.5px; }
.elenco.soglie { margin-top: 6px; }
.elenco.soglie li { justify-content: flex-start; gap: 12px; font-size: 14.5px; }
.elenco.soglie b { flex: none; min-width: 64px; color: var(--oro); font: 600 12px var(--uif); letter-spacing: .08em; text-transform: uppercase; }
.fascia .modi { max-width: none; }
.modulo .campo.largo { width: min(100%, 420px); }
.drop li.qui { background: rgba(159,238,230,.1); }
.drop li > .nota { flex: none; font-size: 12.5px; }
.celle-tab td .con-icona { margin-right: 10px; }
.tessere.grandi .tessera { min-height: 40px; padding: 0 14px; color: var(--testo); font-size: 15px; }
.tessera .quadro { width: 10px; height: 10px; }
.tessera svg { flex: none; }
.celle-tab { border: 1px solid var(--filo); }
.celle-tab th { background: rgba(159,238,230,.07); }
.num { font-family: var(--num); font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .consulta { font-size: 16px; }
  .pagina { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-block: 12px 48px; }
  /* le scatole a sinistra diventano linguette che vanno a capo, senza scorrere di lato; la seconda sta gia' nelle tessere */
  .colonna { position: static; max-height: none; overflow: visible; }
  .colonna .gruppo { display: contents; }
  .colonna .gruppo .apri, .colonna .gruppo .sotto { display: none !important; }
  .riquadro.scatola { padding: 0; }
  .scatola::before, .scatola::after, .scatola .barra, .scatola.seconda { display: none; }
  .colonna nav { display: flex; flex-wrap: wrap; gap: 4px; }
  .colonna nav a { flex: 1 1 auto; justify-content: center; min-height: 40px; align-items: center; padding: 0 12px; border: 1px solid var(--filo); }
  .colonna nav a:last-child { border-bottom: 1px solid var(--filo); }
  .colonna nav a[aria-current] { border-bottom-color: var(--acqua); background: linear-gradient(0deg, rgba(159,238,230,.14), transparent); }
  .colonna nav a.sotto-voce, .colonna nav a small { display: none; }
  .svelta .campo { width: auto; flex: 1; min-width: 0; }
  .svelta form { flex: 1 1 100%; }
  .suggerimenti { min-width: 0; }
  .suggerimenti a { min-height: 44px; align-content: center; }
  .svelta label { flex: 1; min-width: 0; }
  .svelta > b, .svelta .casa { display: none; }
  .riquadro { --su: 14px; --lato: 14px; padding: 14px 14px 16px; }
  .campo, .tendina, .pulsante, .spunta { min-height: 40px; }
  .pagina h1 { font-size: 22px; }
  /* i bersagli della barra piena: 40 px sotto il pollice */
  .testata.piena .lingua a, .testata.piena .icona, .testata.piena .tasto.piccolo { min-height: 40px; }
  .testata.piena .icona { display: grid; place-items: center; min-width: 40px; }
  .carte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* la ricerca: l'etichetta sopra le tessere; la scheda in colonna; i bersagli piu' alti */
  .riga { grid-template-columns: minmax(0, 1fr); }
  .riga > :first-child { border-right: 0; padding-block: 4px; }
  .riga > :first-child:empty { display: none; }
  .tessera { min-height: 38px; }
  .avanzata > summary { min-height: 40px; }
  .griglia, .griglia.png { grid-template-columns: minmax(0, 1fr); }
  .centro { order: -1; }
  .celle dt { white-space: normal; }
  .drop { grid-template-columns: minmax(0, 1fr); }
  .fascia.due { grid-template-columns: minmax(0, 1fr); }
  .elenco li, .drop li { min-height: 40px; align-items: center; }
  .pagine :where(a, b, span) { min-width: 40px; min-height: 40px; }
  .tab td a, .celle dd a, .modi a { display: inline-block; padding-block: 5px; }
}
/* La carta del mondo della wiki: un riquadro per mappa nel suo quadrante, il ponte fra due mappe unite da un varco.
   I colori del bordo dicono il tipo; la mappa aperta e' piena, le confinanti hanno il bordo acceso, la strada ha i numeri */
.carta-mondo .fondo { position: absolute; max-width: none; height: auto; }
.zona { position: absolute; display: block; box-sizing: border-box; border: 1px solid rgba(233,228,212,.28); color: var(--testo); scroll-margin: 90px; }
.zona img { display: block; width: 100%; height: 100%; }
.zona .nome { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 4px 3px; background: rgba(3,9,12,.72); font: 600 11px/1.2 var(--uif); letter-spacing: .02em; text-align: center; overflow-wrap: anywhere; }
.zona.alto .nome { bottom: auto; top: 0; }
.zona .num { display: block; color: var(--oro); font: 600 11px/1.2 var(--num); letter-spacing: 0; }
.zona.t-city { border-color: var(--oro); }
.zona:hover, .zona:focus-visible, .zona:target, .zona.via { border: 2px solid var(--acqua); z-index: 1; }
.zona:hover .nome, .zona:target .nome, .zona.via .nome { color: #fff; background: rgba(10,34,40,.92); }
/* la strada sulla carta: le mappe attraversate senza nome (sta nell'elenco sotto), la linea tratteggiata, il numero al centro */
.carta-mondo .zona.via .nome { display: none; }
.percorso { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.percorso polyline { fill: none; stroke: var(--oro); stroke-linejoin: round; }
.tappa { position: absolute; z-index: 3; box-sizing: border-box; min-width: 2.5cqw; height: 2.5cqw; padding: 0 .5cqw; transform: translate(-50%, -50%); border: .2cqw solid #03090c; color: #03090c; background: var(--oro); font: 700 1.5cqw/2.1cqw var(--num); text-align: center; white-space: nowrap; pointer-events: none; }
.strati { display: flex; gap: 6px; margin-bottom: 8px; }
.strato { padding: 4px 12px; border: 1px solid var(--filo); color: var(--tenue); font: 600 11.5px var(--uif); letter-spacing: .1em; text-transform: uppercase; }
.strato.qui { color: #03090c; background: var(--acqua); border-color: var(--acqua); }
.strato.presto { opacity: .55; cursor: default; }
.tavola { position: relative; width: 100%; max-width: 900px; margin: 0 auto; overflow: hidden; border: 1px solid var(--filo); background: #020507; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.tavola.vicino { touch-action: none; cursor: grab; }
.tavola .foglio { position: absolute; inset: 0; transform-origin: 0 0; }
.tavola .foglio > img { display: block; width: 100%; height: 100%; }
.tavola .segno { transform: scale(calc(1 / var(--z, 1))); transform-origin: 0 0; }
.tavola .bussola { right: auto; left: 6px; }
.tavola .bussola::before { content: "\2196  "; }
.tavola .bussola::after { content: none; }
/* la carta del mondo e' una tavola anche lei: larga quanto la pagina, col nord in alto */
.tavola.carta-mondo { max-width: none; background: #0d2a3a; }
.carta-mondo .foglio > .fondo { height: auto; }
/* i nomi delle zone crescono con la carta (11 px a 860 di larghezza), cosi' sul telefono non coprono la tessera */
.tavola.carta-mondo { container-type: inline-size; }
.carta-mondo .zona .nome, .carta-mondo .zona .num { font-size: 1.28cqw; }
.carta-mondo .zona .nome { padding: .25cqw .4cqw .35cqw; }
.carta-mondo .bussola { left: auto; right: 6px; }
.carta-mondo .bussola::before { content: none; }
.carta-mondo .bussola::after { content: " \2191"; }
.lente { position: absolute; right: 6px; bottom: 6px; z-index: 4; display: flex; flex-direction: column; gap: 4px; }
.lente button { width: 30px; height: 30px; padding: 0; border: 1px solid var(--filo); background: rgba(3,9,12,.82); color: var(--testo); font: 600 17px/1 var(--num); cursor: pointer; }
.lente button:hover, .lente button:focus-visible { border-color: var(--acqua); color: var(--acqua); }
.segno { position: absolute; z-index: 2; display: flex; align-items: center; gap: 6px; width: 0; height: 0; color: #fff; font: 600 12.5px/1.15 var(--uif); letter-spacing: .02em; white-space: nowrap; }
.segno .punto { flex: none; box-sizing: border-box; width: 14px; height: 14px; margin-left: -7px; border: 2px solid #03090c; background: var(--acqua); }
.segno.s-dungeon .punto { background: var(--classe); transform: rotate(45deg); }
.segno.s-porta .punto { width: 12px; height: 12px; margin-left: -6px; background: var(--oro); }
.segno > span { padding: 2px 6px; background: rgba(3,9,12,.82); border: 1px solid var(--filo); }
.segno.a-sx { flex-direction: row-reverse; justify-content: flex-start; }
.segno.a-sx .punto { margin-left: 0; margin-right: -7px; }
.segno.a-sx.s-porta .punto { margin-right: -6px; }
.segno.a-sx > span { margin-right: 0; }
/* la croce di un abitante, stesa a terra: i bracci seguono i lati della mappa (2:1, come le caselle), l'orlo scuro sta sotto
   tutti e due i bracci cosi' l'incrocio resta pulito */
.segno.s-npc .punto { width: 32px; height: 18px; margin-left: -16px; border: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 18'%3E%3Cg stroke-linecap='round'%3E%3Cpath d='M3 2.5 29 15.5M3 15.5 29 2.5' stroke='%2303090c' stroke-width='7'/%3E%3Cpath d='M3 2.5 29 15.5M3 15.5 29 2.5' stroke='%23e9d29a' stroke-width='3.6'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
.segno.a-sx.s-npc .punto { margin-right: -16px; }
.segno.s-npc { z-index: 3; }
.legenda.comando code { padding: 3px 8px; border: 1px solid var(--filo); color: var(--oro); font: 600 13px var(--num); user-select: all; overflow-wrap: anywhere; }
a.segno:hover, a.segno:focus-visible { z-index: 3; }
a.segno:hover > span, a.segno:focus-visible > span { border-color: var(--acqua); background: #0a2228; text-decoration: underline; }
a.segno:hover .punto { border-color: #fff; }
.carta-mondo .segno > span { display: none; }
.carta-mondo .segno:hover > span, .carta-mondo .segno:focus-visible > span { display: block; }
.bussola { position: absolute; right: 6px; top: 6px; z-index: 2; padding: 1px 6px; color: var(--tenue); background: rgba(3,9,12,.72); font: 600 10.5px var(--uif); letter-spacing: .12em; text-transform: uppercase; pointer-events: none; }
.bussola::after { content: " \2191"; }
.legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; max-width: 900px; margin: 8px auto 0; }
.legenda .segno { position: static; width: auto; height: auto; color: var(--tenue); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; }
.legenda .segno .punto { margin-left: 0; }
.barra .al-mondo { margin-left: auto; min-height: 28px; padding: 0 12px; font-size: 11.5px; }
.passo { display: inline-block; box-sizing: border-box; flex: none; width: auto; min-width: 18px; height: 18px; line-height: 18px; text-align: center; margin-right: 6px; padding: 0 3px; color: #03090c; background: var(--oro); font: 700 12px var(--num); vertical-align: 1px; }
.elenco.confini li, .elenco.passi li { justify-content: flex-start; gap: 10px; font-size: 14.5px; }
.elenco.confini .come, .elenco.passi .come { flex: none; min-width: 124px; color: var(--tenue); font: 600 11.5px var(--uif); letter-spacing: .08em; text-transform: uppercase; }
.elenco.confini .num, .elenco.passi .num { margin-left: auto; color: var(--tenue); font-size: 13px; white-space: nowrap; }
.elenco.confini li.qui { background: rgba(159,238,230,.12); }
.elenco.passi .passo { margin-right: 0; }
.scheda .fascia.due h3 + .elenco + h3 { margin-top: 10px; }
.modulo.strada .riga { grid-template-columns: 70px minmax(0, 1fr); }
.modulo.strada { margin-top: 0; }
@media (max-width: 760px) {
  .elenco.confini .come, .elenco.passi .come { min-width: 96px; }
  .modulo.strada .tendina { min-width: 0; width: 100%; }
  .modulo.strada .pulsante { min-height: 44px; }
  .segno { font-size: 11.5px; }
  .segno .punto { width: 16px; height: 16px; margin-left: -8px; }
  .barra .al-mondo { min-height: 36px; }
  .lente { flex-direction: row; }
  .lente button { width: 36px; height: 36px; }
  /* la carta del mondo e' larga due volte e mezzo l'altezza: sul telefono restava una striscia di 126 px. La finestra e' alta quanto
     la carta aperta gia' vicina (--alto: la sua altezza a 860 di larghezza), il foglio tiene le sue proporzioni e ci si muove dentro */
  .tavola.carta-mondo { aspect-ratio: auto !important; height: min(62vh, var(--alto, 340px)); }
  .carta-mondo .foglio { bottom: auto; aspect-ratio: var(--forma); }
}

@media (min-width: 761px) and (max-width: 1180px) {
  /* schermo medio: i numeri e la figura sopra, mappe ed elementi sotto */
  .griglia { grid-template-columns: minmax(0, 1fr) 172px; }
  .griglia .blocco { grid-column: auto; }
  .griglia > .blocco:nth-of-type(2) { grid-column: 1; grid-row: 2; }
  .griglia > .blocco:nth-of-type(3) { grid-column: 2; grid-row: 2; }
}
/* Le abilita' della wiki: la strada con le figure delle classi, i salti alle skill di una classe, la scheda di una skill */
.strada-classi { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.strada-classi a { display: grid; justify-items: center; gap: 2px; min-width: 84px; padding: 6px 8px 4px; border: 1px solid var(--filo); color: var(--testo); text-decoration: none; }
.strada-classi a b { font: 600 12px var(--uif); letter-spacing: .08em; text-transform: uppercase; }
.strada-classi a small { color: var(--tenue); font: 500 12px var(--num); }
.strada-classi a:hover, .strada-classi a:focus-visible { border-color: var(--acqua); color: var(--acqua); }
.strada-classi a[aria-current] { border-color: var(--oro); color: #fff; background: rgba(159,238,230,.1); }
.strada-classi .pezzo { display: flex; align-items: center; gap: inherit; }
.strada-classi .poi { color: var(--tenue); font: 600 12px var(--uif); letter-spacing: .1em; text-transform: uppercase; }
.strade { display: grid; gap: 8px; }
.modi.salti { display: flex; flex-wrap: wrap; gap: 2px 18px; }
.scheda.abilita { scroll-margin-top: 90px; }
.scheda.abilita:target { border-color: var(--oro); }
.elenco.effetti li b { color: var(--oro); font-weight: 600; }
.modi.salti a.con-icona { display: inline-flex; gap: 7px; }
@media (max-width: 600px) { .strada-classi { gap: 4px; } .strada-classi a { min-width: 0; padding: 4px 4px 3px; } .strada-classi a b { font-size: 10.5px; letter-spacing: .04em; } .strada-classi img { width: 46px; height: 46px; } }
/* Lo skill builder della wiki: i punti rimasti fermi in alto, una tabella per classe, la scheda corta sotto il nome */
.sb-barra { position: sticky; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 10px 16px; background: var(--fondo); }
.sb-resti { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.sb-resti > b { font: 600 12px var(--uif); letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); }
.sb-resti .num { color: var(--oro); font-size: 16px; }
.sb-tasti { display: flex; gap: 8px; margin-left: auto; }
/* sul telefono i tasti vanno in cima e, a barra ferma, scivolano sotto la testata (il `top` lo mette lo script): restano i punti */
@media (max-width: 600px) { .sb-tasti { order: -1; width: 100%; } .sb-tasti .pulsante { flex: 1; min-height: 44px; } }
/* l'avviso sta sopra la pagina, appeso sotto la barra: quando compare o sparisce niente si sposta e i tasti restano sotto il dito */
.sb-avviso { position: absolute; left: -1px; right: -1px; top: 100%; margin: 0; max-width: none !important; padding: 6px 10px; border: 1px solid var(--oro); color: var(--oro); background: var(--fondo); }
.sb-avviso .pulsante { min-height: 30px; margin-left: 6px; }
.sb-classe.chiusa .sb-tab { opacity: .55; }
.sb-cambio { display: flex; }
.sb-cambio label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.sb-passi { display: inline-flex; align-items: center; gap: 4px; }
.sb-passi button { width: 30px; height: 30px; padding: 0; border: 1px solid var(--filo); color: var(--testo); background: rgba(2,7,9,.55); font: 600 16px/1 var(--num); cursor: pointer; }
.sb-passi .max { width: auto; padding: 0 10px; margin-left: 4px; font: 600 12px/1 var(--num); letter-spacing: .06em; text-transform: uppercase; }
.sb-cambio .corto { display: none; }
.sb-passi button:hover, .sb-passi button:focus-visible { border-color: var(--acqua); color: var(--acqua); }
.sb-num { width: 52px; height: 30px; padding: 0 4px; border: 1px solid var(--filo); color: var(--oro); background: rgba(2,7,9,.55); font: 600 15px/1 var(--num); text-align: center; -moz-appearance: textfield; appearance: textfield; }
.sb-num::-webkit-outer-spin-button, .sb-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sb-num:focus { outline: 0; border-color: var(--acqua); }
.sb-tab { width: 100%; border-collapse: collapse; }
.sb-tab th, .sb-tab td { padding: 4px 8px; border: 1px solid var(--filo); text-align: left; vertical-align: middle; }
.sb-tab th { font: 600 12px var(--uif); letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); }
.sb-nome { position: relative; }
.sb-nome > a { margin-left: 8px; vertical-align: middle; }
.sb-icona { display: inline-block; vertical-align: middle; line-height: 0; cursor: help; }
.sb-liv { width: 1%; white-space: nowrap; text-align: center !important; }
.sb-liv .num { display: inline-block; min-width: 58px; text-align: center; }
.sb-liv button { width: 30px; height: 30px; padding: 0; border: 1px solid var(--filo); color: var(--testo); background: rgba(2,7,9,.55); font: 600 16px/1 var(--num); cursor: pointer; }
.sb-liv button[hidden] { display: none; }
.sb-liv button:hover:not(:disabled), .sb-liv button:focus-visible { border-color: var(--acqua); color: var(--acqua); }
.sb-liv button:disabled { opacity: .3; cursor: default; }
.sb-req { color: var(--tenue); font-size: 13.5px; }
.sb-req span { display: inline-block; margin-right: 12px; }
.sb-req .manca { color: #f0a08c; }
.sb-tab tr.spenta .sb-nome > a, .sb-tab tr.spenta .sb-icona { opacity: .5; }
.sb-tab tr.messa { background: rgba(159,238,230,.07); }
.sb-tab tr.messa .ora { color: var(--oro); }
.corta { display: none; position: absolute; left: 0; top: 100%; z-index: 7; width: min(360px, 78vw); padding: 8px 10px; border: 1px solid var(--acqua-scura); background: var(--fondo); font-size: 13.5px; line-height: 1.4; }
.corta b { display: block; color: #fff; }
.corta small { display: block; color: var(--tenue); margin-bottom: 4px; }
.corta span { display: block; }
.corta span b { display: inline; color: var(--oro); font-weight: 600; }
.sb-nome:hover .corta, .sb-icona:focus + a + .corta { display: block; }
@media (max-width: 760px) {
  .sb-barra { padding: 8px 10px; }
  .sb-tasti { margin-left: 0; }
  .sb-tab thead { display: none; }
  .sb-tab tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; border-bottom: 1px solid var(--filo); }
  .sb-tab td { border: 0; }
  .sb-liv { width: auto; }
  .sb-liv button { width: 44px; height: 44px; }
  .sb-passi button { width: 44px; height: 44px; }
  .sb-passi .max { width: auto; }
  .sb-cambio .lungo { display: none; }
  .sb-cambio .corto { display: inline; }
  .sb-num { height: 44px; width: 60px; font-size: 16px; }
  .sb-req { grid-column: 1 / -1; padding-top: 0 !important; }
  .sb-req:empty { display: none; }
}

/* ---- la finestra dei cookie (sito/consenso.js, docs/sito.md «Privacy e cookie»): una finestra del gioco che sale dal basso,
   in basso a destra sul computer; sul telefono una lastra larga in fondo. Tre tasti uguali: il rifiuto pesa quanto l'accetto */
.consenso { position: fixed; z-index: 90; right: max(20px, env(safe-area-inset-right, 0px)); bottom: calc(20px + var(--basso));
  width: min(470px, calc(100vw - 32px)); color: var(--testo); font: 15px/1.45 var(--txt);
  opacity: 0; transform: translateY(28px); transition: opacity .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1); }
.consenso.su { opacity: 1; transform: none; }
.consenso .barra h2 { margin: 0; color: #fff; font: 600 15px var(--uif); letter-spacing: .08em; }
.consenso .x { display: grid; place-items: center; width: 32px; height: 28px; margin: -4px -8px -4px auto; padding: 0; border: 0; background: none;
  color: var(--tenue); font: 22px/1 var(--txt); cursor: pointer; }
.consenso .x:hover, .consenso .x:focus-visible { color: var(--acqua); outline: none; }
.consenso p { margin: 0; color: var(--tenue); }
.consenso p a { color: var(--acqua); text-decoration: none; white-space: nowrap; }
.consenso p a:hover, .consenso p a:focus-visible { text-decoration: underline; }
.consenso .scelte { display: grid; border-top: 1px solid var(--filo); }
.consenso .scelte[hidden] { display: none; }
.consenso .spunta { align-items: flex-start; padding: 7px 0; border-bottom: 1px solid var(--filo); cursor: pointer; }
.consenso .spunta input { margin-top: 6px; }
.consenso .spunta input:disabled { opacity: .6; }
.consenso .spunta b { display: block; font: 600 13.5px var(--uif); letter-spacing: .05em; color: var(--testo); }
.consenso .spunta small { display: block; font-size: 13.5px; color: var(--tenue); }
.consenso .tasti { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.consenso .pulsante { min-height: 40px; padding: 4px 6px; line-height: 1.15; letter-spacing: .05em; text-align: center; cursor: pointer; }
@media (max-width: 760px) {
  .consenso { left: 0; right: 0; bottom: 0; width: auto; padding-bottom: calc(16px + var(--basso));
    padding-left: max(14px, env(safe-area-inset-left, 0px)); padding-right: max(14px, env(safe-area-inset-right, 0px)); }
  .consenso .pulsante { min-height: 44px; font-size: 12px; letter-spacing: .04em; }
}
@media (prefers-reduced-motion: reduce) { .consenso { transition: none; } }

/* in fondo a ogni pagina: il link «Cookie» che riapre la scelta */
.piede { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; max-width: 1360px; margin: 0 auto; padding-block: 18px calc(22px + var(--basso));
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  border-top: 1px solid var(--filo); color: rgba(233,228,212,.45); font: 500 12px var(--uif); letter-spacing: .1em; text-transform: uppercase; }
.piede button { min-height: 32px; padding: 0; border: 0; background: none; color: var(--tenue); font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.piede button:hover, .piede button:focus-visible { color: var(--acqua); outline: none; }
.piede a { display: inline-grid; align-items: center; min-height: 32px; color: var(--tenue); text-decoration: none; }
.piede a:hover, .piede a:focus-visible { color: var(--acqua); outline: none; }

/* ---- le pagine legali (tools/legali.py): privacy, cookie, termini. Una colonna da leggere, al centro */
.pagina.legale { grid-template-columns: minmax(0, 820px); justify-content: center; }
.legale article { gap: 18px; }
.legale section { display: grid; gap: 8px; }
.legale section p, .legale section li { max-width: 72ch; line-height: 1.6; }
.legale ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.legale code { font: 13px var(--num); color: var(--oro); }
.legale .tab td { vertical-align: top; }
.legale .pulsante { justify-self: start; }

/* ---- le notizie (tools/notizie.py): le carte dell'elenco e della home, e la pagina di una notizia */
.notizie { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 22px 18px; }
.notizia { display: grid; gap: 6px; align-content: start; color: var(--testo) !important; text-decoration: none !important; }
.notizia img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 4px; border: 1px solid var(--acqua-scura); transition: border-color .12s; }
.notizia:hover img, .notizia:focus-visible img { border-color: var(--acqua); }
.notizia:focus-visible { outline: none; }
.notizia time { font: 500 13px var(--num); color: var(--tenue); }
.notizia b { font: 600 17px/1.25 'Cinzel', Georgia, serif; letter-spacing: .04em; }
.notizia:hover b, .notizia:focus-visible b { color: var(--acqua); }
.notizia span { color: var(--tenue); line-height: 1.5; }
.articolo { gap: 14px; }
.articolo .copertina-notizia { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--acqua-scura); }
.articolo p, .articolo li { max-width: 68ch; line-height: 1.65; }
.articolo h2 { margin-top: 6px; }

/* ---- le classi (tools/classi.py, sito/classi.js): la figura grande accanto al nome, sotto l'albero della strada.
   Come la discesa della home, qui i titoli sono grandi e la figura si muove (docs/sito-grafica.md, «Deciso» 4) */
.pagina.classi { display: block; max-width: none; padding: 0; }
.pagina.classi > main { display: block; }
.c-eroe { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; gap: 0 2vw;
  min-height: calc(100vh - 47px); min-height: calc(100lvh - 47px); max-width: 1560px; margin: 0 auto; overflow: hidden;
  padding: 20px max(16px, env(safe-area-inset-right, 0px)) 20px max(7vw, calc(16px + env(safe-area-inset-left, 0px))); }
.c-testo { position: relative; z-index: 1; display: grid; gap: 20px; justify-items: start; }
.pagina.classi h1 { font: 600 clamp(40px, 6.2vw, 100px)/1 'Cinzel', Georgia, serif; letter-spacing: .04em; text-wrap: balance; color: var(--oro); text-shadow: none; margin: 0; }
.c-testo > p { font-size: clamp(18px, 1.5vw, 23px); line-height: 1.45; max-width: 32ch; }
.c-testo > .c-briciole { display: flex; flex-wrap: wrap; gap: 4px 12px; font: 600 13px/1.4 'Cinzel', Georgia, serif; letter-spacing: .16em; text-transform: uppercase; color: var(--tenue); max-width: none; }
.c-briciole span::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 12px; vertical-align: 2px; background: var(--acqua-scura); rotate: 45deg; }
.c-testo .tasto { margin-top: 10px; }
.pagina.classi .tasto, .pagina.classi .tasto:hover { text-decoration: none; }
.pagina.classi .tasto.primo { color: #04161a; }
.c-palco { --tinta: var(--acqua-scura); position: relative; align-self: stretch; display: grid; place-items: center; min-width: 0; }
.c-palco::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(42% 9% at 50% 84%, color-mix(in srgb, var(--tinta) 46%, transparent), transparent),
    radial-gradient(46% 52% at 50% 52%, color-mix(in srgb, var(--tinta) 15%, transparent), transparent); }
.c-palco canvas { position: relative; display: block; width: min(100%, calc((100vh - 110px) * 210 / 172)); width: min(100%, calc((100lvh - 110px) * 210 / 172)); aspect-ratio: 210 / 172; cursor: grab; touch-action: pan-y; }
.c-palco canvas:active { cursor: grabbing; }
.c-gira { position: absolute; left: 0; right: 0; bottom: 3%; margin: 0; text-align: center; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); pointer-events: none; }
.c-gira[hidden] { display: none; }

.c-strade { display: grid; gap: 30px; justify-items: center; max-width: 1360px; margin: 0 auto; padding-block: 56px 80px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.pagina.classi h2 { font: 600 clamp(19px, 2vw, 27px)/1.2 'Cinzel', Georgia, serif; letter-spacing: .16em; text-transform: uppercase; color: var(--testo); margin: 0; }
.c-griglia { display: flex; flex-wrap: wrap; justify-content: center; gap: 34px clamp(20px, 4vw, 64px); }
.albero { --filo: clamp(12px, 2.6vw, 40px); display: flex; align-items: center; justify-content: center; max-width: 100%; }
.nodo { position: relative; display: grid; justify-items: center; gap: 1px; width: clamp(88px, 10.5vw, 142px); padding: 4px 2px 9px; text-align: center;
  color: var(--testo) !important; text-decoration: none !important; border-bottom: 2px solid transparent; }
.c-strade > .albero:not(.largo) .nodo { width: clamp(92px, 14vw, 196px); }
.c-strade > .albero:not(.largo) .nodo b { font-size: clamp(15px, 1.4vw, 19px); }
.c-figura { display: block; width: 100%; aspect-ratio: 1; }
.c-figura img { display: block; width: 100%; height: 100%; transition: translate .12s; }
.nodo:hover .c-figura img, .nodo:focus-visible .c-figura img { translate: 0 -4px; }
.nodo b { font: 600 15px/1.25 'Cinzel', Georgia, serif; letter-spacing: .05em; }
.nodo small { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); }
.nodo:hover b, .nodo:focus-visible b { color: var(--acqua); }
.nodo:focus-visible { outline: none; }
.nodo[aria-current] { border-bottom-color: var(--oro); }
.nodo[aria-current] b { color: var(--oro); }
.albero .filo { flex: none; width: var(--filo); height: 1px; background: var(--acqua-scura); }
.bivio { position: relative; display: grid; padding-left: var(--filo); }
.bivio::before { content: ""; position: absolute; left: 0; top: calc(50% / var(--n)); bottom: calc(50% / var(--n)); width: 1px; background: var(--acqua-scura); }
.bivio .nodo::before { content: ""; position: absolute; right: 100%; top: 50%; width: var(--filo); height: 1px; background: var(--acqua-scura); }
/* il Novizio: le sette strade stanno in fila sotto di lui */
.albero.largo { flex-direction: column; width: 100%; }
.albero.largo .filo { width: 1px; height: 26px; }
.albero.largo .bivio { grid-auto-flow: column; grid-auto-columns: minmax(0, 142px); justify-content: center; width: 100%; padding: 26px 0 0; }
.albero.largo .bivio::before { left: calc(50% - (min(100%, 994px) / 2) + min(100%, 994px) / 14); right: calc(50% - (min(100%, 994px) / 2) + min(100%, 994px) / 14); top: 0; bottom: auto; width: auto; height: 1px; }
.albero.largo .bivio .nodo { width: auto; }
.albero.largo .bivio .nodo::before { right: auto; left: 50%; top: auto; bottom: 100%; width: 1px; height: 26px; }
.c-giro { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 16px; width: min(100%, 860px); margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--acqua-scura); }
.c-giro a { display: grid; gap: 2px; min-height: 40px; align-content: center; font: 600 15px/1.25 'Cinzel', Georgia, serif; letter-spacing: .05em; }
.c-giro a:last-child { text-align: right; }
.c-giro small { font: 12px/1.3 'Alegreya Sans', system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); }
.c-chiudi { margin-top: 26px !important; }
/* le skill di una classe: le icone del gioco a sinistra (attive, poi passive), la scheda della skill scelta a destra.
   Arrivano dalla wiki a ogni visita (sito/classi.js); la sezione resta nascosta finche' non ci sono */
.c-skill { display: grid; gap: 26px; justify-items: center; max-width: 1180px; margin: 0 auto; padding-block: 56px 10px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.c-skill[hidden] { display: none; }
.c-skill-corpo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px clamp(22px, 4vw, 56px); align-items: start; width: 100%; }
.c-skill-griglia { display: grid; gap: 18px; }
.c-skill-griglia h3, .c-skill-scheda h4 { font: 600 13px/1.3 'Cinzel', Georgia, serif; letter-spacing: .16em; text-transform: uppercase; color: var(--tenue); margin: 0 0 8px; }
.c-skill-fila { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 8px; }
.c-skill-fila button { position: relative; display: block; aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: pointer; opacity: .72; transition: opacity .12s, translate .12s; }
.c-skill-fila button img { display: block; width: 100%; height: 100%; }
.c-skill-fila button:hover, .c-skill-fila button:focus-visible { opacity: 1; translate: 0 -2px; outline: none; }
.c-skill-fila button[aria-pressed="true"] { opacity: 1; outline: 2px solid var(--oro); outline-offset: 2px; }
/* le skill che la scelta richiede restano accese, col filo color acqua */
.c-skill-fila button.serve { opacity: 1; outline: 1px solid var(--acqua); outline-offset: 2px; }
.c-skill-scheda { display: grid; gap: 16px; min-width: 0; padding: 22px clamp(16px, 2.4vw, 28px); background: var(--petrolio); border: 1px solid var(--acqua-scura); }
.c-skill-testa { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; }
.c-skill-testa img { display: block; width: 64px; height: 64px; }
.c-skill-testa h3 { font: 600 clamp(20px, 2vw, 26px)/1.15 'Cinzel', Georgia, serif; letter-spacing: .04em; color: var(--oro); margin: 0 0 3px; }
.c-skill-testa p { margin: 0; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); }
.c-skill-numeri { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; }
.c-skill-numeri div { display: grid; gap: 1px; }
.c-skill-numeri dt { font-size: 13px; color: var(--tenue); }
.c-skill-numeri dd { margin: 0; font: 500 15px/1.3 'Fira Sans Condensed', 'Alegreya Sans', sans-serif; font-variant-numeric: tabular-nums; }
.c-skill-effetto { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 16px; line-height: 1.45; }
.c-skill-effetto li + li { font-size: 15px; color: var(--tenue); }
.c-skill-effetto b { color: var(--testo); font-weight: 600; }
.c-skill-richiede { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: 15px; }
.c-skill-richiede button { padding: 0; border: 0; background: none; font: inherit; color: var(--acqua); cursor: pointer; min-height: 28px; }
.c-skill-richiede button:hover, .c-skill-richiede a:hover { text-decoration: underline; }
.c-skill-richiede small { margin-left: 6px; font-size: 13px; color: var(--tenue); }
.c-skill-video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.c-skill-wiki { margin: 0 !important; font-size: 14px; }
@media (max-aspect-ratio: 5/4), (max-width: 760px) {
  .c-eroe { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 6px; padding: 0 max(20px, env(safe-area-inset-right, 0px)) 34px max(20px, env(safe-area-inset-left, 0px)); }
  .c-palco { order: -1; height: 54vh; height: 54lvh; }
  /* la tela e' piu' larga del telefono: misure scritte (un «100%» qui si misura sul disegno e scappa) e centro a mano */
  .c-palco canvas { position: absolute; left: 50%; top: 0; translate: -50% 0; width: calc(54vh * 210 / 172); width: calc(54lvh * 210 / 172); height: 54vh; height: 54lvh; max-width: none; }
  .pagina.classi h1 { font-size: clamp(38px, 11vw, 72px); }
  /* sul telefono le icone sopra e la scheda sotto; le icone restano grandi quanto un dito */
  .c-skill { padding-top: 34px; }
  .c-skill-corpo { grid-template-columns: minmax(0, 1fr); }
  .c-skill-fila { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); }
  .albero.largo .bivio { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); padding-top: 0; }
  .albero.largo .bivio::before, .albero.largo .bivio .nodo::before, .albero.largo .filo { display: none; }
}