/* Pagina equipaggio: classifica, ultimi imbarcati, carte d'imbarco, fascicolo del personaggio.
   Usa anche css/lore.css per intestazione, ricerca e filtri. */

.ehero h1{max-width:18ch}
.crew{padding-block:3rem 5rem}
.crew h2{font-size:clamp(1.6rem,3.5vw,2.4rem);margin-bottom:.4rem}
.hint{color:var(--muted);font-style:italic;font-size:1rem;margin-bottom:1.2rem}

/* ---- in alto: classifica e ultimi imbarcati ---- */
.crew-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:3rem;padding-bottom:3.5rem;border-bottom:1px solid var(--line)}
@media (max-width:900px){.crew-top{grid-template-columns:1fr;gap:2.5rem}}
.crew section{padding:0;border:0}
.ranking{list-style:none;margin:0;padding:0;counter-reset:r}
.ranking li{counter-increment:r;border-top:1px solid var(--line)}
.ranking li:last-child{border-bottom:1px solid var(--line)}
.ranking a{text-decoration:none;color:inherit;box-sizing:border-box;width:100%;display:grid;grid-template-columns:2.2rem 44px minmax(0,1fr) auto;gap:.9rem;align-items:center;padding:.6rem .2rem;cursor:pointer}
.ranking a::before{content:counter(r);font:700 1.6rem/1 var(--display);color:var(--amber);text-align:center}
.ranking a:hover .rn,.ranking a:focus-visible .rn{color:var(--amber)}
.ranking a:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.rn{font:500 1.1rem/1.15 var(--display);color:var(--head);text-transform:uppercase;letter-spacing:.02em;display:block}
.rp{display:block;font-size:.92rem;color:var(--muted);font-style:italic}
.rh{font:500 1.05rem var(--display);color:var(--head);white-space:nowrap}
.rh small{font-weight:400;color:var(--muted);font-size:.85em}

