/* Polices EB Garamond et Karla : chargées par <link> dans le <head> de chaque page
   (plus d'@import, qui retardait le rendu d'un aller-retour). */

/* Lordrush Toolbox: Parchemin & sceau. This layer stays separate from the
   inherited Kingshot styles so future upstream updates remain reviewable. */
:root,
[data-theme="light"] {
    --bg-dark: #efe7d7;
    --bg-panel: #faf5e9;
    --control-bg: #e6dcc7;
    --input-bg: #fffdf7;
    --text-light: #241c10;
    --text-muted: #675a42;        /* 4,95:1 sur --control-bg, 5,5:1 sur le fond (audit du 23/09/2026) */
    --accent: #9a2f24;
    --accent-hover: #7a2119;
    --border: #ddd0b5;
    --success: #3f6b2f;
    --warning: #96601a;
    --table-header: #e9dfc9;
    --table-row-alt: #f5efdf;
    --table-head-text: #5f533c;   /* 5,5:1 sur --control-bg, pour les en-têtes de tableau */
    --shadow: rgba(78, 58, 28, 0.12);
    --on-accent: #faf5e9;
    --growth-color: #3f6b2f;
    --eco-color: #96601a;
    --battle-color: #9a2f24;
    --box-bg: #faf5e9;
    --box-header: #e9dfc9;
    --step-bg: #f5efdf;
    --step-hover: #eee4cf;
    --ink: #241c10;
    --ink-soft: #675a42;
    --green: #9a2f24;
    --star: #96601a;
}

[data-theme="dark"] {
    --bg-dark: #14100a;
    --bg-panel: #1e1810;
    --control-bg: #272016;
    --input-bg: #2c251a;
    --text-light: #f3e9d5;
    --text-muted: #a99a80;
    --accent: #e2695c;
    --accent-hover: #c24e42;
    --border: #322a1e;
    --success: #7ab369;
    --warning: #e0b040;
    --table-header: #241d14;
    --table-row-alt: #181309;
    --table-head-text: #a99a80;
    --shadow: rgba(0, 0, 0, 0.55);
    --on-accent: #14100a;
    --growth-color: #7ab369;
    --eco-color: #e0b040;
    --battle-color: #e2695c;
    --box-bg: #1e1810;
    --box-header: #241d14;
    --step-bg: #181309;
    --step-hover: #272016;
    --ink: #f3e9d5;
    --ink-soft: #a99a80;
    --green: #e2695c;
    --star: #e0b040;
}

body {
    font-family: 'Karla', 'Segoe UI', system-ui, sans-serif;
}

body:not(.hub-body) .db-page {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(28% 34% at 18% 24%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%),
        radial-gradient(32% 30% at 84% 72%, color-mix(in srgb, var(--warning) 10%, transparent), transparent 70%);
}

h1,
h2,
h3,
.app-header-logo,
.hub-section-title {
    font-family: 'EB Garamond', Georgia, serif;
    font-weight: 600;
}

.app-header-logo {
    font-size: 21px;
}

.app-header-logo .logo-text,
.hub-header h1 {
    background: none;
    color: var(--accent);
    -webkit-text-fill-color: currentColor;
    text-shadow: none;
}

.hub-card .hub-card-title {
    font-size: 26px;
}

.hub-section-title {
    font-size: 22px;
}

.hub-card {
    box-shadow: 0 1px 0 var(--border), 0 6px 18px -12px var(--shadow);
}

.hub-card::before {
    display: none;
}

table {
    font-variant-numeric: tabular-nums;
}

