/* FARAWAY Scorer — estetica "atlante di viaggio": carta/bianco come la scatola,
   5 colori dei biomi, fregi, accento cielo-stellato (Meteore). */
@import url('https://fonts.googleapis.com/css2?family=Grandstander:wght@600;700;800&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');
/* Rubik 700 = il carattere stampato sulle carte (geometrico, senza grazie):
   numeri, punteggi e didascalie delle carte.
   Grandstander per titoli e nomi: il regolamento usa The Moment, disegnato a mano,
   che e' a pagamento e non si puo' incorporare. Grandstander e' il piu' vicino fra
   quelli a licenza aperta che restino leggibili alle dimensioni vere dell'app: i
   condensati pesanti provati prima si impastavano sotto i 18px. */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@700&display=swap');

:root{
  /* ===== REGOLA DEI BORDI, valida in tutto il foglio =====
     IN ALTO: sempre env(safe-area-inset-top). Dal 08/08 la barra di stato è
     opaca (status-bar-style: default), quindi quell'inset vale zero e la pagina
     comincia sotto l'orologio da sé. Niente elementi fissi con uno sfondo
     lassù: iOS li campiona e ci sfuma sopra, vedi il commento su html.
     Se un giorno si tornasse a black-translucent, l'inset torna a valere e
     serve di nuovo un fondo per la barra.
     IN BASSO: sempre var(--sa-b), per chiunque, a filo dei bordi o rientrato.
     Vale 0 dove il sistema tiene già l'indicatore home fuori dalla finestra
     (PWA installata su iPhone) e l'inset dichiarato dove invece la finestra
     arriva al bordo dello schermo (browser, Android). Lì copre anche gli
     ANGOLI TONDI: a 18px dal lato l'arco sale di 14 punti, meno dell'inset.
     Il valore lo decide misuraMargineInferiore() in app.js.
     Mai rimettere env(safe-area-inset-bottom) crudo: dove il sistema tiene già
     la sua fascia fuori dalla finestra, lo spazio finisce contato due volte e
     sotto l'ultimo pulsante si apre un vuoto. */
  --sa-b:env(safe-area-inset-bottom);
  /* fondo della pagina: lo usa il body e lo ripete la banda della barra di
     stato, così le due superfici combaciano invece di accostarsi */
  --fondo:radial-gradient(120% 60% at 50% -10%, #fcf8ee 0%, var(--paper) 60%),var(--paper);
  --paper:#f6f1e4; --paper-2:#efe7d4; --card:#fffdf7; --ink:#241d15; --ink-soft:#5c5142;
  --line:#d9cdb2; --line-strong:#c2b290;
  /* biomi */
  --fiume:#3f8f6f; --foresta:#c0503a; --citta:#cf9a2e; --deserto:#4a7fb5; --rifugi:#8b8794;
  /* cielo stellato / meteore */
  --dusk:#211a3a; --dusk-2:#2f2552; --meteora:#ff6b8a; --star:#ffd76a;
  --ok:#3f8f6f; --warn:#cf9a2e; --bad:#c0503a;
  --num:'Rubik','Hanken Grotesk',sans-serif;   /* numeri: stesso carattere delle carte */
  --radius:16px; --radius-s:11px;
  --shadow:0 10px 28px -12px rgba(40,30,15,.35);
  --shadow-lift:0 18px 40px -14px rgba(40,30,15,.45);
  --frieze:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='12' viewBox='0 0 44 12'%3E%3Cg fill='none' stroke='%23c2b290' stroke-width='1.4'%3E%3Cpath d='M2 10 L8 2 L14 10 M16 2 h6 v8 h-6 z M26 10 L32 2 L38 10'/%3E%3C/g%3E%3C/svg%3E");
}
*{box-sizing:border-box}
/* Icone Lucide dallo sprite incorporato: dimensione legata al testo (1em), colore
   ereditato da currentColor, quindi funzionano su carta chiara e su fondo scuro. */
.ic{width:1em;height:1em;flex:0 0 auto;display:inline-block;vertical-align:-.14em;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn .ic{width:1.15em;height:1.15em}
/* Scorre il DOCUMENTO, come una normale pagina web: su desktop e tablet la
   barra deve stare sul bordo della finestra, non a metà pagina. (Prima
   scorreva .app, che è largo 680px e centrato: la barra finiva lì in mezzo.)
   overscroll-behavior toglie il "tira giù per aggiornare" e il rimbalzo di
   fine pagina; va messo anche su html, non solo su body. */
html,body{margin:0;height:100%;overscroll-behavior-y:none}
body{
  font-family:'Hanken Grotesk',system-ui,sans-serif; color:var(--ink);
  background:var(--fondo);
  background-attachment:fixed;
  -webkit-text-size-adjust:100%; overscroll-behavior-y:none;
}
/* Vedi il commento in index.html: esiste per far smettere a iOS di sfumare da sé
   la cima della pagina. Un gradiente trasparente, non un colore: è la condizione
   in cui si è visto funzionare, con la diagnostica accesa.
   Non deve intercettare i tocchi e non deve coprire niente. */
#scudo-barra{position:fixed;top:0;left:0;right:0;height:220px;z-index:39;pointer-events:none;
  background:linear-gradient(transparent,transparent)}

/* NIENTE elementi fissi con uno sfondo a ridosso del bordo alto.
   Da iOS 26 Safari cerca gli elementi position:fixed o sticky vicini ai bordi,
   ne legge background-color e backdrop-filter per tingere la barra di stato, e
   ci disegna sopra il suo effetto sfumato, che arriva più in basso della barra
   e sfoca quello che trova. Li campiona anche se sono invisibili: opacity 0 e
   pointer-events none non bastano a farsi ignorare, solo display:none.
   Qui c'era una banda fixed alta env(safe-area-inset-top) che faceva da fondo
   alla barra, e il logo sotto risultava fuori fuoco. Con la barra di stato
   opaca (apple-mobile-web-app-status-bar-style: default) quella banda non serve
   più, perché la pagina non passa sotto l'orologio.
   Se un giorno servisse di nuovo una superficie fissa lassù: il genitore fisso
   va lasciato trasparente e lo sfondo messo su un figlio position:absolute,
   che Safari non guarda. */
html.in-cattura{--fondo:var(--dusk)}
/* grana sottile */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
/* con il pulsante flottante serve spazio sotto, senza no: la classe la mette
   setFab(), che è l'unico posto che sa se il pulsante c'è */
/* 16 di margine + 49 di pulsante + 16 d'aria: con 70 i crediti finivano
   appena sotto il pulsante, senza respiro */
.app.con-fab{padding-bottom:calc(81px + var(--sa-b))}
.app{position:relative;z-index:1;max-width:680px;margin:0 auto;padding:0 16px calc(34px + var(--sa-b));
  min-height:100%;display:flex;flex-direction:column}
/* Misurato sull'iPhone (iOS 27 beta), app installata: la finestra NON ha
   altezza fissa. Parte da 894 punti su 956 e si allarga quanto basta a far
   entrare la pagina, fino a coprire lo schermo intero. Con tre partite in
   elenco misurava 894, con quattro 903, con una lista lunga 956. Da lì tutte
   le incoerenze del fondo: la stessa schermata si trovava il bordo in un posto
   diverso a seconda di quanto era lunga.
   Basta quindi chiedere alla pagina di essere alta un pixel più dello SCHERMO
   (--h-piena, la calcola app.js): la finestra si allarga al massimo e ci
   resta, uguale ovunque, e in fondo resta l'unico margine che conta, quello
   che iOS dichiara. Lo scorrimento in eccesso è quel pixel, niente di più.
   Solo su schermo tattile e ad app installata: altrove comparirebbe una barra
   di scorrimento per niente. */
/* Provato a toglierlo l'08/08 sperando che la sfumatura in cima dipendesse
   dallo scorrimento: il fondo è tornato a ballare subito e la sfumatura è
   rimasta. Serve, e non c'entra niente con la barra di stato. */
@media (display-mode:standalone) and (hover:none){
  .app{min-height:var(--h-piena, calc(100% + 1px))}
}
.screen{display:none;animation:fade .35s ease both}
/* la schermata attiva riempie l'altezza che avanza, così quello che dentro ha
   margin-top:auto (i crediti) va a fondo pagina invece di galleggiare */
.screen.active{display:flex;flex-direction:column;flex:1 0 auto}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- header ---------- */
/* Nella PWA installata la barra di stato è translucida e la pagina comincia
   sotto l'orologio: senza questo margine il logo ci finisce dentro. */
.top{display:flex;align-items:center;gap:12px;padding:calc(22px + env(safe-area-inset-top)) 0 14px}
.top .back .ic{width:18px;height:18px}
.top .back{appearance:none;border:1px solid var(--line);background:var(--card);width:40px;height:40px;border-radius:50%;
  font-size:1.1rem;cursor:pointer;color:var(--ink);display:none;place-items:center;flex:0 0 auto}
.top .back.show{display:grid}
.brand{font-family:'Grandstander',cursive;font-weight:800;font-size:1.42rem;letter-spacing:.3px;line-height:1}
/* Il logo ufficiale, mandato da Catch Up il 31/08/2026 insieme al permesso di usarlo
   come titolo. Prima qui c'era la scritta FARAWAY in Grandstander, che era un
   ripiego: il carattere vero del gioco (The Moment) e' a pagamento.
   Altezza in em, cosi' resta legata al corpo del titolo come la scritta di prima. */
.brand .logo{display:block;height:1.5em;width:auto}
.brand small{display:block;font-family:'Hanken Grotesk';font-weight:600;font-size:.62rem;letter-spacing:.32em;
  text-transform:uppercase;color:var(--ink-soft);margin-top:5px}
/* nome del giocatore: si tocca per rinominare */
.brand .ren{font-size:.9rem;color:var(--ink-soft);margin-left:9px;vertical-align:middle;opacity:.55}
.brand .ren .ic{stroke-width:2.2}
.brand:has(.ren){cursor:pointer}
.hero{position:relative;overflow:hidden;border-radius:var(--radius);background:linear-gradient(160deg,var(--dusk),var(--dusk-2));
  color:#f3eee2;padding:26px 22px;margin:6px 0 22px;box-shadow:var(--shadow)}
.hero h1{font-family:'Grandstander',cursive;font-weight:800;font-size:1.6rem;margin:0 0 4px}
.hero p{margin:0;color:#cbc3df;font-size:.92rem;max-width:42ch}
.hero .stars{position:absolute;inset:0;pointer-events:none;opacity:.9;
  background-image:radial-gradient(1.5px 1.5px at 20% 30%,#fff5,transparent),radial-gradient(1.5px 1.5px at 70% 20%,#fff6,transparent),radial-gradient(2px 2px at 85% 60%,var(--star),transparent),radial-gradient(1px 1px at 40% 70%,#fff4,transparent),radial-gradient(1.5px 1.5px at 55% 45%,#fff5,transparent)}
.hero .meteor{position:absolute;top:18px;right:-20px;width:120px;height:2px;background:linear-gradient(90deg,transparent,var(--meteora));transform:rotate(-24deg);filter:drop-shadow(0 0 6px var(--meteora))}
.hero .meteor::after{content:"";position:absolute;right:0;top:-2px;width:7px;height:7px;border-radius:50%;background:var(--meteora);box-shadow:0 0 10px var(--meteora)}

.frieze{height:12px;background:var(--frieze) repeat-x center;opacity:.7;margin:18px 0}

/* invito a installare: presente ma discreto, non deve rubare la scena al FAB */
.btn.install{width:100%;margin:0 0 18px;justify-content:flex-start;gap:12px;text-align:left;
  padding:12px 16px;border-style:dashed;border-color:var(--line-strong);background:#fffdf7aa}
.btn.install .ic{width:1.3em;height:1.3em;opacity:.75;flex:0 0 auto}
.btn.install b{display:block;font-size:.95rem}
.btn.install small{display:block;font-weight:500;font-size:.78rem;color:var(--ink-soft);margin-top:1px}

/* ---------- sezioni / liste ---------- */
.section-h{display:flex;align-items:baseline;justify-content:space-between;margin:6px 2px 12px}
.section-h h2{font-family:'Grandstander',cursive;font-weight:700;font-size:1.1rem;margin:0}
.muted{color:var(--ink-soft);font-size:.85rem}
.empty{text-align:center;color:var(--ink-soft);padding:34px 16px;border:1.5px dashed var(--line-strong);border-radius:var(--radius);background:#fffdf7aa}
.empty .big{font-size:2rem;display:block;margin-bottom:10px;opacity:.45}
.empty .big .ic{stroke-width:1.5}

.game-card{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px 16px;margin-bottom:12px;cursor:pointer;box-shadow:var(--shadow);
  transition:transform .12s,box-shadow .2s;animation:rise .4s both}
.game-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.game-card:active{transform:translateY(0)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.game-card .gc-date{font-family:'Grandstander',cursive;font-weight:700;font-size:1rem}
.game-card .gc-sub{color:var(--ink-soft);font-size:.82rem;margin-top:2px}
.game-card .gc-win{margin-left:auto;text-align:right}
.game-card .gc-win b{font-family:var(--num);font-weight:700;font-size:1.3rem;color:var(--foresta)}
.game-card .gc-win span{display:block;font-size:.7rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.1em}

/* ---------- bottoni ---------- */
.btn{appearance:none;border:none;cursor:pointer;font-family:'Hanken Grotesk';font-weight:700;font-size:1rem;
  border-radius:13px;padding:14px 18px;display:inline-flex;align-items:center;justify-content:center;gap:9px;transition:transform .08s,filter .15s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--ink);color:#f6f1e4;width:100%;box-shadow:var(--shadow)}
.btn-primary:hover{filter:brightness(1.12)}
.btn-ghost{background:var(--card);color:var(--ink);border:1px solid var(--line)}
.btn-danger{color:var(--bad);border-color:#e2c3bb}
.btn-danger:hover{background:#fbf1ee}
.btn-meteor{background:linear-gradient(135deg,var(--dusk),var(--dusk-2));color:#fff}
/* centrato con i margini, NON con transform: .btn:active usa transform e sostituirebbe
   il centraggio, facendo schizzare il pulsante di lato e mancare il click. */
.fab{position:fixed;left:0;right:0;margin-inline:auto;bottom:calc(16px + var(--sa-b));   /* pari al margine laterale: così schiva l'arco dell'angolo */
  z-index:30;max-width:648px;width:calc(100% - 32px);
  /* L'ombra va SOPRA, non sotto: sotto il pulsante restano pochi punti prima del
     bordo della finestra e un'ombra lunga ci veniva tagliata di netto. Del resto
     serve a staccarlo dal contenuto che gli scorre dietro, che sta sopra. */
  box-shadow:0 -10px 26px -14px rgba(40,30,15,.55), 0 2px 5px -4px rgba(40,30,15,.4)}

/* ---------- giocatori / classifica ---------- */
.player-row{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:13px 16px;margin-bottom:11px;cursor:pointer;box-shadow:var(--shadow);transition:transform .12s,box-shadow .2s;animation:rise .4s both}
.player-row:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.rank{font-family:var(--num);font-weight:700;font-size:1.15rem;width:30px;text-align:center;color:var(--ink-soft)}
.rank.r1{color:var(--citta)} .rank.r2{color:var(--rifugi)} .rank.r3{color:var(--foresta)}
.player-row .pname{font-family:'Grandstander',cursive;font-weight:700;font-size:1.05rem}
.player-row .pmeta{font-size:.78rem;color:var(--ink-soft)}
.player-row .ptot{margin-left:auto;font-family:var(--num);font-weight:700;font-size:1.55rem}

/* ---------- ricostruzione tableau ---------- */
.recon-tot{text-align:center;margin:8px 0 6px}
.recon-tot .n{font-family:var(--num);font-weight:700;font-size:3rem;line-height:1;letter-spacing:-.01em}
.recon-tot .l{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-soft)}
.recon-split{display:flex;justify-content:center;gap:18px;color:var(--ink-soft);font-size:.85rem;margin-bottom:4px}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:12px 0}
@media(min-width:560px){.grid{grid-template-columns:repeat(3,1fr)}}

.tcard{position:relative;border-radius:var(--radius-s);padding:11px 11px 12px;min-height:118px;cursor:pointer;
  border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow);overflow:hidden;
  transition:transform .12s,box-shadow .2s;animation:rise .4s both}
.tcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.tcard::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:var(--bcol,var(--line))}
.tcard[data-bioma=Forest]{--bcol:var(--foresta)} .tcard[data-bioma=River]{--bcol:var(--fiume)}
.tcard[data-bioma=City]{--bcol:var(--citta)} .tcard[data-bioma=Desert]{--bcol:var(--deserto)}
.tcard[data-bioma=Havens]{--bcol:var(--rifugi)}
.tcard .num{font-family:'Grandstander',cursive;font-weight:800;font-size:1.42rem;display:flex;align-items:center;gap:6px;margin-top:4px}
.tcard .num .met{font-size:.85rem}
.tcard .tags{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0 2px}
.tag{font-size:.62rem;background:var(--paper-2);border:1px solid var(--line);border-radius:20px;padding:2px 7px;color:var(--ink-soft);white-space:nowrap}
.tag.b{color:#fff;background:var(--bcol);border-color:transparent}
.tcard .quest{font-size:.7rem;color:var(--ink-soft);line-height:1.3;margin-top:3px}
.tcard .pts{position:absolute;right:9px;bottom:9px;font-family:'Grandstander',cursive;font-weight:800;font-size:1.38rem;
  background:var(--ink);color:#f6f1e4;min-width:34px;height:34px;border-radius:10px;display:grid;place-items:center;padding:0 6px;box-shadow:var(--shadow)}
.tcard .pts.zero{background:var(--paper-2);color:var(--ink-soft);box-shadow:none}
.tcard .edit{position:absolute;right:8px;top:9px;font-size:.62rem;color:var(--ink-soft);opacity:.6}
.subhead{font-family:'Grandstander',cursive;font-weight:700;font-size:.92rem;margin:18px 2px 2px;display:flex;align-items:center;gap:8px}
.subhead::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------- modali / form ---------- */
/* bottom, non inset:0 — la tastiera aperta copre la parte bassa della finestra
   e il foglio deve fermarsi sopra di lei (--vv-b la misura, in app.js) */
.modal{position:fixed;top:0;left:0;right:0;bottom:var(--vv-b,0px);z-index:50;display:none;align-items:flex-end;justify-content:center;
  background:rgba(30,22,10,.45);backdrop-filter:blur(3px)}
.modal.show{display:flex;animation:fade .2s both}
.sheet{background:var(--paper);width:100%;max-width:680px;overflow:auto;border-radius:22px 22px 0 0;
  max-height:88vh; max-height:calc(100dvh - 5px - env(safe-area-inset-top));   /* dvh: su iOS 88vh finiva sotto la barra */
  /* none, non contain: contain impedisce solo che lo scorrimento si propaghi
     alla pagina sotto, ma lascia il rimbalzo del foglio stesso, che tirando
     giù la griglia se la portava dietro scoprendo un vuoto in cima. */
  overscroll-behavior:none;
  /* 16px come il pulsante flottante, così i pulsanti stanno alla stessa
     altezza in ogni schermata. Sotto ci sta comunque l'ombra dell'ultimo,
     che si allunga di 12px e con overflow:auto verrebbe ritagliata. */
  padding:18px 18px calc(16px + var(--sa-b));
  box-shadow:0 -10px 40px rgba(0,0,0,.25);animation:up .3s cubic-bezier(.2,.9,.3,1) both}
@keyframes up{from{transform:translateY(40px)}to{transform:none}}
.sheet h3{font-family:'Grandstander',cursive;font-weight:700;font-size:1.15rem;margin:2px 0 4px}
/* La maniglia resta appiccicata in alto mentre il contenuto scorre: prima se ne
   andava via con la griglia e il foglio non si poteva più chiudere. Si tocca per
   chiudere, o si trascina verso il basso. La banda va a filo dei bordi del foglio
   (margini negativi) per coprire ciò che le passa sotto. */
.sheet .grab{position:sticky;top:-18px;z-index:3;margin:-18px -18px 10px;padding:14px 0 11px;
  background:var(--paper);cursor:grab;touch-action:none;-webkit-tap-highlight-color:transparent}
.sheet .grab::after{content:"";display:block;width:44px;height:5px;border-radius:5px;
  background:var(--line-strong);margin:0 auto;transition:background .15s,width .15s}
.sheet .grab:active{cursor:grabbing}
.sheet .grab:active::after{background:var(--ink-soft);width:54px}
.sheet.trascina{animation:none;transition:none}
.sheet.rientra{animation:none;transition:transform .22s cubic-bezier(.2,.9,.3,1)}
label{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-soft);margin:12px 0 6px}
input[type=text],input[type=password],input[type=search]{width:100%;padding:13px 14px;border:1px solid var(--line);
  border-radius:12px;background:var(--card);font-family:inherit;font-size:1rem;color:var(--ink)}
input:focus{outline:none;border-color:var(--deserto)}
.filezone{border:2px dashed var(--line-strong);border-radius:14px;padding:20px;text-align:center;background:#fffdf7;cursor:pointer;margin-top:6px}
.filezone .big{font-size:1.8rem;display:block;margin-bottom:6px}
.filezone input{display:none}
#preview{max-width:100%;border-radius:12px;margin-top:12px;display:none;border:1px solid var(--line)}
.hint{font-size:.78rem;color:var(--ink-soft);margin:8px 0 0;line-height:1.5}
.hint a{color:var(--deserto)}
.status{margin-top:12px;padding:11px 13px;border-radius:11px;font-size:.88rem;display:none}
.status.show{display:block}
.status.load{background:#efe7d4;color:var(--ink-soft)}
.status.err{background:#f7e2dd;color:var(--bad);white-space:pre-wrap}
.spin{display:inline-block;width:14px;height:14px;border:2px solid var(--deserto);border-top-color:transparent;border-radius:50%;animation:s .7s linear infinite;vertical-align:-2px;margin-right:7px}
@keyframes s{to{transform:rotate(360deg)}}

/* picker carte */
/* miniature grandi: senza etichette le carte si riconoscono solo dall'illustrazione
   (e sulle Regioni va letto il numero stampato sull'arte) */
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;margin-top:10px}
.pchip{border:1px solid var(--line);border-radius:10px;padding:8px 4px;text-align:center;cursor:pointer;background:var(--card);position:relative;transition:transform .1s}
.pchip:hover{transform:translateY(-2px);border-color:var(--bcol,var(--line-strong))}
.pchip::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--bcol,var(--line))}
.pchip[data-bioma=Forest]{--bcol:var(--foresta)} .pchip[data-bioma=River]{--bcol:var(--fiume)}
.pchip[data-bioma=City]{--bcol:var(--citta)} .pchip[data-bioma=Desert]{--bcol:var(--deserto)} .pchip[data-bioma=Havens]{--bcol:var(--rifugi)}
.pchip b{font-family:'Grandstander',cursive;font-weight:700;font-size:1rem;display:block}
.pchip small{font-size:.6rem;color:var(--ink-soft)}
.seg{display:flex;gap:6px;margin-top:10px}
.seg button{flex:1;padding:9px;border-radius:10px;border:1px solid var(--line);background:var(--card);font-family:inherit;font-weight:600;cursor:pointer;color:var(--ink-soft)}
.seg button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.note{font-size:.72rem;color:var(--ink-soft);text-align:center;margin:14px 0 0;line-height:1.5}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--paper);
  padding:11px 18px;border-radius:30px;font-size:.86rem;opacity:0;transition:.25s;z-index:60;pointer-events:none;box-shadow:var(--shadow)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===== carte con immagine ufficiale / foto (demo) ===== */
.tcard{padding:0;overflow:hidden}
.tc-media{position:relative;background:var(--card)}
.tcard.is-region .tc-media{aspect-ratio:1/1}
.tcard.is-sanct  .tc-media{aspect-ratio:44/68}
.tcimg{width:100%;height:100%;object-fit:cover;display:block}
.tcnoimg{width:100%;height:100%;display:grid;place-items:center;background:var(--paper-2);color:var(--ink-soft);font-size:.82rem;text-align:center;padding:8px}
.tc-media .pts{position:absolute;right:7px;bottom:7px;font-family:'Grandstander',cursive;font-weight:800;font-size:1.15rem;min-width:1.6em;text-align:center;background:var(--ink);color:var(--star);border-radius:9px;padding:1px 7px;box-shadow:var(--shadow)}
.tc-media .pts.zero{background:#ffffffd9;color:var(--ink-soft);box-shadow:none}
.tc-media .edit{position:absolute;right:6px;top:6px;font-size:.72rem;color:#fff;background:#0000006b;border-radius:50%;
  width:1.7em;height:1.7em;display:grid;place-items:center;opacity:.9}
.tc-cap{font-family:var(--num);font-weight:700;font-size:.82rem;padding:7px 9px 0;display:flex;gap:4px;align-items:center}
.tcard .quest{padding:2px 9px 10px;font-size:.7rem;color:var(--ink-soft);line-height:1.3}
/* miniature picker */
.pcimg{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:7px;margin-bottom:4px;display:block;background:var(--paper-2)}
/* Selettore: la carta e basta. Niente contenitore, niente padding bianco, niente
   barra colorata sopra; solo l'illustrazione arrotondata con un'ombra.
   I Santuari sono VERTICALI (in un riquadro quadrato si perdeva il 35% dell'altezza,
   cioè la casella del punteggio in basso), le Regioni quadrate. */
.pchip.is-sanct,.pchip.is-region{padding:0;border:none;background:none;border-radius:9px}
.pchip.is-sanct::before,.pchip.is-region::before{display:none}
.pchip.is-sanct:hover,.pchip.is-region:hover{border-color:transparent}
.pchip.is-sanct .pcimg,.pchip.is-region .pcimg{margin-bottom:0;border-radius:9px;
  box-shadow:0 3px 10px -3px rgba(40,30,15,.5)}
.pchip.is-sanct .pcimg{aspect-ratio:44/68}
.pchip.is-region .pcimg{aspect-ratio:1/1}

/* carte già in gioco (ogni carta esiste in un solo esemplare): visibili ma non selezionabili */
/* Carta già in mano a qualcuno, o quella che si sta sostituendo: spenta ma
   BEN VISIBILE. Niente filter e niente opacity sul contenitore: su iPhone un
   elemento con filtro che esce dallo schermo scorrendo non viene più ridipinto
   quando rientra, e la carta spariva lasciando un buco nella griglia. Il velo
   è un rettangolo tinta carta, la cosa più banale che un browser sappia
   disegnare, e si ridisegna sempre. */
.pchip.used{cursor:default}
.pchip.used::after{content:"";position:absolute;inset:0;border-radius:9px;
  background:rgba(246,241,228,.58);pointer-events:none}
.pchip.used:hover{transform:none;border-color:var(--line)}
.pchip.used .pcimg{box-shadow:none}
/* badge + crediti */
.badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.badge{font-size:.7rem;font-weight:700;color:#fff;background:#ffffff1f;border:1px solid #ffffff38;border-radius:999px;
  padding:3px 10px;display:inline-flex;align-items:center;gap:5px}
.credit{margin:22px 2px 10px;margin-top:auto;font-size:.7rem;color:var(--ink-soft);line-height:1.55;text-align:center;border-top:1px solid var(--line);padding-top:13px}

/* ===== layout ricostruzione (16/6 v2): Regioni 4x2, Santuari 1 riga(7), punti sotto la carta ===== */
#regGrid{grid-template-columns:repeat(4,1fr);gap:9px}
/* Santuari: stessa larghezza delle Regioni (4 colonne), 4 per riga e la riga
   incompleta centrata. Con una larghezza elastica 1-2 santuari si allargavano a
   riempire la riga e risultavano enormi rispetto alle carte sopra. */
#sanGrid{display:flex;flex-wrap:wrap;justify-content:center;gap:9px}
#sanGrid .tcard{flex:0 0 calc((100% - 27px)/4)}   /* 27px = 3 spazi da 9 */
@media(min-width:560px){ #regGrid{grid-template-columns:repeat(4,1fr)} }
/* la carta è una colonna: immagine, testo, e la pill dei punti ANCORATA IN FONDO
   (margin-top:auto). Le celle della griglia si allungano tutte alla stessa altezza,
   quindi le pill restano allineate anche se una quest occupa due righe e le altre una. */
.tcard{display:flex;flex-direction:column}
.tc-info{padding:7px 8px 9px;flex:1;display:flex;flex-direction:column;gap:3px}
.tc-cap{font-family:var(--num);font-weight:700;font-size:.8rem;padding:0;display:flex;gap:4px;align-items:center;line-height:1.15;letter-spacing:-.005em}
/* rete di sicurezza: qualsiasi parola troppo lunga va a capo invece di sforare la carta */
.tc-quest{font-size:.68rem;color:var(--ink-soft);line-height:1.25;overflow-wrap:anywhere}
/* flex-wrap = rete di sicurezza: con parole lunghe (es. "Punkte") o schermi minuscoli
   la pill va a capo invece di sbordare dalla carta. */
.tc-pts{margin-top:auto;align-self:flex-start;display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:4px;max-width:100%;background:var(--paper-2);border:1px solid var(--line);border-radius:8px;padding:1px 8px;font-size:.66rem;color:var(--ink-soft)}
.tc-pts b{font-family:var(--num);font-weight:700;font-size:1.02rem;color:var(--ink);line-height:1.3}
.tc-pts.zero{opacity:.7}
/* Regioni e Santuari hanno colonne della stessa larghezza (4 per riga): la
   didascalia scende alla stessa misura in tutte e due, non solo nelle Regioni. */
@media(max-width:520px){
  #regGrid .tc-cap, #sanGrid .tc-cap{font-size:.66rem}
  #regGrid .tc-quest, #sanGrid .tc-quest{font-size:.6rem}
}
/* schermi molto stretti (iPhone SE 1ª gen): con 4 Regioni in riga restano ~63px per cella */
@media(max-width:360px){
  #regGrid .tc-pts{font-size:.6rem;padding:1px 6px;gap:3px}
  #regGrid .tc-pts b{font-size:.95rem}
}
/* tile "aggiungi" coerente con la cella */
.tcard.add{border:1.5px dashed var(--line-strong);background:#fffdf7aa;box-shadow:none;display:grid;place-items:center;min-height:120px;cursor:pointer;color:var(--ink-soft)}
.tcard.add:hover{transform:translateY(-2px);border-color:var(--ink-soft)}

/* ---------- carte da controllare (bassa confidenza dopo lo scan) ---------- */
.tcard.warn{box-shadow:0 0 0 2px var(--warn), var(--shadow)}
.tcard .warnflag{position:absolute;left:7px;top:7px;z-index:3;width:20px;height:20px;border-radius:50%;
  background:var(--warn);color:#fff;font-size:.72rem;display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.note.warn{color:#7a4a13;background:#f7ecd2;border:1px solid #e6cf9b;border-radius:11px;
  padding:9px 12px;font-weight:600;font-size:.8rem;max-width:46ch;margin-left:auto;margin-right:auto}

/* ---------- schermata cattura fotocamera (quadrata) ---------- */
.capture{position:fixed;inset:0;z-index:80;display:none;flex-direction:column;align-items:center;
  background:radial-gradient(120% 80% at 50% -10%,var(--dusk-2),var(--dusk) 70%);
  /* l'otturatore va tenuto in basso, a portata di pollice: sotto gli lascio
     solo il margine di sistema */
  color:#f3eee2;padding:calc(env(safe-area-inset-top) + 14px) 14px calc(var(--sa-b) + 6px)}
.capture.show{display:flex;animation:fade .25s both}
/* a griglia il titolo resta centrato da solo: prima lo teneva in asse una
   copia invisibile del pulsante di chiusura, messa lì a fare da contrappeso */
.cap-top{width:100%;max-width:560px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:6px 2px 12px}
.cap-title{font-family:'Grandstander',cursive;font-weight:700;font-size:1rem;letter-spacing:.2px;text-align:center}
.cap-x .ic{width:17px;height:17px}
.cap-x{appearance:none;border:1px solid #ffffff2e;background:#ffffff14;color:#f3eee2;width:38px;height:38px;
  border-radius:50%;font-size:1rem;cursor:pointer;display:grid;place-items:center;flex:0 0 auto}
/* la larghezza prende il minore tra 92vw / 64vh / 520px e aspect-ratio:1/1 deriva
   un'altezza uguale: il riquadro è SEMPRE quadrato (mai clampato in landscape/vh corti),
   così ciò che l'utente inquadra == il ritaglio quadrato analizzato da captureSquare(). */
.cap-stage{position:relative;width:min(92vw,64vh,520px);aspect-ratio:1/1;border-radius:18px;overflow:hidden;
  background:#0c0a17;box-shadow:0 20px 50px -18px #000,inset 0 0 0 1px #ffffff1a}
#capVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0c0a17}
.cap-freeze{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;background:#0c0a17}
/* griglia guida sovrapposta */
.cap-grid{position:absolute;inset:0;pointer-events:none;z-index:2}
.cap-cell{position:absolute;border:1.6px dashed #ffffffbf;border-radius:9px;box-shadow:0 0 0 1px #00000026}
.cap-cell.san{border-color:#cdbfe6cc;background:#b9a8e10f}
.cap-cell.reg{border-color:#ffe6a8cc;background:#ffd76a0d}
.cap-cell .lab{position:absolute;left:3px;top:2px;font-size:.56rem;font-weight:700;color:#fff;opacity:.78;
  text-shadow:0 1px 2px #000;font-family:'Hanken Grotesk'}
/* l'etichetta sta SOPRA il suo gruppo: il top indica la cima dei riquadri e la sposto
   interamente al di sopra, con un po' d'aria, altrimenti si sovrappone alle carte */
.cap-band{position:absolute;left:6px;font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;
  color:#ffffffb0;font-weight:700;z-index:2;text-shadow:0 1px 3px #000;
  transform:translateY(-100%);margin-top:-5px}
.cap-busy{position:absolute;inset:0;z-index:4;display:none;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;background:#0c0a17c2;backdrop-filter:blur(2px);color:#f3eee2}
.cap-busy.show{display:flex}
.cap-busy-msg{font-size:.9rem;font-weight:600;letter-spacing:.2px}
.spin.big{width:34px;height:34px;border-width:3px;border-color:var(--star);border-top-color:transparent}
.cap-hint{width:100%;max-width:480px;text-align:center;color:#cbc3df;font-size:.82rem;line-height:1.45;margin:16px 0 0}
.cap-err{width:100%;max-width:480px;text-align:center;color:#ffd7d7;background:#ff6b8a22;border:1px solid #ff6b8a55;
  border-radius:11px;padding:9px 12px;font-size:.84rem;margin:12px 0 0;display:none}
.cap-err.show{display:block}
.cap-bar{margin-top:auto;width:100%;max-width:560px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  /* a griglia l'otturatore sta al centro da solo: prima lo teneva in asse
     un trattino invisibile messo lì a fare da contrappeso */
  
  gap:10px;padding:16px 6px 2px}
.cap-secondary{appearance:none;background:none;border:none;color:#cbc3df;font-family:'Hanken Grotesk';
  font-weight:600;font-size:.85rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px;width:96px;text-align:left;white-space:nowrap}
.cap-shutter{appearance:none;width:74px;height:74px;border-radius:50%;cursor:pointer;
  border:4px solid #ffffffe6;background:#ffffff14;padding:5px;display:grid;place-items:center;
  box-shadow:0 0 0 2px #00000033,0 8px 22px -8px #000;transition:transform .08s}
.cap-shutter span{display:block;width:100%;height:100%;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#fff,#efe7d4)}
.cap-shutter:active{transform:scale(.93)}
.cap-shutter:disabled{opacity:.45;cursor:default}

/* icone dentro le didascalie delle carte: leggermente più piccole del testo */
.tc-cap .ic{width:.95em;height:.95em;opacity:.8}

/* ---------- foglio di conferma / richiesta testo ---------- */
/* pre-line: i testi dei dialoghi possono contenere un a capo doppio per separare
   i paragrafi (le istruzioni di installazione su iPhone lo usano) */
.ask-text{font-size:.92rem;color:var(--ink-soft);line-height:1.5;margin:6px 0 0;white-space:pre-line}
.ask-actions{display:flex;gap:10px;margin-top:18px}
.ask-actions .btn{flex:1;width:auto}
/* azione distruttiva: pieno rosso, così si distingue a colpo d'occhio dall'annulla */
.btn-danger-solid{background:var(--bad);color:#fff;box-shadow:var(--shadow)}
.btn-danger-solid:hover{filter:brightness(1.08)}
/* avviso informativo: foglio centrato invece che agganciato in basso */
/* Il dialogo centrato non tocca i bordi: la distanza la tiene il contenitore,
   e il foglio dentro torna a un margine normale invece dei 22px + safe area
   pensati per chi è agganciato in basso. */
.modal.centered{align-items:center;
  padding:calc(20px + env(safe-area-inset-top)) 20px calc(16px + var(--sa-b))}
.modal.centered .sheet{max-width:420px;border-radius:20px;max-height:none;
  padding:20px 20px 22px;animation:pop .26s cubic-bezier(.2,.9,.3,1) both}
.modal.centered .grab{display:none}
@keyframes pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}

/* ---------- lista di scelta (sostituisce le tendine native) ---------- */
.opt-list{display:flex;flex-direction:column;gap:7px;margin-top:6px}
.opt{appearance:none;display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;text-align:left;cursor:pointer;font-family:inherit;font-size:1rem;color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:13px 15px;
  transition:transform .08s,border-color .15s,background .15s}
.opt:hover{border-color:var(--line-strong)}
.opt:active{transform:translateY(1px)}
.opt.on{border-color:var(--ink);background:var(--paper-2);font-weight:700}
.opt .ic{width:1.05em;height:1.05em;color:var(--ink)}

/* ---------- diagnostica dei bordi (temporanea: la accende DIAG_BORDI in app.js) ----------
   Azzurro = fascia di sistema in alto. Fuxia trasparente = fascia dichiarata in
   basso. Riga fuxia piena = fine reale della finestra: quello che si vede sotto
   è schermo del telefono, non pagina nostra. */
#diag{position:fixed;inset:0;z-index:90;pointer-events:none}
#diag i{position:fixed;left:0;right:0;display:block}
#diag .d-top{top:0;height:env(safe-area-inset-top);background:#39a0ff4d}
/* righe diagonali = fascia che l'iPhone DICHIARA ma che non serve, perché la
   tiene già lei fuori dalla finestra. Il contenuto ci passa sotto di proposito. */
#diag .d-bot{bottom:0;height:env(safe-area-inset-bottom);
  background:repeating-linear-gradient(45deg,#ff2fbf2e 0 7px,transparent 7px 14px)}
/* pieno = fascia che ci teniamo davvero dentro la pagina */
#diag .d-use{bottom:0;height:var(--sa-b);background:#ff2fbf47}
#diag .d-line{bottom:0;height:2px;background:#ff2fbf}
/* righello in cima: una tacca ogni 10 punti, numerata ogni 20. Serve a misurare
   fin dove arriva la sfumatura che iOS disegna sopra la barra di stato, invece
   di indovinare il margine. */
#diag .d-righello{top:0;height:180px;
  background:repeating-linear-gradient(to bottom, #00000026 0 1px, transparent 1px 10px)}
#diag .d-righello span{position:absolute;left:6px;font:700 9px/1 'Hanken Grotesk',sans-serif;
  color:#0009;background:#ffffffb8;padding:1px 3px;border-radius:3px}
#diag .d-num{left:auto;right:6px;top:calc(env(safe-area-inset-top) + 4px);width:auto;
  font:600 10px/1.3 'Hanken Grotesk',system-ui,sans-serif;font-style:normal;
  background:#1a1430e6;color:#fff;padding:4px 8px;border-radius:8px}

/* ---------- Santuario scartato ----------
   Resta al suo posto, spento e segnato: toglierlo dall'elenco faceva sparire una
   carta che il giocatore aveva davvero in tavola, e faceva scalare gli indici di
   quelle dopo (toccandone una se ne modificava un'altra). */
.tcard.scartato .tc-media{position:relative}
.tcard.scartato .tcimg{filter:saturate(.25) brightness(.92)}
/* Raggio solo sui due angoli in alto, gli stessi della carta: sotto
   l'illustrazione finisce netta contro il blocco del nome, e un velo arrotondato
   lì lasciava due angoli scoperti. Senza raggio del tutto invece era il ritaglio
   della carta a mozzare il bordo negli angoli alti, invece di fargli seguire la
   curva: il velo si taglia da solo, il bordo no. */
.tcard.scartato .tc-media::after{content:"";position:absolute;inset:0;
  border-radius:var(--radius-s) var(--radius-s) 0 0;
  background:rgba(192,80,58,.24);box-shadow:inset 0 0 0 2px var(--bad);pointer-events:none}
.tcard.scartato .scarto{color:var(--bad);text-transform:uppercase;letter-spacing:.08em;font-size:.62rem}
.tcard.scartato .tc-pts b{color:var(--bad)}

/* versione, in fondo alle impostazioni. Rossa se la cache del service worker
   non è allineata: vuol dire che il telefono sta servendo file vecchi. */
#versione{margin-top:4px;opacity:.6;letter-spacing:.08em}
#versione.disallineata{color:var(--bad);opacity:1;font-weight:700}