/* L'Ancre, le hub comme un monde jouable (rogue/ancre.js, prototype du 2026-10-13). Le hub (#screen-title.hub) devient
   transparent sur le monde 3D ; son menu latéral disparaît (la barre du haut reprend le porte-monnaie, la présence et
   l'engrenage) ; le panneau des pages ne s'ouvre que devant un lieu, à droite, le monde reste à gauche. */

#screen-title.hub.is-ancre {
    background: transparent;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
}

.hub.is-ancre .hub-backdrop,
.hub.is-ancre .hub-side {
    display: none;
}

.hub.is-ancre.is-roaming {
    pointer-events: none;
}

.hub.is-ancre .hub-main {
    pointer-events: none;
    padding-top: 64px;
}

.hub.is-ancre .hub-main > * {
    pointer-events: auto;
}

.hub.is-ancre .stage-card {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    pointer-events: none;
}

.hub.is-ancre .stage-card > * {
    pointer-events: auto;
}

/* Le cadre de la scène du hub (liseré d'or, points aux coins) n'a plus de sens sur le monde ; ses dégradés s'adoucissent */
.hub.is-ancre .stage-card::after {
    display: none;
}

.hub.is-ancre .stage-top {
    background: linear-gradient(rgba(2, 8, 14, 0.5), rgba(2, 8, 14, 0) 100%);
}

.hub.is-ancre .stage-bottom {
    background: none;
}

.hub.is-ancre .stage-card .viewer,
.hub.is-ancre .stage-card .stage-loader {
    display: none;
}

/* En promenade : ni panneau ni scène ; devant un lieu, le panneau glisse depuis la droite */
.hub.is-ancre.is-roaming .stage-card,
.hub.is-ancre.is-roaming .pages {
    display: none;
}

/* Le salon (coop) reste visible en promenade, en bas à gauche, au-dessus de la puce du compagnon */
.hub.is-ancre .hub-group {
    left: 16px;
    bottom: 70px;
}

.hub.is-ancre .pages {
    animation: ancre-slide 0.36s cubic-bezier(0.2, 0.7, 0.2, 1);
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8);
}

@keyframes ancre-slide {
    from {
        transform: translateX(28px);
        opacity: 0;
    }
}

.hub.is-ancre .hub-loading {
    left: 50%;
}

/* Un lieu, un menu (lot 3, 2026-10-17) : le lien entre deux vues d'un même lieu, au-dessus de son menu (les rangs et les
   quêtes au panneau des Quêtes, le Récit et la Légende à ta cabane), en pastille dorée */
.hub.is-ancre .menu-links {
    display: flex;
    margin: 0 0 6px;
}

.hub.is-ancre .menu-links.is-end {
    justify-content: flex-end;
}

.hub.is-ancre .menu-links .menu-link {
    padding: 6px 14px;
    border-radius: 99px;
    border: 1px solid rgba(230, 194, 107, 0.45);
    background: rgba(12, 14, 26, 0.86);
    color: #f0cf7e;
    font-size: 13px;
    font-weight: 600;
}

.hub.is-ancre .menu-links .menu-link:hover {
    border-color: #f0cf7e;
    color: #fff3cf;
}

/* Le lien vers un autre lieu, dans un menu (le nid et la charrette) : on le voit, ton compagnon y va */
.hub.is-ancre .page .menu-link {
    display: inline-block;
    margin-top: 8px;
    color: #f0cf7e;
    font-size: 13px;
    font-weight: 600;
}

/* Le premier œuf, une éclosion, la connexion : le panneau seul, posé au centre sur le monde */
.hub.is-ancre.is-forced .hub-main {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
}

/* ---------- La barre du haut ---------- */

/* La Réserve sur l'Ancre : les créatures de l'enclos (⌂), le bouton « Dans l'enclos » allumé quand elle y est */
.res-row .res-badge.pen {
    background: rgba(230, 194, 107, 0.14);
    color: rgb(var(--gold-rgb));
    border: 1px solid rgba(230, 194, 107, 0.45);
    font-size: 11px;
}

.reserve-actions [data-action="reserve-pen"][aria-pressed="true"] {
    border-color: rgba(230, 194, 107, 0.6);
    color: rgb(var(--gold-rgb));
}

.ancre-ui {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
    font-family: inherit;
}

.ancre-ui > * {
    pointer-events: auto;
}

.ancre-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 14px 0;
    background: linear-gradient(180deg, rgba(2, 6, 14, 0.75), rgba(2, 6, 14, 0));
    pointer-events: none;
}

.ancre-bar > * {
    pointer-events: auto;
}

.ancre-bar-left,
.ancre-bar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ancre-bar .side-head {
    padding: 0;
}

.ancre-bar .side-head .brand {
    gap: 8px;
}

.ancre-bar .side-head #hub-sub {
    display: none;
}

.ancre-bar .side-foot {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: 0;
    background: transparent;
}

.ancre-bar .side-foot .hub-utils {
    display: none;
}

.ancre-bar .side-foot .hub-wallet {
    margin: 0;
}

/* ---------- La bulle d'un lieu ---------- */

.ancre-prompt {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px 8px 8px;
    border-radius: 18px;
    background: rgba(5, 10, 22, 0.82);
    border: 1px solid rgba(230, 194, 107, 0.35);
    box-shadow: 0 14px 40px -16px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
    color: var(--text, #e8ecf5);
    cursor: pointer;
    transition: opacity 0.15s;
    width: max-content;
    max-width: min(340px, calc(100vw - 32px));
    will-change: transform;
}

.ancre-prompt.has-face {
    align-items: flex-start;
}

.ancre-prompt.has-face .ancre-face {
    margin-top: 1px;
}

.ancre-prompt.hidden,
.ancre-enter.hidden,
.ancre-map.hidden,
.ancre-close.hidden {
    display: none;
}

.ancre-prompt::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -7px;
    width: 12px;
    height: 12px;
    transform: translateX(-50%) rotate(45deg);
    background: rgba(5, 10, 22, 0.82);
    border-right: 1px solid rgba(230, 194, 107, 0.35);
    border-bottom: 1px solid rgba(230, 194, 107, 0.35);
}

.ancre-face {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(230, 194, 107, 0.5);
    background: #0b1122;
    flex: none;
}

.ancre-prompt-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ancre-place {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 16px;
    color: #f3d892;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    column-gap: 6px;
    row-gap: 0;
    white-space: nowrap;
    min-width: 0;
}

/* Le nom du lieu n'est jamais coupé : l'habitant passe à la ligne s'il le faut */
.ancre-label {
    white-space: nowrap;
}

/* Qui parle, à côté du nom du lieu : séparé par un point, en petites capitales comme sous les bulles */
.ancre-place .ancre-who::before {
    content: '·';
    margin-right: 6px;
    opacity: 0.6;
}

.ancre-ico {
    font-style: normal;
    font-size: 14px;
    opacity: 0.9;
}

.ancre-who {
    font-weight: 400;
    font-size: 12px;
    color: rgba(243, 216, 146, 0.75);
}

.ancre-line {
    font-size: 12px;
    line-height: 1.3;
    color: rgba(232, 236, 245, 0.8);
    font-style: italic;
}

/* Qui parle, sous sa parole, en petites capitales (comme sous les bulles des habitants) */
.ancre-by {
    display: block;
    margin-top: 3px;
    font: 600 10px/1 'Fraunces', serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(243, 216, 146, 0.75);
}

.ancre-by:empty {
    display: none;
}

/* Sur le quai : ce que comptent les lanternes (la quête commune) */
.ancre-note {
    display: block;
    margin-top: 5px;
    font-size: 11px;
    line-height: 1.3;
    color: rgba(243, 216, 146, 0.85);
}

.ancre-note::before {
    content: '✦ ';
}

.ancre-note:empty {
    display: none;
}

/* Une parole de l'habitant : un peu plus grande, ivoire, sur deux ou trois lignes ; la place est gardée pour toute la
   phrase (la bulle ne grandit pas lettre après lettre) */
.ancre-line.is-speech {
    font: italic 500 13px/1.38 'Fraunces', serif;
    color: #efe6cf;
    white-space: normal;
    min-height: 1.38em;
}

.ancre-prompt kbd,
.ancre-map-btn kbd,
.ancre-close kbd {
    font: 600 11px/1 'Fraunces', serif;
    padding: 4px 7px;
    border-radius: 7px;
    border: 1px solid rgba(243, 216, 146, 0.5);
    color: #f3d892;
    background: rgba(243, 216, 146, 0.08);
    flex: none;
}

body.touch .ancre-prompt kbd,
body.touch .ancre-map-btn kbd,
body.touch .ancre-close kbd {
    display: none;
}

.ancre-enter {
    position: absolute;
    right: 26px;
    bottom: 110px;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    border: 2px solid rgba(243, 216, 146, 0.7);
    background: rgba(5, 10, 22, 0.7);
    color: #f3d892;
    font: 700 15px/1 'Fraunces', serif;
    box-shadow: 0 0 24px rgba(230, 194, 107, 0.25);
}

.ancre-enter:active {
    transform: scale(0.94);
}

/* ---------- Ce que dit un habitant, au-dessus de sa tête ---------- */

.ancre-say {
    position: absolute;
    left: 0;
    top: 0;
    max-width: 300px;
    padding: 8px 12px;
    border-radius: 14px;
    background: rgba(5, 10, 22, 0.78);
    border: 1px solid rgba(243, 216, 146, 0.28);
    color: #efe6cf;
    font: italic 500 13px/1.35 'Fraunces', serif;
    pointer-events: none;
    transition: opacity 0.25s;
    will-change: transform;
}

.ancre-say.hidden {
    display: none;
}

.ancre-say::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 10px;
    height: 10px;
    transform: translateX(-50%) rotate(45deg);
    background: rgba(5, 10, 22, 0.78);
    border-right: 1px solid rgba(243, 216, 146, 0.28);
    border-bottom: 1px solid rgba(243, 216, 146, 0.28);
}

.ancre-say small {
    display: block;
    margin-top: 3px;
    font: 600 10px/1 'Fraunces', serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(243, 216, 146, 0.75);
}

/* Un lieu fermé : la bulle dit ce qui l'ouvre, sans touche ni portrait */
.ancre-prompt.is-closed {
    border-color: rgba(232, 236, 245, 0.18);
}

.ancre-prompt.is-closed .ancre-place {
    color: rgba(232, 236, 245, 0.7);
}

.ancre-prompt.is-closed .ancre-key {
    display: none;
}

/* ---------- La puce du compagnon ---------- */

.ancre-companion {
    position: absolute;
    left: 18px;
    bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 8px;
    border-radius: 16px;
    border: 1px solid rgba(230, 194, 107, 0.3);
    background: rgba(5, 10, 22, 0.7);
    color: var(--text, #e8ecf5);
    cursor: pointer;
    text-align: left;
}

.hub.is-ancre:not(.is-roaming) .ancre-companion,
.ancre-companion.hidden {
    display: none;
}

.ancre-companion-egg {
    width: 26px;
    height: 34px;
    flex: none;
}

.ancre-companion-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ancre-companion-text b {
    font: 600 15px/1.1 'Fraunces', serif;
    color: #f3d892;
}

.ancre-companion-text small {
    font-size: 11px;
    color: rgba(232, 236, 245, 0.65);
}

/* ---------- Les aides, la carte de l'Ancre, le retour ---------- */

.ancre-hint {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    font-size: 12px;
    color: rgba(232, 236, 245, 0.55);
    letter-spacing: 0.02em;
    pointer-events: none;
    white-space: nowrap;
}

.hub.is-ancre:not(.is-roaming) .ancre-map-btn {
    display: none;
}

.ancre-map-btn {
    position: absolute;
    right: 16px;
    bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 14px;
    border: 1px solid rgba(230, 194, 107, 0.3);
    background: rgba(5, 10, 22, 0.7);
    color: #f3d892;
    font: 600 13px/1 'Fraunces', serif;
    cursor: pointer;
}

.ancre-map-icon {
    font-size: 14px;
}

.ancre-map {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(2, 5, 12, 0.55);
    backdrop-filter: blur(3px);
}

.ancre-map-card {
    width: min(94vw, 920px);
    max-height: 86vh;
    overflow: auto;
    padding: 16px 18px 18px;
    border-radius: 22px;
    background: rgba(5, 10, 22, 0.94);
    border: 1px solid rgba(230, 194, 107, 0.35);
    box-shadow: 0 40px 100px -40px rgba(0, 0, 0, 0.9);
}

.ancre-map-card header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
}

.ancre-map-card header b {
    font: 600 22px/1.1 'Fraunces', serif;
    color: #f3d892;
}

.ancre-map-card header small {
    color: rgba(232, 236, 245, 0.6);
    font-size: 12px;
    flex: 1;
}

.ancre-map-close {
    border: 0;
    background: transparent;
    color: rgba(232, 236, 245, 0.7);
    font-size: 16px;
    cursor: pointer;
    padding: 4px 8px;
}

/* Le plan de l'Ancre, à côté de la liste : l'île, ses chemins, chaque lieu à sa place, ton compagnon */
.ancre-map-body {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.ancre-map-plan {
    display: block;
    width: 100%;
    height: auto;
    max-height: 66vh;
}

.ancre-map-body .ancre-map-list {
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    align-content: start;
}

.plan-island {
    fill: #13202a;
    stroke: rgba(230, 194, 107, 0.4);
    stroke-width: 0.35;
}

.plan-hill {
    fill: rgba(150, 170, 200, 0.07);
}

.plan-paths line {
    stroke: rgba(201, 160, 106, 0.38);
    stroke-width: 1.3;
    stroke-linecap: round;
}

.plan-plaza {
    fill: rgba(230, 194, 107, 0.06);
    stroke: rgba(230, 194, 107, 0.3);
    stroke-width: 0.3;
}

.plan-pen {
    fill: rgba(120, 160, 110, 0.06);
    stroke: rgba(201, 160, 106, 0.45);
    stroke-width: 0.3;
    stroke-dasharray: 0.8 0.6;
}

.plan-pier {
    fill: rgba(201, 160, 106, 0.3);
}

.plan-anchor {
    font-size: 3px;
    text-anchor: middle;
    fill: rgba(243, 216, 146, 0.75);
}

.plan-place {
    cursor: pointer;
}

.plan-place circle:first-of-type {
    fill: rgba(5, 10, 22, 0.95);
    stroke: rgba(230, 194, 107, 0.55);
    stroke-width: 0.3;
}

.plan-place text {
    font-size: 2.9px;
    text-anchor: middle;
    fill: #f3d892;
    pointer-events: none;
}

.plan-place.has-news circle:first-of-type {
    stroke: #ffc94d;
}

.plan-place:hover circle:first-of-type,
.plan-place.hl circle:first-of-type,
.plan-place.active circle:first-of-type {
    stroke: #ffe08a;
    stroke-width: 0.55;
    fill: rgba(40, 32, 12, 0.95);
}

.plan-place .plan-badge {
    fill: #ffc94d;
    stroke: none;
}

.plan-place .plan-badge-n {
    font: 800 1.8px system-ui, sans-serif;
    fill: #1a1204;
}

.plan-me circle,
.plan-me path {
    fill: #ffb24a;
}

.plan-me circle {
    stroke: #fff6e0;
    stroke-width: 0.35;
}

.ancre-map-list button.hl {
    border-color: rgba(230, 194, 107, 0.5);
    background: rgba(230, 194, 107, 0.08);
}

html.phone .ancre-map-card {
    /* La marge à droite laisse le bouton de signalement du hub hors de la carte */
    width: calc(100vw - 120px);
    max-height: 94vh;
    padding: 10px 12px 12px;
}

html.phone .ancre-map-body {
    grid-template-columns: minmax(0, 62vh) minmax(0, 1fr);
    gap: 10px;
}

html.phone .ancre-map-plan {
    max-height: 70vh;
}

html.phone .ancre-map-body .ancre-map-list {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    max-height: 70vh;
    overflow: auto;
}

/* La phrase de l'Ancre (son choix du 2026-10-14 : on incarne son compagnon) */
.ancre-map-note {
    margin: -4px 0 12px;
    font: italic 13px/1.4 'Fraunces', serif;
    color: rgba(243, 216, 146, 0.78);
}

.ancre-map-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
}

