@font-face{font-family:"Alfa Slab One";src:url(font/alfa-slab-one-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Archivo Narrow";src:url(font/archivo-narrow-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Archivo Narrow";src:url(font/archivo-narrow-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Archivo Narrow";src:url(font/archivo-narrow-700.woff2) format("woff2");font-weight:700;font-display:swap}
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}
/* Notte di sagra: scena a tutta altezza, comandi grandi in basso per il pollice */
:root{--notte:#120d0c;--carbone:#241b18;--brace:#ff7a2b;--oro:#f3c35c;--carta:#f1e5cf;--inchiostro:#2b1d16;--testo:#efe3d3;--tenue:#a8968a;--rosso:#e0523f;--verde:#8fbf6a;--f-titolo:"Alfa Slab One","Rockwell",Georgia,serif;--f-testo:"Archivo Narrow","Arial Narrow",system-ui,sans-serif;color-scheme:dark}
[hidden]{display:none !important}
html,body{height:100%}
body{background:var(--notte);color:var(--testo);font-family:var(--f-testo);font-size:16px;margin:0;padding-inline:16px;padding-block:0;overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
.app{height:100%;max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:10px;padding-block:10px 12px;box-sizing:border-box}
.barra{display:flex;align-items:center;justify-content:space-between;gap:10px}
.marchio{font-family:var(--f-titolo);font-size:1.35rem;color:var(--brace);text-shadow:0 0 16px rgba(255,122,43,.35)}
.hud{display:flex;gap:14px;align-items:center}
.stat{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.stat b{font-family:var(--f-titolo);font-weight:400;font-size:1.15rem;line-height:1;font-variant-numeric:tabular-nums}
.stat span{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--tenue)}
.vite{display:flex;gap:3px;height:20px;align-items:center}
.stelle{font-size:.8rem !important;letter-spacing:.08em !important;color:var(--tenue);font-style:normal}
.stat .riga{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.botConto{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:.86rem;color:var(--tenue);text-align:left}
.botConto b{color:var(--oro);font-size:1rem}
.botConto span{white-space:nowrap}
.stelle b{font:inherit;color:var(--oro)}
#ora.tardi{color:var(--rosso)}
.obiettivo{font-size:.85rem;color:var(--testo);background:#2e2421;border:1px solid #4a3a34;border-radius:10px;padding:7px 12px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.obiettivo span{white-space:nowrap}
.obiettivo i{font-style:normal;color:var(--oro)}
.stelleFine{font-size:2.4rem;letter-spacing:.12em;color:#4a3a34;line-height:1}
.stelleFine b{color:var(--oro);text-shadow:0 0 14px rgba(243,195,92,.6)}
.testa{display:flex;align-items:center;gap:8px}
/* annunci grandi al centro: aumento di difficoltà e ultimi 10 secondi */
.conto10{position:absolute;left:0;right:0;top:34%;text-align:center;pointer-events:none;font-family:var(--f-titolo);color:#ff3b2f;font-size:4.2rem;line-height:1;text-shadow:0 0 18px rgba(255,59,47,.75),0 4px 0 #3a0a06,0 0 2px #000;opacity:0;transform:scale(.6)}
.conto10.su{animation:batti .9s ease-out forwards}
.conto10.liv{font-size:1.7rem;color:#ffb347;text-shadow:0 0 16px rgba(255,140,40,.7),0 3px 0 #3a1a06;padding:0 16px}
.conto10.liv.su{animation:livello 2.6s ease-out forwards}
.conto10 .box{display:inline-block;background:rgba(10,6,5,.72);border:2px solid currentColor;border-radius:14px;padding:8px 18px 10px}
.conto10 small{display:block;font-family:var(--f-testo);font-size:1rem;font-weight:700;color:#fff;text-shadow:0 2px 6px #000;margin-top:6px}
@keyframes batti{0%{opacity:0;transform:scale(1.8)}18%{opacity:1;transform:scale(1)}75%{opacity:1;transform:scale(1)}100%{opacity:.15;transform:scale(.92)}}
@keyframes livello{0%{opacity:0;transform:scale(.6)}12%{opacity:1;transform:scale(1.08)}20%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  .conto10.su,.conto10.liv.su{animation:none;opacity:1;transform:none}
}
.scena.allarme{box-shadow:inset 0 0 0 3px rgba(255,59,47,.85),inset 0 0 40px rgba(255,59,47,.35)}
.social{display:flex;flex-direction:column;align-items:center;gap:6px}
.sfidaBox{width:100%;max-width:370px;background:#3a1408;border:2px solid var(--brace);border-radius:12px;padding:8px 12px;font-size:.9rem;line-height:1.35;text-align:center}
.sfidaBox b{color:var(--oro);font-family:var(--f-titolo);font-weight:400}
.esitoSfida{max-width:340px;border-radius:12px;padding:8px 14px;font-weight:700;font-size:1rem;text-align:center;line-height:1.3}
.esitoSfida.vinta{background:#1f4a22;border:2px solid #8fbf6a;color:#eaf6df}
.esitoSfida.persa{background:#4a1a14;border:2px solid var(--rosso);color:#fde6e1}
#nomeSfida{font:600 16px var(--f-testo);background:#1c1513;color:var(--testo);border:1px solid #4a3a34;border-radius:8px;padding:7px 10px;width:220px;text-align:center}
#nomeSfida:focus-visible{outline:2px solid var(--oro);outline-offset:1px}
.social>span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tenue)}
.social>div{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.social small{font-size:.78rem;color:var(--oro);min-height:1em;max-width:32ch}
.sb{display:flex;align-items:center;gap:8px;background:#2e2421;border:1px solid #4a3a34;border-radius:999px;padding:8px 18px 8px 12px;font:700 1rem var(--f-testo);color:var(--testo);text-decoration:none;cursor:pointer}
.sb img{width:28px;height:28px;object-fit:contain}
.sb:focus-visible{outline:2px solid var(--oro);outline-offset:2px}
.azioniFine{display:flex;gap:10px;align-items:stretch;justify-content:center}
.azioniFine .btn2{text-decoration:none;display:inline-flex;align-items:center;padding:0 20px;font-size:1rem}
/* Abruzzese Medio: striscia sottile in cima alla scena (sopra le teste, copre solo il cielo) */
.annuncio{position:absolute;top:4px !important;left:4px;right:4px;max-width:none;display:flex;align-items:center;gap:6px;pointer-events:none;transform:translateY(-130%);opacity:0;transition:transform .35s cubic-bezier(.2,1.3,.4,1),opacity .25s;z-index:3}
.annuncio.su{transform:none;opacity:1}
.annuncio img{height:40px;width:auto;image-rendering:pixelated;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));flex:none;align-self:flex-end}
.annuncio .nuvola{margin-bottom:0;font-size:.8rem;line-height:1.2;padding:4px 9px;border:2px solid var(--brace);box-shadow:0 4px 12px rgba(0,0,0,.45);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.annuncio .nuvola b{display:inline;font-size:.66rem;margin-right:4px}
.annuncio .nuvola::before{bottom:8px}
.annuncio.evento .nuvola{background:#fff3c4}
@media (prefers-reduced-motion:reduce){
  .annuncio{transition:opacity .2s}
}
.marchio{white-space:nowrap;margin:0;line-height:0}
.marchio img{height:46px;width:auto;display:block}
.firma{display:flex;flex-direction:column;align-items:center;gap:4px}
.firma small,.credito{font-size:.75rem;color:var(--tenue);letter-spacing:.04em}
.linkPrivacy{background:none;border:0;padding:0;font:inherit;color:var(--tenue);text-decoration:underline;cursor:pointer}
.linkPrivacy:focus-visible{outline:2px solid var(--oro);outline-offset:2px}
#privacy{z-index:5;background:#120d0c;justify-content:flex-start;padding-top:22px}
.privBox{max-width:36ch;text-align:left;display:flex;flex-direction:column;gap:10px;font-size:.9rem;line-height:1.45}
.privBox h2{text-align:center}
.privBox .btn{align-self:center;margin-top:6px}
.autore{color:var(--testo);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.autore:focus-visible{outline:2px solid var(--oro);outline-offset:2px}
.firma b,.credito b{color:var(--testo);font-weight:600}
.logoScelta{height:56px;width:auto;max-width:90%}
@media (max-width:380px){
  .marchio img{height:38px}
  .hud{gap:9px}
  .audio{width:30px;height:30px}
  .stat b{font-size:1rem}
}
.audio{background:#2e2421;border:1px solid #4a3a34;border-radius:8px;width:34px;height:34px;font-size:1rem;cursor:pointer;padding:0;line-height:1}
.audio:focus-visible{outline:2px solid var(--oro);outline-offset:2px}
.vite svg{width:20px;height:20px;transition:opacity .3s,transform .3s}
.vite svg.persa{opacity:.18;transform:scale(.8)}
.scena{position:relative;flex:1;min-height:0;border-radius:8px;overflow:hidden;background:var(--carbone);touch-action:none}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
canvas:focus-visible{outline:3px solid var(--oro);outline-offset:-3px}
.biglietto{position:absolute;left:10px;right:10px;color:var(--inchiostro);display:grid;pointer-events:none}
.biglietto{border-radius:10px;top:auto;bottom:auto;background:rgba(241,229,207,.97);box-shadow:0 4px 14px rgba(0,0,0,.55);border:2px solid var(--oro)}
/* ordine a colpo d'occhio: solo icone e numeri */
.biglietto{align-items:center}
.biglietto .cliente{line-height:1.05}
.voce{display:flex;align-items:center;gap:3px}
.voce img{height:34px;width:auto;image-rendering:pixelated}
.voce img.sp{height:40px;transform:rotate(18deg)}
.voce b{font-family:var(--f-titolo);font-weight:400;font-size:1.7rem !important;line-height:1;color:var(--inchiostro);min-width:1ch;text-align:center}
.voce.ok b{color:#3f8a4e}
.voce.ok img{opacity:.45}
.biglietto .conto b{font-size:1.35rem}
.cliente{font-family:var(--f-titolo);font-size:1rem;line-height:1.1;min-width:0}
.conto{grid-row:1/3;grid-column:2;display:flex;flex-direction:column;align-items:flex-end;justify-content:center}
.conto b{font-family:var(--f-titolo);font-weight:400;font-size:1.5rem;line-height:1;font-variant-numeric:tabular-nums}
.conto span{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.pazienza{grid-column:1/-1;height:5px;background:rgba(43,29,22,.15);border-radius:3px;overflow:hidden;margin-top:5px}
.pazienza i{display:block;height:100%;width:100%;background:var(--inchiostro);transform-origin:left}
.pazienza.pulsa{animation:bassa .8s ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){
  .pazienza.pulsa{animation:none}
}
.avviso{display:none !important;position:absolute;left:50%;transform:translateX(-50%);top:10px;background:rgba(18,13,12,.86);border:1px solid var(--brace);color:var(--testo);padding:6px 12px;border-radius:999px;font-size:.85rem;white-space:nowrap;animation:pulsa 1.2s ease-in-out infinite;pointer-events:none}
@keyframes pulsa{50%{border-color:rgba(255,122,43,.25)}}
/* comandi: brace in una riga sottile, i quattro tasti tutti sulla stessa linea */
.comandi{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;align-items:stretch}
.comandi .termo{grid-column:1/-1;flex-direction:row;align-items:center;gap:10px}
.termo .riga{flex:none;gap:6px}
.termo .barretta{flex:1}
.termo b{flex:none;width:9.5em;text-align:right}
.comandi .tasto{min-height:84px;padding:7px 3px 8px;gap:2px;text-align:center;font-size:.88rem;line-height:1.1}
.comandi .tasto small{font-size:.76rem;white-space:normal;line-height:1.1;max-width:100%}
.tasto .vis{height:38px;display:flex;align-items:center;justify-content:center}
.bevanda .tx{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;max-width:100%}
.tasto.pronto{border-color:var(--oro);box-shadow:inset 0 0 0 1px var(--oro)}
.tasto.pronto small{color:var(--oro)}
.termo{display:flex;flex-direction:column;justify-content:center;gap:6px;min-width:0}
.termo .riga{display:flex;justify-content:space-between;letter-spacing:.12em;text-transform:uppercase;color:var(--tenue)}
.termo .barretta{height:12px;border-radius:6px;background:#2c2220;overflow:hidden;position:relative}
.termo .barretta i{position:absolute;inset:0;transform-origin:left;background:linear-gradient(90deg,#6b2a12,#ff7a2b 60%,#ffd27a)}
.termo .barretta::after{content:"";position:absolute;top:0;bottom:0;left:76.9%;width:2px;background:rgba(239,227,211,.5)}
.termo b{font-size:.92rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tasto{font-family:var(--f-testo);font-weight:700;font-size:.95rem;color:var(--testo);background:#2e2421;border:1px solid #4a3a34;border-radius:8px;padding:8px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;min-height:64px;touch-action:none;-webkit-touch-callout:none;position:relative;overflow:hidden}
.tasto svg{width:28px;height:28px}
.tasto small{font-weight:400;font-size:.7rem;color:var(--tenue)}
.tasto:active,.tasto.premuto{background:#4a2e20;border-color:var(--brace)}
.tasto:disabled{opacity:.5}
.tasto:focus-visible{outline:3px solid var(--oro);outline-offset:2px}
.tasto .attesa{position:absolute;left:0;bottom:0;height:3px;background:var(--brace);width:0}
.scelta .presenta img{height:70px}
.velo{position:absolute;inset:0;background:rgba(18,13,12,.9);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:18px;overflow:auto}
.velo h2{font-family:var(--f-titolo);font-weight:400;font-size:1.5rem;margin:0;color:var(--brace);text-wrap:balance}
.velo p{margin:0;max-width:34ch;line-height:1.45}
.velo ol{margin:0;padding-left:1.2em;text-align:left;max-width:38ch;line-height:1.45;font-size:.93rem;display:flex;flex-direction:column;gap:4px}
.btn{font-family:var(--f-titolo);font-size:1.05rem;background:var(--brace);color:#2a1206;border:0;border-radius:6px;padding:12px 24px;cursor:pointer}
.btn:focus-visible{outline:3px solid var(--oro);outline-offset:3px}
.scelta .presenta img{height:70px}
.scelta .nuvola{font-size:.85rem;margin-bottom:10px}
.scelta h2{font-size:1.25rem}
.scelta{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:370px}
.gNav{display:flex;gap:8px;align-items:center;width:100%}
.gNav .btn{margin-left:auto;padding:10px 20px}
.btn2{font-family:var(--f-testo);font-weight:700;font-size:.95rem;background:#2e2421;color:var(--testo);border:1px solid #4a3a34;border-radius:6px;padding:9px 14px;cursor:pointer}
.btn2:disabled{opacity:.35;cursor:default}
.link{font-family:var(--f-testo);font-size:.9rem;background:none;border:0;color:var(--tenue);text-decoration:underline;cursor:pointer;padding:8px 4px}
.btn2:focus-visible,.link:focus-visible{outline:2px solid var(--oro);outline-offset:2px}
/* scelta del posto: card scorrevoli con l'immagine del luogo */
.carte{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;width:100%;padding:4px 2px 10px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.carta{flex:0 0 66%;max-width:230px;scroll-snap-align:center;background:#1c1513;border:2px solid #4a3a34;border-radius:12px;overflow:hidden;text-align:left;padding:0;color:var(--testo);font-family:var(--f-testo);display:flex;flex-direction:column}
.carta img{width:100%;aspect-ratio:2/1;object-fit:cover;image-rendering:pixelated;display:block}
.carta .ct{display:flex;flex-direction:column}
.carta b{font-family:var(--f-titolo);font-weight:400;font-size:1rem;color:var(--testo)}
.carta[aria-checked="true"]{border-color:var(--brace);box-shadow:0 0 0 2px rgba(255,122,43,.35),0 6px 18px rgba(0,0,0,.5)}
.carta[aria-checked="true"] b{color:var(--brace)}
.carta:focus-visible{outline:3px solid var(--oro);outline-offset:2px}
.carta .fig{position:relative;display:block}
.carta .liv{position:absolute;left:6px;top:6px;background:rgba(18,13,12,.85);border:1px solid var(--oro);color:var(--oro);border-radius:999px;padding:1px 8px;font:700 .72rem var(--f-testo);letter-spacing:.03em}
.carta.chiusa{cursor:not-allowed;border-style:dashed}
.carta.chiusa img{filter:brightness(.42) saturate(.45)}
.carta.chiusa .luc{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:2.4rem;text-shadow:0 2px 6px #000}
.carta.chiusa .ct{opacity:.62}
.carta.scossa{animation:scossa .35s}
@keyframes scossa{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.modi{display:flex;width:100%;max-width:370px;background:#1c1513;border:1px solid #4a3a34;border-radius:999px;padding:3px;gap:3px}
.modi button{flex:1;border:0;border-radius:999px;background:transparent;color:var(--tenue);font:700 .9rem var(--f-testo);padding:8px 6px;cursor:pointer}
.modi button[aria-selected="true"]{background:var(--brace);color:#1a0d06}
.modi button:focus-visible{outline:3px solid var(--oro);outline-offset:2px}
.obiettivo .obNota{flex-basis:100%;text-align:center;font-size:.78rem;color:var(--tenue);white-space:normal;line-height:1.3}
.obiettivo .obTit{white-space:normal}
.obiettivo .obTit{flex-basis:100%;text-align:center;color:var(--oro);font-family:var(--f-titolo)}
.obiettivo .fatto{color:#8fbf6a}
.obGioco{position:absolute;right:8px;top:76px;display:flex;align-items:center;gap:7px;background:rgba(18,13,12,.82);border:1px solid #4a3a34;border-radius:999px;padding:3px 10px;font:700 .74rem var(--f-testo);color:var(--testo);pointer-events:none;z-index:2;white-space:nowrap}
.obGioco .ok{color:#8fbf6a}
.obGioco .ko{color:#e0523f;text-decoration:line-through}
.obGioco.superato{border-color:var(--oro);background:rgba(58,36,8,.92);color:var(--oro)}
.esitoLiv{width:100%;max-width:370px;text-align:center;border-radius:12px;padding:8px 12px;font-size:.9rem;line-height:1.4;background:#2e2421;border:1px solid #4a3a34}
.esitoLiv.ok{background:#3a2a08;border:2px solid var(--oro)}
.botLista .mig small i{font-style:normal;color:var(--oro);letter-spacing:.1em}
.risultati{display:grid;grid-template-columns:repeat(3,auto);gap:4px 20px}
.risultati b{font-family:var(--f-titolo);font-weight:400;font-size:1.4rem;display:block;font-variant-numeric:tabular-nums}
.risultati{align-items:end}
.risultati .grande b{font-size:2.2rem;color:var(--oro)}
.recordFine{grid-column:1/-1;font-size:.78rem;color:var(--tenue)}
.risultati span{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tenue)}
.tasto img.ico{height:36px;width:auto;image-rendering:pixelated;pointer-events:none}
#btnSoffia img.ico{height:auto;width:56px;max-width:90%}
.bic{position:relative;height:38px;width:22px;flex:none}
.bic img{position:absolute;left:50%;bottom:0;height:100%;transform:translateX(-50%);image-rendering:pixelated;pointer-events:none}
.bic .pieno{clip-path:inset(100% 0 0 0)}
.bic .fascia{display:none}
.presenta{display:flex;align-items:flex-end;gap:8px;max-width:360px;width:100%}
.presenta img{height:96px;width:auto;flex:none;image-rendering:pixelated;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}
.nuvola{position:relative;background:var(--carta);color:var(--inchiostro);border-radius:12px;padding:8px 11px;font-size:.9rem;line-height:1.3;text-align:left;margin-bottom:22px;flex:1;min-width:0}
.nuvola::before{content:"";position:absolute;left:-6px;bottom:12px;width:12px;height:12px;background:var(--carta);transform:rotate(45deg)}
.nuvola b{display:block;font-family:var(--f-titolo);font-weight:400;font-size:.72rem;letter-spacing:.06em;color:#8a4a20;margin-bottom:2px}
@media (max-height:700px){
  .comandi .tasto{min-height:68px}
  .tasto .vis{height:28px}
  .bic{height:28px;width:16px}
  .tasto img.ico{height:26px}
  .presenta img{height:76px}
}
@media (max-height:620px){
  .biglietto{padding:7px 10px 8px}
  .fila{display:none}
  .conto10{top:12%}
  .conto10.liv{font-size:1.25rem}
  .conto10 small{font-size:.8rem}
  .conto10 .box{padding:5px 10px 6px}
  .annuncio .nuvola{font-size:.74rem}
  .annuncio img{height:34px}
}
/* ordine: chi è, cosa manca, quanta pazienza */
.biglietto{gap:5px}
.bTesta{display:flex;align-items:baseline;gap:6px;min-width:0}
.bEt,.bPaz>span{font:700 .7rem var(--f-testo);letter-spacing:.14em;text-transform:uppercase;color:#8a4a20;flex:none}
.biglietto .cliente{grid-row:auto;grid-column:auto;max-width:none;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.biglietto .conto{display:flex;flex-direction:row;align-items:center}
.voce .vt{display:flex;flex-direction:column;align-items:flex-start;line-height:1}
.voce .vt small{font:700 .66rem var(--f-testo);letter-spacing:.06em;text-transform:uppercase;color:#6a5040;margin-top:2px;white-space:nowrap}
.voce.ok .vt small{color:#3f8a4e}
.bPaz{display:flex;align-items:center;gap:8px}
.bPaz .pazienza{flex:1;margin-top:0;height:7px}
/* brace più leggibile; quando cala diventa rossa e lampeggia */
.termo .riga{font-size:.78rem !important;font-weight:700}
#braceNum{color:var(--testo);font-size:.95rem}
.termo.bassa .barretta i{background:linear-gradient(90deg,#7a0f08,#e0523f)}
.termo.bassa .barretta{animation:bassa .8s ease-in-out infinite alternate}
.termo.bassa b,.termo.bassa #braceNum{color:#ff6a55}
@keyframes bassa{to{box-shadow:0 0 0 3px rgba(224,82,63,.55)}}
.termo.oro .barretta i{background:linear-gradient(90deg,#9a7210,#f3c35c 55%,#fff3b8)}
.termo.oro .barretta{box-shadow:0 0 12px rgba(243,195,92,.75);animation:none}
.termo.oro b,.termo.oro #braceNum{color:#ffd76a !important}
#carbAttesa{display:none}
/* scelta del posto: card con nome e Accendi, la "i" apre descrizione e obiettivi */
.carta{cursor:pointer}
.carta .ct{padding:8px 10px 10px !important;gap:7px !important;align-items:stretch}
.carta .ct b{font-size:1.05rem;text-align:center}
.carta .accendi{width:100%;padding:9px 10px;font-size:1rem}
.carta .chiusoTx{font:700 .78rem var(--f-testo);color:var(--tenue);text-align:center;padding:9px 0}
.carta .info{position:absolute;right:7px;top:7px;width:30px;height:30px;border-radius:50%;border:2px solid var(--oro);background:rgba(18,13,12,.85);color:var(--oro);font:italic 700 1rem/1 Georgia,serif;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;z-index:2}
.carta .info:focus-visible,.carta .accendi:focus-visible{outline:3px solid var(--oro);outline-offset:2px}
#infoLuogo{z-index:7}
#bottega .mig{position:relative}
#bottega .mig .info{position:absolute;right:5px;top:5px;width:24px;height:24px;border-radius:50%;border:2px solid var(--oro);background:rgba(18,13,12,.85);color:var(--oro);font:italic 700 .85rem/1 Georgia,serif;display:flex;align-items:center;justify-content:center;padding:0;min-width:0;cursor:pointer;margin:0}
#bottega .mig .info:focus-visible{outline:2px solid var(--oro);outline-offset:2px}
.infoMig{display:flex;align-items:center;gap:12px}
.infoMig img{height:52px;max-width:72px;object-fit:contain;image-rendering:pixelated}
.infoMig span{font-size:2.4rem}
.infoOb .prz{margin-left:auto;color:var(--oro);font-weight:700;white-space:nowrap}
.infoBox{width:100%;max-width:380px;background:#2e2421;border:2px solid var(--oro);border-radius:16px;padding:16px 16px 14px;display:flex;flex-direction:column;gap:10px;text-align:left;margin-block:auto}
.infoBox h2{font-size:1.3rem;margin:0}
.infoBox h3{font:700 .72rem var(--f-testo);letter-spacing:.14em;text-transform:uppercase;color:var(--tenue);margin:4px 0 0}
.infoBox p{margin:0;font-size:.9rem;line-height:1.35;color:var(--testo)}
.infoBox .nota{font-size:.8rem;color:var(--tenue)}
.infoBox .rec{color:var(--oro);font-size:.85rem}
.infoLiv{font:700 .8rem var(--f-testo);color:var(--oro)}
.infoOb{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.infoOb li{font-size:.92rem;display:flex;gap:8px;align-items:center}
.infoOb li i{font-style:normal;color:var(--oro);min-width:1.6em}
.infoOb li.fatto{color:#8fbf6a}
/* bottega: card su 3 colonne, tutto visibile senza scorrere */
#bottega{padding:10px}
#bottega .botBox{max-width:520px;gap:7px}
#bottega .botNota{font-size:.72rem}
#bottega .botLista{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
#bottega .mig{flex-direction:column;align-items:stretch;gap:3px;padding:7px 6px 6px;text-align:center;min-width:0}
#bottega .mig .mi{width:auto;height:46px;font-size:2rem}
#bottega .mig .mi img{max-width:100%;max-height:46px}
#bottega .mig .mt{gap:2px;align-items:center}
#bottega .mig .mt b{font-size:.76rem;line-height:1.1;min-height:2.2em;display:flex;align-items:center;justify-content:center}
#bottega .mig .mt i.pal{font-style:normal;color:var(--oro);letter-spacing:.12em;font-size:.7rem;line-height:1}
#bottega .mig .mt small{font-size:.72rem;line-height:1.2;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;color:var(--oro)}
#bottega .mig button{min-width:0;width:100%;padding:7px 4px;font-size:.8rem;margin-top:auto}
#bottega #chiudiBottega{margin-top:2px}
@media (max-height:900px){
  #bottega .mig .mi{height:36px}
  #bottega .mig .mi img{max-height:36px}
  #bottega .botNota{display:none}
}
@media (max-height:700px){
  #bottega .mig .mi{height:30px}
  #bottega .mig .mi img{max-height:30px}
  #bottega .mig .mt small{font-size:.64rem}
  #bottega .mig .mt b{font-size:.7rem}
  #bottega .botTesta h2{font-size:1.05rem}
  #bottega .mig button{padding:5px 4px}
}
/* frase del cliente dentro l'ordine; sotto, aiuti e obiettivi */
.bFrase{font:italic 600 .8rem/1.25 var(--f-testo);color:#3a2618;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bFrase:empty{display:none}
.bInfo{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
/* ordine: in alto «Ordine di» + nome a sinistra e cosa vuole a destra; sotto frase, pazienza, aiuti e obiettivi */
.bInfo:not(:has(:not([hidden]))){display:none}
.bInfo .potere,.bInfo .obGioco{position:static;right:auto;top:auto;font-size:.76rem;padding:2px 8px;box-shadow:none;gap:5px}
@media (max-height:720px){
  .bFrase{font-size:.76rem;-webkit-line-clamp:1}
  .bInfo .potere,.bInfo .obGioco{font-size:.72rem;padding:2px 6px}
  .biglietto{gap:3px}
}
.bInfo .potere[hidden],.bInfo .obGioco[hidden]{display:none}
.bInfo .potere.attivo{font-size:.76rem}
.sr-only{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* barra della brace: verticale, a sinistra sopra la scena */
/* aiuti: contatore dei perfetti e potenziamento attivo */
.potere{position:absolute;right:8px;top:44px;display:flex;align-items:center;gap:6px;background:rgba(18,13,12,.82);border:1px solid #4a3a34;border-radius:999px;padding:4px 10px 4px 7px;font:700 .8rem var(--f-testo);color:var(--testo);pointer-events:none;z-index:2}
.potere .pIco{font-size:1rem;line-height:1}
.potere .pBar{display:none;width:54px;height:6px;border-radius:3px;background:rgba(255,255,255,.18);overflow:hidden}
.potere .pBar i{display:block;height:100%;background:var(--oro)}
.potere.attivo{border:2px solid var(--oro);background:rgba(58,36,8,.92);box-shadow:0 0 14px rgba(243,195,92,.55);font-size:.86rem}
.potere.attivo .pBar{display:block}
@media (prefers-reduced-motion:reduce){
  .termo.bassa .barretta{animation:none}
}
#bruc{font-size:1rem}
#bruc.pochi{color:#ff6a55}
/* bottega */
#bottega{justify-content:flex-start;z-index:6;background:rgba(18,13,12,.97)}
.botBox{width:100%;max-width:400px;display:flex;flex-direction:column;gap:8px;margin-block:auto}
.botTesta{display:flex;justify-content:space-between;align-items:center;gap:8px}
.botTesta h2{font-size:1.25rem}
.cassa{font:700 1.05rem var(--f-testo);color:var(--oro);background:#2e2421;border:1px solid #4a3a34;border-radius:999px;padding:4px 12px;white-space:nowrap}
.botNota{color:var(--tenue);font-size:.8rem;text-align:left}
.botLista{display:flex;flex-direction:column;gap:6px}
.mig{display:flex;gap:10px;align-items:center;background:#2e2421;border:1px solid #4a3a34;border-radius:12px;padding:8px 10px;text-align:left}
.mig.ok{border-color:#3f8a4e;background:#1f2a1e}
.mig .mi{font-size:1.6rem;line-height:1;flex:none;width:46px;height:40px;display:flex;align-items:center;justify-content:center}
.mig .mi img{max-width:46px;max-height:40px;image-rendering:pixelated}
.mig .mt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.mig .mt b{font-size:.95rem}
.mig .mt small{font-size:.78rem;color:var(--tenue);line-height:1.25}
.mig button{flex:none;font:700 .85rem var(--f-testo);border:0;border-radius:8px;padding:8px 10px;cursor:pointer;background:var(--brace);color:#2a1206;min-width:74px}
.mig button:disabled{background:#4a3a34;color:#a8968a;cursor:default}
.mig.ok button{background:transparent;color:#8fbf6a}
.mig button:focus-visible,#chiudiBottega:focus-visible{outline:2px solid var(--oro);outline-offset:2px}
#btnBottega{font-size:.95rem;width:auto;min-width:40px;height:38px;padding:0 5px;white-space:nowrap;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;line-height:1}
#btnBottega small{font:700 .6rem var(--f-testo);color:var(--oro);line-height:1;margin-top:1px}
@media (max-width:360px){
  .hud{gap:5px}
  .stat b{font-size:.95rem}
  .stat span{font-size:.64rem;letter-spacing:.02em}
  .stelle{letter-spacing:.02em !important}
  .comandi .tasto small{font-size:.68rem}
  .vite svg{width:16px;height:16px}
  .vite{gap:2px}
  .testa{gap:5px}
  .audio{width:30px;height:30px}
}
/* schermata finale: se è più alta della scena si scorre dall'inizio (col centramento la parte sopra restava tagliata) */
#fine{justify-content:flex-start}
#fine>*{flex:none}
#fine>.presenta{margin-top:auto}
#fine>.credito{margin-bottom:auto}
/* pagina di benvenuto */
#inizio{justify-content:flex-start}
#inizio>.benvenuto,#inizio>.scelta,#inizio>.guida{margin-block:auto}
@media (max-height:900px){
  .benvenuto .logoScelta{display:none}
  .benvenuto .presenta img{height:56px !important}
  .benvenuto{gap:6px !important}
  .benvenuto .nuvola{margin-bottom:4px !important}
  .obiettivi li{padding:5px 10px !important}
  .obiettivi{gap:5px !important}
}
@media (max-height:720px){
  .benvenuto .logoScelta{display:none}
  .benvenuto .presenta img{height:58px}
  .benvenuto{gap:7px}
  .obiettivi li{padding:5px 9px;font-size:.84rem}
}
.benvenuto{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:370px}
.benvenuto .presenta img{height:80px}
.benvenuto .nuvola{margin-bottom:10px}
#bProva{position:sticky;bottom:0;box-shadow:0 0 0 6px var(--notte),0 -8px 18px rgba(18,13,12,.9)}
.obiettivi{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;text-align:left;width:100%}
.obiettivi li{display:flex;gap:10px;align-items:flex-start;background:#2e2421;border:1px solid #4a3a34;border-radius:10px;padding:6px 10px;font-size:.88rem;line-height:1.3}
.obiettivi i{font-style:normal;font-size:1.25rem;line-height:1}
.obiettivi b{color:var(--oro)}
/* istruzioni guidate: si illumina una parte alla volta */
.tutor{position:fixed;inset:0;z-index:20;pointer-events:none}
.tutor.pieno{background:rgba(8,5,4,.7)}
.tBuco{position:fixed;border-radius:14px;box-shadow:0 0 0 9999px rgba(8,5,4,.66);outline:3px solid var(--oro);outline-offset:2px;animation:tPulsa 1.1s ease-in-out infinite}
@keyframes tPulsa{50%{outline-color:rgba(243,195,92,.3)}}
.tCard{position:fixed;left:12px;top:30%;width:320px;background:var(--carta);color:var(--inchiostro);border:3px solid var(--brace);border-radius:16px;padding:10px 13px 8px;pointer-events:auto;box-shadow:0 12px 34px rgba(0,0,0,.65);box-sizing:border-box;transition:left .25s,top .25s}
.tBarra{height:4px;border-radius:2px;background:rgba(43,29,22,.15);overflow:hidden;margin-bottom:6px}
.tBarra i{display:block;height:100%;background:var(--brace);transition:width .3s}
.tTitolo{font-family:var(--f-titolo);font-weight:400;font-size:1.2rem;line-height:1.15;color:#8a3a14;margin:0 0 6px}
.tVis{flex:none;display:flex;gap:3px;align-items:center}
.tVis:empty{display:none}
.tVis img{image-rendering:pixelated}
.tAzione{margin-top:9px;background:var(--brace);color:#2a1206;font:700 1.02rem var(--f-testo);border-radius:10px;padding:8px 11px;line-height:1.25;animation:tAz .9s ease-in-out infinite alternate}
.tAzione:empty{display:none}
.tCard.mini>*:not(.tAzione){display:none}
.tCard.mini{padding:6px 8px}
.tCard.mini .tAzione{margin-top:0}
.tAzione.attesa{background:#e6d6bb;color:#6a5040;animation:none;font-weight:600}
.tAzione.ok{background:#3f8a4e;color:#fff;animation:none;font-size:1.15rem;text-align:center}
@keyframes tAz{to{box-shadow:0 0 0 4px rgba(255,122,43,.35)}}
.tDito{position:fixed;left:0;top:0;font-size:36px;line-height:1;pointer-events:none;z-index:21;filter:drop-shadow(0 3px 4px rgba(0,0,0,.7));animation:tDito .55s ease-in-out infinite alternate}
@keyframes tDito{to{transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){
  .tAzione,.tDito{animation:none}
}
.tTesta{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:4px 8px;margin-bottom:6px}
.tBadge{white-space:nowrap;background:var(--brace);color:#2a1206;font:700 .68rem var(--f-testo);letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px}
.tNum{white-space:nowrap;font:700 .78rem var(--f-testo);color:#8a4a20}
.tCorpo{display:flex;gap:10px;align-items:center}
.tCorpo p{margin:0;font-size:.97rem;line-height:1.38}
.tCorpo p b{color:#b5401c}
.tNav{display:flex;justify-content:space-between;align-items:center;margin-top:6px;gap:8px}
.tNav .link{color:#6a5040;padding:6px 0}
.tNav .btn{padding:8px 18px}
@media (prefers-reduced-motion:reduce){
  .tBuco{animation:none}
}
/* ordine compatto: in alto la brace in orizzontale per tutta la larghezza, poi chi ordina e cosa vuole, frase, pazienza, aiuti */
.biglietto{grid-template-columns:auto minmax(0,1fr) !important;column-gap:10px !important;row-gap:3px !important;padding:5px 10px 6px !important}
.biglietto>.termo{grid-column:1/-1;grid-row:1;display:flex;flex-direction:row;align-items:center;gap:6px;position:static;width:auto;padding:0;background:none;border:0;box-shadow:none;min-width:0}
.biglietto>.termo[hidden]{display:none}
.biglietto>.termo .tTit{font:700 .68rem var(--f-testo);letter-spacing:.12em;text-transform:uppercase;color:#8a4a20;flex:none}
.biglietto>.termo .tTit::after{content:" Brace"}
.biglietto>.termo .barretta{flex:1;height:9px;border-radius:5px;background:rgba(43,29,22,.18);overflow:hidden;position:relative;border:0}
.biglietto>.termo .barretta i{position:absolute;inset:0;transform-origin:left;background:linear-gradient(90deg,#6b2a12,#ff7a2b 60%,#ffd27a)}
.biglietto>.termo .barretta::after{content:"";position:absolute;top:0;bottom:0;left:76.9%;width:2px;background:rgba(43,29,22,.35)}
.biglietto>.termo #braceNum{font:700 .8rem var(--f-testo);color:#2b1d16;min-width:2.6em;text-align:right;flex:none}
.biglietto>.termo .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.biglietto>.termo.bassa .barretta{animation:bassa .8s ease-in-out infinite alternate}
.biglietto>.termo.bassa .barretta i{background:linear-gradient(90deg,#7a0f08,#e0523f)}
.biglietto>.termo.bassa #braceNum{color:#c0392b}
.biglietto>.termo.oro .barretta i{background:linear-gradient(90deg,#9a7210,#f3c35c 55%,#fff3b8)}
.biglietto>.termo.oro .barretta{box-shadow:0 0 8px rgba(243,195,92,.8)}
.biglietto .bTesta{grid-column:1;grid-row:2;display:flex;flex-direction:column;align-items:flex-start;gap:0;min-width:0;max-width:min(46vw,200px)}
.biglietto .bTesta .bEt{font-size:.66rem}
.biglietto .bTesta .cliente{font:400 1.02rem/1.05 var(--f-titolo) !important;color:#2b1d16;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.biglietto .conto{grid-column:2 !important;grid-row:2 !important;justify-content:flex-end !important;align-self:center;gap:10px !important}
.biglietto .voce img{height:26px}
.biglietto .voce img.sp{height:30px}
.biglietto .voce b{font-size:1.3rem !important}
.biglietto .bFrase{grid-column:1/-1;grid-row:3;-webkit-line-clamp:1 !important;font-size:.8rem}
.biglietto .bPaz{grid-column:1/-1;grid-row:4}
.biglietto .bInfo{grid-column:1/-1;grid-row:5}
.biglietto .bInfo .potere,.biglietto .bInfo .obGioco{padding:1px 8px}
@media (max-width:400px){
  .biglietto .bTesta{max-width:36vw}
  .biglietto .conto{gap:6px !important}
  .biglietto .conto .voce .vt small{font-size:.6rem}
}
@media (min-width:520px){
  .biglietto .bTesta .cliente{font-size:1.25rem !important}
  .biglietto .bFrase{font-size:.82rem}
}
@media (max-width:420px){.stat span{letter-spacing:.04em;font-size:.68rem}.hud{gap:7px}}