*,*::before,*::after{box-sizing:border-box}
body{margin:0}
/* Carta aeronautica: mare e terra in toni da carta di volo, rotta in magenta; schermata mappa a tutto schermo con pannelli flottanti */
:root{
  --paper:#edf1ec; --sea:#d3e2e1; --land:#e8e1c9; --land-edge:#a99f7e; --grid:#b5c8c6;
  --ink:#17262a; --muted:#56676a; --line:#c6d0cb; --panel:#fbfcf9;
  --route:#c3166c; --route-soft:rgba(195,22,108,.14); --valid:#23806c; --valid-fill:#9ed3c3; --bad:#c23a29; --lock:#9aa5a3;
  --f-display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --f-body:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --on-route:#fff; --shadow:0 6px 24px rgba(23,38,42,.14);
  --fids-bg:#14181c; --fids-tile:#22282e; --fids-fg:#ffd23f; --fids-dim:#8b9197; --fids-line:#2c333a;
  --sk0:#8fc1e3; --sk1:#d6ebf3; --sun0:#fff6cf; --sun1:rgba(255,246,207,0); --cloud:#ffffff; --star-o:0; --land-shadow:rgba(23,38,42,.2); --a0:#dfe7d6; --a1:#d3e6f1; --a2:#a9c8e0; --a3:#38497a; --a4:#121731;
}
/* Temi: "auto" (nessun attributo) segue il sistema; gli altri si scelgono dalla home */
@media (prefers-color-scheme: dark){:root:not([data-theme]){
  --paper:#0e171a; --sea:#122129; --land:#2b3433; --land-edge:#4f5c59; --grid:#203640;
  --ink:#e4ebe7; --muted:#97a7a6; --line:#2a3a3e; --panel:#152125;
  --route:#ff4ea6; --route-soft:rgba(255,78,166,.16); --valid:#53c7a8; --valid-fill:#2e6b5e; --bad:#ff6a55; --lock:#4e5d5d;
  --on-route:#fff; --shadow:0 6px 24px rgba(0,0,0,.45); color-scheme:dark;
  --fids-bg:#07090b; --fids-tile:#161b1f; --fids-fg:#ffd23f; --fids-dim:#7e868c; --fids-line:#20272c;
  --sk0:#040916; --sk1:#13243f; --sun0:#e9eef7; --sun1:rgba(233,238,247,0); --cloud:#24324a; --star-o:1; --land-shadow:rgba(0,0,0,.5); --a0:#1b2a29; --a1:#182b3b; --a2:#172d4a; --a3:#18224a; --a4:#05070f;
}}
:root[data-theme="night"]{
  --paper:#0e171a; --sea:#122129; --land:#2b3433; --land-edge:#4f5c59; --grid:#203640;
  --ink:#e4ebe7; --muted:#97a7a6; --line:#2a3a3e; --panel:#152125;
  --route:#ff4ea6; --route-soft:rgba(255,78,166,.16); --valid:#53c7a8; --valid-fill:#2e6b5e; --bad:#ff6a55; --lock:#4e5d5d;
  --on-route:#fff; --shadow:0 6px 24px rgba(0,0,0,.45); color-scheme:dark;
  --fids-bg:#07090b; --fids-tile:#161b1f; --fids-fg:#ffd23f; --fids-dim:#7e868c; --fids-line:#20272c;
  --sk0:#040916; --sk1:#13243f; --sun0:#e9eef7; --sun1:rgba(233,238,247,0); --cloud:#24324a; --star-o:1; --land-shadow:rgba(0,0,0,.5); --a0:#1b2a29; --a1:#182b3b; --a2:#172d4a; --a3:#18224a; --a4:#05070f;
}
:root[data-theme="ocean"]{
  --paper:#0b1a2e; --sea:#0f2a4a; --land:#24465a; --land-edge:#3f6c86; --grid:#173659;
  --ink:#e6f1ff; --muted:#8fb0c8; --line:#1f3a5a; --panel:#10233b;
  --route:#ffb627; --route-soft:rgba(255,182,39,.2); --valid:#3ddc97; --valid-fill:#1f6e56; --bad:#ff5d5d; --lock:#3b5670;
  --on-route:#1a1200; --shadow:0 6px 24px rgba(0,0,0,.5); color-scheme:dark;
  --fids-bg:#050d18; --fids-tile:#0f2036; --fids-fg:#ffb627; --fids-dim:#6f8aa3; --fids-line:#172c45;
  --sk0:#020c19; --sk1:#0f2a4a; --sun0:#ffd27a; --sun1:rgba(255,210,122,0); --cloud:#1c3a5c; --star-o:1; --land-shadow:rgba(0,0,0,.5); --a0:#16304a; --a1:#123a5e; --a2:#0f3263; --a3:#0b2150; --a4:#020814;
}
:root[data-theme="atlas"]{
  --paper:#f3e9d2; --sea:#bcd5cf; --land:#efe0b9; --land-edge:#9b8455; --grid:#a9c2bb;
  --ink:#3b2a1a; --muted:#7a6347; --line:#d8c7a0; --panel:#fbf4e2;
  --route:#b0302a; --route-soft:rgba(176,48,42,.16); --valid:#3c6e47; --valid-fill:#a9c99a; --bad:#8c1c13; --lock:#b5a37f;
  --on-route:#fff; --shadow:0 6px 24px rgba(59,42,26,.18);
  --fids-bg:#2b2117; --fids-tile:#3b2e21; --fids-fg:#f3e2b5; --fids-dim:#a08b68; --fids-line:#4a3a2a;
  --sk0:#e6c58f; --sk1:#f5e6c8; --sun0:#fff4d6; --sun1:rgba(255,244,214,0); --cloud:#fbf4e2; --star-o:0; --land-shadow:rgba(59,42,26,.22); --a0:#e7d7b1; --a1:#dfe3d3; --a2:#bccdc6; --a3:#5b4a39; --a4:#2b2117;
}
:root[data-theme="neon"]{
  --paper:#07060d; --sea:#0d0b1c; --land:#1b1733; --land-edge:#4b3f8f; --grid:#1e1940;
  --ink:#f2efff; --muted:#9d95c9; --line:#2a2450; --panel:#120f25;
  --route:#00f0ff; --route-soft:rgba(0,240,255,.16); --valid:#b6ff3b; --valid-fill:#3d5c12; --bad:#ff3d7f; --lock:#3a3366;
  --on-route:#07060d; --shadow:0 0 28px rgba(0,240,255,.12); color-scheme:dark;
  --fids-bg:#000; --fids-tile:#100d22; --fids-fg:#00f0ff; --fids-dim:#6f68a8; --fids-line:#1e1940;
  --sk0:#000; --sk1:#1c0a3d; --sun0:#ff3df5; --sun1:rgba(255,61,245,0); --cloud:#1b1733; --star-o:1; --land-shadow:rgba(0,240,255,.12); --a0:#120f25; --a1:#170f36; --a2:#1e0f48; --a3:#26094f; --a4:#000;
}
html,body{height:100%}
[hidden]{display:none!important}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--route);outline-offset:2px}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

