/* App Storia del presente, stile "Cinema" (scelto il 28/10/2026 tra 5 anteprime).
   Un'unica scena a tutto schermo: il mappamondo dietro, i testi in sovrimpressione come i titoli di un documentario,
   le viste che si dissolvono una nell'altra, tab fissi in basso. Stessi token di /assets/css/style.css, nessun colore nuovo.
   Il foglio è autonomo: l'app non carica lo stile del sito. */
:root {
  --navy: #042C53; --navy-2: #021c38; --night: #010f21;
  --ivory: #F1EFE8; --ivory-2: rgba(241,239,232,.76); --ivory-3: rgba(241,239,232,.55);
  --ink: #2C2C2A; --ink-2: #55524a; --ink-3: #807d72; --bg: #F1EFE8;
  --accent: #378ADD; --accent-hover: #2c72b8; --accent-ink: #1f5f9e;
  --terra: #D85A30; --terra-ink: #b4461f; --green: #0F6E56; --green-lit: #3fae8f;
  --line: rgba(4,44,83,.12); --line-dark: rgba(241,239,232,.14);
  --glass: rgba(1,15,33,.55);
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.34, 1.4, .64, 1);
  --bar-h: 56px; --tabs-h: 62px;
  --top: calc(var(--bar-h) + env(safe-area-inset-top, 0px));
  --bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom, 0px));
  --gl: max(16px, env(safe-area-inset-left, 0px));
  --gr: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--navy-2); color: var(--ivory); font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overscroll-behavior: none; }