.ancre-map-list button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text, #e8ecf5);
    text-align: left;
    cursor: pointer;
}

/* Ce qui t'attend, sur la carte : la pastille du lieu (comme son enseigne et le menu du hub), « Nouveau » */
.ancre-map-list button {
    position: relative;
}

.ancre-map-badge,
.ancre-map-count {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 99px;
    display: grid;
    place-items: center;
    font: 800 11px/1 system-ui, sans-serif;
    color: #1a1204;
    background: #ffc94d;
    box-shadow: 0 0 12px rgba(255, 201, 77, 0.55);
    flex: none;
}

.ancre-map-badge {
    margin-left: auto;
}

.ancre-map-count[hidden] {
    display: none;
}

.ancre-map-new {
    margin-left: 4px;
    padding: 2px 6px;
    border-radius: 99px;
    font: 700 9.5px/1 system-ui, sans-serif;
    font-style: normal;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: 2px;
    color: #1a1204;
    background: #e6c26b;
}

.ancre-map-list button.has-news {
    border-color: rgba(255, 201, 77, 0.35);
}

.ancre-map-list button:hover,
.ancre-map-list button.active {
    border-color: rgba(230, 194, 107, 0.5);
    background: rgba(230, 194, 107, 0.08);
}

.ancre-map-ico {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(230, 194, 107, 0.1);
    color: #f3d892;
    font-size: 14px;
    flex: none;
}

.ancre-map-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ancre-map-text b {
    font: 600 14px/1.2 'Fraunces', serif;
}

.ancre-map-text small {
    font-size: 11px;
    color: rgba(232, 236, 245, 0.55);
}

.ancre-close {
    position: absolute;
    bottom: 16px;
    left: 18px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 8px 10px;
    border-radius: 14px;
    border: 1px solid rgba(230, 194, 107, 0.35);
    background: rgba(5, 10, 22, 0.75);
    color: #f3d892;
    font: 600 14px/1 'Fraunces', serif;
    cursor: pointer;
}

.ancre-close span {
    font-size: 18px;
    line-height: 0.8;
}

/* Les commandes tactiles du jeu, en promenade : le joystick et le dash seulement (main.js Input) ; le hub, en
   promenade, laisse passer les doigts jusqu'à elles (pointer-events) */

body.ancre #touch-controls .touch-stick.aim,
body.ancre #touch-controls .touch-hint,
body.ancre #touch-controls [data-touch='nova'],
body.ancre #touch-controls [data-touch='pause'] {
    display: none;
}

/* ---------- Téléphone et écrans étroits : le panneau couvre le monde ---------- */

/* La forme sur l'Ancre, à la pierre des lignées (son choix du 2026-10-14) */
.ancre-forms {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 4px 0 10px;
}

.ancre-forms button {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.ancre-forms button b {
    font: 600 15px/1.2 'Fraunces', serif;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.ancre-forms button small {
    font-size: 11.5px;
    opacity: 0.7;
}

.ancre-forms button.active {
    border-color: rgba(230, 194, 107, 0.7);
    background: rgba(230, 194, 107, 0.1);
}

.ancre-forms button.active small {
    color: #f3d892;
    opacity: 1;
}

.ancre-forms button.trying {
    border-style: dashed;
    border-color: rgba(230, 194, 107, 0.45);
}

.ancre-forms button:disabled {
    opacity: 0.45;
    cursor: default;
}

/* Un lieu ouvert, sur ordinateur (son choix du 2026-10-14, l'option A) : un cadre au centre ; à gauche le monde vu à
   travers (ton compagnon, le lieu) avec le titre, les puces et les fiches de la scène ; à droite le menu ; autour,
   l'écran assombri */
html:not(.phone) .hub.is-ancre:not(.is-roaming):not(.is-forced) .hub-main {
    position: fixed;
    top: max(66px, calc(50% - 440px));
    bottom: max(58px, calc(50% - 440px));
    left: 50%;
    right: auto;
    width: min(1360px, 97vw);
    transform: translateX(-50%);
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 480px;
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    border-radius: 26px;
    border: 1px solid rgba(230, 194, 107, 0.45);
    box-shadow: 0 0 0 100vmax rgba(2, 5, 12, 0.64), 0 30px 90px -30px rgba(0, 0, 0, 0.9);
    overflow: hidden;
    animation: ancre-frame 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@keyframes ancre-frame {
    from {
        opacity: 0;
        transform: translateX(-50%) scale(0.985);
    }
}

html:not(.phone) .hub.is-ancre:not(.is-roaming):not(.is-forced) .stage-card {
    grid-column: 1;
    grid-row: 1;
    height: 100%;
    min-height: 0;
    border-radius: 0;
}

html:not(.phone) .hub.is-ancre:not(.is-roaming):not(.is-forced) .pages {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    border-radius: 0;
    border-left: 1px solid rgba(230, 194, 107, 0.28);
    background: rgba(5, 10, 22, 0.94);
    box-shadow: none;
    animation: none;
}

/* Les Réglages (sans scène) : le menu prend tout le cadre */
html:not(.phone) .hub.is-ancre:not(.is-roaming) .hub-main:has(#hub-panel[data-tab='settings']) {
    grid-template-columns: minmax(0, 1fr);
    width: min(1100px, 96vw);
}

html:not(.phone) .hub.is-ancre:not(.is-roaming) .hub-main:has(#hub-panel[data-tab='settings']) .pages {
    grid-column: 1;
    border-left: 0;
}

/* « ‹ L'Ancre » sous le cadre, à son bord gauche */
html:not(.phone) .hub.is-ancre:not(.is-roaming):not(.is-forced) .ancre-close {
    left: calc(50% - min(680px, 48.5vw));
    bottom: max(10px, calc(50% - 488px));
}

/* L'arbre des Maîtrises défile s'il est plus haut que le cadre */
html:not(.phone) .hub.is-ancre:not(.is-roaming) .stage-card.has-mastery-sheet .stage-sheet-inner.mastery-sheet {
    overflow-y: auto;
    pointer-events: auto;
    scrollbar-width: thin;
}

/* Un menu ouvert : plus d'aide de marche (« Glisser pour tourner » revient : ce qu'on regarde tourne, ancre-inspect.js) */
.hub.is-ancre:not(.is-roaming) .ancre-hint {
    display: none;
}

/* Un lieu ouvert : sur le monde visible (le fond du hub), glisser fait tourner ce qu'on regarde (ancre-inspect.js) ; une main
   ouverte, fermée pendant qu'on tient ; le menu et la scène gardent leurs curseurs ; au doigt, le fond ne fait pas défiler
   la page (le menu, qui défile en lui-même, n'en dépend pas) */
.hub.is-ancre:not(.is-roaming) {
    touch-action: none;
}

.hub.is-ancre.can-turn {
    cursor: grab;
}

.hub.is-ancre.is-turning {
    cursor: grabbing;
}

.hub.is-ancre.can-turn > *,
.hub.is-ancre.is-turning > * {
    cursor: auto;
}

/* Les émotes : le bouton (à gauche de la carte), la roue, les bulles au-dessus des créatures */
.ancre-emote-btn {
    position: absolute;
    /* À gauche de la carte (16 px du bord, sa largeur mesurée --map-w, ancre.js buildUi, puis 10 px d'écart) */
    right: calc(26px + var(--map-w, 188px));
    bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 14px;
    border: 1px solid rgba(230, 194, 107, 0.3);
    background: rgba(5, 10, 22, 0.7);
    color: #f3d892;
    font: 600 13px/1 'Fraunces', serif;
    cursor: pointer;
}

.ancre-emote-btn kbd {
    font: 600 11px/1 'Fraunces', serif;
    padding: 4px 7px;
    border-radius: 7px;
    border: 1px solid rgba(243, 216, 146, 0.5);
    color: #f3d892;
    background: rgba(243, 216, 146, 0.08);
}

.hub.is-ancre:not(.is-roaming) .ancre-emote-btn {
    display: none;
}

/* Un lieu ouvert : les bulles d'émote se rangent (elles reviennent en promenade) */
.hub.is-ancre:not(.is-roaming) .ancre-emote {
    visibility: hidden;
}

.ancre-wheel {
    position: absolute;
    left: 50%;
    bottom: 96px;
    width: 320px;
    height: 320px;
    margin-left: -160px;
    z-index: 6;
}

.ancre-wheel.hidden {
    display: none;
}

.ancre-wheel::before {
    content: '';
    position: absolute;
    inset: 22px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(5, 10, 22, 0.94) 0 38%, rgba(5, 10, 22, 0.55) 39% 100%);
    border: 1px solid rgba(230, 194, 107, 0.35);
    pointer-events: none;
}

.ancre-wheel-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #f3d892;
    font: 600 15px/1.2 'Fraunces', serif;
    pointer-events: none;
}

.ancre-wheel-center small {
    display: block;
    margin-top: 4px;
    font: 500 11px/1.25 system-ui, sans-serif;
    color: rgba(232, 236, 245, 0.6);
    max-width: 110px;
}

.ancre-wheel-slot {
    position: absolute;
    left: calc(50% + var(--x));
    top: calc(50% + var(--y));
    width: 74px;
    height: 74px;
    margin: -37px 0 0 -37px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border-radius: 50%;
    background: rgba(5, 10, 22, 0.94);
    border: 1px solid rgba(230, 194, 107, 0.45);
    color: #f3d892;
    box-shadow: 0 10px 30px -14px #000;
    cursor: pointer;
    font: inherit;
}

.ancre-wheel-slot b {
    font: 600 24px/1 'Segoe UI Symbol', 'Noto Sans Symbols 2', serif;
}

.ancre-wheel-slot small {
    font: 600 9.5px/1 'Fraunces', serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(243, 216, 146, 0.8);
}

.ancre-wheel-slot i {
    position: absolute;
    top: -6px;
    right: -4px;
    font: 700 10px/1 system-ui, sans-serif;
    font-style: normal;
    color: #1a1206;
    background: #e6c26b;
    border-radius: 6px;
    padding: 3px 5px;
}

.ancre-wheel-slot:hover,
.ancre-wheel-slot.on,
.ancre-wheel-slot:focus-visible {
    border-color: #f3d892;
    background: rgba(60, 46, 18, 0.95);
    box-shadow: 0 0 0 3px rgba(243, 216, 146, 0.25), 0 0 28px rgba(243, 216, 146, 0.35);
}

body.touch .ancre-wheel-slot i {
    display: none;
}

.ancre-emote {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px 5px 5px;
    border-radius: 999px;
    background: rgba(5, 10, 22, 0.86);
    border: 1px solid rgba(243, 216, 146, 0.5);
    color: #efe6cf;
    font: italic 500 13px/1 'Fraunces', serif;
    white-space: nowrap;
    box-shadow: 0 0 24px rgba(243, 216, 146, 0.22);
    pointer-events: none;
    will-change: transform, opacity;
}

.ancre-emote b {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(243, 216, 146, 0.35), rgba(243, 216, 146, 0.08));
    color: #f3d892;
    font: 600 17px/1 'Segoe UI Symbol', 'Noto Sans Symbols 2', serif;
    font-style: normal;
}

.ancre-emote small {
    font: 600 9.5px/1 'Fraunces', serif;
    font-style: normal;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(243, 216, 146, 0.75);
}