th {
    font-family: 'Karla', 'Segoe UI', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.app-header {
    border-bottom-color: color-mix(in srgb, var(--accent) 35%, var(--border));
    box-shadow: 0 2px 18px var(--shadow);
}

.pet-main {
    font-family: 'Karla', 'Segoe UI', system-ui, sans-serif;
}

.marker,
.pet-name,
.pl-tier,
.pet-levelbox .pl-input,
.psk-name,
.cost-lbl b,
.pl-adv-tier {
    font-family: 'EB Garamond', Georgia, serif;
}

/* Familiers (26 septembre 2026) : la scène garde le décor « jour » de Kingshot
   (champs vert sauge, sentier sable, carte blanche translucide) dans les deux
   thèmes, comme sur Kingshot Toolbox ; seuls le header et la collection suivent
   le thème du site. css/pets.css définit ce décor et ses encres (--ink,
   --ink-soft, --green) sur :root, où les jetons du thème les écrasent : on les
   rétablit sur la scène, le volet du plan et ses onglets. Les anciennes
   surcharges de fond, de sentier, d'herbes, de fondu et de carte sont retirées. */
.pets-page :is(.pet-main, .pp-pane, .pp-tabs) {
    --ink: oklch(0.26 0.04 140);
    --ink-soft: oklch(0.40 0.03 135);
    --green: oklch(0.50 0.10 135);
}

/* Planificateur de bâtiments (body.bp-page). Le rouge de cire était posé sur chaque nom,
   icône, case, filet et bouton : plus rien ne ressortait, surtout en sombre. Il ne reste
   que sur les cases, le bonus de vitesse et les actions ; les données prennent une
   couleur par ressource. Fonds et tokens globaux inchangés. Contrastes texte ≥ 4,9:1
   sur panneau, alternance et bande du total, dans les deux thèmes. */
.bp-page {
    --bp-bread: #7a4f0a;
    --bp-wood:  #3a632b;
    --bp-stone: #4d5866;
    --bp-iron:  #34508f;
    --bp-time:  #7e5412;
}

[data-theme="dark"] .bp-page {
    --bp-bread: #e6b85c;
    --bp-wood:  #9cc27a;
    --bp-stone: #a9b4c2;
    --bp-iron:  #8fa8e0;
    --bp-time:  #e0b040;
}

.bp-page .help-banner { border-left-color: var(--border); }

/* Onglets « Avant le Truegold » / « Truegold » : composant .tabs/.tab de la page
   Recherches (style.css §9). L'onglet actif se pose sur le panneau « Mes Bâtiments »
   (marge négative = espace de .main-content.flow), comme un intercalaire. */
.bp-page .bp-tabs {
    background: transparent;
    padding: 0 0 0 0;
    border-bottom: none;
    margin-bottom: -20px;
    position: relative;
    z-index: 1;
}
.bp-page .bp-tabs .tab { background: var(--control-bg); font-weight: 600; }
.bp-page .bp-tabs .tab:hover { color: var(--text-light); }
.bp-page .bp-tabs .tab.active {
    background: var(--bg-panel);
    color: var(--text-light);
    border-top: 3px solid var(--accent);
}
.bp-page .bp-tabpanel { display: flex; flex-direction: column; gap: 20px; flex: 1; }
.bp-page .bp-tabpanel > .panel:first-child { border-top-left-radius: 0; }
.bp-page .bp-tab-intro { margin: -4px 0 14px; color: var(--text-muted); font-size: 13px; line-height: 1.5; }
/* Onglet Truegold : bâtiment encore sous le niveau 30 (texte atténué, pas d'opacité,
   qui ferait tomber le contraste sous 4,5:1). */
.bp-page .bp-row-locked td,
.bp-page .bp-row-off td { color: var(--text-muted); }
.bp-page .bp-row-off .bldg-name { font-weight: 400; }
/* Annonce réservée aux lecteurs d'écran (région role="status"). */
.bp-page .bp-sr {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.bp-page .bp-row-locked .table-select { cursor: not-allowed; }
.bp-page .bp-locked-msg { font-size: 13px; font-style: italic; }

.bp-page .bp-bulk-edit { border: 1px solid var(--border); background: var(--control-bg); }
.bp-page .bp-bulk-title { color: var(--text-light); }
.bp-page .bp-bulk-apply { flex: 0 0 auto; }
.bp-page .bp-bulk-apply:disabled {
    opacity: 1;
    background: var(--input-bg);
    color: var(--text-muted);
    border: 1px solid var(--border);
    box-shadow: none;
}

/* Pas de marge sous un tableau encadré : la bande du total touche le bord. */
.bp-page #buildings-table { margin-bottom: 0; }

.bp-page #buildings-head th {
    color: var(--table-head-text);
    text-transform: uppercase;
    font-size: 11px;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border);
}
.bp-page #buildings-head th:nth-child(n+4),
.bp-page .bp-cost,
.bp-page .bp-time,
.bp-page #buildings-footer td {
    text-align: right;
    padding-right: 22px;
}
/* Pastille de ressource : colonnes 4 à avant-dernière (Truegold éventuel compris). */
.bp-page #buildings-head th:nth-child(n+4):not(:last-child)::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 6px;
    border-radius: 2px;
    vertical-align: 1px;
    background: var(--bp-dot, var(--text-muted));
}
/* Couleur passée par variable : la règle ci-dessus, plus spécifique (:not), écraserait un background posé ici. */
.bp-page #buildings-head th:nth-child(4) { --bp-dot: var(--bp-bread); }
.bp-page #buildings-head th:nth-child(5) { --bp-dot: var(--bp-wood); }
.bp-page #buildings-head th:nth-child(6) { --bp-dot: var(--bp-stone); }
.bp-page #buildings-head th:nth-child(7) { --bp-dot: var(--bp-iron); }

