:root {
    --ch-bg-deep: #0f0a06;
    --ch-bg-mid: #1a0f0a;
    --ch-bg-panel: #1a120e;
    --ch-bg-elevated: #2c2016;
    --ch-bg-surface: #1f1510;
    /*
     * Or impérial Chōhan. Le RGB tuple permet d'appliquer n'importe quelle
     * opacité via `rgba(var(--ch-gold-rgb), 0.4)` — pas besoin d'un token
     * dédié par alpha. Les alias sémantiques ci-dessous couvrent les usages
     * fréquents (border, glow, focus).
     */
    --ch-gold-rgb: 201, 162, 39;
    --ch-gold: rgb(var(--ch-gold-rgb));
    --ch-gold-light: #e8d5b5;
    --ch-gold-pale: #f5e6c8;
    --ch-gold-border: rgba(var(--ch-gold-rgb), 0.35);
    --ch-gold-border-hover: rgba(var(--ch-gold-rgb), 0.55);
    --ch-gold-glow: rgba(var(--ch-gold-rgb), 0.25);
    --ch-text: #e5d4b8;
    --ch-text-heading: #e8d5b5;
    --ch-text-muted: #8b7355;
    --ch-text-subtle: #a89880;
    --ch-text-bright: #f5e6c8;
    --ch-scroll-thumb: #5c3a2a;
    --ch-scroll-thumb-dark: #3d2518;
    --ch-scroll-track: transparent;
    --ch-font-sans: 'Noto Sans JP', 'Hiragino Sans', 'Meiryo', sans-serif;
    --ch-font-serif: 'Noto Serif JP', 'Noto Sans JP', 'Meiryo', serif;
    color-scheme: dark;
}

/* --- iOS / mobile : anti-bounce, anti-zoom --- */
html {
    overscroll-behavior: none;
}
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    background: #000;
}
* { box-sizing: border-box; }

/* === Japanese text breathing room ============================================
 * Les kana / kanji apparaissent très serrés sans tracking explicite (les
 * fontes Noto JP n'en ajoutent aucun par défaut). On applique un léger
 * letter-spacing global au body — ~0.03em ≈ 0.5 px à 16 px de font, presque
 * invisible sur les Latin/digits mais notable sur les kanji denses.
 * Inherited par toutes les modales, labels, boutons UI dans toutes les salles.
 * Les éléments tabulaires / numériques peuvent override avec
 * `letter-spacing: normal;` si nécessaire. */
body {
    letter-spacing: 0.03em;
}

/* Modales règles (`#regles-*-modal`) : fondu + entrée depuis la droite */
@keyframes ch-regles-box-enter {
    0% {
        opacity: 0;
        transform: translateX(36px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

[id^='regles-'][id$='-modal'].is-open .regles-box {
    animation: ch-regles-box-enter 0.38s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
    [id^='regles-'][id$='-modal'].is-open .regles-box {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* Scroll des modales règles (même look que `.chohan-ip-body`, instance picker). */
[id^='regles-'][id$='-modal'] .regles-body {
    scrollbar-width: thin;
    scrollbar-color: rgba(165, 122, 55, 0.85) rgba(0, 0, 0, 0.3);
}
[id^='regles-'][id$='-modal'] .regles-body::-webkit-scrollbar {
    width: 8px;
}
[id^='regles-'][id$='-modal'] .regles-body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
}
[id^='regles-'][id$='-modal'] .regles-body::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(201, 162, 39, 0.45), rgba(140, 100, 30, 0.45));
    border-radius: 4px;
}

/* ============================================================
 * Modale de chargement partagée par toutes les salles + entrance.
 * La vidéo de fond (assets/maps/loading.mp4) est injectée par
 * components/loading-screen.js — lecture unique, figée sur la
 * dernière frame si le chargement se prolonge.
 * ============================================================ */
#loading-screen {
    position: fixed;
    inset: 0;
    background: #000;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    /* Borne basse 56px : sur écrans très courts (paysage mobile ~320px),
     * 22vh = ~70px reste OK ; sans borne haute, le viewport desktop XL pousse
     * la barre trop bas. clamp(56, 22vh, 200) garantit un placement lisible. */
    padding-bottom: clamp(56px, 22vh, 200px);
    gap: 24px;
    font-family: 'Noto Sans JP', sans-serif;
    z-index: 100;
    transition: opacity 0.4s ease-out;
}
/* Paysage mobile : barre recentrée verticalement (le bas devient illisible
 * sur 320px de haut avec padding-bottom + barre + gap). */
@media (orientation: landscape) and (max-height: 500px) {
    #loading-screen {
        justify-content: center;
        padding-bottom: 0;
        gap: 14px;
    }
}
#loading-screen.hidden {
    opacity: 0;
    pointer-events: none;
    display: none !important;
}
#loading-screen .loading-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}
#loading-screen .loading-bar-wrap {
    position: relative;
    z-index: 1;
    /* Barre plus longue sur mobile : 80vw = 256px sur 320px, plus visible. */
    width: min(280px, 80vw);
    height: 6px;
    background: rgba(201, 162, 39, 0.2);
    border-radius: 3px;
    overflow: hidden;
}
#loading-screen .loading-bar {
    position: relative;
    z-index: 1;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #c9a227, #e8d5b5);
    border-radius: 3px;
    transition: width 0.15s ease-out;
}