/* ---------- HOME ---------- */
#home{min-height:100%;padding-block:28px 48px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.wrap{max-width:1040px;margin:0 auto;display:flex;flex-direction:column;gap:28px}
.rules{display:flex;flex-direction:column;gap:8px;font-size:14px;margin:0;padding:0;list-style:none}
.rules li{display:grid;grid-template-columns:28px 1fr;gap:8px;align-items:baseline}
.rules b{font-family:var(--f-mono);color:var(--route);font-size:13px}
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.mode{text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:16px;display:flex;flex-direction:column;gap:4px;min-width:0}
.mode:hover{border-color:var(--route)}
.mode .k{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.mode .t{font-family:var(--f-display);font-weight:800;font-size:28px;text-transform:uppercase;line-height:1}
.mode .d{font-size:13px;color:var(--muted)}
.bar{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between}
.toggle{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--panel)}
.toggle button{border:0;background:none;padding:6px 14px;font-size:13px}
.toggle button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.stat{font-size:13px;color:var(--muted)} .stat b{color:var(--ink);font-family:var(--f-mono)}

/* ---------- GIOCO ---------- */
#game{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--sea)}
#game[hidden]{display:none!important}
#mapbox{position:relative;flex:1;min-height:0;overflow:hidden}
#map{width:100%;height:100%;display:block;touch-action:none}
.sphere{fill:var(--sea)}
.grat{fill:none;stroke:var(--grid);stroke-width:.5;vector-effect:non-scaling-stroke}
.refline{fill:none;stroke:var(--route);stroke-width:.8;stroke-dasharray:4 4;opacity:.45;vector-effect:non-scaling-stroke}
.reflabel{font-family:var(--f-mono);font-size:7px;fill:var(--route);opacity:.6}
.c{fill:var(--land);stroke:var(--land-edge);stroke-width:.5;vector-effect:non-scaling-stroke;cursor:pointer;transition:fill .15s}
.c.x{fill:var(--land);opacity:.55;cursor:default}
.c:hover:not(.x){fill:var(--valid-fill)}
.c.sel{fill:var(--route);stroke:var(--ink)}
.c.valid{fill:var(--valid-fill)}
.c.chosen-ok{fill:var(--route)}
.c.chosen-ko{fill:var(--bad)}
.c.visited{fill:var(--route-soft);stroke:var(--route)}
.route{fill:none;stroke:var(--route);stroke-width:2;stroke-dasharray:6 4;vector-effect:non-scaling-stroke}
.pos{fill:var(--route);stroke:var(--panel);stroke-width:2;vector-effect:non-scaling-stroke}
.pos-ring{fill:none;stroke:var(--route);stroke-width:1.5;vector-effect:non-scaling-stroke;animation:ring 1.8s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes ring{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(3.2)}}
@media (prefers-reduced-motion:reduce){.pos-ring{animation:none;opacity:.5}.c{transition:none}}