@media (max-width: 900px), (orientation: landscape) and (max-height: 500px) {
    #screen-title.hub.is-ancre {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
    }

    .hub.is-ancre .hub-main {
        padding-top: 52px;
    }

    .ancre-map-note {
        margin: -6px 0 8px;
        font-size: 12px;
    }

    .hub.is-ancre:not(.is-roaming) .stage-card {
        display: none;
    }

    .hub.is-ancre:not(.is-roaming) .hub-main {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Un lieu ouvert : le menu à droite, sur un fond sombre, le monde à gauche (le sujet du lieu y est cadré) */
    .hub.is-ancre:not(.is-roaming):not(.is-forced) .hub-main {
        grid-template-columns: minmax(0, 1fr) min(57vw, 540px);
        padding: 52px 0 0;
        gap: 0;
    }

    /* La scène du menu, à gauche, posée sur le monde : son titre et ses stades, en petit */
    .hub.is-ancre:not(.is-roaming):not(.is-forced) .stage-card {
        display: block;
        grid-column: 1;
        grid-row: 1;
        height: 100%;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .hub.is-ancre:not(.is-roaming):not(.is-forced) .stage-top {
        padding: 6px 10px 10px;
        gap: 6px;
        transform: scale(0.82);
        transform-origin: 0 0;
        width: 122%;
    }

    .hub.is-ancre:not(.is-roaming):not(.is-forced) .stage-bottom {
        transform: scale(0.8);
        transform-origin: 0 100%;
        width: 125%;
    }

    .hub.is-ancre:not(.is-roaming):not(.is-forced) .pages {
        grid-column: 2;
        padding: 8px 8px calc(10px + env(safe-area-inset-bottom)) 8px;
        background: linear-gradient(90deg, rgba(4, 9, 20, 0.72), rgba(4, 9, 20, 0.94) 18px);
        border-left: 1px solid rgba(230, 194, 107, 0.26);
    }

    .hub.is-ancre:not(.is-roaming) .hub-main:has(#hub-panel[data-tab='settings']) {
        grid-template-columns: minmax(0, 1fr);
    }

    .hub.is-ancre:not(.is-roaming) .hub-main:has(#hub-panel[data-tab='settings']) .pages {
        grid-column: 1;
        border-left: 0;
    }

    .ancre-bar {
        height: 48px;
    }

    .ancre-close {
        top: 8px;
        bottom: auto;
        left: 64px;
        padding: 6px 10px 6px 8px;
        font-size: 13px;
    }

    .ancre-map-btn {
        bottom: 10px;
        right: auto;
        left: 10px;
    }

    .ancre-emote-btn {
        bottom: 10px;
        right: auto;
        left: calc(18px + var(--map-w, 176px));
        padding: 8px 10px;
    }

    .ancre-emote-btn b,
    .ancre-emote-btn kbd {
        display: none;
    }

    .ancre-wheel {
        bottom: 60px;
        transform: scale(0.82);
        transform-origin: 50% 100%;
    }

    .ancre-companion {
        left: 10px;
        bottom: 52px;
        padding: 4px 10px 4px 6px;
    }

    /* Le salon au-dessus de la puce du compagnon (plus haute ici : la carte de l'Ancre est dessous) */
    .hub.is-ancre .hub-group {
        left: 10px;
        bottom: 96px;
    }

    .ancre-companion-egg {
        width: 20px;
        height: 26px;
    }

    .ancre-companion-text b {
        font-size: 13px;
    }

    .ancre-hint {
        display: none;
    }

    .ancre-prompt {
        max-width: 300px;
    }

    .ancre-enter {
        right: calc(18px + 90px * var(--phone-k, 1) + env(safe-area-inset-right));
        bottom: calc(34px + env(safe-area-inset-bottom));
        width: calc(66px * var(--phone-k, 1));
        height: calc(66px * var(--phone-k, 1));
        font-size: 13px;
    }
}

/* La visite des menus sur l'Ancre (hub.js startTour) : la caméra montre le lieu ; sans bloc à mettre en lumière, le monde
   n'est pas assombri */
body:has(#screen-title.hub.is-ancre) .tour-spot.none {
    box-shadow: none;
}

/* ---------- La rencontre entre éleveurs (ancre-rencontre.js) ---------- */

/* Sa carte, au-dessus de sa tête : le même habillage que les bulles des lieux */
.ancre-meet {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 6;
    width: 318px;
    max-width: calc(100vw - 32px);
    padding: 12px 14px 10px;
    border-radius: 16px;
    background: rgba(5, 10, 22, 0.9);
    border: 1px solid rgba(230, 194, 107, 0.4);
    box-shadow: 0 18px 50px -18px rgba(0, 0, 0, 0.95);
    color: var(--text, #e8ecf5);
    will-change: transform;
}

.ancre-meet::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -7px;
    width: 12px;
    height: 12px;
    transform: translateX(-50%) rotate(45deg);
    background: rgba(5, 10, 22, 0.9);
    border-right: 1px solid rgba(230, 194, 107, 0.4);
    border-bottom: 1px solid rgba(230, 194, 107, 0.4);
}

.ancre-meet.hidden,
.ancre-meet-sheet.hidden {
    display: none;
}

.ancre-meet-x {
    position: absolute;
    right: 8px;
    top: 7px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(243, 216, 146, 0.3);
    background: rgba(5, 10, 22, 0.6);
    color: #f3d892;
    font-size: 13px;
    cursor: pointer;
}

.ancre-meet-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding-right: 36px;
}

.ancre-meet-name {
    font: 600 19px/1.15 'Fraunces', serif;
    color: #f3d892;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ancre-meet-friend {
    font: 600 10px/1 'Fraunces', serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1a1206;
    background: #e6c26b;
    padding: 4px 7px;
    border-radius: 9px;
}

.ancre-meet-breeder {
    margin-top: 4px;
    font-size: 12px;
}

.ancre-meet-pet {
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid rgba(243, 216, 146, 0.14);
    font-size: 13px;
    line-height: 1.35;
}

.ancre-meet-pet b {
    font: 600 14px 'Fraunces', serif;
    color: #efe6cf;
}

.ancre-meet-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--c);
    box-shadow: 0 0 8px var(--c);
    vertical-align: 1px;
}

.ancre-meet-facts {
    margin-top: 4px;
    font-size: 12px;
    color: rgba(232, 236, 245, 0.72);
}

.ancre-meet-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 11px;
}

.ancre-meet-actions.is-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ancre-meet-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 54px;
    padding: 8px 4px 7px;
    border-radius: 11px;
    border: 1px solid rgba(243, 216, 146, 0.32);
    background: rgba(243, 216, 146, 0.06);
    color: #efe6cf;
    font: 600 12px/1.15 'Fraunces', serif;
    text-align: center;
    cursor: pointer;
}

.ancre-meet-btn i {
    font-style: normal;
    font-size: 15px;
    color: #f3d892;
}

.ancre-meet-btn:hover:not(:disabled),
.ancre-meet-btn:focus-visible {
    border-color: rgba(243, 216, 146, 0.75);
    background: rgba(243, 216, 146, 0.14);
}

.ancre-meet-btn.is-friend {
    border-color: rgba(243, 216, 146, 0.6);
    background: rgba(243, 216, 146, 0.11);
}

.ancre-meet-btn.is-done,
.ancre-meet-btn:disabled {
    cursor: default;
}

.ancre-meet-btn.is-done {
    border-color: rgba(140, 220, 170, 0.5);
    background: rgba(140, 220, 170, 0.07);
    color: #bfe8cf;
}

.ancre-meet-btn.is-done i {
    color: #9fe0b8;
}

.ancre-meet-foot {
    margin-top: 8px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: rgba(232, 236, 245, 0.55);
}

.ancre-meet-foot kbd {
    font: 600 11px/1 'Fraunces', serif;
    padding: 4px 7px;
    border-radius: 7px;
    border: 1px solid rgba(243, 216, 146, 0.5);
    color: #f3d892;
    background: rgba(243, 216, 146, 0.08);
}

/* Au téléphone : la carte se range à droite (au-dessus de sa tête, elle le cachait) */
.ancre-meet.is-docked {
    left: auto;
    right: calc(12px + env(safe-area-inset-right));
    top: 56px;
    transform: none !important;
}

.ancre-meet.is-docked::after {
    display: none;
}

body.touch .ancre-meet-btn {
    min-height: 58px;
    font-size: 12.5px;
}

/* La fiche de son compagnon, à droite ; les deux compagnons côte à côte sur la gauche de l'image */
.ancre-meet-sheet {
    position: absolute;
    right: 22px;
    top: 70px;
    max-height: calc(100% - 140px);
    z-index: 6;
    width: 330px;
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(5, 10, 22, 0.9);
    border: 1px solid rgba(230, 194, 107, 0.35);
    box-shadow: 0 18px 50px -18px rgba(0, 0, 0, 0.95);
    color: var(--text, #e8ecf5);
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
}

.ancre-meet-kicker {
    font: 600 10px/1.3 'Fraunces', serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(243, 216, 146, 0.8);
}

.ancre-meet-title {
    font: 600 30px/1 'Fraunces', serif;
    color: #f6efe0;
    overflow-wrap: anywhere;
}

.ancre-meet-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ancre-meet-tags > span {
    padding: 4px 9px;
    border-radius: 9px;
    border: 1px solid rgba(243, 216, 146, 0.3);
    font: 600 11px 'Fraunces', serif;
    color: #efe6cf;
}

.ancre-meet-tags .is-level {
    border-color: rgba(120, 220, 160, 0.45);
    color: #bfe8cf;
}

.ancre-meet-rows {
    display: flex;
    flex-direction: column;
}

.ancre-meet-rows > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(243, 216, 146, 0.1);
    font-size: 13px;
}

.ancre-meet-rows > div > span:first-child {
    color: rgba(232, 236, 245, 0.6);
    flex: none;
}

.ancre-meet-rows > div > span:last-child {
    color: #efe6cf;
    text-align: right;
}

.ancre-meet-forms {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.ancre-meet-forms > div {
    padding: 7px 6px;
    border-radius: 10px;
    border: 1px solid rgba(243, 216, 146, 0.18);
    font: 600 12px 'Fraunces', serif;
    color: rgba(239, 230, 207, 0.7);
    text-align: center;
    overflow-wrap: anywhere;
}

.ancre-meet-forms small {
    display: block;
    font: 600 9px/1.3 'Fraunces', serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(243, 216, 146, 0.6);
}

.ancre-meet-forms .is-on {
    border-color: rgba(243, 216, 146, 0.7);
    background: rgba(243, 216, 146, 0.1);
    color: #f6efe0;
}

.ancre-meet-sheet .ancre-meet-actions {
    margin-top: 4px;
}

html.phone .ancre-meet-sheet {
    top: 52px;
    max-height: calc(100% - 106px);
    right: calc(10px + env(safe-area-inset-right));
    width: 330px;
    padding: 12px 14px;
    gap: 6px;
}

html.phone .ancre-meet-title {
    font-size: 24px;
}

html.phone .ancre-meet-tags > span {
    font-size: 10px;
    padding: 3px 7px;
}

html.phone .ancre-meet-rows > div {
    padding: 3px 0;
    font-size: 11.5px;
}

html.phone .ancre-meet-forms {
    display: none;
}

html.phone .ancre-meet-sheet .ancre-meet-btn {
    min-height: 44px;
    padding: 6px 4px;
}

/* Ce que l'on reçoit en se promenant : un salut, une demande d'ami */
.ancre-meet-toasts {
    position: absolute;
    left: 50%;
    top: 64px;
    z-index: 7;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

.ancre-meet-note {
    display: flex;
    align-items: center;
    gap: 10px;
    width: max-content;
    max-width: calc(100vw - 32px);
    padding: 9px 12px 9px 14px;
    border-radius: 14px;
    background: rgba(5, 10, 22, 0.9);
    border: 1px solid rgba(230, 194, 107, 0.4);
    box-shadow: 0 14px 40px -16px rgba(0, 0, 0, 0.9);
    font-size: 13px;
    pointer-events: auto;
}

.ancre-meet-note b {
    font: 600 14px 'Fraunces', serif;
    color: #f3d892;
}

.ancre-meet-glyph {
    color: #f3d892;
}

.ancre-meet-mini {
    padding: 6px 10px;
    border-radius: 9px;
    border: 1px solid rgba(243, 216, 146, 0.4);
    background: rgba(243, 216, 146, 0.08);
    color: #f3d892;
    font: 600 12px 'Fraunces', serif;
    cursor: pointer;
}

.ancre-meet-mini.is-plain {
    border-color: rgba(232, 236, 245, 0.2);
    background: transparent;
    color: rgba(232, 236, 245, 0.75);
}

/* Au téléphone, à gauche : la carte et la fiche se rangent à droite */
html.phone .ancre-meet-toasts {
    top: 48px;
    left: calc(12px + env(safe-area-inset-left));
    transform: none;
    align-items: flex-start;
}

html.phone .ancre-meet-note {
    max-width: calc(100vw - 380px);
    flex-wrap: wrap;
    row-gap: 6px;
}

/* Le bouton rond du téléphone devant un éleveur : « Rencontrer » tient dans le rond */
.ancre-enter.is-meet {
    font-size: 11px;
    letter-spacing: -0.01em;
}

/* ---------- Les petits plaisirs (ancre-plaisirs.js) : les signes qui montent, la lunette de Skops ---------- */

.ancre-ui > .ancre-float {
    position: absolute;
    left: 0;
    top: 0;
    color: #f3d892;
    font: 600 20px/1 'Fraunces', serif;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.55), 0 0 14px rgba(243, 216, 146, 0.35);
    pointer-events: none;
    will-change: transform, opacity;
}

.ancre-ui > .ancre-float.is-heart,
.ancre-ui > .ancre-float.is-note {
    font-family: 'Segoe UI Symbol', 'Noto Sans Symbols 2', serif;
}

.ancre-ui > .ancre-float.is-heart {
    color: #ff9ec4;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5), 0 0 16px rgba(255, 158, 196, 0.5);
}

.ancre-ui > .ancre-float.is-zz {
    color: #cfe0ff;
    font-style: italic;
    font-weight: 500;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5), 0 0 14px rgba(160, 190, 255, 0.45);
}

/* La lunette : le ciel dans un cercle de laiton, la nuit autour ; les constellations des archipels. Les doigts passent
   au travers (le joystick promène le regard), sauf sur « Revenir » */
.ancre-ui > .ancre-lens {
    --r: 320px;
    position: fixed;
    inset: 0;
    z-index: 6;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0s linear 0.4s;
    background: radial-gradient(circle at 50% 50%, transparent calc(var(--r) - 1px), #020309 calc(var(--r) + 1px));
}

.ancre-ui > .ancre-lens.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease, visibility 0s;
}

/* Le noir de l'entrée et de la sortie : la caméra passe à l'oculaire derrière lui */
.ancre-ui > .ancre-lens::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: #020309;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.55s ease;
}

.ancre-ui > .ancre-lens.is-veiled::after {
    opacity: 1;
    transition: opacity 0.25s ease;
}

.ancre-lens-sky {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    clip-path: circle(var(--r) at 50% 50%);
}

.ancre-lens-sky line {
    stroke-linecap: round;
}

.ancre-lens-sky .is-lit line {
    stroke: rgba(243, 216, 146, 0.78);
    stroke-width: 1.6;
    filter: drop-shadow(0 0 4px rgba(243, 216, 146, 0.7));
}

.ancre-lens-sky .is-lit circle {
    fill: #fff3cf;
    filter: drop-shadow(0 0 5px rgba(255, 226, 150, 0.95));
}

.ancre-lens-sky .is-dim line {
    stroke: rgba(150, 165, 210, 0.3);
    stroke-width: 1;
    stroke-dasharray: 2 5;
}

.ancre-lens-sky .is-dim circle {
    fill: rgba(170, 182, 220, 0.5);
}

.ancre-lens-sky text {
    text-anchor: middle;
    font: italic 600 14px 'Fraunces', serif;
    paint-order: stroke;
    stroke: rgba(2, 3, 9, 0.85);
    stroke-width: 3px;
}

.ancre-lens-sky .is-lit .name {
    fill: #f3d892;
}

.ancre-lens-sky .is-dim .name {
    fill: rgba(190, 198, 228, 0.62);
}

.ancre-lens-sky .state {
    font: 600 10px 'Fraunces', serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ancre-lens-sky .is-lit .state {
    fill: rgba(243, 216, 146, 0.78);
}

.ancre-lens-sky .is-dim .state {
    fill: rgba(170, 180, 210, 0.5);
}

.ancre-lens-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--r) * 2 + 10px);
    height: calc(var(--r) * 2 + 10px);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 5px solid rgba(166, 128, 60, 0.92);
    box-shadow: 0 0 0 2px rgba(243, 216, 146, 0.45), inset 0 0 60px 18px rgba(2, 3, 9, 0.85), 0 0 40px rgba(0, 0, 0, 0.8);
    pointer-events: none;
}

