/* OCEARA ROGUE · SANCTUAIRE (hub) — langage visuel du carnet d'éleveur */

/* Couleur de la lignée affichée : composantes animables (transition douce) */
@property --fr { syntax: '<number>'; inherits: true; initial-value: 95; }
@property --fg { syntax: '<number>'; inherits: true; initial-value: 212; }
@property --fb { syntax: '<number>'; inherits: true; initial-value: 255; }
@property --sr { syntax: '<number>'; inherits: true; initial-value: 255; }
@property --sg { syntax: '<number>'; inherits: true; initial-value: 122; }
@property --sb { syntax: '<number>'; inherits: true; initial-value: 217; }

:root {
    --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
    --danger: #ff6b83;
    --fam-rgb: var(--fr), var(--fg), var(--fb);
    --shiny-rgb: var(--sr), var(--sg), var(--sb);
    --hl-rgb: var(--fam-rgb);
    --side-w: 280px;
    --gap: 18px;
    transition: --fr 0.7s ease, --fg 0.7s ease, --fb 0.7s ease, --sr 0.7s ease, --sg 0.7s ease, --sb 0.7s ease;
}

:root.is-shiny {
    --hl-rgb: var(--shiny-rgb);
}

/* ---------- Mise en page ---------- */

.hub {
    position: fixed;
    inset: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: var(--side-w) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    background: #02070d;
    color: var(--text);
}

.hub-backdrop {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(900px 620px at 62% 18%, rgba(var(--hl-rgb), 0.12), transparent 62%),
        radial-gradient(760px 520px at 8% 96%, rgba(40, 130, 210, 0.12), transparent 64%),
        radial-gradient(600px 400px at 100% 100%, rgba(var(--hl-rgb), 0.06), transparent 70%),
        linear-gradient(180deg, #041220 0%, #020a13 55%, #02070d 100%);
}

.hub-backdrop::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.35;
    background-image: radial-gradient(rgba(180, 230, 255, 0.08) 1px, transparent 1.4px);
    background-size: 26px 26px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.7), transparent 70%);
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.7), transparent 70%);
}

.hub ::selection {
    background: rgba(var(--hl-rgb), 0.35);
}

.hub .pages,
.hub-nav {
    scrollbar-width: thin;
    scrollbar-color: rgba(150, 215, 255, 0.16) transparent;
}

/* ---------- Colonne de navigation ---------- */

.hub-side {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-right: 1px solid var(--stroke);
    background: linear-gradient(180deg, rgba(4, 14, 24, 0.86), rgba(3, 10, 18, 0.74));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.side-head {
    padding: 20px 18px 14px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

alandys-emblem {
    display: block;
    flex-shrink: 0;
}

.brand h1 {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.1;
}

.brand h1 span {
    font-weight: 400;
    color: var(--muted);
}

.brand p {
    margin-top: 2px;
    font-size: 12px;
    color: var(--faint);
}

.hub-nav-wrap {
    position: relative;
    display: flex;
    flex: 1;
    min-height: 0;
}

.hub-nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 4px 10px 12px;
}

.nav-item {
    position: relative;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 9px 10px 9px 12px;
    border-radius: 14px;
    border: 1px solid transparent;
    text-align: left;
    transition: background 0.2s, border-color 0.2s, opacity 0.2s;
}

.nav-item + .nav-item {
    margin-top: 3px;
}

.nav-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 22%;
    bottom: 22%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: rgb(var(--hl-rgb));
    box-shadow: 0 0 12px rgba(var(--hl-rgb), 0.9);
    opacity: 0;
    transform: scaleY(0.4);
    transition: opacity 0.2s, transform 0.25s;
}

.nav-item:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.04);
}

.nav-item.active {
    border-color: rgba(var(--hl-rgb), 0.38);
    background: linear-gradient(100deg, rgba(var(--hl-rgb), 0.17), rgba(var(--hl-rgb), 0.03) 70%);
}

.nav-item.active::before {
    opacity: 1;
    transform: scaleY(1);
}

.nav-item:disabled {
    opacity: 0.35;
    cursor: default;
}

.nav-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    font-size: 16px;
    color: rgba(var(--hl-rgb), 0.85);
    background: rgba(var(--hl-rgb), 0.08);
    border: 1px solid rgba(var(--hl-rgb), 0.18);
}

.nav-item.active .nav-icon {
    color: #04121c;
    background: rgb(var(--hl-rgb));
    border-color: transparent;
    box-shadow: 0 6px 18px -6px rgba(var(--hl-rgb), 0.9);
}

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

.nav-text b {
    font-size: 15px;
    font-weight: 600;
}

.nav-item.active .nav-text b {
    color: #fff;
}

.nav-text small {
    font-size: 11.5px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-badge {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 99px;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 800;
    color: #1a1204;
    background: #ffc94d;
    box-shadow: 0 0 12px rgba(255, 201, 77, 0.6);
}

.side-foot {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px 18px;
    border-top: 1px solid var(--stroke);
}

.hub-wallet {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.coin {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 6px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--stroke);
    font-weight: 700;
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
}

.coin i {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-style: normal;
    font-size: 12px;
    color: var(--c);
    background: color-mix(in srgb, var(--c) 18%, transparent);
    box-shadow: 0 0 12px color-mix(in srgb, var(--c) 40%, transparent);
}

.hub-presence {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--muted);
}

.hub-presence i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff6b7d;
}

.hub-presence.on i {
    background: #6dffb0;
    box-shadow: 0 0 10px #6dffb0;
    animation: pulse 2s ease-in-out infinite;
}

/* ---------- Colonne principale ---------- */

.hub-main {
    position: relative;
    min-height: 0;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 470px);
    grid-template-rows: minmax(0, 1fr);
    gap: var(--gap);
    padding: var(--gap);
    overflow: hidden;
}

/* ---------- Scène ---------- */

.stage-card {
    position: relative;
    min-height: 0;
    min-width: 0;
    border-radius: 26px;
    overflow: hidden;
    border: 1px solid var(--stroke);
    background: #030b14;
    box-shadow:
        0 30px 80px -40px rgba(var(--hl-rgb), 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    isolation: isolate;
}

.stage-card .viewer {
    position: absolute;
    inset: 0;
    z-index: 0;
    cursor: grab;
}

.stage-card .viewer canvas {
    display: block;
    touch-action: pan-y;
}

.stage-card .viewer canvas.is-dragging {
    cursor: grabbing;
}

.stage-top,
.stage-bottom {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
    pointer-events: none;
}

.stage-top {
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 22px 26px;
    background: linear-gradient(180deg, rgba(2, 8, 14, 0.78), rgba(2, 8, 14, 0.35) 65%, transparent);
}

.stage-title {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
}

.stage-egg .egg {
    width: 44px;
    height: 57px;
    margin-top: 4px;
    filter: drop-shadow(0 6px 16px rgba(var(--fam-rgb), 0.45));
    animation: egg-float 5s ease-in-out infinite;
}

.stage-heading {
    min-width: 0;
}

.hub .kicker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(var(--hl-rgb), 0.9);
}

.hub .kicker .dot {
    color: var(--faint);
}

.form-name {
    margin: 2px 0 8px;
    font-size: clamp(34px, 4vw, 56px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.025em;
    background: linear-gradient(115deg, #ffffff 15%, rgb(var(--hl-rgb)) 95%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 26px rgba(var(--hl-rgb), 0.35));
    overflow-wrap: anywhere;
    animation: name-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.form-name .shiny-mark {
    display: inline-block;
    margin-left: 10px;
    font-size: 0.5em;
    vertical-align: 0.55em;
    color: rgb(var(--shiny-rgb));
    -webkit-text-fill-color: rgb(var(--shiny-rgb));
    animation: twinkle 1.8s ease-in-out infinite;
}

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

.hub .tag {
    position: relative;
    padding: 4px 10px;
    border-radius: 99px;
    font-size: 11.5px;
    font-weight: 600;
    background: rgba(6, 18, 30, 0.7);
    border: 1px solid var(--stroke);
    color: var(--muted);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    overflow: hidden;
}

.hub .tag:empty {
    display: none;
}

.hub .tag-role {
    color: rgb(var(--hl-rgb));
    border-color: rgba(var(--hl-rgb), 0.35);
    background: rgba(var(--hl-rgb), 0.12);
}

.hub .tag-owned {
    color: #0a1a12;
    border-color: transparent;
    background: linear-gradient(120deg, #9dffcb, #6dffb0);
}

.hub .tag-shiny {
    color: #1a1204;
    border-color: transparent;
    background: linear-gradient(120deg, #ffe38a, #ffc94d);
}

.hub .tag-secret {
    color: #ffd86b;
    border-color: rgba(255, 201, 77, 0.45);
}

/* Rattrapage d'XP : la créature est plus jeune que la meilleure du compte */
.hub .tag-catchup {
    color: var(--xp);
    border-color: rgba(109, 255, 176, 0.35);
    background: rgba(109, 255, 176, 0.08);
}

.hub .tag-level {
    color: var(--xp);
    border-color: rgba(109, 255, 176, 0.35);
}

.hub .tag-level i {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    background: var(--xp);
    box-shadow: 0 0 6px var(--xp);
}

/* Chromatique */

.shiny-box {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
    text-align: right;
}

.shiny-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px 8px 14px;
    border-radius: 99px;
    border: 1px solid var(--stroke-strong);
    background: rgba(6, 18, 30, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: 13px;
    font-weight: 600;
    pointer-events: auto;
    transition: border-color 0.2s, box-shadow 0.25s, background 0.2s;
}

.shiny-toggle:hover {
    border-color: rgba(var(--shiny-rgb), 0.6);
}

.shiny-star {
    font-size: 15px;
    color: rgb(var(--shiny-rgb));
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1.4);
}

.switch {
    position: relative;
    width: 34px;
    height: 19px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.1);
    transition: background 0.25s;
}

.switch i {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #cfe6f5;
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1.2), background 0.25s;
}

.shiny-toggle[aria-pressed='true'] {
    border-color: rgba(var(--shiny-rgb), 0.75);
    background: linear-gradient(120deg, rgba(var(--shiny-rgb), 0.24), rgba(6, 18, 30, 0.8));
    box-shadow: 0 0 28px -6px rgba(var(--shiny-rgb), 0.8);
}

.shiny-toggle[aria-pressed='true'] .shiny-star {
    transform: rotate(180deg) scale(1.2);
}

.shiny-toggle[aria-pressed='true'] .switch {
    background: rgb(var(--shiny-rgb));
}

.shiny-toggle[aria-pressed='true'] .switch i {
    transform: translateX(15px);
    background: #fff;
}

.shiny-odds {
    font-size: 11.5px;
    color: var(--muted);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}

.shiny-odds b {
    color: rgb(var(--shiny-rgb));
    font-weight: 700;
}

.drag-hint {
    font-size: 11px;
    color: var(--faint);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}

/* Chargement d'une forme */

.stage-loader {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px;
    text-align: center;
    background: radial-gradient(circle at 50% 50%, rgba(3, 12, 22, 0.25), rgba(2, 8, 14, 0.7) 70%);
    transition: opacity 0.35s ease, visibility 0.35s;
}

.stage-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-egg .egg {
    width: 84px;
    height: 108px;
    margin-bottom: 10px;
    transform-origin: 50% 88%;
    filter: drop-shadow(0 0 28px rgba(var(--fam-rgb), 0.55));
    animation: egg-shake 1.9s ease-in-out infinite;
}

.loader-title {
    font-size: 17px;
    font-weight: 700;
}

.loader-sub {
    max-width: 360px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--muted);
}

.stage-loader.is-error .loader-egg .egg {
    animation: none;
    filter: grayscale(0.7) brightness(0.7);
}

/* Bas de scène : évolutions + animations */

.stage-bottom {
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 30px 18px 18px;
    background: linear-gradient(0deg, rgba(2, 8, 14, 0.86), rgba(2, 8, 14, 0.4) 70%, transparent);
}

.stage-bottom.empty {
    display: none;
}

.evo-chain {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: min(100%, 640px);
}

.evo-arrow {
    flex-shrink: 0;
    font-size: 15px;
    color: rgba(var(--fam-rgb), 0.6);
}

.evo-step {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 14px;
    border: 1px solid var(--stroke);
    background: rgba(6, 18, 30, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    text-align: left;
    pointer-events: auto;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.25s, transform 0.2s;
}

.evo-step:hover {
    border-color: var(--stroke-strong);
    transform: translateY(-1px);
}

.evo-step.active {
    border-color: rgba(var(--hl-rgb), 0.7);
    background: linear-gradient(135deg, rgba(var(--hl-rgb), 0.24), rgba(var(--hl-rgb), 0.05)), rgba(6, 18, 30, 0.78);
    box-shadow: 0 10px 30px -14px rgba(var(--hl-rgb), 0.9);
}

.evo-num {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-family: var(--serif);
    font-size: 13px;
    font-weight: 600;
    color: rgb(var(--fam-rgb));
    background: rgba(var(--fam-rgb), 0.12);
    border: 1px solid rgba(var(--fam-rgb), 0.3);
}

.evo-step.active .evo-num {
    color: #04121c;
    background: rgb(var(--hl-rgb));
    border-color: transparent;
}

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

.evo-text small {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--faint);
}

.evo-text b {
    font-size: 14.5px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.evo-state {
    position: absolute;
    top: 7px;
    right: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
}

.evo-step.is-loading .evo-state {
    background: rgb(var(--fam-rgb));
    animation: pulse 1s ease-in-out infinite;
}

.evo-step.is-ready .evo-state {
    background: rgba(var(--fam-rgb), 0.85);
    box-shadow: 0 0 6px rgba(var(--fam-rgb), 0.9);
}

.evo-step.is-error .evo-state {
    background: var(--danger);
}

/* ---------- Fiches (colonne de droite) ---------- */

.hub .pages {
    position: relative;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 4px 6px 0;
}

.hub .page {
    position: relative;
    flex-shrink: 0;
    padding: 20px 22px 22px;
    border-radius: 20px;
    border: 1px solid var(--stroke);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)), var(--glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: page-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.hub .page:nth-child(2) { animation-delay: 0.04s; }
.hub .page:nth-child(3) { animation-delay: 0.08s; }
.hub .page:nth-child(4) { animation-delay: 0.12s; }
.hub .page:nth-child(5) { animation-delay: 0.16s; }

.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.page-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgb(var(--hl-rgb));
}

.page-kicker::before {
    content: '';
    width: 14px;
    height: 1px;
    background: currentColor;
    opacity: 0.7;
}

.page-aside {
    font-size: 11.5px;
    color: var(--faint);
    text-align: right;
}

.page-intro {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--muted);
    margin-bottom: 14px;
}

.hub .note {
    margin-top: 12px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--faint);
}

/* Code de sauvegarde en ligne */
.cloud-box {
    margin: 4px 0 14px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--stroke);
    background: rgba(255, 255, 255, 0.03);
}

.cloud-label {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--faint);
}

.cloud-code {
    display: block;
    margin-top: 4px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.16em;
    color: #ffc94d;
    user-select: all;
}

.cloud-box .buttons-row {
    margin-top: 10px;
    gap: 8px;
}

#cloud-input {
    flex: 1;
    min-width: 0;
    padding: 7px 10px;
    border-radius: 10px;
    border: 1px solid var(--stroke);
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Avertissement : le navigateur refuse d'enregistrer la progression */
.hub .note.danger {
    margin-top: 0;
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 106, 106, 0.4);
    background: rgba(255, 106, 106, 0.1);
    color: #ffb3b3;
    font-weight: 500;
}

.hub .note b {
    color: var(--muted);
    font-weight: 600;
}

.link-btn {
    font-size: 12px;
    color: var(--muted);
}

.link-btn:hover {
    color: rgb(var(--hl-rgb));
}

.hub .btn-primary {
    background: rgb(var(--hl-rgb));
    box-shadow: 0 10px 34px -10px rgba(var(--hl-rgb), 0.9);
}

.hub .btn-primary.small,
.hub .btn-ghost.small {
    min-width: 0;
    padding: 7px 14px;
    font-size: 12.5px;
    box-shadow: none;
}

.hub .btn-primary.wide,
.hub .btn-ghost.wide {
    width: 100%;
    margin-top: 10px;
}

.hub .btn-ghost.danger {
    color: #ff8a9a;
    border-color: rgba(255, 90, 120, 0.4);
}

.hub .btn-ghost:disabled,
.hub .btn-primary:disabled {
    opacity: 0.4;
    cursor: default;
    transform: none;
}

.icon-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: var(--faint);
    font-size: 13px;
}

.icon-btn:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.06);
}

/* Chronique */

.page-chronicle {
    overflow: hidden;
}

.hub .page-chronicle {
    background:
        radial-gradient(420px 220px at 100% 0%, rgba(var(--hl-rgb), 0.16), transparent 70%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012)),
        var(--glass);
}

.page-chronicle::after {
    content: attr(data-numeral);
    position: absolute;
    top: -26px;
    right: 14px;
    font-family: var(--serif);
    font-size: 150px;
    font-weight: 600;
    line-height: 1;
    color: rgba(var(--hl-rgb), 0.08);
    pointer-events: none;
}

.chronicle-name {
    position: relative;
    font-family: var(--serif);
    font-size: 32px;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.01em;
}

.chronicle-sub {
    position: relative;
    margin: 4px 0 14px;
    font-size: 12.5px;
    color: var(--muted);
}

.chronicle-sub b {
    color: rgb(var(--hl-rgb));
    font-weight: 600;
}

.lore-text {
    position: relative;
    font-family: var(--serif);
    font-size: 16px;
    line-height: 1.68;
    color: rgba(234, 247, 255, 0.9);
    hyphens: auto;
}

.lore-text::first-letter {
    float: left;
    margin: 6px 10px 0 0;
    font-size: 3.5em;
    font-weight: 600;
    line-height: 0.82;
    color: rgb(var(--hl-rgb));
    text-shadow: 0 0 22px rgba(var(--hl-rgb), 0.55);
}

.perks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed var(--stroke-strong);
}

.perks-label {
    width: 100%;
    margin-bottom: 2px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--faint);
}

.perk {
    padding: 4px 10px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
    background: rgba(var(--hl-rgb), 0.1);
    border: 1px solid rgba(var(--hl-rgb), 0.25);
}

/* Faits (paires clé / valeur) */

.facts {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
}

.fact {
    padding: 11px 13px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--stroke);
}

.fact dt {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--faint);
}

.fact dt::before {
    content: '';
    width: 6px;
    height: 6px;
    transform: rotate(45deg);
    background: rgb(var(--hl-rgb));
    box-shadow: 0 0 8px rgba(var(--hl-rgb), 0.8);
}

.fact dd {
    margin-top: 4px;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.3;
}

/* Notes de couvée */

.egg-note {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    margin-top: 16px;
}

.egg-note-art {
    display: grid;
    place-items: center;
    height: 76px;
    border-radius: 16px;
    background: radial-gradient(circle at 50% 60%, rgba(var(--fam-rgb), 0.22), transparent 70%);
}

.egg-note-art .egg {
    width: 44px;
    height: 57px;
    transform-origin: 50% 90%;
    animation: egg-wobble 4.5s ease-in-out infinite;
}

.egg-note blockquote {
    position: relative;
    padding-left: 16px;
    border-left: 2px solid rgba(var(--fam-rgb), 0.55);
    font-family: var(--serif);
    font-style: italic;
    font-size: 15.5px;
    line-height: 1.55;
    color: rgba(234, 247, 255, 0.86);
}

.egg-note blockquote::before {
    content: '“';
    position: absolute;
    left: -6px;
    top: -26px;
    font-size: 52px;
    font-style: normal;
    line-height: 1;
    color: rgba(var(--fam-rgb), 0.5);
}

.egg-note figcaption {
    margin-top: 6px;
    padding-left: 16px;
    font-size: 11.5px;
    color: var(--faint);
}

/* Talents */

.talents {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
}

.talent {
    position: relative;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--stroke);
    overflow: hidden;
}

.talent-label {
    display: inline-block;
    margin-bottom: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(var(--hl-rgb), 0.9);
}

.talent-name {
    display: block;
    font-size: 15.5px;
    font-weight: 700;
}

.talent-desc {
    margin-top: 3px;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--muted);
}

.talent.mine {
    border-color: rgba(var(--hl-rgb), 0.6);
    background: linear-gradient(120deg, rgba(var(--hl-rgb), 0.16), rgba(var(--hl-rgb), 0.03));
    box-shadow: 0 10px 30px -18px rgba(var(--hl-rgb), 0.9);
}

.talent.secret {
    border-style: dashed;
    border-color: rgba(var(--hl-rgb), 0.4);
    background:
        repeating-linear-gradient(135deg, rgba(var(--hl-rgb), 0.05) 0 8px, transparent 8px 16px),
        rgba(255, 255, 255, 0.025);
}

.talent.secret.mine {
    border-style: solid;
    border-color: rgba(255, 201, 77, 0.7);
}

.talent.secret .talent-label::before {
    content: '✧ ';
}

.talent.veiled .talent-body {
    filter: blur(5px);
    opacity: 0.55;
    user-select: none;
}

.veil {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 13.5px;
    font-weight: 600;
    background: rgba(3, 10, 18, 0.35);
    transition: background 0.2s;
}

.veil:hover {
    background: rgba(var(--hl-rgb), 0.12);
}

.veil-icon {
    font-size: 18px;
    color: rgb(var(--hl-rgb));
    text-shadow: 0 0 14px rgba(var(--hl-rgb), 0.9);
}

.veil small {
    font-size: 11px;
    font-weight: 500;
    color: var(--faint);
}

/* Attaque de lignée */

.attack-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid rgba(var(--hl-rgb), 0.45);
    background: linear-gradient(120deg, rgba(var(--hl-rgb), 0.14), rgba(var(--hl-rgb), 0.02));
}

.attack-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    font-size: 26px;
    color: rgb(var(--hl-rgb));
    background: rgba(var(--hl-rgb), 0.14);
    text-shadow: 0 0 16px rgba(var(--hl-rgb), 0.8);
}

.attack-name {
    display: block;
    font-size: 16px;
    font-weight: 700;
}

.attack-desc {
    margin-top: 3px;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--muted);
}

.special-card {
    margin-top: 8px;
    border-style: dashed;
}

.attack-kind {
    display: block;
    margin-bottom: 2px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(var(--hl-rgb), 0.9);
}

.attack-terrains {
    display: grid;
    gap: 8px;
    margin-top: 10px;
    list-style: none;
}

.attack-terrains li {
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 196, 90, 0.06);
    border: 1px solid rgba(255, 196, 90, 0.25);
}

.attack-route {
    display: block;
    margin-bottom: 2px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #ffd98a;
}

.attack-terrains b {
    font-size: 14px;
}

.attack-terrains small {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--muted);
}

/* Cartes de style (STYLE_CARDS) : propres au style d'attaque de la lignée */
.attack-style-cards {
    display: grid;
    gap: 8px;
    margin-top: 8px;
    list-style: none;
}

.attack-style-cards li {
    --r: var(--rare);
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 12px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--r) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--r) 30%, transparent);
}

.attack-style-cards li.epic { --r: var(--epic); }

.attack-style-cards .attack-route { color: var(--r); }

.attack-style-icon {
    flex: none;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    font-size: 18px;
    color: var(--r);
    background: color-mix(in srgb, var(--r) 14%, transparent);
}

.attack-style-cards b {
    font-size: 14px;
}

.attack-style-cards small {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--muted);
}

/* Profil de lignée */

.role-chip {
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 11.5px;
    font-weight: 600;
    color: rgb(var(--hl-rgb));
    background: rgba(var(--hl-rgb), 0.12);
    border: 1px solid rgba(var(--hl-rgb), 0.3);
}

.pstat-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
    list-style: none;
}

.pstat {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 78px;
    align-items: center;
    gap: 12px;
}

.pstat-label {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.pstat-track {
    position: relative;
    height: 8px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.06);
}