h1, h2, h3 { font-family: var(--serif); font-weight: 800; margin: 0; letter-spacing: -.012em; line-height: 1.1; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; }
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.num { font-variant-numeric: tabular-nums lining-nums; }
[hidden] { display: none !important; }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 700 .72rem/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.eyebrow::before { content: ""; width: 22px; height: 1.5px; background: currentColor; flex: none; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 22px; border-radius: 999px; font: 600 .95rem/1 var(--sans); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: transform .25s var(--ease), background-color .2s, border-color .2s, box-shadow .3s var(--ease), opacity .2s; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; pointer-events: none; }
.btn--primary { background: var(--accent); color: #fff; box-shadow: 0 10px 30px -12px rgba(55,138,221,.7); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--ghost { background: transparent; color: var(--ivory); border-color: rgba(241,239,232,.3); }
.btn--ghost:hover { border-color: var(--ivory); background: rgba(241,239,232,.06); }

/* ---------- Scena: il globo resta, si sposta e si attenua ---------- */
.app { position: fixed; inset: 0; overflow: hidden; isolation: isolate; background: radial-gradient(70% 55% at 50% 50%, #0a4a83 0%, var(--navy) 50%, var(--night) 100%); }
.app::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: linear-gradient(to bottom, rgba(1,15,33,.92) 0%, rgba(1,15,33,0) 30%, rgba(1,15,33,0) 52%, rgba(1,15,33,.94) 86%); transition: opacity .8s var(--ease); }
.app[data-view="news"]::after { opacity: 0; }
.stage { position: absolute; inset: 0; z-index: 0; transition: transform 1s var(--ease), opacity .7s var(--ease); will-change: transform; }
#globe { position: absolute; inset: 0; }
#globe canvas { display: block; outline: none; }
.app:not(.globe-ready) .stage { opacity: 0; }
.app[data-view="home"] .stage { transform: translateY(8%) scale(1.04); }
.app[data-view="game"] .stage { transform: translateY(-2%); }
.app[data-view="result"] .stage { transform: translateY(4%) scale(.9); opacity: .45; }
.app[data-view="news"] .stage { opacity: 0; }

.bar { position: absolute; inset: 0 0 auto 0; z-index: 30; height: var(--top); padding: env(safe-area-inset-top, 0px) var(--gr) 0 var(--gl); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; flex: none; text-decoration: none; }
.brand img { width: 30px; height: 30px; border-radius: 50%; flex: none; }
.brand span { font: 700 1.02rem/1 var(--serif); white-space: nowrap; }
.bar__site { font: 600 .78rem/1 var(--sans); color: var(--ivory-3); text-decoration: none; padding: 8px 0; transition: color .2s; }
.bar__site:hover { color: var(--ivory); }

.views { position: absolute; inset: var(--top) 0 var(--bottom); z-index: 10; pointer-events: none; }
.view { position: absolute; inset: 0; overflow-x: hidden; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .45s var(--ease), transform .6s var(--ease), visibility 0s linear .6s; }
.app[data-view="home"] #vHome, .app[data-view="game"] #vGame, .app[data-view="result"] #vResult, .app[data-view="news"] #vNews { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity .5s var(--ease) .08s, transform .7s var(--ease) .04s, visibility 0s; }
.view--home, .view--result { overflow-y: auto; }

/* ---------- Tab ---------- */
.tabs { position: absolute; inset: auto 0 0 0; z-index: 30; height: var(--bottom); padding: 0 var(--gr) env(safe-area-inset-bottom, 0px) var(--gl); display: flex; justify-content: center; gap: 8px; background: linear-gradient(to top, rgba(1,15,33,.9), rgba(1,15,33,0)); transition: background-color .4s; }
.app[data-view="news"] .tabs { background: var(--navy-2); }
.tabs__btn { position: relative; flex: 0 0 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: none; border: 0; cursor: pointer; color: var(--ivory-3); font: 600 .72rem/1 var(--sans); letter-spacing: .04em; transition: color .25s; }
.tabs__btn:hover { color: var(--ivory-2); }
.tabs__btn[aria-current="page"] { color: var(--ivory); }
.tabs__btn::after { content: ""; position: absolute; bottom: 6px; left: 50%; width: 18px; height: 2px; margin-left: -9px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transition: transform .4s var(--ease); }
.tabs__btn[aria-current="page"]::after { transform: scaleX(1); }

/* ---------- Home: titolo centrato, una scelta alla volta ---------- */
.home { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 24px; text-align: center; padding: clamp(18px, 4vw, 40px) var(--gr) 16px var(--gl); }
.home .eyebrow::after { content: ""; width: 22px; height: 1.5px; background: currentColor; }
.home h1 { font-size: clamp(3rem, 1.8rem + 6vw, 6.4rem); line-height: .96; letter-spacing: -.03em; margin: 14px 0 0; text-shadow: 0 10px 40px rgba(1,15,33,.6); }
.home h1 em { font-style: italic; font-weight: 700; color: var(--accent); }
.home__bottom { width: 100%; max-width: 640px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 100%; padding: 5px; border-radius: 24px; background: rgba(1,15,33,.5); border: 1px solid var(--line-dark); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.chip { flex: none; padding: 9px 14px; border-radius: 99px; border: 0; background: none; color: var(--ivory-2); font: 600 .84rem/1 var(--sans); cursor: pointer; white-space: nowrap; transition: background-color .3s var(--ease), color .2s; }
.chip:hover { color: var(--ivory); }
.chip[aria-pressed="true"] { background: var(--ivory); color: var(--navy); }
.pick { min-height: 4.4em; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pick p { margin: 0; color: var(--ivory-2); font-size: .98rem; max-width: 42ch; }
.pick__best { font: 600 .78rem/1 var(--sans); color: var(--ivory-3); }
.pick__best.has-record { color: var(--accent); }
.pick.swap { animation: fade .4s var(--ease); }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } }
.start { padding: 17px 44px; font-size: 1.05rem; }
.home__top, .home__bottom { transition: transform .8s var(--ease), opacity .5s var(--ease); }
.app:not([data-view="home"]) .home__top { transform: translateY(-40px); opacity: 0; }
.app:not([data-view="home"]) .home__bottom { transform: translateY(40px); opacity: 0; }

/* ---------- Partita: domanda in alto, risposte in basso, il centro libero per il globo ---------- */
.view--game { pointer-events: none !important; }
.hud { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 10px var(--gr) 0 var(--gl); pointer-events: auto; }
.hud__exit { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-dark); background: rgba(2,28,56,.5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); cursor: pointer; color: var(--ivory-2); transition: color .2s, border-color .2s, transform .2s var(--ease); }
.hud__exit:hover { color: var(--ivory); border-color: var(--ivory-3); }
.hud__exit:active { transform: scale(.92); }
.hud__progress { flex: 1; display: flex; gap: 4px; }
.hud__progress i { flex: 1; height: 3px; border-radius: 99px; background: rgba(241,239,232,.14); transition: background-color .4s var(--ease); }
.hud__progress i.is-now { background: rgba(241,239,232,.42); }
.hud__progress i.is-ok { background: var(--accent); }
.hud__progress i.is-ko { background: rgba(241,239,232,.3); }
.hud__score { display: inline-flex; align-items: baseline; gap: 5px; min-width: 76px; justify-content: center; padding: 9px 14px; border-radius: 999px; background: rgba(55,138,221,.16); border: 1px solid rgba(55,138,221,.4); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font: 700 .95rem/1 var(--sans); }
.hud__score small { font-size: .66rem; font-weight: 600; color: var(--ivory-3); letter-spacing: .04em; }
.bump { animation: bump .55s var(--ease); }
@keyframes bump { 30% { transform: scale(1.12); background-color: var(--accent); } }

.panel { position: absolute; inset: 56px 0 0 0; padding: 0 var(--gr) 12px var(--gl); display: flex; flex-direction: column; pointer-events: none; }
.panel button, .panel input, .panel form, .panel .foot__text { pointer-events: auto; }
.panel__body { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; transition: opacity .26s var(--ease), filter .26s; }
.panel__body.is-out { opacity: 0; filter: blur(6px); }
.panel__meta { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.panel__count { font: 600 .78rem/1 var(--sans); color: var(--ivory-3); }
.panel__q { font-size: clamp(2.2rem, 1.5rem + 3vw, 3.6rem); line-height: 1.06; margin-top: 2px; text-shadow: 0 8px 30px rgba(1,15,33,.7); }
.panel__sub { margin: 0 0 8px; color: var(--ivory-2); font-size: .97rem; }
.app[data-view="game"] .panel__body:not(.is-out) .panel__q { animation: reveal .8s var(--ease) both; }
.app[data-view="game"] .panel__body:not(.is-out) .panel__sub { animation: reveal .8s var(--ease) .12s both; }
@keyframes reveal { from { clip-path: inset(0 0 100% 0); transform: translateY(24px); opacity: .2; } to { clip-path: inset(0 0 0 0); } }
.flag { display: block; width: auto; max-width: 100%; height: clamp(84px, 14vh, 128px); aspect-ratio: 4 / 3; margin: 8px 0 2px; border-radius: 6px; box-shadow: 0 0 0 1px rgba(241,239,232,.18), 0 14px 30px -14px rgba(0,0,0,.7); background: rgba(241,239,232,.06); }

.choices, .typer { margin-top: auto; width: 100%; max-width: 620px; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choice { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 16px 10px 10px; text-align: left; border-radius: 999px; border: 1px solid rgba(241,239,232,.16); background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); cursor: pointer; font: 600 1rem/1.25 var(--sans); color: var(--ivory); transition: background-color .25s, border-color .25s, transform .25s var(--ease), opacity .3s; }
.choice:hover:not(:disabled) { border-color: var(--accent); background: rgba(55,138,221,.2); }
.choice:active:not(:disabled) { transform: scale(.97); }
.app[data-view="game"] .panel__body:not(.is-out) .choice { animation: rise .55s var(--ease) both; animation-delay: calc(var(--i) * 55ms + 250ms); }
.choice__key { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: rgba(241,239,232,.1); font: 700 .75rem/1 var(--sans); color: var(--ivory-2); }
.choice__txt { min-width: 0; }
.choice:disabled { cursor: default; opacity: .4; }
.choice.is-right { opacity: 1; background: var(--green); border-color: var(--green); }
.choice.is-wrong { opacity: 1; background: var(--terra-ink); border-color: var(--terra-ink); animation: nope .4s var(--ease); }
.choice.is-right .choice__key, .choice.is-wrong .choice__key { background: rgba(255,255,255,.18); color: #fff; }
@keyframes nope { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
/* Chi è più grande?: il pallino ripete il colore del paese sul globo */
.choice__key--a, .choice__key--b { width: 14px; height: 14px; margin: 0 8px; background: var(--accent); box-shadow: 0 0 0 3px rgba(55,138,221,.25); }
.choice__key--b { background: var(--ivory); box-shadow: 0 0 0 3px rgba(241,239,232,.2); }
.choice.is-right .choice__key--a, .choice.is-wrong .choice__key--a { background: var(--accent); }
.choice.is-right .choice__key--b, .choice.is-wrong .choice__key--b { background: var(--ivory); }

.typer { display: flex; flex-direction: column; gap: 10px; }
.typer input { width: 100%; padding: 15px 18px; border-radius: 999px; border: 1px solid rgba(241,239,232,.22); background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--ivory); font: 600 1.1rem/1.2 var(--sans); text-align: center; outline: none; transition: border-color .2s, background-color .2s, box-shadow .2s; }
.typer input::placeholder { color: var(--ivory-3); font-weight: 500; }
.typer input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(55,138,221,.18); }
.typer input:disabled { opacity: .6; }
.typer__row { display: flex; gap: 10px; }
.typer__row .btn { flex: 1; }
.skip-tap { margin-top: auto; padding: 11px 18px; font-size: .88rem; }

.foot { width: 100%; max-width: 620px; margin: 10px auto 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 56px; text-align: left; }
.foot__text { margin: 0; color: var(--ivory-3); font-size: .93rem; line-height: 1.4; min-width: 0; }
.foot__text b { color: var(--ivory); }
.foot.is-ready .foot__text { color: var(--ivory-2); }
.foot__next { flex: none; position: relative; overflow: hidden; display: none; }
.foot.is-ready .foot__next { display: inline-flex; animation: arriva .45s var(--spring) both; }
@keyframes arriva { from { opacity: 0; transform: translateY(8px) scale(.96); } }
.foot__next svg { transition: transform .3s var(--ease); }
.foot__next:hover svg { transform: translateX(3px); }
/* avanzamento automatico dopo una risposta giusta: la barra nel bottone mostra quanto manca */
.foot__next::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: rgba(255,255,255,.55); transform: scaleX(0); transform-origin: left; }
.foot__next.is-timing::after { animation: timing var(--auto, 2000ms) linear forwards; }
@keyframes timing { to { transform: scaleX(1); } }
.gain { margin-left: 2px; font-weight: 700; color: var(--accent); }
.combo { font: 700 .66rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ivory-3); white-space: nowrap; }
.fonte { display: inline-block; font-size: .78rem; color: var(--ivory-3); }

