/* esca — almanacco di mare. Sistema visivo dell'handoff Claude Design:
   fondo alba→mare, card "glass", verde/ambra/rosso a semaforo, Plex Mono per i dati. */
:root {
  --ink:#26333D; --ink2:#3E4C57; --muted:#5E6D77; --faint:#8A97A0; --faint2:#9AA6AE;
  --blue:#1E6CA4; --blue-strong:#155E8C; --amber:#C68A12; --red:#C0442E;
  --card:rgba(255,255,255,.55); --card-brd:rgba(255,255,255,.6);
  --sun:#FCE4CC;
  --sans:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --shadow:0 10px 30px -14px rgba(20,40,60,.25);
}

* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body {
  font-family:var(--sans); color:var(--ink);
  background:linear-gradient(180deg,#FCE4CC 0%,#F5DAD9 22%,#E6DCE8 44%,#D2E2F1 70%,#C3DBEF 100%);
  background-attachment:fixed; min-height:100vh; padding:0 0 44px;
  -webkit-font-smoothing:antialiased;
}
.hidden { display:none !important; }
.wrap { max-width:1040px; margin:0 auto; padding:0 20px; }
.mono { font-family:var(--mono); font-variant-numeric:tabular-nums; }

.card {
  background:var(--card); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--card-brd); border-radius:26px; box-shadow:var(--shadow);
}
.sec { padding:20px; margin-top:14px; }
.sec-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.sec-title { font-size:17px; font-weight:800; letter-spacing:-.01em; }
.sec-hint { font-size:12.5px; font-weight:600; color:var(--muted); }
.link { font-size:12.5px; font-weight:700; color:var(--blue); text-decoration:none; }
.foot { text-align:center; margin-top:24px; font-size:11.5px; line-height:1.6; color:var(--faint); font-weight:500; }
.btn { margin-top:14px; background:rgba(255,255,255,.7); border:1.5px solid var(--card-brd); border-radius:14px;
  padding:10px 16px; font-family:var(--sans); font-size:13.5px; font-weight:700; color:var(--ink); cursor:pointer; }

/* ---- top bar ---- */
.topbar { display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; padding-top:22px; padding-bottom:6px; }
.brand { display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); margin-right:auto; }
.top-loc { order:1; } .topmenu { order:2; }
.logo { width:28px; height:28px; border-radius:9px; background:var(--ink); display:grid; place-items:center; }
.hook { width:9px; height:9px; border:2px solid var(--sun); border-radius:0 0 9px 0; border-top:none; border-left:none; transform:rotate(8deg); }
.brand-name { font-weight:800; font-size:18px; letter-spacing:-.01em; }
.kb-chip { display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.55); backdrop-filter:blur(10px);
  padding:7px 13px; border-radius:20px; font-size:12.5px; font-weight:600; color:var(--muted); box-shadow:0 2px 8px rgba(20,40,60,.06); }
.kb-chip .dot { width:7px; height:7px; border-radius:50%; background:var(--blue); flex:none; }
/* menu persistente della top-bar: Logga (primario) · I miei log · utente.
   #topLoc è lo slot contestuale (chip posizione) mostrato solo in analisi. */