.ancre-lens-caption {
    position: absolute;
    left: max(24px, calc(50% - var(--r) - 300px));
    top: 50%;
    width: min(260px, calc(50% - var(--r) - 40px));
    transform: translateY(-50%);
    display: grid;
    gap: 10px;
    color: #efe6cf;
    font: italic 500 14px/1.4 'Fraunces', serif;
}

.ancre-lens-caption b {
    color: #f3d892;
    font: 600 22px/1.1 'Fraunces', serif;
}

.ancre-lens-caption > small {
    color: rgba(239, 230, 207, 0.86);
    font: 600 13px/1.3 'Fraunces', serif;
}

.ancre-lens-caption em {
    color: rgba(239, 230, 207, 0.55);
    font-size: 12px;
}

.ancre-lens-skops {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
}

.ancre-lens-skops img {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(243, 216, 146, 0.45);
    object-fit: cover;
}

.ancre-lens-skops span {
    display: grid;
    gap: 3px;
}

.ancre-lens-skops small {
    color: rgba(243, 216, 146, 0.78);
    font: 600 10px/1 'Fraunces', serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* « Revenir » : en haut à gauche (en bas, il y a le joystick du téléphone) */
.ancre-lens-close {
    position: absolute;
    top: calc(16px + env(safe-area-inset-top));
    left: calc(18px + env(safe-area-inset-left));
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 8px 10px;
    border-radius: 14px;
    border: 1px solid rgba(230, 194, 107, 0.35);
    background: rgba(5, 10, 22, 0.75);
    color: #f3d892;
    font: 600 14px/1 'Fraunces', serif;
    cursor: pointer;
    pointer-events: auto;
}

.ancre-lens-close span {
    font-size: 18px;
    line-height: 0.8;
}

.ancre-lens-close kbd {
    padding: 2px 6px;
    border-radius: 6px;
    border: 1px solid rgba(230, 194, 107, 0.35);
    color: rgba(243, 216, 146, 0.8);
    font: 600 10px/1.2 'Fraunces', serif;
}

body.touch .ancre-lens-close kbd,
body.pad .ancre-lens-close kbd {
    display: none;
}

/* À la lunette : le reste de l'interface de l'Ancre s'efface */
.hub.is-lens .ancre-bar,
.hub.is-lens .ancre-hint,
.hub.is-lens .ancre-map-btn,
.hub.is-lens .ancre-emote-btn,
.hub.is-lens .ancre-companion,
.hub.is-lens .ancre-prompt,
.hub.is-lens .ancre-enter,
.hub.is-lens .ancre-say {
    opacity: 0 !important;
    pointer-events: none !important;
}

html.phone .ancre-lens-caption {
    left: calc(14px + env(safe-area-inset-left));
    width: calc(50% - var(--r) - 28px);
    gap: 6px;
    font-size: 11px;
}

html.phone .ancre-lens-caption b {
    font-size: 16px;
}

html.phone .ancre-lens-caption > small {
    font-size: 11px;
}

html.phone .ancre-lens-skops img {
    width: 30px;
    height: 30px;
}

html.phone .ancre-lens-sky text {
    font-size: 11px;
}

html.phone .ancre-lens-sky .state {
    font-size: 8px;
}

/* ---------- Le premier jour (ancre-debut.js) ---------- */

/* L'arrivée : la caméra descend du soleil noir jusqu'au nid, le panneau du premier œuf paraît ensuite */
.hub.is-ancre.is-first-egg .pages,
.hub.is-ancre.is-first-egg .stage-card {
    transition: opacity 0.8s ease;
}

.hub.is-ancre.is-arriving .pages,
.hub.is-ancre.is-arriving .stage-card {
    opacity: 0;
    pointer-events: none;
    transition: none;
}

/* La phrase de Poti dans le panneau du choix : au téléphone seulement (ailleurs, sa bulle au-dessus de lui) */
.starter-voice {
    display: none;
}

html.phone .hub.is-first-choice .starter-voice {
    display: block;
    margin: 2px 0 10px;
    font-family: var(--serif);
    font-style: italic;
    font-size: 15px;
    line-height: 1.3;
    color: #efe3c4;
}

.starter-voice b {
    margin-left: 6px;
    font-family: inherit;
    font-style: normal;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #d7b26a;
}

/* Au téléphone, le choix du premier œuf se ramasse en bas de l'écran (les trois œufs et « Faire éclore ») : le nid de
   Poti au-dessus */
html.phone .hub.is-ancre.is-first-choice .pages {
    position: fixed;
    top: auto;
    bottom: 6px;
    left: 8px;
    right: 8px;
    width: auto;
    height: auto;
    max-height: none;
    overflow: visible;
}

html.phone .hub.is-first-choice .page-origins,
html.phone .hub.is-first-choice .page-welcome .chronicle-name,
html.phone .hub.is-first-choice .page-welcome .page-intro,
html.phone .hub.is-first-choice .page-welcome .welcome-brand {
    display: none;
}

/* Le premier œuf : la ligne de l'œuf qu'on regarde au nid (la souris sur lui, ou le clavier), quand ce n'est pas l'œuf choisi ;
   le petit œuf de la ligne se soulève avec lui */
.starter-list .lineage.is-preview {
    border-color: rgba(var(--c-rgb), 0.32);
    background: linear-gradient(100deg, rgba(var(--c-rgb), 0.1), rgba(var(--c-rgb), 0.02) 70%);
}

.starter-list .lineage .lineage-egg .egg {
    transition: transform 0.25s ease;
}

.starter-list .lineage:is(:hover, .is-preview):not(.active) .lineage-egg .egg {
    transform: translateY(-3px) scale(1.06);
}

/* La première éclosion (ancre-debut.js) : le panneau s'efface le temps qu'il frémisse et éclose ; le monde s'assombrit autour
   du nid (un voile au-dessus du monde, sous les menus, troué autour de l'œuf), puis se rallume, plus lentement */
.hub.is-ancre.is-first-hatching .pages,
.hub.is-ancre.is-first-hatching .stage-card {
    opacity: 0;
    pointer-events: none;
}

.ancre-veil {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.4s ease;
    background: radial-gradient(circle at var(--veil-x, 50%) var(--veil-y, 50%), rgba(3, 5, 12, 0) 0, rgba(3, 5, 12, 0) 7vmin, rgba(3, 5, 12, 0.45) 30vmin, rgba(3, 5, 12, 0.7) 75vmin);
}

.ancre-veil.on {
    opacity: 1;
}

.ancre-veil.lift {
    transition-duration: 2.4s;
}

/* La naissance du premier œuf : la dernière phrase de la Légende en tête */
.reveal-first .welcome-epigraph {
    margin: 0 0 12px;
}

/* La consigne pour marcher, à la sortie du nid */
.ancre-debut-hint {
    position: fixed;
    left: 50%;
    bottom: max(64px, 9vmin);
    transform: translateX(-50%);
    z-index: 60;
    padding: 9px 18px;
    border-radius: 999px;
    background: rgba(14, 18, 30, 0.88);
    border: 1px solid rgba(232, 200, 120, 0.5);
    color: #f3ead2;
    font-weight: 600;
    font-size: max(15px, 1.9vmin);
    line-height: 1.2;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
    pointer-events: none;
    white-space: nowrap;
    animation: ancre-debut-hint 0.5s ease both;
}

.ancre-debut-hint b {
    color: #ffd98a;
    letter-spacing: 0.08em;
}

html.phone .ancre-debut-hint {
    top: 54px;
    bottom: auto;
    font-size: 13px;
}

@keyframes ancre-debut-hint {
    from { opacity: 0; transform: translate(-50%, 8px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

/* ---------- Le Récit joué dans le monde (ancre-recit.js) ---------- */

/* Pendant une scène : l'interface du hub et les bulles des habitants s'effacent, le monde reste */
body.ancre-story #screen-title {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

body.ancre-story .ancre-say,
body.ancre-story .ancre-recit-sign {
    opacity: 0 !important;
}

/* La scène : au-dessus des bulles des habitants (130) */
.ancre-recit {
    --bar: clamp(28px, 7.5vh, 62px);
    position: fixed;
    inset: 0;
    z-index: 135;
}

html.phone .ancre-recit {
    --bar: clamp(18px, 6vh, 34px);
}

.ancre-recit-bar {
    position: absolute;
    left: 0;
    right: 0;
    height: var(--bar);
    z-index: 1;
    background: #03040a;
    transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.ancre-recit-bar.is-top {
    top: 0;
    transform: translateY(-101%);
}

.ancre-recit-bar.is-bottom {
    bottom: 0;
    transform: translateY(101%);
}

.ancre-recit.is-on .ancre-recit-bar {
    transform: none;
}

/* Sous la discussion, le monde s'assombrit (la bulle se lit) */
.ancre-recit::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 48%;
    background: linear-gradient(0deg, rgba(5, 8, 18, 0.94) 0%, rgba(5, 8, 18, 0.62) 42%, rgba(5, 8, 18, 0) 100%);
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}

html.phone .ancre-recit::after {
    height: 62%;
}

.ancre-recit.is-talking::after {
    opacity: 1;
}

.ancre-recit .recit-talk {
    z-index: 2;
    padding-bottom: calc(var(--bar) * 0.55);
}

/* Le lieu et le chapitre, sous la bande du haut */
.ancre-recit-head {
    position: absolute;
    left: 50%;
    top: calc(var(--bar) + 14px);
    z-index: 2;
    transform: translateX(-50%);
    text-align: center;
    color: #efe3c4;
    text-shadow: 0 2px 10px #000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s ease 0.4s;
}

html.phone .ancre-recit-head {
    top: calc(var(--bar) + 6px);
}

.ancre-recit.is-on .ancre-recit-head {
    opacity: 1;
}

.ancre-recit-head small {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(var(--gold-rgb), 0.9);
}

html.phone .ancre-recit-head small {
    font-size: 9.5px;
}

.ancre-recit-head b {
    display: block;
    margin-top: 4px;
    font: italic 600 21px/1.15 var(--serif);
}

html.phone .ancre-recit-head b {
    font-size: 15px;
}

/* Le carton de fin : le monde s'éteint derrière la berceuse */
.ancre-recit::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(3, 5, 12, 0.86);
    opacity: 0;
    transition: opacity 1.2s ease;
    pointer-events: none;
}

.ancre-recit:has(.recit-talk.is-final)::before {
    opacity: 1;
}

.ancre-recit:has(.recit-talk.is-final) .ancre-recit-head {
    opacity: 0;
}

/* Le signe : une page scellée d'or au-dessus de celui qui t'attend */
.ancre-recit-sign {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 125;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.ancre-recit-sign.hidden {
    opacity: 0;
}

.ancre-recit-sign-in {
    position: relative;
    width: 44px;
    height: 55px;
    filter: drop-shadow(0 0 9px rgba(243, 216, 146, 0.9)) drop-shadow(0 5px 8px rgba(0, 0, 0, 0.6));
    animation: ancre-recit-sign 2.6s ease-in-out infinite;
}

html.phone .ancre-recit-sign-in {
    width: 32px;
    height: 40px;
}

.ancre-recit-sign-in::before {
    content: '';
    position: absolute;
    inset: -55%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(243, 216, 146, 0.5), rgba(243, 216, 146, 0) 62%);
}

.ancre-recit-sign svg {
    display: block;
    width: 100%;
    height: 100%;
}

@keyframes ancre-recit-sign {
    50% { transform: translateY(-4px); }
}

/* L'annonce sur l'Ancre : qui t'attend et où, « Y aller » (hub.js showRecitCall) */
.recit-toast.is-call {
    position: fixed;
    top: 64px;
    z-index: 45;
    gap: 11px;
    padding: 8px 8px 8px 9px;
    border-radius: 18px;
}

html.phone .recit-toast.is-call {
    top: 48px;
}

.recit-toast.is-call img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(243, 216, 146, 0.6);
}

html.phone .recit-toast.is-call img {
    width: 34px;
    height: 34px;
}

.recit-toast.is-call .recit-toast-text {
    white-space: normal;
    line-height: 1.25;
}

.recit-toast.is-call .recit-toast-text small {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--muted);
}

html.phone .recit-call-more {
    display: none;
}

/* ---------- Ta cabane en vraie pièce (lot 4 : rogue/ancre-cabane.js) ---------- */

/* Le fondu de sa porte : au noir, puis la pièce (ou l'île) */
.ancre-fondu {
    position: fixed;
    inset: 0;
    z-index: 160;
    background: #04050b;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.ancre-fondu.is-on {
    opacity: 1;
    pointer-events: auto;
}

.ancre-fondu.is-now {
    transition: none;
}

/* Le livre : chaque scène vécue, « ▶ Revoir » au bout de sa ligne */
.livre-acts {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

html.phone .livre-acts .btn-ghost.small,
html.phone .livre-acts .btn-primary.small {
    padding-inline: 9px;
}

/* La vitrine : un bocal par aura ou traînée, sa lueur dedans */
.vitrine-list {
    display: grid;
    gap: 6px;
}

.vitrine-row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 6px 10px 6px 6px;
    border-radius: 12px;
    border: 1px solid var(--stroke);
    background: rgba(255, 255, 255, 0.03);
}

.vitrine-row.is-worn {
    border-color: rgba(var(--gold-rgb), 0.55);
    background: linear-gradient(90deg, rgba(var(--gold-rgb), 0.1), rgba(255, 255, 255, 0.02));
}

.vitrine-jar {
    position: relative;
    width: 24px;
    height: 32px;
    margin: 0 auto;
    border-radius: 6px 6px 8px 8px;
    border: 1.5px solid rgba(207, 224, 255, 0.5);
    background: rgba(207, 224, 255, 0.07);
    box-shadow: inset 0 3px 0 -1px rgba(var(--gold-rgb), 0.9);
}

.vitrine-jar i {
    position: absolute;
    left: 50%;
    top: 58%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    translate: -50% -50%;
    background: radial-gradient(circle, var(--k) 0%, var(--c) 60%, transparent 100%);
    box-shadow: 0 0 10px 3px color-mix(in srgb, var(--c) 70%, transparent);
}

.vitrine-body {
    min-width: 0;
}

.vitrine-body b {
    display: block;
    font-family: var(--serif);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.15;
}

.vitrine-body small {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--muted);
}

html.phone .vitrine-body small {
    display: none;
}

/* ---------- L'histoire sans menu (lot 5 : rogue/ancre-objectif.js, hub.js showFin) ---------- */

/* La carte de suivi de la quête (2026-10-17, son choix A ; rogue/ancre-objectif.js, quete-suivi.js) : en haut à gauche,
   sous le logo ; toute la carte fait « Y aller » */
.quest-track {
    position: fixed;
    left: 18px;
    top: 78px;
    z-index: 30;
    display: grid;
    width: 290px;
    padding: 12px 14px 12px 15px;
    border-radius: 14px;
    border: 1px solid rgba(var(--gold-rgb), 0.34);
    background: linear-gradient(180deg, rgba(10, 15, 32, 0.86), rgba(7, 11, 24, 0.78));
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
    color: #e8ecf5;
    font: 500 13.5px/1.35 var(--sans, Outfit, sans-serif);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

/* Le liseré d'or, à gauche */
.quest-track::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, #f3d892, #c98a3a);
}

