/* Pixel Caribe - stile pulito alla "OGame classico", in versione pixel art.
   - Pannelli piatti e scuri, semitrasparenti sopra lo sfondo della scena
   - Il pixel sta nei bordi a gradino (box-shadow da 2px), nei titoli, nei numeri e negli sprite
   - Testo in un font di sistema, per la massima leggibilità */

/* Font pixel (facoltativo, vedi public/fonts/LEGGIMI.txt). Se manca si usa il monospace di sistema. */
@font-face {
    font-family: "Press Start 2P";
    src: url("../fonts/PressStart2P-Regular.woff2") format("woff2");
    font-display: swap;
}

:root {
    /* Superfici CHIARE (pannelli, menu, moduli): legno chiaro con testo marrone scuro */
    --bg: #1d0f14;
    --panel: rgba(240, 222, 186, .97);
    --panel-solid: #f0deba;
    --panel-head: #b14945;          /* barre dei titoli: rosso spento */
    --field: #fbf3df;               /* sfondo di caselle e moduli */
    --line: #6b4430;
    --line-hi: #a06a45;
    --text: #3a2217;
    --dim: #765542;
    --head: #2a150c;
    --accent: #9c3a37;              /* link ed evidenziazioni sulle superfici chiare */
    --accent-d: #6e2523;
    --good: #2f6f3a;
    --bad: #a6322a;
    --ink: #1a0b14;                 /* contorni e ombre dei bordi pixel */
    --red: #b14945;                 /* rosso spento: pulsanti principali e barre dei titoli */
    --red-d: #7e2f33;
    --red-hi: #9a3a38;
    --cream: #fff3d6;

    --pixel: "Press Start 2P", ui-monospace, "Cascadia Mono", Consolas, Menlo, "Courier New", monospace;
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Se i tuoi sfondi NON sono pixel art a bassa risoluzione, metti "auto" qui sotto */
    --scene-rendering: pixelated;
}

/* Superfici SCURE (barra in alto, risorse, selettore dello sfondo, titoli sul fondo): crema su marrone scurissimo */
.topbar, .container > h1 {
    --text: #ecdcba;
    --dim: #c9ad90;
    --head: #fff0c8;
    --accent: #e7b463;
    --line: #7a4b45;
    --good: #9fca8a;
    --bad: #f08a78;
}
.container > h1 { text-shadow: 0 2px 0 rgba(0, 0, 0, .55); }

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--text);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.55;
}
body.admin { --panel: rgba(240, 222, 186, .98); }

.pixel { image-rendering: crisp-edges; image-rendering: pixelated; }

a { color: var(--accent); }
a:hover { color: var(--red-hi); }
.topbar a:hover { color: #ffd48f; }
:focus-visible { outline: 2px dashed var(--accent); outline-offset: 3px; }

h1, h2 {
    font-family: var(--pixel);
    font-weight: 400;
    font-synthesis: none;
    line-height: 1.6;
    color: var(--head);
    margin: 0 0 1rem;
}
h1 { font-size: clamp(.95rem, 3vw, 1.2rem); }
h2 { font-size: .8rem; }
code { background: rgba(90, 50, 20, .12); padding: .1rem .35rem; }
.topbar code { background: rgba(255, 255, 255, .08); }
.muted, .hint { color: var(--dim); }
.hint { font-size: .88rem; margin: .3rem 0 0; }

/* ---------- sfondo della scena (alba / giorno / tramonto / notte) ---------- */
body.scene::before {
    content: "";
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: -2;
    background: var(--bg) center center / cover no-repeat;
    image-rendering: var(--scene-rendering);
}
body.scene::after {   /* velo scuro: tiene leggibili i pannelli su qualunque sfondo */
    content: "";
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: -1;
    background: linear-gradient(rgba(24, 9, 14, .12), rgba(24, 9, 14, .35));
    pointer-events: none;
}
/* Sfondo del pannello Admin: un'immagine unica, con velo più forte per tenere leggibili tabelle e form */
body.admin::before {
    content: "";
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: -2;
    background: var(--bg) url("../img/bg/admin.png") center center / cover no-repeat;
    image-rendering: var(--scene-rendering);
}
body.admin::after {
    content: "";
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: -1;
    background: rgba(24, 9, 14, .55);
    pointer-events: none;
}
html[data-time="dawn"]   body.scene::before { background-image: url("../img/bg/dawn.png"); }
html[data-time="day"]    body.scene::before { background-image: url("../img/bg/day.png"); }
html[data-time="sunset"] body.scene::before { background-image: url("../img/bg/sunset.png"); }
html[data-time="night"]  body.scene::before { background-image: url("../img/bg/night.png"); }

/* ---------- barra superiore ---------- */
.topbar {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem 1.5rem;
    padding: .55rem 1.1rem;
    background: rgba(36, 18, 20, .97);
    border-bottom: 2px solid var(--red);
}
.brand { display: flex; align-items: center; gap: .7rem; font-family: var(--pixel); font-size: .75rem; color: var(--head); text-decoration: none; }
.brand:hover { color: var(--accent); }
.topbar nav, .whoami { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.1rem; }
.topbar nav a { color: var(--text); text-decoration: none; }
.topbar nav a:hover { color: var(--accent); }
.whoami { color: var(--dim); font-size: .9rem; }
.island-name { color: var(--head); }
.coords-inline, .coords-link { font-family: var(--pixel); font-size: 1em; color: var(--accent); }   /* stessa dimensione del testo accanto */
.coords-link { text-decoration: none; }
.coords-link:hover, .coords-link:focus-visible { color: var(--accent-d); text-decoration: underline; }
.sep { width: 2px; height: 1.1rem; background: var(--line); }

body.admin .topbar { border-bottom-color: var(--bad); }
body.admin .brand { color: var(--bad); }

form.inline { display: inline; margin: 0; }
.linklike { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--text); }
.linklike:hover { color: var(--accent); }