.top-loc:empty { display:none; }
.topmenu { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
/* pulsanti di navigazione: pill bianche uguali (nessuna priorità di colore). Il nero
   è per le AZIONI primarie (.btn-primary), il blu solo per accenti/link. */
.menu-btn { display:inline-flex; align-items:center; text-decoration:none; white-space:nowrap;
  background:rgba(255,255,255,.92); border:1px solid rgba(20,40,60,.1); color:var(--ink);
  font-size:12.5px; font-weight:700; padding:9px 16px; border-radius:999px; cursor:pointer;
  box-shadow:0 2px 8px rgba(20,40,60,.08); transition:background .15s, transform .15s, box-shadow .15s; }
.menu-btn:hover { background:#fff; transform:translateY(-1px); box-shadow:0 5px 14px -4px rgba(20,40,60,.2); }
/* identità utente + logout: a fondo pagina, centrato (fuori dalla top-bar, dove un
   nome lungo romperebbe l'allineamento delle pill). */
.user-foot { text-align:center; font-size:12.5px; font-weight:600; color:var(--muted); }
.user-foot a { color:var(--blue); text-decoration:none; font-weight:700; }
.user-foot.fixed { position:fixed; left:50%; bottom:14px; transform:translateX(-50%); z-index:25;
  background:rgba(255,255,255,.9); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  padding:7px 16px; border-radius:999px; box-shadow:0 4px 14px -6px rgba(20,40,60,.3);
  border:1px solid rgba(20,40,60,.06); max-width:calc(100% - 32px); }
/* chip posizione = stessa pill dei pulsanti del menu (altezza/raggio/peso coerenti) */
.loc-chip { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; max-width:100%;
  background:rgba(255,255,255,.92); border:1px solid rgba(20,40,60,.1); backdrop-filter:blur(10px);
  padding:9px 16px; border-radius:999px; font-size:12.5px; font-weight:700; color:var(--ink);
  box-shadow:0 2px 8px rgba(20,40,60,.08); cursor:pointer; }
.loc-chip .loc-name { overflow:hidden; text-overflow:ellipsis; }
.loc-chip .sep { width:1px; height:12px; background:rgba(38,51,61,.2); margin:0 3px; flex:none; }
.loc-chip .chg { color:var(--muted); font-weight:600; flex:none; }

/* ---- home hero ---- */
.hero-home { padding:30px 28px 26px; margin-top:14px; }
.kicker { font-size:12.5px; font-weight:700; color:var(--blue); letter-spacing:.08em; text-transform:uppercase; }
.hero-title { font-size:38px; font-weight:800; letter-spacing:-.025em; margin-top:8px; line-height:1.02; }
.hero-sub { font-size:15px; line-height:1.55; color:var(--muted); font-weight:500; margin-top:10px; max-width:560px; }
.hero-sub b { color:var(--ink); }
.search { display:flex; align-items:center; gap:11px; background:rgba(255,255,255,.7); border:1.5px solid rgba(255,255,255,.8);
  border-radius:999px; padding:11px 12px 11px 18px; margin-top:20px; box-shadow:0 2px 10px rgba(20,40,60,.06); }
.search input { flex:1; background:transparent; border:none; outline:none; color:var(--ink); font-family:var(--sans);
  font-size:15.5px; font-weight:500; min-width:0; }
.search-key { font-size:11px; font-weight:700; color:#fff; background:var(--ink); border:none; border-radius:999px; padding:9px 16px; flex:none; cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent; transition:background .12s, transform .12s; }
.search-key:hover { background:var(--ink2); }
.search-key:active { background:var(--ink2); transform:scale(.96); }
.search.busy .search-key { opacity:.4; }
.search-msg { font-size:12.5px; font-weight:600; color:var(--muted); min-height:16px; margin-top:7px; padding-left:4px; }
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin-top:16px; }
.step { display:flex; gap:11px; background:rgba(255,255,255,.5); border-radius:16px; padding:13px 15px; }
.step-n { font-size:12px; font-weight:800; color:var(--blue); font-family:var(--mono); }
.step-t { font-size:13.5px; font-weight:700; }
.step-d { font-size:12px; color:var(--muted); font-weight:500; margin-top:2px; line-height:1.35; }

.home-map { height:340px; border-radius:16px; overflow:hidden; }

.recents { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:10px; }
.recent { text-decoration:none; color:var(--ink); display:block; background:rgba(255,255,255,.6); border:1.5px solid rgba(255,255,255,.7);
  border-radius:18px; padding:15px 16px; cursor:pointer; transition:transform .15s, box-shadow .15s; }
.recent:hover { transform:translateY(-2px); box-shadow:0 8px 20px -12px rgba(20,40,60,.3); }
.recent-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.recent-name { font-size:16px; font-weight:800; letter-spacing:-.01em; }
.recent-coord { font-family:var(--mono); font-size:11px; color:var(--faint); font-weight:500; margin-top:2px; }
.recent-badge { border-radius:14px; min-width:54px; height:50px; display:flex; align-items:center; justify-content:center; flex:none; }
.recent-badge span { font-family:var(--mono); font-size:26px; font-weight:700; color:var(--ink); letter-spacing:-.02em; line-height:1; }
.recent-foot { display:flex; align-items:center; gap:7px; margin-top:12px; }
.recent-sp { font-size:12px; font-weight:700; }
.tech-pill { display:inline-flex; white-space:nowrap; font-size:11.5px; font-weight:700; color:var(--blue);
  background:rgba(30,108,164,.12); padding:6px 13px; border-radius:999px; }
/* solo nella lista specie: pill a destra che non deve mai rompere la riga (cap + ellissi) */
.prey-top .tech-pill { flex:0 0 auto; max-width:48%; overflow:hidden; text-overflow:ellipsis; }

/* ---- leaflet skin ---- */
.leaflet-container { background:#D2E2F1 !important; font-family:var(--sans) !important; border-radius:16px; }
.leaflet-control-attribution { background:rgba(255,255,255,.6) !important; color:var(--muted) !important; font-size:8px !important; }
.leaflet-control-attribution a { color:var(--blue) !important; }
.esc-cell { background:none; border:none; }

/* ---- home variante: mappa a tutto schermo + overlay ---- */
.topbar { position:relative; z-index:20; pointer-events:none; }   /* i vuoti della topbar lasciano passare i gesti alla mappa */
.topbar .brand, .topbar .top-loc, .topbar .topmenu { pointer-events:auto; }
.home-map-full { position:fixed; inset:0; z-index:1; border-radius:0 !important; }
/* mappa come SFONDO (landing, accedi): non interattiva, con velo alba→mare che
   la lega al brand e fa staccare le card in vetro sopra. */
.bg-map { position:fixed; inset:0; z-index:0; }
.bg-map.leaflet-container { border-radius:0 !important; background:#D2E2F1 !important; }
.bg-veil { position:fixed; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(252,228,204,.62) 0%, rgba(230,220,232,.5) 45%, rgba(195,219,239,.6) 100%); }
body.has-bgmap .page { position:relative; z-index:2; }
/* velo scuro sfumato nella fascia ALTA (solo su mappa): migliora la leggibilità
   di logo e pill sopra la mappa chiara. Corto, così non tinge le card sotto. */
body.map-visible::before, body.has-bgmap::before {
  content:""; position:fixed; top:0; left:0; right:0; height:78px; z-index:15; pointer-events:none;
  background:linear-gradient(180deg, rgba(20,40,60,.30) 0%, rgba(20,40,60,0) 100%); }
/* sopra la mappa i chip della topbar vanno resi più solidi per leggerli bene */
.map-mode .kb-chip { background:rgba(255,255,255,.9); border:1px solid rgba(20,40,60,.06); }
.home-map-full.leaflet-container { border-radius:0 !important; }
/* due blocchi separati: ricerca (compatta, in alto) + tutorial (sotto, chiudibile) */
.map-overlay { position:fixed; z-index:10; top:92px; left:0; right:0; display:flex; flex-direction:column; align-items:center; gap:10px; padding:0 16px; pointer-events:none; }
/* sopra la mappa chiara la card translucida sparisce: qui la rendiamo quasi opaca
   con bordo netto e ombra più marcata, così stacca bene e i bordi si vedono */
.ov-search, .ov-tut { pointer-events:auto; width:min(560px,100%);
  background:rgba(255,255,255,.94); border:1px solid rgba(20,40,60,.09);
  box-shadow:0 16px 38px -16px rgba(20,40,60,.45); }
.ov-search { padding:14px 18px 13px; }
.ov-search .kicker { display:block; }
.ov-title { font-size:20px; font-weight:800; letter-spacing:-.02em; margin:3px 0 0; }
/* la card è bianca piena: il campo va "rientrato" con fondo e bordo definiti */
.ov-search .search { margin-top:11px; background:rgba(20,40,60,.05); border:1px solid rgba(20,40,60,.13); box-shadow:none; }
.ov-search .search:focus-within { border-color:rgba(30,108,164,.5); background:rgba(30,108,164,.05); }
.ov-tut { position:relative; padding:15px 40px 16px 18px; max-height:calc(100vh - 230px); overflow-y:auto; }
.ov-tut .kicker { display:block; margin-bottom:10px; }
.ov-tut .steps { margin-top:0; }
.tut-close { position:absolute; top:11px; right:11px; width:28px; height:28px; display:grid; place-items:center; border:none;
  border-radius:50%; background:rgba(38,51,61,.06); color:var(--muted); cursor:pointer; transition:background .15s, color .15s; }
.tut-close:hover { background:rgba(38,51,61,.12); color:var(--ink); }
.tut-close svg { width:13px; height:13px; }
.map-hint { position:fixed; z-index:30; left:50%; bottom:56px; transform:translateX(-50%); pointer-events:none; max-width:calc(100% - 32px); }
.map-hint span { display:inline-block; background:rgba(255,255,255,.9); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:var(--muted); font-size:12px; font-weight:600; padding:8px 14px; border-radius:16px; border:1px solid rgba(20,40,60,.06);
  box-shadow:0 6px 18px -6px rgba(20,40,60,.28); white-space:nowrap; }
@media (prefers-reduced-motion: reduce) { .tut-body, .tut-toggle .chev { transition:none; } }
@media (max-width:560px) { .map-hint span { white-space:normal; text-align:center; } }

/* ---- analisi: hero specie-driven ---- */
.an-hero { padding:22px 24px; margin-top:14px; }
.an-hero-head { display:flex; align-items:center; justify-content:space-between; gap:10px 12px; flex-wrap:wrap; margin-bottom:16px; }
.an-hero-head .t { font-size:17px; font-weight:800; letter-spacing:-.01em; flex:1 1 auto; min-width:0; }
.badge-best { display:flex; align-items:center; gap:6px; background:rgba(21,94,140,.16); padding:6px 12px; border-radius:16px;
  font-size:12px; font-weight:700; color:var(--blue-strong); white-space:nowrap; }
.badge-rank { background:rgba(38,51,61,.07); padding:6px 12px; border-radius:16px; font-size:12px; font-weight:700; color:var(--muted); white-space:nowrap; }
.an-hero-row { display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.score-box { display:flex; align-items:flex-start; gap:6px; border-radius:22px; padding:12px 22px 14px; }
.score-box .n { font-family:var(--mono); font-size:72px; font-weight:600; line-height:.82; letter-spacing:-.03em; color:var(--ink); }
.score-box .d { font-family:var(--mono); font-size:16px; font-weight:500; color:var(--faint); margin-top:7px; }
.verdict { flex:1; min-width:240px; }
.verdict .vt { font-size:23px; font-weight:800; letter-spacing:-.01em; }
.verdict .vw { font-size:14.5px; font-weight:700; color:var(--ink2); margin-top:3px; }
.verdict .vw b { color:var(--blue); font-weight:700; }
.verdict .vd { font-size:14px; line-height:1.5; color:var(--muted); font-weight:500; margin-top:9px; }

.spstrip { display:flex; gap:7px; overflow-x:auto; margin-top:18px; padding-bottom:2px; }
.spstrip::-webkit-scrollbar { height:0; }
.spchip { flex:none; cursor:pointer; display:flex; align-items:center; gap:8px; padding:8px 13px; border-radius:15px;
  background:rgba(255,255,255,.4); border:1.5px solid rgba(255,255,255,.55); transition:all .15s; }
.spchip.sel { background:rgba(255,255,255,.9); border-color:var(--blue); }
.spchip .cdot { width:8px; height:8px; border-radius:50%; flex:none; }
.spchip .cname { font-size:13px; font-weight:700; color:var(--muted); white-space:nowrap; }
.spchip.sel .cname { color:var(--ink); }
.spchip .cscore { font-family:var(--mono); font-size:13.5px; font-weight:700; color:var(--ink); }

.astro { display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
.astro span { display:flex; align-items:center; gap:7px; background:rgba(255,255,255,.6); padding:7px 13px; border-radius:14px; font-size:12.5px; font-weight:600; }
.astro .adot { width:7px; height:7px; border-radius:50%; }
.astro .aico { width:16px; height:16px; flex:none; display:block; margin:-1px 0; }

/* ---- analisi: giorno + curva ---- */
/* strip scorrevole su mobile (7 giorni non stanno in larghezza), griglia da ≥600px */
.day-sel { display:flex; gap:6px; overflow-x:auto; scroll-snap-type:x proximity; margin-bottom:18px; -webkit-overflow-scrolling:touch; }
.day-sel::-webkit-scrollbar { height:0; }
.day-chip { flex:0 0 auto; min-width:60px; scroll-snap-align:start; cursor:pointer; border-radius:15px; padding:11px 8px 10px; text-align:center;
  background:rgba(255,255,255,.35); border:1.5px solid rgba(255,255,255,.5); transition:all .15s; }
@media (min-width:600px) {
  .day-sel { display:grid; grid-template-columns:repeat(7,1fr); overflow:visible; }
  .day-chip { min-width:0; padding-left:4px; padding-right:4px; }
}
.day-chip.sel { background:rgba(255,255,255,.85); border-color:var(--blue); }
.day-chip .star { font-size:12px; font-weight:700; height:14px; }
.day-chip .dn { font-size:12.5px; font-weight:600; margin-top:1px; }
.day-chip .dp { display:inline-block; border-radius:9px; padding:2px 9px; margin-top:5px; }
.day-chip .dp span { font-family:var(--mono); font-size:19px; font-weight:700; color:var(--ink); letter-spacing:-.02em; }

.chart-wrap { position:relative; }
#chartHit { position:relative; touch-action:none; cursor:crosshair; }
.chart-tip { position:absolute; top:0; transform:translateX(-50%); background:var(--ink); color:#fff; padding:5px 11px;
  border-radius:12px; font-size:12.5px; font-weight:800; white-space:nowrap; pointer-events:none;
  box-shadow:0 6px 16px rgba(20,40,60,.28); z-index:5; }
.legend { display:flex; gap:16px; flex-wrap:wrap; padding:6px 4px 0 44px; }
.legend span { display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color:var(--muted); }
.legend .lb { display:inline-block; }

.day-windows { margin-top:16px; display:flex; flex-direction:column; gap:8px; }
.win { display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; background:rgba(255,255,255,.5); border-radius:15px; padding:12px 15px; }
.win-score { border-radius:11px; min-width:46px; height:44px; display:flex; align-items:center; justify-content:center; flex:none; }
.win-score span { font-family:var(--mono); font-size:21px; font-weight:700; color:var(--ink); letter-spacing:-.02em; }
.win-body { flex:1 1 55%; min-width:0; }
.win-time { font-size:14.5px; font-weight:700; }
.win-cond { font-size:12.5px; color:var(--muted); font-weight:500; margin-top:1px; }
.win-note { font-size:12.5px; color:var(--muted); font-weight:600; background:rgba(255,255,255,.5); border-radius:12px; padding:9px 13px; }
.win-note b { color:var(--ink); }

/* ---- griglia condizioni + scomposizione ---- */
.grid2 { display:flex; gap:14px; flex-wrap:wrap; margin-top:14px; }
.grid2 > * { flex:1 1 340px; min-width:0; margin-top:0; }
.cond-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
.cond { background:rgba(255,255,255,.6); border-radius:15px; padding:12px 13px; display:flex; flex-direction:column; justify-content:center; min-height:64px; }
.cond .k { font-size:11px; color:var(--muted); font-weight:600; line-height:1.2; }
.cond .v { font-family:var(--mono); font-size:19px; font-weight:600; letter-spacing:-.02em; margin-top:5px; line-height:1; }
.cond .v .u { font-size:10.5px; font-weight:500; color:var(--faint); }

.brk { display:flex; flex-direction:column; gap:12px; }
.brk-row .rl { display:flex; justify-content:space-between; font-size:12.5px; margin-bottom:5px; }
.brk-row .rl .bk { color:var(--ink2); font-weight:600; }
.brk-row .rl .bv { font-family:var(--mono); font-weight:600; color:var(--ink); }
.brk-track { height:6px; background:rgba(38,51,61,.08); border-radius:4px; overflow:hidden; }
.brk-fill { height:100%; border-radius:4px; }
/* Riva↔largo: asse (riva sx · largo dx) con pallino sulla posizione preferita della specie */
.shore-row .rl { margin-bottom:8px; }
.shore-axis { display:flex; align-items:center; gap:9px; }
.shore-axis .se { font-size:11px; font-weight:600; color:var(--muted); flex:none; }
.shore-track { position:relative; flex:1; height:6px; background:rgba(38,51,61,.09); border-radius:4px; }
.shore-ideal { position:absolute; top:50%; z-index:1; width:2.5px; height:17px; border-radius:2px; background:var(--ink2); transform:translate(-50%,-50%); }
.shore-dot { position:absolute; top:50%; z-index:2; width:13px; height:13px; border-radius:50%; border:2.5px solid #fff;
  transform:translate(-50%,-50%); box-shadow:0 1px 4px rgba(20,40,60,.35); }
.shore-legend { display:flex; gap:16px; margin-top:9px; }
.shore-legend span { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:var(--muted); }
.shore-legend .lg-dot { width:9px; height:9px; border-radius:50%; border:1.5px solid #fff; box-shadow:0 0 0 1px rgba(20,40,60,.18); flex:none; }
.shore-legend .lg-tick { width:2.5px; height:12px; border-radius:2px; background:var(--ink2); flex:none; }

.habitat { display:flex; align-items:center; justify-content:space-between; gap:10px; border-radius:14px; padding:11px 14px; margin-top:14px; }
.habitat .ht { font-size:12.5px; font-weight:700; color:var(--ink2); }
.habitat .hs { font-size:11.5px; color:var(--muted); font-weight:500; margin-top:1px; }
.habitat .hx { font-family:var(--mono); font-size:19px; font-weight:700; color:var(--ink); letter-spacing:-.01em; white-space:nowrap; }

/* ---- cosa pescare ---- */
.prey { cursor:pointer; border:1.5px solid rgba(255,255,255,.55); background:rgba(255,255,255,.6); border-radius:16px; padding:12px 14px; transition:all .15s; }
.prey.sel { background:rgba(30,108,164,.09); border-color:var(--blue); }
.prey-top { display:flex; align-items:center; gap:12px; }
.prey-badge { border-radius:14px; min-width:48px; height:48px; display:flex; align-items:center; justify-content:center; flex:none; }
.prey-badge span { font-family:var(--mono); font-size:22px; font-weight:700; color:var(--ink); letter-spacing:-.02em; line-height:1; }
.prey-main { flex:1 1 auto; min-width:0; }
.prey-name { font-size:15.5px; font-weight:800; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.prey-latin { font-size:11.5px; color:var(--faint); font-style:italic; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.prey-list { display:flex; flex-direction:column; gap:8px; }
.prey-bar { height:5px; background:rgba(38,51,61,.08); border-radius:3px; overflow:hidden; margin-top:10px; }
.prey-bar > span { display:block; height:100%; border-radius:3px; }

.cell-card { display:flex; flex-direction:column; }
.cell-map { flex:1; min-height:200px; border-radius:16px; overflow:hidden; }
.cell-meta { display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.cell-meta .m { font-size:12px; font-weight:600; color:var(--ink2); background:rgba(255,255,255,.6); padding:6px 11px; border-radius:13px; }
.cell-meta .m.mono { font-family:var(--mono); font-size:11px; font-weight:500; }

.land-title { font-size:22px; font-weight:800; letter-spacing:-.01em; }
.land-sub { font-size:14px; color:var(--muted); font-weight:500; margin-top:6px; line-height:1.5; }

/* ---- skeleton ---- */
.sk { display:block; background:linear-gradient(90deg,rgba(255,255,255,.35),rgba(255,255,255,.6),rgba(255,255,255,.35));
  background-size:200% 100%; animation:sh 1.3s ease-in-out infinite; border-radius:12px; }
@keyframes sh { 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }
.sk-row { display:flex; justify-content:space-between; gap:10px; margin-bottom:14px; }
.sk-title { width:180px; height:20px; } .sk-hint { width:90px; height:16px; }
.sk-big { width:100%; height:96px; margin-bottom:14px; }
.sk-chips { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:14px; }
.sk-chip { height:44px; } .sk-chart { width:100%; height:200px; }
.sk-note { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); font-weight:600; margin-top:12px; }
.spin { width:14px; height:14px; border:2px solid rgba(38,51,61,.2); border-top-color:var(--blue); border-radius:50%; display:inline-block; animation:sp .8s linear infinite; }
@keyframes sp { to { transform:rotate(360deg); } }

@media (max-width:560px) {
  .hero-title { font-size:30px; }
  .score-box .n { font-size:60px; }
  .cond-grid { grid-template-columns:repeat(2,1fr); }
  /* top-bar mobile: logo + menu sulla PRIMA riga; la chip posizione va a tutta
     larghezza sulla SECONDA riga (niente wrap che stringe il logo). */
  .topbar { padding-top:16px; }
  .menu-btn { padding:8px 13px; font-size:12px; }
  .user-chip .uname { display:none; }        /* su mobile resta solo "esci" */
  .topmenu { order:1; }
  .top-loc { order:2; flex:1 1 100%; }
  .top-loc .loc-chip { width:100%; }
  .top-loc .loc-label { display:none; }      /* su mobile: solo nome + "cambia" */
  .map-overlay { top:78px; }
  /* lista specie: badge/pill più compatti così il NOME resta leggibile e nulla si rompe */
  .prey-top { gap:10px; }
  .prey-badge { min-width:42px; height:42px; }
  .prey-badge span { font-size:19px; }
  .prey-name { font-size:15px; }
  .prey-top .tech-pill { max-width:46%; padding:5px 11px; }
}