/* ======================= ÉCRAN TITRE =======================
   L'arche runique en plein écran, le logo posé au-dessus, un menu court.
   Une seule entrée s'allume en or — reprendre la partie ; les autres sont
   du texte, qui s'éclaire au survol. */

.title-stage {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ink);
    --px: 0;
    --py: 0;
}

/* Mouvement de caméra sur deux niveaux : le conteneur porte la parallaxe
   (souris), l'enfant porte le panoramique animé. Cumuler les deux sur le
   même nœud ne marche pas — l'animation écrase la valeur statique. */
.title-bg {
    position: absolute;
    inset: -6%;
    transform: translate3d(calc(var(--px) * -18px), calc(var(--py) * -18px), 0);
    will-change: transform;
}

.title-bg-inner {
    position: absolute;
    inset: 0;
    background: url('../assets/title_bg.webp') no-repeat center center;
    background-size: cover;
    animation: kenBurns 46s ease-in-out infinite alternate;
    will-change: transform;
}

.title-haze {
    position: absolute;
    inset: -20%;
    pointer-events: none;
    transform: translate3d(calc(var(--px) * -34px), calc(var(--py) * -34px), 0);
    will-change: transform;
}

.title-haze-inner {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(closest-side at 25% 40%, rgba(123, 92, 255, 0.16), transparent),
        radial-gradient(closest-side at 75% 60%, rgba(201, 171, 69, 0.13), transparent),
        radial-gradient(closest-side at 55% 30%, rgba(194, 232, 0, 0.12), transparent);
    filter: blur(38px);
    animation: drift 34s ease-in-out infinite alternate;
    will-change: transform;
}

.title-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 42%, transparent 25%, rgba(0, 0, 0, 0.55) 72%, rgba(0, 0, 0, 0.92) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent 28%, transparent 52%, rgba(8, 8, 5, 0.9));
}

#ember-canvas { position: absolute; inset: 0; pointer-events: none; }

.title-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 54px;
    text-align: center;
    padding: 20px;
    margin-top: -4vh;
    transform: translate3d(calc(var(--px) * 10px), calc(var(--py) * 10px), 0);
    animation: fadeInSoft 1.1s ease both;
    will-change: transform;
}

/* Un voile d'encre derrière le texte : le logo et le menu restent lisibles
   devant les pierres claires de l'arche, sans éteindre l'illustration. */
.title-content::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 150%;
    height: 125%;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at 50% 50%, rgba(9, 9, 6, 0.72) 0%, rgba(9, 9, 6, 0.45) 45%, transparent 72%);
    pointer-events: none;
    z-index: -1;
}

.game-logo { display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* L'œuf de Dofus au-dessus du nom, comme un blason. */
.logo-egg { display: inline-flex; width: clamp(64px, 9vw, 104px); aspect-ratio: 1; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 24px rgba(194, 232, 0, 0.35)); }
.logo-egg .ui-art { width: 100%; height: 100%; object-fit: contain; }

/* « L'épopée de », en petit au-dessus du nom. */
.logo-pre {
    margin-bottom: -0.35em;
    font-family: var(--font-title);
    font-size: clamp(1.1rem, 2.6vw, 1.9rem);
    color: var(--gold-lit);
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.9), 0 0 18px rgba(0, 0, 0, 0.8);
}

/* Le nom, à la manière du logo de Dofus : Rowdies, jaune-vert, cerné. */
.logo-main {
    font-family: var(--font-title);
    font-size: clamp(3.4rem, 10vw, 7.6rem);
    line-height: 0.95;
    letter-spacing: 0.01em;
    background: linear-gradient(180deg, #f9ffc8 8%, var(--lime-lit) 40%, var(--lime) 62%, #5d7000 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 3px 0 rgba(20, 24, 0, 0.95)) drop-shadow(0 0 2px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 40px rgba(194, 232, 0, 0.3));
}

.logo-rule {
    width: min(420px, 72vw);
    height: 12px;
    background:
        linear-gradient(90deg, transparent, var(--lime), transparent) center / 100% 1px no-repeat,
        linear-gradient(135deg, transparent 45%, var(--lime-lit) 45% 55%, transparent 55%) center / 12px 12px no-repeat;
}

/* La bêta, sous le nom du jeu : une pastille sobre, pas un second titre. */
.logo-beta {
    display: inline-block;
    margin-top: 10px;
    padding: 3px 12px 4px;
    border: 1px solid rgba(194, 232, 0, 0.55);
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: clamp(0.62rem, 1.4vw, 0.8rem);
    font-weight: 700;
    letter-spacing: 0.28em;
    text-indent: 0.28em;
    text-transform: uppercase;
    color: var(--lime);
    background: rgba(12, 12, 9, 0.55);
    text-shadow: none;
}
.logo-sub {
    font-family: var(--font-display);
    font-size: clamp(0.8rem, 2.2vw, 1.4rem);
    letter-spacing: 0.55em;
    text-indent: 0.55em;
    text-transform: uppercase;
    color: #d8dbe6;
    text-shadow: 0 2px 14px #000, 0 0 26px rgba(194, 232, 0, 0.35);
}

/* ---------- Menu ---------- */
.menu-buttons-list { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.menu-btn-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 14px; }

/* Une entrée de menu : du texte en capitales, deux losanges qui s'allument au survol. */
.menu-btn {
    position: relative;
    min-width: min(300px, 82vw);
    padding: 12px 34px;
    border: 0;
    background: none;
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #d5d8e2;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
    cursor: pointer;
    transition: color var(--speed), letter-spacing 0.3s var(--ease-out);
}

.menu-btn::before, .menu-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 7px;
    height: 7px;
    background: var(--gold-lit);
    box-shadow: 0 0 10px var(--gold);
    opacity: 0;
    transition: opacity var(--speed), transform var(--speed);
}