.pstat-track::before {
    content: '';
    position: absolute;
    left: calc(50% - 1px);
    top: -4px;
    bottom: -4px;
    width: 2px;
    border-radius: 2px;
    background: rgba(205, 228, 244, 0.35);
}

.pstat-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 99px;
}

.pstat.up .pstat-fill {
    background: linear-gradient(90deg, rgba(var(--hl-rgb), 0.45), rgb(var(--hl-rgb)));
    box-shadow: 0 0 10px rgba(var(--hl-rgb), 0.45);
}

.pstat.down .pstat-fill {
    background: linear-gradient(270deg, rgba(205, 228, 244, 0.2), rgba(205, 228, 244, 0.5));
}

.pstat-value {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.pstat-value small {
    min-width: 34px;
    font-size: 11px;
    font-weight: 500;
    text-align: right;
    color: var(--faint);
}

.iv-block {
    margin-top: 18px;
    padding: 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--stroke);
}

.iv-title {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
}

.iv-title span {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--faint);
}

.iv-scale {
    display: flex;
    gap: 2px;
    height: 10px;
}

.iv-scale i {
    display: block;
    min-width: 6px;
    background: rgba(var(--hl-rgb), var(--a));
}

.iv-scale i:first-child { border-radius: 99px 0 0 99px; }
.iv-scale i:last-child { border-radius: 0 99px 99px 0; }

.iv-ends {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: 10.5px;
    color: var(--faint);
}

.iv-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-top: 10px;
    list-style: none;
    font-size: 11.5px;
    color: var(--muted);
}

.iv-legend li {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.iv-legend i {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: rgba(var(--hl-rgb), var(--a));
}

.iv-legend span {
    color: var(--faint);
}

/* Barre de valeur innée (créature, éclosion) */

.iv-bar {
    position: relative;
    height: 16px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.iv-bar i {
    display: block;
    height: 100%;
    background: rgba(var(--hl-rgb), 0.55);
}

.iv-bar em {
    position: absolute;
    right: 6px;
    top: 0;
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
}

.iv-bar.low i { background: rgba(255, 122, 138, 0.7); }
.iv-bar.good i { background: rgba(109, 255, 176, 0.7); }
.iv-bar.rare i { background: rgba(185, 140, 255, 0.85); }
.iv-bar.epic i { background: linear-gradient(90deg, #ffc94d, #ffe98a); }

/* Réserve */

.owned-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
}

.owned-list li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 99px;
    font-size: 12.5px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--stroke);
}

.owned-list li.shiny {
    border-color: rgba(var(--shiny-rgb), 0.5);
    background: rgba(var(--shiny-rgb), 0.1);
}

.owned-list .star,
.hub .star {
    color: #ffe38a;
    text-shadow: 0 0 10px #ffcf4d;
}

.owned-list li small {
    color: var(--faint);
}

/* ---------- Carnet : grille des lignées ---------- */

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

.lineage-chip {
    --c-rgb: 95, 212, 255;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 0 6px;
    border-radius: 14px;
    border: 1px solid transparent;
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.lineage-chip .egg {
    width: 30px;
    height: 39px;
    filter: drop-shadow(0 4px 9px rgba(var(--c-rgb), 0.32));
    transform-origin: 50% 90%;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1.3);
}

.lineage-chip span {
    font-size: 10px;
    font-weight: 600;
    color: var(--faint);
}

.lineage-chip:hover {
    background: rgba(255, 255, 255, 0.04);
}

.lineage-chip:hover .egg {
    transform: rotate(-7deg) translateY(-2px);
}

.lineage-chip.active {
    border-color: rgba(var(--c-rgb), 0.5);
    background: linear-gradient(180deg, rgba(var(--c-rgb), 0.2), rgba(var(--c-rgb), 0.04));
}

.lineage-chip.active .egg {
    animation: egg-wobble 1.6s ease-in-out;
}

.lineage-chip.owned::after {
    content: '';
    position: absolute;
    top: 6px;
    right: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #6dffb0;
    box-shadow: 0 0 6px #6dffb0;
}

/* Liste d'œufs (premier œuf) */

.lineage {
    --c-rgb: 95, 212, 255;
    position: relative;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid var(--stroke);
    background: rgba(255, 255, 255, 0.02);
    text-align: left;
    transition: background 0.2s, border-color 0.2s;
}

.lineage + .lineage {
    margin-top: 6px;
}

.lineage:hover {
    background: rgba(255, 255, 255, 0.05);
}

.lineage.active {
    border-color: rgba(var(--c-rgb), 0.55);
    background: linear-gradient(100deg, rgba(var(--c-rgb), 0.2), rgba(var(--c-rgb), 0.03) 70%);
}

.lineage-egg .egg {
    width: 38px;
    height: 49px;
    filter: drop-shadow(0 4px 9px rgba(var(--c-rgb), 0.35));
    transform-origin: 50% 90%;
}

.lineage.active .lineage-egg .egg {
    animation: egg-wobble 1.6s ease-in-out infinite;
}

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

.lineage-name {
    font-size: 15.5px;
    font-weight: 700;
}

.lineage-forms {
    font-size: 12px;
    color: var(--muted);
}

.hatch-cta {
    margin-top: 18px !important;
    font-size: 17px;
    padding: 15px 20px;
}

/* ---------- Plonger ---------- */

.depth-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 4px 0 14px;
}

.depth-arrow {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--stroke-strong);
    font-size: 24px;
    line-height: 1;
    color: var(--muted);
    transition: border-color 0.2s, color 0.2s;
}

.depth-arrow:hover:not(:disabled) {
    color: var(--text);
    border-color: rgba(var(--hl-rgb), 0.6);
}

.depth-arrow:disabled {
    opacity: 0.25;
    cursor: default;
}

.depth-value {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 120px;
}

.depth-value b {
    font-family: var(--serif);
    font-size: 58px;
    line-height: 1;
    font-weight: 600;
    color: rgb(var(--hl-rgb));
    text-shadow: 0 0 30px rgba(var(--hl-rgb), 0.5);
}

.depth-value small {
    font-size: 11px;
    color: var(--faint);
    text-transform: uppercase;
    letter-spacing: 0.18em;
}

.affix-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.play-modes {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
}

.mode-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 10px 14px;
    border-radius: 16px;
    border: 1px solid var(--stroke);
    background: rgba(255, 255, 255, 0.03);
    transition: border-color 0.2s, background 0.2s, transform 0.2s, box-shadow 0.25s;
}

.mode-tile:hover:not(:disabled) {
    transform: translateY(-2px);
    border-color: rgba(var(--hl-rgb), 0.55);
    background: linear-gradient(180deg, rgba(var(--hl-rgb), 0.14), rgba(var(--hl-rgb), 0.03));
    box-shadow: 0 16px 40px -22px rgba(var(--hl-rgb), 0.9);
}

.mode-tile:disabled {
    opacity: 0.4;
    cursor: default;
}

.mode-tile.offline {
    opacity: 0.55;
}

.mode-icon {
    font-size: 17px;
    color: rgb(var(--hl-rgb));
    letter-spacing: 0.1em;
}

.mode-tile b {
    font-size: 15px;
}

.mode-tile small {
    font-size: 12px;
    color: var(--muted);
}

#online-box {
    margin-top: 12px;
}

#online-box:empty {
    display: none;
}

.queue-box {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid rgba(var(--hl-rgb), 0.35);
    background: rgba(var(--hl-rgb), 0.08);
}

.queue-box > div:nth-child(2) {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.queue-box small {
    color: var(--muted);
    font-size: 12px;
}

.queue-spinner {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 3px solid rgba(var(--hl-rgb), 0.2);
    border-top-color: rgb(var(--hl-rgb));
    animation: spin 0.9s linear infinite;
}

.private-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.private-box .join-row {
    display: flex;
    gap: 8px;
}

.hub input:not([type]),
.hub textarea {
    flex: 1;
    width: 100%;
    padding: 11px 14px;
    border-radius: 12px;
    border: 1px solid var(--stroke-strong);
    background: rgba(0, 0, 0, 0.35);
    color: var(--text);
    font: inherit;
    font-weight: 600;
}

.hub textarea {
    resize: vertical;
    font-size: 11px;
    font-weight: 500;
    font-family: ui-monospace, monospace;
}

#room-code {
    text-transform: uppercase;
    letter-spacing: 0.3em;
    text-align: center;
}

.lobby {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lobby-members {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hub .member {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hub .member .egg {
    width: 22px;
    height: 29px;
    flex-shrink: 0;
}

.hub .member > span:nth-child(2) {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.online-error {
    color: #ff8a9a;
    font-size: 13px;
    margin-top: 8px;
}

.hub .controls {
    margin: 0;
}

/* ---------- Créature ---------- */

/* Expérience du compagnon : niveau, barre jusqu'au suivant, reste */
.xp-line {
    margin: 2px 0 14px;
    padding: 10px 12px 11px;
    border-radius: 14px;
    border: 1px solid rgba(109, 255, 176, 0.22);
    background: rgba(109, 255, 176, 0.05);
}

.xp-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.xp-head b {
    font-family: var(--display);
    font-size: 17px;
    font-weight: 400;
    color: var(--xp);
}

.xp-head span {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
}

.xp-bar {
    position: relative;
    height: 8px;
    margin: 7px 0 6px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.07);
}

.xp-bar i {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(109, 255, 176, 0.65), var(--xp));
    box-shadow: 0 0 10px rgba(109, 255, 176, 0.55);
}

.xp-line small {
    font-size: 11.5px;
    color: var(--faint);
}

.xp-catchup {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    font-style: normal;
    font-weight: 700;
    color: var(--xp);
    background: rgba(109, 255, 176, 0.12);
}

.points-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.points {
    font-size: 13px;
    font-weight: 700;
    color: var(--faint);
}

.points.has {
    color: #ffc94d;
}

.alloc-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    list-style: none;
}

.alloc-row {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto 40px;
    align-items: center;
    gap: 10px;
}

.alloc {
    display: flex;
    align-items: center;
    gap: 6px;
}

.alloc button {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: 1px solid var(--stroke-strong);
    color: var(--muted);
    font-weight: 700;
    transition: border-color 0.15s, color 0.15s;
}

.alloc button:hover:not(:disabled) {
    color: var(--text);
    border-color: rgba(var(--hl-rgb), 0.6);
}

.alloc button:disabled {
    opacity: 0.25;
    cursor: default;
}

.alloc b {
    min-width: 20px;
    text-align: center;
    font-size: 13px;
}

.score {
    text-align: right;
    font-family: var(--serif);
    font-size: 17px;
    font-weight: 600;
    color: rgb(var(--hl-rgb));
}

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

.sheet-grid > div {
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--stroke);
}

.sheet-grid small {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: var(--faint);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.sheet-grid b {
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

/* ---------- Maîtrises ---------- */

.mastery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.branch {
    padding: 10px 6px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--b) 6%, rgba(255, 255, 255, 0.02));
    border: 1px solid color-mix(in srgb, var(--b) 30%, transparent);
}

.branch-head {
    text-align: center;
    font-family: var(--serif);
    font-size: 16px;
    font-weight: 600;
    color: var(--b);
    margin-bottom: 8px;
}

.branch-head small {
    display: block;
    font-family: var(--font);
    font-size: 11px;
    color: var(--faint);
    font-weight: 500;
}

.tier {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 0;
    border-top: 1px dashed rgba(255, 255, 255, 0.06);
}

.tier-label {
    position: absolute;
    left: 4px;
    font-family: var(--serif);
    font-size: 10px;
    color: var(--faint);
}

.tier.locked {
    opacity: 0.5;
}

.node {
    width: 46px;
    height: 52px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
}

.node-icon {
    font-size: 17px;
    color: var(--muted);
}

.node-rank {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--faint);
}

.node.learnable {
    border-color: color-mix(in srgb, var(--b) 60%, transparent);
}

.node.learnable:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 16px color-mix(in srgb, var(--b) 45%, transparent);
}

.node.learned {
    background: color-mix(in srgb, var(--b) 18%, rgba(0, 0, 0, 0.3));
    border-color: var(--b);
}

.node.learned .node-icon,
.node.learned .node-rank {
    color: var(--text);
}

.node.maxed {
    box-shadow: inset 0 0 12px color-mix(in srgb, var(--b) 45%, transparent);
}

.node.locked {
    cursor: default;
}

/* ---------- Sanctuaire ---------- */

.shrine-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
}

.shrine {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--stroke);
}

.shrine.maxed {
    border-color: rgba(109, 255, 176, 0.3);
}

.shrine-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: rgba(var(--hl-rgb), 0.12);
    color: rgb(var(--hl-rgb));
    font-size: 17px;
    flex: none;
}

.shrine-body {
    flex: 1;
    min-width: 0;
}

.shrine-body b {
    font-size: 14.5px;
}

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

.shrine-body em {
    font-style: normal;
    color: var(--xp);
}

.pips {
    display: inline-flex;
    gap: 3px;
    margin-left: 8px;
    vertical-align: middle;
}

.pips i {
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
    background: rgba(255, 255, 255, 0.12);
}

.pips i.on {
    background: rgb(var(--hl-rgb));
    box-shadow: 0 0 6px rgba(var(--hl-rgb), 0.8);
}

.buy {
    flex: none;
    padding: 8px 14px;
    border-radius: 99px;
    font-weight: 700;
    font-size: 13px;
    background: rgba(159, 232, 255, 0.12);
    border: 1px solid rgba(159, 232, 255, 0.35);
    color: #cfefff;
    white-space: nowrap;
    transition: background 0.15s;
}

.buy:hover:not(:disabled) {
    background: rgba(159, 232, 255, 0.24);
}

.buy:disabled {
    opacity: 0.35;
    cursor: default;
}

.maxed-tag,
.active-tag {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--xp);
}

/* ---------- Couveuse ---------- */

.incubators {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.incubator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 12px 8px;
    border-radius: 16px;
    background: radial-gradient(ellipse at 50% 30%, rgba(255, 180, 90, 0.1), rgba(255, 255, 255, 0.02));
    border: 1px solid var(--stroke);
    text-align: center;
}

.incubator.empty {
    opacity: 0.5;
    justify-content: center;
}

.incubator.ready {
    border-color: rgba(255, 201, 77, 0.6);
    box-shadow: 0 0 24px -6px rgba(255, 201, 77, 0.5);
}

.incubator b {
    font-size: 13px;
}

.incubator small {
    font-size: 11.5px;
    color: var(--muted);
}

/* Comptoir : annonce d'une lignée jamais découverte */
.market-row.masked .row-main b,
.market-detail.masked .detail-title b {
    letter-spacing: 0.12em;
    color: var(--muted);
}

/* Œuf offert : le mot de l'équipe, doré */
.incubator .gift-note {
    color: #ffd27a;
    font-weight: 600;
    text-align: center;
}

.egg-slot {
    height: 74px;
    display: grid;
    place-items: center;
}

.egg-slot .egg {
    width: 50px;
    height: 64px;
    transform-origin: 50% 90%;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5));
}

.egg-slot span {
    font-size: 26px;
    color: var(--faint);
}

.egg-slot.wobble .egg {
    animation: egg-shake 1.6s ease-in-out infinite;
}

.heat {
    position: relative;
    width: 100%;
    height: 14px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.07);
    overflow: hidden;
}

.heat i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #ff8a3d, #ffc94d);
}

.heat em {
    position: absolute;
    inset: 0;
    font-style: normal;
    font-size: 10px;
    font-weight: 700;
    line-height: 14px;
}

.egg-shop {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
}

.egg-offer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--stroke);
}

.egg-offer-art .egg {
    width: 40px;
    height: 52px;
}

.egg-offer > div:nth-child(2) {
    flex: 1;
    min-width: 0;
}

.egg-offer small {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
}

.family-pick {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 8px;
}

.family-pick button {
    width: 24px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid transparent;
    opacity: 0.55;
    transition: opacity 0.15s, border-color 0.15s;
}

.family-pick .egg {
    width: 18px;
    height: 24px;
}

.family-pick button.active {
    opacity: 1;
    border-color: rgba(var(--hl-rgb), 0.7);
    background: rgba(var(--hl-rgb), 0.12);
}

/* ---------- Collection ---------- */

.mon-grid {
    display: grid;
    /* Deux colonnes fixes tronquaient tout (« Insti… », « Innés 171 / 250 … ») alors que le
       panneau restait vide en dessous : on ne passe à deux colonnes que s'il y a la place. */
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 8px;
    list-style: none;
}

.mon-card {
    min-width: 0;
    --c-rgb: 95, 212, 255;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--stroke);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.mon-card:hover {
    border-color: rgba(var(--c-rgb), 0.55);
}

.mon-card.active {
    background: linear-gradient(100deg, rgba(var(--c-rgb), 0.18), rgba(var(--c-rgb), 0.03));
    border-color: rgba(var(--c-rgb), 0.7);
}

.mon-egg .egg {
    width: 32px;
    height: 41px;
}

.mon-body {
    flex: 1;
    min-width: 0;
}

.mon-body b {
    display: block;
    font-size: 14px;
    color: rgb(var(--c-rgb));
}

.mon-body small {
    display: block;
    font-size: 11.5px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- Réglages ---------- */

.settings {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: var(--muted);
}

.segmented {
    display: flex;
    gap: 4px;
    padding: 3px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--stroke);
}

.segmented button {
    flex: 1;
    padding: 7px 4px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
}

.segmented button.active {
    background: rgba(var(--hl-rgb), 0.2);
    color: var(--text);
}

.field input[type="range"] {
    accent-color: rgb(var(--hl-rgb));
}