.bp-page #buildings-container tr:hover { background-color: color-mix(in srgb, var(--text-light) 5%, transparent); }
.bp-page .bldg-name { color: var(--text-light); font-weight: 600; }
.bp-page .bldg-icon {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: var(--input-bg);
    box-shadow: inset 0 0 0 1px var(--border);
}
.bp-page .bldg-icon svg { color: var(--text-muted); }
.bp-page .bp-time { color: var(--bp-time); font-weight: 600; }
/* Libellés Truegold (30-1, TG1-4…) : jamais coupés au trait d'union. */
.bp-page .bp-lvl,
.bp-page .tg-serie-from,
.bp-page .tg-serie-to,
.bp-page .tg-steps .tg-tier { white-space: nowrap; }

.bp-page #buildings-footer td {
    padding-block: 14px;
    font-weight: 700;
    background: var(--table-header);
    border-top: 1px solid color-mix(in srgb, var(--text-muted) 45%, var(--border));
}
.bp-page #buildings-footer td:first-child { color: var(--table-head-text); text-transform: uppercase; font-size: 12px; }
.bp-page #buildings-footer td:nth-child(2) { color: var(--bp-bread); }
.bp-page #buildings-footer td:nth-child(3) { color: var(--bp-wood); }
.bp-page #buildings-footer td:nth-child(4) { color: var(--bp-stone); }
.bp-page #buildings-footer td:nth-child(5) { color: var(--bp-iron); }
.bp-page #buildings-footer td:last-child { color: var(--bp-time); }

/* Colonne Truegold (niveaux 30-1 à TG3) : sans ce resserrement, le tableau défilait
   jusqu'à 38 px à 1280 px (compte neuf en français, montants « 472.92M »). Colonnes
   alignées à droite : la marge gauche peut être réduite sans coller les valeurs. */
@media (max-width: 1400px) {
    .bp-page #buildings-head th:nth-child(n+4),
    .bp-page .bp-cost,
    .bp-page .bp-time,
    .bp-page #buildings-footer td { padding-left: 6px; padding-right: 10px; }
}

@media (max-width: 600px) {
    .bp-page #buildings-head th:nth-child(n+4),
    .bp-page .bp-cost,
    .bp-page .bp-time,
    .bp-page #buildings-footer td { padding-right: 10px; }
}