.menu-btn::before { left: 12px; transform: translateY(-50%) rotate(45deg) scale(0.4); }
.menu-btn::after { right: 12px; transform: translateY(-50%) rotate(45deg) scale(0.4); }

.menu-btn:hover:not(:disabled) { color: var(--gold-lit); letter-spacing: 0.28em; }
.menu-btn:hover:not(:disabled)::before, .menu-btn:hover:not(:disabled)::after { opacity: 1; transform: translateY(-50%) rotate(45deg) scale(1); }

/* Reprendre : l'aplat doré, comme l'action principale de chaque écran. */
.menu-btn.primary {
    min-width: min(320px, 84vw);
    padding: 17px 40px;
    border: 1px solid #f7e2ae;
    border-radius: var(--radius);
    background: linear-gradient(180deg, #f5da9a 0%, #dfb05a 46%, #b9842f 100%);
    color: #1d1407;
    text-shadow: 0 1px 0 rgba(255, 240, 205, 0.55);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7), 0 14px 34px rgba(201, 171, 69, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: transform var(--speed), box-shadow var(--speed), filter var(--speed);
}

.menu-btn.primary::before, .menu-btn.primary::after { display: none; }
.menu-btn.primary:hover:not(:disabled) { color: #1d1407; letter-spacing: 0.24em; transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7), 0 18px 40px rgba(201, 171, 69, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
.menu-btn:disabled { opacity: 0.36; cursor: not-allowed; filter: grayscale(1); }

/* Pas encore de sauvegarde : « Continuer » s'efface, et l'or passe à
   « Nouvelle partie », qui est alors le seul vrai départ. */
.menu-btn-wrap:has(#btn-continue-game:disabled) { display: none; }

.menu-buttons-list:has(#btn-continue-game:disabled) #btn-new-game {
    min-width: min(320px, 84vw);
    margin-bottom: 14px;
    padding: 17px 40px;
    border: 1px solid #f7e2ae;
    border-radius: var(--radius);
    background: linear-gradient(180deg, #f5da9a 0%, #dfb05a 46%, #b9842f 100%);
    color: #1d1407;
    text-shadow: 0 1px 0 rgba(255, 240, 205, 0.55);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7), 0 14px 34px rgba(201, 171, 69, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    /* L'état change au chargement : une couleur animée resterait à mi-chemin. */
    transition: transform var(--speed), filter var(--speed);
}

.menu-buttons-list:has(#btn-continue-game:disabled) #btn-new-game::before,
.menu-buttons-list:has(#btn-continue-game:disabled) #btn-new-game::after { display: none; }
.menu-buttons-list:has(#btn-continue-game:disabled) #btn-new-game:hover { color: #1d1407; letter-spacing: 0.24em; filter: brightness(1.05); }

.menu-hint {
    margin: 0;
    font-family: var(--font-lore);
    font-style: italic;
    font-size: 1rem;
    color: var(--text-soft);
    text-shadow: 0 1px 8px #000;
}

/* ---------- Pied de page ---------- */
.title-foot {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 20px;
    z-index: 3;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    pointer-events: none;
}

.version {
    margin: 0;
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.title-tip { margin: 0; font-family: var(--font-lore); font-style: italic; font-size: 1.02rem; color: var(--text-soft); opacity: 0.85; }
.title-rights { margin: 0; max-width: 34ch; font-size: 0.7rem; line-height: 1.35; text-align: right; color: var(--text-dim); }

@media (max-width: 700px) {
    .title-foot { flex-direction: column; align-items: center; text-align: center; gap: 4px; }
    .title-rights { text-align: center; max-width: none; }
    .logo-sub { letter-spacing: 0.3em; text-indent: 0.3em; }
}