/* =====================================================================
   L’ÉPOPÉE DE GOULTARD — socle de l'interface, à la manière de Dofus 3
   Graphite chaud, filets d'or terne, et un seul accent vif : le jaune-vert
   acide des boutons de Dofus 3 (#c2e800). L'illustration porte la couleur ;
   l'interface se tait autour d'elle, et ne s'allume que là où l'on doit agir.
   Couleurs relevées sur les éléments d'interface du jeu (tools/dofus-extract.py
   interface).

   1. Polices          3. Surfaces : panneaux, en-têtes
   2. Jetons & socle   4. Transitions d'écran
   ===================================================================== */

/* ======================= 1. POLICES =======================
   Embarquées dans assets/fonts : le jeu se lance hors ligne, sans attendre
   un serveur de polices, et chaque capture montre les vraies lettres.
   Lexend pour les titres et tout ce qui se lit, comme l'interface de
   Dofus 3 (Rowdies pour le grand titre) ; Cormorant Garamond reste la voix du
   récit.
   Licence SIL OFL. */
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url('../assets/fonts/cormorant-garamond-500-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url('../assets/fonts/cormorant-garamond-500-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 600; font-display: swap; src: url('../assets/fonts/cormorant-garamond-500-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 600; font-display: swap; src: url('../assets/fonts/cormorant-garamond-500-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/lexend-regular.woff2') format('woff2'); }
@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/lexend-medium.woff2') format('woff2'); }
@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/lexend-semibold.woff2') format('woff2'); }
@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 700 900; font-display: swap; src: url('../assets/fonts/lexend-bold.woff2') format('woff2'); }
@font-face { font-family: 'Rowdies'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('../assets/fonts/rowdies-regular.woff2') format('woff2'); }

/* ======================= 2. JETONS & SOCLE ======================= */
:root {
    color-scheme: dark;

    /* Nuit : du plus profond au plus clair. Les noms « stone » sont gardés,
       tout le jeu s'y réfère. */
    --ink: #121210;
    --ink-2: #171714;
    --stone-900: #1c1c19;
    --stone-800: #22221e;
    --stone-700: #2a2a25;
    --stone-600: #393932;
    --stone-500: #4f4f49;
    --stone-400: #6c6c62;

    --gold: #c9ab45;
    --gold-lit: #ead48a;
    --gold-deep: #7d6a26;
    --arcane: #7b5cff;
    --arcane-lit: #a68bff;
    --rune: #c2e800;
    --rune-deep: #5d7000;
    --ember: #ff7a3c;
    --blood: #d6404e;
    --blood-lit: #ff6b83;
    --verdant: #52d18a;
    --aqua: #58c8ff;

    /* Éléments. Une seule déclaration : la palette adaptée au daltonisme les
       redéfinit plus bas, et tout ce qui s'en sert suit. */
    --elem-terre: #c08b5a;
    --elem-feu: #ff7a3c;
    --elem-eau: #58c8ff;
    --elem-air: #9ce8b4;

    /* Encre chaude sur nuit froide : le texte se lit comme sur un parchemin. */
    --text: #ecebe3;
    --text-soft: #bab9ae;
    --text-dim: #898880;

    --common: #9aa0b2;
    --rare: #4f9cf5;
    --epic: #b06ae0;
    --legendary: #f0b429;
    --mythic: #ff3b5c;

    --font-display: 'Lexend', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-ui: 'Lexend', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
    --font-title: 'Rowdies', 'Lexend', sans-serif;
    /* L'accent de Dofus 3 : l'action principale, la sélection. */
    --lime: #c2e800;
    --lime-lit: #e3f700;
    --lime-deep: #5d7000;
    --font-lore: 'Cormorant Garamond', 'Palatino Linotype', Palatino, Georgia, serif;

    /* Surfaces. Un panneau est du verre fumé posé sur la scène, cerclé d'un
       filet d'or : jamais un bloc opaque. */
    --pane: linear-gradient(180deg, rgba(45, 46, 40, 0.94), rgba(30, 30, 27, 0.96));
    --pane-solid: linear-gradient(180deg, #2d2e28, #1e1e1b);
    --line: rgba(201, 171, 69, 0.2);
    --line-strong: rgba(201, 171, 69, 0.5);
    --line-soft: rgba(255, 255, 255, 0.06);
    --well: rgba(8, 8, 6, 0.45);

    --radius: 4px;
    --radius-lg: 8px;
    --speed: 0.18s;
    --ease-out: cubic-bezier(0.2, 0.8, 0.25, 1);
    --bar-h: 64px;

    --bevel: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -1px 0 rgba(0, 0, 0, 0.6);
    --lift: 0 22px 50px rgba(0, 0, 0, 0.55);
    --noise: none;
}

/*
 * Confort de lecture. `--text-scale` multiplie toutes les tailles écrites en
 * rem ; les réglages l'écrivent sur <html>. Lexend a un grand œil et une
 * chasse large : 15 px valent les 17 px qu'il fallait à Alegreya.
 */
html { font-size: calc(15px * var(--text-scale, 1)); }

/*
 * Palette adaptée au daltonisme. Les quatre éléments sont séparés par la
 * CLARTÉ autant que par la teinte : c'est le seul axe qui tient sous une
 * deutéranopie ou une protanopie, où l'ocre, l'orange et le vert se
 * rapprochent tous du même jaune. Les pastilles gardent par ailleurs leur
 * pictogramme : la couleur n'est jamais le seul indice.
 */
html[data-palette="daltonien"] {
    --elem-terre: #e69f00;   /* ambre clair */
    --elem-feu: #d55e00;     /* vermillon sombre */
    --elem-eau: #0072b2;     /* bleu sombre */
    --elem-air: #56b4e9;     /* bleu ciel clair */
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }

body {
    margin: 0;
    background: var(--ink);
    font-family: var(--font-ui);
    font-variant-numeric: lining-nums;
    color: var(--text);
    overflow: hidden;
    user-select: none;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-wrap: balance;
}

button { font-family: inherit; color: inherit; }
button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--rune); outline-offset: 2px; }
#icon-sprite { display: none; }
.hidden { display: none !important; }