.quest-track:hover {
    border-color: rgba(var(--gold-rgb), 0.6);
    background: linear-gradient(180deg, rgba(14, 20, 42, 0.92), rgba(9, 14, 30, 0.84));
}

.quest-track[hidden] {
    display: none;
}

.quest-track .qt-kick {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(var(--gold-rgb), 0.92);
}

.quest-track .qt-title {
    margin-top: 3px;
    font: 600 17px/1.15 var(--serif);
    color: #f3d892;
}

.quest-track .qt-what {
    display: flex;
    gap: 8px;
    align-items: baseline;
    margin-top: 6px;
    color: #dfe5f2;
}

.quest-track .qt-what b {
    font-weight: 700;
    color: #f3d892;
}

.quest-track .qt-ico {
    flex: none;
    color: #f3d892;
}

.quest-track .qt-count {
    margin-top: 5px;
    font-size: 12.5px;
    color: #c9d0de;
}

.quest-track .qt-bar {
    display: block;
    height: 5px;
    margin-top: 7px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.quest-track .qt-bar i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #e6a35a, #f3d892);
}

/* Ce qu'il faut d'abord (l'île du chapitre encore fermée) */
.quest-track .qt-pre {
    margin-top: 5px;
    font-size: 12.5px;
    color: #f0b98a;
}

.quest-track .qt-go {
    justify-self: start;
    margin-top: 9px;
    padding: 4px 12px;
    border-radius: 99px;
    font: 700 12px var(--sans, Outfit, sans-serif);
    color: #1a1406;
    background: linear-gradient(180deg, #ffe39a, #e6b94f);
}

/* Au téléphone : sous la barre du haut, réduite au chapitre et à quoi faire ; la toucher fait « Y aller » */
html.phone .quest-track {
    left: 10px;
    top: 52px;
    width: auto;
    max-width: 44vw;
    padding: 7px 11px 7px 12px;
    border-radius: 11px;
    font-size: 11px;
}

html.phone .quest-track .qt-kick {
    font-size: 8.5px;
}

html.phone .quest-track .qt-what {
    margin-top: 3px;
}

html.phone .quest-track .qt-title,
html.phone .quest-track .qt-go,
html.phone .quest-track .qt-count {
    display: none;
}

html.phone .quest-track .qt-pre {
    margin-top: 2px;
    font-size: 10.5px;
}

html.phone .quest-track .qt-bar {
    margin-top: 4px;
}

/* Le tableau animé de la fin : par-dessus le monde, sur la nuit ; « Fermer » en bas */
.recit-fin-screen {
    position: fixed;
    inset: 0;
    z-index: 150;
    display: grid;
    place-items: center;
    background: #05060d;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.recit-fin-screen.is-on {
    opacity: 1;
}

.recit-fin-screen canvas.recit-fin {
    width: min(100vw, 177.78vh);
    aspect-ratio: 16 / 9;
}

.recit-fin-head {
    position: absolute;
    left: 50%;
    top: clamp(14px, 4vh, 40px);
    translate: -50% 0;
    text-align: center;
    color: #efe3c4;
    text-shadow: 0 2px 10px #000;
    pointer-events: none;
}

.recit-fin-head span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(var(--gold-rgb), 0.9);
}

.recit-fin-head h2 {
    margin: 4px 0 0;
    font: italic 600 26px/1.1 var(--serif);
}

.recit-fin-close {
    position: absolute;
    left: 50%;
    bottom: clamp(14px, 5vh, 44px);
    translate: -50% 0;
}

/* La fenêtre d'un coffre ouvert (son choix B du 2026-10-18 sur la maquette plans/butin-archipels/fenetre/ ; coffre-menu.js) :
   le cadre des lieux, le vrai coffre ouvert dans le monde à gauche (la caméra le cadre : ancre.js frameChest), ce qu'il garde
   dans la colonne de droite ; chaque objet vole du coffre à sa ligne. La promenade se tait */
body.ancre-chest-open .quest-track,
body.ancre-chest-open .ancre-companion,
body.ancre-chest-open .ancre-map-btn,
body.ancre-chest-open .ancre-emote-btn,
body.ancre-chest-open .ancre-hint,
body.ancre-chest-open .ancre-prompt,
body.ancre-chest-open .ancre-enter,
body.ancre-chest-open .ancre-say,
body.ancre-chest-open .recit-toast {
    visibility: hidden !important;
}

.chest-menu {
    position: fixed;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    font-family: var(--font);
    color: #fff4dc;
}

.chest-menu button {
    pointer-events: auto;
}

.chest-frame {
    position: fixed;
    top: max(66px, calc(50% - 440px));
    bottom: max(58px, calc(50% - 440px));
    left: 50%;
    width: min(1360px, 97vw);
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 480px;
    border-radius: 26px;
    border: 1px solid rgba(230, 194, 107, 0.45);
    box-shadow: 0 0 0 100vmax rgba(2, 5, 12, 0.64), 0 30px 90px -30px rgba(0, 0, 0, 0.9);
    overflow: hidden;
    animation: ancre-frame 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.chest-stage {
    position: relative;
}

.chest-top {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    padding: 26px 32px 40px;
    background: linear-gradient(rgba(2, 8, 14, 0.5), rgba(2, 8, 14, 0));
}

.chest-kicker {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #ff8a5c;
}

.chest-title {
    margin: 4px 0 0;
    font-family: var(--display);
    font-weight: 400;
    font-size: 46px;
    line-height: 1.05;
    letter-spacing: 0.01em;
    color: #fff4dc;
    text-shadow: 0 3px 16px rgba(0, 0, 0, 0.6);
}

.chest-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    padding: 22px 24px;
    background: rgba(5, 10, 22, 0.94);
    border-left: 1px solid rgba(230, 194, 107, 0.28);
    pointer-events: auto;
}

.chest-sub {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #ffd98a;
}

.chest-heading {
    margin: 2px 0;
    font-family: var(--serif);
    font-weight: 600;
    font-size: 22px;
    color: #fff4dc;
}

.chest-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
}

@keyframes chest-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

.chest-row {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 9px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(230, 194, 107, 0.16);
    animation: chest-in 0.35s backwards;
}

.chest-row.is-relic,
.chest-row.is-egg,
.chest-row.is-capsule {
    border-color: rgba(255, 217, 138, 0.55);
    background: rgba(255, 217, 138, 0.07);
}

.chest-row.is-talent {
    border-color: rgba(185, 140, 255, 0.6);
}

/* Le rare (une relique, des brins, un œuf : coffre-menu.js) : sa ligne paraît en dernier et s'éclaire une fois, puis garde
   une lueur douce (sans pulsation) */
@keyframes chest-rare {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 201, 106, 0);
    }
    40% {
        box-shadow: 0 0 26px 2px rgba(255, 201, 106, 0.5);
    }
    100% {
        box-shadow: 0 0 12px 0 rgba(255, 201, 106, 0.24);
    }
}

.chest-row.is-rare {
    animation: chest-in 0.35s backwards, chest-rare 1.2s ease-out backwards;
    box-shadow: 0 0 12px 0 rgba(255, 201, 106, 0.24);
}

/* Ce que le coffre fait avancer (son état d'après « Tout récupérer ») : la suite proposée, en tête, et les barres (la
   forge, le prochain œuf) ; la part que ce coffre y ajoute, plus claire, au bout de la barre */
.chest-row.is-next,
.chest-row.is-bar {
    position: relative;
    grid-template-columns: 52px minmax(0, 1fr) auto;
}

.chest-row.is-next {
    border-color: rgba(255, 217, 138, 0.6);
    background: rgba(255, 201, 106, 0.1);
}

.chest-row.is-next .chest-text small {
    color: #ffd98a;
}

.chest-next {
    font-size: 26px;
    line-height: 1;
    color: #ffd98a;
    padding-right: 4px;
}

.chest-row.is-bar {
    padding-bottom: 16px;
}

.chest-num {
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #fff4dc;
    white-space: nowrap;
}

.chest-bar {
    position: absolute;
    left: 78px;
    right: 14px;
    bottom: 8px;
    height: 4px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.09);
    overflow: hidden;
}

.chest-bar::before,
.chest-bar::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 3px;
}

.chest-bar::before {
    left: 0;
    width: calc(var(--k) * 100%);
    background: #e6c26b;
    box-shadow: 0 0 6px rgba(230, 194, 107, 0.6);
}

.chest-bar::after {
    left: calc((var(--k) - var(--g)) * 100%);
    width: calc(var(--g) * 100%);
    background: #fff1c2;
    box-shadow: 0 0 8px rgba(255, 224, 138, 0.8);
}

.chest-row.is-locked {
    border-style: dashed;
    opacity: 0.75;
}

.chest-ico,
.chest-fly {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 50% 35%, #1d2766, #0b1030 72%);
    box-shadow: 0 0 0 1px rgba(255, 217, 138, 0.55);
    overflow: hidden;
}

.chest-ico .relic-medal,
.chest-fly .relic-medal {
    --s: 42px !important;
}

.chest-ico .coffre-ore,
.chest-fly .coffre-ore {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
}

.chest-ico .coffre-ore svg,
.chest-fly .coffre-ore svg {
    width: 60%;
    height: 60%;
}

.chest-ico .coffre-pair,
.chest-fly .coffre-pair {
    display: inline-flex;
    transform: scale(0.82);
}

.chest-ico .coffre-egg,
.chest-fly .coffre-egg {
    width: 30px;
    height: 38px;
}

.chest-ico .coffre-lock {
    width: 26px;
    height: 26px;
    color: #9aa3d6;
}

.chest-glyph {
    font-size: 28px;
    line-height: 1;
    filter: drop-shadow(0 0 8px currentColor);
}

.chest-text b {
    display: block;
    font-size: 16px;
    color: #fff4dc;
}

.chest-text small {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: #aab3d4;
}

.chest-row.is-relic .chest-text small,
.chest-row.is-egg .chest-text small {
    color: #ffd98a;
}

.chest-go {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 14px;
}

.chest-menu .btn-primary {
    font-family: var(--display);
    font-weight: 400;
    letter-spacing: 0.04em;
    color: #2b1206;
    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), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.chest-menu .btn-primary:disabled {
    opacity: 0.6;
}

.chest-later {
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid rgba(230, 194, 107, 0.35);
    background: none;
    color: #c9cff0;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.chest-later:hover,
.chest-later:focus-visible {
    border-color: rgba(230, 194, 107, 0.75);
    color: #fff4dc;
}

/* Le vol : l'icône part du coffre et va à sa ligne (--fx, --fy : le coffre, vu de la ligne) */
@keyframes chest-fly {
    0% {
        transform: translate(var(--fx), var(--fy)) scale(0.2);
        opacity: 0;
    }
    18% {
        opacity: 1;
    }
    70% {
        transform: translate(0, -6px) scale(1.08);
    }
    100% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
}

.chest-fly {
    position: fixed;
    margin: -26px 0 0 -26px;
    box-shadow: 0 0 0 1px rgba(255, 217, 138, 0.8), 0 0 22px rgba(255, 217, 138, 0.45);
    animation: chest-fly 0.9s cubic-bezier(0.25, 0.9, 0.3, 1) backwards;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .chest-fly {
        display: none;
    }

    .chest-row {
        animation: none;
    }
}

@keyframes chest-fade {
    from {
        opacity: 0;
    }
}

/* Téléphone à l'horizontale : le monde à gauche, la liste à droite, sous la barre du haut ; il entre en fondu (l'entrée des
   lieux part de translateX(-50%) : le cadre glissait de la moitié de l'écran, la caméra se calait sur lui décalé) */
html.phone .chest-frame {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    transform: none;
    border: 0;
    border-radius: 0;
    grid-template-columns: 42% 58%;
    box-shadow: none;
    animation: chest-fade 0.25s ease-out;
}

html.phone .chest-top {
    top: 50px;
    padding: 12px 16px;
}

html.phone .chest-title {
    font-size: 26px;
}

html.phone .chest-col {
    margin-top: 54px;
    border-top-left-radius: 18px;
    border-top: 1px solid rgba(230, 194, 107, 0.28);
    padding: 10px 14px;
    gap: 6px;
}

html.phone .chest-heading {
    font-size: 16px;
}

html.phone .chest-list {
    gap: 4px;
}

html.phone .chest-row {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    padding: 3px 8px;
}

html.phone .chest-row.is-next,
html.phone .chest-row.is-bar {
    grid-template-columns: 34px minmax(0, 1fr) auto;
}

html.phone .chest-row.is-bar {
    padding-bottom: 10px;
}

html.phone .chest-bar {
    left: 52px;
    right: 10px;
    bottom: 4px;
    height: 3px;
}

html.phone .chest-num {
    font-size: 12px;
}

html.phone .chest-next {
    font-size: 20px;
}

html.phone .chest-ico,
html.phone .chest-fly {
    width: 34px;
    height: 34px;
}

html.phone .chest-fly {
    margin: -17px 0 0 -17px;
}

html.phone .chest-glyph {
    font-size: 18px;
}

html.phone .chest-ico .relic-medal,
html.phone .chest-fly .relic-medal {
    --s: 28px !important;
}

html.phone .chest-ico .coffre-pair,
html.phone .chest-fly .coffre-pair {
    transform: scale(0.6);
}

html.phone .chest-ico .coffre-egg,
html.phone .chest-fly .coffre-egg {
    width: 20px;
    height: 26px;
}

html.phone .chest-text b {
    font-size: 13px;
}

html.phone .chest-text small {
    font-size: 10.5px;
    margin-top: 0;
}

html.phone .chest-menu .btn-primary {
    padding: 9px 22px;
    font-size: 14px;
    min-width: 0;
}

html.phone .chest-later {
    padding: 7px 12px;
    font-size: 12px;
}

/* Ton premier jour (rogue/premier-jour.js ; son « Ok ça me va » sur la maquette Oceara_explorer/plans/premieres-minutes/) :
   la carte de suivi pendant le premier jour, le tableau des cinq étoiles, l'étoile qui s'allume, la cinquième, le bloc de
   l'écran de fin */
.pj-stars {
    display: block;
    overflow: visible;
}

.pj-stars line {
    stroke: rgba(243, 216, 146, 0.32);
    stroke-width: 1.2;
}

.pj-stars line.on {
    stroke: rgba(243, 216, 146, 0.85);
}

.pj-star {
    fill: rgba(150, 160, 200, 0.22);
    stroke: rgba(243, 216, 146, 0.42);
    stroke-width: 1;
}

.pj-star.is-on {
    stroke: #fff2c6;
    filter: drop-shadow(0 0 5px rgba(255, 210, 120, 0.85));
}

.pj-star.is-now {
    fill: rgba(243, 216, 146, 0.18);
    stroke: #f3d892;
    stroke-width: 1.4;
}

.pj-ring {
    fill: none;
    stroke: rgba(243, 216, 146, 0.55);
    stroke-width: 1;
    stroke-dasharray: 2 3;
}

.pj-ico {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, #1d2766, #0b1030 72%);
    box-shadow: 0 0 0 1px rgba(255, 217, 138, 0.55);
    overflow: hidden;
}

.pj-ico .egg {
    width: 22px;
    height: 28px;
}

.pj-ico .pj-glyph {
    font-size: 19px;
    line-height: 1;
    filter: drop-shadow(0 0 6px currentColor);
}

.pj-ico .relic-medal {
    --s: 30px !important;
}

.pj-ico.lg {
    width: 58px;
    height: 58px;
}

.pj-ico.lg .egg {
    width: 38px;
    height: 48px;
}

.pj-ico.lg .pj-glyph {
    font-size: 32px;
}

.pj-ico.lg .relic-medal {
    --s: 52px !important;
}

.pj-hatch {
    position: relative;
    display: inline-grid;
    place-items: center;
}

.pj-hatch .pj-crack {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* La carte, à la place de la carte de suivi (ancre-objectif.js) */
.quest-track.is-day {
    width: 300px;
}

.quest-track.is-day .pj-kick {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(var(--gold-rgb), 0.92);
}

.quest-track.is-day .pj-kick small {
    font-size: 11px;
    letter-spacing: 0.04em;
    color: #cfd6e6;
    text-transform: none;
    font-weight: 600;
}

.quest-track.is-day .pj-stars {
    margin: 7px 0 2px;
}

.quest-track.is-day .pj-title {
    margin-top: 4px;
    font: 600 17px/1.15 var(--serif);
    color: #f3d892;
}

.quest-track.is-day .pj-how {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.35;
    color: #dfe5f2;
}

.quest-track.is-day .pj-row {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 9px;
    padding: 6px 8px;
    border-radius: 11px;
    background: rgba(255, 217, 138, 0.07);
    border: 1px solid rgba(255, 217, 138, 0.25);
}

.quest-track.is-day .pj-row b {
    display: block;
    font-size: 13.5px;
    color: #fff4dc;
}

.quest-track.is-day .pj-row small {
    display: block;
    font-size: 11.5px;
    color: #c9cfe6;
}

.quest-track.is-day .pj-for {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(243, 216, 146, 0.8);
}

.quest-track.is-day .pj-go {
    justify-self: start;
    display: inline-flex;
    margin-top: 9px;
    padding: 6px 13px;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffe46c, #f0a53a);
    color: #2b1206;
    font-weight: 700;
    font-size: 13px;
}

.quest-track.is-day .pj-last {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    font-size: 11.5px;
    color: #aab3d4;
}

.quest-track.is-day .pj-last .egg {
    width: 14px;
    height: 18px;
}

html.phone .quest-track.is-day {
    width: 236px;
}

html.phone .quest-track.is-day .pj-how,
html.phone .quest-track.is-day .pj-last,
html.phone .quest-track.is-day .pj-go {
    display: none;
}

html.phone .quest-track.is-day .pj-title {
    font-size: 14px;
}

html.phone .quest-track.is-day .pj-row {
    margin-top: 6px;
    padding: 4px 6px;
}

/* Le tableau des cinq étoiles */
/* (les fenêtres du premier jour : au-dessus des repères de l'Ancre, la page scellée du Récit à 125, sous une scène à 135 et
   les fondus à 160) */
#pj-board {
    position: fixed;
    inset: 0;
    z-index: 128;
    display: grid;
    place-items: center;
    background: rgba(2, 5, 12, 0.66);
    font-family: var(--font);
    color: #eef1fa;
}

#pj-board .pj-panel {
    position: relative;
    width: min(1180px, 94vw);
    padding: 26px 30px 24px;
    border-radius: 24px;
    border: 1px solid rgba(230, 194, 107, 0.45);
    /* (opaque : la bulle d'un lieu ne transparaît plus) */
    background: radial-gradient(ellipse at 50% 0%, rgba(40, 52, 110, 0.55), rgba(6, 10, 24, 0) 62%), #060a18;
    box-shadow: 0 30px 90px -30px rgba(0, 0, 0, 0.9);
}