.conds{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.conds li{display:grid;grid-template-columns:20px 1fr;gap:6px;align-items:baseline;font-size:15px;line-height:1.35}
.conds li .m{font-family:var(--f-mono);font-size:12px;color:var(--route)}
.conds li.ok .m{color:var(--valid)} .conds li.ko .m{color:var(--bad)}
.chip{display:inline-block;font-family:var(--f-mono);font-weight:600;font-size:13px;background:var(--route-soft);color:var(--route);border-radius:3px;padding:0 6px;margin-left:2px}
.ref{display:block;font-size:12px;color:var(--muted)}
.cnt{font-size:12px;color:var(--muted)}

.row{display:flex;gap:8px;align-items:center}
.search{position:relative;flex:1;min-width:0}
.search input{width:100%;box-sizing:border-box;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:4px;padding:10px 12px;font:inherit;font-size:15px}
.search input:focus{outline:none;border-color:var(--route)}
.sug{position:absolute;left:0;right:0;bottom:calc(100% + 6px);background:var(--panel);border:1px solid var(--line);border-radius:4px;box-shadow:var(--shadow);list-style:none;margin:0;padding:4px;max-height:240px;overflow:auto}
.sug li{padding:7px 10px;border-radius:3px;cursor:pointer;font-size:14px;display:flex;justify-content:space-between;gap:8px}
.sug li .en{color:var(--muted);font-size:12px}
.sug li[aria-selected="true"],.sug li:hover{background:var(--route-soft)}
.go{border:0;background:var(--route);color:var(--on-route);border-radius:4px;padding:10px 16px;font-weight:700;white-space:nowrap}
.go:disabled{background:var(--line);color:var(--muted);cursor:not-allowed}
.go.alt{background:var(--ink);color:var(--paper)}
.picked{font-size:13px;color:var(--muted);min-height:20px}
.picked b{color:var(--ink)}
.fb{display:flex;flex-direction:column;gap:6px}
.fb .v{font-family:var(--f-display);font-weight:800;font-size:26px;text-transform:uppercase;line-height:1}
.fb .v.ok{color:var(--route)} .fb .v.ko{color:var(--bad)}
.fb .s{font-size:13px;color:var(--muted)}
.fb details{font-size:13px;color:var(--muted)}
.fb summary{cursor:pointer}
.tip{position:absolute;pointer-events:none;background:var(--ink);color:var(--paper);font-size:12px;padding:3px 7px;border-radius:3px;z-index:6;white-space:nowrap}

/* ---------- RISULTATO ---------- */
.overlay{position:absolute;inset:0;background:rgba(14,23,26,.45);display:flex;align-items:center;justify-content:center;z-index:10;padding:16px}
.card{background:var(--panel);border-radius:8px;box-shadow:var(--shadow);width:min(460px,100%);max-height:100%;overflow:auto;padding:22px;display:flex;flex-direction:column;gap:14px}
.card .k{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.card h2{margin:0;font-family:var(--f-display);font-weight:900;font-size:40px;text-transform:uppercase;line-height:.95}
.big{font-family:var(--f-mono);font-weight:600;font-size:38px;color:var(--route);line-height:1}
.stars{font-size:30px;letter-spacing:6px;color:var(--route)} .stars i{font-style:normal;color:var(--line)}
.meter{height:8px;background:var(--line);border-radius:4px;position:relative}
.meter .f{position:absolute;inset:0 auto 0 0;background:var(--route);border-radius:4px}
.meter .t{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink)}
.legs{list-style:none;margin:0;padding:0;font-size:13px;display:flex;flex-direction:column;gap:3px}
.legs li{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed var(--line);padding-bottom:3px}
.legs li .km{font-family:var(--f-mono)}
.legs li.ko{color:var(--bad)}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.actions .go{flex:1}

@media (max-width:760px){
  .modes{grid-template-columns:1fr}
}

/* ---------- AGGIUNTE: modale, condivisione, statistiche, multigiocatore ---------- */
.overlay.fixed{position:fixed;z-index:50}
.toast{pointer-events:none;position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:8px 14px;border-radius:4px;font-size:14px;z-index:60;box-shadow:var(--shadow)}
.net{position:fixed;top:0;left:0;right:0;background:var(--bad);color:#fff;text-align:center;font-size:13px;padding:4px;z-index:70}
.bar .right{display:flex;gap:10px 16px;align-items:center;flex-wrap:wrap}
.linkb{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:6px 14px;font-size:13px}
.linkb:hover{border-color:var(--route)}
.streak{font-size:13px;color:var(--route);font-weight:600}
.note{font-size:12px;color:var(--muted)}
.field{width:100%;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:4px;padding:10px 12px;font:inherit;font-size:15px}
.field:focus{outline:none;border-color:var(--route)}
.field.code{width:96px;text-transform:uppercase;font-family:var(--f-mono);letter-spacing:.2em;text-align:center}
.row.flexwrap{flex-wrap:wrap}
.row.flexwrap .field:not(.code){flex:1;min-width:180px}
.lbl{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.lbl select{font:inherit;font-size:15px;text-transform:none;letter-spacing:0;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:8px}
.err{color:var(--bad);font-size:13px;min-height:18px}
.go.wide{font-size:18px;padding:14px 22px;align-self:flex-start}
.big.alt{color:var(--ink)}
.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center}
.statgrid b{display:block;font-family:var(--f-mono);font-size:26px}
.statgrid span{font-size:11px;color:var(--muted)}
.bars{display:flex;flex-direction:column;gap:6px}
.barrow{display:grid;grid-template-columns:70px 1fr;gap:8px;align-items:center}
.stars.sm{font-size:13px;letter-spacing:1px}
.barf{background:var(--route);color:var(--on-route);font-family:var(--f-mono);font-size:12px;padding:2px 6px;border-radius:3px;text-align:right;min-width:24px}
.vs{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;text-align:center}
.vs .big{font-size:30px}
.vsx{font-family:var(--f-display);font-weight:800;font-size:22px;color:var(--muted)}
.vslegs li span:last-child{text-align:right}
/* multigiocatore */
#mp{min-height:100%;padding-block:28px 48px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
#mp .wrap{max-width:720px;gap:18px}
.mphead{display:flex}
.mphead .back,.panel .back{border:1px solid var(--line);background:var(--panel);border-radius:4px;padding:4px 10px;font-size:13px}
.mpt{font-family:var(--f-display);font-weight:900;font-size:clamp(40px,8vw,72px);line-height:.9;text-transform:uppercase;margin:0}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:16px;display:flex;flex-direction:column;gap:10px}
.panel h3{margin:0;font-family:var(--f-display);font-weight:800;font-size:22px;text-transform:uppercase;line-height:1}
.panel p{margin:0}
.panel.cfg{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.k{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.roomcode{font-family:var(--f-mono);font-weight:600;font-size:56px;letter-spacing:.25em;color:var(--route);line-height:1}
.plist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.plist li{display:flex;align-items:center;gap:8px}
.tag{font-family:var(--f-mono);font-size:11px;color:var(--route);letter-spacing:.08em}
.pdot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;flex:none}
.mpstat{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pchip{display:inline-flex;align-items:center;font-size:12px;border:1px solid var(--line);border-radius:999px;padding:2px 8px;color:var(--muted)}
.pchip.on{color:var(--ink);border-color:var(--valid)}
.pchip.off{opacity:.5}
.rank{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.rank li{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed var(--line);padding-bottom:4px}
.rank li.me b{color:var(--route)}
.rank .km{font-family:var(--f-mono)}
.poslabel{font-family:var(--f-body);font-weight:700;paint-order:stroke;stroke:var(--panel);stroke-width:2px;pointer-events:none}
@media (max-width:760px){
  .modes{grid-template-columns:1fr}
  .panel.cfg{grid-template-columns:repeat(2,1fr)}
  .statgrid b{font-size:20px}
  .roomcode{font-size:44px}
}
/* ---------- volo, passaporto, classifica del giorno ---------- */
.plane{fill:var(--route);stroke:var(--panel);stroke-width:1;vector-effect:non-scaling-stroke;pointer-events:none}
.rankbox{border:1px solid var(--line);border-radius:6px;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.rankbox .rt{font-size:15px} .rankbox .rt b{font-family:var(--f-mono);color:var(--route)}
.hist{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;align-items:end;height:54px}
.hist i{display:block;background:var(--line);border-radius:2px 2px 0 0;min-height:2px}
.hist i.me{background:var(--route)}
.histx{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:10px;color:var(--muted);margin-top:-4px}
/* in una scheda più alta dello schermo i figli non devono schiacciarsi (la barra spariva) */
.card>*{flex-shrink:0}

/* ---------- home: spedizione e classifica in primo piano ---------- */
.top{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:flex-end;justify-content:space-between;border-bottom:2px solid var(--ink);padding-bottom:14px}
.logo{font-family:var(--f-display);font-weight:900;font-size:clamp(48px,9vw,96px);line-height:.85;letter-spacing:.01em;text-transform:uppercase;margin:0}
.logo span{color:var(--route)}
.tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.linkb.icon{padding:5px 11px;font-size:14px;line-height:1.3}
.tagline{margin:-14px 0 0;max-width:60ch;color:var(--muted)}
.today{display:grid;grid-template-columns:1.15fr 1fr;gap:14px;align-items:stretch}
.board{gap:8px}
.lb{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;font-size:14px}
.lb li{display:grid;grid-template-columns:28px 1fr auto 44px;gap:8px;align-items:baseline;padding:3px 6px;border-radius:4px}
.lb li:nth-child(-n+3) .pos{color:var(--route);font-weight:700}
.lb .pos{font-family:var(--f-mono);font-size:12px;color:var(--muted)}
.lb .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb .km,.lb .pc{font-family:var(--f-mono);font-size:13px;text-align:right}
.lb .pc{color:var(--muted)}
.lb li.me{background:var(--route-soft)} .lb li.me .nm{font-weight:700}
.lb li.gap{border-top:1px dashed var(--line);border-radius:0;margin-top:4px;padding-top:6px}
.namef{display:flex;gap:8px} .namef .field{flex:1;min-width:0;padding:8px 10px}
@media (max-width:760px){.today{grid-template-columns:1fr}.modes{grid-template-columns:1fr}}

/* ---------- mappa: piccoli stati senza pallini ---------- */
.hit{fill:transparent;stroke:none;cursor:pointer;pointer-events:all}
.hittop .hit{pointer-events:none} .hittop.on .hit{pointer-events:all}
.ring{fill:none;stroke:none;pointer-events:none;vector-effect:non-scaling-stroke;stroke-width:2}
.ring.hov{stroke:var(--muted)}
.ring.visited{stroke:var(--route);stroke-width:1.5}
.ring.valid{stroke:var(--valid);fill:var(--valid-fill)}
.ring.sel,.ring.chosen-ok{stroke:var(--route);fill:var(--route-soft);stroke-width:2.5}
.ring.chosen-ko{stroke:var(--bad);fill:none;stroke-width:2.5}

/* ---------- temi, guida, festa ---------- */
.themes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.themeb{border:2px solid var(--line);border-radius:6px;background:var(--panel);padding:8px;display:flex;flex-direction:column;gap:6px;align-items:stretch;font-size:13px}
.themeb[aria-pressed="true"]{border-color:var(--route)}
.sw{height:42px;border-radius:4px;display:flex;overflow:hidden}
.sw i{flex:1}
.help ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.help .ex{background:var(--route-soft);border-radius:6px;padding:10px 12px;font-size:14px}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:80;overflow:hidden}
.confetti i{position:absolute;top:-12px;width:8px;height:14px;border-radius:2px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
@media (prefers-reduced-motion:reduce){.confetti{display:none}}

/* ================= AEROPORTO ================= */
/* tabellone a palette: ogni lettera è una tessera */
.flap{display:inline-flex;gap:2px}
.flap i{font-style:normal;display:inline-grid;place-items:center;min-width:.82em;padding:.12em .06em;background:var(--fids-tile);color:var(--fids-fg);
  border-radius:2px;font-family:var(--f-mono);font-weight:600;line-height:1;position:relative;text-transform:uppercase}
.flap i::after{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px solid rgba(0,0,0,.45)}
.flap i.spin{color:var(--fids-dim)}

/* home */
.logo .lp{color:var(--route);font-size:.5em;vertical-align:.55em;margin-right:.12em}
.today{grid-template-columns:1.25fr 1fr}
.fids{background:var(--fids-bg);color:var(--fids-fg);border-radius:8px;padding:12px 12px 14px;display:flex;flex-direction:column;gap:4px;box-shadow:var(--shadow);min-width:0}
.fids-head{display:flex;justify-content:space-between;align-items:center;font-family:var(--f-display);font-weight:800;font-size:22px;text-transform:uppercase;letter-spacing:.04em;padding:2px 6px 8px;border-bottom:1px solid var(--fids-line)}
.fids-head .clock{font-family:var(--f-mono);font-size:16px;color:var(--fids-fg)}
.fl{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;text-align:left;background:none;border:0;border-bottom:1px solid var(--fids-line);color:var(--fids-fg);padding:9px 6px;border-radius:4px;min-width:0}
.fl:hover,.fl:focus-visible{background:var(--fids-line)}
.fl-code .flap,.fl-st .flap{font-size:14px}
.fl-dest{display:flex;flex-direction:column;min-width:0}
.fl-dest b{font-family:var(--f-display);font-weight:800;font-size:20px;text-transform:uppercase;line-height:1.05;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fl-dest small{font-size:12px;color:var(--fids-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fl.main{padding:14px 6px}
.fl.main .fl-dest b{font-size:clamp(26px,3.6vw,36px)}
.fl.main .fl-code .flap,.fl.main .fl-st .flap{font-size:18px}
.fl.main .fl-st .flap i{background:var(--route);color:var(--on-route)}
.fl-sub{padding:0 6px 8px;font-size:13px;color:var(--fids-dim);display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;border-bottom:1px solid var(--fids-line)}
.fl-sub .marks{letter-spacing:1px}
.fl-sub .streak{color:var(--fids-fg)}
@media (max-width:760px){.fl-st{display:none}.fl{grid-template-columns:auto 1fr}}

/* pagine archivio e schede */
.page{min-height:100%;padding-block:28px 48px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.page .wrap{max-width:880px;gap:16px}
.arch-list{display:flex;flex-direction:column;gap:4px}
.arch-list .fl{border-bottom:1px solid var(--fids-line)}
.learn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.cty{text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;min-width:0}
.cty:hover{border-color:var(--route)}
.cty b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cty small{font-family:var(--f-mono);color:var(--muted);font-size:12px}
.fsw{display:flex;height:10px;border-radius:2px;overflow:hidden;border:1px solid var(--line)} .fsw i{flex:1}
.facts{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:14px;margin:0}
.facts dt{color:var(--muted)} .facts dd{margin:0}
.factl{margin:0;padding-left:18px;font-size:14px;display:flex;flex-direction:column;gap:3px}

/* partita: mappa + pannello a destra */
#game{position:fixed;inset:0;display:flex;background:var(--sea)}
#game[hidden]{display:none!important}
.stage{flex:1;min-height:0;display:flex}
#mapbox{position:relative;flex:1;min-width:0;min-height:0;overflow:hidden}
.side{width:390px;flex:none;display:flex;flex-direction:column;min-height:0;background:var(--paper);border-left:2px solid var(--ink);
  padding-top:env(safe-area-inset-top,0px);padding-right:env(safe-area-inset-right,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.sidehead{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line)}
.sidehead .back{border:1px solid var(--line);background:var(--panel);border-radius:4px;padding:4px 10px;font-size:13px}
.sh-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.1}
.sh-t .k{font-size:10px}
.sh-t .title{font-family:var(--f-display);font-weight:800;font-size:19px;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.snd{border:1px solid var(--line);background:var(--panel);border-radius:4px;padding:2px 8px;font-size:14px;line-height:1.4}
.readouts{display:flex;align-items:center;gap:14px;padding:8px 14px;border-bottom:1px solid var(--line)}
.readouts .pips{flex:1}
.pips{display:flex;gap:4px}
.pips span{width:22px;height:6px;border-radius:2px;background:var(--line)}
.pips span.ok{background:var(--route)} .pips span.ko{background:var(--bad)} .pips span.cur{background:var(--ink)}
.readout{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1}
.readout .l{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.readout .v{font-family:var(--f-mono);font-weight:600;font-size:17px}
.readout .v.route{color:var(--route)} .readout .v.warn{color:var(--bad)}

/* carta d'imbarco */
.pass{margin:12px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);display:flex;flex-direction:column;position:relative;overflow:hidden;flex:none}
.pass:empty{display:none}
.bp-top{display:flex;justify-content:space-between;background:var(--route);color:var(--on-route);font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:6px 14px}
.bp-route{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px;padding:10px 14px 8px}
.bp-end{display:flex;flex-direction:column;min-width:0}
.bp-end.r{text-align:right;align-items:flex-end}
.bp-end small{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.bp-end b{font-family:var(--f-display);font-weight:900;font-size:40px;line-height:.95;letter-spacing:.02em}
.bp-end b.q{color:var(--line)} .bp-end b.ok{color:var(--route)} .bp-end b.ko{color:var(--bad);text-decoration:line-through}
.bp-end span{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.bp-plane{font-size:22px;color:var(--route)}
.bp-perf{height:0;border-top:2px dashed var(--line);margin:2px 0;position:relative}
.bp-perf::before,.bp-perf::after{content:"";position:absolute;top:-10px;width:18px;height:18px;border-radius:50%;background:var(--paper);border:1px solid var(--line)}
.bp-perf::before{left:-10px} .bp-perf::after{right:-10px}
.pass h2{margin:10px 14px 6px;font-family:var(--f-display);font-weight:800;font-size:22px;text-transform:uppercase;line-height:1}
.pass .conds{padding:0 14px}
.bp-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 14px 10px;font-size:12px;color:var(--muted)}
.bp-meta .cls{font-family:var(--f-mono);letter-spacing:1px}
.pass .fold{border:0;background:none;color:var(--muted);font-size:11px;padding:0;font-family:var(--f-mono)}
.pass.min .conds,.pass.min h2,.pass.min .bp-meta .cnt{display:none}

/* tabellone delle tappe */
.track{flex:1;min-height:0;display:flex;flex-direction:column;margin:0 12px;background:var(--fids-bg);color:var(--fids-fg);border-radius:8px;overflow:hidden}
.track:empty{display:none}
.tk-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;border-bottom:1px solid var(--fids-line);font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:16px;letter-spacing:.04em}
.tk-gauge{flex:1;height:6px;background:var(--fids-tile);border-radius:3px;position:relative}
.tk-gauge .f{position:absolute;inset:0 auto 0 0;background:var(--fids-fg);border-radius:3px;transition:width .6s ease}
.tk-gauge .t{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--fids-dim)}
.tk-stars{font-size:14px;letter-spacing:2px;color:var(--fids-fg);font-family:var(--f-body)} .tk-stars i{font-style:normal;color:var(--fids-tile)}
.tk-lives{font-size:14px;letter-spacing:2px}
.tk-list{list-style:none;margin:0;padding:4px 8px 8px;overflow:auto;flex:1}
.dep{display:grid;grid-template-columns:auto 1fr auto;gap:4px 10px;align-items:center;padding:7px 4px;border-bottom:1px solid var(--fids-line)}
.dep .flap{font-size:13px}
.dep .dn .flap i{background:none;color:var(--fids-dim)} .dep .dn .flap i::after{display:none}
.dep .dk{font-family:var(--f-mono);font-size:13px;text-align:right}
.dep .dsub{grid-column:2 / 4;display:flex;justify-content:space-between;gap:8px;font-size:11px;color:var(--fids-dim);margin-top:-2px}
.dep.ko .dr .flap i{color:#ff7a66}
.dep.cur{background:var(--fids-line);border-radius:4px}
.dep.todo{opacity:.5}
.rar{display:inline-block;font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;border-radius:3px;padding:1px 6px;font-weight:600}
.rar.r0{background:var(--fids-tile);color:var(--fids-dim)} .rar.r1{background:#2d5a4a;color:#bff2dc} .rar.r2{background:#24518a;color:#d6e8ff}
.rar.r3{background:#6a2f8c;color:#f1d9ff} .rar.r4{background:var(--route);color:var(--on-route)}
.fb .rarl{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--muted)}
.tk-pl{display:grid;grid-template-columns:24px 1fr auto;gap:8px;align-items:center;padding:6px 10px;border-bottom:1px solid var(--fids-line);font-size:14px}
.tk-pl .km{font-family:var(--f-mono);font-size:13px}
.tk-pl.me b{color:var(--fids-fg)}

/* risposta */
.dock{flex:none;margin:12px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px;display:flex;flex-direction:column;gap:8px}
.dock:empty{display:none}
.dock .legs{max-height:24vh;overflow:auto}
.keys{font-size:11px;color:var(--muted);font-family:var(--f-mono)}
.repb{border:0;background:none;color:var(--muted);text-decoration:underline;font-size:12px;padding:0;align-self:flex-start}

/* mappa: bussola, griglia graduata, segnaposto */
.zoomb{position:absolute;left:max(12px,env(safe-area-inset-left,0px));bottom:12px;display:flex;flex-direction:column;gap:4px;z-index:3}
.zoomb button{width:34px;height:34px;border:1px solid var(--line);background:var(--panel);border-radius:4px;font-family:var(--f-mono);font-size:16px}
.compass{position:absolute;right:14px;bottom:14px;width:74px;height:74px;pointer-events:none;z-index:2;opacity:.9}
.compass .cr{fill:var(--panel);stroke:var(--ink);stroke-width:1.5;opacity:.85} .compass .cr2{fill:none;stroke:var(--grid);stroke-width:1;stroke-dasharray:2 3}
.compass .cn{fill:var(--ink)} .compass .cnn{fill:var(--route)} .compass .ce{fill:var(--muted);opacity:.6}
.compass .ct{font-family:var(--f-mono);font-size:12px;font-weight:600;fill:var(--ink);text-anchor:middle}
.gratlabel{font-family:var(--f-mono);font-size:6px;fill:var(--muted);opacity:.8;pointer-events:none}
.pin{pointer-events:none}
.pin path{fill:var(--route);stroke:var(--panel);stroke-width:1.2;vector-effect:non-scaling-stroke}
.pin circle{fill:var(--panel)}
.pin.drop{animation:pindrop .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes pindrop{from{opacity:0;translate:0 -14px}to{opacity:1;translate:0 0}}
@media (prefers-reduced-motion:reduce){.pin.drop{animation:none}}

@media (max-width:900px){.side{width:330px}.bp-end b{font-size:32px}}
/* telefono: mappa sopra, pannello sotto */
@media (max-width:760px){
  .stage{flex-direction:column}
  #mapbox{flex:1 1 auto;min-height:38vh}
  .side{width:auto;border-left:0;border-top:2px solid var(--ink);max-height:62vh;overflow:auto;padding-top:0}
  .track{display:none}
  .compass{width:54px;height:54px}
  .pass{margin:8px 10px}
  .bp-route{padding:6px 12px 4px} .bp-end b{font-size:28px}
  .pass h2{font-size:18px;margin:8px 12px 4px}
  .dock{margin:0 10px 10px}
  .sidehead{padding:6px 10px}
  .readouts{padding:6px 12px}
  .keys{display:none}
}
/* classifica della home come tabellone arrivi */
.today .board{background:var(--fids-bg);color:var(--fids-fg);border:0;box-shadow:var(--shadow)}
.today .board>.k{font-family:var(--f-display);font-weight:800;font-size:22px;letter-spacing:.04em;color:var(--fids-fg);padding-bottom:8px;border-bottom:1px solid var(--fids-line)}
.today .board .stat,.today .board .lb .pos,.today .board .lb .pc{color:var(--fids-dim)}
.today .board .lb li{border-bottom:1px solid var(--fids-line);border-radius:0;padding:6px 4px}
.today .board .lb li.me{background:var(--fids-line)}
.today .board .lb li:nth-child(-n+3) .pos{color:var(--fids-fg)}
.today .board .rt b{color:var(--fids-fg)}
.today .board .field{background:var(--fids-tile);border-color:var(--fids-line);color:var(--fids-fg)}

/* ================= CIELO, BIGLIETTO, ETICHETTA, QUOTA ================= */
:root{--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.pass,.ticket,.card,.dock,.ar{background-image:var(--grain)}

/* home: cielo illustrato */
#home{padding:0 0 48px}
.sky{position:relative;overflow:hidden;padding:24px max(16px,env(safe-area-inset-left,0px)) 56px max(16px,env(safe-area-inset-right,0px));border-bottom:2px solid var(--ink)}
.skyart{position:absolute;inset:0;width:100%;height:100%}
.sk0{stop-color:var(--sk0)} .sk1{stop-color:var(--sk1)} .sk2{stop-color:var(--paper)}
.sun0{stop-color:var(--sun0)} .sun1{stop-color:var(--sun1)}
.stars circle{fill:#fff;opacity:var(--star-o);animation:twinkle 4s ease-in-out infinite alternate}
.stars circle:nth-child(3n){animation-delay:-1.3s} .stars circle:nth-child(3n+1){animation-delay:-2.6s}
@keyframes twinkle{from{opacity:calc(var(--star-o) * .3)}to{opacity:var(--star-o)}}
.cl{fill:var(--cloud);opacity:.85;animation:drift 70s linear infinite}
.cl.c2{animation-duration:95s;animation-delay:-30s;opacity:.7} .cl.c3{animation-duration:120s;animation-delay:-60s} .cl.c4{animation-duration:80s;animation-delay:-10s;opacity:.6}
@keyframes drift{from{transform:translateX(-260px)}to{transform:translateX(1300px)}}
.contrail{fill:none;stroke:var(--cloud);stroke-width:2.5;stroke-dasharray:2 9;stroke-linecap:round;opacity:.8}
.skyplane{fill:var(--route)}
@media (prefers-reduced-motion:reduce){.cl,.stars circle{animation:none}.skyplane{display:none}}
.hero{position:relative;z-index:1;gap:20px}
.below{padding:28px max(16px,env(safe-area-inset-left,0px)) 0;gap:24px}
.today{grid-template-columns:1fr 1fr}
.fids-more{align-self:flex-start;margin:8px 6px 0;background:var(--fids-tile);color:var(--fids-fg);border-color:var(--fids-line)}

/* la carta d'imbarco del giorno */
.ticket{display:grid;grid-template-columns:1fr 220px;background-color:var(--panel);border-radius:16px;box-shadow:0 22px 60px rgba(10,20,30,.28);position:relative;
  -webkit-mask:radial-gradient(circle 13px at calc(100% - 220px) 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 13px at calc(100% - 220px) 100%,#0000 98%,#000) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle 13px at calc(100% - 220px) 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 13px at calc(100% - 220px) 100%,#0000 98%,#000) bottom/100% 51% no-repeat}
.tk-main{display:flex;flex-direction:column;min-width:0}
.tk-row1{display:flex;justify-content:space-between;align-items:center;background:var(--route);color:var(--on-route);font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:9px 22px}
.tk-row1 .flap{font-size:13px}
.tk-route{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:18px 22px 6px}
.tk-end{display:flex;flex-direction:column;min-width:0}
.tk-end.r{text-align:right;align-items:flex-end}
.tk-end small{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.tk-end b{font-family:var(--f-display);font-weight:900;font-size:clamp(48px,8vw,84px);line-height:.88;letter-spacing:.02em}
.tk-end b.q{color:var(--route);opacity:.35}
.tk-end span{font-size:13px;color:var(--muted)}
.tk-arc{width:100%;height:60px}
.tk-arc path:first-child{fill:none;stroke:var(--route);stroke-width:2;stroke-dasharray:5 6}
.tk-arc .pl{fill:var(--route)}
.tk-fields{display:grid;grid-template-columns:2fr 2fr 1fr 1fr;gap:6px 18px;padding:12px 22px;border-top:1px dashed var(--line)}
.tk-fields div{display:flex;flex-direction:column;min-width:0}
.tk-fields small{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.tk-fields b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-foot{display:flex;flex-wrap:wrap;gap:6px 16px;padding:0 22px 16px;font-size:13px;color:var(--muted)}
.tk-foot .streak{color:var(--route);font-weight:600}
.tk-stub{border-left:2px dashed var(--line);padding:18px 18px 14px;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:8px;text-align:center}
.tk-stub .k{font-size:11px}
.tk-now,.tk-pct{font-family:var(--f-display);font-weight:900;font-size:44px;line-height:.9;text-transform:uppercase;color:var(--route)}
.tk-stub .stars{font-size:22px;letter-spacing:4px}
.tk-marks{letter-spacing:2px}
.board-btn{font-size:20px;padding:16px 12px;border-radius:8px;font-family:var(--f-display);font-weight:800;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 6px 0 color-mix(in srgb,var(--route) 60%,#000)}
.board-btn:active{transform:translateY(3px);box-shadow:0 3px 0 color-mix(in srgb,var(--route) 60%,#000)}
.barcode{width:100%;height:38px;fill:var(--ink);opacity:.85;margin-top:6px}
@media (max-width:760px){
  .ticket{grid-template-columns:1fr;-webkit-mask:none;mask:none}
  .tk-stub{border-left:0;border-top:2px dashed var(--line)}
  .tk-fields{grid-template-columns:1fr 1fr}
  .tk-route{padding:14px 16px 4px;gap:8px} .tk-row1,.tk-fields,.tk-foot{padding-left:16px;padding-right:16px}
  .today{grid-template-columns:1fr}
}

/* mappa: ombra delle terre e alone sul paese */
.landshadow{fill:var(--land-shadow);pointer-events:none}
.glowl path{fill:none;pointer-events:none;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.glow-o{stroke-width:9;opacity:.55} .glow-i{stroke-width:2.4}
.glow-o.sel,.glow-i.sel,.glow-o.ok,.glow-i.ok{stroke:var(--route)}
.glow-o.ko,.glow-i.ko{stroke:var(--bad)}
.glow-o.sel{animation:breathe 1.6s ease-in-out infinite alternate}
@keyframes breathe{from{opacity:.25}to{opacity:.7}}

/* etichetta da bagaglio con l'arrivo */
.arrive{position:absolute;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:4;pointer-events:none}
.ar{position:relative;min-width:270px;max-width:340px;background-color:var(--panel);border:2px solid var(--ink);border-radius:10px 22px 22px 10px;padding:12px 18px 12px 46px;box-shadow:var(--shadow)}
.ar::before{content:"";position:absolute;left:14px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--sea);border:2px solid var(--ink)}
.ar::after{content:"";position:absolute;left:-40px;top:50%;width:48px;border-top:2px dashed var(--ink);transform:rotate(-8deg)}
.ar-top{display:flex;justify-content:space-between;gap:12px;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ar-top b{color:var(--ink);font-size:13px}
.ar-name{font-family:var(--f-display);font-weight:900;font-size:34px;text-transform:uppercase;line-height:1;margin:4px 0 6px}
.ar.ok .ar-name{color:var(--route)} .ar.ko .ar-name{color:var(--bad);text-decoration:line-through;text-decoration-thickness:3px}
.ar-row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.ar-km{font-family:var(--f-mono);font-weight:600;font-size:18px}
.ar.ok .ar-km{color:var(--route)}
.arrive.pop .ar{animation:tag .5s cubic-bezier(.3,1.5,.5,1)}
@keyframes tag{from{opacity:0;transform:translateY(24px) rotate(-6deg) scale(.9)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.arrive.pop .ar{animation:none}.glow-o.sel{animation:none}}
@media (max-width:760px){.arrive{bottom:10px}.ar{min-width:220px;padding:8px 14px 8px 38px}.ar-name{font-size:24px}.ar::after{display:none}}

/* curiosità */
.fact{background:var(--route-soft);border-radius:6px;padding:8px 10px}
.fact p{margin:2px 0 0;font-size:13px;line-height:1.4}

/* profilo di quota */
.alt{flex:1;min-height:0;margin:0 12px;display:flex;flex-direction:column;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--a4)}
.alt:empty{display:none}
.alt-head{display:flex;justify-content:space-between;align-items:center;padding:7px 12px;background:var(--fids-bg);color:var(--fids-fg);font-family:var(--f-display);font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:15px}
.altsvg{width:100%;flex:1;min-height:0;display:block}
.ab.b0{fill:var(--a0)} .ab.b1{fill:var(--a1)} .ab.b2{fill:var(--a2)} .ab.b3{fill:var(--a3)} .ab.b4{fill:var(--a4)}
.al{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.12em;fill:var(--ink);opacity:.65}
.ab.b3+.al,.ab.b4+.al{fill:#e6ebf7;opacity:.8}
.acl ellipse{fill:#fff;opacity:.75}
.aur{fill:none;stroke:#5fe3a1;stroke-width:5;opacity:.35;filter:blur(1.5px)}
.ast circle{fill:#fff;opacity:.8}
.rw{stroke:var(--ink);stroke-width:2;stroke-dasharray:10 6;opacity:.5}
.trail{fill:none;stroke:var(--route);stroke-width:2.5;stroke-dasharray:6 4;stroke-linecap:round}
.wp{stroke:var(--panel);stroke-width:1.5} .wp.ok{fill:var(--route)} .wp.ko{fill:var(--bad)} .wp.todo{fill:none;stroke:var(--ink);opacity:.4;stroke-dasharray:2 2}
.wl{font-family:var(--f-mono);font-size:9px;font-weight:600;text-anchor:middle;fill:var(--ink);paint-order:stroke;stroke:var(--panel);stroke-width:3px}
.wl.dim{opacity:.5} .wl.start{text-anchor:start}
.aplane{fill:var(--route);stroke:var(--panel);stroke-width:.8;transition:transform .8s cubic-bezier(.3,1.3,.5,1)}
/* il pannello scorre se lo schermo è basso; il profilo di quota ha la sua altezza */
.side{overflow-y:auto}
.alt{flex:none}
.altsvg{height:auto;flex:none}
@media (max-width:760px){.alt{order:5;margin:0 10px 10px}.ar-top{font-size:10px}.ar-top span{white-space:nowrap}}
/* telefono: il risultato copre tutto lo schermo, non solo la mappa */
@media (max-width:760px){#over{position:fixed;z-index:40}}
.actions .go{flex:1 1 130px}

/* ================= VOLO, DISTANZA, CONDIVISIONE, ADESIVI, REVISIONE ================= */
.go.wide2{width:100%;font-size:17px;padding:13px}
.picked{font-size:14px}
.plane{fill:var(--route);stroke:#fff;stroke-width:.9}
.plane-sh{fill:#000;pointer-events:none}
/* il volo più lungo nella revisione: contorno oro tratteggiato */
.c.best{stroke:#f2b705;stroke-width:2.6;stroke-dasharray:4 2}
.ring.best{stroke:#f2b705;stroke-width:3}

/* livelli di distanza: Lontanissimo! in cima, Vicino in fondo */
.dist{display:inline-block;font-family:var(--f-display);font-weight:800;font-size:14px;letter-spacing:.06em;text-transform:uppercase;border-radius:4px;padding:2px 8px;line-height:1.2;white-space:nowrap}
.dist.d0{background:linear-gradient(90deg,var(--route),#f5a300);color:#fff;box-shadow:0 0 14px color-mix(in srgb,var(--route) 55%,transparent)}
.dist.d1{background:var(--route);color:var(--on-route)}
.dist.d2{background:#2b6cb0;color:#fff}
.dist.d3{background:#3f8f6b;color:#fff}
.dist.d4{background:var(--line);color:var(--ink)}
.ar .dist{font-size:16px}
.ar-note{font-size:11px;color:var(--muted);margin-top:4px;font-family:var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
.rarl{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.legs .dist{font-size:10px;padding:1px 5px;margin-left:4px}

/* quota di volo illustrata */
.altsvg .sstars circle{fill:#fff;opacity:.85}
.altsvg .moon circle{fill:#f3efe0} .altsvg .moon .mc{fill:#d8d2bd}
.altsvg .sat rect{fill:#cfd6e4} .altsvg .sat .sp{fill:#3f6bd6}
.altsvg .aurora path{fill:none;stroke-width:9;opacity:.5;filter:blur(2.5px);animation:aur 7s ease-in-out infinite alternate}
.altsvg .aurora path+path{animation-duration:9s;opacity:.35}
@keyframes aur{from{transform:translateX(-12px)}to{transform:translateX(12px)}}
.altsvg .jets path{fill:none;stroke:#fff;stroke-width:1.2;stroke-dasharray:14 10;opacity:.35}
.altsvg .clouds2{fill:#fff}
.altsvg .lvl{stroke:#fff;stroke-width:.8;stroke-dasharray:2 4;opacity:.45}
.altsvg .lvlt text{font-family:var(--f-mono);font-size:8.5px;font-weight:600;letter-spacing:.12em;fill:#fff;text-anchor:end;paint-order:stroke;stroke:rgba(10,20,50,.55);stroke-width:2.5px}
.altsvg .ground .h2{fill:#7fb779} .altsvg .ground .h1{fill:#5e9e5f}
.altsvg .rwy{fill:#3b4148} .altsvg .rwl{stroke:#f4f4f4;stroke-width:1.4;stroke-dasharray:10 8}
.altsvg .tower rect{fill:#e9ecef;stroke:#3b4148;stroke-width:.8}
.altsvg .trees path{fill:#2f6b3a}
.altsvg .trail{fill:none;stroke:#fff;stroke-width:3;stroke-dasharray:1 6;stroke-linecap:round;opacity:.95}
.altsvg .wpt circle{fill:var(--route);stroke:#fff;stroke-width:1.6} .altsvg .wpt.ko circle{fill:var(--bad)}
.altsvg .wpt rect{fill:rgba(10,16,40,.78)} .altsvg .wpt text{font-family:var(--f-mono);font-size:8.5px;font-weight:600;fill:#fff;text-anchor:middle}
.altsvg .wpt.hl circle{stroke:#f2b705;stroke-width:3}
.altsvg .wfut{stroke:#fff;stroke-width:.8;stroke-dasharray:2 5;opacity:.35}
.altsvg .wnum{font-family:var(--f-mono);font-size:9px;fill:#fff;text-anchor:middle;opacity:.8}
.altsvg .aplane{fill:var(--route);stroke:#fff;stroke-width:.7;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
:root[data-theme="atlas"] .altsvg{filter:sepia(.35) saturate(.85)}
@media (prefers-reduced-motion:reduce){.altsvg .aurora path{animation:none}}

/* finestra di condivisione */
.shprev{display:grid;place-items:center;min-height:180px;background:var(--sea);border-radius:8px;padding:10px}
.shprev img{display:block;max-width:100%;max-height:46vh;border-radius:6px;box-shadow:var(--shadow)}
.shapps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sh{display:flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:8px;padding:11px 8px;font-weight:700;font-size:14px;color:#fff;text-decoration:none;cursor:pointer}
.sh.native{grid-column:1 / -1;background:var(--ink);color:var(--paper)}
.sh.wa{background:#25d366} .sh.ig{background:linear-gradient(45deg,#f58529,#dd2a7b 55%,#8134af)} .sh.tg{background:#229ed9}
.sh.x{background:#111} .sh.fb{background:#1877f2}
a.go{text-align:center;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}

/* adesivi */
.suitcase{display:grid;grid-template-columns:auto 1fr auto;gap:10px 18px;align-items:center;background:var(--panel);background-image:var(--grain)}
.sc-head{display:flex;flex-direction:column}
.sc-head b{font-family:var(--f-display);font-weight:800;font-size:22px;text-transform:uppercase;line-height:1}
.sc-row{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.stk.mini{font-size:26px;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--route-soft);border:2px dashed var(--route);transform:rotate(-6deg)}
.stk.mini:nth-child(2n){transform:rotate(5deg)}
.stkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;max-height:56vh;overflow:auto;padding:2px}
.stkc{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;padding:10px 8px;border-radius:10px;border:1px dashed var(--line);opacity:.55;filter:grayscale(1)}
.stkc i{font-style:normal;font-size:32px;line-height:1.1}
.stkc b{font-size:13px} .stkc span{font-size:11px;color:var(--muted)} .stkc small{font-size:10px;color:var(--route);font-family:var(--f-mono)}
.stkc.on{opacity:1;filter:none;border:2px solid var(--route);background:var(--route-soft)}
.newstk{border:2px dashed var(--route);border-radius:10px;padding:10px 12px;background:var(--route-soft)}
.newstk>div{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.newstk .stk{display:inline-flex;align-items:center;gap:6px;font-size:14px}
.newstk .stk i{font-style:normal;font-size:26px;animation:pop .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{from{transform:scale(0) rotate(-30deg)}to{transform:none}}
.stktoast{position:fixed;right:16px;top:16px;z-index:90;display:flex;gap:10px;align-items:center;background:var(--panel);border:2px solid var(--route);border-radius:12px;padding:10px 16px;box-shadow:var(--shadow);animation:stkin .5s cubic-bezier(.3,1.5,.5,1)}
.stktoast i{font-style:normal;font-size:30px} .stktoast span{display:flex;flex-direction:column} .stktoast small{font-size:11px;color:var(--route);text-transform:uppercase;letter-spacing:.1em;font-family:var(--f-mono)}
@keyframes stkin{from{opacity:0;transform:translateY(-20px) scale(.9)}to{opacity:1;transform:none}}
@media (max-width:760px){.suitcase{grid-template-columns:1fr}}

/* revisione */
.rev .revnav{display:flex;justify-content:space-between;align-items:center;gap:8px}
.rev .revnav .go{flex:none;padding:8px 12px}
.revrow{display:grid;grid-template-columns:1fr;gap:2px;padding:8px 10px;border-radius:6px;background:var(--paper)}
.revrow b{font-family:var(--f-display);font-weight:800;font-size:20px;text-transform:uppercase}
.revrow span:last-child{font-size:13px;color:var(--muted);display:flex;gap:8px;align-items:center}
.revrow.best{border:2px dashed #f2b705}
.today-n{display:block;margin:-2px 0 2px}
/* telefono: l'etichetta d'arrivo sta in alto, così il paese inquadrato al centro resta visibile */
@media (max-width:760px){
  .arrive{top:8px;bottom:auto}
  .ar{min-width:0;max-width:calc(100vw - 110px);padding:6px 12px 6px 32px;border-radius:8px 16px 16px 8px}
  .ar::before{left:10px;width:11px;height:11px;margin-top:-5.5px}
  .ar-name{font-size:20px;margin:2px 0 4px} .ar-note{display:none} .ar .dist{font-size:12px} .ar-km{font-size:15px}
}
.foot{display:flex;gap:16px;justify-content:center;font-size:13px;color:var(--muted);padding-top:8px;border-top:1px solid var(--line)}
.foot a{color:var(--muted)}
.namef-err{color:var(--bad);font-size:13px}