/* ---------- barra unica del gioco: titolo, risorse (icone 48x48, scorta / capienza), isola, giocatore ---------- */
.topbar-game { flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.4rem; padding: .4rem 1.1rem; }
.resline { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.6rem; flex: 1 1 auto; }
.res { display: flex; align-items: center; gap: .5rem; }
.res img.icon { display: block; flex: none; }
.res-text { display: flex; flex-direction: column; line-height: 1.3; }
.res-value { font-family: var(--pixel); font-size: .8rem; color: var(--head); font-variant-numeric: tabular-nums; }
.res-cap { font-size: .75rem; color: var(--dim); font-variant-numeric: tabular-nums; }
.res-value.full { color: var(--bad); }       /* scorta al limite della capacità */
.table .bad { color: var(--bad); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.island-select { max-width: 15rem; padding: .3rem .4rem; font: inherit; font-size: .85rem; color: var(--ink); background: var(--panel); border: 2px solid var(--line); }
.island-switch.js .island-go { display: none; }

/* ---------- griglia di gioco: menu + contenuto ---------- */
.gamegrid {
    display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 1rem;
    width: 100%; max-width: 1120px; margin: 1.1rem auto 1.5rem; padding: 0 1rem;
    align-items: start; flex: 1 0 auto;
}
.menu {
    background: var(--panel);
    padding: .4rem 0 .6rem; margin: 2px;
    box-shadow: 0 -2px 0 0 var(--line), 0 2px 0 0 var(--line), -2px 0 0 0 var(--line), 2px 0 0 0 var(--line);
}
.menu-group { margin: .7rem 0 .2rem; padding: 0 .9rem; font-family: var(--pixel); font-size: .55rem; color: var(--dim); }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu a, .menu .soon { display: block; padding: .38rem .9rem .38rem 1.1rem; color: var(--text); text-decoration: none; border-left: 4px solid transparent; }
.menu a:hover { background: rgba(177, 73, 69, .10); color: var(--head); }
.menu a.active { background: rgba(177, 73, 69, .16); color: var(--accent-d); font-weight: 600; border-left-color: var(--red); }
.menu .soon { color: #8a6e57; cursor: default; }

/* ---------- pannelli ---------- */
.panel, .box {
    background: var(--panel);
    margin: 2px 2px 1.1rem;
    --frame: var(--line);   /* le caselle dentro una casella colorata non ne ereditano il bordo */
    box-shadow: 0 -2px 0 0 var(--frame), 0 2px 0 0 var(--frame), -2px 0 0 0 var(--frame), 2px 0 0 0 var(--frame);
}
.panel-title {
    margin: 0; padding: .65rem .95rem;
    font-family: var(--pixel); font-size: .82rem; font-weight: 400; line-height: 1.5; color: var(--cream);
    background: var(--panel-head); border-bottom: 2px solid var(--red-d);
}
/* Barre dei titoli a colori, per riconoscere a colpo d'occhio il tipo di casella: rosso = normale, verde = lavori in corso, viola = Diario del Capitano, blu = flotte, nero = presentazione di un luogo (Gaspar).
   Il bordo della casella ha lo stesso colore della barra (--frame); la casella rossa tiene il bordo marrone di sempre. */
.panel-activity { --frame: #2e5e3a; }
.panel-log { --frame: #55386f; }
.panel-fleets { --frame: #2b4f7a; }
.panel-dark { --frame: var(--ink); }
.panel-activity > .panel-title { background: #2e5e3a; border-bottom-color: #1c3d24; }
.panel-log > .panel-title { background: #55386f; border-bottom-color: #36234a; }
.panel-fleets > .panel-title { background: #2b4f7a; border-bottom-color: #1b3452; }
.panel-dark > .panel-title { background: var(--ink); border-bottom-color: #000; }
.panel-body { padding: 1rem; }
.panel-note { margin: 0; padding: .7rem 1rem; font-size: .85rem; color: var(--dim); border-top: 2px solid rgba(107, 68, 48, .30); }
.box { padding: 1.4rem 1.5rem; }
.box.narrow { max-width: 28rem; margin-left: auto; margin-right: auto; }
.box.narrow-ish { max-width: 44rem; margin-left: 2px; }
.form-narrow { max-width: 26rem; }

/* pagine senza menu (accesso, registrazione, home, errori) */
.container { width: 100%; max-width: 900px; margin: 0 auto; padding: 2rem 1rem 1.5rem; flex: 1 0 auto; }
.container.wide { max-width: 1080px; }

.hero { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem 2.5rem; align-items: center; padding: 2rem; }
.hero h1 { font-size: clamp(1rem, 3.2vw, 1.45rem); }
.hero-text p { font-size: 1.05rem; max-width: 34rem; }
.actions { display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
.hero-ship { justify-self: center; }
@media (max-width: 760px) { .hero { grid-template-columns: 1fr; padding: 1.4rem; } .hero-ship { width: 144px; height: 126px; } }

/* ---------- panoramica ---------- */
.overview-top { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.island-card { padding: .4rem; background: rgba(107, 68, 48, .16); box-shadow: 0 -2px 0 0 var(--line), 0 2px 0 0 var(--line), -2px 0 0 0 var(--line), 2px 0 0 0 var(--line); margin: 2px; }
.island-card img { display: block; }
.island-sea { width: 192px; height: 144px; overflow: hidden; background: #3db0e0; max-width: 100%; }   /* azzurro come le acque basse della mappa */
.island-sea img { margin-top: -48px; image-rendering: pixelated; max-width: none; }
.island-facts p { margin: 0 0 .5rem; }
.island-title { font-size: 1.25rem; font-weight: 600; color: var(--head); }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.4rem; margin: 0; }
.facts dt { color: var(--dim); }
.facts dd { margin: 0; overflow-wrap: anywhere; }

/* ---------- tabelle ---------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; padding: .55rem .9rem; font-weight: 600; font-size: .82rem; color: var(--dim); border-bottom: 2px solid var(--line); }
.table td { padding: .6rem .9rem; vertical-align: middle; border-bottom: 1px solid rgba(107, 68, 48, .28); }
.table tbody tr:nth-child(even) { background: rgba(120, 80, 40, .07); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .good { color: var(--good); }
.table td img { vertical-align: middle; margin-right: .6rem; }

.tag { display: inline-block; padding: 0 .5rem; font-size: .78rem; color: var(--cream); }
.tag-ok { background: var(--good); }
.tag-warn { background: #8a5a14; }
.tag-bad { background: var(--bad); }

/* ---------- form ---------- */
form label { display: block; margin: 1rem 0 .1rem; color: var(--head); }
form label.check { display: flex; align-items: center; gap: .7rem; color: var(--text); }

input[type=text], input[type=email], input[type=password], select, textarea {
    display: block; width: calc(100% - 4px); margin: .4rem 2px 2px;
    padding: .55rem .7rem;
    font: inherit; color: var(--head);
    background: var(--field); border: 0; border-radius: 0;
    box-shadow: 0 -2px 0 0 var(--line), 0 2px 0 0 var(--line), -2px 0 0 0 var(--line), 2px 0 0 0 var(--line);
}
select { color-scheme: light; }
input::placeholder { color: #9a7f68; }
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, select:focus, textarea:focus {
    outline: none;
    box-shadow: 0 -2px 0 0 var(--accent), 0 2px 0 0 var(--accent), -2px 0 0 0 var(--accent), 2px 0 0 0 var(--accent);
}
input[type=checkbox] {
    appearance: none; -webkit-appearance: none;
    flex: none; width: 1.15rem; height: 1.15rem; margin: 2px; cursor: pointer;
    background: var(--field);
    box-shadow: 0 -2px 0 0 var(--line), 0 2px 0 0 var(--line), -2px 0 0 0 var(--line), 2px 0 0 0 var(--line);
}
input[type=checkbox]:checked { background: var(--accent); box-shadow: 0 -2px 0 0 var(--line), 0 2px 0 0 var(--line), -2px 0 0 0 var(--line), 2px 0 0 0 var(--line), inset 0 0 0 3px var(--field); }
input[type=checkbox]:focus-visible { outline: 2px dashed var(--accent); outline-offset: 4px; }

.field-error { color: var(--bad); margin: .35rem 0 0; font-size: .9rem; }
.row { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.row > label { flex: 1 1 10rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- pulsanti ---------- */
.btn {
    display: inline-block; margin: 1.2rem 2px 2px; padding: .6rem 1.1rem;
    font-family: var(--pixel); font-size: .72rem; font-weight: 400; font-synthesis: none; line-height: 1.4;
    text-decoration: none; cursor: pointer;
    color: var(--cream); background: var(--red); border: 0; border-radius: 0;
    box-shadow: 0 -2px 0 0 var(--ink), 0 2px 0 0 var(--ink), -2px 0 0 0 var(--ink), 2px 0 0 0 var(--ink), inset 0 -3px 0 0 var(--red-d);
}
.btn:hover { background: var(--red-hi); color: var(--cream); }
.btn:active { transform: translateY(2px); }
.btn-quiet { color: var(--cream); background: #7a4b3a; box-shadow: 0 -2px 0 0 var(--ink), 0 2px 0 0 var(--ink), -2px 0 0 0 var(--ink), 2px 0 0 0 var(--ink), inset 0 -3px 0 0 #4d2d22; }
.btn-quiet:hover { background: #8f5a45; color: var(--cream); }
.btn-danger { color: var(--cream); background: #8f2a2a; box-shadow: 0 -2px 0 0 var(--ink), 0 2px 0 0 var(--ink), -2px 0 0 0 var(--ink), 2px 0 0 0 var(--ink), inset 0 -3px 0 0 #5d1a1f; }
.btn-danger:hover { background: #a93636; }
.btn-small { margin: .5rem 2px 2px; padding: .55rem .9rem; font-size: .72rem; }   /* stesso carattere dei pulsanti Costruisci / Sviluppa */
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn[disabled]:active { transform: none; }

/* ---------- messaggi ---------- */
.alert {
    --c: var(--line-hi);
    margin: 2px 2px 1.1rem; padding: .7rem 1rem;
    background: var(--panel-solid); color: var(--head);
    border-left: 4px solid var(--c);
    box-shadow: 0 -2px 0 0 var(--line), 0 2px 0 0 var(--line), 2px 0 0 0 var(--line);
}
.alert a { color: var(--accent); }
.alert-error { --c: var(--bad); }
.alert-success { --c: var(--good); }
.alert-warn { --c: var(--accent); }
.alert-info { --c: var(--line-hi); }

/* ---------- pannello admin ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; margin-bottom: 1.4rem; }
.stat {
    display: flex; flex-direction: column; gap: .4rem; margin: 2px; padding: .9rem 1rem;
    background: var(--panel);
    box-shadow: 0 -2px 0 0 var(--line), 0 2px 0 0 var(--line), -2px 0 0 0 var(--line), 2px 0 0 0 var(--line);
}
.stat .num { font-family: var(--pixel); font-size: 1.05rem; color: var(--accent); }
.stat .lbl { color: var(--dim); font-size: .85rem; }
.searchbar { display: flex; flex-wrap: wrap; gap: 0 1rem; align-items: flex-end; }
.searchbar input { min-width: 16rem; }
details.actions summary { cursor: pointer; color: var(--accent); }
details.actions form { margin: .4rem 0 0; }
details.actions input[type=text] { margin-top: .6rem; min-width: 13rem; }
.pager { display: flex; gap: 1.5rem; margin: 1rem 0 0; }

/* Admin -> Database */
textarea { resize: vertical; min-height: 12rem; font-family: ui-monospace, "Cascadia Mono", Consolas, Menlo, "Courier New", monospace; font-size: .88rem; line-height: 1.45; }
pre.code { margin: .5rem 0; padding: .8rem 1rem; overflow-x: auto; white-space: pre-wrap; word-break: break-word; background: #2b1a1a; color: #fff0c8; font-family: ui-monospace, "Cascadia Mono", Consolas, Menlo, "Courier New", monospace; font-size: .85rem; box-shadow: 0 -2px 0 0 var(--line), 0 2px 0 0 var(--line), -2px 0 0 0 var(--line), 2px 0 0 0 var(--line); }
code.sqlcell { display: block; background: none; padding: 0; white-space: pre-wrap; word-break: break-word; font-size: .85rem; }
.warn-note { color: var(--accent); font-size: .85rem; margin-top: .2rem; }

/* galleria icone (Admin -> Icons) */
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: 1rem; }
.icon-card { text-align: center; padding: .7rem .5rem; background: rgba(107, 68, 48, .10); font-size: .82rem; }
.icon-card img { display: block; margin: 0 auto .5rem; }
.icon-card code { display: block; margin: .25rem 0 .4rem; overflow-wrap: anywhere; }
.icon-up { margin: .35rem 0 0; }
.icon-up input[type="file"], .icon-bulk input[type="file"] { display: block; width: 100%; max-width: 100%; margin: 0 0 .3rem; font-size: .7rem; }
.icon-bulk { margin: 0 0 1rem; padding: .6rem .7rem; background: rgba(107, 68, 48, .10); font-size: .82rem; }
.icon-bulk label { display: block; margin-bottom: .3rem; }
.icon-missing { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: 0 auto .5rem; border: 2px dashed var(--bad); color: var(--bad); font-size: .72rem; }

.menu .short { display: none; }                      /* le voci corte (View, Build, Yard...) si usano solo su telefono */
@media (max-width: 820px) {
    .gamegrid { grid-template-columns: minmax(0, 1fr); }
    .menu { display: flex; flex-wrap: wrap; padding: .3rem; }
    .menu-group { display: none; }
    .menu ul { display: contents; }
    .menu li { display: block; }
    .menu a, .menu .soon { padding: .4rem .7rem; border-left: 0; border-bottom: 3px solid transparent; }
    .menu a.active { border-bottom-color: var(--accent); }
}
@media (max-width: 560px) {
    .topbar { flex-direction: column; align-items: flex-start; }
    .topbar-game .brand { display: none; }           /* su telefono icona e titolo si omettono per far spazio */
    .menu a .long, .menu .soon .long { display: none; }
    .menu a .short, .menu .soon .short { display: inline; }
    .menu a, .menu .soon { padding: .4rem .55rem; }
    .facts { grid-template-columns: 1fr; gap: .1rem; }
    .resline { justify-content: flex-start; gap: .4rem 1rem; }
    .topbar-game .sep { display: none; }
    .whoami { gap: .4rem .9rem; }
}

/* ---- Admin: editor di bilanciamento ---- */
.subnav { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.subnav a { padding: .45rem .9rem; color: var(--head); background: var(--panel); box-shadow: 0 -2px 0 0 var(--line), 0 2px 0 0 var(--line), -2px 0 0 0 var(--line), 2px 0 0 0 var(--line); text-decoration: none; }
.rule-index { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin: .8rem 0 0; }
.rule-index a { color: var(--head); }
.rules-table td:first-child { width: 22%; }
.rules-table .rule-range { font-size: .82rem; }
.subnav a:hover { background: #fff3d6; }
.subnav a.active { background: var(--red); color: var(--cream); box-shadow: 0 -2px 0 0 var(--ink), 0 2px 0 0 var(--ink), -2px 0 0 0 var(--ink), 2px 0 0 0 var(--ink); }
select.num-in { width: 4.1rem; min-width: 0; margin: .4rem 2px 2px; padding: .3rem .35rem; }
input.num-in { width: 6.2rem; min-width: 0; padding: .3rem .45rem; text-align: right; font-variant-numeric: tabular-nums; }
.matrix input.num-in { width: 4.8rem; }
input.num-in.invalid { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad); }
.nowrap { white-space: nowrap; }
.req-list { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.req-list .req { display: inline-flex; align-items: center; gap: .5rem; }
.req-list .req input.num-in { width: 3.8rem; }
.table th[scope=row] { color: var(--head); font-size: inherit; }
.form-actions { margin: 1rem 0 1.4rem; }
.table.matrix th, .table.matrix td { padding: .45rem .25rem; }
.table.matrix thead th { font-size: .74rem; vertical-align: bottom; }
.table.matrix input.num-in { width: 4.1rem; padding: .3rem .35rem; }
.table.matrix th[scope=row] { position: sticky; left: 0; z-index: 1; padding-right: .7rem; background: #e8d3a8; }
.table.matrix select.num-in { width: 4.1rem; }

/* ---------- Icone grandi: Overview (risorse) e Buildings ---------- */
.icon-frame, .res-card > img.icon, .bcard > img.icon, .queue-now > img.icon, .yard-queue img.icon {
    flex: none; background: rgba(60, 36, 24, .88); padding: 3px;
    box-shadow: 0 -2px 0 0 var(--line), 0 2px 0 0 var(--line), -2px 0 0 0 var(--line), 2px 0 0 0 var(--line);
    margin: 2px;
}
.res-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.res-card { display: flex; align-items: center; gap: 1rem; padding: .7rem; background: rgba(107, 68, 48, .10); }
.res-card h3 { margin: 0 0 .1rem; font-size: .8rem; font-family: var(--pixel); color: var(--head); font-weight: 400; }
.res-card p { margin: 0; line-height: 1.35; }
.res-card .stock { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.res-card .stock.bad { color: var(--bad); }
.res-card .rate { font-variant-numeric: tabular-nums; }
.res-card .good { color: var(--good); }
.res-card .bad { color: var(--bad); }

.queue-now { display: flex; align-items: center; gap: 1rem; margin-bottom: .6rem; }
.queue-now p { margin: 0 0 .3rem; }
.queue-now form { margin: 0; }
.countdown { font-weight: 700; font-variant-numeric: tabular-nums; }

.bcards { display: flex; flex-direction: column; }
.bcard { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(190px, 220px); gap: .5rem 1.1rem; align-items: center; padding: .9rem 1rem; border-top: 2px solid rgba(107, 68, 48, .30); }
.bcard:first-child { border-top: 0; }
.bcard:nth-child(even) { background: rgba(107, 68, 48, .07); }
.bcard h3 { margin: 0 0 .25rem; font-size: 1.05rem; color: var(--head); }
.bcard .lvl { margin-left: .5rem; font-size: .8rem; font-weight: 400; color: var(--dim); }
.bcard .effect { margin: 0 0 .3rem; font-variant-numeric: tabular-nums; }
.bcard .lore { margin: 0; font-size: .82rem; font-style: italic; color: var(--dim); }
.bbuy p { margin: 0 0 .3rem; }
.bbuy form { margin: 0; }
.bbuy .btn { margin: .3rem 2px 2px; padding: .55rem .9rem; font-size: .72rem; }
input.readonly, input[readonly] { opacity: .85; cursor: default; font-weight: 700; }
.cost-item { display: inline-flex; align-items: center; gap: .25rem; margin-right: .7rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cost-item.bad { color: var(--bad); font-weight: 700; }
.req-missing { font-size: .8rem; color: var(--bad); font-weight: 700; }
@media (max-width: 700px) {
    .bcard { grid-template-columns: auto minmax(0, 1fr); }
    .bbuy { grid-column: 1 / -1; }
    .res-cards { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Shipyard ---------- */
.sub-title { margin: 1rem 0 .4rem; font-size: .95rem; color: var(--head); }
.yard-queue { list-style: none; margin: 0 0 .5rem; padding: 0; }
.yard-queue li { display: flex; align-items: center; gap: .8rem; padding: .45rem 0; border-top: 1px solid rgba(107, 68, 48, .28); }
.yard-queue li:first-child { border-top: 0; }
.yard-queue form { margin: 0 0 0 auto; }
.yard-queue .yq-info { display: flex; flex-direction: column; min-width: 0; font-variant-numeric: tabular-nums; }
.bcard .stats { display: flex; flex-wrap: wrap; gap: .1rem .9rem; margin: 0 0 .3rem; font-size: .85rem; color: var(--dim); font-variant-numeric: tabular-nums; }
.bcard .stats strong { color: var(--ink); }
.yard-order { display: flex; align-items: center; gap: .4rem; }
.yard-order .qty { width: 5.2rem; min-width: 0; padding: .3rem .4rem; text-align: right; font: inherit; color: var(--ink); background: var(--panel); border: 2px solid var(--line); }
.small { font-size: .8rem; }
.bbuy .yard-order .btn { margin: .3rem 2px 2px; padding: .55rem .9rem; font-size: .72rem; }

/* ---- Fleet ---- */
input[type=number] {
    display: inline-block; width: 6rem; max-width: 100%; min-width: 0; margin: .2rem 2px; padding: .4rem .5rem;
    font: inherit; text-align: right; color: var(--head); background: var(--field); border: 0; border-radius: 0;
    box-shadow: 0 -2px 0 0 var(--line), 0 2px 0 0 var(--line), -2px 0 0 0 var(--line), 2px 0 0 0 var(--line);
}
input[type=number]:focus { outline: none; box-shadow: 0 -2px 0 0 var(--accent), 0 2px 0 0 var(--accent), -2px 0 0 0 var(--accent), 2px 0 0 0 var(--accent); }
.fleet-ships { list-style: none; margin: 0 0 .5rem; padding: 0; }
.fleet-ships li { display: flex; align-items: center; gap: .8rem; padding: .35rem 0; }
.fleet-ships li[hidden] { display: none; }
.fleet-ships li:not([hidden]) ~ li:not([hidden]) { border-top: 1px solid rgba(107, 68, 48, .28); }   /* la linea solo tra navi visibili */
.fleet-ships label { flex: 1; min-width: 0; margin: 0; }
.fleet-ships label .muted { display: block; font-size: .8rem; }
.fleet-plan ul, .report-list { margin: 0 0 1rem; padding-left: 1.2rem; }
.report-list { list-style: none; padding-left: 0; }
.report-list li { padding: .3rem 0; border-top: 1px solid rgba(107, 68, 48, .28); }
.report-list li:first-child { border-top: 0; }
.fleet-form .btn { margin-right: .5rem; }

/* ---- Messages ---- */
.menu .badge { display: inline-block; min-width: 1.3rem; padding: 0 .35rem; margin-left: .3rem; font-size: .72rem; line-height: 1.3rem; text-align: center; color: #fff; background: var(--red); border-radius: 0; box-shadow: 0 -2px 0 0 var(--line), 0 2px 0 0 var(--line), -2px 0 0 0 var(--line), 2px 0 0 0 var(--line); }
.msg-body { white-space: pre-wrap; overflow-wrap: anywhere; padding: .8rem 1rem; background: rgba(107, 68, 48, .07); border-left: 4px solid var(--line); }
.msg-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.msg-actions form { margin: 0; }
.msg-table tr.unread td a { font-weight: 700; }
.msg-table td:first-child { width: 2rem; }
.tabs { display: flex; flex-wrap: wrap; gap: .3rem 1rem; list-style: none; margin: 0 0 .8rem; padding: 0; }
.tabs a { text-decoration: none; padding: .2rem 0; border-bottom: 3px solid transparent; }
.tabs a.active { color: var(--accent-d); border-bottom-color: var(--accent); font-weight: 600; }
.pager a { margin-right: .6rem; }
.pager a.active { font-weight: 700; text-decoration: none; }
textarea { min-height: 8rem; resize: vertical; }

/* ---- Pannello Admin: a tutta larghezza (login, setup ed errori restano stretti e centrati) ---- */
body.admin .container.wide { max-width: none; padding-left: 1.5rem; padding-right: 1.5rem; }
body.admin .box.narrow-ish { max-width: none; margin-left: 0; margin-right: 0; }
@media (max-width: 560px) { body.admin .container.wide { padding-left: 1rem; padding-right: 1rem; } }

/* ---- Admin: scritte più piccole di circa 2 punti (rem e testo base) ---- */
html.admin-html { font-size: 14px; }
body.admin { font-size: 13px; }

/* ---- Overview: edifici e flotta in miniatura accanto all'isola ---- */
.glance { flex: 1 1 22rem; min-width: 0; display: flex; flex-direction: column; gap: .7rem; }
.glance-title { margin: 0 0 .35rem; font-family: var(--pixel); font-size: .75rem; color: var(--head); }
.glance-title a { color: inherit; text-decoration: none; }
.glance-title a:hover { color: var(--accent-d); }
.glance .muted { margin: 0; font-size: .85rem; }
.minis { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.minis li { text-align: center; }
.minis a { display: block; text-decoration: none; color: var(--ink); line-height: 1; }
.minis img.icon { display: block; width: 40px; height: 40px; image-rendering: pixelated; }
.minis .mini-n { display: block; margin-top: 3px; font-family: var(--pixel); font-size: .7rem; font-weight: 700; font-synthesis: weight; color: var(--head); font-variant-numeric: tabular-nums; }
.minis li.zero { opacity: .38; }

/* Overview: i blocchi di edifici e flotta restano sempre a destra dell'isola (anche su telefono: l'isola si rimpicciolisce) */
.overview-top { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 1.6rem; align-items: center; }
@media (max-width: 820px) {
    .overview-top { grid-template-columns: auto minmax(0, 1fr); gap: .8rem 1.2rem; align-items: start; }
    .overview-top > .island-card { grid-column: 1; grid-row: 1; }
    .overview-top > .island-facts { grid-column: 1; grid-row: 2; }
    .overview-top > .glance { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 560px) {
    .island-sea { width: 128px; height: 96px; }                       /* la stessa isola a 2x invece di 3x */
    .island-sea img { width: 128px; height: 128px; margin-top: -32px; }
    .island-card { padding: .3rem; }
    .overview-top { grid-template-columns: 140px minmax(0, 1fr); gap: .6rem .9rem; }
    .overview-top .island-title { font-size: 1.05rem; overflow-wrap: anywhere; }
    .overview-top .island-facts p { margin: .2rem 0; }
    .minis img.icon { width: 36px; height: 36px; }
    .minis { gap: .3rem; }
}

/* ---- Sfondi dietro le icone ----
   Edifici e difese: sabbia con granelli + ombra ellittica a terra.
   Navi: mare con onde + anello di schiuma intorno allo scafo.
   Piastrelle 24x24 incorporate come data URI (tools/make_tiles.py le rigenera e stampa il testo da incollare); ombra e schiuma sono gradienti, quindi seguono ogni dimensione. */
img.icon.icon-buildings, img.icon.icon-defenses {
    background-color: #d9c08a;
    background-image:
        radial-gradient(ellipse 36% 8% at 50% calc(90% - var(--shadow-up, 15px)), rgba(60, 36, 24, .50) 0 55%, rgba(60, 36, 24, .22) 58% 100%, transparent 102%),
        url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABJ0lEQVR4XrVVQQrCMBCs4lUptIgHLQVvHkS/6av8geLNm4gnUSj4AGULWzabTTKlOOfszs7MJhldj4dv9keMuXfzfsI0fc62BFSQF3OYgM5SzTQvkzUtAdpcNqSaT/NqCYgspGoSG4EaUpOUJbEBPYLz6ZKVxSxbVnU3IarQgkew22+TvkqwyhDaDKS3KTs0OIcogTw0xA4L3T1gIKvXBx5BSLK0jodA7HQIYgXSOhqCSBA7HQKkgIeQSmm1H/cblkFKNg2hc6LVpnsDhYyoCOVkLYpjkXUfUookLPu8LWKwEkSRrpFw/oOUdH3rEXT/wWq9Qc5D98RTIN92C7E1jNlDCGYgUVeL4Bpq6KWACDjo0DepfzozZGvddKghK2PLYSrQ784Q/AC8DId9rJLgRwAAAABJRU5ErkJggg==");
    background-size: 100% 100%, 48px 48px;
    background-repeat: no-repeat, repeat;
    image-rendering: pixelated;
}
img.icon.icon-ships {
    background-color: #3db0e0;
    background-image:
        radial-gradient(ellipse 40% 9% at 50% calc(88% - var(--foam-up, 5px)), transparent 0 58%, rgba(235, 250, 255, .85) 62% 80%, rgba(235, 250, 255, .35) 82% 100%),
        url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAeUlEQVR4XmO03fDgPwMNARPMbHkhHoY5ztJgGhsgV54R5oNPb17DzeUTEcWwg1x5FphGZENBYjA+pfJwH6ADbAYjA2LlWXDFL7ZgQgbEysMjmVZgGFlAbjonlI9G8wHO5ArLJ6P5gCCgX0YbzQe46pPR+oAgoHkyBQDewI4oATK/7gAAAABJRU5ErkJggg==");
    background-size: 100% 100%, 48px 48px;
    background-repeat: no-repeat, repeat;
    image-rendering: pixelated;
}

/* Miniature (36-40 px): stessi spostamenti, in proporzione */
.minis img.icon { --shadow-up: 6px; --foam-up: 2px; }

/* ---- Menu: titoli di sezione un po' più grandi e in grassetto ---- */
.menu-group { font-size: .95rem; font-weight: 700; font-synthesis: weight; color: var(--head); margin-top: 1rem; }   /* solo desktop: sul telefono i titoli sono nascosti */

/* ---- Link con ancora: la scheda dell'edificio resta ben visibile ---- */
.bcard:target { outline: 3px solid var(--accent); outline-offset: -3px; background: rgba(231, 180, 99, .22); }
.bcard { scroll-margin-top: 1rem; }

/* ---- Nome utente in alto: link all'Account ---- */
.whoami a.who { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
.whoami a.who:hover, .whoami a.who:focus-visible { color: var(--accent); }

/* Icone dei tipi di messaggio */
.msg-open { display: flex; gap: 1rem; align-items: flex-start; }
.msg-open > img.icon { flex: none; }
.msg-open-text { flex: 1; min-width: 0; }
.msg-subject { display: flex; align-items: center; gap: .5rem; }
.msg-subject > img.icon { flex: none; width: 40px; height: 40px; }
img.icon.icon-fallback { image-rendering: pixelated; }
@media (max-width: 560px) { .msg-open { flex-direction: column; } .msg-open > img.icon { width: 64px; height: 64px; } }
.mission-cell { display: flex; align-items: center; gap: .4rem; }

/* Rinomina isola (Overview) */
.rename { margin-top: .4rem; }
.rename summary { cursor: pointer; color: var(--accent, inherit); text-decoration: underline; }
.rename form { margin-top: .4rem; }
.rename input[type="text"] { width: 12rem; max-width: 100%; }

/* Admin -> Settings: ore delle fasce degli sfondi */
.hours-row { display: grid; grid-template-columns: auto 6rem; gap: .4rem .8rem; align-items: center; max-width: 24rem; margin-bottom: .6rem; }
.hours-row label { margin: 0; }

/* Flotte ostili in arrivo */
.panel-alert { border-color: var(--bad, #b3382c); }
.incoming { margin: 0 0 .6rem; padding-left: 1.2rem; }

/* ---- Ranking ---- */
.table tr.rank-me { background: rgba(160, 40, 30, .14); }
.ghost-name { color: #1c78b4; font-weight: 700; }
.tag-greenhorn { display: inline-block; margin-left: .3rem; padding: 0 .35rem; font-size: .7rem; color: #2b1a10; background: #e0b040; }
.tag-ghost { display: inline-block; margin-left: .3rem; padding: 0 .35rem; font-size: .7rem; color: #fff; background: #2b8fcf; }
.pager { align-items: center; }

/* ---- Admiral ---- */
.admiral-list { list-style: none; margin: 0 0 .8rem; padding: 0; }
.admiral-list li { display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: center; padding: .45rem 0; border-bottom: 1px solid rgba(107, 68, 48, .28); }
.admiral-list .adm-what { flex: 1 1 14rem; }
.adm-buttons { display: inline-flex; flex-wrap: wrap; gap: .2rem; }
.adm-buttons form { margin: 0; }
.adm-buttons .btn { margin: 0; }
.tag-adm { display: inline-block; padding: 0 .4rem; font-size: .75rem; color: var(--cream); background: var(--dim); }
.tag-adm.tag-next, .tag-adm.tag-building { background: var(--accent-d, #a02a1e); }
.tag-adm.tag-done { background: var(--good); }
.tag-adm.tag-blocked { background: var(--bad); }
.adm-done .adm-what { opacity: .6; }
.adm-add { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.adm-add select, .adm-add input[type=number] { margin: 0; }
.adm-level input { width: 4.5rem; }
.adm-settings input[type=number], .adm-settings select { max-width: 16rem; }
.adm-settings .check { display: flex; gap: .5rem; align-items: center; margin: .8rem 0 0; }
.adm-add select { max-width: 18rem; }

/* ---------- pagine legali, guida, Captain's Log, piè di pagina ---------- */
.site-foot { flex: none; display: flex; justify-content: center; padding: .4rem 1rem 1.1rem; font-size: .85rem; }
.site-foot .foot-box { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .3rem 1.2rem; margin: 2px; padding: .6rem 1.2rem; }
.site-foot .foot-version { color: var(--dim); }
.site-foot .lang-switch { display: inline-flex; gap: .2rem .8rem; margin: 0; }
.site-foot .lang-switch .current { color: var(--head); font-weight: 700; border-bottom: 2px solid var(--accent); }
.site-foot .lang-switch button { color: var(--accent); text-decoration: underline; font-size: inherit; }
.legal h2 { margin: 1.4rem 0 .3rem; font-size: 1rem; color: var(--head); }
.legal ul, .legal ol, .guide ol, .guide ul:not(.guide-res) { padding-left: 1.3rem; }
.legal-tabs { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin: 0 0 .4rem; }
.lore { font-style: italic; color: var(--head); }
.guide-toc { display: flex; flex-wrap: wrap; gap: .2rem 1rem; margin-top: .8rem; }
.guide-res { list-style: none; margin: .6rem 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .6rem 1rem; }
.guide-res li { display: flex; gap: .7rem; align-items: flex-start; padding: .5rem; background: rgba(107, 68, 48, .10); }
.guide-res li > img { flex: none; }
.guide-res li > div { min-width: 0; font-size: .92rem; }
.guide-missions dt { margin-top: .7rem; font-weight: 600; color: var(--head); }
.guide-missions dt img { vertical-align: middle; margin-right: .4rem; }
.guide-missions dd { margin: .1rem 0 0 0; }
.guide-ref { margin: .6rem 0; }
.guide-ref summary { cursor: pointer; font-weight: 600; color: var(--head); }
.log-bar { width: 100%; height: 1rem; margin-top: .4rem; accent-color: var(--red); }
.log-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.log-item { padding: .6rem .8rem; background: rgba(107, 68, 48, .08); border-left: 4px solid var(--line); }
.log-item p { margin: .25rem 0; }
.log-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.log-mark { display: inline-block; width: 1.2rem; text-align: center; color: var(--dim); }
.log-done { opacity: .72; }
.log-done .log-mark { color: var(--good); }
.log-ready { border-left-color: var(--accent); background: rgba(231, 180, 99, .16); }
.log-ready .log-mark { color: var(--accent); }
.log-now { border-left-color: var(--red); }
.log-visibility, .log-actions { display: flex; flex-wrap: wrap; gap: .2rem .6rem; }

.bcard .uses { margin: .2rem 0; font-size: .85rem; font-weight: 600; color: var(--accent-d, var(--head)); }

/* ---- Admin: traduzioni (inglese sopra, lingua sotto) ---- */
.tr-summary { margin: 0 0 .7rem; }
.tr-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 0 0 1rem; }
.tr-tools form { margin: 0; }
.tr-tools .btn { margin: 0; }
.tr-found { margin: .8rem 0 0; }
.tr-head .tag { background: #6b4430; }
.tr-head .tag-warn { background: #8a5a14; }
.tr-obsolete { margin-top: .8rem; }
.tr-obsolete summary { cursor: pointer; color: var(--accent); }
.tr-obsolete ul { margin: .4rem 0 0; padding-left: 1.2rem; font-size: .85rem; }
.tr-filter { gap: .6rem 1rem; }
.tr-filter > div { display: flex; flex-direction: column; gap: .2rem; }
.tr-filter label { margin: 0; font-size: .85rem; }
.tr-filter input[type=text] { min-width: 15rem; margin: 0; }
.tr-filter select { margin: 0; }
.tr-row { margin: 0 0 1rem; padding: .8rem 1rem 1rem; background: var(--panel); box-shadow: 0 -2px 0 0 var(--line), 0 2px 0 0 var(--line), -2px 0 0 0 var(--line), 2px 0 0 0 var(--line); }
.tr-row.is-edited { border-left: 6px solid var(--accent); }
.tr-row.is-error { border-left: 6px solid var(--bad); }
.tr-row.is-dirty { background: #fff3d6; }
.tr-head { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .5rem; }
.tr-lbl { display: block; margin: .5rem 0 .2rem; font-size: .8rem; font-weight: 700; color: var(--head); }
.tr-en { padding: .6rem .8rem; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; color: var(--ink); background: rgba(107, 68, 48, .12); border-left: 4px solid var(--line); user-select: text; }
textarea.tr-in { display: block; width: 100%; min-height: 3.2rem; max-height: 28rem; margin: 0; padding: .6rem .8rem; box-sizing: border-box; font-family: inherit; font-size: 1rem; line-height: 1.5; overflow-y: auto; }
.tr-row .req-missing { margin: .4rem 0 0; }
.tr-keep, .tr-orig { margin: .35rem 0 0; font-size: .8rem; }
.tr-keep code { margin-right: .25rem; }
.tr-orig-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.tr-restore { display: inline-flex; align-items: center; gap: .4rem; margin: .4rem 0 0; font-size: .85rem; }
.tr-savebar { position: sticky; bottom: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0 -.2rem; padding: .7rem .5rem; background: var(--panel); border-top: 3px solid var(--line); }
.tr-savebar .btn { margin: 0; }
.tr-pager { flex-wrap: wrap; gap: .3rem .9rem; }
.tr-savebar .tr-pager { margin: 0 0 0 auto; }   /* i numeri di pagina stanno nella barra dei pulsanti Save, leggibili sul suo fondo */
.tr-pager a.active { color: var(--head); }

/* ---- Panoramica: flotte in mare, in breve ---- */
.fleet-brief th, .fleet-brief td { padding: .3rem .6rem; }
.fleet-brief .mission-cell img { flex: none; }
.fleet-more { margin: .5rem 0 0; font-size: .85rem; }

/* ---- Flotta: modulo di invio (missione, destinazione a tre caselle, navi, carico su una riga, velocità e Invia) ---- */
.fleet-mission select { max-width: min(100%, 34rem); margin-top: .2rem; }
.fleet-form .fc-cell { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.fleet-form .fc-cell label { display: flex; align-items: center; gap: .3rem; margin: 0; font-size: .85rem; }
.fleet-form .fc-cell input[type=number] { width: 100%; max-width: none; margin: .1rem 0; box-sizing: border-box; }
.fleet-coords { display: flex; align-items: flex-end; gap: .5rem; max-width: 26rem; }
.fleet-coords .fc-cell { flex: 1 1 0; }
.fleet-coords .fc-sep { padding-bottom: .6rem; font-weight: 700; color: var(--head); }
.fleet-hint { margin: .3rem 0 0; }
.fleet-block[hidden] { display: none; }
.fleet-cargo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem 1rem; max-width: 44rem; }
.fleet-send { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem 1rem; margin-top: .8rem; }
/* Cursore della velocità: barra di legno con le tacche ogni 10%, parte percorsa in rosso (--r la imposta fleet.js), impugnatura a blocchi con bordo pixel */
.fleet-speed { flex: 1 1 14rem; max-width: 24rem; min-width: 0; }
.fleet-speed label { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; margin: 0; }
.fleet-speed output { font-family: var(--pixel); font-size: .72rem; color: var(--accent-d); }
.fleet-speed .speed-scale { display: flex; justify-content: space-between; font-size: .75rem; color: var(--dim); margin-top: .2rem; }
input[type=range].speed {
    --r: 1; --thumb: 18px;
    -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 30px; margin: .3rem 0 0; padding: 0;
    background: transparent; border: 0; box-shadow: none; cursor: pointer;
}
input[type=range].speed:focus { outline: none; }
input[type=range].speed:focus-visible { outline: 2px dashed var(--accent); outline-offset: 4px; }
input[type=range].speed::-webkit-slider-runnable-track {
    height: 12px; border: 0; border-radius: 0;
    background:
        repeating-linear-gradient(to right, transparent 0, transparent calc(100% / 9 - 2px), rgba(26, 11, 20, .55) calc(100% / 9 - 2px), rgba(26, 11, 20, .55) calc(100% / 9)),
        linear-gradient(to right, var(--red) 0, var(--red) calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--r)), #c9a574 calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--r)));
    box-shadow: 0 -2px 0 0 var(--ink), 0 2px 0 0 var(--ink), -2px 0 0 0 var(--ink), 2px 0 0 0 var(--ink), inset 0 -3px 0 0 rgba(26, 11, 20, .22);
}
input[type=range].speed::-moz-range-track {
    height: 12px; border: 0; border-radius: 0;
    background: repeating-linear-gradient(to right, transparent 0, transparent calc(100% / 9 - 2px), rgba(26, 11, 20, .55) calc(100% / 9 - 2px), rgba(26, 11, 20, .55) calc(100% / 9)), #c9a574;
    box-shadow: 0 -2px 0 0 var(--ink), 0 2px 0 0 var(--ink), -2px 0 0 0 var(--ink), 2px 0 0 0 var(--ink), inset 0 -3px 0 0 rgba(26, 11, 20, .22);
}
input[type=range].speed::-moz-range-progress { height: 12px; background: var(--red); box-shadow: inset 0 -3px 0 0 rgba(26, 11, 20, .22); }
input[type=range].speed::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; box-sizing: border-box; width: var(--thumb); height: 26px; margin-top: -7px; border: 0; border-radius: 0;
    background: linear-gradient(90deg, transparent 0 5px, var(--line) 5px 7px, transparent 7px 11px, var(--line) 11px 13px, transparent 13px), var(--cream);
    box-shadow: 0 -2px 0 0 var(--ink), 0 2px 0 0 var(--ink), -2px 0 0 0 var(--ink), 2px 0 0 0 var(--ink), inset 0 -4px 0 0 #d9bf8c;
}
input[type=range].speed::-moz-range-thumb {
    box-sizing: border-box; width: var(--thumb); height: 26px; border: 0; border-radius: 0;
    background: linear-gradient(90deg, transparent 0 5px, var(--line) 5px 7px, transparent 7px 11px, var(--line) 11px 13px, transparent 13px), var(--cream);
    box-shadow: 0 -2px 0 0 var(--ink), 0 2px 0 0 var(--ink), -2px 0 0 0 var(--ink), 2px 0 0 0 var(--ink), inset 0 -4px 0 0 #d9bf8c;
}
input[type=range].speed:hover::-webkit-slider-thumb, input[type=range].speed:active::-webkit-slider-thumb { background-color: #fffaf0; }
input[type=range].speed:hover::-moz-range-thumb, input[type=range].speed:active::-moz-range-thumb { background-color: #fffaf0; }
.fleet-send .btn { margin: 0 0 2px; }
@media (max-width: 560px) { .fleet-cargo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bcard-locked { opacity: .6; }
/* Avventure: icone a grandezza piena (128 px, senza ridimensionare i pixel); su schermi stretti l'icona sta sopra il testo */
.bcard-adv > img.icon { box-sizing: content-box; }
@media (max-width: 560px) {
    .bcard-adv { grid-template-columns: minmax(0, 1fr); }
    .bcard-adv > img.icon { justify-self: start; }
}

/* L'Olandese Volante di Davy Jones */
.dutchman-ship, .dutchman .icon-events { display: block; margin: .4rem auto .8rem; image-rendering: pixelated; animation: dutchman-bob 4s ease-in-out infinite; }
.dutchman-deal { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; margin: .8rem 0; }
.dutchman-deal h2 { font-size: .9rem; margin: 0 0 .3rem; }
.dutchman-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; }
@keyframes dutchman-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .dutchman-ship, .dutchman .icon-events { animation: none; } }
.fleet-line { margin: 0 0 .3rem; }
.fleet-ships li:target { outline: 3px solid var(--accent); outline-offset: 0; background: rgba(231, 180, 99, .22); }
.bcard, .fleet-ships li { scroll-margin-top: 1rem; }

/* Avventure: intestazione di una storia (icona 128 px accanto alla trama; senza icona resta solo il testo) */
.story-head { display: flex; align-items: center; gap: 12px; }
.story-head > p { margin: 0; }
@media (max-width: 520px) { .story-head { flex-direction: column; align-items: flex-start; } }

/* Nostromo (Boatswain): due schieramenti affiancati, una riga per unità */
.bosun-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.bosun-table td { padding: .15rem .4rem; vertical-align: middle; }
.bosun-table label { display: flex; align-items: center; gap: .4rem; }
@media (max-width: 760px) { .bosun-grid { grid-template-columns: minmax(0, 1fr); } }