/* ---------- Risultato ---------- */
.result { max-width: 600px; margin: 0 auto; padding: clamp(28px, 6vw, 64px) var(--gr) 40px var(--gl); text-align: center; }
.result .eyebrow { justify-content: center; }
.result__score { margin: 14px 0 6px; font: 800 clamp(6rem, 4rem + 10vw, 10rem)/.95 var(--serif); color: var(--accent); letter-spacing: -.03em; text-shadow: 0 20px 60px rgba(55,138,221,.35); }
.result__line { margin: 0; font-weight: 600; font-size: 1.05rem; }
.result__best { margin: 6px 0 24px; color: var(--ivory-3); font-size: .92rem; }
.result__list { list-style: none; max-width: 460px; margin: 0 auto 28px; padding: 2px 14px; text-align: left; border-radius: 18px; background: rgba(1,15,33,.6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.result__list li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 4px 11px 30px; position: relative; font-size: .95rem; }
.result__list li + li { border-top: 1px solid var(--line-dark); }
.app[data-view="result"] .result__list li { animation: rise .5s var(--ease) both; animation-delay: calc(.35s + var(--i) * 45ms); }
.result__list li::before { position: absolute; left: 4px; font-weight: 700; }
.result__list li.is-ok::before { content: "✓"; color: var(--green-lit); }
.result__list li.is-ko::before { content: "✕"; color: var(--terra); }
.result__list li span:first-child { font-weight: 600; }
.result__list li span:last-child { color: var(--ivory-3); text-align: right; }
.result__ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Notizie: stessa resa della pagina /notizie del sito ---------- */
.view--news { overflow-y: auto; background: var(--bg); color: var(--ink); }
.app:not([data-view="news"]) .view--news { transform: scale(1.02); }
.wrap { max-width: 1100px; margin: 0 auto; padding-left: var(--gl); padding-right: var(--gr); }
.news-head { position: relative; color: var(--ivory); background: radial-gradient(90% 120% at 80% -10%, #0a4a83 0%, var(--navy) 50%, var(--navy-2) 100%); }
.news-head .wrap { padding-block: clamp(32px, 6vw, 72px) clamp(28px, 5vw, 52px); }
.news-head h1 { color: var(--ivory); font-size: clamp(2.3rem, 1.4rem + 3.4vw, 4rem); line-height: 1.04; letter-spacing: -.02em; margin: 16px 0 14px; }
.news-head h1 em { font-style: italic; font-weight: 700; color: var(--accent); }
.news-head p { margin: 0; max-width: 60ch; color: var(--ivory-2); }
.news-wrap { padding-block: clamp(24px, 5vw, 56px); }
.news { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.news article { padding: 22px 22px 24px 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.news article:not(:nth-child(3n+1)) { padding-left: 22px; border-left: 1px solid var(--line); }
.news article:nth-child(n+4) { border-top: 1px solid var(--line); }
.app[data-view="news"] .news article:not(.sk) { animation: rise .5s var(--ease) both; animation-delay: calc(var(--i) * 60ms); }
.news .topic { font: 700 .7rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); }
.news h3 { font-size: 1.24rem; line-height: 1.25; font-weight: 700; color: var(--navy); }
.news p { margin: 0; color: var(--ink-2); font-size: .97rem; }
.news .src { margin-top: auto; padding-top: 6px; font: 500 .78rem/1.3 var(--sans); color: var(--ink-3); }
.news__empty { grid-column: 1 / -1; padding: 24px 0; color: var(--ink-3); }
.news .sk i { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, rgba(4,44,83,.07), rgba(4,44,83,.13), rgba(4,44,83,.07)) 0 0 / 200% 100%; animation: shimmer 1.2s linear infinite; }
.news .sk i:nth-child(1) { width: 30%; } .news .sk i:nth-child(2) { height: 20px; width: 90%; } .news .sk i:nth-child(3) { width: 100%; } .news .sk i:nth-child(4) { width: 70%; }
@keyframes shimmer { to { background-position: -200% 0; } }
.past { position: relative; margin-top: clamp(28px, 5vw, 48px); border-radius: 20px; overflow: hidden; background: linear-gradient(155deg, var(--navy) 0%, var(--navy-2) 100%); color: var(--ivory); padding: clamp(24px, 4vw, 40px); display: grid; grid-template-columns: auto 1fr; gap: clamp(18px, 4vw, 44px); align-items: center; }
.past__year { font: 800 clamp(3.4rem, 2rem + 5vw, 6rem)/.9 var(--serif); color: var(--accent); letter-spacing: -.03em; }
.past h3 { color: var(--ivory); font-size: 1.55rem; margin: 12px 0 8px; }
.past p { margin: 0; color: var(--ivory-2); max-width: 62ch; }
.news-site { margin: 24px 0 0; }
.news-site a { font: 600 .92rem/1.3 var(--sans); color: var(--accent-ink); }

@media (max-width: 900px) {
  .news { grid-template-columns: 1fr; }
  .news article, .news article:not(:nth-child(3n+1)) { padding: 20px 0; border-left: 0; }
  .news article + article { border-top: 1px solid var(--line); }
  .past { grid-template-columns: 1fr; }
}
@media (min-width: 900px) { .app[data-view="game"] .stage { transform: none; } }
@media (max-width: 380px) { .choice { font-size: .92rem; padding: 8px 12px 8px 8px; gap: 8px; } .bar__site { display: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}