.screen { width: 100%; height: 100dvh; }

.menu-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
    overflow: hidden;
}

/*
 * Écran de préparation : il vit sous la barre de jeu, qui est fixe. Son
 * propre contenu se range dans la hauteur restante.
 */
.meta-screen {
    display: flex;
    flex-direction: column;
    padding: calc(var(--bar-h) + 18px) 24px 22px;
    overflow: hidden;
}

/* --- Icônes --- */
/* Deux familles cohabitent : les symboles vectoriels, colorés par
   currentColor, et les illustrations du dossier ui/. Le porte-icône a la même
   taille dans les deux cas, et reste lisible si l'illustration tombe sur son
   emoji de repli. */
.res-icon, .inline-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: -0.16em;
    flex-shrink: 0;
    line-height: 1;
}

.res-icon { width: 30px; height: 30px; font-size: 1.4rem; }
.inline-ico { width: 1.05em; height: 1.05em; font-size: 0.95em; }
/* Un symbole vectoriel reste net minuscule ; une illustration peinte, non :
   on lui laisse un peu plus de place. */
.inline-ico:has(.ui-art) { width: 1.7em; height: 1.7em; }

/* Une illustration d'interface remplit son porte-icône sans le déformer. */
.ui-art { display: block; width: 100%; height: 100%; object-fit: contain; }

.gold { color: var(--gold); }
.energy { color: var(--aqua); }
.hp { color: var(--blood); }
.skull { color: var(--text-soft); }
.shard { color: var(--arcane-lit); }

/* --- Défilement --- */
* { scrollbar-width: thin; scrollbar-color: var(--stone-500) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb {
    background: var(--stone-500);
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
*::-webkit-scrollbar-track { background: transparent; }

/* ======================= 3. SURFACES ======================= */

/*
 * PANNEAU.
 *
 * Verre fumé, filet d'or d'un pixel, et quatre équerres dorées dessinées en
 * dégradés dans un calque au-dessus du bord. C'est le seul cadre du jeu :
 * les anciens cadres de pierre peints, tous différents, faisaient de chaque
 * écran un assemblage. Un seul langage, discret, et l'œil va au contenu.
 */
.hub-panel, .modal {
    position: relative;
    background: var(--pane);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--lift), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.hub-panel::before, .modal::before {
    --c: var(--gold);
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
    opacity: 0.8;
    background:
        linear-gradient(var(--c), var(--c)) top left / 16px 1px no-repeat,
        linear-gradient(var(--c), var(--c)) top left / 1px 16px no-repeat,
        linear-gradient(var(--c), var(--c)) top right / 16px 1px no-repeat,
        linear-gradient(var(--c), var(--c)) top right / 1px 16px no-repeat,
        linear-gradient(var(--c), var(--c)) bottom left / 16px 1px no-repeat,
        linear-gradient(var(--c), var(--c)) bottom left / 1px 16px no-repeat,
        linear-gradient(var(--c), var(--c)) bottom right / 16px 1px no-repeat,
        linear-gradient(var(--c), var(--c)) bottom right / 1px 16px no-repeat;
}

.hub-panel > *, .modal > * { position: relative; z-index: 1; }

/*
 * EN-TÊTE DE PANNEAU : un intitulé en capitales, à gauche, prolongé d'un
 * filet d'or qui s'éteint vers la droite. Plus de bandeau plein.
 */
.panel-header-bg {
    position: relative;
    height: 46px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 18px;
    border-bottom: 1px solid var(--line-soft);
}

.panel-header-bg::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--line-strong), transparent);
}

.panel-header-bg h2 {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--gold-lit);
    white-space: nowrap;
}

.panel-header-bg h2 small { font-family: var(--font-ui); letter-spacing: 0.04em; color: var(--text-dim); text-transform: none; }

.small-header { height: 38px; }
.small-header h2 { font-size: 0.66rem; }

/* Titre d'un écran de préparation, à gauche : ce qu'on regarde et pourquoi. */
.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
    flex-shrink: 0;
}

.page-kicker {
    margin: 0 0 4px;
    font-family: var(--font-lore);
    font-style: italic;
    font-weight: 500;
    font-size: 1.05rem;
    color: var(--text-soft);
}

.main-title {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text);
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
}

/* ======================= 4. TRANSITIONS D'ÉCRAN =======================
   Chaque écran entre en fondu, avec un léger glissement : on change de lieu,
   on ne recharge pas une page. Seules l'opacité et la transformation sont
   animées — la carte graphique les joue sans repeindre. */
.screen:not(.hidden) { animation: screenIn 0.32s var(--ease-out) both; }

@keyframes screenIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .screen:not(.hidden) { animation: none; }
}