/* ALANDYS · HABILLAGE « CARNET D'AVENTURE » : hub, menus et contrôles
   Le même langage que les écrans de partie (hud.css, « Écrans de partie ») : nuit grainée, filets et
   clous dorés, médaillons cerclés d'or, rubans, titres en Fraunces. L'or fait les cadres ; la couleur de
   la lignée (--hl-rgb, hub.css) reste celle des surbrillances. Chargé après hub.css, hud.css et
   landing.css : ses règles passent devant, sans toucher à ces fichiers. */

:root {
    --gold-rgb: 255, 214, 140;
    --gold: #ffd98a;
}

/* Focus au clavier : un contour doré (et non plus la couleur de la lignée) */
button:focus-visible {
    outline-color: rgba(var(--gold-rgb), 0.85);
}

/* ---------- Contrôles : curseurs, interrupteurs, choix (hub et menu pause) ---------- */

/* Curseur : une rainure sombre cerclée d'or, remplie d'or jusqu'au médaillon (--fill, range-fill.js) */
:is(.hub, #screen-pause) input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 22px;
    margin: 0;
    background: transparent;
    cursor: pointer;
}

:is(.hub, #screen-pause) input[type="range"]::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 999px;
    border: 1px solid rgba(var(--gold-rgb), 0.3);
    background:
        linear-gradient(90deg, #9a6a26, #f0b64a 70%, #ffe29a) 0 0 / var(--fill, 50%) 100% no-repeat,
        linear-gradient(180deg, #060a14, #111a2e);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7);
}

:is(.hub, #screen-pause) input[type="range"]::-moz-range-track {
    height: 8px;
    border-radius: 999px;
    border: 1px solid rgba(var(--gold-rgb), 0.3);
    background: linear-gradient(180deg, #060a14, #111a2e);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7);
}

:is(.hub, #screen-pause) input[type="range"]::-moz-range-progress {
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, #9a6a26, #f0b64a 70%, #ffe29a);
}

:is(.hub, #screen-pause) input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    margin-top: -7px;
    border-radius: 50%;
    border: 2px solid #0a1120;
    background: radial-gradient(circle at 38% 32%, #fff4cc, #f0b64a 55%, #9a6420);
    box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.75), 0 2px 8px rgba(0, 0, 0, 0.6), 0 0 12px -2px rgba(255, 196, 90, 0.7);
    transition: box-shadow 0.15s;
}

:is(.hub, #screen-pause) input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #0a1120;
    background: radial-gradient(circle at 38% 32%, #fff4cc, #f0b64a 55%, #9a6420);
    box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.75), 0 2px 8px rgba(0, 0, 0, 0.6), 0 0 12px -2px rgba(255, 196, 90, 0.7);
}

:is(.hub, #screen-pause) input[type="range"]:focus-visible {
    outline: none;
}

:is(.hub, #screen-pause) input[type="range"]:hover::-webkit-slider-thumb,
:is(.hub, #screen-pause) input[type="range"]:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.9), 0 0 0 5px rgba(var(--gold-rgb), 0.18), 0 0 16px 0 rgba(255, 196, 90, 0.8);
}

:is(.hub, #screen-pause) input[type="range"]:hover::-moz-range-thumb,
:is(.hub, #screen-pause) input[type="range"]:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.9), 0 0 0 5px rgba(var(--gold-rgb), 0.18), 0 0 16px 0 rgba(255, 196, 90, 0.8);
}

/* Interrupteur (case à cocher d'un .toggle) : une glissière, son bouton d'or passe à droite, la glissière
   se dore. Le même dessin dans les deux états : le bouton glisse au lieu de sauter */
:is(.hub, #screen-pause) .toggle input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    flex: none;
    width: 40px;
    height: 22px;
    margin: 0;
    border-radius: 999px;
    border: 1px solid rgba(var(--gold-rgb), 0.3);
    background: radial-gradient(circle at 42% 38%, #fff4cc 0 1.5px, #e6c07a 4.5px, #8a6630 7px, transparent 7.6px) 2px 50% / 18px 18px no-repeat;
    background-color: #0a1120;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.75);
    cursor: pointer;
    transition: background-position 0.2s ease, background-color 0.2s, border-color 0.2s;
}

:is(.hub, #screen-pause) .toggle input[type="checkbox"]:checked {
    border-color: rgba(var(--gold-rgb), 0.8);
    background-position: calc(100% - 2px) 50%;
    background-color: rgba(190, 128, 44, 0.7);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 12px -4px rgba(255, 196, 90, 0.8);
}

:is(.hub, #screen-pause) .toggle input[type="checkbox"]:focus-visible {
    outline: 2px solid rgba(var(--gold-rgb), 0.6);
    outline-offset: 2px;
}

/* Choix (segmented) : une rainure dorée, le choix actif en relief doré */
:is(.hub, #screen-pause) .segmented {
    gap: 3px;
    padding: 3px;
    border-radius: 12px;
    border: 1px solid rgba(var(--gold-rgb), 0.2);
    background: linear-gradient(180deg, #060a14, #0f1729);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}

:is(.hub, #screen-pause) .segmented button {
    border: 1px solid transparent;
    border-radius: 9px;
    color: rgba(236, 226, 205, 0.6);
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

:is(.hub, #screen-pause) .segmented button:hover {
    color: #f1e3c4;
}

:is(.hub, #screen-pause) .segmented button.active {
    color: #ffe7b0;
    border-color: rgba(var(--gold-rgb), 0.55);
    background: linear-gradient(180deg, rgba(255, 196, 90, 0.24), rgba(255, 196, 90, 0.07));
    box-shadow: 0 0 14px -6px rgba(255, 196, 90, 0.8);
}

/* ================================================================== */
/* Hub (sanctuaire) : même cadre que les écrans de partie               */
/* ================================================================== */

/* Filets du hub : dorés au lieu de bleutés (toutes les tuiles, puces et séparateurs qui les utilisent) */
.hub {
    --stroke: rgba(255, 214, 140, 0.13);
    --stroke-strong: rgba(255, 214, 140, 0.3);
    --glass: rgba(10, 16, 32, 0.8);
}

.hub .pages,
.hub-nav {
    scrollbar-color: rgba(var(--gold-rgb), 0.32) transparent;
}

.hub .pages::-webkit-scrollbar,
.hub-nav::-webkit-scrollbar { width: 6px; }

.hub .pages::-webkit-scrollbar-thumb,
.hub-nav::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: rgba(var(--gold-rgb), 0.32);
}

/* ---------- Colonne de gauche : menu en médaillons ---------- */

.hub-side {
    border-right-color: rgba(var(--gold-rgb), 0.16);
    background:
        radial-gradient(rgba(255, 238, 205, 0.03) 1px, transparent 1.4px) 0 0 / 13px 13px,
        linear-gradient(180deg, rgba(14, 20, 40, 0.94), rgba(6, 10, 22, 0.9));
}

.nav-item {
    border-radius: 14px 14px 12px 12px;
}

.nav-item:hover:not(:disabled) {
    background: rgba(var(--gold-rgb), 0.05);
}

.nav-item.active {
    border-color: rgba(var(--gold-rgb), 0.38);
    background:
        linear-gradient(100deg, rgba(var(--hl-rgb), 0.18), rgba(var(--hl-rgb), 0.04) 70%),
        linear-gradient(180deg, rgba(20, 28, 50, 0.8), rgba(10, 16, 30, 0.8));
    box-shadow: inset 0 0 0 1px rgba(10, 16, 30, 0.9), inset 0 0 0 2px rgba(var(--gold-rgb), 0.08);
}

.nav-icon {
    border-radius: 50%;
    font-family: 'Segoe UI Symbol', 'Noto Sans Symbols 2', sans-serif;
    color: rgba(var(--hl-rgb), 0.95);
    background: radial-gradient(circle at 50% 38%, rgba(var(--hl-rgb), 0.2), #0c1428 72%);
    border: 1.5px solid rgba(var(--gold-rgb), 0.32);
    box-shadow: 0 0 0 2px rgba(4, 8, 16, 0.9);
}

.nav-item.active .nav-icon {
    color: #fff8ea;
    background: radial-gradient(circle at 50% 38%, rgba(var(--hl-rgb), 0.75), rgba(var(--hl-rgb), 0.25) 72%);
    border-color: #ffd98a;
    box-shadow: 0 0 0 2px rgba(4, 8, 16, 0.9), 0 0 0 3px rgba(var(--gold-rgb), 0.35), 0 0 18px -4px rgba(var(--hl-rgb), 0.95);
}

.nav-text b {
    font-family: var(--serif);
    font-weight: 600;
    letter-spacing: 0;
}

.nav-badge {
    box-shadow: 0 0 0 2px #0a1120, 0 0 0 3px rgba(var(--gold-rgb), 0.35), 0 0 12px rgba(255, 201, 77, 0.55);
}

.side-foot {
    border-top-color: rgba(var(--gold-rgb), 0.14);
}

/* ---------- Scène du compagnon : cadre doré par-dessus la 3D ---------- */

.stage-card {
    border-color: rgba(var(--gold-rgb), 0.24);
}

.stage-card::after {
    --stud: radial-gradient(circle, rgba(255, 214, 130, 0.85) 1.7px, rgba(255, 214, 130, 0.2) 2.7px, transparent 3.3px);
    content: '';
    position: absolute;
    inset: 7px;
    z-index: 3;
    border-radius: 20px;
    border: 1px solid rgba(var(--gold-rgb), 0.12);
    pointer-events: none;
    background:
        var(--stud) left 3px top 3px / 12px 12px no-repeat,
        var(--stud) right 3px top 3px / 12px 12px no-repeat,
        var(--stud) left 3px bottom 3px / 12px 12px no-repeat,
        var(--stud) right 3px bottom 3px / 12px 12px no-repeat;
}

/* ---------- Fiches (colonne de droite) : nuit grainée, filet intérieur et clous d'angle ---------- */

.hub .page {
    border-color: rgba(var(--gold-rgb), 0.2);
    background:
        radial-gradient(120% 50% at 50% 0%, rgba(var(--hl-rgb), 0.06), transparent 70%),
        radial-gradient(rgba(255, 238, 205, 0.035) 1px, transparent 1.4px) 0 0 / 13px 13px,
        linear-gradient(180deg, rgba(20, 29, 52, 0.94), rgba(10, 16, 31, 0.95));
    box-shadow: 0 20px 44px -30px rgba(0, 0, 0, 0.95);
}

.hub .page-chronicle {
    background:
        radial-gradient(420px 220px at 100% 0%, rgba(var(--hl-rgb), 0.16), transparent 70%),
        radial-gradient(rgba(255, 238, 205, 0.035) 1px, transparent 1.4px) 0 0 / 13px 13px,
        linear-gradient(180deg, rgba(20, 29, 52, 0.94), rgba(10, 16, 31, 0.95));
}

.hub .page::before {
    --stud: radial-gradient(circle, rgba(255, 214, 130, 0.8) 1.5px, rgba(255, 214, 130, 0.18) 2.5px, transparent 3.1px);
    content: '';
    position: absolute;
    inset: 5px;
    border-radius: 15px;
    border: 1px solid rgba(var(--gold-rgb), 0.07);
    pointer-events: none;
    background:
        var(--stud) left 2px top 2px / 10px 10px no-repeat,
        var(--stud) right 2px top 2px / 10px 10px no-repeat,
        var(--stud) left 2px bottom 2px / 10px 10px no-repeat,
        var(--stud) right 2px bottom 2px / 10px 10px no-repeat;
}

/* Intertitre : en or, un losange de la couleur de la lignée, un filet doré sous l'en-tête */
.hub .page-head {
    padding-bottom: 9px;
    background: linear-gradient(90deg, rgba(var(--gold-rgb), 0.32), rgba(var(--gold-rgb), 0.06) 70%, transparent) left bottom / 100% 1px no-repeat;
}

.hub .page-kicker {
    color: #f3d9a0;
}

.hub .page-kicker::before {
    content: '◆';
    width: auto;
    height: auto;
    background: none;
    opacity: 1;
    font-size: 8px;
    color: rgb(var(--hl-rgb));
    text-shadow: 0 0 8px rgba(var(--hl-rgb), 0.85);
}

/* Tuiles de faits (carnet d'expédition, fiche en expédition…) */
.hub .fact {
    background: linear-gradient(180deg, rgba(24, 32, 56, 0.55), rgba(10, 16, 30, 0.6));
}

.hub .fact dd {
    font-family: var(--serif);
    font-weight: 600;
}

/* Boutons secondaires : cerclés d'or sur la nuit, comme en partie */
.hub .btn-ghost {
    border: 1px solid rgba(var(--gold-rgb), 0.34);
    color: #f1e3c4;
    background: linear-gradient(180deg, rgba(40, 46, 70, 0.55), rgba(14, 20, 36, 0.7));
    box-shadow: inset 0 1px 0 rgba(255, 230, 180, 0.08);
}

.hub .btn-ghost:hover:not(:disabled) {
    color: #fff6e0;
    border-color: rgba(var(--gold-rgb), 0.7);
    background: linear-gradient(180deg, rgba(58, 60, 84, 0.65), rgba(20, 26, 44, 0.78));
    box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.16), 0 8px 22px -12px rgba(255, 196, 90, 0.5);
}

.hub .btn-ghost.danger {
    color: #ff9aa8;
    border-color: rgba(255, 110, 130, 0.42);
}

/* Réglages : libellés et champ du pseudo */
.hub .settings .field > span {
    color: rgba(236, 226, 205, 0.78);
}

.hub .toggle {
    gap: 10px;
    color: rgba(236, 226, 205, 0.78);
}

.hub input:not([type]),
.hub input[type="text"],
.hub input[type="search"],
.hub select {
    border-color: rgba(var(--gold-rgb), 0.22);
}

.hub input:not([type]):focus,
.hub input[type="text"]:focus,
.hub input[type="search"]:focus,
.hub select:focus {
    border-color: rgba(var(--gold-rgb), 0.6);
    box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.12);
    outline: none;
}

/* Réglages : l'espacement vient de la liste (les interrupteurs n'ajoutent pas leur marge) */
.hub .settings .toggle {
    margin-bottom: 0;
}

/* ================================================================== */
/* Fenêtres, clavier à l'écran, écran d'accueil, arrivée sur une île    */
/* ================================================================== */

/* Fenêtre de confirmation (shared/dialog.js) : le cadre de la pause, titre souligné d'or */
.dialog-screen {
    background: radial-gradient(ellipse at 50% 38%, rgba(10, 18, 36, 0.78), rgba(2, 5, 11, 0.94) 72%);
}

.dialog-card {
    position: relative;
    border-radius: 24px;
    border: 1px solid rgba(var(--gold-rgb), 0.32);
    background:
        radial-gradient(120% 40% at 50% 0%, rgba(255, 200, 110, 0.08), transparent 70%),
        radial-gradient(rgba(255, 238, 205, 0.035) 1px, transparent 1.4px) 0 0 / 13px 13px,
        linear-gradient(180deg, #151e36 0%, #0c1426 60%, #0a1020 100%);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.95);
}

.dialog-card::before {
    content: '';
    position: absolute;
    inset: 7px;
    border-radius: 18px;
    border: 1px solid rgba(var(--gold-rgb), 0.12);
    pointer-events: none;
}

.dialog-card::after {
    --stud: radial-gradient(circle, rgba(255, 214, 130, 0.9) 1.8px, rgba(255, 214, 130, 0.22) 2.8px, transparent 3.4px);
    content: '';
    position: absolute;
    inset: 10px;
    pointer-events: none;
    background:
        var(--stud) left top / 12px 12px no-repeat,
        var(--stud) right top / 12px 12px no-repeat,
        var(--stud) left bottom / 12px 12px no-repeat,
        var(--stud) right bottom / 12px 12px no-repeat;
}

.dialog-card h2 {
    font-family: var(--display);
    font-weight: 400;
    letter-spacing: 0.02em;
    color: #fff4df;
}

.dialog-card h2::after {
    content: '◆';
    display: block;
    width: 150px;
    margin: 6px auto 0;
    font: 9px/10px 'Segoe UI Symbol', 'Noto Sans Symbols 2', sans-serif;
    color: rgba(255, 214, 130, 0.9);
    text-shadow: 0 0 8px rgba(255, 196, 90, 0.7);
    background: linear-gradient(90deg, transparent, rgba(255, 214, 130, 0.7) 44%, transparent 44%, transparent 56%, rgba(255, 214, 130, 0.7) 56%, transparent) center / 100% 1px no-repeat;
}

.dialog-card p {
    font-family: var(--serif);
    font-size: 15px;
    line-height: 1.5;
    color: rgba(226, 232, 245, 0.8);
}

.dialog-card .btn-primary {
    font-family: var(--display);
    font-weight: 400;
    letter-spacing: 0.04em;
    color: #2b1206;
    border: 1px solid rgba(255, 244, 200, 0.55);
    background: linear-gradient(180deg, #ffe46c 0%, #ffb53d 55%, #f07a2e 100%);
    box-shadow: 0 12px 30px -12px rgba(255, 140, 60, 0.9), inset 0 -3px 0 rgba(140, 40, 10, 0.35);
}

.dialog-card .btn-ghost {
    border: 1px solid rgba(var(--gold-rgb), 0.34);
    color: #f1e3c4;
    background: linear-gradient(180deg, rgba(40, 46, 70, 0.6), rgba(14, 20, 36, 0.75));
}

.dialog-card .btn-ghost:hover {
    color: #fff6e0;
    border-color: rgba(var(--gold-rgb), 0.7);
}

.dialog-card .btn-ghost.danger {
    color: #ff9f8f;
    border-color: rgba(255, 120, 100, 0.5);
}

/* Clavier à l'écran et invite de la manette : la nuit grainée, des touches cerclées d'or */
.pad-keyboard,
.pad-toast {
    border-color: rgba(var(--gold-rgb), 0.38);
    background:
        radial-gradient(rgba(255, 238, 205, 0.035) 1px, transparent 1.4px) 0 0 / 13px 13px,
        linear-gradient(180deg, rgba(20, 29, 52, 0.97), rgba(10, 16, 31, 0.98));
}

.vk-key {
    border-color: rgba(var(--gold-rgb), 0.2);
    background: linear-gradient(180deg, rgba(34, 44, 72, 0.7), rgba(14, 20, 36, 0.8));
}

.vk-key:hover {
    border-color: rgba(var(--gold-rgb), 0.45);
    background: linear-gradient(180deg, rgba(44, 54, 84, 0.8), rgba(18, 24, 42, 0.85));
}

.vk-text {
    border-color: rgba(var(--gold-rgb), 0.24);
}

/* Écran d'accueil : un filet doré et son losange entre le titre et la devise */
.landing-tagline::before {
    content: '◆';
    display: block;
    width: 200px;
    margin: 0 0 12px 2px;
    font: 9px/10px 'Segoe UI Symbol', 'Noto Sans Symbols 2', sans-serif;
    font-style: normal;
    color: rgba(255, 214, 130, 0.9);
    text-shadow: 0 0 8px rgba(255, 196, 90, 0.7);
    background: linear-gradient(90deg, transparent 0 13px, rgba(255, 214, 130, 0.7) 13px, rgba(255, 214, 130, 0.25) 70%, transparent) center / 100% 1px no-repeat;
}

/* Arrivée sur une île et évolution : le même filet sous le nom */
.island-name::after,
.evolve-name::after {
    content: '◆';
    display: block;
    width: 180px;
    margin: 8px auto 2px;
    font: 9px/10px 'Segoe UI Symbol', 'Noto Sans Symbols 2', sans-serif;
    letter-spacing: 0;
    color: rgba(255, 214, 130, 0.9);
    text-shadow: 0 0 8px rgba(255, 196, 90, 0.7);
    background: linear-gradient(90deg, transparent, rgba(255, 214, 130, 0.7) 44%, transparent 44%, transparent 56%, rgba(255, 214, 130, 0.7) 56%, transparent) center / 100% 1px no-repeat;
}