.recent{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
@media (max-width:520px){.recent{grid-template-columns:1fr}}
.recent a{text-decoration:none;color:inherit;box-sizing:border-box;width:100%;display:grid;grid-template-columns:56px minmax(0,1fr);gap:.8rem;align-items:center;padding:.7rem;border:1px solid var(--line);background:var(--bg2);cursor:pointer}
.recent a:hover,.recent a:focus-visible{border-color:var(--amber)}
.recent .rd{display:block;font-size:.9rem;color:var(--muted)}

/* ---- ritratto (foto o iniziali) ---- */
.portrait{position:relative;aspect-ratio:3/4;background:#2A1F15;overflow:hidden;display:grid;place-items:center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48' viewBox='0 0 28 48'%3E%3Cpath d='M14 0l14 8v16l-14 8L0 24V8z M14 32l14 8v16 M14 32L0 40v16' fill='none' stroke='%233B2A1A' stroke-width='1'/%3E%3C/svg%3E")}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.portrait .ini{font:700 1.6em/1 "Oswald","Arial Narrow",sans-serif;color:#EDE6D6;letter-spacing:.04em}
.st-deceduto .portrait{filter:grayscale(1) contrast(.9)}
.ranking .portrait{font-size:.62rem}
.recent .portrait{font-size:.78rem}

/* ---- registro: carte d'imbarco ---- */
.registry{padding-top:3.5rem}
.census-line{color:var(--muted);margin:0 0 .5rem}
.crew-finder{flex-direction:column;align-items:flex-start}
.cards{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:1.6rem}
.cards li{scroll-margin-top:96px}

/* la carta: formato carta d'identità (85,6 × 54 mm), sempre su "carta" chiara */
.idcard{text-decoration:none;box-sizing:border-box;display:block;width:100%;aspect-ratio:1.586;cursor:pointer;position:relative;
  background:#EFE7D4;color:#1A140E;border:1px solid #C9B99A;border-radius:6px;overflow:hidden;
  box-shadow:0 1px 0 #fff8 inset,4px 5px 0 rgba(0,0,0,.35);transition:transform .15s}
.idcard:hover{transform:translateY(-2px) rotate(-.4deg)}
.idcard:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.idcard .bar{display:flex;justify-content:space-between;align-items:center;background:#1A140E;color:#EDE6D6;padding:.35rem .7rem;font:500 .72rem/1 "Oswald","Arial Narrow",sans-serif;letter-spacing:.12em;text-transform:uppercase}
.idcard .bar b{color:#FFA200;font-weight:500;letter-spacing:.06em}
.idcard .body{display:grid;grid-template-columns:30% minmax(0,1fr);gap:.8rem;padding:.7rem .75rem .4rem}
.idcard .portrait{border:1px solid #8A4B1E;font-size:1rem}
.idcard .nm{display:block;font:700 1.15rem/1.05 "Oswald","Arial Narrow",sans-serif;text-transform:uppercase;letter-spacing:.02em;margin:0}
.idcard .nick{display:block;font:italic .85rem/1.2 "Spectral",Georgia,serif;color:#6B5B4A;margin:.1rem 0 .35rem}
.idcard dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.1rem .5rem;margin:0;font:400 .78rem/1.3 "Spectral",Georgia,serif}
.idcard dt{color:#6B5B4A;font-style:italic}
.idcard dd{margin:0;color:#1A140E;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.idcard .mrz{position:absolute;left:0;right:0;bottom:0;padding:.3rem .75rem;font:400 .68rem/1.25 ui-monospace,Consolas,monospace;letter-spacing:.12em;color:#3B2A1A;background:#E2D8C3;white-space:nowrap;overflow:hidden}
.idcard .hexwm{position:absolute;right:-18px;bottom:6px;width:120px;height:120px;opacity:.08;pointer-events:none}
.st-disperso .idcard{background:#E6DFCF}
.st-deceduto .idcard{background:#DAD4C8;color:#3B342C}

/* timbri */
.stamp{position:absolute;right:.7rem;bottom:2.1rem;transform:rotate(-10deg);font:700 .82rem/1 "Oswald","Arial Narrow",sans-serif;letter-spacing:.14em;text-transform:uppercase;
  padding:.3rem .6rem;border:3px double currentColor;border-radius:4px;opacity:.7;mix-blend-mode:multiply;background:transparent;pointer-events:none}
.stamp.ok{color:#2C5A75}
.stamp.lost{color:#8A4B1E}
.stamp.dead{color:#5a1a14}

/* ---- fascicolo (finestra) ---- */
.dossier{width:min(880px,100% - 2rem);max-height:min(88vh,900px);padding:0;border:1px solid var(--line);background:var(--bg);color:var(--text);border-radius:4px}
.dossier::backdrop{background:rgba(7,7,6,.78)}
.dossier .dhead{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.8rem 1.2rem;border-bottom:1px solid var(--line);background:var(--bg2);position:sticky;top:0;z-index:1}
.dossier .dhead p{margin:0;font:400 .95rem var(--display);letter-spacing:.06em;color:var(--muted)}
.dossier .x{font:500 .95rem var(--display);background:transparent;color:var(--head);border:1px solid var(--line);padding:.4rem .8rem;cursor:pointer;border-radius:2px}
.dossier .dbody{display:grid;grid-template-columns:240px minmax(0,1fr);gap:2rem;padding:1.6rem 1.4rem 2rem}
@media (max-width:700px){.dossier .dbody{grid-template-columns:1fr}.dossier .dside{max-width:260px}}
.dossier .portrait{font-size:2.6rem;border:1px solid var(--line)}
.dossier .facts{margin:1rem 0 0;font-size:.98rem}
.dossier .facts div{display:flex;justify-content:space-between;gap:1rem;padding:.35rem 0;border-bottom:1px dotted var(--line)}
.dossier .facts span:first-child{color:var(--muted);font-style:italic}
.dossier .facts span:last-child{color:var(--head);text-align:right}
.dossier h2{font-size:clamp(1.8rem,4vw,2.6rem);margin:0}
.dossier .dnick{font-style:italic;color:var(--muted);margin:.2rem 0 1.2rem}
.dossier dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.45rem 1.2rem;margin:0 0 1.5rem;font-size:1.02rem}
.dossier dt{color:var(--muted);font-style:italic}
.dossier dd{margin:0;color:var(--head)}
.dossier h3{font-size:1.05rem;color:var(--amber);letter-spacing:.08em;margin:1.4rem 0 .5rem}
.dossier .bg p{font-size:1.05rem}
.dossier .tags{display:flex;flex-wrap:wrap;gap:.35rem;list-style:none;padding:0;margin:0}
.dossier .tags li{font:400 .88rem var(--display);letter-spacing:.03em;border:1px solid var(--line);padding:.15rem .55rem;background:var(--bg2);color:var(--head)}
.dossier .dfoot{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.8rem}
.badge{display:inline-block;font:500 .85rem var(--display);letter-spacing:.05em;padding:.15rem .55rem;border:1px solid}
.badge.a-bordo{color:var(--sea);border-color:var(--sea)}
.badge.disperso{color:var(--rust);border-color:var(--rust)}
.badge.deceduto{color:var(--muted);border-color:var(--muted)}

/* chiamata finale */
.join{margin-top:4rem;padding-top:3rem!important;border-top:1px solid var(--line)!important}
.join .actions{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.5rem}
.dossier .btn{background:transparent;cursor:pointer}

/* ---- gruppi ---- */
.groups{padding-bottom:3.5rem!important;margin-bottom:3.5rem;border-bottom:1px solid var(--line)!important}
.glist{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:1.2rem}
.gcard{display:grid;grid-template-columns:72px minmax(0,1fr);gap:1rem;align-items:start;padding:1.1rem 1.2rem;background:var(--bg2);border:1px solid var(--line);border-left:5px solid var(--g,var(--rust));text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
a.gcard:hover,a.gcard:focus-visible{border-color:var(--amber);border-left-color:var(--g,var(--rust));transform:translateY(-2px)}
.gcard.on{outline:2px solid var(--amber);outline-offset:2px}
.gcrest{width:72px;height:72px;display:grid;place-items:center;background:var(--g,var(--rust));clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.gcrest img{width:100%;height:100%;object-fit:contain;background:var(--bg)}
.gini{font:700 1.4rem/1 var(--display);color:#EDE6D6;letter-spacing:.04em}
.gtype{display:block;font:400 .82rem var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--amber)}
.gname{display:block;font:700 1.5rem/1.05 var(--display);text-transform:uppercase;color:var(--head);margin:.15rem 0 .4rem}
.gdesc{display:block;font-size:.98rem;line-height:1.5}
.gcount{display:block;margin-top:.5rem;font:400 .9rem var(--display);letter-spacing:.04em;color:var(--muted)}

/* colore del gruppo sulle carte */
.idcard .bar{border-bottom:4px solid var(--g,#8A4B1E)}
.idcard img.wm{position:absolute;right:-10px;bottom:10px;width:110px;height:110px;object-fit:contain;opacity:.13;pointer-events:none;filter:grayscale(1)}
.idcard .hexwm{color:var(--g,#1A140E);opacity:.14}
.dossier .dhead{border-top:4px solid var(--g,var(--rust))}
.registry h2,.groups h2{scroll-margin-top:calc(env(safe-area-inset-top,0px) + 90px)}