#pj-board .pj-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

#pj-board .pj-kick {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #ff8a5c;
}

#pj-board h2 {
    margin: 4px 0 0;
    font: 400 42px/1.05 var(--display);
    color: #fff4dc;
    letter-spacing: 0.01em;
}

#pj-board .pj-sub {
    margin: 6px 0 0;
    color: #c9d0e6;
    font-size: 14.5px;
}

#pj-board .pj-count {
    font: 600 15px var(--serif);
    color: #f3d892;
    white-space: nowrap;
}

#pj-board .pj-sky {
    margin: 14px 0 6px;
}

#pj-board .pj-sky .pj-stars {
    width: 100%;
    height: auto;
}

#pj-board .pj-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) 1.35fr;
    gap: 12px;
    align-items: stretch;
}

#pj-board .pj-step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 14px 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(230, 194, 107, 0.18);
}

#pj-board .pj-step.is-done {
    border-color: rgba(255, 217, 138, 0.5);
    background: rgba(255, 217, 138, 0.07);
}

#pj-board .pj-step.is-now {
    border-color: #f3d892;
    box-shadow: 0 0 0 1px rgba(243, 216, 146, 0.35), 0 0 28px -6px rgba(243, 216, 146, 0.45);
}

#pj-board .pj-step.is-big {
    background: linear-gradient(180deg, rgba(255, 217, 138, 0.12), rgba(255, 217, 138, 0.03));
    border-color: rgba(255, 217, 138, 0.55);
}

#pj-board .pj-n {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(243, 216, 146, 0.85);
}

#pj-board .pj-t {
    font: 600 17px/1.15 var(--serif);
    color: #fff4dc;
}

#pj-board .pj-h {
    flex: 1;
    font-size: 12.5px;
    line-height: 1.35;
    color: #c3cbe2;
}

#pj-board .pj-r {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 9px;
    border-top: 1px dashed rgba(230, 194, 107, 0.25);
}

#pj-board .pj-r b {
    display: block;
    font-size: 14px;
    color: #fff4dc;
}

#pj-board .pj-r small {
    display: block;
    font-size: 11.5px;
    color: #c9cfe6;
}

#pj-board .pj-state {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 11px;
    font-weight: 700;
    color: #9de0a8;
}

#pj-board .pj-step.is-now .pj-state {
    color: #f3d892;
}

#pj-board .pj-step.is-big .pj-r {
    flex-direction: column;
    align-items: flex-start;
}

#pj-board .pj-pair {
    display: flex;
    gap: 10px;
    align-items: center;
}

#pj-board .pj-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    color: #aab3d4;
    font-size: 13px;
}

#pj-board .pj-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

#pj-board .pj-close {
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid rgba(230, 194, 107, 0.4);
    background: none;
    color: #e8ecf5;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

#pj-board .pj-close:hover,
#pj-board .pj-close:focus-visible {
    border-color: rgba(230, 194, 107, 0.8);
}

html.phone #pj-board .pj-panel {
    width: 96vw;
    padding: 12px 14px;
    border-radius: 16px;
}

html.phone #pj-board h2 {
    font-size: 24px;
}

html.phone #pj-board .pj-sub,
html.phone #pj-board .pj-sky,
html.phone #pj-board .pj-h {
    display: none;
}

html.phone #pj-board .pj-steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    margin-top: 8px;
}

html.phone #pj-board .pj-step {
    padding: 8px;
    gap: 5px;
    border-radius: 11px;
}

html.phone #pj-board .pj-t {
    font-size: 12.5px;
}

html.phone #pj-board .pj-r {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding-top: 5px;
}

html.phone #pj-board .pj-r b {
    font-size: 11.5px;
}

html.phone #pj-board .pj-r small {
    display: none;
}

html.phone #pj-board .pj-state {
    top: 8px;
    right: 8px;
    font-size: 9.5px;
}

html.phone #pj-board .pj-foot {
    justify-content: flex-end;
    margin-top: 8px;
    font-size: 11px;
}

html.phone #pj-board .pj-foot > span:first-child {
    display: none;
}

/* Une étoile qui s'allume */
@keyframes pj-in {
    from {
        opacity: 0;
        transform: translate(-50%, -12px) scale(0.96);
    }
}

@keyframes pj-star {
    0% {
        transform: scale(0.2);
        opacity: 0;
    }
    60% {
        transform: scale(1.18);
        opacity: 1;
    }
    100% {
        transform: scale(1);
    }
}

#pj-lit {
    position: fixed;
    left: 50%;
    top: 84px;
    z-index: 127;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 22px 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(255, 217, 138, 0.6);
    background: radial-gradient(ellipse at 20% 50%, rgba(255, 200, 100, 0.2), rgba(8, 12, 28, 0.94) 60%);
    box-shadow: 0 20px 50px -16px rgba(0, 0, 0, 0.85), 0 0 40px -10px rgba(255, 200, 100, 0.45);
    font-family: var(--font);
    color: #eef1fa;
    pointer-events: none;
    animation: pj-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition: opacity 0.5s ease;
}

#pj-lit.over-menu {
    top: 10px;
}

#pj-lit.leaving {
    opacity: 0;
}

#pj-lit .pj-bigstar {
    width: 64px;
    height: 64px;
    filter: drop-shadow(0 0 10px rgba(255, 210, 120, 0.7));
    animation: pj-star 0.9s cubic-bezier(0.25, 0.9, 0.3, 1);
}

#pj-lit .pj-k {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #ffcf7a;
}

#pj-lit .pj-t {
    display: block;
    margin-top: 2px;
    font: 400 26px/1.1 var(--display);
    color: #fff4dc;
}

#pj-lit .pj-rw {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

#pj-lit .pj-rw b {
    display: block;
    font-size: 15px;
    color: #fff4dc;
}

#pj-lit .pj-rw small {
    display: block;
    font-size: 12px;
    color: #d7dcef;
}

html.phone #pj-lit {
    top: 56px;
    gap: 10px;
    padding: 8px 14px 8px 10px;
}

/* (au téléphone, sur un menu : une bannière compacte, entre le bouton « L'Ancre » et les monnaies, au-dessus du titre du
   panneau) */
html.phone #pj-lit.over-menu {
    top: 4px;
    gap: 8px;
    padding: 5px 12px 5px 8px;
}

html.phone #pj-lit.over-menu .pj-bigstar {
    width: 28px;
    height: 28px;
}

html.phone #pj-lit.over-menu .pj-k {
    font-size: 9px;
}

html.phone #pj-lit.over-menu .pj-t {
    font-size: 15px;
}

html.phone #pj-lit.over-menu .pj-rw {
    margin-top: 1px;
}

html.phone #pj-lit.over-menu .pj-rw .pj-ico,
html.phone #pj-lit.over-menu .pj-rw small {
    display: none;
}

html.phone #pj-lit.over-menu .pj-rw b {
    font-size: 12px;
}

html.phone #pj-lit .pj-bigstar {
    width: 40px;
    height: 40px;
}

html.phone #pj-lit .pj-t {
    font-size: 18px;
}

@media (prefers-reduced-motion: reduce) {
    #pj-lit,
    #pj-lit .pj-bigstar,
    #pj-final .pj-panel {
        animation: none;
    }
}

/* La cinquième étoile : la grande récompense */
@keyframes pj-in2 {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
}

#pj-final {
    position: fixed;
    inset: 0;
    z-index: 129;
    display: grid;
    place-items: center;
    background: radial-gradient(ellipse at 50% 45%, rgba(40, 30, 10, 0.55), rgba(2, 5, 12, 0.82) 70%);
    font-family: var(--font);
    color: #eef1fa;
}

#pj-final .pj-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(760px, 92vw);
    padding: 30px 34px 26px;
    border-radius: 26px;
    border: 1px solid rgba(255, 217, 138, 0.6);
    background: radial-gradient(ellipse at 50% 0%, rgba(90, 70, 20, 0.5), rgba(8, 12, 28, 0) 60%), #080c1c;
    text-align: center;
    box-shadow: 0 30px 90px -30px rgba(0, 0, 0, 0.9), 0 0 80px -20px rgba(255, 200, 100, 0.4);
    animation: pj-in2 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

#pj-final .pj-k {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #ffcf7a;
}

#pj-final h2 {
    margin: 6px 0 0;
    font: 400 44px/1.05 var(--display);
    color: #fff4dc;
}

#pj-final p {
    margin: 8px auto 0;
    max-width: 520px;
    color: #d3d9ec;
    font-size: 15px;
    line-height: 1.45;
}

#pj-final .pj-gifts {
    display: flex;
    justify-content: center;
    gap: 22px;
    margin: 22px 0 6px;
}

#pj-final .pj-gift {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 210px;
    padding: 18px 14px 14px;
    border-radius: 18px;
    border: 1px solid rgba(255, 217, 138, 0.5);
    background: rgba(255, 217, 138, 0.07);
}

#pj-final .pj-gift .egg {
    width: 70px;
    height: 90px;
    filter: drop-shadow(0 0 18px rgba(255, 210, 120, 0.55));
}

#pj-final .pj-gift b {
    font-size: 16px;
    color: #fff4dc;
}

#pj-final .pj-gift small {
    font-size: 12.5px;
    color: #c9cfe6;
}

#pj-final .pj-trail {
    width: 120px;
    height: 90px;
}

#pj-final .pj-final-go {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-top: 16px;
}

#pj-final .btn-primary,
#pj-board .btn-primary {
    min-width: 0;
    font-family: var(--display);
    font-weight: 400;
    letter-spacing: 0.04em;
    color: #2b1206;
    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), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

/* (le tableau : un bouton à sa taille, pas celle d'un écran de fin) */
#pj-board .btn-primary {
    padding: 10px 26px;
    font-size: 16px;
}

html.phone #pj-board .btn-primary,
html.phone #pj-final .btn-primary {
    padding: 9px 22px;
    font-size: 14px;
    width: auto;
}

#pj-final .pj-later {
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid rgba(230, 194, 107, 0.35);
    background: none;
    color: #c9cff0;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

html.phone #pj-final .pj-panel {
    padding: 14px 16px;
}

html.phone #pj-final h2 {
    font-size: 26px;
}

html.phone #pj-final p {
    font-size: 12.5px;
}

html.phone #pj-final .pj-gifts {
    margin: 10px 0 4px;
    gap: 12px;
}

html.phone #pj-final .pj-gift {
    width: 170px;
    padding: 10px;
    gap: 6px;
}

html.phone #pj-final .pj-gift .egg {
    width: 44px;
    height: 56px;
}

html.phone #pj-final .pj-trail {
    width: 80px;
    height: 56px;
}

html.phone #pj-final .pj-final-go {
    margin-top: 8px;
}

