/* ALANDYS · PREMIERS PAS : l'objectif de chaque étape dans le HUD (tutorial.js, barre d'événement au thème « tuto »),
   la visite du hub (hub.js, startTour) et l'aide de chaque menu (bouton ?, startGuide) : un onglet ou un bloc mis en
   lumière, une carte dorée à côté (ou en bas de l'écran faute de place) qui dit ce qu'on y fait. Le reste du hub est
   assombri. */

/* Objectif du tuto : une consigne entière, sur deux ou trois lignes, en doré (la barre d'événement coupe à une ligne) */
#event-bar.theme-tuto {
    --ev: 255, 214, 140;
    width: min(460px, 88vw);
}

#event-bar.theme-tuto .event-cast {
    height: auto;
    min-height: 18px;
}

#event-bar.theme-tuto #event-cast-name {
    position: relative;
    inset: auto;
    display: block;
    padding: 5px 12px;
    font-size: 13px;
    line-height: 1.35;
    text-align: center;
}

#event-bar.theme-tuto.casting .event-head {
    animation: none;
}

.tour {
    position: fixed;
    inset: 0;
    z-index: 60;
    pointer-events: none;
}

/* L'onglet en lumière : un cadre doré, et tout autour, l'ombre qui couvre le hub */
.tour-spot {
    position: fixed;
    border-radius: 14px;
    border: 2px solid rgba(var(--gold-rgb, 255, 214, 140), 0.9);
    box-shadow: 0 0 0 9999px rgba(3, 6, 14, 0.62), 0 0 24px rgba(var(--gold-rgb, 255, 214, 140), 0.45);
    transition: left 0.25s ease, top 0.25s ease, width 0.25s ease, height 0.25s ease;
}

/* Rien à mettre en lumière : l'ombre seule */
.tour-spot.none {
    left: 50% !important;
    top: 50% !important;
    width: 0 !important;
    height: 0 !important;
    border: 0;
}

.tour-card {
    position: fixed;
    width: min(340px, calc(100vw - 32px));
    padding: 16px 18px 14px;
    pointer-events: auto;
    animation: tour-in 0.25s ease;
}

.tour-card.below {
    left: 50% !important;
    top: auto !important;
    bottom: 16px;
    transform: translateX(-50%);
}

.tour-count {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(var(--gold-rgb, 255, 214, 140), 0.8);
}

.tour-title {
    display: block;
    margin: 4px 0 6px;
    font-family: 'Fraunces', serif;
    font-size: 1.25rem;
}

.tour-card p {
    margin: 0 0 12px;
    line-height: 1.45;
    opacity: 0.9;
}

.tour-card .buttons-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 8px;
}

/* Sur mobile, les grands boutons du hub (220 px) passaient à la ligne : côte à côte, à parts égales */
.tour-card .buttons-row > .btn-primary {
    min-width: 0;
    flex: 1 1 auto;
}

/* Aide du menu (hub.js startGuide) : un « ? » rond au bout de l'en-tête du premier bloc, après son aparté */
.page-head:has(.page-help) {
    justify-content: flex-start;
}

.page-head:has(.page-help) > .page-kicker {
    margin-right: auto;
}

.page-help {
    flex: none;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(var(--gold-rgb, 255, 214, 140), 0.5);
    background: rgba(var(--gold-rgb, 255, 214, 140), 0.08);
    color: rgb(var(--gold-rgb, 255, 214, 140));
    font: 700 13px/1 'Fraunces', serif;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.page-help:hover,
.page-help:focus-visible {
    background: rgba(var(--gold-rgb, 255, 214, 140), 0.2);
    border-color: rgb(var(--gold-rgb, 255, 214, 140));
}

@keyframes tour-in {
    from { opacity: 0; translate: 0 6px; }
    to { opacity: 1; translate: 0 0; }
}