/* ==========================================================================
   Les Comptoirs — interface « vitrine »
   Un cadre arrondi plein écran autour de l'illustration, des pilules et cartes
   en verre dépoli posées dessus, une barre d'icônes rondes, un titre géant translucide.
   ========================================================================== */

@font-face { font-family: "Outfit"; font-weight: 400; src: url("/fonts/outfit-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Outfit"; font-weight: 500; src: url("/fonts/outfit-latin-500-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Outfit"; font-weight: 600; src: url("/fonts/outfit-latin-600-normal.woff2") format("woff2"); font-display: swap; }

:root {
    --bg: #e7e6ee;
    --glass: rgba(246, 246, 251, 0.74);
    --glass-strong: rgba(250, 250, 253, 0.92);
    --glass-edge: rgba(255, 255, 255, 0.65);
    --ink: #1c1a2e;
    --muted: #67647c;
    --line: rgba(28, 26, 46, 0.09);
    --indigo: #2a2470;
    --indigo-deep: #1d1856;
    --amber: #e0a24a;
    --danger: #c0392b;

    --font: "Outfit", "Segoe UI", system-ui, sans-serif;
    --step--1: 0.8rem;
    --step-0: 0.95rem;
    --step-1: 1.15rem;
    --step-2: 1.5rem;
    --step-3: 2.2rem;

    --r-frame: 40px;
    --r-card: 28px;
    --r-pill: 999px;
    --gap: 16px;
    --blur: blur(18px) saturate(1.3);
    --shadow: 0 12px 40px rgba(28, 26, 46, 0.14);

    color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    min-width: 360px;
    font-family: var(--font);
    font-size: var(--step-0);
    line-height: 1.5;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-weight: 500; line-height: 1.15; margin: 0; }
p { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Verre dépoli commun */
.glass {
    background: var(--glass);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    border: 1px solid var(--glass-edge);
    box-shadow: var(--shadow);
}

/* --------------------------------------------------------------------------
   Le cadre
   -------------------------------------------------------------------------- */
.stage { min-height: 100%; padding: 0; }
.frame {
    position: relative;
    min-height: 100dvh;
    border-radius: 0;
    overflow: hidden;
    background: #9fb3c8;
    isolation: isolate;
}
.frame__art {
    position: absolute; inset: 0; width: 100%; height: 100%;
    z-index: -1;
}
.frame__art { object-fit: cover; }

/* Rade déplaçable : la carte garde une taille minimale ; si elle dépasse, on la fait glisser */
.harbour-viewport {
    position: absolute; inset: 0; z-index: -1;
    overflow: auto; container-type: size;
    display: flex; background: var(--bg);
    cursor: grab; touch-action: pan-x pan-y;
    scrollbar-width: none; overscroll-behavior: contain;
}
.harbour-viewport::-webkit-scrollbar { display: none; }
.harbour-viewport.is-dragging { cursor: grabbing; }
.harbour-viewport.is-dragging .plot { pointer-events: none; }
.harbour-map {
    display: block;
    flex: none; margin: auto; /* centrée quand elle est plus petite que l'écran */
    width: max(100cqw, 150cqh);
    height: auto;
    user-select: none; -webkit-user-select: none;
}
.frame::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(28, 26, 46, 0.28) 0%, transparent 38%);
}

/* --------------------------------------------------------------------------
   Barre du haut : trois pilules
   -------------------------------------------------------------------------- */
.topbar {
    position: absolute; top: var(--gap); left: var(--gap); right: var(--gap); z-index: 5;
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--gap);
    pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.topbar > :last-child { justify-self: end; }
.topbar > :first-child { justify-self: start; }
.pill {
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 52px; padding: 0 22px;
    border-radius: var(--r-pill);
    text-decoration: none; font-weight: 500; white-space: nowrap;
}
.pill svg { width: 16px; height: 16px; color: var(--amber); }
.pill--brand { padding-left: 7px; }
.pill--brand .emblem { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--indigo); color: #fff; }
.pill--brand .emblem svg { width: 20px; height: 20px; color: #fff; }
.pill small { display: block; font-size: 0.7rem; font-weight: 400; color: var(--muted); line-height: 1.1; }
.pill--action { cursor: pointer; border: 1px solid var(--glass-edge); }
.pill--action:hover { background: var(--glass-strong); }

/* Pilule centrale : les ressources */
.ledger {
    display: flex; align-items: stretch;
    min-height: 60px; padding: 6px 10px;
    border-radius: var(--r-pill);
}
.ledger__entry {
    display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto auto;
    column-gap: 8px; align-content: center;
    padding: 0 18px;
    border-left: 1px solid var(--line);
}
.ledger__entry:first-child { border-left: 0; }
.ledger__entry svg { grid-row: 1 / 4; width: 22px; height: 22px; align-self: center; color: var(--ink); }
.ledger__name { font-size: 0.7rem; color: var(--muted); line-height: 1.2; }
.ledger__line { display: flex; align-items: baseline; gap: 8px; }
.ledger__amount { font-weight: 600; font-size: var(--step-0); font-variant-numeric: tabular-nums; }
.ledger__rate { font-size: 0.72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.ledger__rate.is-negative, .ledger__entry.is-full .ledger__amount { color: var(--danger); }
.ledger__gauge { height: 3px; margin-top: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.ledger__gauge span { display: block; height: 100%; width: var(--fill, 0%); background: var(--indigo); border-radius: 2px; }
.ledger__entry.is-full .ledger__gauge span { background: var(--danger); }

/* --------------------------------------------------------------------------
   Barre d'icônes rondes à gauche
   -------------------------------------------------------------------------- */
.rail {
    position: absolute; left: var(--gap); top: 50%; transform: translateY(-50%); z-index: 5;
    display: grid; gap: 14px;
}
.rail__group { display: grid; gap: 10px; padding: 8px; border-radius: var(--r-pill); }
.round {
    display: grid; place-items: center;
    width: 46px; height: 46px; padding: 0;
    border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255, 255, 255, 0.55);
    color: var(--ink); text-decoration: none;
}
.round:hover { background: #fff; }
.round[aria-current="page"] { background: #fff; box-shadow: 0 4px 14px rgba(28, 26, 46, 0.12); }
.round svg { width: 19px; height: 19px; }
.round--avatar { background: var(--indigo); color: #fff; font-weight: 600; font-size: var(--step-1); }
.round--avatar:hover { background: var(--indigo-deep); }
.sound-toggle .off, .sound-toggle.is-muted .on { display: none; }
.sound-toggle.is-muted .off { display: block; }

/* --------------------------------------------------------------------------
   Titre géant translucide + chapeau
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Cartes du bas
   -------------------------------------------------------------------------- */
.card { border-radius: var(--r-card); padding: 26px 28px; }
.card h2 { font-size: var(--step-1); margin-bottom: 8px; }
.card__text { color: var(--muted); font-size: var(--step--1); max-width: 32ch; }

.card--left {
    position: absolute; left: 80px; bottom: var(--gap); z-index: 4;
    width: min(400px, 40%);
    background: var(--glass-strong);
    border-top-right-radius: 56px;
}
.stat { display: flex; align-items: flex-end; gap: 18px; margin-top: 22px; }
.stat__value { white-space: nowrap; font-size: var(--step-3); font-weight: 600; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat__label { font-size: var(--step--1); }
.thumbs { display: flex; align-items: center; margin-left: auto; }
.thumbs img, .thumbs .round {
    width: 46px; height: 46px; border-radius: 50%;
    border: 3px solid #fff; background: #f1eff6; object-fit: cover; margin-left: -12px;
}
.thumbs img:first-child { margin-left: 0; }

.card--right {
    position: absolute; right: var(--gap); bottom: var(--gap); z-index: 4;
    width: min(380px, 36%);
    max-height: calc(100% - 120px); overflow: auto;
}


/* --------------------------------------------------------------------------
   Fiche bâtiment (carte de droite)
   -------------------------------------------------------------------------- */
.building { display: none; }
.building.is-active { display: block; }
.building__head { display: flex; align-items: flex-start; gap: 12px; }
.building__meta { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: var(--step--1); margin-top: 4px; }
.building__meta svg { width: 14px; height: 14px; }
.building__art { width: 76px; height: 76px; margin: -10px -8px -8px auto; flex: none; filter: drop-shadow(0 6px 6px rgba(28, 26, 46, 0.2)); }
.building__desc { color: var(--muted); font-size: var(--step--1); margin: 14px 0; }
.facts { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--step--1); }
.facts li { display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.facts svg { width: 15px; height: 15px; color: var(--muted); }
.facts__flag { width: 18px; height: 18px; object-fit: contain; }
.facts .is-short { color: var(--danger); font-weight: 600; }
.facts .is-short svg { color: var(--danger); }
.facts strong { font-weight: 600; }
.building__actions { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.building__actions form { margin: 0; }
.building__status { font-size: var(--step--1); color: var(--muted); flex: 1; }
.requires { font-size: var(--step--1); color: var(--muted); }
.requires strong { color: var(--ink); font-weight: 500; }
.requires--charter { display: flex; align-items: center; gap: 10px; }
.charter-news { display: flex; align-items: center; gap: 14px; margin: 14px 0; padding: 12px 14px; border-radius: 10px;
    background: rgba(255, 244, 210, 0.7); border: 1px solid #c9a45c; }
.charter-news img { flex: none; object-fit: contain; }
.charter-news p { margin: 0; }
.charter-line { display: flex; align-items: center; gap: 8px; }
.charter-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: var(--step--1); }
.charter-line img { flex: none; object-fit: contain; }
.requires--charter img { flex: none; width: 28px; height: 28px; object-fit: contain; }
.charters__icon { width: 24px; height: 24px; margin-right: 6px; vertical-align: -6px; object-fit: contain; }

/* Boutons */
.button {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 48px; padding: 0 22px; cursor: pointer; text-decoration: none;
}
.button svg { width: 16px; height: 16px; }
.round--action { background: #fff; border: 1px solid var(--line); }
.round--primary { width: 56px; height: 56px; background: var(--indigo); color: #fff; }
.round--primary:hover { background: var(--indigo-deep); }
.round--primary[disabled] { background: #c9c7d6; cursor: not-allowed; }
.link-button { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 0.18em; color: var(--muted); font-size: var(--step--1); }

/* Chantiers dans la carte de gauche */
.worklist { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.worklist__item { display: flex; align-items: center; gap: 10px; font-size: var(--step--1); }
.worklist__item img { width: 34px; height: 34px; }
.worklist__name { flex: 1; }
.worklist__name em { font-style: normal; color: var(--muted); }
.countdown { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--indigo); }
.worklist__cancel { margin: 0; }

/* Emplacements de bâtiments sur l'illustration */
.plot { cursor: pointer; }
.plot:focus-visible { outline: none; }
.plot__art { transition: transform 160ms ease, filter 160ms; transform-box: fill-box; transform-origin: 50% 90%; filter: drop-shadow(0 3px 2px rgba(28, 26, 46, 0.35)); }
.plot:hover .plot__art, .plot.is-hover .plot__art, .plot:focus-visible .plot__art, .plot.is-selected .plot__art { transform: scale(1.08); filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.9)); }
.plot__mark { fill: rgba(255, 255, 255, 0.45); stroke: #fff; stroke-width: 1.5; stroke-dasharray: 4 3; }
.plot.is-selected .plot__mark { stroke-dasharray: none; }

/* Chantier en cours sur la rade : bâtiment estompé, marteau, poussière, anneau de progression */
.plot__art--ghost { opacity: 0.8; filter: grayscale(0.6) sepia(0.4) !important; }
.works__dust circle { fill: rgba(226, 204, 160, 0.8); transform-box: fill-box; transform-origin: center; animation: dust 1.8s ease-out infinite; }
.works__dust circle:nth-child(2) { animation-delay: 0.6s; }
.works__dust circle:nth-child(3) { animation-delay: 1.2s; }
@keyframes hammer { 0%, 100% { transform: rotate(0deg); } 40% { transform: rotate(-35deg); } 55% { transform: rotate(12deg); } }
@keyframes dust { 0% { opacity: 0; transform: translateY(0) scale(0.4); } 30% { opacity: 0.9; } 100% { opacity: 0; transform: translateY(-14px) scale(1.4); } }

/* --------------------------------------------------------------------------
   Messages, réglages du son
   -------------------------------------------------------------------------- */
.toasts { position: absolute; top: 84px; left: 50%; transform: translateX(-50%); z-index: 6; display: grid; gap: 8px; width: max-content; max-width: calc(100% - 32px); }
.toast { padding: 10px 20px; border-radius: var(--r-pill); font-size: var(--step--1); background: var(--glass-strong); box-shadow: var(--shadow); cursor: pointer; transition: opacity 0.3s, translate 0.3s; }
.toast.is-leaving { opacity: 0; translate: 0 8px; }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

.popover {
    position: fixed; inset: auto auto 50% 96px; margin: 0; transform: translateY(50%);
    width: 17rem; padding: 18px 20px; color: var(--ink);
    border-radius: 22px; background: var(--glass-strong);
    -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
    border: 1px solid var(--glass-edge); box-shadow: var(--shadow);
}
.popover__title { font-size: var(--step-1); margin-bottom: 8px; }
.slider { display: grid; grid-template-columns: 6rem 1fr; align-items: center; gap: 8px; min-height: 40px; color: var(--muted); font-size: var(--step--1); }
.checkbox { display: flex; gap: 8px; align-items: center; min-height: 40px; color: var(--muted); font-size: var(--step--1); }
input[type="range"], input[type="checkbox"] { accent-color: var(--indigo); }
input[type="range"] { width: 100%; }

/* --------------------------------------------------------------------------
   Formulaires (accès)
   -------------------------------------------------------------------------- */
.panel-center {
    position: absolute; left: 50%; top: 54%; transform: translate(-50%, -50%); z-index: 4;
    width: min(440px, calc(100% - 32px)); max-height: calc(100% - 140px); overflow: auto;
    border-radius: var(--r-card); padding: 32px;
    background: var(--glass-strong);
}
.panel-center h1 { font-size: var(--step-2); }
.panel-center__lede { color: var(--muted); font-size: var(--step--1); margin-top: 6px; }
.panel-center__foot { margin-top: 18px; text-align: center; font-size: var(--step--1); color: var(--muted); }
.form { display: grid; gap: 14px; margin-top: 18px; }
.field { display: grid; gap: 6px; }
.field__label { font-size: var(--step--1); color: var(--muted); }
.form input[type="text"], .form input[type="email"], .form input[type="password"], .form input:not([type]) {
    font: inherit; min-height: 48px; padding: 0 18px;
    border-radius: var(--r-pill); border: 1px solid var(--line); background: #fff; color: var(--ink);
}
.form input:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }
.form .button { width: 100%; margin-top: 6px; }
.notice { padding: 10px 16px; border-radius: 16px; background: #fff; font-size: var(--step--1); margin-top: 12px; }
.notice.is-error { color: var(--danger); }
.segmented { border: 0; margin: 0; padding: 0; }
.segmented legend { font-size: var(--step--1); color: var(--muted); margin-bottom: 6px; }
.segmented__options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--line); }
.segmented label { position: relative; display: grid; place-items: center; min-height: 40px; border-radius: var(--r-pill); cursor: pointer; font-weight: 500; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label:has(input:checked) { background: var(--indigo); color: #fff; }
.segmented label:has(input:focus-visible) { outline: 2px solid var(--indigo); outline-offset: 2px; }


/* Liste des bâtiments (mobile seulement) */
.roster { display: none; }

/* --------------------------------------------------------------------------
   Tablette et mobile : le cadre devient une page qui défile
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .ledger__entry { padding: 0 10px; }
    .ledger__rate { display: none; }
    .card--left { width: min(320px, 40%); }
    .card--right { width: min(380px, 46%); }
    .card { padding: 22px 22px; }
    .pill { padding: 0 16px; }
    .pill small, .pill__text { display: none; }
    .ledger__name { font-size: 0.66rem; }
    .topbar { grid-template-columns: auto 1fr auto; }
    .topbar .ledger { justify-self: center; }
}
@media (max-width: 760px), (max-height: 520px) {
    .stage { padding: 0; }
    .frame { min-height: 100dvh; border-radius: 0; border: 0; display: flex; flex-direction: column; overflow: visible; background: var(--bg); box-shadow: none; }
    .frame::before { display: none; }
    .frame__art { position: relative; inset: auto; width: 100%; height: auto; z-index: 0; border-radius: 0 0 28px 28px; }
    .harbour-viewport { position: relative; inset: auto; z-index: 0; height: min(62vh, 460px); border-radius: 0 0 28px 28px; }
    .harbour-map { width: max(100cqw, 150cqh, 720px); }
    .frame__art { aspect-ratio: 4 / 3; max-height: 55vh; object-fit: cover; }
    .topbar { position: sticky; top: 0; order: -1; padding: 10px; grid-template-columns: 1fr auto; gap: 8px; background: var(--bg); }
    .topbar .ledger { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; justify-content: space-between; border-radius: 22px; }
    .ledger { padding: 6px 4px; }
    .ledger__entry { flex: 1; min-width: 0; padding: 0 4px; grid-template-columns: auto; text-align: center; }
    .ledger__amount { font-size: 0.85rem; }
    .ledger__name { font-size: 0.66rem; }
    .pill small { display: none; }
    .topbar > .pill:last-child { padding: 0 12px; font-size: var(--step--1); }
    .pill--brand { min-width: 0; overflow: hidden; }
    .ledger__entry svg { display: none; }
    .ledger__line { justify-content: center; }
    .pill { min-height: 44px; padding: 0 16px; }
    .rail { position: fixed; top: auto; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; }
    .rail__group { display: flex; }
    .rail { gap: 6px; }
    .rail__group { gap: 4px; padding: 5px; }
    .rail .round { width: 40px; height: 40px; }
    .rail .round--avatar { display: none; }
    .frame:has(.rail) { padding-bottom: 84px; }
    .frame { padding-bottom: 16px; }
    .building__actions { flex-wrap: wrap; }
    .building__actions .button { flex: 1 1 auto; }
                .card--left, .card--right, .panel-center { position: static; transform: none; width: auto; max-height: none; margin: 14px 12px 0; }
    .toasts { position: fixed; top: auto; bottom: 84px; }
    .roster { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; list-style: none; margin: 14px 12px 0; padding: 0; }
    .roster__item {
        display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 8px;
        width: 100%; min-height: 56px; padding: 6px 10px; text-align: left; cursor: pointer;
        border-radius: 18px; border: 1px solid var(--line); background: #fff;
    }
    .roster__item img, .roster__empty { grid-row: 1 / 3; width: 44px; height: 44px; }
    .roster__empty { display: grid; place-items: center; border-radius: 50%; border: 1px dashed var(--muted); color: var(--muted); }
    .roster__name { font-size: var(--step--1); line-height: 1.2; }
    .roster__level { font-size: 0.72rem; color: var(--muted); }
    .roster__item.is-building { border-color: var(--amber); }
    .roster__item.is-selected { border-color: var(--indigo); box-shadow: 0 0 0 1px var(--indigo); }
    .popover { inset: auto 12px 84px 12px; transform: none; width: auto; }
    /* Bandeau collé en haut (port, marchandises) : les ancres et les fiches ouvertes s'arrêtent dessous */
    html { scroll-padding-top: calc(var(--hud-h, 132px) + 10px); }
    /* Port en une colonne : le conseiller et les chantiers d'abord, puis les bâtiments et la fiche choisie, le reste ensuite */
    .page-village .quest { order: 1; }
    .page-village [data-tour-anchor="works"] { order: 2; }
    .page-village .roster { order: 3; }
    .page-village #building-card { order: 4; }
    .page-village .infobox { order: 5; }
    .page-village .portcard, .page-village .portlist, .page-village .annexes { order: 6; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Fiche bâtiment : croix de fermeture */
.card--right[hidden] { display: none; }
.round.card__close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; background: rgba(255, 255, 255, 0.8); z-index: 1; }
.card__close svg { width: 16px; height: 16px; }
.card--right .building__head { padding-right: 36px; }

/* Sélecteur de port */
.pill--brand { border: 1px solid var(--glass-edge); cursor: pointer; font: inherit; color: inherit; text-align: left; }
.pill__chevron { width: 14px !important; height: 14px !important; color: var(--muted) !important; }
.popover--ports { inset: 80px auto auto 24px; transform: none; }
.port-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.port-list a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 14px; text-decoration: none; }
.port-list a:hover { background: #fff; }
.port-list a[aria-current] { background: var(--indigo); color: #fff; }
.port-list small { color: inherit; opacity: 0.7; }

/* Recrutement dans la fiche d'un bâtiment */
.recruit { display: grid; gap: 8px; margin: 6px 0 14px; }
.recruit__row { display: grid; align-items: center; gap: 10px; padding: 8px; border-radius: 18px; background: rgba(255, 255, 255, 0.6); }
.recruit__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; }
.recruit__icon svg { width: 22px; height: 22px; }
.recruit__info { font-size: var(--step--1); line-height: 1.3; }
.recruit__owned { color: var(--muted); }
.recruit__cost { display: flex; flex-wrap: wrap; gap: 2px 10px; color: var(--muted); font-size: 0.72rem; }
.recruit__cost span { display: inline-flex; align-items: center; gap: 3px; }
.recruit__cost svg { width: 12px; height: 12px; }
.recruit__qty { width: 58px; min-height: 40px; padding: 0 8px; border-radius: 12px; border: 1px solid var(--line); font: inherit; text-align: center; }
.recruit__row .round--primary { width: 40px; height: 40px; }
.recruit__locked { grid-column: 3 / -1; font-size: 0.72rem; color: var(--muted); }
.worklist__dot { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; }
.worklist__dot svg { width: 18px; height: 18px; }

/* --------------------------------------------------------------------------
   Carte du monde
   -------------------------------------------------------------------------- */
.world { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; cursor: grab; touch-action: none; background: #2c6670; }
.world.is-dragging { cursor: grabbing; }
.world:focus-visible { outline: none; }
.map-zoom { padding: 0 6px; gap: 6px; }
.map-zoom .round { width: 40px; height: 40px; }
.map-nav { width: 248px; border-top-right-radius: 40px; }
.minimap { display: block; width: 100%; height: auto; aspect-ratio: 1; margin-top: 10px; border-radius: 16px; cursor: crosshair; background: #2c6670; }
.coords { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.coords label { display: flex; align-items: center; gap: 4px; font-size: var(--step--1); color: var(--muted); }
.coords input { width: 62px; min-height: 40px; padding: 0 8px; border-radius: 12px; border: 1px solid var(--line); font: inherit; background: #fff; }
.coords .round--primary { width: 40px; height: 40px; margin-left: auto; }
.legend { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; font-size: 0.74rem; color: var(--muted); }
.legend li { display: flex; align-items: center; gap: 6px; }
.legend__dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.legend__dot--port { background: #fff; border: 2px solid #8a6b3a; }
.legend__dot--island { background: #c9b77a; }
.legend__dot--barbarian { background: #8e2f1e; }
.legend__dot--fort { background: #a3301f; box-shadow: 0 0 0 2px #f2cf6b; }
.page-map .frame::before { display: none; }
@media (max-width: 760px), (max-height: 520px) {
    .world { position: relative; inset: auto; height: 64vh; z-index: 0; border-radius: 0 0 28px 28px; }
    .map-nav { width: auto; }
    .minimap { max-width: 220px; margin-inline: auto; }
}

/* Page de crédits */
.credits-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; font-size: var(--step--1); color: var(--muted); }
.credits-list strong { display: block; color: var(--ink); font-weight: 500; }
@media (max-width: 760px), (max-height: 520px) { .topbar > span:empty { display: none; } }

/* --------------------------------------------------------------------------
   Pages en panneau large (rapports)
   -------------------------------------------------------------------------- */
.panel-wide {
    position: absolute; left: 50%; top: 88px; max-height: calc(100% - 112px); transform: translateX(-50%); z-index: 4;
    width: min(860px, calc(100% - 180px)); overflow: auto;
    border-radius: var(--r-card); padding: 28px 32px; background: var(--glass-strong);
}
.panel-wide h1 { font-size: var(--step-2); margin-bottom: 6px; }
.panel-wide h2 { font-size: var(--step-1); margin: 18px 0 8px; }
.panel-wide__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--line); }
.tabs a { padding: 8px 14px; border-radius: var(--r-pill); text-decoration: none; font-size: var(--step--1); }
.tabs a[aria-current] { background: var(--indigo); color: #fff; }
.empty, .muted { color: var(--muted); font-size: var(--step--1); }
.report-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.report-row { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 18px; background: rgba(255, 255, 255, 0.6); text-decoration: none; }
.report-row:hover { background: #fff; }
.report-row.is-unread .report-row__title { font-weight: 600; }
.report-row.is-unread .report-row__icon { box-shadow: 0 0 0 2px var(--indigo); }
.report-row__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; }
.report-row__icon svg { width: 20px; height: 20px; }
.report-row__icon--combat { color: var(--danger); }
.report-row time { font-size: var(--step--1); color: var(--muted); font-variant-numeric: tabular-nums; }
.back { display: inline-flex; align-items: center; gap: 6px; font-size: var(--step--1); color: var(--muted); text-decoration: none; }
.back svg { width: 14px; height: 14px; }
.verdict { display: inline-block; margin: 14px 0 4px; padding: 6px 16px; border-radius: var(--r-pill); font-weight: 600; }
.verdict.is-win { background: #e5f2e3; color: #2f6b2a; }
.verdict.is-loss { background: #f6e1de; color: var(--danger); }
.sides { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.army { width: 100%; border-collapse: collapse; font-size: var(--step--1); font-variant-numeric: tabular-nums; }
.army th { text-align: left; font-weight: 400; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.army td { padding: 8px; border-bottom: 1px solid var(--line); }
.army .num { text-align: right; }
.army .is-loss { color: var(--danger); font-weight: 600; }
.replay { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.replay code { font-size: var(--step--1); }
.replay__result { padding: 8px 16px; border-radius: var(--r-pill); font-weight: 500; font-size: var(--step--1); }
.replay__result.is-ok { background: #e5f2e3; color: #2f6b2a; }
.replay__result.is-ko { background: #f6e1de; color: var(--danger); }
.round { position: relative; }
.badge { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 0.68rem; font-weight: 600; display: grid; place-items: center; }
@media (max-width: 760px), (max-height: 520px) {
    .panel-wide { position: static; transform: none; width: auto; max-height: none; margin: 14px 12px 0; padding: 22px 18px; }
    /* Pages intérieures : pas de grande image d'en-tête, le contenu d'abord */
    .frame:has(.panel-wide) .frame__art { display: none; }
    .sides { grid-template-columns: 1fr; }
}
.army-form { margin-top: 10px; }
.army-form__units { display: grid; gap: 6px; margin: 12px 0 4px; }
.army-unit { display: grid; grid-template-columns: 24px 1fr 64px auto; align-items: center; gap: 8px; font-size: var(--step--1); }
.army-unit[hidden] { display: none; }
.army-unit svg { width: 20px; height: 20px; }
.army-unit small { color: var(--muted); }
.army-unit input { min-height: 36px; padding: 0 8px; border-radius: 12px; border: 1px solid var(--line); font: inherit; text-align: center; width: 100%; }
.card--right .segmented legend { margin-bottom: 4px; }

/* Alerte d'attaque entrante */
.alert-bar {
    position: absolute; top: 84px; left: 50%; transform: translateX(-50%); z-index: 6;
    display: flex; align-items: center; gap: 12px; padding: 8px 18px 8px 8px;
    border-radius: var(--r-pill); background: var(--danger); color: #fff; font-weight: 500; font-size: var(--step--1);
    box-shadow: 0 10px 30px rgba(192, 57, 43, 0.4);
}
.alert-bar__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); }
.alert-bar__icon svg { width: 18px; height: 18px; animation: ring 1.2s ease-in-out infinite; }
.alert-bar .countdown { color: #fff; }
@keyframes ring { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(6deg); } 60% { transform: rotate(0); } }
.garrison { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.garrison li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border-radius: var(--r-pill); background: #fff; font-size: var(--step--1); font-weight: 600; font-variant-numeric: tabular-nums; }
.garrison svg { width: 18px; height: 18px; }
@media (max-width: 760px), (max-height: 520px) { .alert-bar { position: sticky; top: 120px; transform: none; margin: 10px 12px 0; left: auto; } }

/* Boutons de la page d'accueil */
.button--xl { box-shadow: 0 12px 30px rgba(22, 19, 58, 0.35); }

/* Marché, alliance, messagerie, classements */
.market { width: 100%; border-collapse: collapse; font-size: var(--step--1); font-variant-numeric: tabular-nums; }
.market th { text-align: left; font-weight: 400; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.market td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.market .num { text-align: right; }
.market tr.is-mine { background: rgba(42, 36, 112, 0.05); }
.market .button { min-height: 38px; padding: 0 16px; }
.res-qty { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.res-qty svg { width: 18px; height: 18px; }
.trade-form { max-width: 560px; }
.trade-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 12px; }
.trade-pair select, .trade-pair input { width: 100%; min-width: 0; }
.trade-pair fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; }
.trade-pair legend { font-size: var(--step--1); color: var(--muted); margin-bottom: 6px; }
.trade-pair__arrow { width: 22px; height: 22px; margin-bottom: 14px; color: var(--muted); transform: rotate(45deg); }
/* Téléphone : « je propose » au-dessus de « je demande », la flèche pointe vers le bas */
@media (max-width: 480px) {
    .trade-pair { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .trade-pair__arrow { justify-self: center; margin: 0; transform: rotate(135deg); }
}
.form select, .form textarea, .trade-form input[type="number"], .inline-form input, .chat-form input {
    font: inherit; min-height: 46px; padding: 0 16px; border-radius: 16px; border: 1px solid var(--line); background: #fff; color: var(--ink);
}
.form textarea { padding: 12px 16px; min-height: 160px; resize: vertical; }
.cargo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cargo label { display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 6px; }
.cargo svg { width: 20px; height: 20px; }
.cargo input { width: 100%; min-width: 0; }
.inline-form { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.inline-form .field { flex: 1 1 180px; }
.inline-form .button { width: auto; margin: 0; }
.invite-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 18px; background: rgba(255, 255, 255, 0.6); }
.invite-row > span { flex: 1; }
.tag { display: inline-block; padding: 2px 10px; border-radius: var(--r-pill); background: var(--indigo); color: #fff; font-size: var(--step--1); vertical-align: middle; }
.alliance-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; }
.member-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.member-actions form { margin: 0; }
.member-actions select { min-height: 32px; padding: 0 8px; border-radius: 10px; border: 1px solid var(--line); font: inherit; font-size: var(--step--1); background: #fff; }
.chat { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-height: 360px; overflow: auto; }
.chat li { padding: 10px 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.7); font-size: var(--step--1); }
.chat time { color: var(--muted); font-size: 0.72rem; margin-left: 6px; }
.chat p { margin-top: 2px; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-form { display: flex; gap: 8px; margin-top: 10px; }
.chat-form input { flex: 1; border-radius: var(--r-pill); }
.chat-form .round--primary { width: 46px; height: 46px; flex: none; }
.message-body { margin: 16px 0; padding: 18px; border-radius: 18px; background: #fff; line-height: 1.6; overflow-wrap: anywhere; }
.ranking .rank { width: 48px; font-weight: 600; }
  .ranking tr.is-me { background: rgba(42, 36, 112, 0.07); }
@media (max-width: 760px), (max-height: 520px) {
    .alliance-grid { grid-template-columns: 1fr; }
    .cargo { grid-template-columns: 1fr 1fr; }
    .market thead { display: none; }
    .market tr { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
    .market td { border: 0; padding: 2px 0; }
    .market td.num { text-align: left; }
    .rail { max-width: calc(100vw - 16px); overflow-x: auto; scrollbar-width: none; }
}

/* Zoom de la rade */
.zoom-ctl { position: absolute; left: 50%; bottom: var(--gap); transform: translateX(-50%); z-index: 4; display: flex; gap: 6px; padding: 6px; border-radius: var(--r-pill); }
.zoom-ctl .round { width: 40px; height: 40px; }
@media (max-width: 1100px) { .zoom-ctl { left: auto; right: var(--gap); bottom: auto; top: 84px; transform: none; } }
@media (max-width: 760px), (max-height: 520px) { .zoom-ctl { position: relative; top: auto; right: auto; align-self: flex-end; margin: -56px 12px 0 0; } }

/* Quête du conseiller */
.quest {
    position: absolute; left: 80px; top: 84px; z-index: 4;
    width: min(400px, 40%); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
    padding: 12px 14px; border-radius: 22px; font-size: var(--step--1);
}
.quest__step { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--indigo); color: #fff; font-weight: 600; font-size: 0.78rem; }
.quest__body { display: grid; gap: 2px; color: var(--muted); line-height: 1.3; }
.quest__body strong { color: var(--ink); font-weight: 600; }
.quest__reward { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 2px; }
.quest__reward span { display: inline-flex; align-items: center; gap: 3px; }
.quest__reward svg { width: 13px; height: 13px; }
.quest.is-done { box-shadow: 0 0 0 2px var(--amber), var(--shadow); }
.quest.is-done .quest__step { background: var(--amber); }
.quest .button { min-height: 40px; padding: 0 16px; }
.world-banner { position: absolute; top: 84px; left: 50%; transform: translateX(-50%); z-index: 6; padding: 8px 18px; border-radius: var(--r-pill); background: var(--indigo); color: #fff; text-decoration: none; font-size: var(--step--1); font-weight: 500; }
@media (max-width: 1100px) { .quest { width: min(320px, 40%); } }
@media (max-width: 760px), (max-height: 520px) {
    .quest { position: static; width: auto; margin: 14px 12px 0; }
    .world-banner { position: static; transform: none; display: block; margin: 10px 12px 0; text-align: center; }
}

/* --------------------------------------------------------------------------
   Port sur grand écran : la ville plein écran (convention Travian, Grepolis, Forge of Empires),
   panneaux compacts sur les bords, fiche bâtiment en panneau latéral pleine hauteur.
   -------------------------------------------------------------------------- */
@media (min-width: 1101px) and (min-height: 521px) {
    /* Fiche bâtiment : ancrée en haut à droite, hauteur selon son contenu */
    .page-village .card--right {
        top: 84px; bottom: auto; max-height: calc(100% - 84px - var(--gap));
        width: min(420px, 32vw); overflow-y: auto; overscroll-behavior: contain;
    }
    .page-village .card--left { width: min(340px, 28vw); padding: 20px 22px; }
    .page-village .card--left .stat { margin-top: 14px; }
    .page-village .card--left .stat__value { font-size: var(--step-2); }
    .page-village .zoom-ctl { left: 50%; }
}

/* --------------------------------------------------------------------------
   Grand écran : barre de navigation en dock horizontal, en bas au centre.
   Le bord gauche est libéré : les panneaux s'alignent sur la pilule du port.
   -------------------------------------------------------------------------- */
@media (min-width: 761px) and (min-height: 521px) {
    .rail {
        top: auto; bottom: var(--gap); left: 50%; transform: translateX(-50%);
        display: flex; gap: 8px;
    }
    .page-village .rail { top: auto; }
    .rail__group { display: flex; gap: 6px; padding: 6px; }
    .rail .round { width: 42px; height: 42px; }
    .card--left, .quest { left: var(--gap); }
    .zoom-ctl, .page-village .zoom-ctl { bottom: calc(var(--gap) + 66px); }
    .map-nav { left: var(--gap); }
    .panel-wide { bottom: auto; max-height: calc(100% - 180px); }
    .popover { inset: auto auto calc(var(--gap) + 66px) 50%; transform: translateX(-50%); }
}
@media (min-width: 761px) and (max-width: 1100px) and (min-height: 521px) {
    /* Tablette : le dock prend toute la largeur utile, les cartes du bas passent au-dessus */
    .card--left, .card--right, .map-nav { bottom: calc(var(--gap) + 66px); }
    .page-village .card--right { top: 84px; bottom: auto; max-height: calc(100% - 84px - var(--gap) - 66px); }
    .zoom-ctl, .page-village .zoom-ctl { top: 84px; bottom: auto; left: auto; right: var(--gap); transform: none; }
}

/* Pages légales et case CGU */
.legal { line-height: 1.65; }
.legal h2 { margin-top: 22px; }
.legal p, .legal li { font-size: var(--step--1); color: var(--ink); max-width: 72ch; }
.legal ul { padding-left: 20px; display: grid; gap: 6px; }
.legal__nav { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--line); font-size: var(--step--1); }
.account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.account-grid h2 { margin-top: 8px; }
.danger-zone { margin-top: 24px; padding: 14px 18px; border-radius: 18px; border: 1px solid rgba(192, 57, 43, 0.3); }
.danger-zone summary { cursor: pointer; color: var(--danger); font-weight: 500; }
.danger-zone p { font-size: var(--step--1); margin: 10px 0; }
@media (max-width: 760px) { .account-grid { grid-template-columns: 1fr; } }
.admin .army td, .admin .army th { vertical-align: middle; }
.admin .inline-form input { min-height: 36px; }
.admin .inline-form .button { min-height: 36px; padding: 0 14px; }
.legend__dot--ally { background: #fff; border: 2px solid #3fae6a; }
.legend__dot--war { background: #fff; border: 2px solid #d0402f; }
.rel-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.rel-dot--same, .rel-dot--ally { background: #3fae6a; } .rel-dot--nap { background: #5b8fd9; } .rel-dot--war { background: #d0402f; }
.relations { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.relation { padding: 8px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.65); font-size: var(--step--1); }
.relation__type { padding: 2px 10px; border-radius: var(--r-pill); color: #fff; font-size: 0.72rem; font-weight: 600; }
  .emblem--logo { display: block; width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: none; }
img.recruit__icon { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: top; background: #fff; padding: 0; }
.recruit__row { grid-template-columns: 44px 1fr auto auto; }
.garrison img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; object-position: top; background: #f1eff6; }

/* ==========================================================================
   THÈME « COMPTOIR » (inspiré des conventions de Travian)
   Site public : anthracite et or. Jeu : parchemin, HUD central, colonnes.
   ========================================================================== */
@font-face { font-family: "Cinzel"; font-weight: 600; src: url("/fonts/cinzel-latin-600-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Cinzel"; font-weight: 700; src: url("/fonts/cinzel-latin-700-normal.woff2") format("woff2"); font-display: swap; }

:root {
    --display: "Cinzel", "Iowan Old Style", Georgia, serif;
    --gold: #cba467;
    --gold-light: #e8cf98;
    --night: #2c292c;
    --night-2: #1e2022;
    --cream: #e6dbc9;
    --cream-muted: #b9ab93;
    --parch: #f3ead6;
    --parch-2: #e7dbc0;
    --parch-edge: #9b7f55;
    --brown: #3b2a1a;
    --brown-muted: #6e5a42;
    --green: #5a9a0a;
    --green-dark: #3d6b0a;
}

/* ---------- Boutons communs ---------- */
.button {
    border-radius: 8px;
    border: 1px solid var(--green-dark);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 2px 0 rgba(0, 0, 0, 0.25);
    color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35); font-weight: 600;
}
.button--ghost { border: 1px solid #a07a2a; color: #3b2a1a; text-shadow: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 0 rgba(0, 0, 0, 0.2);
}
.button--ghost:hover { color: #3b2a1a; }
.button--xl { min-height: 60px; padding: 0 40px; font-size: 1.15rem; letter-spacing: 0.04em; border-radius: 12px; }

/* ---------- Site public : anthracite et or ---------- */
body:not(.theme-parchment) { background: var(--night); color: var(--cream); }
body:not(.theme-parchment) .frame { background: var(--night); }
body:not(.theme-parchment) .glass {
    background: rgba(30, 32, 34, 0.82); border: 1px solid var(--gold); border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); color: var(--cream);
}
body:not(.theme-parchment) .card, body:not(.theme-parchment) .panel-center { border-radius: 6px; }
body:not(.theme-parchment) h1, body:not(.theme-parchment) h2, body:not(.theme-parchment) .card h2 { font-family: var(--display); color: var(--gold); letter-spacing: 0.03em; }
body:not(.theme-parchment) .card__text, body:not(.theme-parchment) .muted, body:not(.theme-parchment) .building__desc, body:not(.theme-parchment) .building__meta, body:not(.theme-parchment) .field__label, body:not(.theme-parchment) .panel-center__lede, body:not(.theme-parchment) .world-stats dt, body:not(.theme-parchment) .stat__label { color: var(--cream-muted); }
body:not(.theme-parchment) .world-stats dd, body:not(.theme-parchment) .stat__value { color: var(--cream); }
body:not(.theme-parchment) a { color: var(--gold); }
body:not(.theme-parchment) .pill { color: var(--gold); border: 1px solid var(--gold); background: rgba(30, 32, 34, 0.7); }
body:not(.theme-parchment) .pill svg { color: var(--gold); }
body:not(.theme-parchment) .topbar { top: 0; left: 0; right: 0; padding: 10px 16px; background: linear-gradient(rgba(77, 77, 77, 0.92), rgba(41, 41, 41, 0.92)); border-bottom: 1px solid rgba(203, 164, 103, 0.5); }
body:not(.theme-parchment) .form input, body:not(.theme-parchment) .form select, body:not(.theme-parchment) .form textarea {
    background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(203, 164, 103, 0.6); color: var(--cream); border-radius: 6px;
}
body:not(.theme-parchment) .segmented__options { background: rgba(0, 0, 0, 0.35); border-color: rgba(203, 164, 103, 0.6); border-radius: 8px; }
body:not(.theme-parchment) .segmented label { border-radius: 6px; color: var(--cream); }
body:not(.theme-parchment) .segmented label:has(input:checked) { background: var(--gold); color: var(--night); }
body:not(.theme-parchment) .world-stats div { background: rgba(0, 0, 0, 0.35); border-radius: 6px; }
body:not(.theme-parchment) .notice { background: rgba(0, 0, 0, 0.4); color: var(--cream); }
body:not(.theme-parchment) .notice.is-error { color: #ff9b8a; }
body:not(.theme-parchment) .toast { background: var(--night-2); color: var(--cream); border: 1px solid var(--gold); }

/* ---------- Jeu : parchemin ---------- */
.theme-parchment { background: #3a3226; }
.theme-parchment .frame { background: #4b5e2c; }
.theme-parchment .glass, .theme-parchment .panel-wide, .theme-parchment .card {
    background: linear-gradient(180deg, var(--parch) 0%, var(--parch-2) 100%);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    border: 1px solid var(--parch-edge); border-radius: 6px; color: var(--brown);
    box-shadow: inset 0 0 0 3px var(--parch), inset 0 0 0 4px #cdb68b, 0 8px 22px rgba(30, 20, 8, 0.45);
}
/* Ornements enroulés dans deux coins, comme les cadres de carte ancienne */
.theme-parchment .card::before, .theme-parchment .card::after, .theme-parchment .panel-wide::before, .theme-parchment .panel-wide::after {
    content: ""; position: absolute; width: 18px; height: 18px; pointer-events: none;
    border: 2px solid var(--parch-edge);
}
.theme-parchment .card::before, .theme-parchment .panel-wide::before { border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0; }
.theme-parchment .card::after, .theme-parchment .panel-wide::after { border-left: 0; border-top: 0; border-radius: 0 0 10px 0; }
.theme-parchment h1, .theme-parchment h2, .theme-parchment .card h2, .theme-parchment .building__head h2 {
    font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--brown);
}
.theme-parchment .card h2, .theme-parchment .panel-wide h2 { font-size: 0.95rem; padding-bottom: 8px; margin-bottom: 10px; border-bottom: 1px dotted var(--parch-edge); }
.theme-parchment .muted, .theme-parchment .card__text, .theme-parchment .building__desc, .theme-parchment .building__meta,
.theme-parchment .field__label, .theme-parchment .ledger__name, .theme-parchment .stat__label, .theme-parchment .worklist__name em { color: var(--brown-muted); }
.theme-parchment a { color: #6b3f12; }
.theme-parchment .pill { background: linear-gradient(180deg, var(--parch), var(--parch-2)); border: 1px solid var(--parch-edge); color: var(--brown); box-shadow: 0 4px 12px rgba(30, 20, 8, 0.35); border-radius: 8px; }
.theme-parchment .pill--brand { border-radius: 999px; }
.theme-parchment .pill small { color: var(--brown-muted); }
.theme-parchment .form input, .theme-parchment .form select, .theme-parchment .form textarea, .theme-parchment .recruit__qty,
.theme-parchment .coords input, .theme-parchment .army-unit input, .theme-parchment .chat-form input {
    background: #fffaf0; border: 1px solid #b59a6c; border-radius: 4px; color: var(--brown);
}
.theme-parchment .recruit__row, .theme-parchment .world-stats div, .theme-parchment .report-row, .theme-parchment .chat li,
.theme-parchment .relation, .theme-parchment .invite-row, .theme-parchment .garrison li, .theme-parchment .worklist__dot,
.theme-parchment .message-body { background: rgba(255, 252, 242, 0.75); border: 1px solid #d4c19b; border-radius: 4px; }
.theme-parchment .tabs { background: #fffaf0; border-color: #b59a6c; border-radius: 6px; }
.theme-parchment .tabs a { border-radius: 4px; }
.theme-parchment .tabs a[aria-current] { background: var(--brown); color: var(--parch); }
.theme-parchment .round--primary { background: linear-gradient(180deg, #8fcf3f, #4a8508); border: 1px solid var(--green-dark); }
.theme-parchment .toast { background: #2b241b; color: var(--parch); border: 1px solid var(--gold); border-radius: 6px; }
.theme-parchment .army th, .theme-parchment .market th { color: var(--brown-muted); border-color: #c9b48c; }
.theme-parchment .army td, .theme-parchment .market td { border-color: #ddd0b2; }
.theme-parchment .countdown { color: var(--green-dark); }
.theme-parchment .round.card__close { background: #fffaf0; border: 1px solid #b59a6c; color: var(--brown); }

/* HUD central : boutons ronds façon médaillons */
.theme-parchment .rail__group { background: linear-gradient(180deg, #8a6a43, #5e4428); border: 1px solid #3b2a1a; box-shadow: 0 6px 16px rgba(30, 20, 8, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25); border-radius: 999px; }
.theme-parchment .rail .round {
    background: radial-gradient(circle at 50% 35%, #fbf3df 0%, #e4d2a8 60%, #c9ad74 100%);
    border: 2px solid #a8823f; box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.4); color: #4a3016;
}
.theme-parchment .rail .round:hover { background: radial-gradient(circle at 50% 35%, #fffaf0 0%, #ecdcb6 60%, #d4b984 100%); }
.theme-parchment .rail .round[aria-current="page"] { border-color: #f2d27a; box-shadow: 0 0 0 3px rgba(242, 210, 122, 0.55), inset 0 -2px 3px rgba(0, 0, 0, 0.2); }
.theme-parchment .round--avatar { background: radial-gradient(circle, #f6dd8f, #c99a2e) !important; color: #3b2a1a; }

/* Bande des ressources sous le HUD */
.theme-parchment .ledger {
    background: linear-gradient(180deg, #efe3c6, #ddc99f); border: 1px solid #8b6b45; border-radius: 8px;
    box-shadow: 0 6px 16px rgba(30, 20, 8, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.6); color: var(--brown);
}
.theme-parchment .ledger__entry { border-color: rgba(110, 90, 66, 0.35); }
.theme-parchment .ledger__entry svg { color: #6b4a22; }
.theme-parchment .ledger__gauge { background: rgba(110, 90, 66, 0.25); }
.theme-parchment .ledger__gauge span { background: var(--green); }
.theme-parchment .ledger__entry.is-full .ledger__gauge span { background: #b8331f; }

/* Village : emplacements libres en ovales sombres, niveaux en pastilles vertes */
.theme-parchment .plot__mark { fill: rgba(46, 64, 22, 0.45); stroke: rgba(255, 255, 255, 0.25); stroke-dasharray: none; stroke-width: 1; }

/* Horloge du serveur (haut gauche) */
.server-clock { display: block; font-size: 0.68rem; line-height: 1.3; color: var(--brown-muted); padding: 0 4px; }
.server-clock strong { display: block; color: var(--brown); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Jeu : disposition à la Travian (ordinateur) ---------- */
.col { display: contents; } /* mobile : les panneaux s'empilent */
@media (min-width: 761px) and (min-height: 521px) {
    /* HUD : médaillons de navigation centrés en haut, ressources juste dessous */
    .theme-parchment .rail { bottom: auto; left: 50%; transform: translateX(-50%); }
                    .theme-parchment .panel-wide { max-height: calc(100% - 170px); }
        .theme-parchment .map-nav, .theme-parchment .card--right:not(#building-card) { bottom: var(--gap); }

    /* Colonnes latérales */
    .page-village .col {
        position: absolute; z-index: 4;
        display: flex; flex-direction: column; gap: 14px;
        width: min(300px, 24vw); max-height: calc(100% - 166px); overflow-y: auto; padding: 6px;
        scrollbar-width: thin; scrollbar-color: rgba(91, 61, 30, 0.55) transparent;
    }
    .page-village .col--left { left: 10px; }
    .page-village .col--right { right: 10px; }
    /* Les panneaux gardent leur hauteur : c'est la colonne qui défile quand ils ne tiennent pas tous */
    .page-village .col > .card { position: relative; inset: auto; flex-shrink: 0; width: auto; max-height: none; transform: none; padding: 16px 18px; border-radius: 6px; }
    .page-village .col .stat { margin-top: 10px; }
    .page-village .col .stat__value { font-size: var(--step-2); }

    /* Fiche bâtiment : fenêtre centrale */
    .page-village #building-card { bottom: auto; left: 50%; right: auto; transform: translateX(-50%);
        width: min(520px, calc(100% - 2 * min(300px, 24vw) - 60px)); overflow-y: auto; overflow-x: hidden;
        z-index: 6;
    }
    .page-village .zoom-ctl { top: auto; bottom: var(--gap); left: 50%; right: auto; transform: translateX(-50%); }
}

/* Panneaux du port */
.infobox__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: var(--step--1); }
.infobox__list li { padding-left: 14px; position: relative; line-height: 1.4; }
.infobox__list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px; border-radius: 50%; background: var(--parch-edge); }
.infobox__list li.is-alert { color: #a82a17; }
.infobox__list li.is-alert::before { background: #c0392b; }
.portcard__owner { font-size: var(--step--1); color: var(--brown-muted); margin: 0; }
.theme-parchment .portcard__name { font-size: 1.05rem; border: 1px solid #c9b48c; background: rgba(255, 252, 242, 0.7); padding: 6px 10px; margin: 4px 0 10px; border-bottom-style: solid; }
.portcard__facts { display: flex; justify-content: space-between; margin: 0; font-size: var(--step--1); }
.portcard__facts dt { color: var(--brown-muted); }
.portcard__facts dd { margin: 0; font-weight: 600; }
.portlist__bar { display: block; height: 6px; border-radius: 3px; background: rgba(110, 90, 66, 0.25); overflow: hidden; margin-bottom: 10px; }
.portlist__bar span { display: block; height: 100%; width: 0; background: var(--green); }
.portlist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.portlist a { display: flex; justify-content: space-between; padding: 6px 10px; border-radius: 4px; text-decoration: none; font-size: var(--step--1); color: var(--brown); }
.portlist a:hover { background: rgba(255, 252, 242, 0.8); }
.portlist a[aria-current] { background: #d9c79c; font-weight: 600; }
.theme-parchment .quest { display: grid; gap: 8px 12px; align-items: center; }
.quest__advisor { grid-row: 1 / 3; width: 72px; height: 72px; object-fit: cover; object-position: top; border-radius: 50%; border: 2px solid var(--parch-edge); background: #e4d2a8; }
.theme-parchment .quest .quest__step { width: auto; height: auto; padding: 2px 10px; border-radius: 999px; background: var(--brown); color: var(--parch); }
.theme-parchment .quest form { grid-column: 1 / -1; }
.theme-parchment .quest form .button { width: 100%; }
.theme-parchment .quest.is-done { box-shadow: inset 0 0 0 3px var(--parch), inset 0 0 0 4px #d89a1c, 0 8px 22px rgba(30, 20, 8, 0.45); }
.brandclock { gap: 8px; padding-right: 14px; }
@media (max-width: 760px), (max-height: 520px) {
    /* Thème parchemin sur mobile : panneaux empilés, sans décalage hérité de l'ordinateur */
    .theme-parchment .card, .theme-parchment .quest, .theme-parchment .panel-wide { left: auto; right: auto; top: auto; bottom: auto; transform: none; }
    .theme-parchment .topbar { background: #3a3226; }
    .theme-parchment .rail__group { padding: 4px; }
}
body:not(.theme-parchment) a.button, .theme-parchment a.button { color: #fff; }
body:not(.theme-parchment) a.button--ghost, .theme-parchment a.button--ghost { color: #3b2a1a; }

/* ==========================================================================
   Passe 2 de rétro-ingénierie Travian : HUD accroché en haut, médaillons colorés,
   outils sombres en haut à droite, pastilles blanches cerclées de vert, conseiller en surplomb.
   ========================================================================== */
.corner-tools { display: flex; gap: 6px; }
@media (min-width: 761px) and (min-height: 521px) {
                        .corner-tools { position: absolute; top: 10px; right: 16px; z-index: 7; }
    .theme-parchment .topbar > :last-child:not(.pill) { display: none; }
}
.theme-parchment .corner-tools .round, .theme-parchment .corner-tools .round--avatar {
    width: 36px; height: 36px; background: #3b2a1a !important; color: #f3ead6; border: 1px solid #c9ad74;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.theme-parchment .corner-tools .round:hover { background: #5a4026 !important; }
.theme-parchment .corner-tools .round svg { width: 17px; height: 17px; }
.theme-parchment .corner-tools .round--avatar { font-size: 0.9rem; color: #f6dd8f; }
.theme-parchment .corner-tools form { margin: 0; }
/* Médaillons colorés : chaque destination a sa couleur, comme les icônes illustrées de Travian */
.theme-parchment .round--port { color: #8a4b12 !important; }
.theme-parchment .round--map { color: #1f6f8b !important; }
.theme-parchment .round--reports { color: #9b2c1c !important; }
.theme-parchment .round--messages { color: #b07a10 !important; }
.theme-parchment .round--market { color: #3f7d16 !important; }
.theme-parchment .round--alliance { color: #5b3a8a !important; }
.theme-parchment .round--rankings { color: #a8820f !important; }
/* Pastilles de niveau : disque blanc cerclé de vert */
/* Conseiller en surplomb du panneau de quête */
.theme-parchment .quest { margin-top: 52px; padding-top: 56px !important; grid-template-columns: 1fr; text-align: left; }
.theme-parchment .quest__advisor {
    /* grid-row: auto : sinon, enfant positionné d'une grille, il se placerait dans sa zone de grille et non au-dessus du panneau */
    position: absolute; top: -50px; left: 50%; transform: translateX(-50%); grid-row: auto;
    width: 96px; height: 96px; border: 3px solid #f3ead6; box-shadow: 0 0 0 2px #7a5a32, 0 6px 14px rgba(30, 20, 8, 0.45);
}
.quest__bang {
    position: absolute; top: -46px; left: calc(50% - 74px); width: 30px; height: 38px; border-radius: 8px;
    display: grid; place-items: center; background: #fffaf0; border: 2px solid #3b2a1a; color: #3b2a1a; font-weight: 800; font-size: 1.2rem;
    animation: bang 1.6s ease-in-out infinite;
}
@keyframes bang { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.theme-parchment .quest .quest__step, .theme-parchment .quest .quest__body { grid-column: 1; }
.theme-parchment .quest .quest__step { justify-self: center; }
/* Infobulles sombres sur les emplacements (comme Travian) */
.plot-tip {
    position: absolute; z-index: 8; pointer-events: none; max-width: 240px;
    padding: 10px 14px; border-radius: 4px; background: rgba(43, 36, 27, 0.94); color: #f3ead6;
    border: 1px solid #7a5a32; font-size: var(--step--1); line-height: 1.4; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.plot-tip strong { display: block; color: #f6dd8f; font-weight: 600; }
@media (max-width: 760px), (max-height: 520px) {
    .corner-tools { position: absolute; top: 12px; right: 12px; z-index: 8; }
    .theme-parchment .quest { margin-top: 64px; }
}

/* Barre de zoom : bandeau parchemin accroché au bas de l'écran, symétrique du HUD */
.theme-parchment .zoom-ctl {
    display: flex; align-items: center; gap: 8px; padding: 8px 16px 6px;
    background: linear-gradient(180deg, #e3cfa4 0%, #f6ecd4 100%);
    border: 2px solid #7a5a32; border-bottom: 0; border-radius: 22px 22px 0 0;
    box-shadow: 0 -4px 14px rgba(30, 20, 8, 0.35), inset 0 2px 0 #c9ad74;
}
.theme-parchment .zoom-ctl .round {
    width: 40px; height: 40px; color: #4a3016;
    background: radial-gradient(circle at 50% 35%, #fbf3df 0%, #e4d2a8 60%, #c9ad74 100%);
    border: 2px solid #a8823f; box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.2);
}
.theme-parchment .zoom-ctl .round:hover { background: radial-gradient(circle at 50% 35%, #fffaf0 0%, #ecdcb6 60%, #d4b984 100%); }
.theme-parchment .zoom-ctl .round svg { width: 18px; height: 18px; }
.theme-parchment .zoom-ctl .round--wide { width: auto; display: inline-flex; gap: 6px; padding: 0 14px; border-radius: 999px; font-size: var(--step--1); font-weight: 600; }
.theme-parchment .zoom-ctl .round--wide svg { width: 15px; height: 15px; }
@media (max-width: 760px), (max-height: 520px) {
    .theme-parchment .zoom-ctl { border-radius: 22px; border-bottom: 2px solid #7a5a32; padding: 6px; }
    .theme-parchment .zoom-ctl .round--wide span { display: none; }
}

@media (min-width: 761px) and (min-height: 521px) {
    .theme-parchment.page-village .zoom-ctl { position: absolute; top: auto; bottom: 0; left: 50%; right: auto; width: auto; transform: translateX(-50%); z-index: 5; }
    .theme-parchment .panel-wide, .page-village .col, .page-village #building-card { top: 162px; }
}

/* ==========================================================================
   HUD (passe 3) : un seul bloc parchemin accroché en haut de l'écran.
   Rangée de médaillons + bande des ressources, même largeur, même centre, couture dorée.
   ========================================================================== */
:root { --hud-w: clamp(430px, calc(100vw - 500px), 700px); --hud-row: 64px; }
@media (min-width: 761px) and (min-height: 521px) {
    .theme-parchment .topbar { top: 0; padding-top: 10px; align-items: start; }
    .theme-parchment .topbar > .pill--brand { margin-top: 0; }
    .theme-parchment .topbar > :last-child { margin-top: 52px; }      /* sous les outils du coin */
    .theme-parchment .topbar > .pill--action { display: none; }       /* « Mon port » : déjà dans la navigation */

    .theme-parchment .rail { top: 0; z-index: 7; }
    .theme-parchment .rail__group {
        box-sizing: border-box; width: var(--hud-w); height: var(--hud-row);
        justify-content: center; align-items: center; gap: 14px; padding: 0 18px;
        background:
            radial-gradient(ellipse 60% 120% at 50% 0%, rgba(255, 250, 235, 0.9), transparent 70%),
            linear-gradient(180deg, #f2e4c3 0%, #e1caa0 100%);
        border: 2px solid #5b3d1e; border-top: 0; border-radius: 0 0 20px 20px;
        box-shadow: inset 0 0 0 1px rgba(255, 248, 228, 0.9), 0 10px 22px rgba(30, 20, 8, 0.45);
        filter: none;
    }
    /* Avec une bande de ressources : la rangée se prolonge vers le bas, sans coins ni ombre propres */
    .theme-parchment .frame:has(.topbar .ledger) .rail__group {
        border-bottom: 0; border-radius: 0; box-shadow: inset 0 0 0 1px rgba(255, 248, 228, 0.9);
    }
    .theme-parchment .topbar .ledger {
        box-sizing: border-box; width: var(--hud-w); min-height: 0;
        margin-top: calc(var(--hud-row) - 10px);   /* compense le padding-top de la barre */
        padding: 7px 10px 9px;
        background: linear-gradient(180deg, #f8efd8 0%, #ead7aa 100%);
        border: 2px solid #5b3d1e; border-top: 0; border-radius: 0 0 18px 18px;
        box-shadow: inset 0 2px 0 #c9a45c, inset 0 3px 0 rgba(255, 248, 228, 0.7), 0 12px 24px rgba(30, 20, 8, 0.45);
    }
    .theme-parchment .topbar .ledger__entry { flex: 1 1 0; min-width: 0; padding: 2px 12px; }
    .theme-parchment .ledger__icon { grid-row: 1 / 4; width: 30px; height: 30px; align-self: center; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25)); }

    /* Médaillons */
    .theme-parchment .rail .round {
        width: 46px; height: 46px;
        background: radial-gradient(circle at 50% 30%, #fffdf6 0%, #f1e3c2 55%, #d6bb83 100%);
        border: 2px solid #6b4a22;
        box-shadow: 0 0 0 2px rgba(255, 246, 220, 0.75), 0 3px 5px rgba(40, 25, 10, 0.35), inset 0 -3px 5px rgba(120, 85, 40, 0.28);
        transition: transform 140ms ease, box-shadow 140ms ease;
    }
    .theme-parchment .rail .round img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3)); }
    .theme-parchment .rail .round svg { width: 22px; height: 22px; }
    .theme-parchment .rail .round:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px #f5d77f, 0 6px 10px rgba(40, 25, 10, 0.35), inset 0 -3px 5px rgba(120, 85, 40, 0.28); }
    .theme-parchment .rail .round[aria-current="page"] {
        border-color: #9a6a12;
        box-shadow: 0 0 0 3px #f2cf6b, 0 0 14px rgba(242, 207, 107, 0.85), inset 0 -3px 5px rgba(120, 85, 40, 0.28);
    }

    /* Panneaux sous le HUD : plus haut quand il n'y a pas de bande de ressources */
    .theme-parchment .frame:not(:has(.topbar .ledger)) .panel-wide { top: 92px; max-height: calc(100% - 112px); }
}
/* Infobulle sous chaque médaillon (souris uniquement) */
@media (hover: hover) and (min-width: 761px) {
    .theme-parchment .rail .round[data-tip]::after {
        content: attr(data-tip); position: absolute; top: calc(100% + 12px); left: 50%; transform: translate(-50%, -4px);
        padding: 6px 10px; border-radius: 4px; border: 1px solid #7a5a32;
        background: rgba(43, 36, 27, 0.96); color: #f3ead6; font-size: 0.75rem; font-weight: 500; white-space: nowrap;
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
        opacity: 0; pointer-events: none; transition: opacity 120ms ease, transform 120ms ease; z-index: 30;
    }
    .theme-parchment .rail .round[data-tip]:hover::after,
    .theme-parchment .rail .round[data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
}
/* Mobile : icônes illustrées dans le dock */
@media (max-width: 760px), (max-height: 520px) {
    .theme-parchment .rail .round img { width: 28px; height: 28px; object-fit: contain; }
    .theme-parchment .ledger__icon { display: none; }
}
@media (min-width: 761px) and (min-height: 521px) {
    .page-village .col, .page-village #building-card, .theme-parchment .frame:has(.topbar .ledger) .panel-wide { top: 146px; }
    .theme-parchment .toasts, .theme-parchment .alert-bar, .theme-parchment .world-banner { top: 140px; }
}

/* Positionnement des panneaux parchemin : on ne touche jamais au placement prévu par chaque écran.
   Seuls les panneaux posés dans le flux reçoivent un repère pour leurs ornements de coins. */
.theme-parchment .col > .card { position: relative; }
@media (max-width: 760px), (max-height: 520px) {
    .theme-parchment .card, .theme-parchment .panel-wide { position: relative; }
}

/* Ornements de coins à l'intérieur du cadre : ils ne débordent plus (aucune barre de défilement horizontale parasite) */
.theme-parchment .card::before, .theme-parchment .panel-wide::before { top: 4px; left: 4px; }
.theme-parchment .card::after, .theme-parchment .panel-wide::after { bottom: 4px; right: 4px; }
.theme-parchment .card, .theme-parchment .panel-wide { overflow-x: hidden; }
.theme-parchment .quest { overflow: visible; }
/* Bouton « Mon compte » : portrait du capitaine */
.round--avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 15%; display: block; }
.theme-parchment .corner-tools .round--avatar { padding: 0; overflow: hidden; border: 2px solid #c9ad74; }

/* ==========================================================================
   Rade : pastilles de niveau (couleur = ce que l'on peut faire) et chantiers
   ========================================================================== */
.lvl__disc { fill: #fffaf0; stroke: #8b6b45; stroke-width: 2.5; filter: drop-shadow(0 2px 2px rgba(30, 20, 8, 0.45)); }
.lvl__num { font-family: var(--font); font-weight: 700; font-size: 15px; fill: #3b2a1a; text-anchor: middle; dominant-baseline: central; }
.plot--ready .lvl__disc { fill: #4f9a12; stroke: #fff; stroke-width: 3; }
.plot--ready .lvl__num { fill: #fff; }
.plot--short .lvl__disc { fill: #fffaf0; stroke: #a08a68; }
.plot--locked .lvl__disc { fill: #ddd3c4; stroke: #9a8f80; }
.plot--locked .lvl__num { fill: #6e6458; }
.plot--max .lvl__disc { fill: #f2cf6b; stroke: #8a6212; stroke-width: 3; }
.plot--max .lvl__num { fill: #4a3016; }
.plot--works .lvl__disc { fill: #e39a1c; stroke: #fff; stroke-width: 3; }
.plot--works .lvl__num { fill: #fff; }
.plot-ui.is-selected .lvl__disc { stroke: #f2cf6b; stroke-width: 4; }
.plot-ui { cursor: pointer; }
.lvl__flag { transform: translate(13px, -12px); }
/* Petit signe dans le coin de la pastille */
.lvl__flag circle { stroke: #fff; stroke-width: 1.5; }
.lvl__flag--up circle { fill: #2f7d0a; }
.lvl__flag--up path { fill: #fff; }
.lvl__flag--max circle { fill: #8a6212; }
.lvl__flag--max use { color: #fff3c4; }
.lvl__flag--locked circle { fill: #6e6458; }
.lvl__flag--locked use { color: #fff; }
.lvl__flag--up { animation: lvl-up 1.8s ease-in-out infinite; }
@keyframes lvl-up { 0%, 100% { transform: translate(13px, -12px); } 50% { transform: translate(13px, -15px); } }
/* Anneau de progression du chantier autour de la pastille (circonférence 2π·18 ≈ 113,1) */
.lvl__track { fill: none; stroke: rgba(255, 255, 255, 0.75); stroke-width: 4; }
.lvl__ring { fill: none; stroke: #e39a1c; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 113.1; stroke-dashoffset: var(--left, 113.1); transition: stroke-dashoffset 1s linear; }
/* Emplacement libre */
.plot.is-empty .plot__mark { fill: rgba(46, 64, 22, 0.42); stroke: rgba(255, 255, 255, 0.35); stroke-width: 1.5; stroke-dasharray: none; }
.plot--ready.is-empty .plot__mark { fill: rgba(79, 154, 18, 0.35); stroke: #e6f7d2; stroke-dasharray: 6 4; }
.lvl--empty .lvl__disc { stroke-width: 2; }
.plot-ui.plot--ready .lvl--empty .lvl__disc { fill: #4f9a12; stroke: #fff; }
.plot-ui.plot--ready .lvl--empty .lvl__num { fill: #fff; font-size: 18px; }
.lvl__lockicon { color: #6e6458; }
.plot:hover .plot__mark, .plot.is-hover .plot__mark, .plot:focus-visible .plot__mark { stroke: #fff; stroke-width: 2.5; }
.plot.is-empty.is-selected .plot__mark { fill: rgba(242, 207, 107, 0.35); stroke: #f2cf6b; stroke-width: 3; stroke-dasharray: none; }
/* Chantier : marteau au-dessus du toit, temps restant sous la pastille */
.works__bubble { fill: #fff6df; stroke: #e39a1c; stroke-width: 3; filter: drop-shadow(0 3px 3px rgba(30, 20, 8, 0.4)); }
.works__swing { transform-box: fill-box; transform-origin: 20% 82%; animation: hammer 0.9s ease-in-out infinite; color: #6b3f12; }
.works__timer rect { fill: rgba(43, 36, 27, 0.9); stroke: #e39a1c; stroke-width: 1.5; }
.plot__timer { font-family: var(--font); font-weight: 600; font-size: 11.5px; fill: #fff; text-anchor: middle; dominant-baseline: central; font-variant-numeric: tabular-nums; }
.plot.is-building .plot__art { filter: saturate(0.75) brightness(0.95) drop-shadow(0 3px 2px rgba(28, 26, 46, 0.35)); }
.plot-tip .plot-tip__state { display: block; margin-top: 2px; }
.plot-tip .plot-tip__state--ready { color: #a6e07a; }
.plot-tip .plot-tip__state--works { color: #f5c25b; }
.plot-tip .plot-tip__state--locked, .plot-tip .plot-tip__state--short { color: #e8b9a8; }
.plot-tip .plot-tip__state--max { color: #f2cf6b; }
@media (prefers-reduced-motion: reduce) { .lvl__flag--up, .works__swing { animation: none; } }

/* ==========================================================================
   Pages publiques (passe 4) : l'accueil tient en un écran (blason, titre, un seul appel
   à l'action, bandeau du bas) ; les pages d'accès passent sur parchemin, comme le jeu
   ========================================================================== */

/* ---------- Accueil ---------- */
.page-home .frame::before {
    background:
        radial-gradient(ellipse 44% 42% at 50% 42%, rgba(18, 14, 10, 0.55), transparent 80%),
        linear-gradient(180deg, rgba(18, 14, 10, 0.55) 0%, rgba(18, 14, 10, 0.08) 24%, rgba(18, 14, 10, 0.12) 58%, rgba(18, 14, 10, 0.8) 100%);
}
.page-home .frame__art { filter: saturate(0.92) contrast(1.04) brightness(0.9); }
.home { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-rows: 1fr auto; padding-top: 64px; }
.home-hero {
    align-self: center; justify-self: center;
    display: grid; justify-items: center; gap: 14px;
    width: min(920px, calc(100% - 48px)); padding: 12px 0 20px; text-align: center;
}
.home-hero__emblem { width: 112px; height: 112px; border-radius: 50%; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.55)); margin-bottom: -4px; }
.page-home .home-hero__title {
    font-family: var(--display); font-weight: 700; line-height: 1.02; letter-spacing: 0.05em;
    font-size: clamp(2.4rem, 5.8vw, 5.6rem); white-space: nowrap;
    color: #f6e9c8;
    text-shadow: 0 2px 0 #5b3d1e, 0 3px 0 #3b2a1a, 0 10px 34px rgba(0, 0, 0, 0.7);
}
.home-hero__lede {
    text-wrap: balance;
    max-width: 36rem; font-size: 1.15rem; line-height: 1.5; color: #f1e6d0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 18px rgba(0, 0, 0, 0.6);
}
.page-home .home-hero__cta { margin-top: 8px; min-width: 300px; font-size: 1.2rem; }
.home-hero__login { font-size: var(--step-0); color: #efe2c8; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); }
.page-home .home-hero__login a { color: var(--gold-light); font-weight: 600; text-underline-offset: 0.2em; }
.page-home .home-hero__login a:hover { color: #fff3d2; }
.home-hero__proof {
    list-style: none; margin: 6px 0 0; padding: 0;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px;
    font-size: var(--step--1); color: #e9dcc2; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
.home-hero__proof li { display: inline-flex; align-items: center; gap: 8px; }
.home-hero__proof svg { width: 16px; height: 16px; color: var(--gold-light); }

/* Bandeau du bas : comment jouer, état du monde, mentions */
.home-band {
    display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
    background: linear-gradient(180deg, rgba(38, 34, 31, 0.94), rgba(26, 24, 23, 0.97));
    border-top: 1px solid rgba(203, 164, 103, 0.65);
    box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.35);
}
.home-band__steps, .home-band__world { padding: 20px 32px 18px; min-width: 0; }
.home-band__world { border-left: 1px solid rgba(203, 164, 103, 0.3); }
.page-home .home-band h2 { display: flex; align-items: center; gap: 12px; font-size: 1rem; letter-spacing: 0.06em; margin-bottom: 14px; color: var(--gold); }
.home-band__status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font); font-size: 0.78rem; font-weight: 500; letter-spacing: 0; color: #9fdcb2; }
.home-band__status .dot { width: 7px; height: 7px; border-radius: 50%; background: #5fd08a; box-shadow: 0 0 0 3px rgba(95, 208, 138, 0.2); }
.home-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; counter-reset: step; }
.home-steps li { display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 14px; counter-increment: step; font-size: var(--step--1); line-height: 1.4; color: var(--cream-muted); }
.home-steps strong { display: block; color: var(--cream); font-size: var(--step-0); font-weight: 600; }
.home-steps__img {
    position: relative; display: grid; place-items: center; width: 58px; height: 58px;
    border-radius: 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(203, 164, 103, 0.35);
}
.home-steps__img img { width: 52px; height: 52px; object-fit: contain; }
/* Les trois étapes se suivent : le numéro dit l'ordre */
.home-steps__img::after {
    content: counter(step); position: absolute; top: -8px; left: -8px;
    display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
    background: var(--gold); color: #2c1d0c; font-size: 0.75rem; font-weight: 700; box-shadow: 0 0 0 2px #2a2623;
}
.home-stats { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 6px 18px; margin: 0; }
.home-stats div { display: flex; flex-direction: column-reverse; }
.home-stats dd { margin: 0; font-size: 1.55rem; font-weight: 600; line-height: 1.1; color: var(--cream); font-variant-numeric: tabular-nums; }
.home-stats dt { font-size: 0.78rem; color: var(--cream-muted); }
.home-band__win { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: var(--step--1); color: var(--cream-muted); }
.home-band__win svg { flex: none; width: 18px; height: 18px; color: var(--gold); }
.home-legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px; padding: 8px 16px 10px; border-top: 1px solid rgba(203, 164, 103, 0.18); font-size: 0.75rem; }
.page-home .home-legal a { color: var(--cream-muted); text-decoration: none; }
.page-home .home-legal a:hover { color: var(--gold-light); text-decoration: underline; }

@media (max-height: 760px) and (min-width: 761px) {
    .home-hero { gap: 10px; }
    .home-hero__emblem { width: 80px; height: 80px; }
    .page-home .home-hero__title { font-size: clamp(2.2rem, 5vw, 4.4rem); }
    .home-band__steps, .home-band__world { padding-top: 14px; padding-bottom: 12px; }
}
@media (max-width: 1100px) and (min-width: 761px) {
    .home-band { grid-template-columns: 1fr; }
    .home-band__world { border-left: 0; border-top: 1px solid rgba(203, 164, 103, 0.3); display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 28px; }
    .home-band__world h2 { grid-row: span 2; margin: 0; }
    .home-band__win { margin-top: 6px; }
}
@media (max-width: 760px), (max-height: 520px) {
    .page-home .frame::before { display: none; }
    .home { position: static; display: block; padding: 0; }
    .home-hero {
        width: auto; margin: -34vw 0 0; padding: 30px 18px 26px; gap: 12px;
        background: linear-gradient(180deg, rgba(44, 41, 44, 0) 0%, rgba(44, 41, 44, 0.92) 30%, var(--night) 62%);
    }
    .home-hero__emblem { width: 72px; height: 72px; }
    .page-home .home-hero__title { font-size: clamp(2rem, 10.5vw, 3rem); white-space: normal; }
    .home-hero__lede { font-size: var(--step-0); }
    .page-home .home-hero__cta { width: 100%; min-width: 0; }
    .home-hero__proof { flex-direction: column; align-items: center; gap: 6px; }
    .home-band { grid-template-columns: 1fr; box-shadow: none; }
    .home-band__steps, .home-band__world { padding: 20px 18px; }
    .home-band__world { border-left: 0; border-top: 1px solid rgba(203, 164, 103, 0.3); }
    .home-steps { grid-template-columns: 1fr; gap: 16px; }
    .home-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* ---------- Pages d'accès : carte parchemin ---------- */
.page-auth .frame::before { background: linear-gradient(180deg, rgba(18, 14, 10, 0.5), rgba(18, 14, 10, 0.68)); }
.auth { position: relative; z-index: 2; min-height: 100dvh; display: grid; place-items: center; padding: 128px 16px 40px; }
.auth-card {
    position: relative; width: min(440px, 100%);
    padding: 54px 36px 26px;
    background: linear-gradient(180deg, var(--parch) 0%, var(--parch-2) 100%);
    color: var(--brown);
    border: 2px solid #5b3d1e; border-radius: 14px;
    box-shadow: inset 0 0 0 4px var(--parch), inset 0 0 0 5px rgba(155, 127, 85, 0.55), 0 26px 60px rgba(0, 0, 0, 0.55);
}
.auth-card--wide { width: min(880px, 100%); }
.auth-card__emblem {
    position: absolute; top: -42px; left: 50%; translate: -50% 0;
    width: 84px; height: 84px; border-radius: 50%;
    box-shadow: 0 0 0 3px #5b3d1e, 0 0 0 6px var(--gold), 0 12px 26px rgba(0, 0, 0, 0.5);
}
.page-auth .auth-card__title { font-family: var(--display); font-weight: 700; font-size: 1.75rem; text-align: center; letter-spacing: 0.03em; color: var(--brown); }
.auth-card__lede { text-wrap: balance; margin: 6px auto 0; max-width: 34rem; text-align: center; font-size: var(--step--1); color: var(--brown-muted); }
.page-auth .auth-card a:not(.button) { color: #7a5520; font-weight: 500; text-underline-offset: 0.18em; }
.page-auth .auth-card a:not(.button):hover { color: var(--brown); }
.auth-alert {
    display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; padding: 10px 14px;
    border-radius: 8px; background: #fbe4dc; border: 1px solid #e0a08e; color: #8a2416; font-size: var(--step--1);
}
.auth-alert svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.auth-form { display: grid; gap: 16px; margin-top: 22px; }
.auth-field { display: grid; gap: 6px; min-width: 0; }
.auth-field__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.auth-field label { font-size: 0.85rem; font-weight: 600; color: var(--brown); }
.page-auth .auth-field__row a { font-size: 0.8rem; }
.auth-input { position: relative; }
.auth-input > svg { position: absolute; left: 14px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: #8b6b45; pointer-events: none; }
.auth-input input {
    width: 100%; min-height: 48px; padding: 0 46px 0 42px;
    font: inherit; color: var(--brown);
    background: #fffaf0; border: 1px solid #b89a6a; border-radius: 8px;
    box-shadow: inset 0 1px 2px rgba(60, 40, 15, 0.12);
}
.auth-input input:focus-visible { outline: none; border-color: #8a6212; box-shadow: 0 0 0 3px rgba(203, 164, 103, 0.5); }
.auth-field.is-invalid input, .auth-input input:user-invalid { border-color: #b3321f; box-shadow: 0 0 0 3px rgba(179, 50, 31, 0.14); }
.auth-field__msg { display: flex; align-items: flex-start; gap: 6px; font-size: 0.8rem; line-height: 1.35; color: var(--brown-muted); }
.auth-field__msg.is-error { color: #a3301f; font-weight: 500; }
.auth-field__msg svg { flex: none; width: 15px; height: 15px; margin-top: 1px; }
.auth-reveal {
    position: absolute; right: 6px; top: 50%; translate: 0 -50%;
    display: grid; place-items: center; width: 36px; height: 36px;
    border: 0; border-radius: 6px; background: transparent; color: #8b6b45; cursor: pointer;
}
.auth-reveal:hover { background: rgba(155, 127, 85, 0.16); color: var(--brown); }
.auth-reveal:focus-visible { outline: 2px solid #8a6212; outline-offset: 0; }
.auth-reveal svg { width: 18px; height: 18px; }
.auth-reveal .is-on, .auth-reveal[aria-pressed="true"] .is-off { display: none; }
.auth-reveal[aria-pressed="true"] .is-on { display: block; }
/* Solidité du mot de passe : trois traits qui se remplissent */
.strength { display: grid; grid-template-columns: repeat(3, 1fr) auto; align-items: center; gap: 4px; }
.strength__bar { height: 4px; border-radius: 2px; background: rgba(155, 127, 85, 0.3); transition: background-color 0.2s; }
.strength__label { margin-left: 8px; min-width: 9.5em; text-align: right; font-size: 0.78rem; color: var(--brown-muted); }
.strength[data-score="1"] .strength__bar:nth-child(1) { background: #d0861a; }
.strength[data-score="2"] .strength__bar:nth-child(-n+2) { background: #7aa82e; }
.strength[data-score="3"] .strength__bar { background: #4f9a12; }
.page-auth .auth-submit { width: 100%; min-height: 52px; font-size: 1.05rem; }
.auth-card__alt {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px;
    margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(155, 127, 85, 0.45);
    font-size: var(--step--1); color: var(--brown-muted);
}
.auth-card__alt .button { min-height: 40px; padding: 0 18px; font-size: var(--step--1); }
/* Inscription : deux colonnes, le compte à gauche, le port à droite */
.auth-form--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 34px; align-items: start; }
.auth-group { display: grid; gap: 14px; min-width: 0; margin: 0; padding: 0; border: 0; }
.auth-group > legend { padding: 0; margin-bottom: 4px; font-family: var(--display); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.06em; color: #7a5520; }
.auth-form__end { grid-column: 1 / -1; display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid rgba(155, 127, 85, 0.35); }
.auth-check { display: flex; align-items: flex-start; gap: 10px; font-size: var(--step--1); line-height: 1.45; color: var(--brown-muted); cursor: pointer; }
.auth-check input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #4f9a12; }
.auth-check.is-invalid { color: #a3301f; }
/* Coin de mer : une petite carte marine en quatre quadrants, rose des vents au centre */
.sea-chart { min-width: 0; margin: 0; padding: 0; border: 0; }
.sea-chart > legend { padding: 0; margin-bottom: 6px; font-size: 0.85rem; font-weight: 600; color: var(--brown); }
.sea-chart__grid {
    position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px;
    border-radius: 11px; background: #5b3d1e; box-shadow: 0 3px 8px rgba(60, 40, 15, 0.25);
}
.sea-chart__cell {
    position: relative; display: grid; align-content: start; gap: 1px;
    min-height: 98px; padding: 10px 14px; cursor: pointer;
    background: radial-gradient(120% 100% at 30% 20%, #a9d6e6 0%, #6aa9c6 70%, #5b98b6 100%);
    color: #0f3049; transition: filter 0.15s;
}
.sea-chart__cell--no { border-radius: 8px 0 0 0; }
.sea-chart__cell--ne { border-radius: 0 8px 0 0; justify-items: end; text-align: right; }
.sea-chart__cell--so { border-radius: 0 0 0 8px; align-content: end; }
.sea-chart__cell--se { border-radius: 0 0 8px 0; align-content: end; justify-items: end; text-align: right; }
.sea-chart__cell:hover { filter: brightness(1.07); }
.sea-chart__cell input { position: absolute; opacity: 0; pointer-events: none; }
.sea-chart__name { display: inline-flex; align-items: center; gap: 6px; font-size: 0.95rem; font-weight: 700; }
.sea-chart__free { font-size: 0.82rem; }
.sea-chart__free strong { font-weight: 700; font-variant-numeric: tabular-nums; }
.sea-chart__ports { font-size: 0.74rem; opacity: 0.8; }
.sea-chart__tag { margin-top: 4px; padding: 1px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.78); color: #2f6a14; font-size: 0.7rem; font-weight: 600; }
.sea-chart__check { display: none; width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: #4f9a12; color: #fff; }
.sea-chart__cell:has(input:checked) {
    background: radial-gradient(120% 100% at 30% 20%, #fff4d2 0%, #efd48e 70%, #e3bf68 100%);
    color: var(--brown); box-shadow: inset 0 0 0 2px #8a6212;
}
.sea-chart__cell:has(input:checked) .sea-chart__check { display: block; }
.sea-chart__cell:has(input:focus-visible) { outline: 3px solid #2f6a14; outline-offset: -3px; }
.sea-chart__rose {
    position: absolute; left: 50%; top: 50%; translate: -50% -50%;
    width: 42px; height: 42px; padding: 6px; border-radius: 50%;
    background: var(--parch); color: #5b3d1e; box-shadow: 0 0 0 3px #5b3d1e; pointer-events: none;
}
.sea-chart.is-invalid .sea-chart__grid { background: #b3321f; }
/* Peuple : quatre cartes à pavillon, avantage et unité propre (inscription, nouveau monde, choix en jeu) */
.nation-pick { grid-column: 1 / -1; min-width: 0; margin: 0; padding: 0; border: 0; }
.nation-pick > legend { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 0; margin-bottom: 8px;
    font-family: var(--display); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.06em; color: #7a5520; }
.nation-pick__hint { font-family: var(--font); font-weight: 500; font-size: 0.78rem; letter-spacing: 0; color: var(--brown-muted); }
.nation-pick__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.auth-form--split > .nation-pick:nth-child(3) { grid-column: auto; }
.auth-form--split > .nation-pick:nth-child(3) .nation-pick__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.auth-form--split > .auth-submit { grid-column: 1 / -1; }
.nation-pick__card {
    position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 8px; padding: 10px 12px 12px; cursor: pointer;
    border-radius: 10px; border: 1px solid rgba(155, 127, 85, 0.55); background: rgba(255, 250, 235, 0.6);
    color: var(--brown); transition: background-color 0.15s;
}
.nation-pick__card:hover { background: rgba(255, 250, 235, 0.95); }
.nation-pick__card input { position: absolute; opacity: 0; pointer-events: none; }
.nation-pick__head { display: flex; align-items: center; gap: 8px; min-width: 0; padding-right: 20px; }
.nation-pick__flag { flex: none; width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(60, 40, 15, 0.3)); }
.nation-pick__name { min-width: 0; font-family: var(--display); font-weight: 700; font-size: 0.98rem; line-height: 1.15; }
.nation-pick__check { display: none; position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: #4f9a12; color: #fff; }
.nation-pick__bonus { display: grid; align-content: start; gap: 2px; font-size: 0.78rem; line-height: 1.35; color: var(--brown-muted); }
.nation-pick__bonus strong { font-size: 0.82rem; color: var(--brown); }
.nation-pick__unit { display: flex; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px dashed rgba(155, 127, 85, 0.55); font-size: 0.8rem; }
.nation-pick__unit img { flex: none; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: #e9dcc0; box-shadow: 0 0 0 2px #fff8e8, 0 0 0 3px rgba(91, 61, 30, 0.45); }
.nation-pick__unit > span { display: grid; gap: 1px; min-width: 0; }
.nation-pick__stats { display: inline-flex; align-items: center; gap: 3px; font-variant-numeric: tabular-nums; color: var(--brown-muted); }
.nation-pick__stats svg { width: 12px; height: 12px; }
.nation-pick__stats svg:not(:first-child) { margin-left: 6px; }
.nation-pick__card:has(input:checked) { border-color: #8a6212; background: linear-gradient(180deg, #fff4d2 0%, #efd48e 100%); box-shadow: inset 0 0 0 1px #8a6212; }
.nation-pick__card:has(input:checked) .nation-pick__check { display: block; }
.nation-pick__card:has(input:focus-visible) { outline: 3px solid #2f6a14; outline-offset: 2px; }
.nation-pick.is-invalid .nation-pick__card { border-color: #b3321f; }
@media (max-width: 860px) {
    .nation-pick__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Téléphone : pavillon au-dessus du nom, cartes resserrées */
@media (max-width: 480px) {
    .nation-pick__grid { gap: 8px; }
    .nation-pick__card { gap: 6px; padding: 8px 9px 10px; }
    .nation-pick__head { flex-direction: column; align-items: flex-start; gap: 4px; }
    .nation-pick__flag { width: 32px; height: 32px; }
    .nation-pick__name { font-size: 0.86rem; }
    .nation-pick__bonus { font-size: 0.74rem; }
    .nation-pick__unit { gap: 6px; }
    .nation-pick__unit img { width: 28px; height: 28px; }
    .nation-pick__stats { flex-wrap: wrap; }
    .nation-pick__stats svg:not(:first-child) { margin-left: 3px; }
}
@media (max-width: 860px) {
    .auth-form--split { grid-template-columns: 1fr; }
}
@media (max-width: 760px), (max-height: 520px) {
    .page-auth .frame__art { position: fixed; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; max-height: none; border-radius: 0; z-index: -1; }
    .auth { min-height: 0; padding: 70px 12px 28px; }
    .auth-card { padding: 50px 20px 22px; }
    .page-auth .auth-card__title { font-size: 1.5rem; }
}
/* Écrans d'ordinateur peu hauts : la carte d'accès se resserre pour éviter le défilement */
@media (max-height: 820px) and (min-width: 761px) {
    .auth { padding-top: 116px; padding-bottom: 16px; }
    .auth-card { padding-top: 48px; padding-bottom: 20px; }
    .auth-form { gap: 12px; margin-top: 16px; }
    .auth-group { gap: 10px; }
    .sea-chart__cell { min-height: 86px; padding: 8px 12px; }
    .auth-card__alt { margin-top: 14px; padding-top: 12px; }
}

/* ==========================================================================
   Moins de barres de défilement sur ordinateur : formulaires du jeu plus compacts,
   panneaux larges en colonnes, fiche bâtiment jusqu'à la barre de zoom
   ========================================================================== */
.account-data { grid-column: 1 / -1; display: grid; gap: 10px; align-content: start; }
.account-data h2 { margin-top: 8px; }
.account-data .danger-zone { margin-top: 6px; }
/* Titres alignés d'une colonne à l'autre : les formulaires ne s'étirent plus, la marge passe à la grille */
.account-grid { margin-top: 12px; }
.account-grid > .form { display: flex; flex-direction: column; }
.theme-parchment .panel-wide .account-grid > .form { margin-top: 0; }
.form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 12px; }
.relation-form { display: grid; grid-template-columns: 8em minmax(0, 1fr) auto; align-items: end; }
@media (min-width: 1101px) {
    .account-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .account-data { grid-column: auto; }
    .account-data .button { width: 100%; }
}
@media (max-width: 760px) {
    .form-row, .relation-form { grid-template-columns: 1fr; }
}
@media (min-width: 761px) and (min-height: 521px) {
    .theme-parchment .panel-wide--xl { width: min(1120px, calc(100% - 120px)); }
    .theme-parchment .panel-wide .form { gap: 10px; margin-top: 10px; }
    .theme-parchment .panel-wide .field { gap: 4px; }
    .theme-parchment .panel-wide .form input:not([type="checkbox"]):not([type="radio"]),
    .theme-parchment .panel-wide .form select,
    .theme-parchment .panel-wide .inline-form input,
    .theme-parchment .panel-wide .chat-form input { min-height: 40px; padding: 0 12px; }
    .theme-parchment .panel-wide .form .button, .theme-parchment .panel-wide .inline-form .button { min-height: 40px; }
    .theme-parchment .panel-wide .chat-form .round--primary { width: 40px; height: 40px; }
    .theme-parchment .panel-wide .form textarea { min-height: 110px; height: clamp(110px, calc(100dvh - 470px), 340px); padding: 10px 12px; }
    .theme-parchment .panel-wide h2 { margin-top: 14px; }
    .theme-parchment .chat { max-height: clamp(150px, calc(100dvh - 430px), 440px); }
    .page-village #building-card { max-height: calc(100% - 210px); }
}
@media (min-width: 761px) and (max-height: 760px) {
    /* Écrans d'ordinateur peu hauts : fiche bâtiment resserrée */
        .page-village #building-card .building__art { width: 60px; height: 60px; }
    .page-village .recruit { gap: 6px; margin-bottom: 10px; }
    .page-village .recruit__row { padding: 5px 8px; }
}
/* Quand un panneau doit défiler, sa barre reste fine et aux couleurs du parchemin */
.theme-parchment .panel-wide, .theme-parchment .card, .theme-parchment .chat { scrollbar-width: thin; scrollbar-color: #b08d57 transparent; }
/* Accès : renvoi de l'e-mail dans l'alerte, conseils de la page « vérifiez votre boîte » */
.auth-alert > div { display: grid; gap: 4px; }
.auth-alert__action .link-button { color: #8a2416; font-weight: 600; font-size: var(--step--1); }
.auth-tips { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; font-size: var(--step--1); color: var(--brown-muted); }
.auth-tips li { display: flex; align-items: center; gap: 10px; }
.auth-tips svg { flex: none; width: 18px; height: 18px; color: #8b6b45; }
.page-auth .auth-card__lede strong { color: var(--brown); }
/* Diplomatie : propositions en attente et réponse */
.relation { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.relation__answer { margin-left: auto; }
.relation__answer .button { min-height: 32px; padding: 0 14px; font-size: var(--step--1); }
.theme-parchment .relation--proposed .relation__type, .theme-parchment .relation--received .relation__type { background: #efe3c6; color: var(--brown); border: 1px dashed #b59a6c; }
/* Unités : rôle et caractéristiques ; rapports de commerce */
.recruit__role { display: block; font-size: 0.74rem; color: var(--brown-muted); }
.recruit__stats { display: flex; flex-wrap: wrap; gap: 2px 10px; margin: 2px 0; font-size: 0.72rem; color: var(--brown); font-variant-numeric: tabular-nums; }
.recruit__stats > span { display: inline-flex; align-items: center; gap: 3px; }
.recruit__stats svg { width: 12px; height: 12px; color: #7a5520; }
.trade-route { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0 4px; }
.trade-route svg { width: 16px; height: 16px; color: var(--brown-muted); }
/* Bandeau d'attaque et bannière de fin de monde : lisibles en jeu (le thème parchemin colorait leurs liens en brun) */
.theme-parchment .alert-bar, .theme-parchment a.alert-bar { background: #9e2318; color: #fff; text-decoration: none; border: 1px solid #6e140c; }
.theme-parchment .alert-bar:hover { background: #b0281b; }
.theme-parchment .alert-bar .countdown { color: #ffe7a3; font-weight: 600; }
.theme-parchment .world-banner, .theme-parchment a.world-banner { background: #2b241c; color: #f6dd8f; border: 1px solid #c9a45c; text-decoration: none; }
.theme-parchment .world-banner:hover { color: #fff3c4; }
/* Écrans d'ordinateur peu hauts (≈ 650 px utiles) : listes et fiches resserrées pour éviter le défilement */
@media (min-width: 761px) and (max-height: 760px) {
    .theme-parchment .panel-wide { padding-top: 20px; padding-bottom: 18px; }
    .theme-parchment .panel-wide__head { margin-bottom: 10px; }
    .theme-parchment .report-list { gap: 6px; }
    .theme-parchment .report-row { padding-top: 5px; padding-bottom: 5px; }
    .theme-parchment .report-row__icon { width: 30px; height: 30px; }
    .page-village .recruit__role { display: none; }
    .page-village #building-card .building__desc { margin: 6px 0; }
}
@media (min-width: 761px) and (max-height: 760px) {
    .theme-parchment .panel-wide h2 { margin: 10px 0 6px; padding-bottom: 6px; }
    .theme-parchment .panel-wide .army th, .theme-parchment .panel-wide .army td { padding-top: 4px; padding-bottom: 4px; }
}
.member-role { display: inline-flex; align-items: center; gap: 6px; }
.member-role select { min-height: 30px; padding: 0 6px; font-size: var(--step--1); }
/* Inscription : sur un portable (≈ 650 px utiles), tout tient jusqu'au bouton « Fonder mon port » */
@media (min-width: 761px) and (max-height: 760px) {
        .auth-card { padding-top: 42px; }
    .auth-card__emblem { top: -36px; width: 72px; height: 72px; }
    .page-auth .auth-card__title { font-size: 1.45rem; }
    .auth-card__lede { margin-top: 4px; }
    .auth-form { margin-top: 12px; gap: 10px; }
    .auth-group { gap: 8px; }
    .auth-input input { min-height: 42px; }
    .sea-chart__cell { min-height: 74px; padding: 6px 10px; }
    .auth-card--wide .auth-card__alt { display: none; } /* « Se connecter » reste dans la barre du haut */
}
@media (min-width: 761px) and (max-height: 760px) {
    .auth { padding-top: 108px; padding-bottom: 8px; }
    #email-msg:not(.is-error) { display: none; } /* aide secondaire masquée sur les écrans bas */
}
/* Carte sur mobile : la fiche d'une île s'ouvre en panneau fixé en bas, au-dessus du dock (plus hors de l'écran) */
@media (max-width: 760px) {
    .page-map #tile-card:not([hidden]) {
        position: fixed; left: 8px; right: 8px; bottom: 76px; top: auto; z-index: 30;
        width: auto; max-height: min(62vh, calc(100dvh - 160px)); margin: 0; overflow-y: auto; overscroll-behavior: contain;
        transform: none; border-radius: 14px; box-shadow: 0 -10px 30px rgba(30, 20, 8, 0.45);
        animation: sheet-up 180ms ease-out;
    }
    @keyframes sheet-up { from { transform: translateY(24px); opacity: 0.6; } to { transform: none; opacity: 1; } }
    /* Pied du formulaire d'armée toujours en vue au bas de la fiche : durée du trajet et « Envoyer » */
    .page-map #tile-card .army-form > .building__actions {
        position: sticky; bottom: 0; z-index: 2;
        margin: 12px -22px -22px; padding: 12px 22px 14px;
        background: linear-gradient(180deg, #efe4cb 0%, #e7dbc0 100%);
        border-top: 1px solid rgba(155, 127, 85, 0.45); box-shadow: 0 -8px 14px rgba(60, 40, 15, 0.12);
    }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) { .page-map #tile-card:not([hidden]) { animation: none; } }
/* Téléphone en paysage : la fiche d'une case s'ouvre en panneau à droite, la carte reste visible à gauche */
@media (max-height: 520px) and (min-width: 761px) {
    .page-map #tile-card:not([hidden]) {
        position: fixed; top: calc(var(--hud-h, 64px) + 6px); right: 8px; bottom: 70px; left: auto; z-index: 30;
        width: min(390px, 48vw); max-height: none; margin: 0; overflow-y: auto; overscroll-behavior: contain;
        transform: none; border-radius: 14px; box-shadow: -10px 0 30px rgba(30, 20, 8, 0.4);
    }
    .page-map #tile-card .army-form > .building__actions {
        position: sticky; bottom: 0; z-index: 2;
        margin: 12px -22px -22px; padding: 12px 22px 14px;
        background: linear-gradient(180deg, #efe4cb 0%, #e7dbc0 100%);
        border-top: 1px solid rgba(155, 127, 85, 0.45); box-shadow: 0 -8px 14px rgba(60, 40, 15, 0.12);
    }
}

/* ==========================================================================
   Thème recalé par univers : les jetons d'origine (indigo, gris froid, blanc) sont redéfinis
   pour le jeu (parchemin) et pour le site public (anthracite et or) ; ce qui les utilisait encore
   prend d'un coup les bonnes couleurs. Contrastes vérifiés (≥ 4,5:1 pour le texte).
   ========================================================================== */
.theme-parchment {
    --indigo: #5b3d1e;
    --indigo-deep: #3b2a1a;
    --muted: #6e5a42;
    --line: rgba(91, 61, 30, 0.22);
    --danger: #a3301f;
    --amber: #d89a1c;
    --focus: #9a6a12;
}
body:not(.theme-parchment) {
    --indigo: #cba467;
    --indigo-deep: #a8853f;
    --muted: #b9ab93;
    --line: rgba(203, 164, 103, 0.35);
    --focus: #f2cf6b;
}
/* Focus clavier toujours visible : anneau brun en jeu, or cerné de sombre sur l'anthracite */
:focus-visible { outline: 3px solid var(--focus, #9a6a12); outline-offset: 2px; }
body:not(.theme-parchment) :focus-visible { box-shadow: 0 0 0 6px rgba(20, 16, 12, 0.7); border-radius: 4px; }
.theme-parchment .world:focus-visible { outline: 3px solid #f2cf6b; outline-offset: -3px; }
.plot-ui.is-focus .lvl__disc { stroke: #f2cf6b; stroke-width: 5; }
.theme-parchment .form input:focus-visible, .theme-parchment .form select:focus-visible, .theme-parchment .form textarea:focus-visible {
    outline: 2px solid var(--focus); outline-offset: 1px; border-color: #8a6212;
}
.theme-parchment input[type="range"], .theme-parchment input[type="checkbox"], .theme-parchment input[type="radio"] { accent-color: #5b3d1e; }

/* Boutons verts : texte blanc lisible (5:1 au centre du bouton) */
.button { background: linear-gradient(180deg, #4f9a12 0%, #3a7a08 55%, #2f6606 100%); border-color: #26520a; }
.button:hover { background: linear-gradient(180deg, #58a815 0%, #418a09 55%, #357207 100%); }
.button--ghost, .button--glass { background: linear-gradient(180deg, #f6dd8f, #d6a83f); border-color: #a07a2a; }
.button--ghost:hover, .button--glass:hover { background: linear-gradient(180deg, #fae6a6, #ddb24c); }
.button--danger, .button.button--danger { background: linear-gradient(180deg, #c84a36, #9e2a19); border-color: #7a1e10; color: #fff; }
.button--danger:hover, .button.button--danger:hover { background: linear-gradient(180deg, #d65640, #b0301d); }
.button[disabled], .button[disabled]:hover { background: #a9a094; border-color: #8a8378; box-shadow: none; text-shadow: none; cursor: not-allowed; }
.theme-parchment .round--primary:hover { filter: brightness(1.1); }
body:not(.theme-parchment) .pill--action:hover { background: rgba(203, 164, 103, 0.2); color: #f6dd8f; }

/* Fenêtres flottantes du jeu (son, choix du port) en parchemin */
.theme-parchment .popover {
    background: linear-gradient(180deg, var(--parch) 0%, var(--parch-2) 100%);
    border: 2px solid #5b3d1e; border-radius: 10px; color: var(--brown);
    box-shadow: inset 0 0 0 3px var(--parch), inset 0 0 0 4px rgba(155, 127, 85, 0.5), 0 14px 30px rgba(30, 20, 8, 0.45);
    -webkit-backdrop-filter: none; backdrop-filter: none;
}
.theme-parchment .popover__title { font-family: var(--display); font-weight: 700; color: var(--brown); }
.theme-parchment .port-list a { color: var(--brown); border-radius: 6px; }
.theme-parchment .port-list a:hover { background: rgba(155, 127, 85, 0.16); }
.theme-parchment .port-list a[aria-current] { background: #5b3d1e; color: #f6dd8f; }
.theme-parchment .port-list a[aria-current] small { color: #e9d7a8; }

/* Étiquettes, avis, sélecteur de mission, champs restés blancs */
.theme-parchment .tag { background: #5b3d1e; color: #f6dd8f; border-radius: 4px; letter-spacing: 0.04em; }
.theme-parchment .notice { background: #fffaf0; border: 1px solid #d4c19b; border-radius: 6px; color: var(--brown); }
.theme-parchment .notice.is-error { background: #fbe4dc; border-color: #e0a08e; color: #8a2416; }
.theme-parchment .segmented__options { background: #efe3c6; border: 1px solid #b59a6c; border-radius: 8px; }
.theme-parchment .segmented label { border-radius: 6px; color: var(--brown); }
.theme-parchment .segmented label:has(input:checked) { background: #5b3d1e; color: #fff6df; }
.theme-parchment .member-actions select, .theme-parchment .member-role select, .theme-parchment .admin .inline-form input {
    background: #fffaf0; border: 1px solid #b59a6c; border-radius: 4px; color: var(--brown);
}
.theme-parchment .thumbs img, .theme-parchment .garrison img { background: #fffaf0; }
.theme-parchment .auth-input input::placeholder, .theme-parchment input::placeholder, .theme-parchment textarea::placeholder { color: #8b7357; }
.auth-input input::placeholder { color: #8b7357; }

/* Rouge des manques et des pertes : 6:1 sur parchemin */
.theme-parchment .facts .is-short, .theme-parchment .facts .is-short svg, .theme-parchment .ledger__rate.is-negative { color: #a3301f; }
/* Classements : or, argent et bronze lisibles ; ma ligne et mes offres surlignées en parchemin */
.ranking .rank--1 { color: #8a6212; } .ranking .rank--2 { color: #5d6470; } .ranking .rank--3 { color: #8a4b1f; }
.theme-parchment .ranking tr.is-me, .theme-parchment .market tr.is-mine { background: rgba(242, 207, 107, 0.28); }
/* Diplomatie : pastilles de relation lisibles */
.relation--ally .relation__type { background: #2f7d0a; } .relation--nap .relation__type { background: #33639e; } .relation--war .relation__type { background: #a3301f; }
/* Rapport non lu : anneau or */
.theme-parchment .report-row.is-unread .report-row__icon { box-shadow: 0 0 0 2px #d89a1c; }
.theme-parchment .report-row:hover { background: #fffaf0; border-color: #b59a6c; }
/* Emplacement libre sélectionné sur la rade */
.plot.is-selected .plot__mark { fill: rgba(242, 207, 107, 0.35); stroke: #f2cf6b; }
/* Carte : « mes ports » en bronze (comme sur le canevas) */
.legend__dot--mine { background: #7a4a12; box-shadow: 0 0 0 2px #f2cf6b; }
.theme-parchment .map-zoom { background: linear-gradient(180deg, var(--parch), var(--parch-2)); border: 2px solid #5b3d1e; }
.theme-parchment .map-zoom .round { background: radial-gradient(circle at 35% 30%, #fff7e2, #e9d7b0); border: 2px solid #8b6b45; color: #5b3d1e; }
.theme-parchment .map-zoom .round:hover { border-color: #5b3d1e; }
/* Administration : chiffres clés en grille */
.admin-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 12px 0 6px; }
.admin-stats div { padding: 10px 12px; border-radius: 6px; background: rgba(255, 252, 242, 0.75); border: 1px solid #d4c19b; }
.admin-stats dt { font-size: 0.75rem; color: var(--brown-muted); }
.admin-stats dd { margin: 2px 0 0; font-size: 1.35rem; font-weight: 600; color: var(--brown); font-variant-numeric: tabular-nums; }
/* Liste des bâtiments (mobile) en parchemin, pastille colorée selon ce qui est possible */
@media (max-width: 760px), (max-height: 520px) {
    .theme-parchment .roster__item { background: linear-gradient(180deg, var(--parch) 0%, var(--parch-2) 100%); border: 1px solid #b59a6c; border-radius: 8px; color: var(--brown); }
    .theme-parchment .roster__item.is-selected { border-color: #8a6212; box-shadow: 0 0 0 2px #f2cf6b; }
    .theme-parchment .roster__level { display: flex; align-items: center; gap: 6px; color: var(--brown-muted); }
    .roster__lvl { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; font-size: 0.72rem; font-weight: 700; background: #fffaf0; color: var(--brown); border: 1.5px solid #8b6b45; }
    .plot--ready .roster__lvl { background: #4f9a12; color: #fff; border-color: #fff; box-shadow: 0 0 0 1px #4f9a12; }
    .plot--works .roster__lvl { background: #e39a1c; color: #fff; border-color: #fff; box-shadow: 0 0 0 1px #e39a1c; }
    .plot--max .roster__lvl { background: #f2cf6b; color: #4a3016; border-color: #8a6212; }
    .plot--locked .roster__lvl { background: #ddd3c4; color: #6e6458; border-color: #9a8f80; }
}
/* Administration : monde, diagnostic, journal d'erreurs ; signalement d'un problème */
/* Administration : onglets, cartes de chiffres, encadrés, états des comptes, fiche joueur */
.admin-head { align-items: flex-start; }
.admin-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 4px; padding: 0 6px; border-radius: 10px; background: #a3301f; color: #fff; font-size: 0.72rem; font-weight: 700; }
.admin-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 6px 0 18px; }
.admin-card { display: grid; gap: 4px; padding: 12px 14px; border-radius: 8px; border: 1px solid #d4c19b; background: rgba(255, 252, 242, 0.8); color: var(--brown); text-decoration: none; }
a.admin-card:hover { border-color: #8a6212; background: #fff8e6; }
.admin-card__label { font-size: 0.78rem; color: var(--brown-muted); }
.admin-card__value { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.admin-box { padding: 14px 16px; border-radius: 8px; border: 1px solid #d4c19b; background: rgba(255, 252, 242, 0.65); }
.panel-wide .admin-box h2 { margin-top: 0; }
.admin-list { display: grid; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; font-size: var(--step--1); }
.admin-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; padding: 6px 0; border-bottom: 1px dotted #d4c19b; }
.admin-list li:last-child { border-bottom: 0; }
.admin-list .button, .admin-actions .button, .admin-table .button { min-height: 34px; padding: 0 14px; font-size: var(--step--1); }
.admin-progress { display: block; height: 10px; margin: 8px 0 12px; }
.admin-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 16px; margin: 0; font-size: var(--step--1); }
.admin-facts dt { color: var(--brown-muted); font-size: 0.76rem; }
.admin-facts dd { margin: 1px 0 0; font-weight: 600; color: var(--brown); overflow-wrap: anywhere; }
.admin-state { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; vertical-align: middle; white-space: nowrap; }
.admin-state--ok { background: #e3f0d3; color: #2f6a14; }
.admin-state--wait { background: #fbecc6; color: #8a5a06; }
.admin-state--ban { background: #f6d6cf; color: #8a2416; }
.admin-state--admin { background: #e5ddf3; color: #4b2f7a; }
.admin-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 6px 0 12px; }
.panel-wide .admin-toolbar h2 { margin: 0; }
.admin-search { display: flex; gap: 8px; }
.admin-search input, .admin-search select, .admin-ban input { min-height: 38px; padding: 0 10px; font: inherit; background: #fffaf0; border: 1px solid #b59a6c; border-radius: 4px; color: var(--brown); }
.admin-table td { vertical-align: middle; }
.admin-table .admin-email { color: var(--brown-muted); overflow-wrap: anywhere; }
.admin-flag { width: 18px; height: 18px; margin-right: 5px; vertical-align: -4px; object-fit: contain; }
.admin-pages { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.admin-player { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; align-items: start; margin-bottom: 8px; }
.panel-wide .admin-player h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; font-size: var(--step-2); }
.admin-player h2 .admin-flag { width: 26px; height: 26px; margin: 0; }
.admin-actions { display: grid; gap: 8px; }
.admin-actions form, .admin-actions .button { width: 100%; }
.admin-actions .button { justify-content: center; }
.admin-ban { display: grid; gap: 6px; }
@media (max-width: 760px) {
    .admin-player { grid-template-columns: 1fr; }
    .admin-search { width: 100%; }
    .admin-search input, .admin-search select { flex: 1; min-width: 0; }
    /* Tableaux de l'administration : une carte par ligne sur téléphone */
    .admin-table, .admin-table tbody { display: block; }
    .admin-table thead { display: none; }
    .admin-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; margin-bottom: 10px; padding: 10px 12px;
        border: 1px solid #d8c6a0; border-radius: 8px; background: rgba(255, 252, 242, 0.7); }
    .admin-table td, .admin-table td.num { display: block; padding: 0; border: 0; text-align: left; }
    .admin-table td:first-child { grid-column: 1 / -1; }
    .admin-table td[data-label]::before { content: attr(data-label); display: block; font-size: 0.72rem; color: var(--brown-muted); }
    .admin-table td:last-child:not([data-label]) { grid-column: 1 / -1; }
}
.admin-world { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; align-items: start; }
.admin-world .form { padding: 12px 14px; border: 1px solid #d4c19b; border-radius: 6px; background: rgba(255, 252, 242, 0.6); margin: 0; }
.admin-world p { font-size: var(--step--1); line-height: 1.45; }
.diag th { width: 36%; color: var(--brown-muted); }
.diag td.is-ok { color: #2f6a14; font-weight: 600; }
.diag td.is-ko { color: #a3301f; font-weight: 600; }
.logtail { max-height: 260px; overflow: auto; margin: 6px 0 0; padding: 10px 12px; border-radius: 6px; background: #2b241c; color: #f3ead6;
    font: 0.72rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-word; }
.popover--support { width: min(420px, calc(100vw - 24px)); }
.popover--support textarea { width: 100%; min-height: 110px; }
.popover--support .button { width: 100%; }
/* Lien d'évitement : invisible jusqu'au premier Tab */
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 6px; background: #2b241c; color: #f6dd8f; font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 12px; }
[data-building-panel]:focus { outline: none; }
[data-building-panel]:focus-visible { outline: 3px solid var(--focus, #9a6a12); outline-offset: -3px; }
/* Carte sur téléphone (portrait comme paysage) : zoom au pincement (deux doigts) ; les boutons de zoom laissent la place aux outils du coin */
@media (max-width: 760px), (max-height: 520px) {
    .page-map .topbar .map-zoom { display: none; }
}

/* Marteau des chantiers : sur le toit, halo clair et ombre portée pour rester lisible sur l'illustration */
.works__hammer image.works__swing { filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff) drop-shadow(0 3px 3px rgba(30, 20, 8, 0.55)); }
/* Grain de parchemin (texture Codex raccordable) sous les panneaux, les fenêtres et la carte d'accès ;
   le dégradé d'origine reste par-dessus, en partie transparent : la lecture ne change pas */
.theme-parchment .card, .theme-parchment .panel-wide, .theme-parchment .popover, .page-auth .auth-card {
    background-image: linear-gradient(180deg, rgba(243, 234, 214, 0.45) 0%, rgba(231, 219, 192, 0.6) 100%), url("/assets/img/parchment.webp");
    background-size: auto, 512px 512px;
}

/* ==========================================================================
   Visite guidée de la première arrivée (js/tour.js) : fenêtre modale plein écran,
   projecteur (une découpe dans un voile sombre, cerclée d'or) et bulle parchemin du conseiller.
   ========================================================================== */
.tour {
    position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
    margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden; color: var(--brown);
}
.tour[open] { animation: tour-in 0.45s ease both; }
.tour::backdrop { background: transparent; }
@keyframes tour-in { from { opacity: 0; } }
.tour__hole {
    position: absolute; left: 50%; top: 50%; width: 0; height: 0; border-radius: 14px; pointer-events: none;
    box-shadow: 0 0 0 200vmax rgba(24, 16, 8, 0.66);
    transition: left 0.35s ease, top 0.35s ease, width 0.35s ease, height 0.35s ease;
}
.tour__hole.is-lit { box-shadow: 0 0 0 3px #f2cf6b, 0 0 28px 6px rgba(242, 207, 107, 0.45), 0 0 0 200vmax rgba(24, 16, 8, 0.6); }
.tour__card {
    position: absolute; left: 16px; top: 16px; width: min(400px, calc(100vw - 32px));
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: start;
    padding: 16px 18px 14px; border: 1px solid var(--parch-edge); border-radius: 8px;
    background: linear-gradient(180deg, rgba(243, 234, 214, 0.45) 0%, rgba(231, 219, 192, 0.6) 100%), url("/assets/img/parchment.webp") 0 0 / 512px 512px, var(--parch);
    box-shadow: inset 0 0 0 3px var(--parch), inset 0 0 0 4px #cdb68b, 0 18px 44px rgba(8, 5, 2, 0.6);
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.tour__card.is-hidden { opacity: 0; transform: translateY(6px); pointer-events: none; }
.tour__advisor {
    width: 54px; height: 54px; border-radius: 50%; object-fit: cover; object-position: 50% 12%;
    background: #fffaf0; border: 2px solid var(--gold); box-shadow: 0 2px 6px rgba(30, 20, 8, 0.3);
}
.tour__count { margin-top: 1px; font-size: 0.72rem; color: var(--brown-muted); font-variant-numeric: tabular-nums; }
.tour__count:empty { display: none; }
.theme-parchment .tour__title { font-size: 0.98rem; line-height: 1.3; margin: 2px 0 6px; }
.tour__text { font-size: var(--step--1); line-height: 1.55; color: var(--brown); }
.tour__actions {
    grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 8px;
    margin-top: 14px; padding-top: 12px; border-top: 1px dotted var(--parch-edge);
}
.tour__actions [hidden] { display: none; }
.tour__skip { margin-right: auto; color: var(--brown-muted); }
.tour__actions .button { min-height: 40px; padding: 0 16px; font-size: var(--step--1); }
/* Accueil et au revoir : le conseiller en buste, qui dépasse du parchemin */
.tour__card.is-hero { width: min(540px, calc(100vw - 32px)); grid-template-columns: 124px minmax(0, 1fr); column-gap: 16px; padding-top: 20px; }
.tour__card.is-hero .tour__advisor {
    width: 124px; height: 124px; margin: -66px 0 0 -6px; border: 0; border-radius: 0; background: none; box-shadow: none;
    object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 6px 8px rgba(30, 20, 8, 0.35));
}
.theme-parchment .tour__card.is-hero .tour__title { font-size: 1.12rem; }
.tour.is-instant .tour__hole, .tour.is-instant .tour__card { transition: none; }
@media (max-width: 760px), (max-height: 520px) {
    .tour__card, .tour__card.is-hero { width: min(560px, calc(100vw - 24px)); padding: 14px 14px 12px; column-gap: 12px; }
    .tour__advisor { width: 44px; height: 44px; }
    .tour__card.is-hero { grid-template-columns: 84px minmax(0, 1fr); padding-top: 16px; }
    .tour__card.is-hero .tour__advisor { width: 84px; height: 84px; margin: -46px 0 0 -4px; }
    .tour__actions { flex-wrap: wrap; row-gap: 10px; }
    .tour__actions .button { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
    .tour[open] { animation: none; }
    .tour__hole, .tour__card { transition: none; }
}

/* Rapports et messages : cases à cocher, barre d'actions groupées, pages, partage avec l'alliance */
.mailbox__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 10px; }
.mailbox__all { display: inline-flex; align-items: center; gap: 8px; font-size: var(--step--1); color: var(--muted); cursor: pointer; }
.mailbox__actions, .report-actions, .message-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.report-actions, .message-actions { margin: 10px 0 16px; }
.mailbox__actions .button, .report-actions .button, .message-actions .button, .pager .button { min-height: 36px; padding: 0 14px; font-size: var(--step--1); }
.button--ghost.mailbox__delete { color: #a3301f; }
.mailbox__item { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 6px; }
.mailbox__check { display: grid; place-items: center; width: 28px; height: 28px; cursor: pointer; }
.mailbox__check input, .mailbox__all input { width: 18px; height: 18px; margin: 0; accent-color: #6b3f12; cursor: pointer; }
.mailbox__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 12px; }
.mailbox__foot .muted { margin: 0; }
.pager { display: flex; gap: 8px; margin-left: auto; }
.report-row__tag { margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 0.7rem; font-weight: 600; background: rgba(155, 127, 85, 0.2); color: var(--brown-muted); }
.chat__report p { display: flex; align-items: center; gap: 6px; }
.chat__report svg { width: 15px; height: 15px; flex: none; color: var(--brown-muted); }
.report-list--compact .report-row { padding-top: 6px; padding-bottom: 6px; }

/* Conquête : capitale imprenable, allégeance dans les rapports */
.tag--capital { font-family: var(--font); font-size: 0.66rem; font-weight: 600; text-transform: none; letter-spacing: 0.02em; padding: 1px 8px; margin-left: 6px; vertical-align: 2px; }
.portlist__capital { width: 12px; height: 12px; margin-left: 4px; vertical-align: -1px; color: #9c7425; }
.conquest { margin: 14px 0; padding: 12px 16px; border: 1px solid #c9b48c; border-radius: 6px; background: rgba(255, 252, 242, 0.6); }
.conquest.is-conquered { border-color: #9c7425; box-shadow: inset 0 0 0 1px #f2cf6b; background: rgba(242, 207, 107, 0.18); }
.theme-parchment .conquest h2 { margin-top: 0; }
.conquest p + p { margin-top: 6px; }
.conquest__gauge { display: flex; align-items: center; gap: 8px; font-size: var(--step-1); font-variant-numeric: tabular-nums; }
.conquest__gauge svg { width: 16px; height: 16px; transform: rotate(45deg); color: var(--brown-muted); }
/* Siège : rapport de bombardement, cible des galiotes dans le formulaire d'envoi */
.siege { margin: 14px 0; padding: 12px 16px; border: 1px solid #c9b48c; border-radius: 6px; background: rgba(255, 252, 242, 0.6); }
.theme-parchment .siege h2 { margin-top: 0; }
.siege svg { width: 14px; height: 14px; transform: rotate(45deg); vertical-align: -2px; color: var(--brown-muted); }
.army-form__target { margin-top: 10px; }
.army-form__target select { width: 100%; font: inherit; min-height: 40px; padding: 0 12px; background: #fffaf0; border: 1px solid #b59a6c; border-radius: 4px; color: var(--brown); }

/* Flotte (place d'armes) : navires en mer, troupes, renforts, listes de pillage */
.fleet-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 8px 28px; }
@media (max-width: 900px) { .fleet-grid { grid-template-columns: 1fr; } }
.fleet-moves, .fleet-ports { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 6px; }
.fleet-move { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px 12px; padding: 8px 12px; border-radius: 6px;
    background: rgba(255, 252, 242, 0.7); border: 1px solid #d8c6a0; font-size: var(--step--1); }
.fleet-move.is-hostile { border-color: #c0392b; background: rgba(192, 57, 43, 0.08); }
.fleet-move .countdown { font-variant-numeric: tabular-nums; font-weight: 600; }
.fleet-ports li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 12px; border-radius: 6px;
    background: rgba(255, 252, 242, 0.7); border: 1px solid #d8c6a0; font-size: var(--step--1); }
.fleet-ports__name { min-width: 10em; font-weight: 600; }
.fleet-ports form { margin-left: auto; }
.unit-chips { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; }
.unit-chip { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.unit-chip svg { width: 16px; height: 16px; color: var(--brown-muted); }
.fleet-intro { max-width: 72ch; margin-bottom: 14px; }
.farm-new { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 0 0 6px; }
.farm-list { margin-top: 18px; padding-top: 14px; border-top: 1px dotted var(--parch-edge); }
.farm-list__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 8px; }
.theme-parchment .farm-list__head h2 { margin: 0; padding: 0; border: 0; }
.farm-list__drop { margin-left: auto; }
.farm-table td { vertical-align: middle; }
.farm-last a { font-weight: 600; }
.farm-last small { display: block; }
.farm-last--full a, .farm-last--won a { color: #2f6a14; }
.farm-last--lost a { color: #a3301f; }
.farm-list__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; margin-top: 10px; }
.farm-list__actions > .muted { margin-right: auto; display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.farm-list__actions .button { min-height: 38px; padding: 0 16px; font-size: var(--step--1); }
.farm-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 10px; padding: 10px 12px; border-radius: 6px;
    background: rgba(255, 252, 242, 0.55); border: 1px dashed #c9b48c; }
.farm-add__title { font-size: var(--step--1); font-weight: 600; margin-right: 4px; }
.farm-add label { display: inline-flex; align-items: center; gap: 4px; font-size: var(--step--1); }
.farm-add input { width: 4.6em; min-height: 34px; padding: 0 6px; font: inherit; background: #fffaf0; border: 1px solid #b59a6c; border-radius: 4px; color: var(--brown); }
.farm-add__unit svg { width: 18px; height: 18px; color: var(--brown-muted); }
.farm-add .button { min-height: 36px; padding: 0 14px; font-size: var(--step--1); margin-left: auto; }
@media (max-width: 760px) {
    /* Listes de pillage : une cible par carte (case, cible, retirer ; puis flotte et dernier pillage) */
    .farm-table, .farm-table tbody, .farm-table thead { display: block; }
    .farm-table thead tr { display: flex; padding-bottom: 6px; }
    .farm-table thead th:not(:first-child), .farm-table td:nth-child(3) { display: none; }
    .farm-table thead .visually-hidden { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; margin-left: 8px; font-weight: 500; }
    .farm-table thead th { width: auto; }
    .farm-table thead .mailbox__check { display: inline-flex; align-items: center; width: auto; min-height: 44px; white-space: nowrap; }
    .farm-table tbody tr { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; padding: 8px 0; border-top: 1px solid var(--line); }
    .farm-table td { display: block; padding: 0; border: 0; }
    .farm-table td:nth-child(1) { grid-row: 1 / 3; }
    .farm-table td:nth-child(4) { grid-column: 2; grid-row: 2; }
    .farm-table td:nth-child(5) { grid-column: 3; grid-row: 2; text-align: right; }
    .farm-table td:nth-child(6) { grid-column: 3; grid-row: 1; }
    .fleet-move { grid-template-columns: minmax(0, 1fr) auto; }
    .fleet-move .unit-chips { grid-column: 1 / -1; grid-row: 2; }
}
.farm-new-wrap summary { cursor: pointer; font-size: var(--step--1); font-weight: 600; color: #6b3f12; margin-bottom: 8px; }

/* Simulateur de combat */
.sim__sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) { .sim__sides { grid-template-columns: 1fr; } }
.sim__side { margin: 0; padding: 10px 14px 12px; border: 1px solid #c9b48c; border-radius: 6px; background: rgba(255, 252, 242, 0.55); display: grid; gap: 6px; }
.sim__side legend { padding: 0 6px; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; }
.sim__unit { display: grid; grid-template-columns: 20px minmax(0, 1fr) 6.5em; align-items: center; gap: 8px; font-size: var(--step--1); }
.sim__unit svg { width: 18px; height: 18px; color: var(--brown-muted); }
.sim__unit input { min-height: 34px; padding: 0 8px; font: inherit; text-align: right; background: #fffaf0; border: 1px solid #b59a6c; border-radius: 4px; color: var(--brown); }
.sim__walls { margin-top: 4px; padding-top: 8px; border-top: 1px dotted var(--parch-edge); }
.sim__go { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 16px; margin: 12px 0 16px; }
.sim__go .muted { margin-right: auto; }
.sim__result th[scope], .sim__result tbody th { text-align: left; font-weight: 600; }
.sim__result .is-win { color: #2f6a14; font-weight: 600; }
.sim__result .is-loss { color: #a3301f; font-weight: 600; }
/* Téléphone : les trois chances tiennent dans la largeur, les nombres passent à la ligne */
@media (max-width: 520px) {
    .sim__result { table-layout: fixed; width: 100%; }
    .sim__result th, .sim__result td { padding: 6px 2px; font-size: 0.75rem; overflow-wrap: break-word; }
    .sim__result thead th:first-child, .sim__result tbody th { width: 30%; }
}

/* Vue d'ensemble des ports */
.overview { overflow-x: auto; }
.overview__table { min-width: 720px; }
.overview__table td, .overview__table th { vertical-align: middle; }
.overview__job { display: block; white-space: nowrap; }
.overview__job em { font-style: normal; color: var(--brown-muted); }
.overview__job + .overview__job { margin-top: 2px; }
.overview__alert { display: inline-flex; align-items: center; gap: 4px; color: #a3301f; font-weight: 600; white-space: nowrap; }
.overview__alert svg { width: 14px; height: 14px; }
.overview__res { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; color: var(--brown-muted); }
.overview__stock { display: block; font-variant-numeric: tabular-nums; white-space: nowrap; }
.overview__bar { display: block; height: 4px; margin: 3px 0 2px auto; width: 100%; max-width: 110px; border-radius: 2px; background: rgba(110, 90, 66, 0.2); overflow: hidden; }
.overview__bar span { display: block; height: 100%; width: 0; background: var(--green); }
.overview__table .is-full .overview__bar span { background: #c0392b; }
.overview__table .is-full .overview__stock { color: #a3301f; }
.overview__table .is-loss { color: #a3301f; }
.overview__table tfoot th, .overview__table tfoot td { border-top: 2px solid #c9b48c; }
@media (max-width: 1100px) { .overview__unit { display: none; } }
/* Vue d'ensemble sur téléphone : chaque port devient une carte, chaque valeur sous son étiquette */
@media (max-width: 600px) {
    .overview { overflow: visible; }
    .overview__table { min-width: 0; }
    .overview__table, .overview__table tbody, .overview__table tfoot { display: block; }
    .overview__table thead { display: none; }
    .overview__table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin-bottom: 10px; padding: 12px 14px;
        border: 1px solid #d8c6a0; border-radius: 8px; background: rgba(255, 252, 242, 0.7); }
    .overview__table td, .overview__table th, .overview__table td.num { display: block; padding: 0; border: 0; text-align: left; }
    .overview__table td:first-child, .overview__table tfoot th { grid-column: 1 / -1; font-weight: 600; }
    .overview__table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 0.72rem; font-weight: 500; color: var(--brown-muted); }
    .overview__table td:empty, .overview__table td.is-zero { display: none; }
    .overview__table td:last-child:not([data-label]) { grid-column: 1 / -1; }
    .overview__job { white-space: normal; }
    .overview__bar { margin-left: 0; max-width: none; }
    .overview__table tfoot tr { background: rgba(232, 214, 170, 0.45); }
    .overview__table tfoot th, .overview__table tfoot td { border-top: 0; }
}
.popover__more { display: block; margin-top: 10px; padding-top: 8px; border-top: 1px dotted var(--parch-edge); font-size: var(--step--1); font-weight: 600; }
.portlist__all { float: right; font-family: var(--font); font-size: 0.72rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
/* Mon compte : l'alerte d'attaque sous l'adresse e-mail */
.account-col { display: grid; gap: 18px; align-content: start; }
.account-col > .form { display: flex; flex-direction: column; }
.theme-parchment .panel-wide .account-col > .form { margin-top: 0; }
.account-alerts .checkbox { display: flex; align-items: flex-start; gap: 8px; font-size: var(--step--1); line-height: 1.45; }
.account-alerts .checkbox input { margin-top: 3px; accent-color: #6b3f12; }

/* Port : renommer ; bâtiment : démolir ; carte : recherche */
.portcard__rename { margin: -4px 0 8px; font-size: var(--step--1); }
.portcard__rename summary { cursor: pointer; color: #6b3f12; font-size: 0.75rem; }
.portcard__form { display: flex; gap: 6px; margin-top: 6px; }
.portcard__form input { flex: 1; min-width: 0; min-height: 34px; padding: 0 8px; font: inherit; background: #fffaf0; border: 1px solid #b59a6c; border-radius: 4px; color: var(--brown); }
.portcard__form .button { min-height: 34px; padding: 0 10px; font-size: var(--step--1); }
.building__demolish { margin-top: 10px; text-align: right; }
.building__demolish .link-button { color: #a3301f; }
.map-search { position: relative; margin: 10px 0 4px; }
.map-search input { width: 100%; min-height: 36px; padding: 0 10px; font: inherit; font-size: var(--step--1); background: #fffaf0; border: 1px solid #b59a6c; border-radius: 4px; color: var(--brown); }
.map-search__results { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; max-height: 220px; overflow: auto; font-size: var(--step--1); }
.map-search__results li { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; padding: 6px 8px; border-radius: 4px; background: rgba(255, 252, 242, 0.8); border: 1px solid #d8c6a0; }
.map-search__who { font-weight: 600; width: 100%; }
.map-search__port { border: 1px solid #c9b48c; background: #fffaf0; border-radius: 4px; padding: 2px 6px; font: inherit; font-size: 0.75rem; cursor: pointer; color: var(--brown); }
.map-search__port:hover { background: #f2cf6b; }

/* Alliance : présentation, circulaire, forum */
.alliance-desc { margin: -4px 0 14px; padding: 10px 14px; border: 1px solid #d8c6a0; border-radius: 6px; background: rgba(255, 252, 242, 0.6); font-size: var(--step--1); line-height: 1.55; max-width: 90ch; overflow-wrap: anywhere; }
.alliance-edit { margin: 0 0 14px; font-size: var(--step--1); }
.alliance-edit summary { cursor: pointer; font-weight: 600; color: #6b3f12; }
.alliance-edit .form { margin-top: 8px; }
.alliance-edit textarea, .forum-form textarea { width: 100%; }
.forum-threads td { vertical-align: middle; }
.forum-posts { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.forum-post { padding: 10px 14px; border-radius: 6px; background: rgba(255, 252, 242, 0.75); border: 1px solid #d8c6a0; }
.forum-post header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: var(--step--1); margin-bottom: 4px; }
.forum-post header time { color: var(--brown-muted); font-size: 0.75rem; }
.forum-post header form { margin-left: auto; }
.forum-post__body { font-size: var(--step--1); line-height: 1.55; overflow-wrap: anywhere; }
.forum-form { max-width: 760px; }
.forum-form .button, .alliance-edit .button { justify-self: start; width: auto; }
.forum-form textarea { min-height: 110px; }

/* Top 10 de la semaine et médailles */
.week-tops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin-top: 10px; }
@media (max-width: 760px) { .week-tops { grid-template-columns: 1fr; } }
.week-top__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--step--1); }
.week-top__list li { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 4px; background: rgba(255, 252, 242, 0.6); }
.week-top__list li.is-me { background: rgba(242, 207, 107, 0.35); font-weight: 600; }
.week-top__list .rank { width: 1.8em; text-align: right; font-weight: 700; color: var(--brown-muted); }
.week-top__list .rank--1 { color: #b8860b; } .week-top__list .rank--2 { color: #7d8791; } .week-top__list .rank--3 { color: #9c5a2c; }
.week-top__value { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; }
.week-top__mine { margin-top: 4px; border-top: 1px dotted var(--parch-edge); }
.medals { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.medal { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px; background: rgba(255, 252, 242, 0.75); border: 1px solid #d8c6a0; font-size: var(--step--1); }
.medal svg { width: 22px; height: 22px; color: #8a6a3a; }
.medal--1 svg { color: #d4a017; } .medal--2 svg { color: #9aa3ad; } .medal--3 svg { color: #b0703a; }
.medal small { margin-left: 4px; }

/* Gardiens de compte et mode vacances */
.account-grid--more { margin-top: 26px; padding-top: 6px; border-top: 1px dotted var(--parch-edge); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .account-grid--more { grid-template-columns: 1fr; } }
.account-block p { font-size: var(--step--1); line-height: 1.5; margin-bottom: 10px; }
.account-block h3 { font-family: var(--display); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; margin: 16px 0 8px; }
.sitter-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.sitter-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 6px 10px; border-radius: 6px; background: rgba(255, 252, 242, 0.7); border: 1px solid #d8c6a0; font-size: var(--step--1); }
.sitter-list li form:first-of-type { margin-left: auto; }
.sitter-list .button { min-height: 34px; padding: 0 12px; font-size: var(--step--1); }
.sit-banner { position: absolute; top: 140px; left: 50%; transform: translateX(-50%); z-index: 7; display: flex; align-items: center; gap: 10px;
    padding: 8px 18px; border-radius: 999px; background: #7a2a12; color: #fff3d6; font-size: var(--step--1); box-shadow: 0 6px 18px rgba(30, 20, 8, 0.45); white-space: nowrap; }
.sit-banner .link-button { color: #f6dd8f; }
.vacation-banner { background: #2f5d62; }
@media (max-width: 760px), (max-height: 520px) { .sit-banner { position: static; transform: none; margin: 10px 12px 0; white-space: normal; border-radius: 8px; } }

/* Peuples : bandeau d'invitation, page de choix, drapeau des unités propres */
.nation-banner { background: #5b3d1e; }
.nation-page__lede { max-width: 72ch; margin: 0 0 14px; color: var(--brown-muted); }
.nation-page__form { display: grid; gap: 16px; justify-items: start; }
.nation-page__form .nation-pick { justify-self: stretch; }
.nation-page .nation-pick > legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nation-mine { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px; }
.nation-mine__flag { width: 120px; height: 120px; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(60, 40, 15, 0.3)); }
.nation-mine__unit { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; background: #e9dcc0; box-shadow: 0 0 0 3px #fff8e8, 0 0 0 5px #8a6212; }
.panel-wide .nation-mine h2 { margin: 0 0 6px; font-family: var(--display); font-size: var(--step-2); }
.nation-mine p { max-width: 62ch; margin: 0 0 6px; }
.nation-tag { display: inline-flex; align-items: center; gap: 4px; }
.nation-tag img { width: 22px; height: 22px; object-fit: contain; }
.recruit__flag { width: 20px; height: 20px; margin-right: 4px; vertical-align: -4px; object-fit: contain; }
@media (max-width: 760px) {
    .nation-mine { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}

/* Quêtes : page des quêtes du jour et du conseiller, progression dans la fiche du conseiller */
@media (min-width: 761px) and (min-height: 521px) {
    /* Le conseiller reste en vue au bas de la colonne, même quand les panneaux du dessus la font défiler */
    .page-village.theme-parchment .col--right > .quest { position: sticky; bottom: 0; z-index: 1; box-shadow: 0 -10px 18px rgba(30, 20, 8, 0.25); }
}
a.quest--daily { text-decoration: none; color: inherit; }
.quest__more { justify-self: start; font-size: 0.76rem; font-weight: 600; }
/* Téléphone : le bandeau du haut n'a pas la place ; les quêtes s'ouvrent depuis la fiche du conseiller,
   « Signaler un problème » et « Se déconnecter » depuis « Mon compte » ; le nom du port se raccourcit au besoin */
@media (max-width: 760px) {
    .corner-tools .round--quests, .corner-tools .round--support, .corner-tools .corner-tools__logout { display: none; }
    .topbar > .pill--brand { max-width: calc(100vw - 232px); padding-left: 14px; }
    .topbar > button.pill--brand .emblem { display: none; } /* le nom du port passe avant le logo */
    .topbar > .pill--brand > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* Téléphone : 16 px au moins dans les champs, sinon Safari zoome sur la page à chaque saisie */
@media (max-width: 760px), (max-height: 520px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), select, textarea { font-size: max(16px, 1em) !important; }
}
/* Téléphone : cibles tactiles d'au moins 44 px de haut (liens-boutons, retours, menus repliables, cases à cocher) */
@media (max-width: 760px), (max-height: 520px) {
    .link-button, a.back, .quest__more, .recruit__locked, .nation-tag, .mailbox__all, .annexes a {
        display: inline-flex; align-items: center; min-height: 44px;
    }
    summary { padding-block: 12px; }
    input[type="checkbox"], input[type="radio"] { flex: none; width: 24px; height: 24px; min-height: 0; padding: 0; }
    .army-unit [data-all] { min-width: 44px; justify-content: center; }
    /* Noms de joueurs dans les listes : zone de toucher agrandie sans bouger la mise en page */
    .facts a, .week-top__list a, .forum-post a, .chat a { padding-block: 12px; margin-block: -12px; }
    /* Pages publiques : liens du pied de page et « Mot de passe oublié ? » */
    .home-legal a, .legal__nav a { display: inline-flex; align-items: center; min-height: 44px; }
    .auth-field__row a { padding-block: 12px; margin-block: -12px; }
}
/* Téléphone : rien sous 11,5 px (noms des marchandises, horloge, étiquettes, petits caractères) */
@media (max-width: 760px), (max-height: 520px) {
    .ledger__name, .server-clock, .tag--capital { font-size: 0.72rem; }
    small { font-size: max(11.5px, 0.8em); }
}
/* Téléphone en paysage : port, marchandises et boutons sur une seule ligne (le bandeau collé ne mange plus un tiers de l'écran) */
@media (max-height: 520px) and (min-width: 761px) {
    :root { --hud-h: 64px; }
    .topbar { grid-template-columns: auto minmax(0, 1fr); align-items: center; padding-right: 290px; }
    .topbar .ledger { grid-column: 2; grid-row: 1; padding: 4px; }
    .topbar > .pill--brand { max-width: 190px; }
    .topbar > .pill--brand > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .topbar .ledger__name, .topbar .ledger__rate { display: none; }
    .topbar .ledger__icon { display: block; width: 20px; height: 20px; }
    .topbar .ledger__entry { display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; }
    .topbar .ledger__gauge { flex-basis: 100%; }
    .alert-bar { top: 70px; }
}
.account-session { display: none; }
@media (max-width: 760px) {
    .account-session { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
    .account-session .button { min-height: 44px; }
    .account-session svg { width: 16px; height: 16px; margin-right: 6px; }
}
.quest--daily .quest__step svg { width: 20px; height: 20px; }
.quest__progress { display: flex; align-items: center; gap: 8px; font-size: 0.74rem; font-variant-numeric: tabular-nums; }
.quest__progress .hero-bar__track { flex: 1; height: 6px; }
.quests__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.daily { display: grid; gap: 10px; margin: 10px 0 0; padding: 0; list-style: none; }
.daily__item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px;
    border: 1px solid rgba(155, 127, 85, 0.5); background: rgba(255, 250, 235, 0.65); }
.daily__item.is-done { border-color: #b8860b; background: linear-gradient(180deg, #fff4d2 0%, #f3dfa6 100%); box-shadow: inset 0 0 0 1px #b8860b; }
.daily__item.is-claimed { opacity: 0.7; }
.daily__text { display: grid; flex: 1; gap: 4px; min-width: 0; font-size: var(--step--1); color: var(--brown-muted); }
.daily__text strong { font-size: var(--step-0); color: var(--brown); }
.daily__meter { display: flex; align-items: center; gap: 10px; }
.daily__bar { flex: 1; height: 8px; }
.advisor-quests__done { margin-top: 10px; font-size: var(--step--1); }
.advisor-quests__done summary { cursor: pointer; color: var(--brown-muted); font-weight: 600; }
.advisor-quests__done .advisor-quests { margin-top: 6px; }
.daily__count { font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.daily__state { display: inline-flex; align-items: center; gap: 4px; font-size: var(--step--1); font-weight: 600; color: var(--green-dark); }
.daily__state svg { width: 16px; height: 16px; }
.advisor-quests { display: grid; gap: 4px; margin: 10px 0 0; padding: 0; list-style: none; }
.advisor-quests__item { display: flex; align-items: center; gap: 10px; padding: 5px 10px; border-radius: 8px; font-size: var(--step--1); }
.advisor-quests__item > div { display: grid; flex: 1; gap: 3px; min-width: 0; color: var(--brown-muted); }
.advisor-quests__item strong { color: var(--brown); }
.advisor-quests__step { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
    background: rgba(110, 90, 66, 0.18); font-size: 0.72rem; font-weight: 600; }
.advisor-quests__step svg { width: 15px; height: 15px; }
.advisor-quests__item.is-claimed .advisor-quests__step { background: var(--green); color: #fff; }
.advisor-quests__item.is-claimed strong { font-weight: 500; color: var(--brown-muted); }
.advisor-quests__item.is-current { padding: 10px; border: 1px solid #c9a45c; background: rgba(255, 244, 210, 0.85); }
.advisor-quests__item.is-current .advisor-quests__step { background: var(--indigo); color: #fff; }
.advisor-quests__item.is-next { opacity: 0.6; }
@media (max-width: 860px) {
    .quests__grid { grid-template-columns: 1fr; }
}

/* Arsenal : recherches et améliorations */
.arsenal { margin: 10px 0 12px; }
.arsenal__job { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 12px; margin-bottom: 10px; border-radius: 6px;
    background: rgba(227, 154, 28, 0.12); border: 1px solid #e3b25a; font-size: var(--step--1); }
.arsenal__job svg { width: 16px; height: 16px; color: #b07a1a; }
.arsenal__job .countdown { font-weight: 600; margin-left: auto; }
.arsenal__table td { vertical-align: middle; font-size: var(--step--1); }
.arsenal__icon { width: 18px; height: 18px; vertical-align: -4px; margin-right: 6px; color: var(--brown-muted); }
.arsenal__table .recruit__cost { display: flex; flex-wrap: wrap; gap: 2px 8px; }
.arsenal__table .button { min-height: 32px; padding: 0 12px; font-size: var(--step--1); }
a.recruit__locked { text-decoration: underline; }
.arsenal__table td:nth-child(2) { white-space: nowrap; }
/* Arsenal sur téléphone : unité et état, puis coût et bouton, sur deux lignes */
@media (max-width: 520px) {
    .arsenal__table, .arsenal__table tbody { display: block; }
    .arsenal__table thead { display: none; }
    .arsenal__table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; padding: 10px 0; border-top: 1px solid var(--line); }
    .arsenal__table td { display: block; padding: 0; border: 0; }
    .arsenal__table td:nth-child(2) { text-align: right; }
}

/* Amiral : médaillon du bandeau, page du héros */
.hero-pill { position: relative; display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; padding: 3px; flex: none;
    background: conic-gradient(#4f9a12 calc(var(--h, 100) * 1%), rgba(110, 90, 66, 0.35) 0); box-shadow: 0 4px 12px rgba(30, 20, 8, 0.35); }
.hero-pill img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; background: #f3ead6; }
.hero-pill--dead img, .hero-pill--reviving img { filter: grayscale(1) brightness(0.8); }
.hero-pill .badge { top: -4px; right: -4px; }
.badge--gold { background: #d4a017; color: #2b1d0a; }
.hero-head { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 760px) { .hero-head { grid-template-columns: 1fr; } .hero-portrait { max-width: 180px; } }
.hero-portrait { margin: 0; border-radius: 8px; overflow: hidden; border: 2px solid #c9b48c; background: radial-gradient(circle at 50% 35%, #fff8e4, #e7dbc0); }
.hero-portrait img { display: block; width: 100%; height: auto; }
.hero-portrait.is-dead img { filter: grayscale(1) sepia(0.3); }
.hero-rename { margin: 2px 0 8px; font-size: var(--step--1); }
.hero-rename summary { cursor: pointer; color: #6b3f12; font-size: 0.75rem; }
.hero-status { font-size: var(--step--1); margin-bottom: 10px; }
.hero-status--dead { color: #a3301f; font-weight: 600; }
.hero-bars { display: grid; gap: 8px; max-width: 520px; }
.hero-bar { display: grid; grid-template-columns: 6.5em minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: var(--step--1); }
.hero-bar__label { font-weight: 600; }
.hero-bar__track { height: 10px; border-radius: 5px; background: rgba(110, 90, 66, 0.2); overflow: hidden; }
.hero-bar__track span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #b8860b, #f2cf6b); }
.hero-bar--health .hero-bar__track span { background: linear-gradient(90deg, #3d6b0a, #6cb32a); }
.hero-stats { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--step--1); }
.hero-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; margin-top: 18px; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
.hero-attrs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hero-attrs li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; padding: 6px 10px; border-radius: 6px; background: rgba(255, 252, 242, 0.7); border: 1px solid #d8c6a0; font-size: var(--step--1); }
.hero-attrs small { grid-column: 1; }
.hero-attrs form { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 6px; }
.hero-attrs input { width: 3.6em; min-height: 32px; padding: 0 6px; font: inherit; background: #fffaf0; border: 1px solid #b59a6c; border-radius: 4px; }
.hero-attrs .button, .hero-bag .button, .adventure .button, .hero-revive .button { min-height: 34px; padding: 0 12px; font-size: var(--step--1); }
.hero-prod { margin-top: 10px; font-size: var(--step--1); display: grid; gap: 4px; }
.hero-prod select { font: inherit; min-height: 32px; background: #fffaf0; border: 1px solid #b59a6c; border-radius: 4px; color: var(--brown); }
.hero-slots, .hero-bag { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.hero-slot, .hero-bag li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 6px;
    background: rgba(255, 252, 242, 0.7); border: 1px solid #d8c6a0; font-size: var(--step--1); }
.hero-slot svg, .hero-bag svg { width: 22px; height: 22px; color: var(--brown-muted); }
.hero-slot.is-full svg { color: #9c7425; }
.hero-slot span, .hero-bag span { display: grid; }
.adventure-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.adventure { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 6px;
    background: rgba(255, 252, 242, 0.75); border: 1px solid #d8c6a0; font-size: var(--step--1); }
.adventure svg { width: 22px; height: 22px; color: #b8860b; }
.adventure--hard svg { color: #a3301f; }
.hero-adventures { margin-top: 18px; }
.army-unit--hero input { width: 24px; height: 24px; justify-self: end; accent-color: #6b3f12; }
.hero-defend { margin-top: 10px; font-size: var(--step--1); }
.hero-defend .checkbox { display: flex; align-items: flex-start; gap: 8px; }
.hero-defend input { margin-top: 3px; accent-color: #6b3f12; }
.army-form__target[hidden] { display: none; }

/* Îlots annexés */
.annexes__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--step--1); }
.annexes__list li { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.annexes__bonus { display: inline-flex; gap: 6px; }
.annexes__bonus span { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; color: #2f6a14; }
.annexes__bonus svg { width: 14px; height: 14px; }
.annexes__list form { margin-left: auto; }

/* Marchandises illustrées (comme dans le bandeau du haut) dans les coûts, récompenses et butins */
.res-ico { flex: none; width: 18px; height: 18px; object-fit: contain; vertical-align: -4px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2)); }
.facts .res-ico { width: 20px; height: 20px; }
/* Unités illustrées (portraits et navires) dans les listes, tableaux et formulaires */
.unit-ico { flex: none; width: 22px; height: 22px; object-fit: contain; vertical-align: middle; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25)); }
.worklist__dot .unit-ico { width: 26px; height: 26px; }
.army-unit .unit-ico { width: 26px; height: 26px; }
.unit-ico--hero { border-radius: 50%; object-fit: cover; object-position: top; background: #e9dcc0; }

/* Gemmes : compteur du bandeau, boutons « Terminer », page des gemmes, bonus, marchand du roi */
.gem-pill { display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 10px 0 6px; border-radius: 999px; text-decoration: none;
    background: #2b241c; border: 2px solid #c9ad74; color: #f6dd8f; font-weight: 700; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.gem-pill img { width: 22px; height: 22px; object-fit: contain; }
.gem-pill:hover, .gem-pill[aria-current] { border-color: #f2cf6b; color: #fff3c4; }
.worklist__item { flex-wrap: wrap; }
.worklist__finish { margin: 0; }
.gem-button { display: inline-flex; align-items: center; gap: 3px; min-height: 28px; padding: 0 8px; border-radius: 6px; cursor: pointer;
    border: 1px solid #3d7a2a; background: linear-gradient(180deg, #e9f6dc, #cfe8b8); color: #2a5418; font: inherit; font-size: 0.75rem; font-weight: 700; }
.gem-button img { width: 16px; height: 16px; object-fit: contain; }
.gem-button:disabled { opacity: 0.5; cursor: not-allowed; }
.gem-cta { gap: 6px; background: linear-gradient(180deg, #2f8f4a, #1f6b34) !important; border-color: #174f26 !important; }
.gem-cta img { width: 20px; height: 20px; object-fit: contain; }
.quest__gems { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; color: #1f6b34; }
.quest__gems img { width: 16px; height: 16px; object-fit: contain; }
.gems__head { display: flex; align-items: center; gap: 18px; margin-bottom: 8px; }
.gems__chest { flex: none; width: 96px; height: 96px; object-fit: contain; }
.gems__balance { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-size: 1.1rem; }
.gems__balance img { width: 30px; height: 30px; object-fit: contain; }
.gems__balance strong { font-size: 1.6rem; color: #1f6b34; font-variant-numeric: tabular-nums; }
.boosts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 10px 0 18px; }
.boost { display: grid; justify-items: center; gap: 6px; padding: 14px; border-radius: 10px; text-align: center;
    border: 1px solid #d4c19b; background: rgba(255, 252, 242, 0.7); }
.boost.is-on { border-color: #3d7a2a; background: linear-gradient(180deg, #f1f9e8, #dcefc9); }
.boost__res { width: 44px; height: 44px; object-fit: contain; }
.boost__state { font-size: var(--step--1); color: var(--brown-muted); }
.boost .button { gap: 6px; }
.boost .button img { width: 18px; height: 18px; object-fit: contain; }
.gems__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; align-items: start; }
.gems__uses { display: grid; gap: 8px; margin: 0 0 14px; padding-left: 18px; font-size: var(--step--1); line-height: 1.45; }
.gems__history { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: var(--step--1); }
.gems__history li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dotted #d4c19b; }
.gems__history li span { display: grid; }
.gems__history .is-win { color: #1f6b34; }
.gems__history .is-loss { color: #a3301f; }
.exchange__rows { display: grid; gap: 10px; margin: 12px 0; }
.exchange__row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 130px; align-items: center; gap: 10px; }
.exchange__name { display: grid; font-weight: 600; }
.exchange__row input { min-height: 40px; padding: 0 10px; font: inherit; text-align: right; background: #fffaf0; border: 1px solid #b59a6c; border-radius: 4px; color: var(--brown); }
.exchange__left .is-loss { color: #a3301f; }
.exchange__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.exchange__actions .button img { width: 18px; height: 18px; object-fit: contain; margin-left: 4px; }
@media (max-width: 760px) {
    .gem-pill { height: 34px; padding: 0 8px 0 4px; font-size: 0.8rem; }
    .gems__head { gap: 12px; }
    .gems__chest { width: 64px; height: 64px; }
    .exchange__row { grid-template-columns: 28px minmax(0, 1fr) 110px; }
}
.exchange__row .res-ico { width: 28px; height: 28px; }