/* L'écran de fin : le bloc du premier jour (ui.js showEnd) */
.pj-end {
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 217, 138, 0.42);
    background: linear-gradient(180deg, rgba(255, 217, 138, 0.1), rgba(255, 217, 138, 0.03));
    text-align: left;
}

.pj-end .pj-k {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #ffcf7a;
}

.pj-end .pj-line {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    font-size: 13.5px;
    color: #eef1fa;
}

.pj-end .pj-line b {
    color: #fff4dc;
}

.pj-end .pj-line small {
    display: block;
    font-size: 12px;
    color: #c9cfe6;
}

.pj-end .pj-next {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px dashed rgba(230, 194, 107, 0.3);
    font-size: 12.5px;
    color: #c9cfe6;
}

.pj-end .pj-next b {
    color: #f3d892;
}

html.phone .pj-end {
    margin: 0 0 6px;
    padding: 7px 9px;
}

html.phone .pj-end .pj-line {
    margin-top: 4px;
    font-size: 12px;
}

html.phone .pj-end .pj-next {
    margin-top: 5px;
    padding-top: 5px;
    font-size: 11px;
}

/* =====================================================================================================================
   LES MENUS DE L'ANCRE, v4 (ses choix du 2026-10-18 : « des fois ça sert à rien d'afficher quelque chose du monde… il faut
   passer plus de temps sur les menus et faire quelque chose de cohérent » ; rogue/ancre-lieux.js LAYOUTS, hub.js
   placeFrame). Un lieu montre le monde seulement quand ce qu'on y choisit est dans le monde :
   - registre (data-layout) : des listes, des chiffres, des choix ; le menu prend tout le cadre, en colonnes ;
   - vitrine : le monde et ce qu'on y regarde à gauche, sa petite fiche au-dessus de lui (hub.js renderStageFiche, ancre.js
     placeFiche) ; la fiche entière se déplie dans le menu, sous sa ligne (comme sur un écran étroit) ;
   - arbre : les Maîtrises, l'arbre en grand sur un fond de nuit.
   Partout, l'en-tête du lieu en tête du menu (.place-head) : son habitant, son nom, sa phrase, ce qu'il compte, un « ? ».
   ===================================================================================================================== */

.hub.is-ancre {
    --menu-night: radial-gradient(130% 70% at 50% 0%, rgba(255, 200, 110, 0.06), transparent 60%),
        radial-gradient(rgba(255, 238, 205, 0.03) 1px, transparent 1.4px) 0 0 / 13px 13px,
        linear-gradient(180deg, #121a30 0%, #0b1224 60%, #090f1e 100%);
    --menu-pad: 18px;
}

/* ---------- L'en-tête du lieu (registre, vitrine, arbre) ---------- */
/* (scroll-padding : une ligne choisie qu'on fait défiler jusqu'à elle s'arrête sous l'en-tête, pas dessous) */
.hub.is-ancre[data-layout] #hub-panel {
    padding: 0 var(--menu-pad) 18px !important;
    scroll-padding-top: 128px;
}

/* Un registre (toute la largeur) : le visage, le nom et la phrase sur deux lignes, ce que compte le lieu et « ? » au bout ;
   la colonne d'une vitrine : le nom et « ? », la phrase dessous, ce que compte le lieu sur sa propre ligne */
.hub.is-ancre .place-head {
    position: sticky;
    top: 0;
    z-index: 4;
    flex-shrink: 0;
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) auto auto;
    grid-template-areas:
        'face name count help'
        'face line count help';
    align-items: center;
    column-gap: 14px;
    margin: 0 calc(-1 * var(--menu-pad));
    padding: 14px var(--menu-pad) 10px;
    background: #070c19;
    box-shadow: 0 1px 0 rgba(var(--gold-rgb), 0.16);
}

/* (un fondu sous l'en-tête : ce qui défile dessous s'y efface) */
.hub.is-ancre .place-head::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 14px;
    background: linear-gradient(180deg, rgba(7, 12, 25, 0.9), rgba(7, 12, 25, 0));
    pointer-events: none;
}

/* (un registre : l'en-tête sur la nuit du cadre) */
.hub.is-ancre[data-layout='registre'] .place-head {
    background: #111a2f;
}

.hub.is-ancre[data-layout='registre'] .place-head::after {
    background: linear-gradient(180deg, rgba(17, 26, 47, 0.9), rgba(17, 26, 47, 0));
}

.hub.is-ancre .place-head > :is(.place-face, .place-icon) { grid-area: face; }
.hub.is-ancre .place-head > .place-name { grid-area: name; }
.hub.is-ancre .place-head > .place-line { grid-area: line; }
.hub.is-ancre .place-head > .place-count { grid-area: count; }
.hub.is-ancre .place-head > .page-help { grid-area: help; }

.hub.is-ancre:not([data-layout='registre']) .place-head {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-areas:
        'face name help'
        'face line line'
        'count count count';
    column-gap: 12px;
}

.hub.is-ancre:not([data-layout='registre']) .place-head > .place-count {
    justify-content: flex-start;
    margin-top: 8px;
    text-align: left;
}

.hub.is-ancre .place-head .place-face,
.hub.is-ancre .place-head .place-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid rgba(var(--gold-rgb), 0.85);
    box-shadow: 0 0 0 4px #0c1426, 0 0 0 5px rgba(var(--gold-rgb), 0.3);
    background: #0b1a2a;
}

.hub.is-ancre .place-head .place-face {
    object-fit: cover;
}

.hub.is-ancre .place-head .place-icon {
    display: grid;
    place-items: center;
    color: #ffd98a;
    font-size: 23px;
}

.hub.is-ancre .place-head h2 {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 12px;
    margin: 0;
    line-height: 1.05;
}

.hub.is-ancre .place-head h2 b {
    font-family: var(--display);
    font-weight: 400;
    font-size: 27px;
    color: #fff4df;
}

.hub.is-ancre .place-head h2 small {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(var(--gold-rgb), 0.85);
}

.hub.is-ancre .place-head .place-line {
    margin: 5px 0 0;
    font-family: var(--serif);
    font-style: italic;
    font-size: 15px;
    line-height: 1.35;
    color: rgba(240, 234, 220, 0.86);
}

.hub.is-ancre .place-head .place-line q {
    quotes: '«\00a0' '\00a0»';
}

.hub.is-ancre .place-head .place-line cite {
    font-family: var(--font);
    font-style: normal;
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(226, 232, 245, 0.45);
}

.hub.is-ancre .place-head .place-line cite::before {
    content: '— ';
}

.hub.is-ancre:not([data-layout='registre']) .place-head :is(.place-face, .place-icon) {
    width: 44px;
    height: 44px;
    font-size: 20px;
}

.hub.is-ancre:not([data-layout='registre']) .place-head h2 b {
    font-size: 24px;
}

.hub.is-ancre:not([data-layout='registre']) .place-head .place-line {
    font-size: 14px;
}

.hub.is-ancre .place-head .place-count {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px 10px;
    font-size: 13px;
    color: rgba(226, 232, 245, 0.66);
    text-align: right;
}

/* ---------- Registre : le menu prend tout le cadre ---------- */
/* (!important : hub.css règle la grille de l'Expédition par .hub-main:has(#hub-panel[data-tab='play']), plus forte) */
html:not(.phone) .hub.is-ancre[data-layout='registre']:not(.is-roaming):not(.is-forced) .hub-main {
    grid-template-columns: minmax(0, 1fr) !important;
}

.hub.is-ancre[data-layout='registre']:not(.is-roaming) .stage-card {
    display: none !important;
}

html:not(.phone) .hub.is-ancre[data-layout='registre']:not(.is-roaming):not(.is-forced) .pages {
    grid-column: 1;
    border-left: 0;
    background: var(--menu-night);
}

.hub.is-ancre[data-layout='registre'] {
    --menu-pad: 24px;
}

/* Les colonnes : chaque bloc garde son cadre */
.hub.is-ancre .registre-cols {
    flex-shrink: 0;
    display: grid;
    gap: 16px;
    align-items: start;
}

.hub.is-ancre .registre-cols > .reg-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hub.is-ancre .registre-cols > .page,
.hub.is-ancre .registre-cols > .reg-col > .page {
    margin: 0;
    min-width: 0;
}

/* L'Expédition : choisir (la carte des ciels), voir (l'archipel en grand), partir (l'altitude, les départs) */
.hub.is-ancre .reg-play {
    grid-template-columns: minmax(260px, 0.82fr) minmax(0, 1.45fr) minmax(300px, 1fr);
}

.hub.is-ancre .reg-brief {
    position: relative;
}

/* L'île de l'archipel en bandeau (son image, puis son île filmée), le titre de l'archipel posé dessus */
.hub.is-ancre .reg-brief .brief-banner {
    position: relative;
    height: 190px;
    margin-bottom: -86px;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent);
    mask-image: linear-gradient(180deg, #000 45%, transparent);
    pointer-events: none;
}

.hub.is-ancre .reg-brief .brief-banner :is(.brief-art, .brief-loop) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hub.is-ancre .reg-brief .brief-banner .brief-loop {
    opacity: 0;
    transition: opacity 0.6s ease;
}

.hub.is-ancre .reg-brief .brief-banner .brief-loop.is-playing {
    opacity: 1;
}

.hub.is-ancre .reg-brief .page-archipel {
    border-top-color: transparent;
    background: linear-gradient(180deg, rgba(7, 14, 30, 0) 0, rgba(7, 14, 30, 0.82) 70px, rgba(7, 14, 30, 0.9)), var(--glass);
}

.hub.is-ancre .reg-brief .arch-title {
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.85);
}

.hub.is-ancre .reg-brief .arch-tagline {
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}

.hub.is-ancre .reg-brief .isle-list {
    grid-template-columns: minmax(0, 1fr) !important;
}

/* L'altitude et les départs tiennent dans la hauteur du cadre (le rappel de l'altitude est dans la bulle de « max ») */
.hub.is-ancre .reg-go .alt-note {
    display: none;
}

.hub.is-ancre .reg-go .page {
    padding: 14px 16px 16px;
}

.hub.is-ancre .reg-go .page-play .page-aside[data-tip] {
    cursor: help;
    text-decoration: underline dotted rgba(226, 232, 245, 0.35);
    text-underline-offset: 3px;
}

.hub.is-ancre .reg-go .depth-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 8px;
}

.hub.is-ancre .reg-go .depth-value {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
}

.hub.is-ancre .reg-go .depth-value b {
    font-size: 34px;
    line-height: 1;
}

.hub.is-ancre .reg-go .facts {
    margin: 4px 0 10px;
    gap: 8px;
}

.hub.is-ancre .reg-go .facts .fact {
    padding: 6px 10px;
}

.hub.is-ancre .reg-go .affix-list {
    gap: 6px;
}

.hub.is-ancre .reg-go .affix-chip {
    padding: 3px 9px;
    font-size: 11.5px;
}

/* Les départs : l'en-tête sur deux lignes (le mot et l'entraînement, puis ton compagnon), deux tuiles par rangée, l'icône à
   gauche du nom */
.hub.is-ancre .reg-go .page-head:has(.training-btn) {
    flex-wrap: wrap;
    row-gap: 6px;
}

.hub.is-ancre .reg-go .page-head:has(.training-btn) .page-aside {
    flex: 1 0 100%;
}

.hub.is-ancre .reg-go .play-modes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hub.is-ancre .reg-go .mode-tile {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    justify-items: start;
    column-gap: 7px;
    row-gap: 0;
    min-height: 0;
    padding: 9px 10px;
    text-align: left;
}

.hub.is-ancre .reg-go .mode-tile .mode-icon {
    grid-row: 1 / span 2;
    justify-self: center;
    margin: 0;
    font-size: 11px;
    letter-spacing: -0.1em;
    white-space: nowrap;
}

.hub.is-ancre .reg-go .mode-tile :is(b, small) {
    grid-column: 2;
    white-space: nowrap;
}

.hub.is-ancre .reg-go .mode-tile b {
    font-size: 14px;
}

/* Les Quêtes : du jour · de la semaine · l'œuf de la semaine et la quête commune */
.hub.is-ancre .reg-quests {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hub.is-ancre .page-week-egg .week-egg {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    column-gap: 14px;
}

.hub.is-ancre .page-week-egg .week-egg-art svg {
    width: 64px;
    height: auto;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5));
}

.hub.is-ancre .page-week-egg .stage-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.hub.is-ancre .page-commune .commune {
    width: auto;
    max-width: none;
    margin: 0;
}

.hub.is-ancre .page-commune .commune-tiers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Les Demandes : la grande demande et les tiennes, côte à côte */
.hub.is-ancre .reg-demandes {
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}

/* Les Classements : les choix à gauche, le tableau en grand ; le podium de la semaine au-dessus, sur toute la largeur */
.hub.is-ancre .reg-boards {
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    grid-template-areas:
        'podium podium'
        'filters board'
        'guardians board';
}

.hub.is-ancre .reg-boards > .page-podium { grid-area: podium; }
.hub.is-ancre .reg-boards > .page-boards { grid-area: filters; }
.hub.is-ancre .reg-boards > .page-board { grid-area: board; }
.hub.is-ancre .reg-boards > .page-guardians { grid-area: guardians; }

/* (la ligne de la Cime touchée : son build se déplie dessous, « Voir sa créature » le montre dans le monde) */
.hub.is-ancre[data-layout] .board-list li.cime-inline {
    display: block;
}

.hub.is-ancre .cime-build .cime-look {
    float: right;
    margin: 0 0 6px 10px;
}

/* Le Sanctuaire : les offrandes en cartes, trois par rangée ; les cinq autels de la Cime côte à côte */
.hub.is-ancre .reg-sanctuary .shrine-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.hub.is-ancre .reg-sanctuary .shrine {
    margin: 0;
    min-height: 88px;
}

.hub.is-ancre .reg-sanctuary .altar-list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* Les Reliques : ce que porte ton compagnon et la relique choisie à gauche, la collection par archipel à droite */
.hub.is-ancre .relic-page.is-registre .relic-cols {
    display: grid;
    grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.hub.is-ancre .relic-page.is-registre .relic-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hub.is-ancre .relic-page.is-registre .relic-archs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
}

.hub.is-ancre .relic-page.is-registre .relic-detail {
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(var(--gold-rgb), 0.28);
    background: rgba(8, 14, 28, 0.6);
}

.hub.is-ancre .relic-page.is-registre .relic-odds {
    margin: 0;
}

/* ---------- Vitrine : la petite fiche au-dessus de ce qu'on regarde, la fiche entière sous sa ligne ---------- */
.hub.is-ancre[data-layout='vitrine']:not(.is-roaming) .stage-card:not(.has-mastery-sheet) .stage-sheet {
    display: none !important;
}

/* (le Carnet garde la fiche de sa bête : rien ne la porte ailleurs) */
.hub.is-ancre[data-layout='vitrine'][data-place='codex']:not(.is-roaming) .stage-card .stage-sheet {
    display: block !important;
}