.buttons-row {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

/* ---------- Éclosion ---------- */

.page-hatching {
    text-align: left;
}

.hatch-dots {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

.hatch-dots i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgb(var(--hl-rgb));
    box-shadow: 0 0 10px rgba(var(--hl-rgb), 0.9);
    animation: pulse 1.1s ease-in-out infinite;
}

.hatch-dots i:nth-child(2) { animation-delay: 0.18s; }
.hatch-dots i:nth-child(3) { animation-delay: 0.36s; }

.shiny-banner {
    margin-bottom: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    font-weight: 700;
    color: #1a1204;
    background: linear-gradient(120deg, #ffe38a, #ffc94d);
    box-shadow: 0 0 30px -6px rgba(255, 201, 77, 0.8);
    animation: reveal-glow 1.4s ease-out;
}

.reveal-ivs {
    display: flex;
    flex-direction: column;
    gap: 7px;
    list-style: none;
}

.reveal-ivs li {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 70px;
    align-items: center;
    gap: 10px;
    animation: page-in 0.5s var(--d, 0s) cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.reveal-ivs li .iv-bar i {
    transform-origin: left;
    animation: bar-fill 0.9s var(--d, 0s) cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.reveal-ivs small {
    color: var(--faint);
    font-size: 12px;
}

/* ---------- Chargement global ---------- */

.hub-loading {
    position: absolute;
    left: calc(var(--side-w) + (100% - var(--side-w) - 470px) / 2);
    bottom: 34px;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 16px;
    border-radius: 99px;
    background: var(--glass-strong);
    border: 1px solid var(--stroke);
    font-size: 12.5px;
    color: var(--muted);
}

.hub-loading-track {
    width: 140px;
    height: 4px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.hub-loading-track i {
    display: block;
    height: 100%;
    width: 0;
    background: rgb(var(--hl-rgb));
    transition: width 0.25s;
}

/* ---------- Infobulles ---------- */

.hub [data-tip] {
    position: relative;
}

/* Une seule bulle pour tout le hub (hub.js, showTip), en position fixe : plus coupée par les panneaux qui
   défilent, gardée dans l'écran, au-dessus de l'élément ou dessous faute de place */
.hub-tip {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 60;
    width: max-content;
    max-width: 260px;
    padding: 8px 11px;
    border-radius: 10px;
    background: rgba(3, 10, 18, 0.97);
    border: 1px solid var(--stroke-strong);
    color: var(--text);
    font-family: var(--font);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
    white-space: pre-line;
    text-align: left;
    pointer-events: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s, visibility 0.12s;
}

.hub-tip.on {
    opacity: 1;
    visibility: visible;
}

/* ---------- Animations ---------- */

@keyframes egg-wobble {
    0%, 60%, 100% { transform: rotate(0); }
    68% { transform: rotate(-8deg); }
    76% { transform: rotate(7deg); }
    84% { transform: rotate(-4deg); }
    92% { transform: rotate(2deg); }
}

@keyframes egg-shake {
    0%, 45%, 100% { transform: rotate(0) translateY(0); }
    52% { transform: rotate(-9deg) translateY(-2px); }
    60% { transform: rotate(8deg) translateY(-3px); }
    68% { transform: rotate(-6deg) translateY(-1px); }
    76% { transform: rotate(4deg); }
    84% { transform: rotate(-2deg); }
}

@keyframes egg-float {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-4px) rotate(2deg); }
}

@keyframes name-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

@keyframes page-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

@keyframes twinkle {
    0%, 100% { opacity: 1; transform: scale(1) rotate(0); }
    50% { opacity: 0.55; transform: scale(0.8) rotate(20deg); }
}

@keyframes reveal-glow {
    0% { box-shadow: 0 0 0 0 rgba(var(--hl-rgb), 0.8), inset 0 0 40px rgba(var(--hl-rgb), 0.5); }
    100% { box-shadow: 0 0 0 14px rgba(var(--hl-rgb), 0), inset 0 0 0 rgba(var(--hl-rgb), 0); }
}

@keyframes bar-fill {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .hub *,
    .hub *::before,
    .hub *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ---------- Écrans plus étroits ---------- */

@media (max-width: 1180px) and (not ((orientation: landscape) and (max-height: 500px))) {
    .hub-main {
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .stage-card {
        flex-shrink: 0;
        height: clamp(420px, 62vh, 640px);
        transition: height 0.25s ease;
    }

    /* Onglets de données : la créature n'y est que décorative, et la scène mangeait 84 % de
       l'écran — il ne restait que 133px de contenu visible sans scroller. */
    .hub-main:has(#hub-panel[data-tab='mastery']) .stage-card,
    .hub-main:has(#hub-panel[data-tab='sanctuary']) .stage-card,
    .hub-main:has(#hub-panel[data-tab='hatchery']) .stage-card,
    .hub-main:has(#hub-panel[data-tab='collection']) .stage-card,
    .hub-main:has(#hub-panel[data-tab='settings']) .stage-card {
        height: clamp(190px, 26vh, 290px);
    }

    .hub .pages {
        flex-shrink: 0;
        overflow: visible;
        padding: 0;
    }

    .hub-loading {
        left: calc(var(--side-w) + (100% - var(--side-w)) / 2);
    }
}

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

    .hub-side {
        border-right: 0;
        border-bottom: 1px solid var(--stroke);
    }

    .side-head {
        padding: 12px 14px 6px;
    }

    .brand-mark {
        width: 40px;
        height: 40px;
    }

    .brand h1 {
        font-size: 17px;
    }

    .hub-nav {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 2px 12px 8px;
        scroll-snap-type: x proximity;
        scroll-padding: 0 12px;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }

    .hub-nav::-webkit-scrollbar {
        display: none;
    }

    /* Le scroller ne dit pas qu'il défile : on estompe le bord qui cache des onglets */
    .hub-nav.scrollable:not(.at-start) {
        mask-image: linear-gradient(90deg, transparent 0, #000 26px);
    }

    .hub-nav.scrollable:not(.at-end) {
        mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent 100%);
    }

    .hub-nav.scrollable:not(.at-start):not(.at-end) {
        mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
    }

    .nav-item {
        flex: 0 0 auto;
        width: auto;
        min-height: 44px;
        grid-template-columns: 28px auto;
        padding: 6px 12px 6px 8px;
        scroll-snap-align: center;
    }

    .nav-item + .nav-item {
        margin-top: 0;
    }

    .nav-icon {
        width: 28px;
        height: 28px;
        font-size: 13px;
    }

    .nav-text small {
        display: none;
    }

    /* Faute de 3e colonne en mode compact, la pastille se pose sur l'angle de l'icône */
    .nav-badge {
        position: absolute;
        top: 3px;
        left: 26px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        font-size: 10px;
        border: 1px solid #0b1520;
        pointer-events: none;
    }

    /* Un onglet à pastille hors champ : on marque le bord vers lequel défiler.
       Porté par le conteneur, sinon le mask-image de .hub-nav l'effacerait aussi. */
    .hub-nav-wrap[data-alert-left='1']::before,
    .hub-nav-wrap[data-alert-right='1']::after {
        content: '';
        position: absolute;
        top: 50%;
        z-index: 2;
        width: 3px;
        height: 22px;
        margin-top: -14px;
        border-radius: 3px;
        background: #ffc94d;
        box-shadow: 0 0 10px rgba(255, 201, 77, 0.95);
        animation: nav-alert 1.6s ease-in-out infinite;
        pointer-events: none;
    }

    .hub-nav-wrap[data-alert-left='1']::before {
        left: 2px;
    }

    .hub-nav-wrap[data-alert-right='1']::after {
        right: 2px;
    }

    @keyframes nav-alert {
        50% { opacity: 0.35; }
    }

    .side-foot {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 8px 14px 10px;
    }

    .hub-main {
        --gap: 12px;
    }

    .hub-loading {
        left: 50%;
    }

    .lineage-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .stage-top {
        flex-direction: column;
        gap: 10px;
        padding: 16px 16px 20px;
    }

    .shiny-box {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px 12px;
        text-align: left;
    }

    .drag-hint,
    .stage-egg,
    .evo-text small {
        display: none;
    }

    /* Trois stades sur 390px : sans ce resserrement, les trois noms s'affichent « W… » */
    .evo-step {
        padding: 8px 7px;
        gap: 6px;
    }

    .evo-num {
        width: 24px;
        height: 24px;
        font-size: 11px;
    }

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

    /* Zones tactiles : 26px est intenable au doigt, et c'est l'onglet le plus utilisé */
    .alloc button {
        width: 38px;
        height: 38px;
    }

    .alloc {
        gap: 4px;
    }

    /* Mêmes causes ailleurs : on agrandit la cible sans changer l'apparence du texte */
    .hub .link-btn {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
        padding: 0 6px;
    }

    .hub .icon-btn {
        width: 38px;
        height: 38px;
    }

    .hub .buy {
        min-height: 40px;
    }

    .facts,
    .mastery,
    .mon-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .sheet-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .incubators {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

/* rogue.css donne un fond translucide à #screen-title (ancien écran titre) : le sanctuaire est opaque */
#screen-title.hub {
    background: #02070d;
    backdrop-filter: none;
}

/* ================================================================== */
/* ALANDYS : typographie des titres, marque, itinéraire des îles        */
/* ================================================================== */

:root {
    --display: 'Lilita One', 'Outfit', system-ui, sans-serif;
}

/* Titres façon logo : lettres épaisses, dégradé or → braise */
.form-name,
.depth-value b {
    font-family: var(--display);
    font-weight: 400;
    letter-spacing: 0.01em;
}

.hub .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);
}

.hub .btn-primary:hover:not(:disabled) {
    box-shadow: 0 16px 36px -12px rgba(255, 150, 60, 1), inset 0 -3px 0 rgba(140, 40, 10, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

/* ---------- Marque ---------- */

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.brand-mark {
    width: 58px;
    height: 58px;
    margin: -6px -4px -6px -8px;
}

.brand-title {
    font-family: var(--display);
    font-size: 32px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: linear-gradient(180deg, #ffe98a 0%, #ffc542 45%, #ff8f3a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 0 rgba(70, 26, 10, 0.9)) drop-shadow(0 6px 14px rgba(255, 140, 60, 0.25));
}

.brand p {
    margin-top: 4px;
}

.welcome-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 2px 0 16px;
}

.welcome-mark {
    width: 104px;
    height: 104px;
    margin: -10px -6px -10px 0;
}

.welcome-brand .brand-title {
    font-size: 50px;
}

@keyframes logo-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* ---------- Itinéraire des îles ---------- */

.route {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
}

.route-island {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 8px 12px 8px 6px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--stroke);
}

.route-island img {
    width: 86px;
    height: 86px;
    object-fit: contain;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.55));
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1.3);
}

.route-island:hover img {
    transform: translateY(-4px) rotate(-2deg);
}

.route-island > div {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.route-island small {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgb(var(--hl-rgb));
}

.route-island b {
    font-family: var(--display);
    font-size: 19px;
    font-weight: 400;
    letter-spacing: 0.01em;
}

.route-island span {
    font-size: 12.5px;
    color: var(--muted);
}

.route-island em {
    margin-top: 2px;
    font-style: normal;
    font-size: 12px;
    color: #ffb3a0;
}

@media (max-width: 900px), (orientation: landscape) and (max-height: 500px) {
    .brand-mark {
        width: 44px;
        height: 44px;
    }

    .brand-title {
        font-size: 24px;
    }
}

/* ================================================================== */
/* Carte des mers : archipels, fiche d'archipel, départ                 */
/* ================================================================== */

.sea-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sea-card {
    --arch-rgb: 150, 215, 255;
    position: relative;
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 12px 8px 6px;
    border-radius: 16px;
    border: 1px solid var(--stroke);
    background: rgba(255, 255, 255, 0.03);
    text-align: left;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, transform 0.2s, box-shadow 0.25s;
}

button.sea-card:hover {
    border-color: rgba(var(--arch-rgb), 0.5);
    transform: translateY(-1px);
}

.sea-card.is-selected {
    border-color: rgba(var(--arch-rgb), 0.75);
    background: linear-gradient(110deg, rgba(var(--arch-rgb), 0.18), rgba(var(--arch-rgb), 0.03) 70%);
    box-shadow: 0 12px 30px -18px rgba(var(--arch-rgb), 0.9);
}

.sea-card.is-locked img {
    filter: grayscale(0.85) brightness(0.55);
}

.sea-card.is-locked b,
.sea-card.is-locked span {
    opacity: 0.6;
}

/* Bandeau d'ambiance : l'île telle qu'on la joue (capture du jeu), à droite, fondue vers le texte */
button.sea-card {
    grid-template-columns: minmax(0, 1fr);
    min-height: 96px;
    padding: 12px 16px;
    overflow: hidden;
    isolation: isolate;
}

.sea-card img {
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    width: min(64%, 330px);
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    opacity: 0.85;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%);
    mask-image: linear-gradient(90deg, transparent, #000 55%);
    transition: opacity 0.25s, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

button.sea-card:hover img,
.sea-card.is-selected img {
    opacity: 1;
}

button.sea-card:hover img {
    transform: scale(1.04);
}

.sea-card > div {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

button.sea-card > div {
    max-width: 66%;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

@media (max-width: 520px) {
    button.sea-card > div {
        max-width: 78%;
    }
}

.sea-card small {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgb(var(--arch-rgb));
}

.sea-card b {
    font-family: var(--display);
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.01em;
}

.sea-card span {
    font-size: 12px;
    color: var(--muted);
}

.sea-card em {
    margin-top: 2px;
    font-style: normal;
    font-size: 12px;
    font-weight: 600;
    color: rgba(var(--arch-rgb), 0.9);
}

.sea-card.is-locked em {
    color: var(--faint);
}

.sea-card.is-soon {
    cursor: default;
    border-style: dashed;
    background: transparent;
    opacity: 0.7;
}

.sea-card.is-soon small,
.sea-card.is-soon em {
    color: var(--faint);
}

.sea-fog {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-left: 6px;
    border-radius: 50%;
    border: 1px dashed var(--stroke-strong);
    font-family: var(--display);
    font-size: 26px;
    color: var(--faint);
}

.stars {
    font-style: normal;
    letter-spacing: 0.05em;
}

/* Fiche d'archipel */

.page-archipel {
    --arch-rgb: 150, 215, 255;
}

.page-archipel .page-kicker,
.page-archipel .page-aside {
    color: rgb(var(--arch-rgb));
}

.arch-title {
    font-family: var(--display);
    font-size: 26px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0.01em;
}

.arch-tagline {
    margin-top: 2px;
    font-size: 13px;
    color: var(--muted);
}

.arch-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0 4px;
}

.hub .tag-arch {
    color: rgb(var(--arch-rgb));
    border-color: rgba(var(--arch-rgb), 0.35);
    background: rgba(var(--arch-rgb), 0.1);
}

.hub .note.warn {
    color: #ffc9a0;
}

.isle-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
    list-style: none;
}

.isle {
    --isle-rgb: var(--arch-rgb);
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 9px 12px;
    border-radius: 14px;
    border: 1px solid var(--stroke);
    background: rgba(255, 255, 255, 0.025);
    text-align: left;
    color: inherit;
    font: inherit;
}

/* Portrait du boss de l'île (capturé en jeu) : au bout de la zone de texte, juste avant le temps (placé en absolu dans
   la case de grille du texte : il ne recouvre jamais le statut et déborde en hauteur sans agrandir la ligne) */
.isle {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.isle-boss {
    position: absolute;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    right: -4px;
    bottom: -19px;
    z-index: -1;
    height: min(calc(100% + 44px), 116px);
    width: auto;
    pointer-events: none;
    opacity: 0.92;
    transform-origin: 50% 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 32%);
    mask-image: linear-gradient(90deg, transparent, #000 32%);
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s;
}

.isle:hover .isle-boss {
    opacity: 1;
    transform: scale(1.06);
}

.isle-body {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

/* Fiche étroite : le texte passe souvent sur le portrait, il se fait plus discret */
@media (max-width: 520px) {
    .isle-boss {
        opacity: 0.55;
    }
}

.isle-num {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(var(--isle-rgb), 0.45);
    background: rgba(var(--isle-rgb), 0.1);
    font-family: var(--serif);
    font-size: 13px;
    font-weight: 600;
    color: rgb(var(--isle-rgb));
}

.isle-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.isle-body small {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--faint);
}

.isle-body b {
    font-size: 15px;
    font-weight: 600;
}

.isle-body > span {
    font-size: 12px;
    color: var(--muted);
}

/* Monstre emblématique de l'île */
.isle-sig {
    margin-top: 2px;
    font-size: 11px;
    font-style: normal;
    color: rgb(var(--isle-rgb));
    opacity: 0.85;
}

/* Aperçu du viseur dans les réglages (hub.js cursorSettingsHtml) */
.cursor-preview {
    vertical-align: -4px;
}

/* Ce qui frappe dans l'archipel (hub.js damageTag) : couleur du type de dégâts */
.hub .tag-dmg {
    color: var(--dmg);
    border-color: color-mix(in srgb, var(--dmg) 40%, transparent);
    background: color-mix(in srgb, var(--dmg) 10%, transparent);
}

/* Danger de l'archipel (stalactites, mains des morts, geysers) */
.tag-hazard {
    border-color: rgba(255, 138, 61, 0.35);
    color: #ffc9a0;
}

.isle-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.isle-status b {
    font-family: var(--display);
    font-size: 16px;
    font-weight: 400;
    color: var(--xp);
}

.isle-status small {
    font-size: 11px;
    color: var(--faint);
}

.isle.is-beaten .isle-num {
    border-color: rgba(109, 255, 176, 0.5);
}

/* Île du Seigneur : le boss final de l'archipel, liseré doré */
.isle.is-lord {
    border-color: rgba(255, 201, 77, 0.42);
    background: linear-gradient(100deg, rgba(255, 201, 77, 0.08), transparent 60%), rgba(255, 255, 255, 0.025);
}

.isle.is-lord .isle-num {
    border-color: rgba(255, 201, 77, 0.7);
    background: rgba(255, 201, 77, 0.1);
    color: #ffd36b;
}

.lord-tag {
    margin-left: 4px;
    padding: 1px 7px;
    border-radius: 99px;
    font-style: normal;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1a1204;
    background: linear-gradient(120deg, #ffe38a, #ffc94d);
}

.lobby-dest {
    font-size: 12.5px;
    color: var(--muted);
}

/* Île solo (la Fournaise) : pastille « Solo » sur la carte des mers, encart de la fiche, tuile du duel */
.solo-tag {
    display: inline-block;
    margin-right: 4px;
    padding: 0 6px;
    border-radius: 99px;
    font-style: normal;
    letter-spacing: 0.1em;
    color: #1a0703;
    background: linear-gradient(120deg, #ffb35a, #ff5a1a);
}

.sea-card.is-solo {
    border-color: rgba(255, 106, 42, 0.35);
}

.hub .tag-solo {
    color: #ffd0b0;
    border-color: rgba(255, 106, 42, 0.45);
    background: rgba(255, 90, 26, 0.12);
}

.hub .note.solo-note {
    margin-top: 6px;
    color: #ffd0b0;
}

.mode-tile.mode-duel {
    border-color: rgba(255, 106, 42, 0.5);
    background: linear-gradient(140deg, rgba(255, 90, 26, 0.16), transparent 70%);
}

/* ---------- Connexion (compte obligatoire : Google, Discord) ---------- */

.page-login .login-list {
    display: grid;
    gap: 10px;
    max-width: 360px;
    margin: 18px auto 4px;
}

.login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 13px 18px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
    color: #eaf2ff;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    transition: transform 0.15s, background 0.15s, border-color 0.15s;
}

.login-btn:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

.login-icon {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 800;
}

.login-google .login-icon {
    color: #1f1f1f;
    background: #ffffff;
}

.login-discord {
    background: rgba(88, 101, 242, 0.22);
    border-color: rgba(88, 101, 242, 0.55);
}

.login-discord .login-icon {
    color: #ffffff;
    background: #5865f2;
}

.login-dev {
    display: flex;
    gap: 8px;
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px dashed rgba(255, 255, 255, 0.14);
}

.login-dev input {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    border-radius: 10px;
    font: inherit;
    color: var(--text);
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

/* Écran de fin : récompenses en attente du serveur (rogue/ui.js, showEnd) */
.reward.pending {
    color: var(--muted, rgba(205, 228, 244, 0.66));
    font-style: italic;
}

/* ---------- Comptoir des éleveurs (onglet Comptoir, bouton Vendre de la Collection) ---------- */

/* Un marché a besoin de place : la colonne des pages s'élargit sur cet onglet (la scène garde la
   créature de l'annonce ouverte) */
@media (min-width: 1181px), (orientation: landscape) and (max-height: 500px) {
    .hub-main:has(#hub-panel[data-tab='market']) {
        grid-template-columns: minmax(0, 1fr) clamp(420px, 42vw, 620px);
    }

    /* Scène plus étroite : le nom ne se coupe plus au milieu d'un mot, l'indication de rotation laisse
       toute la largeur au titre */
    .hub-main:has(#hub-panel[data-tab='market']) .form-name {
        font-size: clamp(28px, 2.7vw, 46px);
        overflow-wrap: break-word;
    }

    .hub-main:has(#hub-panel[data-tab='market']) .shiny-box {
        display: none;
    }
}

/* Écran étroit (pages sous la scène) : scène plus basse, la liste passe devant */
@media (max-width: 1180px) and (not ((orientation: landscape) and (max-height: 500px))) {
    .hub-main:has(#hub-panel[data-tab='market']) .stage-card {
        height: clamp(230px, 34vh, 360px);
    }
}

.perles {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.perles i {
    font-style: normal;
}

/* Collection : créature en vente, boutons Vendre / Retirer */
.mon-actions {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.mon-card.listed {
    border-style: dashed;
    background: rgba(255, 210, 122, 0.04);
}

.listed-tag {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #ffd27a;
}

/* En-tête */
.market-head-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.market-head-row .page-intro {
    flex: 1;
    margin: 0;
}

.market-head-row .btn-primary {
    flex: none;
}

/* Recherche */
.market-search {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.market-query-row {
    display: flex;
    gap: 8px;
}

.market-query {
    position: relative;
    display: flex;
    flex: 1;
    min-width: 0;
    align-items: center;
}

.market-query-icon {
    position: absolute;
    left: 13px;
    font-size: 18px;
    line-height: 1;
    color: var(--faint);
    pointer-events: none;
}

.market-query input {
    width: 100%;
    min-width: 0;
    padding: 11px 38px 11px 38px;
    border-radius: 12px;
    font: inherit;
    font-size: 14px;
    color: var(--text);
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid var(--stroke-strong);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.market-query input::placeholder {
    color: var(--faint);
}

.market-query input:focus {
    outline: none;
    border-color: rgba(255, 210, 122, 0.6);
    box-shadow: 0 0 0 3px rgba(255, 210, 122, 0.12);
}

.market-query input::-webkit-search-cancel-button {
    display: none;
}

.market-query-clear {
    position: absolute;
    right: 8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 11px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.06);
}

.market-query-clear:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.12);
}

/* Lignées : pastilles d'œufs, défilent sur une ligne */
.lineage-chips {
    display: flex;
    gap: 6px;
    padding: 2px 2px 6px;
    overflow-x: auto;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
}

.lineage-chip {
    --c-rgb: 150, 215, 255;
    flex: none;
    display: grid;
    place-items: center;
    width: 42px;
    height: 46px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--stroke);
    scroll-snap-align: start;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

.lineage-chip .egg {
    width: 22px;
    height: 28px;
}

.lineage-chip:hover {
    transform: translateY(-1px);
    border-color: rgba(var(--c-rgb), 0.5);
}

.lineage-chip.on {
    background: linear-gradient(180deg, rgba(var(--c-rgb), 0.28), rgba(var(--c-rgb), 0.06));
    border-color: rgba(var(--c-rgb), 0.85);
    box-shadow: 0 0 14px -4px rgba(var(--c-rgb), 0.8);
}

.lineage-chip.all {
    width: auto;
    padding: 0 13px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--muted);
}

.lineage-chip.all.on {
    --c-rgb: 255, 210, 122;
    color: var(--text);
}

/* Filtres rapides et détaillés */
.market-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.toggle-chip {
    padding: 6px 12px;
    border-radius: 99px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--stroke);
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.toggle-chip i {
    font-style: normal;
}

.toggle-chip:hover {
    color: var(--text);
    border-color: var(--stroke-strong);
}

.toggle-chip.on {
    color: #2b1a05;
    background: linear-gradient(180deg, #ffe38a, #ffc24d);
    border-color: transparent;
}

.toggle-chip.on i {
    color: #2b1a05 !important;
}

.toggle-chip.more {
    flex: none;
    padding: 0 14px;
    border-radius: 12px;
    font-size: 13px;
}

.toggle-chip.more.on {
    color: var(--text);
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--stroke-strong);
}

.market-advanced {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid var(--stroke);
}

.market-advanced label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--faint);
}

.market-advanced label b {
    color: var(--text);
}

.market-advanced select,
.market-advanced input[type="number"] {
    width: 100%;
    min-width: 0;
    padding: 7px 9px;
    border-radius: 9px;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--text);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--stroke-strong);
}

.market-advanced input[type="range"] {
    width: 100%;
    accent-color: #ffd27a;
}

/* Résumé : nombre de résultats, effacement des filtres, tri */
.market-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding-top: 10px;
    border-top: 1px solid var(--stroke);
    font-size: 13px;
    color: var(--muted);
}

.market-count {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 12px;
}

.market-summary b {
    color: var(--text);
}

.market-summary .link-btn {
    padding: 0;
    font-size: 12.5px;
    color: #ffd27a;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.market-sort {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--faint);
}

.market-sort select {
    padding: 6px 30px 6px 11px;
    border-radius: 9px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    background: rgba(0, 0, 0, 0.3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23ffd27a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 11px center / 10px 6px;
    border: 1px solid var(--stroke-strong);
    appearance: none;
    cursor: pointer;
}

.market-sort select:hover {
    border-color: rgba(255, 210, 122, 0.5);
}

/* Listes natives du Comptoir : menu déroulant sombre */
.market-sort select,
.market-advanced select {
    color-scheme: dark;
}

.market-sort option,
.market-advanced option {
    color: #eef1f8;
    background: #151b2c;
}

/* Résultats */
.market-results.is-loading .market-list {
    opacity: 0.55;
    transition: opacity 0.2s;
}

.market-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    list-style: none;
}

.market-row {
    --c-rgb: 95, 212, 255;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 96px auto;
    align-items: center;
    gap: 12px;
    padding: 9px 12px 9px 9px;
    border-radius: 12px;
    background: linear-gradient(100deg, rgba(var(--c-rgb), 0.07), rgba(var(--c-rgb), 0.01) 60%);
    border: 1px solid var(--stroke);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

.market-row:hover,
.market-row:focus-visible {
    outline: none;
    border-color: rgba(var(--c-rgb), 0.55);
    transform: translateX(2px);
}

.market-row.on {
    border-color: rgba(var(--c-rgb), 0.9);
    background: linear-gradient(100deg, rgba(var(--c-rgb), 0.2), rgba(var(--c-rgb), 0.04) 70%);
}

.market-row .mon-egg .egg {
    width: 26px;
    height: 33px;
}

.row-main {
    min-width: 0;
}

.row-main b,
.row-main small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.row-main b {
    font-size: 14.5px;
}

.row-main small {
    margin-top: 2px;
    font-size: 12px;
    color: var(--muted);
}

.row-secret {
    color: #d9b8ff;
}

.row-iv {
    display: flex;
    align-items: center;
    gap: 7px;
}

.row-iv .iv-bar {
    flex: 1;
    height: 7px;
    border-radius: 4px;
}

.row-iv small {
    width: 26px;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--muted);
}

.row-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    min-width: 64px;
}

.row-price b {
    font-size: 14.5px;
}

.row-price small {
    font-size: 11px;
    color: var(--faint);
}

.deal-badge {
    padding: 1px 7px;
    border-radius: 99px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.deal-badge.good {
    color: #bff4c9;
    background: rgba(94, 224, 138, 0.14);
    border: 1px solid rgba(94, 224, 138, 0.4);
}

.deal-badge.high {
    color: #ffc4b8;
    background: rgba(255, 122, 110, 0.1);
    border: 1px solid rgba(255, 122, 110, 0.32);
}

.market-empty {
    padding: 22px 12px;
    font-size: 13.5px;
    line-height: 1.5;
    text-align: center;
    color: var(--muted);
}

.market-pages {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 12px;
    font-size: 13px;
    color: var(--muted);
}

.market-pages b {
    color: var(--text);
}

.market-pages button[disabled] {
    opacity: 0.35;
    cursor: default;
}

/* Fiche d'une annonce */
.market-detail {
    display: flex;
    flex-direction: column;
    gap: 14px;
    border-color: rgba(var(--c-rgb), 0.55);
    background: linear-gradient(160deg, rgba(var(--c-rgb), 0.14), rgba(var(--c-rgb), 0.02) 55%), rgba(6, 16, 28, 0.6);
    animation: page-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.detail-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.detail-title b {
    display: block;
    font-size: 20px;
}

.detail-title small {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    color: var(--muted);
}

.detail-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.detail-block > b {
    font-size: 14.5px;
}

.detail-block > small {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--muted);
}

.detail-history {
    font-size: 12.5px;
    color: var(--muted);
}

.detail-deal {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.detail-deal > div {
    padding: 9px 10px;
    border-radius: 11px;
    background: rgba(0, 0, 0, 0.24);
    border: 1px solid var(--stroke);
}

.detail-deal small {
    display: block;
    font-size: 11px;
    color: var(--faint);
}

.detail-deal b {
    display: block;
    margin-top: 3px;
    font-size: 15px;
}

.market-detail .btn-primary.wide[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    filter: saturate(0.4);
}

.tag-price {
    color: #ffe9b0;
    border-color: rgba(255, 210, 122, 0.45);
}

/* Mise en vente */
.sell-panel {
    border-color: rgba(var(--c-rgb), 0.45);
    background: linear-gradient(135deg, rgba(var(--c-rgb), 0.12), rgba(var(--c-rgb), 0.02)), rgba(6, 16, 28, 0.6);
}

.sell-creature {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 14px;
}

.sell-creature b {
    display: block;
    font-size: 16px;
}

.sell-creature small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
}

.sell-price {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
}

.sell-price input[type="range"] {
    flex: 1;
    min-width: 0;
    accent-color: #ffd27a;
}

.sell-price input[type="number"] {
    width: 92px;
    padding: 7px 9px;
    border-radius: 10px;
    font: inherit;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--stroke-strong);
}

.sell-net {
    margin: 10px 0 4px;
    font-size: 13px;
    color: var(--muted);
}

.sell-net b {
    color: #ffd27a;
}

.sell-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

/* Dernières ventes et prix moyens */
.market-means {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.mean-chip {
    --c-rgb: 95, 212, 255;
    padding: 4px 10px;
    border-radius: 99px;
    font-size: 12px;
    color: var(--muted);
    background: rgba(var(--c-rgb), 0.08);
    border: 1px solid rgba(var(--c-rgb), 0.3);
}

.sales-list {
    list-style: none;
    display: grid;
    gap: 4px;
}

.sales-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: baseline;
    gap: 12px;
    padding: 6px 2px;
    border-bottom: 1px solid var(--stroke);
    font-size: 13px;
    color: var(--muted);
}

.sales-list li span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sales-list li b {
    color: var(--text);
}

.sales-list li small {
    font-size: 11.5px;
    color: var(--faint);
}

/* Petits écrans : valeurs innées sous le nom, filtres détaillés empilés */
@media (max-width: 560px) {
    .market-head-row {
        flex-direction: column;
        align-items: stretch;
    }

    .market-row {
        grid-template-columns: 30px minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        column-gap: 10px;
        row-gap: 4px;
    }

    .market-row .mon-egg {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .row-main {
        grid-column: 2;
        grid-row: 1;
    }

    .row-iv {
        grid-column: 2;
        grid-row: 2;
    }

    .row-price {
        grid-column: 3;
        grid-row: 1 / span 2;
    }

    .market-advanced,
    .detail-deal {
        grid-template-columns: 1fr;
    }
}

/* ---------- Boutique (onglet Boutique, data/cosmetics.js) ---------- */

.eclats {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.eclats i {
    font-style: normal;
}

.cost-plus {
    color: var(--faint);
}

.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 10px;
    margin-top: 12px;
    list-style: none;
}

.shop-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 14px 10px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--stroke);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.shop-item:hover {
    border-color: var(--stroke-strong);
    background: rgba(255, 255, 255, 0.06);
}

.shop-item.on {
    border-color: rgba(255, 210, 122, 0.7);
    background: rgba(255, 210, 122, 0.08);
}

.shop-item b {
    font-size: 13.5px;
    line-height: 1.2;
}

.shop-price {
    font-size: 12.5px;
    color: var(--muted);
}

.shop-tag {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 99px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.shop-tag.worn {
    color: #2b1a05;
    background: linear-gradient(180deg, #ffe38a, #ffc24d);
}

.shop-tag.owned {
    color: #bdf5d2;
    background: rgba(95, 214, 150, 0.14);
    border: 1px solid rgba(95, 214, 150, 0.4);
}

.shop-tag.lock {
    color: #dcc6ff;
    background: rgba(197, 139, 255, 0.12);
    border: 1px solid rgba(197, 139, 255, 0.35);
}

.shop-tag.patron {
    color: #2a1640;
    background: linear-gradient(120deg, #c9a8ff, #ffc94d);
}

/* Onglets de la Boutique : les pastilles du Comptoir ; ✦ Fondateur aux couleurs du Pack Mécène */
.shop-tabs {
    gap: 5px;
    margin-top: 10px;
}

/* Cinq rayons sur une ligne dans la colonne de 470 px (ils passent à la ligne sur une colonne plus étroite) */
.shop-tabs .mk-tab {
    padding-inline: 10px;
}

.mk-tab.patron-tab {
    color: #e6d6ff;
    border-color: rgba(154, 107, 255, 0.55);
    background: linear-gradient(120deg, rgba(154, 107, 255, 0.22), rgba(255, 201, 77, 0.1));
}

.mk-tab.patron-tab:hover,
.mk-tab.patron-tab:focus-visible {
    color: #fff4d6;
    border-color: rgba(255, 201, 77, 0.7);
}

.mk-tab.patron-tab.on {
    color: #2a1640;
    border-color: #ffc94d;
    background: linear-gradient(120deg, #c9a8ff, #ffc94d);
}

/* Écran étroit : la fiche du skin se déplie sous sa case, sur toute la largeur ; les cases suivantes comblent la ligne */
.shop-grid {
    grid-auto-flow: row dense;
}

.shop-inline {
    grid-column: 1 / -1;
    list-style: none;
}

/* Prix hors de portée : estompé ; prestige dont la condition est remplie : il n'attend que toi */
.shop-price.short {
    color: var(--faint);
    opacity: 0.7;
}

.shop-item.claimable {
    border-color: rgba(255, 210, 122, 0.55);
    box-shadow: 0 0 0 1px rgba(255, 210, 122, 0.18), 0 10px 26px -16px rgba(255, 210, 122, 0.9);
}

.shop-tag.claim {
    color: #ffe2a0;
    background: rgba(255, 210, 122, 0.12);
    border: 1px solid rgba(255, 210, 122, 0.55);
}

.shop-shinies {
    margin-top: 6px;
    color: var(--muted);
}

.shop-shinies.none {
    color: #ffc27a;
}

.shop-lock.patron {
    color: #f1e4ff;
    border-color: rgba(201, 168, 255, 0.5);
    background: linear-gradient(120deg, rgba(154, 107, 255, 0.14), rgba(255, 201, 77, 0.08));
}

/* Pack Mécène : violet royal traversé d'or, comme son aura */
.hub .patron-card {
    --patron-a: 154, 107, 255;
    --patron-b: 255, 201, 77;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-color: rgba(var(--patron-a), 0.55);
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(var(--patron-b), 0.14), transparent 55%),
        linear-gradient(160deg, rgba(var(--patron-a), 0.2), rgba(var(--patron-a), 0.03) 60%), rgba(8, 10, 26, 0.72);
    box-shadow: 0 18px 44px -26px rgba(var(--patron-a), 0.9);
}

.patron-card .page-kicker {
    color: #e6d4ff;
}

.patron-card .page-aside {
    font-weight: 700;
    color: rgb(var(--patron-b));
}

.patron-card .page-intro {
    margin: 0;
}

.patron-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.patron-items li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 14px;
    border: 1px solid rgba(var(--patron-a), 0.3);
    background: rgba(6, 8, 22, 0.55);
}

.patron-items .swatch,
.patron-egg {
    flex: none;
    width: 42px;
    height: 42px;
}

.patron-egg {
    display: grid;
    place-items: center;
}

.patron-egg .egg {
    width: 30px;
    height: 39px;
    filter: drop-shadow(0 0 10px rgba(var(--patron-b), 0.8)) saturate(1.3);
}

.patron-items b {
    display: block;
    font-size: 13.5px;
}

.patron-items small {
    color: var(--faint);
    font-size: 11.5px;
}

.patron-waiver {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 12.5px;
    color: var(--muted);
    cursor: pointer;
}

.patron-waiver input {
    flex: none;
    margin-top: 2px;
    accent-color: rgb(var(--patron-a));
}

.patron-card .btn-primary {
    background: linear-gradient(120deg, rgb(var(--patron-a)), rgb(var(--patron-b)));
    color: #1a0f2e;
}

.patron-card .btn-primary:disabled {
    filter: grayscale(0.6) brightness(0.7);
}

.patron-card .note a {
    color: rgb(var(--patron-b));
    text-underline-offset: 3px;
}

.patron-card .note {
    margin: 0;
}

.patron-lineages {
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
}

/* Sexe de la créature de l'œuf */
.patron-genders {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.patron-gender {
    padding: 9px 10px;
    border-radius: 12px;
    border: 1px solid rgba(var(--patron-a), 0.32);
    background: rgba(6, 8, 22, 0.55);
    color: var(--text);
    font-weight: 700;
    transition: border-color 0.15s, background 0.15s;
}

.patron-gender:hover {
    border-color: rgba(var(--patron-b), 0.6);
}

.patron-gender.on {
    border-color: rgb(var(--patron-b));
    background: linear-gradient(120deg, rgba(var(--patron-a), 0.3), rgba(var(--patron-b), 0.2));
}

/* Les trois paliers du pack */
.patron-tiers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.patron-tier {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 14px 8px 12px;
    border-radius: 16px;
    border: 1px solid rgba(var(--patron-a), 0.32);
    background: linear-gradient(180deg, rgba(var(--patron-a), 0.12), rgba(6, 8, 22, 0.6));
    color: var(--text);
    text-align: center;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.2s;
}

.patron-tier:not(:disabled):hover {
    border-color: rgba(var(--patron-b), 0.6);
    transform: translateY(-2px);
}

.patron-tier.on {
    border-color: rgb(var(--patron-b));
    background: linear-gradient(180deg, rgba(var(--patron-b), 0.18), rgba(var(--patron-a), 0.14) 60%, rgba(6, 8, 22, 0.6));
    box-shadow: 0 12px 30px -14px rgba(var(--patron-b), 0.9);
}

.patron-tier.owned {
    opacity: 0.6;
    cursor: default;
}

.patron-tier-num {
    position: absolute;
    top: 7px;
    left: 9px;
    font-family: var(--serif);
    font-size: 12px;
    font-weight: 700;
    color: rgb(var(--patron-b));
}

.patron-eggs {
    display: flex;
    justify-content: center;
    height: 40px;
}

.patron-eggs .egg {
    width: 26px;
    height: 34px;
    margin: 0 -4px;
    filter: drop-shadow(0 0 8px rgba(var(--patron-b), 0.75)) saturate(1.35);
}

.patron-eggs .egg:nth-child(2) {
    transform: translateY(5px);
}

.patron-tier b {
    font-size: 13px;
    line-height: 1.2;
}

.patron-bonus {
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 22px;
    font-size: 11.5px;
    color: #e6d4ff;
}

.patron-bonus .swatch {
    flex: none;
    width: 20px;
    height: 20px;
}

.patron-tier em {
    font-style: normal;
    font-size: 15px;
    font-weight: 800;
    color: rgb(var(--patron-b));
}

@media (max-width: 520px) {
    .patron-tiers {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Bandeau de l'édition Fondateur : son nom et sa fin (date de PATRON_ENDS, ou la fin de la bêta) */
.patron-edition {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin: 0;
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid rgba(var(--patron-b), 0.45);
    background: linear-gradient(120deg, rgba(var(--patron-b), 0.16), rgba(var(--patron-a), 0.12));
}

.patron-edition b {
    font-family: var(--serif);
    font-size: 16px;
    color: #ffe2a0;
}

.patron-edition span {
    font-size: 12px;
    font-weight: 700;
    color: #e6d4ff;
}

.patron-perks {
    display: grid;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.patron-perks li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
    line-height: 1.35;
    color: #efe6ff;
}

.patron-perks li > span {
    flex: none;
    color: rgb(var(--patron-b));
}

.patron-hint {
    text-align: center;
}

.patron-sheet,
.patron-inline {
    --patron-a: 154, 107, 255;
    --patron-b: 255, 201, 77;
}

.patron-inline .mk-inline-card {
    border-color: rgba(var(--patron-b), 0.55);
}

.patron-sheet .shop-sheet-head .patron-tier-num {
    position: static;
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 18px;
    border: 1px solid rgba(var(--patron-b), 0.6);
    background: linear-gradient(160deg, rgba(var(--patron-a), 0.35), rgba(6, 8, 22, 0.6));
}

.patron-price {
    margin-left: 4px;
    font-size: 0.8em;
    font-weight: 800;
    color: rgb(var(--patron-b));
}

.patron-contents {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.patron-contents li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 12px;
    border: 1px solid rgba(var(--patron-a), 0.32);
    background: linear-gradient(120deg, rgba(var(--patron-a), 0.12), rgba(6, 8, 22, 0.45));
}

.patron-contents li > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.patron-contents b {
    font-size: 13.5px;
}

.patron-contents small {
    font-size: 12px;
    line-height: 1.35;
    color: var(--muted);
}

.patron-contents .swatch,
.patron-contents .patron-eggs,
.patron-mark {
    flex: none;
    width: 44px;
    height: 44px;
}

.patron-contents .patron-eggs {
    align-items: center;
}

.patron-contents .patron-eggs .egg {
    width: 20px;
    height: 27px;
    margin: 0 -5px;
}

.patron-mark {
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 20px;
    color: #2a1640;
    background: linear-gradient(120deg, #c9a8ff, #ffc94d);
    box-shadow: 0 0 18px -4px rgba(var(--patron-b), 0.8);
}

.patron-sheet .note a,
.patron-inline .note a {
    color: rgb(var(--patron-b));
    text-underline-offset: 3px;
}

.patron-sheet .btn-primary {
    background: linear-gradient(120deg, rgb(var(--patron-a)), rgb(var(--patron-b)));
    color: #1a0f2e;
}

.patron-sheet .btn-primary:disabled {
    filter: grayscale(0.6) brightness(0.7);
}

.patron-sheet .mk-foot {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Marque Fondateur : sur la fiche de la Réserve et dans le titre de la scène */
.res-bound.founder {
    color: #ffe2a0;
    background: rgba(255, 201, 77, 0.12);
    box-shadow: inset 0 0 0 1px rgba(255, 201, 77, 0.6);
}

.tag.tag-founder {
    color: #2a1640;
    border-color: transparent;
    background: linear-gradient(120deg, #c9a8ff, #ffc94d);
}

.res-bound {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 7px;
    border-radius: 99px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    vertical-align: 0.15em;
    color: #2a1640;
    background: linear-gradient(120deg, #c9a8ff, #ffc94d);
}

/* Échantillons : dégradé d'une palette, lueur d'une aura, sillage d'une traînée */
.swatch {
    display: block;
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 50%;
}

.swatch.palette {
    background: linear-gradient(135deg, var(--a), var(--b) 55%, var(--c));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 8px 20px -10px var(--b);
}

.swatch.aura {
    background: radial-gradient(circle, color-mix(in srgb, var(--a) 70%, #ffffff) 0%, var(--a) 28%, transparent 70%);
}

.swatch.aura.cycle {
    animation: shop-hue 6s linear infinite;
}

.swatch.trail {
    position: relative;
    border-radius: 14px;
    background:
        radial-gradient(90% 70% at 78% 50%, color-mix(in srgb, var(--b) 34%, transparent), transparent 70%),
        rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.swatch.trail i {
    position: absolute;
    left: 8%;
    height: 5px;
    border-radius: 5px;
    background: linear-gradient(90deg, transparent, var(--a), var(--b));
    box-shadow: 0 0 8px color-mix(in srgb, var(--b) 70%, transparent);
    animation: shop-trail 1.4s ease-in-out infinite;
}

.swatch.trail i:nth-child(1) {
    top: 30%;
    width: 70%;
}

.swatch.trail i:nth-child(2) {
    top: 50%;
    width: 84%;
    animation-delay: 0.15s;
}

.swatch.trail i:nth-child(3) {
    top: 70%;
    width: 60%;
    animation-delay: 0.3s;
}

.swatch.trail.rainbow i {
    background: linear-gradient(90deg, transparent, #ff5f5f, #ffd25f, #5fff9a, #5fd4ff, #b28bff);
}

@keyframes shop-hue {
    to { filter: hue-rotate(360deg); }
}

@keyframes shop-trail {
    0% { transform: translateX(-30%); opacity: 0; }
    40% { opacity: 1; }
    100% { transform: translateX(30%); opacity: 0; }
}

/* Fiche du skin ouvert : sur la scène, à côté de son aperçu (renderStageSheet) ; écran étroit : dépliée sous sa case */
.stage-card.has-shop-sheet .stage-sheet {
    width: clamp(260px, 36%, 360px);
}

.shop-sheet-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.shop-sheet-head > div {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

.shop-sheet-head b {
    font-family: var(--serif);
    font-size: 20px;
    line-height: 1.15;
}

.shop-sheet-head .swatch {
    width: 64px;
    height: 64px;
}

.shop-sheet-head .icon-btn {
    align-self: flex-start;
}

.shop-sheet-desc {
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
}

.shop-lock {
    padding: 11px 14px;
    border-radius: 12px;
    background: rgba(197, 139, 255, 0.08);
    border: 1px dashed rgba(197, 139, 255, 0.4);
    color: #dcc6ff;
    font-weight: 600;
    text-align: center;
}

/* Variante : la porter sur l'un de ses chromatiques */
.shop-wearers {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.shop-wearers button {
    flex: 1 1 180px;
}

/* Écran étroit : la scène reste en haut pendant qu'on parcourt la liste, l'aperçu suit chaque touche */
@media (max-width: 1180px) and (not ((orientation: landscape) and (max-height: 500px))) {
    .hub-main:has(#hub-panel[data-tab='shop']) .stage-card {
        position: sticky;
        top: calc(-1 * var(--gap));
        z-index: 4;
        height: clamp(300px, 46vh, 470px);
    }
}

/* Sous la scène : sur quelle créature voir le skin (la tienne, ou une lignée jouable) */
.shop-models {
    display: flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 2px 2px 4px;
    overflow-x: auto;
    scrollbar-width: none;
    pointer-events: auto;
}

.shop-models::-webkit-scrollbar {
    display: none;
}

.shop-models-label {
    flex: none;
    margin-right: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--faint);
}

.shop-models-sep {
    flex: none;
    width: 1px;
    height: 22px;
    margin: 0 3px;
    background: var(--stroke-strong);
}

.model-chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 8px;
    border-radius: 12px;
    border: 1px solid var(--stroke);
    background: rgba(6, 18, 30, 0.72);
    color: var(--text);
    font-size: 12.5px;
    font-weight: 600;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

.model-chip .egg {
    width: 19px;
    height: 25px;
    transition: transform 0.2s;
}

.model-chip span {
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.model-chip:hover {
    border-color: rgba(var(--c-rgb), 0.55);
    transform: translateY(-1px);
}

.model-chip:hover .egg {
    transform: rotate(-8deg) scale(1.08);
}

.model-chip.on {
    border-color: rgba(var(--c-rgb), 0.85);
    background: linear-gradient(135deg, rgba(var(--c-rgb), 0.3), rgba(var(--c-rgb), 0.06)), rgba(6, 18, 30, 0.8);
    box-shadow: 0 8px 22px -12px rgba(var(--c-rgb), 0.95);
}

/* Fenêtre de confirmation (shared/dialog.js) : au-dessus du hub et de l'écran titre */
.dialog-screen {
    z-index: 96;
}

.dialog-card h2 {
    font-size: 24px;
    margin-bottom: 10px;
}

.dialog-card p {
    margin-bottom: 20px;
    color: var(--muted);
}

.dialog-card .buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
}

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

/* Lien habillé en bouton (Réglages : Confidentialité) */
.hub a.btn-ghost {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

/* Grande traversée : les sceaux de Seigneur qui l'ouvrent (fiche) */
.hub .tag-seal {
    color: var(--muted);
    border-color: rgba(255, 210, 122, 0.25);
}

.hub .tag-seal.is-done {
    color: #ffd27a;
    border-color: rgba(255, 210, 122, 0.55);
    background: rgba(255, 210, 122, 0.1);
}

.hub .note.traversee-note {
    margin-top: 6px;
}

/* Classement de la semaine (Duel de la Fournaise, Grande traversée) */
.board-tabs {
    display: flex;
    gap: 6px;
    margin: 4px 0 10px;
}

.board-tab {
    padding: 4px 12px;
    border-radius: 99px;
    border: 1px solid var(--stroke);
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.board-tab.active {
    color: #1a1204;
    border-color: transparent;
    background: linear-gradient(120deg, #ffe38a, #ffc94d);
}

.board-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 4px 0 8px;
    list-style: none;
}

.board-list li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid var(--stroke);
    background: rgba(255, 255, 255, 0.03);
    font-size: 13px;
}

.board-list li.is-me {
    border-color: rgba(127, 224, 255, 0.5);
    background: rgba(127, 224, 255, 0.08);
}

.board-rank {
    font-family: var(--display);
    text-align: center;
    color: #ffd27a;
}

.board-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.board-name small {
    font-size: 11px;
    color: var(--faint);
}

.board-depth {
    font-size: 12px;
    color: var(--muted);
}

.board-time {
    font-family: var(--display);
    color: var(--xp);
}

/* Maîtrises : palier V « Apogée » (payé en perles, niveau 30+) */
.tier.apex {
    border-top: 1px solid rgba(255, 210, 122, 0.22);
    margin-top: 2px;
}

.tier.apex .tier-label {
    color: #ffd27a;
    letter-spacing: 0.04em;
}

.node.apex {
    border-color: rgba(255, 210, 122, 0.28);
    background: radial-gradient(circle at 50% 30%, rgba(255, 210, 122, 0.12), rgba(0, 0, 0, 0.3) 70%);
}

.node.apex.learned {
    border-color: #ffd27a;
    box-shadow: inset 0 0 12px rgba(255, 210, 122, 0.35);
}

/* Reliques des gardiens (onglet Reliques, sur le modèle du Comptoir) : les 2 emplacements du compagnon, puis la
   collection en médaillons rangée par archipel ; la relique choisie dans la fiche de la scène (écran étroit : sous sa
   case). Médaillon : le portrait du gardien dans un cercle aux couleurs de son île, or pour un Seigneur */
.relic-worn {
    margin: 2px 0 10px;
}

.relic-worn-label {
    display: block;
    margin-bottom: 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--faint);
}

.relic-slots {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.relic-slot {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 8px 10px;
    border-radius: 14px;
    border: 1px solid rgba(255, 210, 122, 0.35);
    background: radial-gradient(circle at 18% 50%, rgba(255, 210, 122, 0.1), rgba(255, 255, 255, 0.03) 70%);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.relic-slot.on {
    border-color: rgba(255, 210, 122, 0.8);
    box-shadow: 0 0 0 1px rgba(255, 210, 122, 0.25);
}

.relic-slot.empty {
    border-style: dashed;
    border-color: var(--stroke);
    background: rgba(255, 255, 255, 0.02);
    cursor: default;
}

.relic-slot-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.relic-slot-body b {
    font-size: 13px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.relic-slot-body small {
    font-size: 11.5px;
    line-height: 1.3;
    color: var(--muted);
}

.relic-slot.empty .relic-slot-body b {
    color: var(--muted);
}

.relic-slot.empty .relic-slot-body small {
    color: var(--faint);
}

.relic-odds {
    margin: 0 0 12px;
    font-size: 12px;
    color: var(--muted);
}

.relic-archs {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.relic-arch > header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 7px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(var(--arch-rgb), 0.25);
}

.relic-arch > header span {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgb(var(--arch-rgb));
}

.relic-arch > header small {
    font-size: 11px;
    color: var(--faint);
    font-variant-numeric: tabular-nums;
}

.relic-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: row dense;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.relic-grid > li {
    min-width: 0;
    list-style: none;
}

.relic-grid > .relic-inline {
    grid-column: 1 / -1;
}

.relic-case {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 6px 9px;
    border-radius: 14px;
    border: 1px solid var(--stroke);
    background: rgba(255, 255, 255, 0.025);
    color: var(--text);
    font: inherit;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.relic-case:hover {
    border-color: rgba(var(--arch-rgb), 0.55);
    background: rgba(var(--arch-rgb), 0.06);
}

.relic-case.on {
    border-color: rgba(var(--arch-rgb), 0.9);
    background: rgba(var(--arch-rgb), 0.1);
    box-shadow: 0 0 0 1px rgba(var(--arch-rgb), 0.25);
}

.relic-case b {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
}

.relic-case.missing b {
    color: var(--faint);
    font-weight: 600;
}

.relic-tag {
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    font-style: normal;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    background: rgba(255, 255, 255, 0.08);
    color: var(--muted);
}

.relic-tag.worn {
    text-transform: uppercase;
    background: rgba(110, 231, 160, 0.14);
    color: #7ee8a8;
}

.relic-medal {
    --s: 64px;
    position: relative;
    flex: none;
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 38%, rgba(var(--r-rgb, 255, 210, 122), 0.42), rgba(var(--r-rgb, 255, 210, 122), 0.1) 58%, rgba(6, 10, 22, 0.92) 100%);
    box-shadow: inset 0 0 0 2px rgba(var(--r-rgb, 255, 210, 122), 0.55), 0 6px 18px -10px rgba(var(--r-rgb, 255, 210, 122), 0.9);
}

.relic-medal-face {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    overflow: hidden;
}

.relic-medal-face img {
    width: 125%;
    height: 125%;
    max-width: none;
    object-fit: contain;
    transform: translateY(2%);
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.45));
    pointer-events: none;
}

.relic-medal.lord {
    box-shadow: inset 0 0 0 2px rgba(255, 210, 122, 0.9), 0 0 0 2px rgba(255, 210, 122, 0.22), 0 8px 22px -10px rgba(255, 210, 122, 0.9);
}

.relic-glyph {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: max(18px, calc(var(--s) * 0.36));
    height: max(18px, calc(var(--s) * 0.36));
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-style: normal;
    font-size: max(10px, calc(var(--s) * 0.2));
    line-height: 1;
    color: #fff3cf;
    background: #151a2e;
    box-shadow: 0 0 0 1.5px rgba(var(--r-rgb, 255, 210, 122), 0.8);
}

.relic-medal.lord .relic-glyph {
    color: #ffd27a;
    box-shadow: 0 0 0 1.5px rgba(255, 210, 122, 0.9);
}

.relic-medal-pips {
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    display: flex;
    gap: 3px;
    padding: 2px 5px;
    border-radius: 999px;
    background: #0d1224;
    box-shadow: 0 0 0 1px rgba(var(--r-rgb, 255, 210, 122), 0.4);
}

.relic-medal-pips i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
}

.relic-medal-pips i.on {
    background: #ffd27a;
    box-shadow: 0 0 4px rgba(255, 210, 122, 0.8);
}

.relic-medal.missing {
    background: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.08), rgba(6, 10, 22, 0.92));
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.14);
}

.relic-medal.missing .relic-medal-face img {
    filter: grayscale(1) brightness(0.55);
    opacity: 0.75;
}

.relic-medal.missing .relic-glyph {
    opacity: 0.5;
}

.relic-medal.empty {
    background: rgba(255, 255, 255, 0.03);
    box-shadow: none;
    border: 1.5px dashed var(--stroke);
}

.relic-medal-q {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-style: normal;
    font-weight: 800;
    font-size: calc(var(--s) * 0.38);
    color: var(--faint);
}

.relic-sheet-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.relic-sheet-head > div {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.relic-sheet-head b {
    font-size: 18px;
    line-height: 1.15;
}

.relic-sheet-head .shop-tag {
    align-self: flex-start;
}

.relic-ranks {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 12px 0 4px;
    padding: 0;
    list-style: none;
}

.relic-ranks li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 6px 9px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 12.5px;
    color: var(--faint);
}

.relic-ranks li span {
    flex: none;
    width: 54px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.relic-ranks li.done {
    color: var(--muted);
}

.relic-ranks li.on {
    border-color: rgba(255, 210, 122, 0.45);
    background: rgba(255, 210, 122, 0.08);
    color: var(--text);
}

.relic-ranks li.on span {
    color: #ffd27a;
}

.relic-ranks li.next {
    border-style: dashed;
    border-color: var(--stroke);
    color: var(--muted);
}

.relic-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.relic-actions > button {
    flex: 1 1 calc(50% - 3px);
    padding: 8px 10px;
    font-size: 12.5px;
}

.relic-actions > .btn-primary {
    flex-basis: 100%;
}

@media (max-width: 560px) {
    .relic-slots {
        grid-template-columns: 1fr;
    }
}

/* ---------- Écran de départ (onglet Expédition) : la fiche de l'archipel dans la scène ----------
   La fiche, l'altitude et les départs (mêmes blocs qu'avant dans le panneau) sur le bandeau de l'île ; le compagnon
   est rappelé dans l'en-tête « Partir », sa scène 3D est cachée et en pause. Tout tient sans défiler sur un écran de
   portable : portraits à la hauteur de l'écran, départs compacts. Îles en cartes dès que la scène est assez large */

.stage-brief {
    display: none;
}

.stage-card.is-briefing .viewer,
.stage-card.is-briefing .stage-top,
.stage-card.is-briefing .stage-bottom,
.stage-card.is-briefing .stage-loader {
    visibility: hidden;
}

.stage-card.is-briefing .stage-brief {
    --arch-rgb: 150, 215, 255;
    position: absolute;
    inset: 0;
    z-index: 3;
    display: block;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(150, 215, 255, 0.16) transparent;
    background: #030b14;
    container: brief / inline-size;
}

/* La carte des mers se fait plus étroite : la place va à l'écran de départ */
@media (min-width: 1181px), (orientation: landscape) and (max-height: 500px) {
    .hub-main:has(#hub-panel[data-tab='play']) {
        grid-template-columns: minmax(0, 1fr) clamp(330px, 27vw, 440px);
    }
}

/* Le bandeau de l'île en fond, dans ses proportions, fondu vers le bas ; un voile en haut pour le titre */
.brief-art {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 960 / 400;
    object-fit: cover;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
    mask-image: linear-gradient(180deg, #000 55%, transparent);
    animation: brief-art-in 0.7s ease both;
}

.stage-brief::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    height: 90px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(3, 11, 20, 0.65), transparent);
}

@keyframes brief-art-in {
    from { opacity: 0; transform: scale(1.03); }
    to { opacity: 1; transform: none; }
}

/* Même archipel (altitude changée, file rejointe…) : rien ne se rejoue */
.stage-brief.is-still .brief-art,
.stage-brief.is-still .page {
    animation: none;
}

/* Contenu calé en bas : sur un grand écran, le haut du bandeau reste dégagé */
.brief-body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 12px;
    min-height: 100%;
    padding: 18px 20px 20px;
}

.hub .stage-brief .page {
    padding: 16px 18px 17px;
}

/* La fiche sans cadre : son titre se pose sur le bandeau */
.hub .stage-brief .page-archipel {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.hub .stage-brief .page-archipel::before {
    display: none;
}

.stage-brief .page-archipel .page-head {
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}

.stage-brief .arch-title {
    font-size: clamp(28px, min(3.2vw, 5.4vh), 48px);
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.85), 0 0 2px rgba(0, 0, 0, 0.9);
}

.stage-brief .arch-tagline {
    font-size: 14px;
    color: rgba(236, 244, 255, 0.82);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.95);
}

.stage-brief .arch-chips .tag {
    background-image: linear-gradient(rgba(3, 11, 20, 0.55), rgba(3, 11, 20, 0.55));
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.stage-brief .isle {
    background: rgba(3, 11, 20, 0.72);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.stage-brief .isle.is-lord {
    background: linear-gradient(100deg, rgba(255, 201, 77, 0.1), transparent 60%), rgba(3, 11, 20, 0.72);
}

/* Le compagnon, dans l'en-tête « Partir » : c'est lui qui part */
.brief-companion {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--muted);
}

.brief-companion .egg {
    flex: none;
    width: 15px;
    height: 20px;
    filter: drop-shadow(0 2px 5px rgba(var(--hl-rgb), 0.55));
}

.brief-companion b {
    font-weight: 700;
    color: var(--text);
}

.brief-companion .dot {
    font-style: normal;
    color: var(--faint);
}

/* Altitude et départs côte à côte, plus compacts que dans le panneau */
.brief-go {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 12px;
    align-items: stretch;
}

.stage-brief .depth-head {
    gap: 14px;
    margin: 0 0 10px;
}

.stage-brief .depth-arrow {
    width: 36px;
    height: 36px;
    font-size: 20px;
}

.stage-brief .depth-value b {
    font-size: 42px;
}

.stage-brief .fact {
    padding: 8px 11px;
}

.stage-brief .play-modes {
    gap: 8px;
}

.stage-brief .mode-tile {
    gap: 2px;
    padding: 10px 8px 9px;
}

/* Scène assez large : chaque île en carte, son boss en grand au-dessus (le numéro se pose sur le portrait) ; le
   portrait suit la hauteur de l'écran */
@container brief (min-width: 560px) {
    .stage-brief .isle-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
        gap: 10px;
        margin-top: 12px;
    }

    .stage-brief .isle-list > li {
        display: flex;
        min-width: 0;
    }

    .stage-brief .isle {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto 1fr;
        align-items: start;
        gap: 5px;
        padding: 0 12px 11px;
    }

    .stage-brief .isle-boss {
        position: relative;
        grid-column: 1;
        grid-row: 1;
        justify-self: center;
        right: auto;
        bottom: auto;
        z-index: 0;
        width: min(100%, clamp(84px, 15vh, 158px));
        height: auto;
        aspect-ratio: 1;
        margin: 0 0 -8px;
        opacity: 1;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .stage-brief .isle-num {
        position: absolute;
        top: 9px;
        left: 9px;
        z-index: 1;
        width: 28px;
        height: 28px;
        font-size: 12px;
        background-color: rgba(3, 11, 20, 0.7);
    }

    .stage-brief .isle-body {
        grid-row: 2;
    }

    .stage-brief .isle-status {
        grid-row: 3;
        align-self: end;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        column-gap: 8px;
        margin-top: 3px;
        padding-top: 7px;
        border-top: 1px solid var(--stroke);
        text-align: left;
    }

    /* Une seule île (la Fournaise) : la carte se couche, le boss à gauche */
    .stage-brief .isle-list > li:only-child .isle {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-rows: 1fr auto;
        align-items: center;
        column-gap: 18px;
        padding: 8px 16px 10px 8px;
    }

    .stage-brief .isle-list > li:only-child .isle-boss {
        grid-row: 1 / 3;
        justify-self: start;
        width: clamp(84px, 15vh, 158px);
        margin: 0;
    }

    .stage-brief .isle-list > li:only-child .isle-body,
    .stage-brief .isle-list > li:only-child .isle-status {
        grid-column: 2;
    }

    .stage-brief .isle-list > li:only-child .isle-body {
        grid-row: 1;
        align-self: end;
    }

    .stage-brief .isle-list > li:only-child .isle-status {
        grid-row: 2;
        align-self: start;
    }
}

/* Scène étroite (téléphone) : altitude et départs l'un sous l'autre */
@container brief (max-width: 520px) {
    .brief-go {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Écran bas (portable) : les rappels passent, les départs restent à l'écran */
@media (max-height: 820px) {
    .stage-brief .page-play > .note,
    .stage-brief #online-box > .note,
    .stage-brief .traversee-note,
    .stage-brief .solo-note,
    .stage-brief .page-traversee .isle-body > span {
        display: none;
    }

    .stage-brief .affix-list {
        margin-top: 8px;
    }
}

/* Écran étroit (fiches sous la scène) : l'écran de départ prend la hauteur de son contenu, au-dessus de la carte */
@media (max-width: 1180px) and (not ((orientation: landscape) and (max-height: 500px))) {
    .stage-card.is-briefing {
        height: auto;
    }

    .stage-card.is-briefing .stage-brief {
        position: relative;
        inset: auto;
        overflow: visible;
    }

    .stage-card.is-briefing .brief-body {
        min-height: 0;
        padding-top: clamp(60px, 14vw, 170px);
    }
}

/* ---------- Réserve : cartes, fiche, marques, sélection multiple ---------- */

/* Comme au Comptoir : la colonne des pages s'élargit (la scène montre la créature ouverte en fiche) */
@media (min-width: 1181px), (orientation: landscape) and (max-height: 500px) {
    .hub-main:has(#hub-panel[data-tab='collection']) {
        grid-template-columns: minmax(0, 1fr) clamp(420px, 42vw, 620px);
    }

    .hub-main:has(#hub-panel[data-tab='collection']) .form-name {
        font-size: clamp(28px, 2.7vw, 46px);
        overflow-wrap: break-word;
    }

    .hub-main:has(#hub-panel[data-tab='collection']) .shiny-box {
        display: none;
    }

    /* La fiche (ou la sélection multiple) reste en haut pendant qu'on parcourt la Réserve */
    .hub .reserve-detail,
    .hub .reserve-multi {
        position: sticky;
        top: 0;
        z-index: 3;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)), rgba(5, 14, 24, 0.97);
        box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.85);
    }
}

@media (max-width: 1180px) and (not ((orientation: landscape) and (max-height: 500px))) {
    .hub-main:has(#hub-panel[data-tab='collection']) .stage-card {
        height: clamp(230px, 34vh, 360px);
    }
}

.reserve-head .page-aside.is-full {
    color: var(--danger);
}

.res-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
    gap: 8px;
    list-style: none;
}

/* Téléphone : deux cartes par ligne plutôt qu'une */
@media (max-width: 560px) {
    .res-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.res-card {
    --c-rgb: 95, 212, 255;
    position: relative;
    min-width: 0;
    display: grid;
    gap: 8px;
    padding: 10px 10px 11px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--stroke);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, opacity 0.15s;
}

.res-card:hover,
.res-card:focus-visible {
    border-color: rgba(var(--c-rgb), 0.55);
    outline: none;
}

.res-card.active {
    background: linear-gradient(100deg, rgba(var(--c-rgb), 0.14), rgba(var(--c-rgb), 0.02));
}

.res-card.on {
    border-color: rgba(var(--gold-rgb), 0.9);
    box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), 0.35);
}

.res-card.listed {
    border-style: dashed;
}

.res-card.picked {
    border-color: rgba(255, 107, 131, 0.85);
    background: rgba(255, 107, 131, 0.07);
}

.res-card.blocked {
    opacity: 0.45;
}

.res-top {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.res-top .mon-egg .egg {
    width: 24px;
    height: 31px;
}

.res-name {
    flex: 1;
    min-width: 0;
}

.res-name b {
    display: block;
    font-size: 13.5px;
    color: rgb(var(--c-rgb));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.res-name small {
    display: block;
    font-size: 11.5px;
    color: var(--muted);
    white-space: nowrap;
}

.res-marks {
    display: flex;
    align-items: center;
    gap: 3px;
    flex: none;
    align-self: flex-start;
}

.res-marks i {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--m);
    box-shadow: 0 0 6px var(--m);
}

.res-lock {
    font-style: normal;
    font-size: 12px;
    color: rgb(var(--gold-rgb));
}

/* Les 5 valeurs innées en barres fines, couleurs des rangs (ivGrade) */
.res-bars {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 3px;
}

.res-bars i {
    position: relative;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.res-bars i::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--v);
    border-radius: 3px;
    background: rgba(var(--hl-rgb), 0.55);
}

.res-bars i.low::after { background: rgba(255, 122, 138, 0.75); }
.res-bars i.good::after { background: rgba(109, 255, 176, 0.75); }
.res-bars i.rare::after { background: rgba(185, 140, 255, 0.9); }
.res-bars i.epic::after { background: linear-gradient(90deg, #ffc94d, #ffe98a); }

.res-badge {
    position: absolute;
    top: -8px;
    right: 10px;
    padding: 1px 7px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: rgb(var(--gold-rgb));
    color: #041018;
}

.res-badge.sale {
    background: rgba(5, 14, 24, 0.95);
    color: var(--muted);
    border: 1px solid var(--stroke-strong);
}

.res-check {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1px solid var(--stroke-strong);
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
}

.res-card.picked .res-check {
    background: rgba(255, 107, 131, 0.9);
    border-color: transparent;
}

/* Marques : 4 couleurs, en filtre (en-tête) et sur la fiche */
.mark-chips,
.reserve-marks {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.reserve-marks {
    margin-left: auto;
    align-self: flex-start;
}

.mark-chip {
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--stroke-strong);
    background: transparent;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.mark-chip i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--m);
    opacity: 0.35;
    transition: opacity 0.15s, transform 0.15s;
}

.mark-chip:hover i {
    opacity: 0.7;
}

.mark-chip.on {
    border-color: var(--m);
}

.mark-chip.on i {
    opacity: 1;
    transform: scale(1.15);
    box-shadow: 0 0 8px var(--m);
}

.reserve-detail .detail-title {
    align-items: center;
}

.reserve-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.reserve-release {
    display: inline-flex;
}

.reserve-multi-sum {
    font-size: 13px;
    color: var(--muted);
}

/* Écran de départ : changer de compagnon sur place */
.brief-companion-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 2px 6px;
    margin: -2px -6px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.brief-companion-btn:hover,
.brief-companion-btn[aria-expanded='true'] {
    border-color: var(--stroke-strong);
}

.brief-companion-btn .change {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: none;
    color: rgb(var(--gold-rgb));
}

.depart-picker {
    display: grid;
    gap: 8px;
    margin-bottom: 10px;
}

.depart-picker ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 6px;
    list-style: none;
}

.depart-choice {
    --c-rgb: 95, 212, 255;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 10px;
    border: 1px solid var(--stroke);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.depart-choice:hover {
    border-color: rgba(var(--c-rgb), 0.6);
}

.depart-choice.on {
    border-color: rgba(var(--c-rgb), 0.85);
    background: linear-gradient(100deg, rgba(var(--c-rgb), 0.16), rgba(var(--c-rgb), 0.02));
}

.depart-choice.low {
    opacity: 0.6;
}

.depart-choice .egg {
    flex: none;
    width: 18px;
    height: 23px;
}

.depart-choice span {
    min-width: 0;
    display: grid;
}

.depart-choice b {
    font-size: 12.5px;
    color: rgb(var(--c-rgb));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.depart-choice small {
    font-size: 11px;
    color: var(--muted);
}

.depart-picker-foot {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

/* ---------- Nichée : couple, prévision, fécondité ---------- */

.hatch-views {
    display: flex;
    margin-bottom: 2px;
}

.hatch-views button {
    flex: 1;
}

/* Fécondité en petits œufs : pleins (teinte de la lignée) pour les pontes qui restent, coquille ouverte pour celles
   déjà faites */
.fert-eggs {
    --egg: rgb(var(--c-rgb, var(--gold-rgb)));
    display: inline-flex;
    align-items: flex-end;
    gap: 3px;
    flex-wrap: wrap;
    line-height: 0;
}

.fert-eggs i {
    display: block;
    width: 8px;
    height: 10px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    background:
        radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.95) 0 13%, transparent 32%),
        linear-gradient(160deg, #fff3d6 0%, var(--egg) 58%);
    box-shadow: 0 0 6px rgba(255, 236, 190, 0.4);
}

/* Ponte déjà faite : il ne reste que le bas de la coquille, cassée en zigzag */
.fert-eggs i:not(.on) {
    background: rgba(255, 255, 255, 0.28);
    box-shadow: none;
    clip-path: polygon(0 44%, 17% 30%, 33% 48%, 50% 28%, 67% 48%, 83% 30%, 100% 44%, 100% 100%, 0 100%);
}

.fert-eggs.big {
    gap: 5px;
}

.fert-eggs.big i {
    width: 13px;
    height: 17px;
}

.fert-eggs.none {
    font-size: 11px;
    line-height: 1.3;
    color: var(--faint);
}

/* Sur les fiches, les œufs qui restent se dandinent un peu, chacun à son rythme */
@media (prefers-reduced-motion: no-preference) {
    .fert-eggs.big i.on {
        transform-origin: 50% 90%;
        animation: fert-wiggle 3.4s ease-in-out infinite;
    }

    .fert-eggs.big i.on:nth-child(2n) {
        animation-delay: -1.1s;
    }

    .fert-eggs.big i.on:nth-child(3n) {
        animation-delay: -2.3s;
    }

    @keyframes fert-wiggle {
        0%, 70%, 100% { transform: rotate(0deg); }
        78% { transform: rotate(-9deg); }
        86% { transform: rotate(7deg); }
        93% { transform: rotate(-3deg); }
    }
}

.res-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-height: 8px;
}

.res-foot small {
    font-size: 10.5px;
    color: var(--faint);
}

.detail-lineage,
.reveal-lineage {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    font-size: 12.5px;
    color: var(--muted);
}

.reveal-lineage .up {
    color: #6dffb0;
}

.reveal-parents {
    font-variant-numeric: tabular-nums;
    color: var(--faint);
    white-space: nowrap;
}

.pair-x {
    font-size: 0.6em;
    color: rgba(var(--gold-rgb), 0.9);
    vertical-align: middle;
}

/* Le couple */
.nest-couple {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
}

.nest-x {
    align-self: center;
    font-size: 20px;
    color: rgba(var(--gold-rgb), 0.85);
}

.nest-parent {
    --c-rgb: 95, 212, 255;
    min-width: 0;
    display: grid;
    gap: 8px;
    align-content: start;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(var(--c-rgb), 0.45);
    background: linear-gradient(160deg, rgba(var(--c-rgb), 0.12), rgba(255, 255, 255, 0.02));
    color: var(--text);
    font: inherit;
    text-align: left;
}

.nest-parent.on {
    border-color: rgba(var(--gold-rgb), 0.9);
}

.nest-parent.empty {
    justify-items: center;
    align-content: center;
    min-height: 118px;
    border-style: dashed;
    border-color: var(--stroke-strong);
    background: rgba(255, 255, 255, 0.02);
    cursor: pointer;
    text-align: center;
}

.nest-parent.empty:hover,
.nest-parent.empty.on {
    border-color: rgba(var(--gold-rgb), 0.8);
}

.nest-parent.empty b {
    font-size: 13px;
}

.nest-parent.empty small {
    font-size: 11.5px;
    color: rgb(var(--gold-rgb));
}

.nest-sex {
    font-size: 26px;
    line-height: 1;
    color: var(--muted);
}

.nest-parent-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.nest-parent-head .egg {
    flex: none;
    width: 24px;
    height: 31px;
}

.nest-parent-head span {
    min-width: 0;
    display: grid;
}

.nest-parent-head b {
    font-size: 15px;
    color: rgb(var(--c-rgb));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nest-parent-head small {
    font-size: 11.5px;
    color: var(--muted);
}

.nest-parent-actions {
    display: flex;
    gap: 12px;
}

/* Choix d'un parent */
.nest-picker {
    display: grid;
    gap: 8px;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid var(--stroke);
    background: rgba(2, 7, 13, 0.45);
}

.nest-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.nest-choices {
    display: grid;
    gap: 6px;
    list-style: none;
    max-height: 290px;
    overflow-y: auto;
}

.nest-choice {
    --c-rgb: 95, 212, 255;
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(70px, 110px) auto;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 10px;
    border: 1px solid var(--stroke);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.nest-choice:hover {
    border-color: rgba(var(--c-rgb), 0.6);
}

.nest-choice .egg {
    width: 18px;
    height: 23px;
}

.nest-choice-main {
    min-width: 0;
    display: grid;
}

.nest-choice-main b {
    font-size: 13px;
    color: rgb(var(--c-rgb));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nest-choice-main small {
    font-size: 11px;
    color: var(--muted);
}

/* Prévision : chaque stat, ses issues et leurs chances */
.nest-table {
    overflow-x: auto;
}

.nest-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.nest-table th,
.nest-table td {
    padding: 6px 6px;
    border-bottom: 1px solid var(--stroke);
    text-align: left;
    vertical-align: middle;
}

.nest-table thead th {
    font-size: 11px;
    font-weight: 700;
    color: var(--faint);
}

.nest-table thead th:nth-child(2),
.nest-table thead th:nth-child(4),
.nest-table .pv {
    text-align: center;
}

.nest-table tbody th {
    font-size: 11.5px;
    color: var(--muted);
    white-space: nowrap;
}

.nest-table .pv {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    width: 38px;
}

.outs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.out {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
    background: rgba(var(--hl-rgb), 0.12);
    white-space: nowrap;
}

.out b {
    font-size: 12.5px;
    color: var(--text);
}

.out.low { background: rgba(255, 122, 138, 0.14); }
.out.good { background: rgba(109, 255, 176, 0.13); }
.out.rare { background: rgba(185, 140, 255, 0.16); }
.out.epic { background: rgba(255, 201, 77, 0.18); }
.out.epic b { color: #ffe08a; }

.nest-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 8px;
    margin: 0;
}

.nest-facts div {
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--stroke);
    min-width: 0;
}

.nest-facts dt {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--faint);
}

.nest-facts dd {
    margin: 3px 0 0;
    font-size: 12.5px;
    color: var(--text);
}

.nest-talents {
    display: grid;
    gap: 2px;
}

.nest-talents .secret {
    color: #b98cff;
}

.market-roles {
    padding-bottom: 2px;
}

@media (max-width: 560px) {
    .nest-couple {
        grid-template-columns: minmax(0, 1fr);
    }

    .nest-x {
        justify-self: center;
    }

    .nest-choice {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .nest-choice .res-bars {
        display: none;
    }
}

/* ---------- Brins : fiches, Nichée, Boutique ---------- */

.tag-fert {
    display: inline-flex;
    align-items: center;
    padding-block: 5px;
}

.fert-block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--stroke);
    background: rgba(255, 255, 255, 0.025);
}

.fert-label,
.brin-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--faint);
}

.fert-text {
    font-size: 12.5px;
    color: var(--muted);
}

/* Un brin par parent : une valeur innée ou le talent (✧) */
.brin-pick {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.brin-label {
    margin-right: 2px;
}

.brin-chip {
    font: 600 11px var(--font);
    padding: 3px 7px;
    border-radius: 999px;
    border: 1px dashed rgba(var(--gold-rgb), 0.45);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

.brin-chip:hover:not(:disabled) {
    color: var(--text);
}

.brin-chip.on {
    border-style: solid;
    background: rgba(var(--gold-rgb), 0.2);
    color: rgb(var(--gold-rgb));
}

.brin-chip.talent {
    color: #b98cff;
    border-color: rgba(185, 140, 255, 0.5);
}

.brin-chip.talent.on {
    background: rgba(185, 140, 255, 0.2);
    color: #dccbff;
}

.brin-chip:disabled {
    opacity: 0.35;
    cursor: default;
}

.out.sure {
    background: rgba(var(--gold-rgb), 0.2);
    color: rgb(var(--gold-rgb));
}

.out.sure b {
    color: rgb(var(--gold-rgb));
}

.nest-table .pv.forced {
    color: rgb(var(--gold-rgb));
    text-shadow: 0 0 8px rgba(var(--gold-rgb), 0.6);
}

/* Boutique : le rayon Nichée */
.brin-shop {
    display: grid;
    gap: 8px;
    list-style: none;
}

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

.brin-offer b {
    font-size: 14px;
}

.brin-offer small {
    display: block;
    font-size: 12px;
    color: var(--muted);
}

.brin-offer .brin-stock {
    font-size: 11.5px;
    color: var(--faint);
}

/* Un brin : deux fils dorés tressés (violets pour le talent) */
.brin-icon {
    --strand: var(--gold-rgb);
    position: relative;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--strand), 0.22), transparent 70%);
}

.brin-icon.talent {
    --strand: 185, 140, 255;
}

.brin-icon::before,
.brin-icon::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 4px;
    width: 6px;
    height: 26px;
    margin-left: -3px;
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(var(--strand), 0.2), rgb(var(--strand)) 30%, #fff 50%, rgb(var(--strand)) 70%, rgba(var(--strand), 0.2));
    transform: rotate(28deg);
}

.brin-icon::after {
    transform: rotate(-28deg);
    opacity: 0.75;
}

/* ---------- Nichée, finitions : Parfait et Pur, arbre, introduction, records ---------- */

.perfect-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #3a2400;
    background: linear-gradient(135deg, #ffe7a3, #ffc94d 55%, #ffe7a3);
    box-shadow: 0 0 10px rgba(255, 201, 77, 0.45);
}

.perfect-badge.pure {
    color: #1b0f33;
    background: linear-gradient(135deg, #fff3c4, #ffd98a 30%, #f0b8ff 65%, #b9e6ff);
    box-shadow: 0 0 12px rgba(240, 184, 255, 0.55);
}

.perfect-badge.small {
    margin-left: 0;
    padding: 0 6px;
    font-size: 9.5px;
}

.attack-kind .perfect-badge {
    vertical-align: 1px;
}

.tag-perfect {
    padding: 0;
    border: 0;
    background: none;
}

.tag-perfect .perfect-badge {
    margin: 0;
}

/* Arbre généalogique : grands-parents, parents, puis la créature, reliés par des traits */
.family-tree {
    display: grid;
    gap: 14px;
    justify-items: center;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid var(--stroke);
    background: rgba(255, 255, 255, 0.02);
}

.family-tree .fert-label {
    justify-self: start;
}

.ft-row {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 22px;
    width: 100%;
}

/* Le trait qui descend vers la rangée suivante */
.ft-row + .ft-row::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -14px;
    height: 14px;
    border-left: 1px solid rgba(var(--gold-rgb), 0.45);
}

.ft-pair {
    position: relative;
    display: flex;
    gap: 8px;
    padding: 4px;
    border-radius: 10px;
    border: 1px dashed rgba(var(--gold-rgb), 0.25);
}

.ft-pair.none {
    min-width: 40px;
    border-color: transparent;
}

.ft-node {
    display: grid;
    justify-items: center;
    gap: 1px;
    min-width: 72px;
    max-width: 130px;
    padding: 5px 9px;
    border-radius: 9px;
    border: 1px solid var(--stroke);
    background: rgba(5, 14, 24, 0.7);
    color: var(--text);
    font: inherit;
    text-align: center;
}

.ft-node b {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}

.ft-node small {
    font-size: 10.5px;
    color: var(--faint);
}

.ft-sex {
    font-style: normal;
    font-size: 11px;
    color: var(--muted);
}

.ft-node.here {
    cursor: pointer;
    border-color: rgba(var(--c-rgb, var(--gold-rgb)), 0.55);
}

.ft-node.here:hover {
    border-color: rgba(var(--gold-rgb), 0.9);
}

.ft-node.self {
    border-color: rgba(var(--gold-rgb), 0.8);
    box-shadow: 0 0 12px rgba(var(--gold-rgb), 0.25);
}

.ft-grand .ft-node {
    min-width: 58px;
    padding: 3px 7px;
}

.ft-node.unknown {
    min-width: 36px;
    color: var(--faint);
}

/* Première visite de la Nichée : trois temps */
.nest-intro {
    display: grid;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(var(--gold-rgb), 0.35);
    background: linear-gradient(160deg, rgba(var(--gold-rgb), 0.08), rgba(255, 255, 255, 0.02));
}

.nest-intro ol {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: nest-step;
}

.nest-intro li {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    column-gap: 10px;
    align-items: start;
    font-size: 12.5px;
    color: var(--muted);
}

.nest-intro li::before {
    counter-increment: nest-step;
    content: counter(nest-step);
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 800;
    color: #2a1a00;
    background: rgb(var(--gold-rgb));
}

.nest-intro li b {
    font-size: 13px;
    color: var(--text);
}

.nest-intro .btn-ghost {
    justify-self: end;
}

/* Carnet : records de la lignée */
.lineage-records {
    display: grid;
    gap: 6px;
    margin-top: 10px;
}

.lineage-records p {
    font-size: 12.5px;
    color: var(--muted);
}

.record-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 6px;
    list-style: none;
}

.record-stats li {
    display: grid;
    gap: 1px;
    padding: 6px 8px;
    border-radius: 9px;
    border: 1px solid var(--stroke);
    font-size: 11px;
    color: var(--faint);
}

.record-stats b {
    font-size: 16px;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.record-stats b.good { color: #6dffb0; }
.record-stats b.rare { color: #b98cff; }
.record-stats b.epic { color: #ffc94d; }

.record-stats small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted);
}

/* ---------- Téléphone en paysage (500 px de haut au plus) ----------
   La mise en page du PC, resserrée : la scène et les fiches côte à côte, chacune sur toute la hauteur (les règles
   « min-width: 1181px » valent aussi ici, celles de l'écran étroit non). La barre des petits écrans tient sur une
   ligne : l'emblème, les onglets qui défilent, les monnaies et les boutons */
@media (orientation: landscape) and (max-height: 500px) {
    .hub-side {
        flex-direction: row;
        align-items: center;
    }

    .side-head {
        flex: none;
        padding: 4px 2px 4px 10px;
    }

    .brand > div {
        display: none;
    }

    .brand-mark {
        width: 30px;
        height: 30px;
    }

    .hub-nav-wrap {
        flex: 1;
        min-width: 0;
    }

    .hub-nav {
        padding: 5px 8px;
    }

    .nav-item {
        min-height: 36px;
        grid-template-columns: 24px auto;
        gap: 8px;
        padding: 4px 10px 4px 5px;
    }

    .nav-icon {
        width: 24px;
        height: 24px;
        border-radius: 9px;
        font-size: 12px;
    }

    .nav-text b {
        font-size: 13.5px;
    }

    .nav-badge {
        left: 20px;
    }

    .side-foot {
        flex: none;
        gap: 8px;
        padding: 4px 10px 4px 2px;
        border-top: 0;
    }

    .hub-wallet {
        flex-wrap: nowrap;
        gap: 5px;
    }

    .coin {
        gap: 5px;
        padding: 3px 9px 3px 4px;
        font-size: 12.5px;
    }

    .coin i {
        width: 18px;
        height: 18px;
        font-size: 10px;
    }

    /* « En ligne » : le point seul */
    .hub-presence span {
        display: none;
    }

    .hub-main {
        --gap: 8px;
    }

    .stage-card {
        border-radius: 18px;
    }

    /* Scène étroite et basse : le nom garde sa largeur (l'aide « glisser pour tourner » et l'œuf s'effacent, comme
       sur un téléphone en portrait), les stades se resserrent */
    .stage-top {
        gap: 10px;
        padding: 12px 14px 16px;
    }

    .drag-hint,
    .stage-egg,
    .evo-text small {
        display: none;
    }

    .form-name {
        margin-bottom: 6px;
        font-size: clamp(24px, 3.6vw, 34px);
    }

    .evo-step {
        padding: 6px 7px;
        gap: 6px;
    }

    .hub .page {
        padding: 14px 16px 16px;
        border-radius: 16px;
    }

    /* Écran de départ : partir d'abord (les quatre départs sur une ligne), puis l'altitude, puis l'archipel et ses
       îles, en défilant */
    .brief-body {
        gap: 8px;
        padding: 10px 12px 12px;
    }

    .stage-brief .brief-go {
        order: -1;
    }

    .stage-brief .brief-go > .page:last-child {
        order: -1;
    }

    .stage-brief .play-modes {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
    }

    .stage-brief .mode-tile {
        padding: 8px 4px 7px;
    }

    .stage-brief .mode-tile b {
        font-size: 12.5px;
    }

    .stage-brief .mode-tile small {
        font-size: 10.5px;
    }
}

/* Fond vivant de la fiche : la boucle de l'île (hub.js briefLoop) se fond par-dessus le bandeau dès qu'elle joue,
   même fondu vers le bas ; le bandeau se cache ensuite (son animation d'entrée tient son opacité) */
.brief-loop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    pointer-events: none;
    opacity: 0;
    -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 90%);
    mask-image: linear-gradient(180deg, #000 45%, transparent 90%);
    transition: opacity 0.9s ease;
}

.brief-loop.is-playing {
    opacity: 1;
}

.stage-brief:has(.brief-loop.is-playing) .brief-art {
    visibility: hidden;
    transition: visibility 0s 0.9s;
}

/* Boss des îles, fiche en cartes : ils respirent chacun à son rythme ; au survol la carte se soulève et le boss
   sort par le haut, halo à la couleur de l'île */
@keyframes isle-boss-breathe {
    0%, 100% { transform: translateY(0) scale(1, 1); }
    50% { transform: translateY(-3px) scale(1.018, 1.04); }
}

@container brief (min-width: 560px) {
    .stage-brief .isle-list > li {
        position: relative;
    }

    .stage-brief .isle {
        overflow: visible;
        transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s, border-color 0.35s;
    }

    .stage-brief .isle-boss {
        transform-origin: 50% 88%;
        filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55));
        animation: isle-boss-breathe 3.4s ease-in-out infinite;
        transition: transform 0.5s cubic-bezier(0.2, 1.5, 0.35, 1), filter 0.35s;
    }

    .stage-brief .isle-list > li:nth-child(2) .isle-boss {
        animation-delay: -1.2s;
    }

    .stage-brief .isle-list > li:nth-child(3) .isle-boss {
        animation-delay: -2.4s;
    }

    @media (hover: hover) {
        .stage-brief .isle-list > li:hover {
            z-index: 4;
        }

        .stage-brief .isle:hover {
            transform: translateY(-3px);
            border-color: rgba(var(--isle-rgb), 0.7);
            box-shadow: 0 0 0 1px rgba(var(--isle-rgb), 0.35), 0 16px 34px rgba(0, 0, 0, 0.45), inset 0 0 40px rgba(var(--isle-rgb), 0.12);
        }

        .stage-brief .isle:hover .isle-boss {
            z-index: 5;
            animation: none;
            transform: translateY(-30%) scale(1.5);
            filter: drop-shadow(0 0 16px rgba(var(--isle-rgb), 0.8)) drop-shadow(0 16px 18px rgba(0, 0, 0, 0.6));
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .stage-brief .isle-boss {
        animation: none !important;
    }
}

/* Maîtrises : points en attente de validation (masteryPlan, hub.js) */
.node.pending {
    border-style: dashed;
    border-color: var(--b);
    box-shadow: 0 0 14px color-mix(in srgb, var(--b) 55%, transparent);
}

.node.pending .node-rank {
    color: var(--b);
    font-weight: 700;
}

.mastery-plan {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -2px 0 10px;
    padding: 8px 10px;
    border: 1px dashed rgba(255, 214, 120, 0.5);
    border-radius: 10px;
    background: rgba(255, 214, 120, 0.08);
}

.mastery-plan span {
    flex: 1;
    font-size: 13px;
}

/* Carnet à découvrir : vues Lignées / Bestiaire, lignée jamais vue (œuf seul), talents encore inconnus */
.codex-views {
    margin-bottom: 12px;
}

.codex-views small {
    margin-left: 4px;
    font-size: 11px;
    font-weight: 500;
    color: var(--faint);
}

.lineage-chip.unseen .egg {
    filter: grayscale(0.7) brightness(0.55);
}

.lineage-chip.unseen span::after {
    content: ' ?';
}

.page-unseen p {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--muted);
}

.talent.unknown {
    border-style: dashed;
}

.talent.unknown .talent-name {
    letter-spacing: 0.2em;
    color: var(--faint);
}

.talent.unknown .talent-desc {
    color: var(--faint);
}

/* Bestiaire : un archipel par page, gardiens puis habitants ; pas encore rencontré : silhouette et « ??? » */
.beast-head {
    margin: 14px 0 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--faint);
}

.beasts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 8px;
    list-style: none;
}

.beast {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
    padding: 8px 6px 9px;
    border-radius: 12px;
    border: 1px solid var(--stroke);
    background: rgba(255, 255, 255, 0.03);
    text-align: center;
}

.beast img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}

.beasts-boss .beast img {
    width: 88px;
    height: 88px;
}

.beast b {
    font-size: 12.5px;
    line-height: 1.2;
}

.beast small {
    font-size: 10.5px;
    line-height: 1.3;
    color: var(--faint);
}

.beast em {
    margin-top: 2px;
    font-size: 10.5px;
    font-style: normal;
    font-weight: 600;
    color: var(--xp, #6dffb0);
}

.beast.lord {
    border-color: rgba(255, 201, 77, 0.45);
}

.beast.unknown img {
    filter: brightness(0) drop-shadow(0 0 1px rgba(150, 215, 255, 0.35));
    opacity: 0.55;
}

.beast.unknown b {
    letter-spacing: 0.2em;
    color: var(--faint);
}

/* Téléphone à l'horizontale (html.phone, index.html) : « Partir » sur toute la largeur, l'altitude dessous (côte à côte,
   les quatre départs se serraient dans une colonne étroite et leurs noms se coupaient mot à mot) */
html.phone .stage-brief .brief-go {
    grid-template-columns: minmax(0, 1fr);
}

html.phone .stage-brief .mode-tile small {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Réglages : note sous une ligne (installer le jeu) */
.settings-note {
    margin: -4px 0 4px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--faint);
}

/* ---------- Amis (social.js) : bouton de la colonne, panneau, invitations ---------- */

.hub-friends-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px 6px 8px;
    border-radius: 99px;
    border: 1px solid var(--stroke);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    align-self: flex-start;
}
.hub-friends-btn:hover,
.hub-friends-btn:focus-visible,
.hub-friends-btn[aria-expanded="true"] {
    border-color: rgba(var(--hl-rgb), 0.6);
    background: rgba(var(--hl-rgb), 0.1);
}
.hub-friends-btn small { color: #6dffb0; font-weight: 800; }
.friends-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: grid;
    place-items: center;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 800;
    color: #1a1204;
    background: #ffc94d;
    box-shadow: 0 0 12px rgba(255, 201, 77, 0.6);
}

.friends-panel {
    position: fixed;
    z-index: 60;
    top: 12px;
    bottom: 12px;
    left: calc(var(--side-w) + 12px);
    width: min(400px, calc(100vw - 24px));
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 16px 18px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 20px;
    border: 1px solid var(--stroke-strong);
    background: rgba(6, 12, 24, 0.94);
    backdrop-filter: blur(18px);
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
    animation: friends-in 0.18s ease-out;
    scrollbar-width: thin;
}
.friends-panel.hidden { display: none; }
@keyframes friends-in { from { opacity: 0; transform: translateX(-10px); } }
.friends-head { display: flex; align-items: center; justify-content: space-between; }
.friends-head h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 22px; }
.friends-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--stroke);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}
.friends-me {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(var(--hl-rgb), 0.3);
    background: rgba(var(--hl-rgb), 0.07);
}
.friends-me span { display: flex; flex-direction: column; min-width: 0; }
.friends-me small { font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.08em; }
.friends-me b { font-size: 16px; }
.friends-me em,
.friend-text em { font-style: normal; color: rgb(var(--hl-rgb)); letter-spacing: 0.04em; }
.friends-add { display: flex; gap: 8px; }
.friends-add input { min-width: 0; padding: 8px 12px; }
.friends-panel h3 {
    margin: 8px 0 0;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}