.hub.is-ancre[data-layout='vitrine']:not(.is-roaming) :is(.mk-inline, .recipe-sheet-panel, .nest-forecast-panel, .trade-panel-sheet) {
    display: block;
}

.hub.is-ancre[data-layout='vitrine']:not(.is-roaming) .recipe-sheet-panel:empty {
    display: none;
}

.hub.is-ancre[data-layout='vitrine']:not(.is-roaming) .mk-inline-card {
    margin: 2px 0 8px;
    padding: 13px 14px;
    border-radius: 14px;
    border: 1px solid rgba(var(--c-rgb), 0.5);
}

/* La fiche flotte au-dessus du sujet : le titre de la scène s'en va (elle le dit) */
.hub.is-ancre .stage-card.has-fiche #hub-stage-top {
    display: none;
}

.hub.is-ancre .stage-fiche {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 6;
    width: 0;
    height: 0;
    pointer-events: none;
}

.hub.is-ancre .stage-fiche:empty,
.hub.is-ancre.is-roaming .stage-fiche {
    display: none;
}

.hub.is-ancre .stage-fiche .fiche-card,
.hub.is-ancre #hub-panel > .fiche-card {
    width: max-content;
    max-width: 340px;
    padding: 12px 14px 12px;
    border-radius: 16px;
    border: 1px solid rgba(var(--gold-rgb), 0.5);
    background: linear-gradient(180deg, rgba(21, 30, 54, 0.96), rgba(10, 16, 32, 0.96));
    box-shadow: 0 22px 44px -22px rgba(0, 0, 0, 0.95), 0 0 0 4px rgba(var(--gold-rgb), 0.05);
    color: #eef1f8;
}

.hub.is-ancre .stage-fiche .fiche-card {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, calc(-100% - 14px));
    pointer-events: auto;
    animation: fiche-in 0.3s ease both;
}

/* La pointe vers le sujet */
.hub.is-ancre .stage-fiche .fiche-card::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -7px;
    width: 12px;
    height: 12px;
    transform: translateX(-50%) rotate(45deg);
    background: #0c1326;
    border-right: 1px solid rgba(var(--gold-rgb), 0.5);
    border-bottom: 1px solid rgba(var(--gold-rgb), 0.5);
}

@keyframes fiche-in {
    from {
        opacity: 0;
        translate: 0 6px;
    }
}

/* Sans sujet à pointer : en haut à gauche du monde */
.hub.is-ancre .stage-fiche.is-docked {
    transform: translate(26px, 22px) !important;
}

.hub.is-ancre .stage-fiche.is-docked .fiche-card {
    transform: none;
}

.hub.is-ancre .stage-fiche.is-docked .fiche-card::after {
    display: none;
}

.hub.is-ancre .fiche-card .fiche-kicker {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(var(--gold-rgb), 0.95);
}

.hub.is-ancre .fiche-card .fiche-kicker .dot {
    opacity: 0.6;
}

.hub.is-ancre .fiche-card .fiche-name {
    display: block;
    margin: 2px 0 6px;
    font-family: var(--display);
    font-weight: 400;
    font-size: 24px;
    line-height: 1.05;
    color: #fff6e6;
}

.hub.is-ancre .fiche-card .fiche-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.hub.is-ancre .fiche-card .fiche-chips .tag {
    font-size: 11.5px;
}

/* Les valeurs innées (les mêmes cases que la liste) : une ligne, ou deux pour un couple (♂, ♀) */
.hub.is-ancre .fiche-card .fiche-ivs {
    display: grid;
    gap: 3px;
    margin: 10px 0 2px;
}

.hub.is-ancre .fiche-card .fiche-iv-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(34px, 1fr));
    gap: 4px;
    align-items: center;
}

.hub.is-ancre .fiche-card .fiche-ivs.is-pair .fiche-iv-row {
    grid-template-columns: 16px repeat(5, minmax(34px, 1fr));
}

.hub.is-ancre .fiche-card .fiche-iv-row > i {
    font-style: normal;
    font-size: 12px;
    color: rgba(226, 232, 245, 0.7);
}

.hub.is-ancre .fiche-card .fiche-iv-head small {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
    color: rgba(226, 232, 245, 0.5);
}

.hub.is-ancre .fiche-card .fiche-iv-row > b {
    display: block;
    padding: 3px 0;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.05);
    font-size: 13px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.hub.is-ancre .fiche-card .fiche-bar {
    height: 6px;
    margin: 9px 0 2px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.hub.is-ancre .fiche-card .fiche-bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ffb53d, #ffe46c);
}

.hub.is-ancre .fiche-card .fiche-line {
    margin: 7px 0 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: rgba(226, 232, 245, 0.75);
}

.hub.is-ancre .fiche-card .fiche-line .warn {
    color: #ffb27a;
}

.hub.is-ancre .fiche-card .fiche-act {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.hub.is-ancre .fiche-card .fiche-act button {
    flex: 1 1 auto;
}

/* ---------- Arbre : le ciel des maîtrises (2026-10-19, rogue/mastery-sky.js) : la caméra lève les yeux de la pierre vers la
   nuit (ancre.js SHOTS.mastery) ; le ciel se lit à travers la scène, à peine assombri sur les bords et en bas ---------- */
.hub.is-ancre[data-layout='arbre']:not(.is-roaming) .stage-card {
    background: radial-gradient(ellipse 78% 72% at 50% 40%, rgba(3, 4, 10, 0) 50%, rgba(3, 4, 10, 0.45) 100%),
        linear-gradient(to top, rgba(3, 4, 10, 0.5), rgba(3, 4, 10, 0) 22%);
}

.hub.is-ancre[data-layout='arbre']:not(.is-roaming) #hub-stage-top {
    display: none;
}

.hub.is-ancre[data-layout='arbre']:not(.is-roaming) .stage-card.has-mastery-sheet .stage-sheet {
    inset: 0;
}

.hub.is-ancre[data-layout='arbre'] .stage-card.has-mastery-sheet .stage-sheet::before {
    display: none;
}

html .hub.is-ancre[data-layout='arbre']:not(.is-roaming) .stage-card.has-mastery-sheet .stage-sheet-inner.mastery-sheet {
    overflow: visible;
}

.mastery-sky {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: auto;
}

.mastery-sky .msky {
    position: absolute;
    inset: 0;
    display: block;
    overflow: visible;
}

.mastery-sky text {
    font-family: var(--serif);
    user-select: none;
}

.mastery-sky .sans,
.mastery-sky .micon {
    font-family: 'Outfit', system-ui, sans-serif;
}

/* Les noms lisibles sur la nuit : un liseré d'encre sous la lettre */
.mastery-sky .mname,
.mastery-sky .mbranch-name {
    paint-order: stroke;
    stroke: #05060d;
    stroke-width: 3px;
    stroke-opacity: 0.75;
    stroke-linejoin: round;
}

/* (les règles de la grille d'avant, hub.css .mnode : ni mouvement, ni cadre, ni ombre sur une étoile) */
.mastery-sky .mnode,
.mastery-sky .mnode:hover,
.mastery-sky .mnode.learnable:hover,
.mastery-sky .mnode.focus,
.mastery-sky .mnode:focus-visible {
    transform: none;
    transition: none;
    outline: none;
    box-shadow: none;
}

.mastery-sky .mnode {
    cursor: default;
}

.mastery-sky .mnode.learnable,
.mastery-sky .mnode.learnable:hover,
.mastery-sky .mnode.apex.open {
    cursor: pointer;
}

/* L'étoile survolée, touchée ou prise à la manette : son cercle (hub.js focusMastery) */
.mastery-sky .mfocus {
    opacity: 0;
    transition: opacity 0.15s;
}

.mastery-sky .mnode.focus .mfocus,
.mastery-sky .mnode:focus-visible .mfocus,
.mastery-sky .mnode.pad-focus .mfocus {
    opacity: 1;
}

.mastery-sky .mnode:hover .mcore {
    stroke: #fff3c4;
    stroke-opacity: 1;
}

/* ---------- Téléphone ---------- */
html.phone .hub.is-ancre[data-layout='registre']:not(.is-roaming):not(.is-forced) .hub-main {
    grid-template-columns: minmax(0, 1fr) !important;
}

html.phone .hub.is-ancre[data-layout='registre']:not(.is-roaming):not(.is-forced) .pages {
    grid-column: 1;
    border-left: 0;
    background: var(--menu-night);
}

html.phone .hub.is-ancre {
    --menu-pad: 12px;
}

html.phone .hub.is-ancre[data-layout] .place-head {
    column-gap: 10px;
    padding: 8px var(--menu-pad) 6px;
}

html.phone .hub.is-ancre[data-layout='registre'] .place-head {
    grid-template-columns: 38px minmax(0, 1fr) auto auto;
}

html.phone .hub.is-ancre[data-layout] .place-head :is(.place-face, .place-icon) {
    width: 38px;
    height: 38px;
    font-size: 18px;
}

html.phone .hub.is-ancre[data-layout]:not([data-layout='registre']) .place-head {
    grid-template-columns: 34px minmax(0, 1fr) auto;
}

html.phone .hub.is-ancre[data-layout]:not([data-layout='registre']) .place-head :is(.place-face, .place-icon) {
    width: 34px;
    height: 34px;
    font-size: 16px;
}

html.phone .hub.is-ancre[data-layout] .place-head h2 b {
    font-size: 20px;
}

html.phone .hub.is-ancre[data-layout] .place-head .place-line {
    margin-top: 2px;
    font-size: 12.5px;
}

html.phone .hub.is-ancre[data-layout] .place-head .place-count {
    margin-top: 4px;
    font-size: 11.5px;
}

html.phone .hub.is-ancre .reg-play {
    grid-template-columns: minmax(0, 1fr) 280px;
}

html.phone .hub.is-ancre .reg-play > .reg-col:first-child {
    grid-column: 1 / -1;
    grid-row: 2;
}

html.phone .hub.is-ancre .reg-go .page-play {
    order: 2;
}

html.phone .hub.is-ancre .reg-quests {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

html.phone .hub.is-ancre .reg-quests > .reg-col:last-child {
    grid-column: 1 / -1;
}

html.phone .hub.is-ancre .reg-boards {
    grid-template-columns: 240px minmax(0, 1fr);
}

html.phone .hub.is-ancre .reg-sanctuary .shrine-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

html.phone .hub.is-ancre .reg-sanctuary .altar-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

html.phone .hub.is-ancre .relic-page.is-registre .relic-cols {
    grid-template-columns: 280px minmax(0, 1fr);
}

html.phone .hub.is-ancre .relic-page.is-registre .relic-archs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

html.phone .hub.is-ancre .relic-page.is-registre .relic-slots {
    grid-template-columns: minmax(0, 1fr);
}

/* (au téléphone, la petite fiche d'une vitrine est en tête du menu, sous l'en-tête du lieu) */
html.phone .hub.is-ancre #hub-panel > .fiche-card {
    width: auto;
    max-width: none;
    flex-shrink: 0;
}

/* (le titre de la scène le dit déjà, à gauche : la fiche garde l'essentiel, les valeurs et l'action) */
html.phone .hub.is-ancre #hub-panel > .fiche-card :is(.fiche-kicker, .fiche-name) {
    display: none;
}

html.phone .hub.is-ancre #hub-panel > .fiche-card .fiche-chips + .fiche-ivs,
html.phone .hub.is-ancre #hub-panel > .fiche-card .fiche-ivs:first-child {
    margin-top: 8px;
}

/* (au téléphone, la colonne des départs est étroite : l'icône au-dessus du nom, le texte peut passer à la ligne) */
html.phone .hub.is-ancre .reg-go .mode-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 6px;
    text-align: center;
}

html.phone .hub.is-ancre .reg-go .mode-tile :is(b, small) {
    white-space: normal;
}

/* ---------- La pierre des lignées sur l'Ancre (2026-10-19) : cinq lignes, chacune avec sa valeur innée (sa demande :
   « faudrait pouvoir voir ses IV »), aux couleurs des notes ; les barres sont au sol, l'étoile de tes stats
   (rogue/ancre-etoile.js) ---------- */
.pierre-stats.is-star .pstats {
    gap: 5px;
}

.pierre-stats.is-star .pstat.estat {
    grid-template-columns: 12px minmax(0, 1fr) auto 62px auto;
    gap: 10px;
    padding: 6px 10px;
}

.pierre-stats.is-star .estat-mark {
    font-size: 12px;
    line-height: 1;
    color: rgb(var(--gold-rgb));
    text-shadow: 0 0 8px rgba(var(--gold-rgb), 0.6);
}

.pierre-stats.is-star .estat .pstat-name {
    display: flex;
    align-items: baseline;
    gap: 7px;
    min-width: 0;
}

.pierre-stats.is-star .estat .pstat-name b {
    display: inline;
    flex: none;
}

.pierre-stats.is-star .estat .pstat-name small {
    display: inline;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pierre-stats.is-star .estat .pstat-name .per {
    display: none;
    color: #c9a35a;
}

.pierre-stats.is-star .estat-iv {
    display: grid;
    justify-items: end;
    line-height: 1.15;
    font-size: 12px;
    white-space: nowrap;
    color: var(--muted);
}

.pierre-stats.is-star .estat-iv b {
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

.pierre-stats.is-star .estat-iv small {
    font-size: 10.5px;
    font-weight: 600;
}

.pierre-stats.is-star .estat .pstat-val {
    font-size: 21px;
    line-height: 1;
}

.pierre-stats.is-star .pstats-legend em {
    font-style: normal;
    color: #c9b27a;
}

html.phone .pierre-stats.is-star .pstats {
    gap: 3px;
}

html.phone .pierre-stats.is-star .pstat.estat {
    grid-template-columns: 10px minmax(0, 1fr) auto 44px auto;
    gap: 7px;
    padding: 3px 8px;
}

html.phone .pierre-stats.is-star .estat .pstat-name .long,
html.phone .pierre-stats.is-star .estat-iv small,
html.phone .pierre-stats.is-star .estat .pstat-val small {
    display: none;
}

html.phone .pierre-stats.is-star .estat .pstat-name .per {
    display: inline;
    font-size: 11px;
}

html.phone .pierre-stats.is-star .estat .pstat-val {
    font-size: 18px;
}

html.phone .pierre-stats.is-star .pstat-btns button {
    width: 26px;
    height: 26px;
    font-size: 15px;
}

/* Au téléphone, les points à répartir sur une ligne (les « + » d'or disent où les placer) : les cinq stats tiennent */
html.phone .pierre-stats.is-star .pts-hero {
    gap: 10px;
    margin-bottom: 5px;
    padding: 3px 10px;
}

html.phone .pierre-stats.is-star .pts-num b {
    font-size: 24px;
}

html.phone .pierre-stats.is-star .pts-num br,
html.phone .pierre-stats.is-star .pts-hero p {
    display: none;
}