.friends-panel h3 small { color: var(--faint); letter-spacing: 0; }
.friend-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.friend-row {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid var(--stroke);
    background: rgba(255, 255, 255, 0.03);
}
.friend-row.is-offline { opacity: 0.6; }
.friend-egg .egg { width: 22px; height: 29px; display: block; }
.friend-text { display: flex; flex-direction: column; min-width: 0; }
.friend-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.friend-text small { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--faint); }
.friend-dot { width: 7px; height: 7px; border-radius: 50%; background: #6c7a92; flex: none; }
.friend-row.is-hub .friend-dot,
.friend-row.is-lobby .friend-dot { background: #6dffb0; box-shadow: 0 0 8px #6dffb0; }
.friend-row.is-playing .friend-dot,
.friend-row.is-solo .friend-dot,
.friend-row.is-queue .friend-dot { background: #ffc94d; box-shadow: 0 0 8px #ffc94d; }
.friend-actions { display: flex; align-items: center; gap: 6px; }
.friend-here { font-size: 11px; color: #6dffb0; }
.friend-more {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--stroke);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}
.friend-menu { grid-column: 2 / -1; display: flex; gap: 6px; justify-content: flex-end; }

.invite-toasts {
    position: fixed;
    z-index: 70;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(520px, calc(100vw - 32px));
    pointer-events: none;
}
.invite-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 16px;
    border: 1px solid rgba(var(--hl-rgb), 0.55);
    background: rgba(6, 12, 24, 0.95);
    box-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.8), 0 0 24px -8px rgba(var(--hl-rgb), 0.7);
    pointer-events: auto;
    animation: invite-in 0.3s ease-out;
}
.invite-toast .egg { width: 24px; height: 32px; flex: none; }
.invite-toast > span { display: flex; flex-direction: column; flex: 1; min-width: 0; font-size: 13px; }
.invite-toast small { font-size: 11.5px; color: var(--faint); }
@keyframes invite-in { from { opacity: 0; transform: translateY(-12px); } }

/* ---------- Salon : état des membres, outils, messages rapides, bandeau du groupe ---------- */

.hub .member { position: relative; flex-wrap: wrap; }
.hub .member.away { opacity: 0.55; }
.member-state {
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 99px;
    color: var(--faint);
    border: 1px solid var(--stroke);
}
.member-state.ready { color: #6dffb0; border-color: rgba(109, 255, 176, 0.45); background: rgba(109, 255, 176, 0.08); }
.member-state.away { color: #ffb36b; border-color: rgba(255, 179, 107, 0.4); }
/* Créature sous le niveau du palier de la destination : Lancer attend */
.member-low { color: #ffc9a0; font-weight: 700; }
.lobby-low { margin: 4px 0 0; font-size: 13px; color: #ffc9a0; }
.member-actions { display: flex; gap: 4px; margin-left: auto; }
.member-actions:empty { display: none; }
.member-actions + .tag { margin-left: 0; }
.member-btn {
    min-width: 28px;
    height: 26px;
    padding: 0 7px;
    border-radius: 99px;
    border: 1px solid var(--stroke);
    background: rgba(255, 255, 255, 0.04);
    color: var(--muted);
    font: inherit;
    font-size: 11.5px;
    cursor: pointer;
}
.member-btn:hover,
.member-btn:focus-visible { color: var(--text); border-color: rgba(var(--hl-rgb), 0.6); }
.member-btn.danger:hover { color: #ff8a9a; border-color: rgba(255, 90, 120, 0.5); }
.member-note { font-size: 11px; color: var(--faint); }
.member-quick {
    position: absolute;
    left: 44px;
    top: -12px;
    padding: 3px 10px;
    border-radius: 12px 12px 12px 3px;
    background: #f4efe2;
    color: #10141f;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.7);
    animation: quick-pop 0.25s ease-out;
    pointer-events: none;
}
.member-quick.emote { font-size: 17px; padding: 0 8px; }
@keyframes quick-pop { from { transform: scale(0.6) translateY(6px); opacity: 0; } }
.hub .btn-primary.is-ready { background: rgba(109, 255, 176, 0.18); color: #6dffb0; box-shadow: none; border: 1px solid rgba(109, 255, 176, 0.5); }
.lobby-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.quick-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border-radius: 14px;
    border: 1px solid var(--stroke-strong);
    background: rgba(6, 12, 24, 0.92);
}
.quick-phrases,
.quick-emotes { display: flex; flex-wrap: wrap; gap: 6px; }
.quick-chip {
    padding: 6px 11px;
    border-radius: 99px;
    border: 1px solid var(--stroke);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
}
.quick-chip.emote { font-size: 18px; padding: 2px 9px; }
.quick-chip:hover,
.quick-chip:focus-visible { border-color: rgba(var(--hl-rgb), 0.7); background: rgba(var(--hl-rgb), 0.12); }

.hub-group {
    position: fixed;
    z-index: 40;
    left: calc(var(--side-w) + 16px);
    bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 6px;
    border-radius: 99px;
    border: 1px solid rgba(var(--hl-rgb), 0.45);
    background: rgba(6, 12, 24, 0.9);
    backdrop-filter: blur(14px);
    box-shadow: 0 14px 40px -12px rgba(0, 0, 0, 0.8);
    animation: invite-in 0.25s ease-out;
}
.hub-group.hidden { display: none; }
.group-main {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 8px 2px 10px;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    cursor: pointer;
}
.group-main small { font-size: 11px; color: var(--muted); white-space: nowrap; }
.group-main small b { color: rgb(var(--hl-rgb)); letter-spacing: 0.12em; }
.group-eggs { display: flex; gap: 4px; }
.group-seat {
    position: relative;
    width: 24px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    border: 1px dashed var(--stroke);
}
.group-seat .egg { width: 18px; height: 24px; }
.group-seat:has(.egg) { border-style: solid; }
.group-seat.ready::after {
    content: '✓';
    position: absolute;
    right: -5px;
    bottom: -5px;
    width: 14px;
    height: 14px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 900;
    font-style: normal;
    color: #06140c;
    background: #6dffb0;
}
.group-seat.away { opacity: 0.4; }
.group-state { font-size: 12px; color: var(--muted); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-ready,
.group-quick {
    height: 30px;
    padding: 0 12px;
    border-radius: 99px;
    border: 1px solid var(--stroke);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.group-ready.on { color: #6dffb0; border-color: rgba(109, 255, 176, 0.5); background: rgba(109, 255, 176, 0.1); }
.group-quick { padding: 0 9px; font-size: 15px; }
.group-bubble {
    position: absolute;
    left: 12px;
    bottom: calc(100% + 8px);
    padding: 4px 11px;
    border-radius: 12px 12px 12px 3px;
    background: #f4efe2;
    color: #10141f;
    font-size: 12.5px;
    white-space: nowrap;
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.7);
    animation: quick-pop 0.25s ease-out;
    pointer-events: none;
}
.hub-group .quick-menu {
    position: absolute;
    left: 0;
    bottom: calc(100% + 10px);
    width: min(420px, calc(100vw - 32px));
}

@media (max-width: 900px), (orientation: landscape) and (max-height: 500px) {
    .friends-panel { left: 12px; top: 8px; bottom: 8px; }
    .hub-group { left: 56px; bottom: 10px; }
    .hub-friends-btn { padding: 5px 9px 5px 7px; }
    .hub-friends-btn .friends-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .friends-panel, .invite-toast, .hub-group, .member-quick, .group-bubble { animation: none; }
}

/* Code du salon dans le hub : moins haut (sur téléphone surtout), le salon tient dans la carte Partir */
.hub .lobby .room-code { margin-bottom: 4px; }
.hub .lobby .room-code b { font-size: 30px; }
html.phone .hub .lobby .room-code b { font-size: calc(22px * var(--phone-k, 1)); }

/* ---------- Fiche d'éleveur (breeder.js) : créatures, expéditions, sanctuaire d'un autre joueur ---------- */

.friend-name,
.member-name,
.board-breeder {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.friend-name { font-weight: 700; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.friend-name:hover,
.member-name:hover,
.board-breeder:hover,
.friend-name:focus-visible,
.member-name:focus-visible,
.board-breeder:focus-visible { color: rgb(var(--hl-rgb)); text-decoration: underline; text-underline-offset: 3px; }
.friends-me-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.friends-search input { padding: 8px 12px; }

.breeder-screen {
    position: fixed;
    z-index: 65;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(2, 6, 12, 0.6);
    backdrop-filter: blur(4px);
}
.breeder-screen.hidden { display: none; }
.breeder-card {
    position: relative;
    width: min(760px, 100%);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 20px 20px;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid rgba(var(--c-rgb, var(--hl-rgb)), 0.45);
    background:
        radial-gradient(120% 60% at 0% 0%, rgba(var(--c-rgb, var(--hl-rgb)), 0.16), transparent 60%),
        rgba(6, 12, 24, 0.97);
    box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.9);
    animation: invite-in 0.22s ease-out;
}
.breeder-close { position: absolute; top: 14px; right: 14px; }
.breeder-head { display: flex; align-items: center; gap: 14px; padding-right: 40px; }
.breeder-head .mon-egg { width: 44px; height: 56px; flex: none; }
.breeder-head .mon-egg .egg { width: 100%; height: 100%; }
.breeder-id { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.breeder-id small { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.breeder-id h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1.1; }
.breeder-id h2 em { font-style: normal; font-size: 16px; color: rgb(var(--hl-rgb)); margin-left: 4px; }
.breeder-id span { font-size: 12.5px; color: var(--muted); }
.breeder-rel { font-size: 12px; font-weight: 700; color: #6dffb0; padding: 4px 10px; border-radius: 99px; border: 1px solid rgba(109, 255, 176, 0.45); }
.breeder-stats { margin: 0; font-size: 12.5px; color: var(--muted); }
.breeder-tabs { display: flex; gap: 6px; }
.breeder-tabs button {
    padding: 7px 14px;
    border-radius: 99px;
    border: 1px solid var(--stroke);
    background: rgba(255, 255, 255, 0.04);
    color: var(--muted);
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}
.breeder-tabs button.on { color: var(--text); border-color: rgba(var(--hl-rgb), 0.7); background: rgba(var(--hl-rgb), 0.14); }
.breeder-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; scrollbar-width: thin; }
.breeder-body h3 { margin: 12px 0 8px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.breeder-body h3:first-child { margin-top: 2px; }
.breeder-body h3 small { color: var(--faint); letter-spacing: 0; }
.breeder-lineages { display: flex; flex-wrap: wrap; gap: 6px; }
.breeder-lineage {
    position: relative;
    width: 38px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    border: 1px solid rgba(var(--c-rgb), 0.4);
    background: rgba(var(--c-rgb), 0.08);
    cursor: pointer;
}
.breeder-lineage .egg { width: 22px; height: 29px; }
.breeder-lineage.unseen { border-style: dashed; border-color: var(--stroke); background: transparent; color: var(--faint); }
.breeder-lineage.on { box-shadow: 0 0 0 2px rgba(var(--c-rgb), 0.9); }
.breeder-lineage:disabled { cursor: default; opacity: 0.55; }
.breeder-lineage b {
    position: absolute;
    right: -5px;
    bottom: -5px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 99px;
    font-size: 10px;
    line-height: 16px;
    color: var(--text);
    background: #0b1a28;
    border: 1px solid var(--stroke-strong);
}
.breeder-creatures {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
    align-items: start;
}
.breeder-mon { cursor: pointer; }
.breeder-mon.on { grid-column: 1 / -1; }
.breeder-detail { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 12.5px; }
.breeder-detail p { margin: 0; flex: 1 1 220px; color: var(--muted); }
.breeder-detail p > small:first-child { display: block; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.breeder-ivs { border-collapse: collapse; font-size: 12.5px; flex: 1 1 100%; }
.breeder-ivs th,
.breeder-ivs td { padding: 3px 10px 3px 0; text-align: left; font-weight: 400; }
.breeder-ivs thead th { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.breeder-ivs tbody th { color: var(--muted); font-weight: 700; }
.breeder-ivs small { color: var(--faint); }
.tone-low { color: #ff7a8a !important; }
.tone-good { color: #6dffb0 !important; }
.tone-rare { color: #b98cff !important; }
.tone-epic { color: #ffc94d !important; }
.breeder-relic { display: inline-block; margin-right: 8px; color: var(--text); }
.breeder-archs,
.breeder-guardians,
.breeder-shrines { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.breeder-archs { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.breeder-arch {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--stroke);
    background: rgba(255, 255, 255, 0.03);
    font-size: 12.5px;
}
.breeder-arch.locked { opacity: 0.5; }
.breeder-arch b { font-size: 13.5px; }
.breeder-arch span { color: var(--muted); }
.breeder-arch .breeder-alt { color: rgb(var(--hl-rgb)); font-weight: 700; }
.breeder-arch small { color: var(--faint); }
.breeder-guardians { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.breeder-guardians li { display: flex; flex-direction: column; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--stroke); font-size: 12.5px; }
.breeder-guardians span { color: var(--faint); }
.breeder-shrines { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.breeder-shrines li {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid var(--stroke);
    font-size: 12.5px;
}
.breeder-shrines li > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.breeder-shrines small { color: var(--faint); }
.breeder-shrine.empty { opacity: 0.5; }
.breeder-shrine-icon { font-size: 17px; text-align: center; color: rgb(var(--hl-rgb)); }
.breeder-pips { display: flex; gap: 3px; }
.breeder-pips i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); }
.breeder-pips i.on { background: rgb(var(--hl-rgb)); box-shadow: 0 0 6px rgba(var(--hl-rgb), 0.8); }

@media (orientation: landscape) and (max-height: 500px) {
    .breeder-screen { padding: 8px; }
    .breeder-card { padding: 12px 14px 14px; gap: 8px; }
    .breeder-id h2 { font-size: 20px; }
    .breeder-head .mon-egg { width: 32px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
    .breeder-card { animation: none; }
}

/* Carte Partir : expéditions du jour et tarif (plafond du jour) */
.daily-note { margin-top: 8px; }

/* ---------- Onglet Classements (hub.js renderBoards) ---------- */

.boards-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 2px 0 12px;
}
.boards-filters .segmented button:disabled { opacity: 0.35; cursor: default; }
.boards-archipels { display: flex; flex-wrap: wrap; gap: 6px; }
.boards-chip {
    padding: 6px 12px;
    border-radius: 99px;
    border: 1px solid var(--stroke);
    background: rgba(255, 255, 255, 0.04);
    color: var(--muted);
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}
.boards-chip:hover,
.boards-chip:focus-visible { color: var(--text); border-color: rgba(var(--hl-rgb), 0.6); }
.boards-chip.active { color: var(--text); border-color: rgba(var(--hl-rgb), 0.8); background: rgba(var(--hl-rgb), 0.16); }
.page-guardians .board-tabs { flex-wrap: wrap; }
.board-list li.top1 { border-color: rgba(255, 210, 122, 0.65); background: linear-gradient(90deg, rgba(255, 210, 122, 0.14), rgba(255, 210, 122, 0.03)); }
.board-list li.top2 { border-color: rgba(214, 226, 240, 0.5); background: linear-gradient(90deg, rgba(214, 226, 240, 0.1), rgba(214, 226, 240, 0.02)); }
.board-list li.top3 { border-color: rgba(222, 160, 110, 0.5); background: linear-gradient(90deg, rgba(222, 160, 110, 0.11), rgba(222, 160, 110, 0.02)); }
.board-list li.top1 .board-rank { color: #ffd27a; font-size: 16px; }
.board-list li.top2 .board-rank { color: #dfe8f3; }
.board-list li.top3 .board-rank { color: #e6a877; }
.board-list li.is-me.top1,
.board-list li.is-me.top2,
.board-list li.is-me.top3 { box-shadow: inset 0 0 0 1px rgba(127, 224, 255, 0.5); }
.boards-filters .segmented button { white-space: nowrap; padding: 6px 11px; font-size: 12px; }

/* ---------- Carnet : page Effets et fiches du bestiaire (codex.js : effectsPage, beastSheetHtml) ---------- */

.effect-list,
.mech-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    list-style: none;
}
.effect-row {
    display: grid;
    grid-template-columns: 128px 1fr;
    gap: 10px;
    align-items: baseline;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--stroke);
    background: rgba(255, 255, 255, 0.03);
    font-size: 13px;
    line-height: 1.45;
}
.effect-row > b.kw { font-size: 13.5px; text-decoration: none; cursor: default; }
.page-effects .note { margin-top: 10px; }

/* Une entrée rencontrée passe dans la scène d'un clic */
.beast.pickable { cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.beast.pickable:hover { border-color: rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.06); }
.beast.is-selected { border-color: rgba(127, 224, 255, 0.7); box-shadow: inset 0 0 0 1px rgba(127, 224, 255, 0.35); }

/* Sa fiche, à gauche de son modèle dans la scène (hub.js renderStageSheet ; --top-h, --bottom-h : hauteur du titre et
   du bas de scène) ; sur un écran étroit, sous la page de son archipel */
.stage-sheet { display: none; }
.stage-card.has-sheet .stage-sheet {
    position: absolute;
    z-index: 2;
    left: 16px;
    top: max(16px, calc(var(--top-h, 140px) - 18px));
    bottom: max(16px, calc(var(--bottom-h, 90px) - 10px));
    width: clamp(250px, 34%, 360px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    pointer-events: none;
}
.stage-sheet-inner {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding: 12px 12px 12px 14px;
    border-radius: 16px;
    border: 1px solid var(--stroke);
    background: rgba(4, 14, 24, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: auto;
}
.stage-sheet .sheet-head,
.page-beast-sheet .sheet-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.sheet-note { display: flex; flex-direction: column; gap: 2px; margin: 0 0 8px; font-size: 12px; line-height: 1.4; color: var(--faint); }
.stage-sheet .mech-row { padding: 7px 8px; }
.stage-sheet .mech-row small { font-size: 12px; }
.page-beast-sheet { display: none; }
@media (max-width: 1180px), (max-height: 500px) {
    .stage-card.has-sheet .stage-sheet { display: none; }
    .page-beast-sheet { display: block; }
}

/* Sous la scène : apparences d'un gardien, versions d'un monstre (pas encore vues : « ? ? ? ») */
.beast-chain .evo-arrow { color: rgba(var(--fam-rgb), 0.45); }
.evo-step.beast-step.is-locked { opacity: 0.55; border-style: dashed; cursor: default; }
.evo-step.beast-step.is-locked:hover { transform: none; border-color: var(--stroke); }
.evo-step.beast-step .evo-num { font-family: inherit; }
/* Types de dégâts (data/damage.js, codex.js damageChip) : pastilles du bestiaire, du titre de la scène et de la fiche
   de la créature, à la couleur du type (hud.css .kw-*), avec sa bulle */
.hub .dmg {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: 99px;
    border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
    background: color-mix(in srgb, currentColor 10%, transparent);
    font-size: 11.5px;
    font-style: normal;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
}
.hub .stage-tags .dmg { padding: 4px 10px; pointer-events: auto; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hub .mech-tags i.dmg { font-size: 10.5px; padding: 1px 7px; }
.hub .dmg-icon { margin-left: 2px; font-style: normal; text-decoration: none; }
.hub .sheet-note .dmg { margin: 1px 2px 1px 0; }
.alloc-taken { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 12.5px; color: var(--faint); }

/* Plus de trois versions, ou téléphone en paysage (scène étroite) : seule celle montrée garde son nom */
.beast-chain.is-long .beast-step:not(.active) { flex: 0 0 auto; }
.beast-chain.is-long .beast-step:not(.active) .evo-text { display: none; }
@media (orientation: landscape) and (max-height: 500px) {
    .beast-chain .beast-step:not(.active) { flex: 0 0 auto; }
    .beast-chain .beast-step:not(.active) .evo-text { display: none; }
}
.mech-row {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--stroke);
    background: rgba(255, 255, 255, 0.03);
    --kc: 200, 210, 230;
}
.mech-row.kind-share { --kc: 255, 201, 77; }
.mech-row.kind-spread { --kc: 190, 120, 255; }
.mech-row.kind-dodge { --kc: 255, 112, 60; }
.mech-row.kind-break { --kc: 90, 220, 255; }
.mech-row.kind-path { --kc: 110, 232, 140; }
.mech-row.kind-hold { --kc: 225, 235, 250; }
.mech-row .mech-kind {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(var(--kc), 0.55);
    background: rgba(var(--kc), 0.1);
    color: rgb(var(--kc));
    font-size: 14px;
}
.mech-row b { display: block; font-size: 13.5px; }
.mech-row b em { margin-left: 6px; font-size: 11px; font-style: normal; font-weight: 700; color: rgb(var(--kc)); }
.mech-row small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--muted, #b8c2d8); }
.mech-row .mech-solo { color: var(--faint); }
.mech-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.mech-tags i {
    padding: 1px 7px;
    border-radius: 99px;
    border: 1px solid var(--stroke);
    font-size: 10.5px;
    font-style: normal;
    color: var(--faint);
}
.mech-row.unknown { opacity: 0.6; }
.mech-row.unknown .mech-kind { border-style: dashed; }

/* Valeurs innées : chiffre sur une pastille (lisible même barre pleine), maximum « Pur » qui brille */

.iv-bar em {
    top: 2px;
    right: 3px;
    padding: 0 5px;
    border-radius: 4px;
    background: rgba(8, 12, 26, 0.72);
    line-height: 12px;
    color: #fff;
}

.iv-bar.pure {
    box-shadow: 0 0 0 1px rgba(255, 214, 110, 0.75), 0 0 10px rgba(255, 201, 77, 0.35);
}

.iv-bar.pure i {
    background: linear-gradient(90deg, #ffc94d, #fff3c4, #ffc94d);
    background-size: 200% 100%;
    animation: iv-pure 2.4s linear infinite;
}

.iv-bar.pure em {
    color: #ffe08a;
}

@keyframes iv-pure {
    to { background-position: -200% 0; }
}

.iv-grade[data-tip] {
    cursor: help;
    text-decoration: underline dotted rgba(255, 255, 255, 0.3);
    text-underline-offset: 3px;
}

.tone-pure { color: #ffe08a !important; text-shadow: 0 0 8px rgba(255, 201, 77, 0.5); }

@media (prefers-reduced-motion: reduce) {
    .iv-bar.pure i { animation: none; }
}

/* ---------- Comptoir des éleveurs, refonte du 2026-09-29 : on parcourt dans le panneau, on examine dans la scène ----------
   Onglets (Acheter, Vendre, Tes annonces, Repères de prix) ; lignes denses, les cinq valeurs innées alignées (couleurs des
   rangs, comme à la Réserve) ; la fiche de la créature montrée à côté d'elle dans la scène (comme le Bestiaire), avec ce
   qu'elle donnerait à ta Nichée. Écran étroit : la fiche passe sous la scène, en tête du panneau */

.hub .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.mk-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mk-tab {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid var(--stroke);
    background: rgba(0, 0, 0, 0.22);
    color: var(--muted);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.mk-tab em {
    font-style: normal;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    opacity: 0.75;
}

.mk-tab:hover,
.mk-tab:focus-visible {
    color: var(--text);
    border-color: rgba(var(--gold-rgb), 0.45);
}

.mk-tab.on {
    color: #2b1a00;
    border-color: var(--gold);
    background: linear-gradient(180deg, #ffe2a0, #f5b44a);
}

.market-toggles .mk-sep {
    width: 1px;
    align-self: stretch;
    margin: 2px 2px;
    background: var(--stroke);
}

/* Lignes : œuf · nom et lignée · cinq valeurs innées · fécondité · prix */
.mk-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mk-row {
    --c-rgb: 95, 212, 255;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 162px 52px 86px;
    align-items: center;
    gap: 10px;
    padding: 6px 10px 6px 8px;
    border-radius: 11px;
    border: 1px solid transparent;
    background: linear-gradient(100deg, rgba(var(--c-rgb), 0.07), rgba(var(--c-rgb), 0.01) 60%);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.mk-row:hover,
.mk-row:focus-visible {
    outline: none;
    border-color: rgba(var(--c-rgb), 0.5);
}

.mk-row.on {
    border-color: rgba(var(--c-rgb), 0.9);
    background: linear-gradient(100deg, rgba(var(--c-rgb), 0.22), rgba(var(--c-rgb), 0.05) 70%);
    box-shadow: inset 3px 0 0 rgba(var(--c-rgb), 0.9);
}

.mk-row.too-high {
    opacity: 0.72;
}

.mk-row.mk-head {
    padding-block: 0 2px;
    background: none;
    cursor: default;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--faint);
}

.mk-row .mon-egg .egg {
    width: 24px;
    height: 30px;
}

.mk-name {
    min-width: 0;
}

.mk-name b,
.mk-name small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mk-name b {
    font-size: 14px;
}

.mk-name small {
    margin-top: 1px;
    font-size: 11.5px;
    color: var(--muted);
}

.mk-name .perfect-badge {
    margin-left: 6px;
    vertical-align: 1px;
}

.mk-sex {
    font-style: normal;
    font-weight: 600;
    color: var(--muted);
}

.mk-couple {
    color: #ffb8d6;
    font-weight: 700;
}

.mk-row.masked .mk-name b {
    letter-spacing: 0.12em;
    color: var(--muted);
}

.mk-ivs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 3px;
}

.mk-ivs b {
    padding: 3px 0;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: var(--text);
}

.mk-head .mk-ivs span {
    text-align: center;
    white-space: nowrap;
}

.mk-ivs b.tone-epic,
.mk-ivs b.tone-pure {
    background: rgba(255, 201, 77, 0.16);
}

.mk-fert {
    display: flex;
    justify-content: center;
}

.mk-fert .fert-eggs {
    gap: 2px;
    justify-content: center;
    max-width: 52px;
}

.mk-fert .fert-eggs i {
    width: 5px;
    height: 7px;
    box-shadow: none;
}

.mk-fert .fert-eggs.none {
    font-size: 10px;
    line-height: 1.2;
    color: var(--faint);
    text-align: center;
}

.mk-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
}

.mk-price b {
    font-size: 13.5px;
}

.mk-price small {
    font-size: 10.5px;
    color: var(--faint);
}

.mk-price .mk-lock {
    color: #ffb86b;
    font-weight: 700;
}

.mk-head .mk-price,
.mk-head .mk-fert {
    font-size: 10.5px;
}

/* La fiche dans la scène, à côté du modèle (plus large que celle du Bestiaire : elle porte l'achat et la Nichée) */
.stage-card.has-market-sheet .stage-sheet {
    width: clamp(280px, 50%, 420px);
}

.market-sheet,
.mk-inline-card {
    --c-rgb: var(--hl-rgb);
}

.stage-sheet .market-sheet {
    gap: 0;
    animation: none;
}

.mk-sheet {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.mk-seller {
    margin: 0;
    font-size: 12px;
    color: var(--muted);
}

.mk-sheet .reveal-ivs {
    gap: 5px;
}

.mk-sheet .btn-primary.wide[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    filter: saturate(0.4);
}

.mk-sheet .detail-deal {
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
}

.mk-sheet .sell-price {
    margin: 0;
}

.mk-nest {
    padding: 11px 12px;
    border-radius: 13px;
    border: 1px solid rgba(255, 184, 214, 0.28);
    background: linear-gradient(160deg, rgba(255, 184, 214, 0.09), rgba(255, 184, 214, 0.02) 60%);
}

.mk-nest > .attack-kind {
    color: #ffc4dd;
}

.mk-partners {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.mk-partner {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px 3px 4px;
    border-radius: 999px;
    border: 1px solid var(--stroke);
    background: rgba(0, 0, 0, 0.2);
    color: var(--muted);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.mk-partner .egg {
    width: 15px;
    height: 19px;
}

.mk-partner.on {
    color: var(--text);
    border-color: rgba(255, 184, 214, 0.6);
    background: rgba(255, 184, 214, 0.12);
}

.mk-forecast {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
}

.mk-forecast li {
    display: grid;
    grid-template-columns: 50px 24px minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.mk-forecast .pstat-label {
    color: var(--muted);
}

.mk-pv {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.mk-nest-facts {
    color: var(--muted);
}

.mk-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
}

/* Écran étroit : la scène ne porte plus la fiche, elle se déplie sous la ligne choisie */
.mk-inline {
    display: none;
}

@media (max-width: 1180px), (max-height: 500px) {
    .mk-inline {
        display: block;
    }

    .mk-inline-card {
        margin: 2px 0 8px;
        padding: 13px 14px;
        border-radius: 14px;
        border: 1px solid rgba(var(--c-rgb), 0.5);
    }
}

/* Tablette (scène au-dessus du panneau) : la créature reste collée en haut pendant qu'on parcourt la liste */
@media (max-width: 1180px) and (not ((orientation: landscape) and (max-height: 500px))) {
    .hub-main:has(#hub-panel[data-tab='market']) .stage-card {
        position: sticky;
        top: 0;
        z-index: 4;
    }

    .hub-main:has(#hub-panel[data-tab='market']) .mk-row {
        scroll-margin-top: calc(clamp(230px, 34vh, 360px) + 14px);
    }
}

/* Liste étroite (panneau de téléphone, fenêtre étroite) : la fécondité se retire, le nom garde sa place */
.mk-list {
    container-type: inline-size;
}

@container (max-width: 470px) {
    .mk-list .mk-row {
        grid-template-columns: 26px minmax(0, 1fr) 132px 70px;
        gap: 7px;
    }

    .mk-list .mk-row .mk-fert {
        display: none;
    }

    .mk-list .mk-ivs b {
        font-size: 11.5px;
    }
}

/* Pied de la fiche : prix, achat (ou vente) et flèches restent en bas, visibles même quand la fiche défile */
.mk-foot {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stage-sheet .mk-foot {
    position: sticky;
    bottom: -12px;
    z-index: 1;
    margin-inline: -12px -12px;
    margin-inline-start: -14px;
    padding: 12px 12px 12px 14px;
    border-top: 1px solid var(--stroke);
    background: linear-gradient(180deg, rgba(4, 14, 24, 0.82), rgba(4, 14, 24, 0.97) 30%);
}

.mk-partner small {
    font-size: 10.5px;
    color: var(--faint);
}

/* Retouches après essai en 1536 × 730 : pied de fiche compact (les trois montants sur une ligne), en-têtes des colonnes
   sur deux lignes au besoin, œufs des lignées plus petits au Comptoir */
.stage-sheet .mk-foot .detail-deal {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.stage-sheet .mk-foot .detail-deal > div {
    padding: 6px 8px;
}

.stage-sheet .mk-foot .detail-deal small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stage-sheet .mk-foot .detail-deal b {
    font-size: 13.5px;
}

.stage-sheet .mk-foot .btn-primary.wide {
    padding-block: 11px;
}

.stage-card.has-market-sheet .stage-sheet {
    width: clamp(290px, 54%, 430px);
}

.mk-row.mk-head {
    font-size: 9.5px;
    letter-spacing: 0.04em;
    line-height: 1.1;
}

.mk-head .mk-ivs span {
    white-space: normal;
}

.mk-head .mk-fert {
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 9.5px;
}

.market-search .lineage-chip {
    min-width: 36px;
    height: 36px;
    padding: 3px;
}

.market-search .lineage-chip .egg {
    width: 20px;
    height: 25px;
}

.mk-row {
    grid-template-columns: 30px minmax(0, 1fr) 156px 62px 84px;
}

.mk-head .mk-fert {
    overflow: visible;
    justify-content: center;
    letter-spacing: 0;
}

/* Prévision de Nichée en colonnes : stat · ton partenaire · elle · meilleure 40 % · moyenne 40 % · plus basse 20 % */
.mk-forecast li {
    grid-template-columns: 48px 34px 34px repeat(3, minmax(0, 1fr));
    gap: 4px;
}

.mk-forecast-head {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--faint);
}

.mk-forecast-head span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

.mk-forecast .mk-pv {
    text-align: center;
}

.mk-forecast .out {
    justify-content: center;
    padding: 2px 0;
    font-size: 12px;
    color: var(--text);
}

/* ---------- Réserve, sur le modèle du Comptoir (2026-09-29) : mêmes lignes, la créature en 3D et sa fiche à côté ---------- */
.res-row .res-state {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.res-row .res-badge,
.res-row .res-check {
    position: static;
}

.res-row .res-badge {
    font-size: 9.5px;
    white-space: nowrap;
}

.res-row .res-marks {
    align-self: center;
}

.res-row.active {
    border-color: rgba(var(--gold-rgb), 0.35);
}

.res-row.picked {
    border-color: rgba(var(--gold-rgb), 0.85);
    background: linear-gradient(100deg, rgba(var(--gold-rgb), 0.16), rgba(var(--gold-rgb), 0.03) 70%);
}

.res-row.blocked {
    opacity: 0.45;
}

.res-row.listed .mk-name b {
    color: var(--muted);
}

.res-sheet-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.res-sheet-head .mark-chip {
    width: 20px;
    height: 20px;
}

.mk-sheet .reserve-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mk-couple-btn {
    align-self: flex-start;
    margin-top: 2px;
}

.reserve-head .lineage-chip {
    min-width: 36px;
    height: 36px;
    padding: 3px;
}

.reserve-head .lineage-chip .egg {
    width: 20px;
    height: 25px;
}

/* ---------- Nichée, outil d'éleveur (2026-09-29) : meilleurs couples, partenaires classés par l'enfant espéré ---------- */
.nest-choice:has(.mk-ivs) {
    grid-template-columns: auto minmax(0, 1fr) 150px 64px;
}

.nest-choice .mk-ivs b {
    font-size: 11.5px;
}

.nest-best {
    grid-template-columns: auto minmax(0, 1fr) 64px auto;
}

.nest-expect {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.1;
}

.nest-expect b {
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    color: #ffc4dd;
}

.nest-expect small,
.nest-fert-egg {
    font-size: 10.5px;
    color: var(--faint);
    white-space: nowrap;
}

.nest-best-page .nest-choices {
    max-height: none;
}

/* Le bouton qui confie le couple reste à portée, même quand la prévision défile */
.nest-forecast [data-action='nest-breed'] {
    position: sticky;
    bottom: 10px;
    z-index: 2;
    box-shadow: 0 10px 26px -8px rgba(0, 0, 0, 0.7);
}

@container (max-width: 420px) {
    .nest-choice:has(.mk-ivs) {
        grid-template-columns: auto minmax(0, 1fr) 124px 54px;
    }
}

.nest-choices {
    container-type: inline-size;
}

/* ---------- Couveuse, vue Œufs (2026-09-29) : l'œuf touché (ou regardé à la boutique) sur la scène, sa fiche à côté ---------- */
.incubator[data-action='egg-select'],
.egg-offer[data-action='egg-preview'] {
    cursor: pointer;
}

.incubator.on {
    border-color: rgba(var(--gold-rgb), 0.7);
    box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), 0.35);
}

.egg-offer.on {
    border-color: rgba(var(--gold-rgb), 0.6);
    background: linear-gradient(100deg, rgba(var(--gold-rgb), 0.1), transparent 70%);
}

.egg-sheet .heat.big {
    height: 18px;
    border-radius: 9px;
}

.egg-sheet .heat.big em {
    font-size: 11.5px;
}

.egg-sheet .heat.big em {
    line-height: 18px;
}

/* ---------- Éclosion (2026-09-29) : la décision collée en haut du panneau, sans défiler ---------- */
.hub .page.reveal-decide {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-color: rgba(var(--gold-rgb), 0.45);
    background: linear-gradient(160deg, rgba(var(--gold-rgb), 0.12), rgba(var(--gold-rgb), 0.02) 60%), rgba(6, 16, 28, 0.92);
}

.reveal-verdict {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.reveal-verdict:empty {
    display: none;
}

.tag-record {
    color: #9dffcb;
    border-color: rgba(109, 255, 176, 0.4);
}

.reveal-record {
    margin-left: 4px;
    color: #6dffb0;
    font-size: 11px;
}

.reveal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.reveal-actions .btn-primary {
    flex: 1 1 auto;
}

.hub .page.reveal-nest {
    padding: 14px 16px;
}

.reveal-nest .mk-nest {
    border: 0;
    padding: 0;
    background: none;
}

/* ---------- Nichée : la prévision à côté du couple sur la scène (écran large), dans le panneau sinon ---------- */
.stage-card.has-nest-sheet .stage-sheet {
    width: clamp(290px, 44%, 380px);
}

.nest-forecast-panel {
    display: none;
}

@media (max-width: 1180px), (max-height: 500px) {
    .nest-forecast-panel {
        display: block;
    }
}

.stage-sheet .nest-forecast .page-head {
    margin-bottom: 4px;
}

.brin-chip b {
    margin-left: 3px;
    font-variant-numeric: tabular-nums;
}

/* Pied de la prévision : la raison d'un refus et le bouton, sur un fond plein (le bouton grisé laissait voir dessous) */
.nest-forecast [data-action='nest-breed'] {
    position: static;
    box-shadow: none;
}

.nest-forecast-panel .nest-foot {
    position: sticky;
    bottom: -22px;
    z-index: 2;
    margin: 0 -22px -22px;
    padding: 12px 22px 22px;
    border-radius: 0 0 20px 20px;
    background: linear-gradient(180deg, rgba(6, 16, 28, 0.8), rgba(6, 16, 28, 0.97) 30%);
}

.nest-foot .note.warn {
    margin: 0;
}

.stage-card.has-nest-sheet .stage-sheet {
    width: clamp(300px, 48%, 400px);
}

.stage-sheet .nest-forecast .out {
    padding: 1px 5px;
    font-size: 11px;
}

.stage-sheet .nest-forecast .out b {
    font-size: 12px;
}

.reveal-grade {
    display: inline-flex;
    align-items: baseline;
    white-space: nowrap;
}

/* Fiche de la scène : barre de défilement fine aux couleurs du jeu (la barre blanche du système jurait), plus visible au survol */
.stage-sheet-inner {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--hl-rgb), 0.28) transparent;
    scrollbar-gutter: stable;
}

.stage-sheet-inner:hover {
    scrollbar-color: rgba(var(--hl-rgb), 0.55) transparent;
}

.stage-sheet-inner::-webkit-scrollbar {
    width: 6px;
}

.stage-sheet-inner::-webkit-scrollbar-track {
    background: transparent;
}

.stage-sheet-inner::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: rgba(var(--hl-rgb), 0.28);
}

.stage-sheet-inner:hover::-webkit-scrollbar-thumb {
    background: rgba(var(--hl-rgb), 0.55);
}

/* ---------- Échanges entre amis (Comptoir, onglet Échanges, 2026-09-29) ---------- */
.trade-friends .trade-friend {
    width: auto;
    min-width: 0;
    height: 36px;
    padding: 3px 10px 3px 5px;
    gap: 6px;
}

.trade-friend span {
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.trade-sub {
    margin: 14px 0 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

.trade-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.trade-row {
    --c-rgb: 95, 212, 255;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 11px;
    border: 1px solid transparent;
    background: linear-gradient(100deg, rgba(var(--c-rgb), 0.08), rgba(var(--c-rgb), 0.01) 60%);
    cursor: pointer;
}

.trade-row:hover,
.trade-row:focus-visible {
    outline: none;
    border-color: rgba(var(--c-rgb), 0.5);
}

.trade-row.on {
    border-color: rgba(var(--c-rgb), 0.9);
    box-shadow: inset 3px 0 0 rgba(var(--c-rgb), 0.9);
}

.trade-row.closed {
    opacity: 0.6;
}

.trade-eggs {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.trade-eggs .egg {
    width: 20px;
    height: 25px;
}

.trade-eggs i,
.trade-state {
    font-style: normal;
    font-size: 11.5px;
    color: var(--muted);
    white-space: nowrap;
}

/* La fiche : ce que tu donnes et ce que tu reçois, côte à côte */
.trade-compare {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.trade-compare li {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1fr) 44px;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
}

.trade-compare li > b {
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.trade-compare-head span,
.trade-names span {
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trade-compare-head {
    font-size: 10px !important;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--faint);
}

.trade-names {
    font-weight: 700;
}

.trade-values {
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid var(--stroke);
}

.trade-compare em {
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
    text-align: right;
}

.trade-up {
    color: #6dffb0;
}

.trade-down {
    color: #ff8a8a;
}

.trade-perles {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 12.5px;
    color: var(--muted);
}

.trade-perles input {
    width: 120px;
    padding: 7px 10px;
    border-radius: 9px;
    border: 1px solid var(--stroke);
    background: rgba(0, 0, 0, 0.3);
    color: var(--text);
    font: inherit;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.trade-perles-note {
    margin: 0;
    font-weight: 700;
    color: rgb(var(--gold-rgb));
}

.trade-balance {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
}

.trade-ok {
    color: #6dffb0;
}

.trade-bad {
    color: #ffb86b;
}

.trade-actions {
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

.friend-trade {
    min-width: 30px;
    padding-inline: 8px;
}

/* La copie de la fiche dans le panneau : seulement quand la scène ne peut pas la porter */
.trade-panel-sheet {
    display: none;
}

@media (max-width: 1180px), (max-height: 500px) {
    .trade-panel-sheet {
        display: block;
    }
}

.trade-friends .trade-friend span {
    position: static;
    display: inline;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    opacity: 1;
    color: var(--text);
}

.trade-friends .trade-friend {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
}

.trade-friends .trade-friend .egg {
    width: 20px;
    height: 25px;
}

/* Capsule chromatique (Nichée) : son bouton sur la ligne Chromatique de la prévision, le stock en tête de la Nichée */
.nest-facts dd.nest-shiny {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

.brin-chip.capsule {
    color: #ffd76a;
    border-color: rgba(255, 215, 106, 0.55);
}

.brin-chip.capsule.on {
    background: linear-gradient(120deg, rgba(255, 227, 138, 0.3), rgba(255, 201, 77, 0.22));
    color: #fff0bf;
}

.nest-capsules {
    color: #ffd76a;
    font-variant-numeric: tabular-nums;
}

/* ---------- Journal de bord (hub.js renderJournal) ---------- */

.page-journal .quest-list {
    display: grid;
    gap: 6px;
}
.page-journal + .page-journal {
    margin-top: 12px;
}
.quest {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 11px;
    align-items: center;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid rgba(205, 228, 244, 0.08);
    background: rgba(6, 12, 24, 0.45);
}
.quest.is-ready {
    border-color: rgba(109, 255, 176, 0.45);
    background: linear-gradient(90deg, rgba(109, 255, 176, 0.1), rgba(6, 12, 24, 0.45) 60%);
}
.quest.is-claimed {
    opacity: 0.55;
}
.quest-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    overflow: hidden;
    font-size: 16px;
    color: rgb(255, 214, 140);
    background: rgba(255, 214, 140, 0.08);
    border: 1px solid rgba(255, 214, 140, 0.28);
}
.quest-icon .isle-boss {
    position: static;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: none;
}
.quest-body {
    display: grid;
    gap: 2px;
    min-width: 0;
}
.quest-kind {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(243, 217, 160, 0.7);
}
.quest-body b {
    font-family: var(--serif);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
}
.quest-note {
    font-size: 11px;
    color: rgba(205, 228, 244, 0.45);
}
.quest-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: rgba(205, 228, 244, 0.6);
    font-variant-numeric: tabular-nums;
}
.quest-progress small {
    white-space: nowrap;
}
.quest-bar {
    flex: 0 1 150px;
    height: 6px;
    border-radius: 3px;
    background: rgba(205, 228, 244, 0.12);
    overflow: hidden;
}
.quest-bar i {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #ffb347, #ffd66b);
}
.quest-bar.done i {
    background: linear-gradient(90deg, #4fe39a, #9dffcf);
}
.quest-side {
    display: grid;
    justify-items: end;
    gap: 5px;
}
.quest-gain {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.quest-perles {
    color: #9fe8ff;
}
.quest-eclats {
    color: #c58bff;
}
.quest-item {
    color: rgb(255, 214, 140);
}
.quest-claim,
.journal-claim-all {
    padding: 5px 12px;
    border: 0;
    border-radius: 9px;
    font: 700 12px/1.2 inherit;
    color: #2a1604;
    background: linear-gradient(#ffd66b, #ff9d3d);
    cursor: pointer;
}
.journal-claim-all {
    justify-self: start;
    margin-bottom: 8px;
}
.quest-claimed {
    font-size: 11px;
    color: rgb(109, 255, 176);
}
.quest-swap {
    font-size: 11px;
}
/* Repères de l'Expédition : l'île du gardien d'une quête, l'archipel où une quête attend */
.quest-mark {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 3px 8px;
    border-radius: 99px;
    font-size: 10.5px;
    font-weight: 700;
    color: #ffd66b;
    background: rgba(40, 26, 6, 0.85);
    border: 1px solid rgba(255, 214, 140, 0.7);
    pointer-events: none;
}
html.phone .quest {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 6px 8px;
}
html.phone .quest-icon {
    width: 28px;
    height: 28px;
}

/* ---------- Rangs du Journal (hub.js rankBoxHtml, renderRanks) ---------- */

.rank-box {
    display: grid;
    gap: 5px;
    margin: 0 0 10px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 208, 120, 0.22);
    background: rgba(255, 255, 255, 0.035);
}
.rank-box.is-ready {
    border-color: rgba(109, 255, 176, 0.45);
}
.rank-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.rank-row b {
    font-size: 14px;
}
.rank-row small,
.rank-seals {
    font-size: 11.5px;
    color: rgba(214, 226, 250, 0.62);
    font-variant-numeric: tabular-nums;
}
.rank-bar {
    display: block;
    width: 100%;
}
.rank-next {
    font-size: 12px;
    color: rgba(214, 226, 250, 0.82);
}
.rank-hot {
    color: #ffd98a;
}
.rank-cos {
    color: #c9a2ff;
    font-weight: 700;
}
.rank-link,
.rank-back {
    justify-self: start;
    font-size: 12px;
    font-weight: 700;
    color: #ffc46b;
}
.rank-back {
    margin-bottom: 6px;
}
.rank-list {
    display: grid;
    gap: 4px;
    margin: 8px 0;
}
.rank-item {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 7px 10px;
    border-radius: 11px;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.035);
    font-size: 12.5px;
}
.rank-n {
    font-weight: 800;
    text-align: center;
    color: rgba(214, 226, 250, 0.6);
}
.rank-item.is-done {
    opacity: 0.6;
}
.rank-item.is-ready {
    border-color: rgba(109, 255, 176, 0.45);
    background: linear-gradient(90deg, rgba(109, 255, 176, 0.1), rgba(255, 255, 255, 0.035) 60%);
}
.rank-item.is-next {
    border-color: rgba(255, 196, 107, 0.45);
    background: rgba(255, 196, 107, 0.08);
}
.rank-item.is-next .rank-n,
.rank-item.is-ready .rank-n {
    color: #ffc46b;
}
.rank-item.is-beyond .rank-n {
    font-size: 11px;
}
.rank-pick {
    grid-column: 1 / -1;
    display: grid;
    gap: 6px;
    padding-top: 4px;
}
.rank-pick .family-pick {
    margin-top: 0;
}
.rank-pick-actions {
    display: flex;
    gap: 8px;
}

/* ---------- Quête commune (hub.js communityStripHtml, bas de la scène du Journal) ---------- */

.commune {
    width: min(100%, 700px);
    padding: 11px 14px;
    border-radius: 16px;
    background: rgba(10, 16, 32, 0.82);
    border: 1px solid rgba(255, 208, 120, 0.28);
    backdrop-filter: blur(6px);
    pointer-events: auto;
}
.commune-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.commune-kick {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #ffc46b;
}
.commune-kick.muted {
    color: rgba(214, 226, 250, 0.6);
}
.commune-title {
    margin: 2px 0 7px;
    font-family: 'Fraunces', serif;
    font-size: 16px;
    font-weight: 600;
}
.commune-count {
    font-weight: 800;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.commune-count small {
    font-weight: 500;
    color: rgba(214, 226, 250, 0.62);
}
.commune-bar {
    position: relative;
    height: 9px;
    margin: 2px 0 14px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
}
.commune-bar i {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 6px;
    background: linear-gradient(90deg, #ffb347, #ffd98a);
}
.commune-bar b {
    position: absolute;
    top: -4px;
    width: 2px;
    height: 17px;
    background: rgba(255, 255, 255, 0.55);
}
.commune-bar em {
    position: absolute;
    top: 12px;
    transform: translateX(-50%);
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    color: rgba(214, 226, 250, 0.6);
    white-space: nowrap;
}
.commune-tiers {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}
.commune-tier {
    padding: 6px 9px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.05);
    font-size: 11.5px;
    color: rgba(214, 226, 250, 0.8);
}
.commune-tier b {
    display: block;
    margin-bottom: 1px;
    font-size: 12px;
    color: #fff;
}
.commune-tier.on {
    border-color: rgba(120, 230, 160, 0.55);
    background: rgba(80, 200, 130, 0.12);
}
.commune-tier.on b::after {
    content: ' ✓';
    color: #7ce3a4;
}
.commune-tier.next {
    border-color: rgba(255, 208, 120, 0.55);
}
.commune-me {
    margin-top: 7px;
    font-size: 12.5px;
    font-weight: 700;
    color: #ffd98a;
}
.commune-me span {
    font-weight: 500;
    color: rgba(214, 226, 250, 0.62);
}
.commune-prev {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 12.5px;
    font-weight: 700;
}
.commune-prev.muted {
    font-weight: 500;
    color: rgba(214, 226, 250, 0.62);
}
/* Téléphone : une ligne de titre, une barre fine, ta part et la semaine d'avant ; les paliers se lisent au PC. L'œuf
   de la semaine doit rester visible au-dessus */
html.phone .stage-bottom:has(.commune) {
    padding: 12px 10px 8px;
}
html.phone .commune {
    width: min(100%, 520px);
    padding: 5px 9px;
    border-radius: 12px;
}
html.phone .commune-row:first-child,
html.phone .commune-tiers,
html.phone .commune-bar em,
html.phone .commune-me span {
    display: none;
}
html.phone .commune-title {
    margin: 0 0 3px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: calc(11.5px * var(--phone-k, 1));
}
html.phone .commune-count {
    font-size: 11.5px;
}
html.phone .commune-bar {
    height: 5px;
    margin: 1px 0 3px;
}
html.phone .commune-bar b {
    top: -3px;
    height: 11px;
}
html.phone .commune-me {
    margin-top: 0;
    font-size: 10.5px;
}
html.phone .commune-prev {
    margin-top: 3px;
    padding-top: 3px;
    font-size: 10.5px;
}
html.phone .commune-prev .quest-claim {
    padding: 3px 9px;
    font-size: 10.5px;
}
html.phone .rank-item {
    grid-template-columns: 22px minmax(0, 1fr) auto;
    gap: 7px;
    padding: 5px 8px;
    font-size: 11.5px;
}

/* ---------- Mode invité (rogue/guest.js) : bandeau, liaison, onglets fermés, fenêtres ---------- */

.guest-banner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px 12px;
    align-items: center;
    margin-bottom: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: linear-gradient(90deg, rgba(58, 38, 8, 0.92), rgba(30, 20, 6, 0.9));
    box-shadow: 0 0 0 1px rgba(255, 197, 66, 0.45) inset, 0 14px 30px -20px rgba(0, 0, 0, 0.9);
}

.guest-cloud {
    width: 24px;
    height: 24px;
    color: #ffc542;
}

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

.guest-banner-text b {
    font-size: 14px;
    color: #ffe9b0;
}

.guest-banner-text span {
    font-size: 12.5px;
    line-height: 1.4;
    color: rgba(255, 233, 176, 0.82);
}

.guest-banner .guest-links {
    grid-column: 1 / -1;
}

.guest-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.guest-link {
    flex: 1 1 140px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.15s, filter 0.15s;
}

.guest-link:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
}

.guest-links.compact .guest-link {
    min-height: 40px;
    font-size: 13.5px;
}

.guest-logo {
    width: 18px;
    height: 18px;
    flex: none;
}

.guest-link-discord {
    color: #ffffff;
    background: #5865f2;
}

.guest-link-google {
    color: #1f1f1f;
    background: #ffffff;
}

.guest-link-dev {
    color: var(--text);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset;
}

.guest-lock .guest-links {
    margin-top: 6px;
}

.nav-item.guest-locked .nav-icon,
.nav-item.guest-locked .nav-text b {
    opacity: 0.6;
}

.nav-item.guest-locked .nav-text small {
    color: #ffc542;
}

.guest-dialog {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 560px;
}

.guest-kicker {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #ffc542;
}

.guest-dialog .note {
    padding-top: 10px;
    border-top: 1px solid rgba(205, 228, 244, 0.12);
}

.guest-games {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.guest-game {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(205, 228, 244, 0.04);
    box-shadow: 0 0 0 1px rgba(205, 228, 244, 0.18) inset;
}

.guest-game.keep {
    background: rgba(255, 197, 66, 0.08);
    box-shadow: 0 0 0 2px rgba(255, 197, 66, 0.75) inset;
}

.guest-game span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
}

.guest-game.keep span {
    color: #ffc542;
}

.guest-game b {
    font-family: var(--serif, 'Fraunces', Georgia, serif);
    font-size: 22px;
}

.guest-game small {
    font-size: 13px;
    color: var(--muted);
}

@media (max-width: 520px) {
    .guest-games {
        grid-template-columns: minmax(0, 1fr);
    }
}