:root {
    color-scheme: dark;
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    --vm-card-w: clamp(64px, 18vw, 86px);
    --vm-card-radius: clamp(8px, 2vw, 12px);
    --vm-hand-step: 34px;
    --vm-safe-top: max(12px, env(safe-area-inset-top));
    --vm-safe-right: max(12px, env(safe-area-inset-right));
    --vm-safe-bottom: max(14px, env(safe-area-inset-bottom));
    --vm-safe-left: max(12px, env(safe-area-inset-left));
}


/* =========================================================
   V1.14.0 — THÈMES DE COMPTE
   Le thème décale uniquement la teinte des couleurs violettes.
   Le noir et l’argent désaturent cette même gamme.
   ========================================================= */
:root,
html[data-vm-theme="violet"] {
    --vm-theme-hue-shift: 0deg;
    --vm-theme-desaturate: 0%;
}

html[data-vm-theme="blue"] {
    --vm-theme-hue-shift: -60deg;
    --vm-theme-desaturate: 0%;
}

html[data-vm-theme="red"] {
    --vm-theme-hue-shift: 90deg;
    --vm-theme-desaturate: 0%;
}

html[data-vm-theme="green"] {
    --vm-theme-hue-shift: -135deg;
    --vm-theme-desaturate: 0%;
}

html[data-vm-theme="pink"] {
    --vm-theme-hue-shift: 45deg;
    --vm-theme-desaturate: 0%;
}

html[data-vm-theme="black"] {
    --vm-theme-hue-shift: 0deg;
    --vm-theme-desaturate: 100%;
}

html[data-vm-theme="aqua"] {
    --vm-theme-hue-shift: -100deg;
    --vm-theme-desaturate: 0%;
}

html[data-vm-theme="yellow"] {
    --vm-theme-hue-shift: 137deg;
    --vm-theme-desaturate: 0%;
}

html[data-vm-theme="orange"] {
    --vm-theme-hue-shift: 108deg;
    --vm-theme-desaturate: 0%;
    --vm-accent-deep: #1a0500;
    --vm-accent-dark: #8f2b00;
    --vm-accent-main: #ff6a00;
    --vm-accent-bright: #ff9a3d;
    --vm-accent-light: #ffd0a3;
    --vm-accent-pale: #fff0e2;
}

html[data-vm-theme="peach"] {
    --vm-theme-hue-shift: 97deg;
    --vm-theme-desaturate: 4%;
}

:root {
    --vm-accent-deep: hsl(calc(279deg + var(--vm-theme-hue-shift)) max(0%, calc(69% - var(--vm-theme-desaturate))) 7%);
    --vm-accent-dark: hsl(calc(278deg + var(--vm-theme-hue-shift)) max(0%, calc(75% - var(--vm-theme-desaturate))) 24%);
    --vm-accent-main: hsl(calc(278deg + var(--vm-theme-hue-shift)) max(0%, calc(66% - var(--vm-theme-desaturate))) 52%);
    --vm-accent-bright: hsl(calc(273deg + var(--vm-theme-hue-shift)) max(0%, calc(54% - var(--vm-theme-desaturate))) 73%);
    --vm-accent-light: hsl(calc(268deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 86%);
    --vm-accent-pale: hsl(calc(278deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 93%);
}

* {
    box-sizing: border-box;
}

html,
body {
    
    margin: 0;
    background: var(--vm-bg);
}

body {
    color: var(--vm-text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    
}

button,
img {
    -webkit-tap-highlight-color: transparent;
}

button {
    font: inherit;
}

button:focus-visible,
.vm-card-button:focus-visible {
    outline: 2px solid #f2d77f;
    outline-offset: 3px;
}

[hidden] {
    display: none !important;
}

.vm-app {
    position: relative;
    display: grid;
    
    gap: 14px;
    
    
    margin: 0 auto;
    padding: var(--vm-safe-top) var(--vm-safe-right) var(--vm-safe-bottom) var(--vm-safe-left);
    
    isolation: isolate;
}

.vm-app::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    
    
    
}

.vm-app.is-revolution::after {
    content: "";
    position: fixed;
    inset: 0;
    
    pointer-events: none;
    
}

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

.vm-header::after {
    
    
    inset: 1px;
    border-radius: 21px;
    
    
    mask-image: linear-gradient(#000, transparent 75%);
}


.vm-kicker {
    margin: 0 0 4px;
    color: var(--vm-gold);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .28em;
}


.vm-round-counter,
.vm-order-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid rgba(221, 232, 255, 0.14);
    border-radius: 999px;
    color: #ecf0fb;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.vm-round-counter::before,
.vm-order-badge::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 40%);
    opacity: .7;
    pointer-events: none;
}


.vm-header-actions {
    
    
    justify-content: flex-end;
    
}

.vm-icon-button {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(230, 236, 248, 0.18);
    border-radius: 13px;
    
    
    
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.vm-icon-button:hover {
    border-color: rgba(222,192,106,.55);
    background: linear-gradient(180deg, rgba(222,192,106,.18), rgba(222,192,106,.08));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 10px 22px rgba(0,0,0,.24);
}

.vm-icon-button:active {
    transform: translateY(1px) scale(.97);
}

.vm-music-button svg {
    width: 19px;
    height: 19px;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.vm-music-slash {
    opacity: 0;
    stroke: #ef7a83;
    stroke-width: 2.2;
    transition: opacity .18s ease;
}

.vm-music-button.is-muted {
    color: #a2a8b6;
    border-color: rgba(212,222,246,.18);
}

.vm-music-button.is-muted .vm-music-slash {
    opacity: 1;
}

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

.vm-opponent {
    
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 78px;
    padding: 10px 11px;
    
    
    
    
    
    transition: opacity .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}


.vm-opponent::after {
    
    
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    border-radius: 999px;
    
    
}

.vm-opponent.is-active {
    z-index: 3;
    
    
    
    
}


.vm-opponent.is-active .vm-opponent-portrait-wrap {
    
    
    animation: vm-turn-pulse 1.45s ease-in-out infinite;
}

.vm-opponent.is-active .vm-opponent-count,
.vm-opponent.is-active .vm-opponent-score {
    color: #dfc97d;
}

.vm-opponent.is-finished {
    
    filter: saturate(.7);
}

.vm-opponent-portrait-wrap,
.vm-bark-portrait-wrap {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid rgba(222,192,106,.32);
    border-radius: 50%;
    
}

.vm-opponent-portrait-wrap {
    width: 52px;
    height: 52px;
    
}

.vm-opponent-portrait,
.vm-bark-portrait {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vm-opponent-fallback,
.vm-bark-fallback {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: var(--vm-gold);
    background: radial-gradient(circle at 40% 30%, #2c3a58, #111723 68%);
    font-family: Cinzel, Georgia, serif;
    font-weight: 800;
}

.vm-turn-indicator {
    position: absolute;
    
    
    width: 13px;
    height: 13px;
    border: 2px solid #11151f;
    
    background: transparent;
}


.vm-opponent-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    
}

.vm-opponent-name {
    overflow: hidden;
    
    font-family: Cinzel, Georgia, serif;
    font-size: clamp(12px, 2.4vw, 15px);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vm-opponent-count,
.vm-opponent-score {
    overflow: hidden;
    color: var(--vm-muted);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.vm-table {
    
    display: grid;
    grid-template-rows: auto minmax(170px, 1fr);
    
    
    
    
    
    
}


.vm-round-info {
    position: relative;
    
    
    
    
    gap: 10px;
    
    border-bottom: 1px solid rgba(230, 237, 250, 0.08);
    
    
}

.vm-round-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    
    
    
    
    
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .12em;
    white-space: nowrap;
    transition: border-color .25s ease, background .25s ease, box-shadow .25s ease, transform .25s ease;
}

.vm-round-label.is-human-turn {
    
    
    
    
    animation: vm-turn-pulse 1.45s ease-in-out infinite;
}


.vm-pile-shell {
    position: relative;
    z-index: 1;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 12px;
    min-height: 0;
    padding: 18px 16px 84px;
}

.vm-pile-shell::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 52%;
    
    
    border-radius: 999px;
    
    
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.vm-pile {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: min(92%, 460px);
    
}

.vm-pile-empty {
    
    align-items: center;
    flex-direction: column;
    gap: 8px;
    
    font-size: 12px;
    text-align: center;
}

.vm-void-mark {
    
    font-size: 34px;
    
}

.vm-pile-card {
    position: relative;
    
    aspect-ratio: 2 / 3;
    flex: 0 0 var(--vm-card-w);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: var(--vm-card-radius);
    background: #090b11;
    
    animation: vm-card-arrive .34s ease-out both;
}

.vm-last-action {
    position: relative;
    min-height: 20px;
    margin: 0;
    
    
    
    
    
    
    font-size: 11px;
    text-align: center;
}

.vm-card-image,
.vm-card-fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.vm-card-image {
    display: block;
    object-fit: cover;
}

.vm-card-fallback {
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #06070a;
    background:
        linear-gradient(145deg, rgba(255,255,255,.28), transparent 36%),
        linear-gradient(180deg, var(--card-color), var(--card-color-soft));
    font-family: Cinzel, Georgia, serif;
}

.vm-card-fallback::before,
.vm-card-fallback::after {
    content: attr(data-label);
    position: absolute;
    color: rgba(0,0,0,.78);
    font-size: 13px;
    font-weight: 900;
}

.vm-card-fallback::before {
    top: 5px;
    left: 6px;
}

.vm-card-fallback::after {
    right: 6px;
    bottom: 5px;
    transform: rotate(180deg);
}

.vm-card-fallback-symbol {
    font-size: 29px;
}

.vm-card-fallback.is-void {
    color: hsl(calc(258.7deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 88%);
    background:
        radial-gradient(circle at 50% 45%, hsl(calc(265.8deg + var(--vm-theme-hue-shift)) max(0%, calc(46.3% - var(--vm-theme-desaturate))) 51.8% / .52), transparent 27%),
        linear-gradient(160deg, hsl(calc(255.8deg + var(--vm-theme-hue-shift)) max(0%, calc(34.5% - var(--vm-theme-desaturate))) 10.8%), #080910 68%);
}

.vm-card-fallback.is-void::before,
.vm-card-fallback.is-void::after {
    color: hsl(calc(258.7deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 88%);
    font-size: 8px;
}

.vm-bark {
    
    left: 50%;
    
    
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    
    min-height: 68px;
    padding: 9px 14px 9px 9px;
    
    
    opacity: 0;
    
    
    pointer-events: none;
    transform: translate(-50%, 14px);
    transition: opacity .28s ease, transform .28s ease;
    
}

.vm-bark::after {
    content: "";
    position: absolute;
    
    
    
    
    
}

.vm-bark.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.vm-bark-portrait-wrap {
    width: 50px;
    height: 50px;
    
}

.vm-bark-copy {
    min-width: 0;
}

.vm-bark-copy strong {
    
    margin-bottom: 4px;
    
    font-family: Cinzel, Georgia, serif;
    font-size: 12px;
}

.vm-bark-copy p {
    margin: 0;
    
    font-size: 12px;
    line-height: 1.35;
}


.vm-player {
    
    padding: 12px;
    
    
    
    
}


.vm-player.is-active::before {
    content: "À VOUS DE JOUER";
    position: absolute;
    
    
    z-index: 10;
    
    
    
    
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .16em;
    
    
    animation: vm-turn-pulse 1.45s ease-in-out infinite;
}

.vm-player-status {
    position: relative;
    z-index: 1;
    display: grid;
    
    align-items: center;
    gap: 10px;
    padding: 0 4px 10px;
}

.vm-player-identity {
    display: flex;
    
    gap: 8px;
    min-width: 0;
}

.vm-player-name {
    
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .12em;
}


.vm-selection-summary {
    overflow: hidden;
    
    font-size: 11px;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vm-hand-viewport,
.vm-exchange-hand-viewport {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-color: rgba(222,192,106,.35) transparent;
    
    -webkit-overflow-scrolling: touch;
}

.vm-hand-viewport {
    
    z-index: 1;
    
    padding: 14px 0 8px;
    border-top: 1px solid rgba(255,255,255,.05);
    border-bottom: 1px solid rgba(255,255,255,.05);
    mask-image: none;
}

.vm-hand,
.vm-exchange-hand {
    display: flex;
    align-items: flex-end;
    gap: 0;
    
    
    padding: 0 10px;
}


.vm-card-button {
    position: relative;
    width: var(--vm-card-w);
    aspect-ratio: 2 / 3;
    flex: 0 0 var(--vm-card-w);
    margin-left: calc(var(--vm-hand-step) - var(--vm-card-w));
    padding: 0;
    z-index: var(--vm-card-index, 1);
    
    border: 0;
    border-radius: var(--vm-card-radius);
    background: transparent;
    opacity: 1;
    cursor: pointer;
    scroll-snap-align: center;
    transition: transform .2s ease, opacity .2s ease, filter .2s ease;
}

.vm-card-button:first-child {
    margin-left: 0;
}

.vm-card-face {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    border: 1px solid rgba(230,235,248,.32);
    border-radius: var(--vm-card-radius);
    background: #090b11;
    
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, filter .2s ease;
}

.vm-card-face::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 25%, transparent 70%, rgba(0,0,0,.08));
}


.vm-card-button:not(.is-unplayable):active {
    transform: scale(.98);
}

.vm-card-button.is-selected {
    z-index: 300 !important;
    transform: translateY(-16px);
}


.vm-card-button.is-unplayable:not(.is-selected) {
    opacity: 1;
    filter: grayscale(.78) brightness(.48) saturate(.65);
}

.vm-card-button.is-void-locked::after {
    content: "BLOQUÉ";
    position: absolute;
    right: 4px;
    bottom: 5px;
    left: 4px;
    z-index: 3;
    padding: 3px 2px;
    border-radius: 5px;
    
    
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .08em;
    text-align: center;
    box-shadow: 0 6px 12px rgba(0,0,0,.24);
}

.vm-hand-finished {
    display: grid;
    place-items: center;
    width: min(100%, 520px);
    min-height: 116px;
    margin: 0 auto;
    color: #d4d8e2;
    font-family: Cinzel, Georgia, serif;
    font-size: 13px;
    text-align: center;
}

.vm-actions {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 10px;
    padding-top: 10px;
}

.vm-primary-button,
.vm-secondary-button {
    position: relative;
    min-height: 46px;
    padding: 0 14px;
    
    
    font-family: Cinzel, Georgia, serif;
    font-size: 12px;
    font-weight: 800;
    
    cursor: pointer;
    transition: opacity .2s ease, transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.vm-primary-button::before,
.vm-secondary-button::before {
    content: "";
    position: absolute;
    
    pointer-events: none;
    
    
}

.vm-primary-button {
    border: 1px solid #e1c65f;
    
    
    
}

.vm-secondary-button {
    border: 1px solid rgba(225, 233, 248, 0.18);
    
    
    
}

.vm-primary-button:not(:disabled):hover,
.vm-secondary-button:not(:disabled):hover {
    transform: translateY(-1px);
}

.vm-primary-button:not(:disabled):active,
.vm-secondary-button:not(:disabled):active {
    transform: translateY(1px) scale(.99);
}

.vm-primary-button:disabled,
.vm-secondary-button:disabled {
    opacity: .34;
    cursor: default;
    box-shadow: none;
}

.vm-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    padding: max(18px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
    opacity: 0;
    visibility: hidden;
    
    
    transition: opacity .25s ease, visibility .25s ease;
}

.vm-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

.vm-result-panel {
    width: min(100%, 530px);
    max-height: calc(100dvh - 36px);
    padding: 26px;
    overflow-y: auto;
    border: 1px solid rgba(222,192,106,.32);
    border-radius: 26px;
    background:
        radial-gradient(circle at 50% 0%, rgba(222,192,106,.1), transparent 36%),
        linear-gradient(180deg, rgba(22,27,41,.98), rgba(8,11,18,.99));
    box-shadow: 0 34px 90px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.05);
    transform: translateY(12px) scale(.985);
    transition: transform .25s ease;
}

.vm-overlay.is-visible .vm-result-panel {
    transform: translateY(0) scale(1);
}

.vm-result-panel h2 {
    margin: 4px 0 10px;
    color: #fff;
    font-family: Cinzel, Georgia, serif;
    font-size: clamp(22px, 7vw, 36px);
    line-height: 1.08;
}

.vm-result-panel > p:not(.vm-kicker) {
    margin: 0 0 16px;
    color: #bec6d8;
    font-size: 13px;
    line-height: 1.55;
}

.vm-ranking {
    display: grid;
    gap: 7px;
    margin: 0 0 18px;
}

.vm-ranking-row {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 13px;
    background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.vm-ranking-place {
    color: var(--vm-gold);
    font-family: Cinzel, Georgia, serif;
    font-size: 12px;
    font-weight: 800;
}

.vm-ranking-row strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vm-ranking-row > span:last-child {
    color: var(--vm-muted);
    font-size: 11px;
}

.vm-result-panel > .vm-primary-button {
    width: 100%;
}


.vm-result-menu-button[hidden] {
    display: none;
}

.vm-exchange-panel {
    width: min(100%, 780px);
}

.vm-exchange-hand-viewport {
    margin: 6px 0 10px;
    padding: 14px 0;
    border-block: 1px solid rgba(255,255,255,.06);
}

.vm-exchange-hand {
    align-items: center;
    padding: 0 10px;
}

.vm-exchange-card {
    --vm-card-w: clamp(66px, 17vw, 88px);
}

.vm-exchange-summary {
    display: block;
    margin: 0 0 12px;
    color: var(--vm-gold);
    font-size: 11px;
    font-weight: 800;
    text-align: center;
}


@keyframes vm-card-arrive {
    from { opacity: 0; transform: translateY(12px) scale(.94); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes vm-match-flash {
    0% { opacity: 0; transform: scale(1.05); }
    15%, 68% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(.98); }
}

@media (max-width: 720px) {
    

    .vm-app {
        
        gap: 9px;
    }

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

    

    .vm-header-actions {
        grid-column: 2;
        grid-row: 1;
    }

    .vm-icon-button {
        width: 36px;
        height: 36px;
    }

    

    .vm-round-counter,
    .vm-order-badge {
        min-height: 26px;
        padding: 0 8px;
        font-size: 8px;
    }

    .vm-opponents {
        gap: 6px;
    }

    .vm-opponent {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 6px;
        min-height: 60px;
        padding: 7px;
        border-radius: 14px;
    }

    .vm-opponent-portrait-wrap {
        width: 38px;
        height: 38px;
    }

    .vm-opponent-name {
        font-size: 10px;
    }

    .vm-opponent-count,
    .vm-opponent-score {
        font-size: 8px;
    }

    

    .vm-table {
        
        border-radius: 20px;
    }

    .vm-round-info {
        
        gap: 5px;
        
    }

    

    

    

    .vm-pile-shell {
        padding: 12px 10px 78px;
    }

    .vm-pile {
        gap: 6px;
        
    }

    .vm-last-action {
        font-size: 9px;
    }

    .vm-bark {
        
        min-height: 60px;
        padding: 7px 10px 7px 7px;
        border-radius: 13px;
    }

    .vm-bark-portrait-wrap {
        width: 44px;
        height: 44px;
    }

    .vm-bark-copy strong {
        font-size: 10px;
    }

    .vm-bark-copy p {
        font-size: 10px;
    }

    .vm-player {
        padding: 8px;
        border-radius: 17px;
    }

    .vm-player-status {
        grid-template-columns: auto auto minmax(0, 1fr);
        gap: 6px;
        padding-bottom: 7px;
    }

    .vm-player-identity {
        gap: 5px;
    }

    

    .vm-selection-summary {
        font-size: 9px;
    }

    .vm-hand-viewport {
        min-height: calc(var(--vm-card-w) * 1.5 + 20px);
        padding-top: 10px;
    }

    .vm-hand,
    .vm-exchange-hand {
        gap: 0;
        padding-inline: 8px;
    }

    .vm-actions {
        gap: 8px;
        padding-top: 8px;
    }

    .vm-primary-button,
    .vm-secondary-button {
        min-height: 40px;
        font-size: 10px;
    }
}

@media (max-width: 390px) {
    :root {
        --vm-card-w: 64px;
    }

    

    

    .vm-opponent {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .vm-opponent-portrait-wrap {
        width: 34px;
        height: 34px;
    }

    

    

    .vm-player-identity strong {
        font-size: 10px;
    }
}

@media (max-height: 720px) and (orientation: landscape) {
    :root {
        --vm-card-w: clamp(52px, 7.6vw, 68px);
    }

    .vm-app {
        
        
        gap: 8px;
    }

    .vm-header {
        grid-column: 1 / -1;
    }

    .vm-opponents {
        grid-column: 1;
        grid-row: 2;
        grid-template-columns: 1fr;
        align-content: start;
    }

    .vm-table {
        grid-column: 2;
        grid-row: 2;
        min-height: 0;
    }

    .vm-player {
        grid-column: 3;
        grid-row: 2;
        min-width: 0;
    }

    

    .vm-hand {
        display: flex;
        align-items: flex-end;
        justify-content: flex-start;
        width: max-content;
        min-width: 100%;
    }
}

@keyframes vm-turn-pulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.16); }
}


/* Classement Void Match : compteur simplifié et titres de fin */
.vm-opponent-copy {
    justify-content: center;
    gap: 5px;
}

.vm-opponent-count {
    
    font-size: clamp(12px, 1.3vw, 15px);
    font-weight: 750;
    line-height: 1.1;
    letter-spacing: .015em;
}

.vm-opponent-count.is-rank-title {
    
    font-family: Cinzel, Georgia, serif;
    font-size: clamp(11px, 1.2vw, 14px);
    font-weight: 800;
    letter-spacing: .025em;
}


.vm-opponent.is-finished {
    opacity: .72;
}

.vm-player-identity strong {
    
    font-size: clamp(14px, 2vw, 18px);
    line-height: 1;
}

.vm-player-identity strong.is-rank-title {
    
    font-family: Cinzel, Georgia, serif;
    font-size: clamp(13px, 1.8vw, 17px);
    letter-spacing: .025em;
}

@media (max-width: 720px) {
    .vm-opponent-count {
        font-size: 11px;
    }

    .vm-opponent-count.is-rank-title {
        font-size: 9px;
    }

    .vm-player-identity strong {
        font-size: 15px;
    }

    .vm-player-identity strong.is-rank-title {
        font-size: 13px;
    }
}

@media (max-width: 390px) {
    .vm-opponent-count {
        font-size: 10px;
    }

    .vm-opponent-count.is-rank-title {
        font-size: 8px;
        letter-spacing: 0;
    }
}

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

/* Responsive viewport lock — the entire game remains inside the screen. */
html,
body {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: none;
}

body {
    position: fixed;
    inset: 0;
}

.vm-app {
    width: min(100%, 1240px);
    height: 100dvh;
    min-height: 0;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    overflow: hidden;
}

.vm-header,
.vm-opponents,
.vm-table,
.vm-player,
.vm-pile-shell,
.vm-hand-viewport,
.vm-exchange-hand-viewport {
    min-height: 0;
    min-width: 0;
}

.vm-table {
    height: 100%;
    min-height: 0;
}

.vm-pile-shell {
    overflow: hidden;
}

.vm-hand-viewport,
.vm-exchange-hand-viewport {
    overflow: hidden;
    scrollbar-width: none;
}

.vm-hand-viewport::-webkit-scrollbar,
.vm-exchange-hand-viewport::-webkit-scrollbar {
    display: none;
}

.vm-hand,
.vm-exchange-hand {
    width: auto;
    min-width: 0;
    max-width: 100%;
    margin-inline: auto;
    justify-content: flex-start;
}

.vm-hand.is-compact {
    justify-content: flex-start;
}

.vm-card-button {
    flex-shrink: 0;
}

@media (max-width: 720px) {
    :root {
        --vm-card-w: clamp(52px, min(18.5vw, 10dvh), 74px);
    }

    .vm-app {
        grid-template-rows: auto auto minmax(0, 1fr) auto;
    }

    .vm-table {
        min-height: 0;
    }
}

@media (max-height: 820px) and (orientation: portrait) {
    :root {
        --vm-card-w: clamp(50px, min(17vw, 9.2dvh), 68px);
    }

    .vm-app {
        gap: 7px;
        padding-top: max(7px, env(safe-area-inset-top));
        padding-bottom: max(7px, env(safe-area-inset-bottom));
    }

    .vm-header {
        
        padding: 6px 8px;
        border-radius: 16px;
    }

    

    .vm-kicker {
        margin-bottom: 2px;
        font-size: 7px;
    }

    

    .vm-icon-button {
        width: 32px;
        height: 32px;
    }

    .vm-round-counter,
    .vm-order-badge {
        min-height: 23px;
        font-size: 7px;
    }

    .vm-opponent {
        min-height: 48px;
        padding: 5px;
    }

    .vm-opponent-portrait-wrap {
        width: 32px;
        height: 32px;
    }

    .vm-opponent-name {
        font-size: 9px;
    }

    .vm-opponent-count,
    .vm-opponent-score {
        font-size: 7px;
    }

    .vm-round-info {
        padding: 6px 8px;
    }

    .vm-round-label {
        min-height: 26px;
        padding-inline: 9px;
    }

    .vm-pile-shell {
        gap: 6px;
        padding: 7px 8px 62px;
    }

    

    .vm-last-action {
        min-height: 16px;
        padding: 4px 9px;
        font-size: 8px;
    }

    .vm-player {
        padding: 6px;
        border-radius: 15px;
    }

    .vm-player-status {
        padding-bottom: 4px;
    }

    .vm-hand-viewport {
        
        padding: 8px 0 3px;
    }

    .vm-card-button.is-selected {
        transform: translateY(-9px);
    }

    .vm-actions {
        gap: 6px;
        padding-top: 5px;
    }

    .vm-primary-button,
    .vm-secondary-button {
        min-height: 34px;
        font-size: 9px;
    }
}

@media (max-height: 680px) and (orientation: portrait) {
    :root {
        --vm-card-w: clamp(46px, min(16vw, 8.5dvh), 58px);
    }

    .vm-app {
        gap: 5px;
    }

    

    .vm-opponents {
        gap: 4px;
    }

    .vm-opponent {
        min-height: 42px;
        grid-template-columns: 28px minmax(0, 1fr);
        gap: 4px;
        padding: 4px;
    }

    .vm-opponent-portrait-wrap {
        width: 28px;
        height: 28px;
    }

    

    .vm-round-info {
        padding: 4px 7px;
    }

    

    .vm-pile-shell {
        padding-bottom: 54px;
    }

    .vm-bark {
        min-height: 48px;
    }

    .vm-bark-portrait-wrap {
        width: 36px;
        height: 36px;
    }

    .vm-player-status {
        display: none;
    }

    .vm-hand-viewport {
        border-top: 0;
    }
}

@media (max-height: 720px) and (orientation: landscape) {
    html,
    body,
    .vm-app {
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
    }

    .vm-app {
        grid-template-columns: minmax(170px, 22vw) minmax(0, 1fr) minmax(230px, 30vw);
        grid-template-rows: auto minmax(0, 1fr);
    }

    .vm-opponents,
    .vm-table,
    .vm-player {
        min-height: 0;
        overflow: hidden;
    }

    .vm-hand-viewport {
        max-height: none;
    }
}


/* V1.5.2 — dialogue flottant et cartes à tailles indépendantes */
.vm-round-info {
    grid-template-columns: auto minmax(0, 1fr);
}


.vm-bark {
    position: absolute;
    top: clamp(78px, 11dvh, 118px);
    bottom: auto;
    z-index: 30;
    width: min(calc(100% - 28px), 650px);
    
}

.vm-pile-card {
    width: clamp(104px, min(22vw, 19dvh), 142px);
    flex-basis: clamp(104px, min(22vw, 19dvh), 142px);
}

.vm-pile {
    min-height: clamp(168px, 30dvh, 224px);
}


.vm-hand .vm-card-button {
    width: var(--vm-hand-card-w);
    flex-basis: var(--vm-hand-card-w);
    margin-left: calc(var(--vm-hand-step) - var(--vm-hand-card-w));
}


@media (max-width: 720px) {
    .vm-round-info {
        grid-template-columns: auto minmax(0, 1fr);
    }

    

    .vm-bark {
        top: clamp(92px, 14dvh, 130px);
        width: calc(100% - 20px);
    }

    .vm-pile-card {
        width: clamp(96px, min(27vw, 18dvh), 128px);
        flex-basis: clamp(96px, min(27vw, 18dvh), 128px);
    }

    .vm-pile {
        min-height: clamp(150px, 26dvh, 200px);
    }
}

@media (max-height: 820px) and (orientation: portrait) {
    .vm-bark {
        top: clamp(82px, 13dvh, 112px);
    }

    .vm-pile-card {
        width: clamp(88px, min(25vw, 16dvh), 116px);
        flex-basis: clamp(88px, min(25vw, 16dvh), 116px);
    }

    .vm-pile {
        min-height: clamp(138px, 23dvh, 178px);
    }

    .vm-hand-viewport {
        min-height: calc(var(--vm-hand-card-w) * 1.5 + 18px);
    }
}

@media (max-height: 680px) and (orientation: portrait) {
    .vm-bark {
        top: 70px;
    }

    .vm-pile-card {
        width: clamp(78px, min(23vw, 15dvh), 102px);
        flex-basis: clamp(78px, min(23vw, 15dvh), 102px);
    }

    .vm-pile {
        min-height: clamp(122px, 21dvh, 158px);
    }
}

@media (max-height: 720px) and (orientation: landscape) {
    .vm-bark {
        top: 62px;
        left: calc(min(22vw, 238px) + 50%);
        width: min(48vw, 520px);
    }

    .vm-pile-card {
        width: clamp(78px, min(10vw, 20dvh), 112px);
        flex-basis: clamp(78px, min(10vw, 20dvh), 112px);
    }
}

/* V1.5.5 — centrage absolu du groupe de cartes dans la main */
.vm-hand {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.vm-hand.is-fanned {
    position: relative;
    display: block;
    height: calc(var(--vm-hand-card-w) * 1.5);
}

.vm-hand.is-fanned .vm-card-button {
    position: absolute;
    left: var(--vm-card-left, 0px);
    bottom: 0;
    margin-left: 0 !important;
}

/* V1.5.6 — menu, règles et simplification visuelle */


.vm-header-title {
    
    z-index: 1;
    
    
    
    
    
    
    
    
    white-space: nowrap;
    
}


.vm-header-actions {
    
    top: 50%;
    right: 14px;
    z-index: 3;
    
}


.vm-menu-screen,
.vm-rules-screen {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 24%, rgba(91, 116, 184, .2), transparent 34%),
        radial-gradient(circle at 50% 78%, rgba(222, 192, 106, .08), transparent 34%),
        rgba(3, 6, 13, .94);
    backdrop-filter: blur(16px);
    transition: opacity .25s ease, visibility .25s ease;
}

.vm-menu-screen.is-visible,
.vm-rules-screen.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


.vm-menu-panel::before {
    content: "";
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(255,255,255,.045);
    border-radius: 22px;
    pointer-events: none;
}


.vm-menu-panel h1 {
    position: relative;
    margin: 0;
    color: #fff;
    font-family: Cinzel, Georgia, serif;
    font-size: clamp(34px, 10vw, 58px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: .075em;
    text-shadow: 0 5px 24px rgba(0,0,0,.42);
}

.vm-menu-panel > p {
    position: relative;
    max-width: 410px;
    margin: 20px auto 30px;
    color: #b8c2d7;
    font-size: clamp(12px, 3.2vw, 15px);
    line-height: 1.55;
}

.vm-menu-actions {
    position: relative;
    
    
}

.vm-menu-actions .vm-primary-button,
.vm-menu-actions .vm-secondary-button {
    width: 100%;
    min-height: 52px;
}


.vm-rules-content {
    min-height: 0;
    padding: 22px 24px max(24px, env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    
    
}

.vm-rules-content article {
    padding: 0 0 18px;
    margin: 0 0 18px;
    border-bottom: 1px solid rgba(255,255,255,.065);
}

.vm-rules-content article:last-of-type {
    margin-bottom: 22px;
}

.vm-rules-content h3 {
    margin: 0 0 8px;
    color: #f0d77f;
    font-family: Cinzel, Georgia, serif;
    font-size: 14px;
    letter-spacing: .045em;
}

.vm-rules-content p {
    margin: 0;
    color: #c5ccda;
    font-size: 13px;
    line-height: 1.62;
}

.vm-rules-content p + p {
    margin-top: 9px;
}

.vm-rules-back {
    width: 100%;
    min-height: 48px;
}

@media (max-width: 720px) {
    .vm-header {
        
        gap: 8px;
        
    }

    

    .vm-header-actions {
        right: 9px;
        
    }

    .vm-menu-screen,
    .vm-rules-screen {
        padding-inline: 12px;
    }

    .vm-menu-panel {
        border-radius: 24px;
    }

    

    

    .vm-rules-content {
        padding: 18px 16px max(20px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 390px) {
    .vm-header {
        padding-inline: 80px;
    }

    .vm-header-title {
        
        letter-spacing: .045em;
    }

    .vm-header-actions .vm-icon-button {
        width: 34px;
        height: 34px;
    }
}

@media (max-height: 820px) and (orientation: portrait) {
    .vm-header {
        min-height: 72px;
        gap: 5px;
        padding-block: 7px;
    }

    .vm-header-title {
        font-size: 22px;
    }

    
}

@media (max-height: 680px) and (orientation: portrait) {
    

    

    .vm-header-actions {
        top: 50%;
    }
}

/* Mise en évidence lorsque le joueur ne peut effectuer aucun coup. */
.vm-actions.is-forced-pass {
    grid-template-columns: 1fr;
}

.vm-actions.is-forced-pass #vm-play {
    display: none;
}

.vm-secondary-button.is-forced-pass {
    
    
    
    
    animation: vm-forced-pass-pulse 1.05s ease-in-out infinite;
}

.vm-secondary-button.is-forced-pass:not(:disabled):hover {
    border-color: #fff0b2;
    background: linear-gradient(180deg, #ffe9a2, #e0ae36);
}

@keyframes vm-forced-pass-pulse {
    0%, 100% {
        filter: brightness(1);
        transform: translateY(0);
    }
    50% {
        filter: brightness(1.12);
        transform: translateY(-1px);
    }
}


/* V1.5.8 — joueurs couchés, header compact et main agrandie */
.vm-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 58px;
    padding: 8px 10px 8px 16px;
}

.vm-header-title {
    
    
    text-align: left;
}

.vm-header-actions {
    position: static;
    display: flex;
    align-items: center;
    gap: 8px;
    transform: none;
}

.vm-round-counter {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    
    
    
    font-family: Cinzel, Georgia, serif;
    font-size: 13px;
    letter-spacing: .02em;
}


.vm-round-info {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    
}

.vm-round-label {
    
    padding-inline: 13px;
}


.vm-opponent.is-folded:not(.is-finished)::after {
    opacity: .08;
}

.vm-opponent.is-folded .vm-opponent-count {
    
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.vm-hand-viewport {
    min-height: calc(var(--vm-hand-card-w) * 1.5 + 20px);
    padding-top: 10px;
}

@media (max-width: 720px) {
    .vm-header {
        min-height: 52px;
        padding: 6px 8px 6px 12px;
    }

    .vm-header-title {
        
        letter-spacing: .055em;
    }

    

    .vm-round-counter,
    .vm-header-actions .vm-icon-button {
        width: 36px;
        min-width: 36px;
        height: 36px;
        min-height: 36px;
    }

    .vm-round-counter {
        font-size: 11px;
    }

    .vm-round-info {
        min-height: 32px;
        padding: 3px 8px;
    }

    .vm-round-label {
        min-height: 25px;
        font-size: 8px;
    }
}

@media (max-width: 390px) {
    .vm-header-title {
        font-size: 20px;
    }

    .vm-round-counter,
    .vm-header-actions .vm-icon-button {
        width: 34px;
        min-width: 34px;
        height: 34px;
        min-height: 34px;
    }
}

@media (max-height: 680px) and (orientation: portrait) {
    .vm-header {
        min-height: 44px;
        padding-block: 4px;
    }

    .vm-header-title {
        font-size: 18px;
    }

    .vm-round-counter,
    .vm-header-actions .vm-icon-button {
        width: 31px;
        min-width: 31px;
        height: 31px;
        min-height: 31px;
    }

    .vm-round-info {
        min-height: 27px;
        padding-block: 2px;
    }

    .vm-round-label {
        min-height: 22px;
    }
}

/* V1.5.9 — plateau compact, main agrandie et transferts du Void Match */
.vm-player {
    --vm-hand-card-w: 76px;
}

.vm-transfer-targets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 8px;
    margin: 4px 0 12px;
}

.vm-transfer-target {
    min-width: 0;
    min-height: 54px;
    padding: 8px 10px;
    border: 1px solid rgba(225, 233, 248, .14);
    border-radius: 13px;
    
    
    
    cursor: pointer;
}

.vm-transfer-target strong,
.vm-transfer-target span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vm-transfer-target strong {
    color: #fff;
    font-family: Cinzel, Georgia, serif;
    font-size: 12px;
}

.vm-transfer-target span {
    margin-top: 3px;
    color: var(--vm-muted);
    font-size: 9px;
}


.vm-exchange-card:disabled {
    cursor: not-allowed;
}

.vm-receive-panel {
    width: min(100%, 520px);
    text-align: center;
}

.vm-receive-cards {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 184px;
    margin: 8px 0 20px;
}

.vm-receive-card {
    position: relative;
    width: clamp(100px, 25vw, 126px);
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border: 1px solid rgba(242,215,127,.42);
    border-radius: var(--vm-card-radius);
    background: #080a10;
    box-shadow: 0 18px 36px rgba(0,0,0,.48), 0 0 0 2px rgba(222,192,106,.08);
}

@media (max-width: 720px) and (orientation: portrait) {
    .vm-transfer-targets {
        grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
        gap: 6px;
    }

    .vm-transfer-target {
        min-height: 48px;
        padding: 6px;
    }

    .vm-receive-cards {
        min-height: 160px;
    }
}

@media (max-height: 680px) and (orientation: portrait) {
    .vm-receive-card {
        width: clamp(86px, 23vw, 106px);
    }
}

/* V1.6.2 — correction des débordements de cartes sur desktop uniquement */
@media (min-width: 721px) {
    .vm-pile-shell {
        
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .vm-pile {
        position: relative;
        z-index: 3;
        
    }

    .vm-hand-viewport {
        position: relative;
        z-index: 4;
        overflow: visible;
        padding-top: 22px;
    }

    .vm-hand {
        position: relative;
        z-index: 5;
    }

    .vm-hand .vm-card-button.is-selected {
        z-index: 500 !important;
        transform: translateY(-20px);
    }
}

/* V1.6.3 — menu principal illustré */
.vm-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.vm-menu-screen {
    place-items: stretch;
    padding: 0;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(2, 3, 8, .26) 0%, rgba(2, 3, 8, .08) 40%, rgba(2, 3, 8, 0) 68%),
        url("background.webp") center center / cover no-repeat;
    backdrop-filter: none;
}

.vm-menu-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(0,0,0,.08), transparent 24%, transparent 72%, rgba(0,0,0,.18)),
        radial-gradient(circle at 18% 48%, rgba(3,5,11,.14), transparent 36%);
}

.vm-menu-panel {
    position: absolute;
    top: 50%;
    left: clamp(42px, 9vw, 170px);
    z-index: 1;
    
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    
    transform: translateY(-50%);
}

.vm-menu-panel::before,
.vm-menu-symbol,
.vm-menu-panel > p {
    display: none;
}

.vm-menu-actions {
    display: grid;
    
}

.vm-menu-button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: clamp(56px, 4.8vw, 72px);
    padding: 0 clamp(22px, 2.2vw, 34px);
    overflow: hidden;
    border: 1px solid rgba(224, 195, 112, .32);
    border-left: 4px solid rgba(224, 195, 112, .92);
    border-radius: 5px 18px 18px 5px;
    color: #f2ead4;
    background:
        linear-gradient(90deg, hsl(calc(257.1deg + var(--vm-theme-hue-shift)) max(0%, calc(28% - var(--vm-theme-desaturate))) 4.9% / .93), rgba(13, 14, 25, .78) 70%, hsl(calc(252deg + var(--vm-theme-hue-shift)) max(0%, calc(26.3% - var(--vm-theme-desaturate))) 7.5% / .48)),
        linear-gradient(180deg, rgba(255,255,255,.05), transparent 48%);
    box-shadow: 0 16px 34px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.04);
    font-family: Cinzel, Georgia, serif;
    font-size: clamp(15px, 1.45vw, 21px);
    font-weight: 700;
    letter-spacing: .11em;
    text-align: left;
    text-shadow: 0 2px 12px rgba(0,0,0,.7);
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}

.vm-menu-button::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 38%;
    background: linear-gradient(90deg, rgba(222,192,106,.1), transparent);
    opacity: .55;
    pointer-events: none;
}

.vm-menu-button::after {
    content: "◆";
    position: absolute;
    right: 20px;
    color: rgba(222,192,106,.5);
    font-size: .72em;
    transform: rotate(45deg);
    transition: color .2s ease, transform .2s ease;
}

.vm-menu-button span {
    position: relative;
    z-index: 1;
}

.vm-menu-actions a.vm-menu-button {
    text-decoration: none;
}

.vm-menu-button:hover,
.vm-menu-button:focus-visible {
    border-color: rgba(241, 216, 139, .72);
    color: #fff8df;
    background:
        linear-gradient(90deg, rgba(41, 28, 12, .94), hsl(calc(262.5deg + var(--vm-theme-hue-shift)) max(0%, calc(17.4% - var(--vm-theme-desaturate))) 9% / .82) 72%, hsl(calc(260deg + var(--vm-theme-hue-shift)) max(0%, calc(23.1% - var(--vm-theme-desaturate))) 7.6% / .55)),
        linear-gradient(180deg, rgba(255,255,255,.08), transparent 48%);
    box-shadow: 0 18px 40px rgba(0,0,0,.4), 0 0 24px rgba(222,192,106,.09), inset 0 1px 0 rgba(255,255,255,.06);
    transform: translateX(10px);
}

.vm-menu-button:hover::after,
.vm-menu-button:focus-visible::after {
    color: #f1d77f;
    
}

.vm-menu-button.is-primary {
    border-color: rgba(241, 216, 139, .62);
    border-left-color: #f1d77f;
    
    
    
}


.vm-menu-button.is-primary::after {
    color: rgba(28, 18, 5, .72);
}

.vm-menu-button.is-primary:hover,
.vm-menu-button.is-primary:focus-visible {
    color: #110b04;
    background:
        linear-gradient(90deg, #f5dc8d, #d6a43b 72%, #7d5716),
        linear-gradient(180deg, rgba(255,255,255,.28), transparent 45%);
}

.vm-menu-subscreen {
    position: fixed;
    inset: 0;
    z-index: 105;
    display: grid;
    place-items: center;
    padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(1,2,6,.88), rgba(3,4,9,.74)),
        url("background.webp") center center / cover no-repeat;
    transition: opacity .22s ease, visibility .22s ease;
}

.vm-menu-subscreen.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.vm-menu-modal {
    width: min(100%, 620px);
    overflow: hidden;
    border: 1px solid rgba(222,192,106,.34);
    border-radius: 24px;
    background:
        radial-gradient(circle at 50% 0%, rgba(222,192,106,.11), transparent 34%),
        linear-gradient(180deg, rgba(16,20,32,.97), rgba(6,8,14,.985));
    box-shadow: 0 30px 90px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.05);
}


.vm-option-row strong,
.vm-credit-block strong {
    color: #f0d77f;
    font-family: Cinzel, Georgia, serif;
    font-size: 12px;
    letter-spacing: .08em;
}

.vm-option-row span,
.vm-credit-block span {
    color: #b9c2d4;
    font-size: 12px;
    line-height: 1.45;
}

.vm-option-toggle,
.vm-option-soon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 102px;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid rgba(222,192,106,.38);
    border-radius: 999px;
    color: #191207;
    background: linear-gradient(180deg, #f0d67f, #c5922b);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .1em;
}

.vm-option-toggle {
    cursor: pointer;
}

.vm-option-toggle.is-muted {
    color: #c7cedc;
    border-color: rgba(220,228,244,.14);
    background: rgba(255,255,255,.045);
}


.vm-menu-back {
    width: 100%;
    min-height: 48px;
    margin-top: 6px;
}

.vm-credit-block {
    display: grid;
    gap: 7px;
    padding: 16px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 14px;
    background: rgba(255,255,255,.03);
    text-align: center;
}

.vm-credit-block span {
    color: #e1e5ed;
}

@media (max-width: 720px) {
    .vm-menu-screen {
        background:
            linear-gradient(180deg, rgba(2,3,8,.12), rgba(2,3,8,.02) 50%, rgba(2,3,8,.1)),
            url("background_mobile.webp") center center / cover no-repeat;
    }

    .vm-menu-screen::after {
        background:
            linear-gradient(180deg, rgba(0,0,0,.03), transparent 48%, rgba(0,0,0,.1)),
            radial-gradient(circle at 24% 28%, rgba(2,3,8,.12), transparent 38%);
    }

    .vm-menu-panel {
        
        left: max(22px, env(safe-area-inset-left));
        
        transform: none;
    }

    

    .vm-menu-button {
        min-height: clamp(48px, 7.1dvh, 60px);
        padding-inline: 20px 42px;
        border-radius: 4px 15px 15px 4px;
        font-size: clamp(12px, 3.7vw, 16px);
    }

    .vm-menu-button::after {
        right: 16px;
    }

    .vm-menu-subscreen {
        background:
            linear-gradient(180deg, rgba(1,2,6,.88), rgba(3,4,9,.76)),
            url("background_mobile.webp") center center / cover no-repeat;
    }

    .vm-menu-modal {
        border-radius: 20px;
    }

    

    

    

    .vm-option-toggle,
    .vm-option-soon {
        justify-self: stretch;
    }
}

@media (max-height: 700px) and (orientation: portrait) {
    

    .vm-menu-button {
        min-height: 44px;
    }
}

@media (max-height: 720px) and (orientation: landscape) {
    .vm-menu-panel {
        left: clamp(28px, 6vw, 90px);
        
    }

    .vm-menu-actions {
        gap: 7px;
    }

    .vm-menu-button {
        min-height: 44px;
        font-size: 13px;
    }
}

/* V1.6.4 — menu principal plus discret et fondu */


.vm-menu-panel::after {
    content: "";
    position: absolute;
    
    z-index: -1;
    pointer-events: none;
    
    
}


.vm-menu-button,
.vm-menu-button.is-primary {
    
    
    
    
    border-bottom: 1px solid rgba(221, 195, 119, .17);
    
    
    
    
    
    
    
    
    
}

.vm-menu-button::before,
.vm-menu-button.is-primary::before {
    
    bottom: auto;
    
    
    
    
    
    
    
}

.vm-menu-button::after,
.vm-menu-button.is-primary::after {
    
    
    
    
    color: transparent;
    
    
}


.vm-menu-button.is-primary::before {
    border-color: rgba(246, 222, 145, .9);
    
    
}

.vm-menu-button:hover,
.vm-menu-button:focus-visible,
.vm-menu-button.is-primary:hover,
.vm-menu-button.is-primary:focus-visible {
    border-color: rgba(241, 216, 139, .36);
    
    
    
    
}

.vm-menu-button:hover::before,
.vm-menu-button:focus-visible::before {
    border-color: #f1d77f;
    background: rgba(241, 215, 127, .58);
    box-shadow: 0 0 12px rgba(222, 192, 106, .32);
}

.vm-menu-button:hover::after,
.vm-menu-button:focus-visible::after {
    background: linear-gradient(90deg, rgba(241, 215, 127, .52), transparent);
    transform: none;
}

@media (max-width: 720px) {
    

    

    

    .vm-menu-button,
    .vm-menu-button.is-primary {
        
        
        border-radius: 0;
        
        background: linear-gradient(90deg, rgba(7, 7, 13, .46), rgba(8, 8, 15, .1) 76%, transparent);
        backdrop-filter: blur(1px);
    }

    .vm-menu-button.is-primary {
        background: linear-gradient(90deg, rgba(79, 55, 15, .34), hsl(calc(260deg + var(--vm-theme-hue-shift)) max(0%, calc(23.1% - var(--vm-theme-desaturate))) 5.1% / .11) 78%, transparent);
    }
}

@media (max-height: 700px) and (orientation: portrait) {
    .vm-menu-panel {
        top: max(13%, calc(env(safe-area-inset-top) + 42px));
    }

    
}


/* V1.6.5 — menu typographique simple, violet et intégré */
.vm-menu-panel {
    width: clamp(240px, 20vw, 330px);
}

.vm-menu-panel::after {
    inset: -32px -46px;
    background: radial-gradient(ellipse at 20% 50%, hsl(calc(255deg + var(--vm-theme-hue-shift)) max(0%, calc(66.7% - var(--vm-theme-desaturate))) 2.4% / .34), hsl(calc(255deg + var(--vm-theme-hue-shift)) max(0%, calc(66.7% - var(--vm-theme-desaturate))) 2.4% / .1) 52%, transparent 76%);
    filter: blur(12px);
}

.vm-menu-actions {
    gap: clamp(6px, .65vw, 10px);
}

.vm-menu-button,
.vm-menu-button.is-primary {
    
    
    overflow: visible;
    
    
    
    
    
    backdrop-filter: none;
    font-size: clamp(14px, 1.12vw, 18px);
    font-weight: 600;
    letter-spacing: .14em;
    
    transition: color .2s ease, text-shadow .2s ease, transform .2s ease;
}

.vm-menu-button::before,
.vm-menu-button.is-primary::before {
    content: "";
    position: absolute;
    top: 50%;
    
    
    
    
    
    opacity: .58;
    
    
    
    transition: height .2s ease, opacity .2s ease, background .2s ease, box-shadow .2s ease;
}

.vm-menu-button::after,
.vm-menu-button.is-primary::after {
    content: "";
    position: absolute;
    
    
    
    
    
    
    
    transform: scaleX(.34);
    transform-origin: left center;
    transition: opacity .2s ease, transform .24s ease, background .2s ease;
}

.vm-menu-button.is-primary {
    
    font-weight: 700;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .9), 0 0 16px hsl(calc(267.5deg + var(--vm-theme-hue-shift)) max(0%, calc(62.4% - var(--vm-theme-desaturate))) 58.2% / .24);
}

.vm-menu-button.is-primary::before {
    height: 22px;
    opacity: .9;
    background: linear-gradient(180deg, transparent, hsl(calc(268.2deg + var(--vm-theme-hue-shift)) max(0%, calc(81.7% - var(--vm-theme-desaturate))) 67.8%), transparent);
    box-shadow: 0 0 14px hsl(calc(267.8deg + var(--vm-theme-hue-shift)) max(0%, calc(68% - var(--vm-theme-desaturate))) 60.8% / .48);
}

.vm-menu-button.is-primary::after {
    opacity: .58;
    transform: scaleX(.68);
}

.vm-menu-button:hover,
.vm-menu-button:focus-visible,
.vm-menu-button.is-primary:hover,
.vm-menu-button.is-primary:focus-visible {
    
    
    box-shadow: none;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .92), 0 0 18px hsl(calc(268.7deg + var(--vm-theme-hue-shift)) max(0%, calc(78.7% - var(--vm-theme-desaturate))) 65.1% / .5);
    
}

.vm-menu-button:hover::before,
.vm-menu-button:focus-visible::before,
.vm-menu-button.is-primary:hover::before,
.vm-menu-button.is-primary:focus-visible::before {
    height: 28px;
    opacity: 1;
    
    
}

.vm-menu-button:hover::after,
.vm-menu-button:focus-visible::after,
.vm-menu-button.is-primary:hover::after,
.vm-menu-button.is-primary:focus-visible::after {
    opacity: .95;
    
    transform: scaleX(1);
}

@media (max-width: 720px) {
    .vm-menu-panel {
        top: max(16%, calc(env(safe-area-inset-top) + 58px));
        width: min(66vw, 300px);
    }

    .vm-menu-panel::after {
        inset: -28px -32px;
        background: radial-gradient(ellipse at 14% 48%, hsl(calc(255deg + var(--vm-theme-hue-shift)) max(0%, calc(80% - var(--vm-theme-desaturate))) 2% / .42), hsl(calc(255deg + var(--vm-theme-hue-shift)) max(0%, calc(80% - var(--vm-theme-desaturate))) 2% / .12) 54%, transparent 78%);
    }

    .vm-menu-actions {
        gap: 5px;
    }

    .vm-menu-button,
    .vm-menu-button.is-primary {
        
        
        font-size: clamp(12px, 3.25vw, 15px);
        letter-spacing: .12em;
    }

    
}

@media (max-height: 700px) and (orientation: portrait) {
    .vm-menu-button,
    .vm-menu-button.is-primary {
        min-height: 39px;
    }
}

@media (max-height: 720px) and (orientation: landscape) {
    .vm-menu-panel {
        width: min(28vw, 290px);
    }

    .vm-menu-button,
    .vm-menu-button.is-primary {
        min-height: 38px;
        font-size: 12px;
    }
}

/* V1.6.6 — direction artistique du jeu alignée sur le menu violet */
:root {
    --vm-bg: hsl(calc(257.1deg + var(--vm-theme-hue-shift)) max(0%, calc(53.8% - var(--vm-theme-desaturate))) 2.5%);
    
    
    
    
    
    
    --vm-text: hsl(calc(267.3deg + var(--vm-theme-hue-shift)) max(0%, calc(47.8% - var(--vm-theme-desaturate))) 95.5%);
    --vm-muted: hsl(calc(265deg + var(--vm-theme-hue-shift)) max(0%, calc(14.5% - var(--vm-theme-desaturate))) 67.5%);
    --vm-gold: #c8aa67;
}


.vm-header {
    border-color: hsl(calc(270.5deg + var(--vm-theme-hue-shift)) max(0%, calc(62.2% - var(--vm-theme-desaturate))) 61.6% / .2);
    
    
    
}


.vm-round-counter {
    border-color: hsl(calc(271.7deg + var(--vm-theme-hue-shift)) max(0%, calc(63.8% - var(--vm-theme-desaturate))) 61% / .34);
    
    background: hsl(calc(270.7deg + var(--vm-theme-hue-shift)) max(0%, calc(47.1% - var(--vm-theme-desaturate))) 17.1% / .24);
    
}

.vm-round-counter.is-revolution {
    border-color: hsl(calc(272.3deg + var(--vm-theme-hue-shift)) max(0%, calc(85.7% - var(--vm-theme-desaturate))) 69.8% / .7);
    color: hsl(calc(272.4deg + var(--vm-theme-hue-shift)) max(0%, calc(83.3% - var(--vm-theme-desaturate))) 88.2%);
    background: hsl(calc(272.7deg + var(--vm-theme-hue-shift)) max(0%, calc(51.7% - var(--vm-theme-desaturate))) 34.1% / .28);
    box-shadow: 0 0 20px hsl(calc(273.5deg + var(--vm-theme-hue-shift)) max(0%, calc(65.7% - var(--vm-theme-desaturate))) 58.8% / .2);
}

.vm-icon-button {
    border-color: hsl(calc(271.6deg + var(--vm-theme-hue-shift)) max(0%, calc(62.5% - var(--vm-theme-desaturate))) 65.5% / .2);
    color: hsl(calc(268.2deg + var(--vm-theme-hue-shift)) max(0%, calc(36.2% - var(--vm-theme-desaturate))) 90.8%);
    background: hsl(calc(261.8deg + var(--vm-theme-hue-shift)) max(0%, calc(40.7% - var(--vm-theme-desaturate))) 5.3% / .5);
    
}

.vm-icon-button:hover,
.vm-icon-button:focus-visible {
    border-color: hsl(calc(272.3deg + var(--vm-theme-hue-shift)) max(0%, calc(85.7% - var(--vm-theme-desaturate))) 69.8% / .58);
    
    
    
}

.vm-opponent {
    border-color: hsl(calc(270.5deg + var(--vm-theme-hue-shift)) max(0%, calc(50.9% - var(--vm-theme-desaturate))) 56.9% / .16);
    
    
}


.vm-opponent.is-active {
    border-color: hsl(calc(271.8deg + var(--vm-theme-hue-shift)) max(0%, calc(83.5% - var(--vm-theme-desaturate))) 69% / .72);
    
    
}

.vm-opponent.is-active .vm-opponent-portrait-wrap {
    border-color: hsl(calc(272.9deg + var(--vm-theme-hue-shift)) max(0%, calc(88.7% - var(--vm-theme-desaturate))) 72.2% / .82);
    
}


.vm-opponent-portrait-wrap,
.vm-bark-portrait-wrap {
    border-color: hsl(calc(271.8deg + var(--vm-theme-hue-shift)) max(0%, calc(59.8% - var(--vm-theme-desaturate))) 61% / .34);
    background: hsl(calc(256.4deg + var(--vm-theme-hue-shift)) max(0%, calc(47.8% - var(--vm-theme-desaturate))) 4.5%);
}

.vm-turn-indicator {
    border-color: hsl(calc(260deg + var(--vm-theme-hue-shift)) max(0%, calc(47.4% - var(--vm-theme-desaturate))) 3.7%);
}

.vm-opponent.is-active .vm-turn-indicator {
    background: hsl(calc(270deg + var(--vm-theme-hue-shift)) max(0%, calc(75% - var(--vm-theme-desaturate))) 67.1%);
    box-shadow: 0 0 12px hsl(calc(272deg + var(--vm-theme-hue-shift)) max(0%, calc(79.9% - var(--vm-theme-desaturate))) 66.9% / .75);
}

.vm-opponent-name {
    color: hsl(calc(273.3deg + var(--vm-theme-hue-shift)) max(0%, calc(33.3% - var(--vm-theme-desaturate))) 94.7%);
    text-shadow: 0 1px 10px rgba(0,0,0,.45);
}


.vm-opponent-count.is-rank-title {
    
    text-shadow: 0 0 14px hsl(calc(272.3deg + var(--vm-theme-hue-shift)) max(0%, calc(58.7% - var(--vm-theme-desaturate))) 57.3% / .18);
}

.vm-opponent.is-folded:not(.is-finished) {
    border-color: hsl(calc(272.5deg + var(--vm-theme-hue-shift)) max(0%, calc(26.9% - var(--vm-theme-desaturate))) 42.9% / .1);
    
}

.vm-opponent.is-folded .vm-opponent-count {
    color: hsl(calc(274.5deg + var(--vm-theme-hue-shift)) max(0%, calc(14.3% - var(--vm-theme-desaturate))) 54.7%);
}


.vm-round-info {
    border-bottom-color: hsl(calc(271.3deg + var(--vm-theme-hue-shift)) max(0%, calc(55.3% - var(--vm-theme-desaturate))) 57.8% / .13);
    
    
}

.vm-round-label {
    border-color: hsl(calc(272deg + var(--vm-theme-hue-shift)) max(0%, calc(57.7% - var(--vm-theme-desaturate))) 59.2% / .26);
    
    
    
}

.vm-round-label.is-human-turn {
    color: hsl(calc(271.8deg + var(--vm-theme-hue-shift)) max(0%, calc(54.8% - var(--vm-theme-desaturate))) 93.9%);
    border-color: hsl(calc(273.1deg + var(--vm-theme-hue-shift)) max(0%, calc(86.4% - var(--vm-theme-desaturate))) 71.2% / .62);
    background: hsl(calc(272.6deg + var(--vm-theme-hue-shift)) max(0%, calc(50.7% - var(--vm-theme-desaturate))) 27.1% / .34);
    box-shadow:
        0 0 0 1px hsl(calc(272.7deg + var(--vm-theme-hue-shift)) max(0%, calc(69.5% - var(--vm-theme-desaturate))) 62.7% / .1),
        0 0 18px hsl(calc(273.1deg + var(--vm-theme-hue-shift)) max(0%, calc(62.4% - var(--vm-theme-desaturate))) 57.3% / .19);
}

.vm-round-label.is-ai-turn {
    color: hsl(calc(271.4deg + var(--vm-theme-hue-shift)) max(0%, calc(52.4% - var(--vm-theme-desaturate))) 83.5%);
    border-color: hsl(calc(272.2deg + var(--vm-theme-hue-shift)) max(0%, calc(64.8% - var(--vm-theme-desaturate))) 62.2% / .42);
    background: hsl(calc(272.4deg + var(--vm-theme-hue-shift)) max(0%, calc(50.7% - var(--vm-theme-desaturate))) 14.3% / .32);
    box-shadow: 0 0 15px hsl(calc(273.3deg + var(--vm-theme-hue-shift)) max(0%, calc(53.8% - var(--vm-theme-desaturate))) 53.3% / .1);
}


.vm-pile-empty {
    color: #867b91;
}

.vm-void-mark {
    color: hsl(calc(272.1deg + var(--vm-theme-hue-shift)) max(0%, calc(73.4% - var(--vm-theme-desaturate))) 66.1% / .62);
    text-shadow: 0 0 18px hsl(calc(273.8deg + var(--vm-theme-hue-shift)) max(0%, calc(63.6% - var(--vm-theme-desaturate))) 59% / .25);
}


.vm-last-action {
    border-color: hsl(calc(271.1deg + var(--vm-theme-hue-shift)) max(0%, calc(49.1% - var(--vm-theme-desaturate))) 56.1% / .13);
    
    
    box-shadow: none;
}

.vm-bark {
    border-color: hsl(calc(272deg + var(--vm-theme-hue-shift)) max(0%, calc(64.2% - var(--vm-theme-desaturate))) 62.7% / .32);
    
    
}


.vm-bark-copy p {
    color: hsl(calc(276deg + var(--vm-theme-hue-shift)) max(0%, calc(27.8% - var(--vm-theme-desaturate))) 92.9%);
}


.vm-player {
    border-color: hsl(calc(271deg + var(--vm-theme-hue-shift)) max(0%, calc(54.7% - var(--vm-theme-desaturate))) 58.4% / .18);
    
    
}


.vm-player.is-active {
    border-color: hsl(calc(273.2deg + var(--vm-theme-hue-shift)) max(0%, calc(83.3% - var(--vm-theme-desaturate))) 69.4% / .64);
    
}


.vm-player-identity strong {
    color: hsl(calc(276deg + var(--vm-theme-hue-shift)) max(0%, calc(33.3% - var(--vm-theme-desaturate))) 94.1%);
}

.vm-player-identity strong.is-rank-title {
    color: hsl(calc(275.5deg + var(--vm-theme-hue-shift)) max(0%, calc(65.1% - var(--vm-theme-desaturate))) 78.6%);
}

.vm-selection-summary {
    color: hsl(calc(268.7deg + var(--vm-theme-hue-shift)) max(0%, calc(11.9% - var(--vm-theme-desaturate))) 62.2%);
}

.vm-hand-viewport {
    border-top-color: hsl(calc(271.3deg + var(--vm-theme-hue-shift)) max(0%, calc(51.1% - var(--vm-theme-desaturate))) 56.7% / .11);
    border-bottom-color: hsl(calc(271.3deg + var(--vm-theme-hue-shift)) max(0%, calc(51.1% - var(--vm-theme-desaturate))) 56.7% / .11);
}

.vm-card-face {
    border-color: hsl(calc(273.6deg + var(--vm-theme-hue-shift)) max(0%, calc(67.7% - var(--vm-theme-desaturate))) 75.7% / .19);
    box-shadow: -6px 0 14px rgba(0,0,0,.27), 0 10px 24px rgba(0,0,0,.42);
}

.vm-card-button:not(.is-unplayable):hover .vm-card-face {
    border-color: hsl(calc(273.4deg + var(--vm-theme-hue-shift)) max(0%, calc(80.4% - var(--vm-theme-desaturate))) 68% / .6);
    box-shadow:
        -6px 0 14px rgba(0,0,0,.27),
        0 14px 28px rgba(0,0,0,.45),
        0 0 16px hsl(calc(273deg + var(--vm-theme-hue-shift)) max(0%, calc(54.4% - var(--vm-theme-desaturate))) 53.5% / .12);
}


.vm-card-button.is-void-locked::after {
    color: hsl(calc(275.6deg + var(--vm-theme-hue-shift)) max(0%, calc(37.2% - var(--vm-theme-desaturate))) 83.1%);
    background: hsl(calc(276.5deg + var(--vm-theme-hue-shift)) max(0%, calc(57.3% - var(--vm-theme-desaturate))) 17.5% / .9);
}

.vm-primary-button,
.vm-secondary-button {
    text-shadow: 0 1px 8px rgba(0,0,0,.5);
}


.vm-primary-button {
    border-color: hsl(calc(272.6deg + var(--vm-theme-hue-shift)) max(0%, calc(80.1% - var(--vm-theme-desaturate))) 68.4% / .5);
    
    
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 0 16px hsl(calc(273.5deg + var(--vm-theme-hue-shift)) max(0%, calc(53.5% - var(--vm-theme-desaturate))) 52.7% / .11);
}

.vm-secondary-button {
    border-color: hsl(calc(272.3deg + var(--vm-theme-hue-shift)) max(0%, calc(51% - var(--vm-theme-desaturate))) 59.2% / .2);
    
    
    
}

.vm-primary-button:not(:disabled):hover,
.vm-primary-button:not(:disabled):focus-visible {
    border-color: hsl(calc(273.6deg + var(--vm-theme-hue-shift)) max(0%, calc(93.7% - var(--vm-theme-desaturate))) 75.3% / .78);
    color: #fff;
    background: hsl(calc(273.5deg + var(--vm-theme-hue-shift)) max(0%, calc(50.3% - var(--vm-theme-desaturate))) 30% / .66);
    box-shadow: 0 0 20px hsl(calc(273.9deg + var(--vm-theme-hue-shift)) max(0%, calc(67% - var(--vm-theme-desaturate))) 59.6% / .24);
}

.vm-secondary-button:not(:disabled):hover,
.vm-secondary-button:not(:disabled):focus-visible {
    border-color: hsl(calc(272.9deg + var(--vm-theme-hue-shift)) max(0%, calc(77.8% - var(--vm-theme-desaturate))) 68.2% / .45);
    color: hsl(calc(272deg + var(--vm-theme-hue-shift)) max(0%, calc(38.5% - var(--vm-theme-desaturate))) 84.7%);
    background: hsl(calc(272.3deg + var(--vm-theme-hue-shift)) max(0%, calc(52% - var(--vm-theme-desaturate))) 14.7% / .35);
}

.vm-secondary-button.is-forced-pass {
    border-color: hsl(calc(273.4deg + var(--vm-theme-hue-shift)) max(0%, calc(85.6% - var(--vm-theme-desaturate))) 70% / .66);
    
    
    
}

.vm-overlay {
    background: hsl(calc(255deg + var(--vm-theme-hue-shift)) max(0%, calc(66.7% - var(--vm-theme-desaturate))) 1.2% / .86);
    backdrop-filter: blur(16px);
}

.vm-result-panel,
.vm-menu-modal,
.vm-rules-panel {
    border-color: hsl(calc(272deg + var(--vm-theme-hue-shift)) max(0%, calc(61% - var(--vm-theme-desaturate))) 60.8% / .3);
    background:
        radial-gradient(circle at 50% 0%, hsl(calc(273.2deg + var(--vm-theme-hue-shift)) max(0%, calc(51.5% - var(--vm-theme-desaturate))) 46.9% / .1), transparent 35%),
        linear-gradient(180deg, hsl(calc(261.8deg + var(--vm-theme-hue-shift)) max(0%, calc(40.7% - var(--vm-theme-desaturate))) 5.3% / .985), hsl(calc(252deg + var(--vm-theme-hue-shift)) max(0%, calc(45.5% - var(--vm-theme-desaturate))) 2.2% / .995));
    box-shadow:
        0 32px 86px rgba(0,0,0,.64),
        inset 0 1px 0 rgba(255,255,255,.025);
}

.vm-result-panel h2,
.vm-menu-modal-header h2,
.vm-rules-header h2 {
    color: hsl(calc(278.2deg + var(--vm-theme-hue-shift)) max(0%, calc(40.7% - var(--vm-theme-desaturate))) 94.7%);
    text-shadow: 0 0 18px hsl(calc(272.1deg + var(--vm-theme-hue-shift)) max(0%, calc(58.5% - var(--vm-theme-desaturate))) 57.5% / .13);
}

.vm-kicker,
.vm-menu-modal-header p,
.vm-rules-header p,
.vm-ranking-place,
.vm-exchange-summary {
    color: hsl(calc(274.1deg + var(--vm-theme-hue-shift)) max(0%, calc(60.9% - var(--vm-theme-desaturate))) 73.9%);
}

.vm-ranking-row,
.vm-option-row,
.vm-credit-block {
    border-color: hsl(calc(271.9deg + var(--vm-theme-hue-shift)) max(0%, calc(52.6% - var(--vm-theme-desaturate))) 57.8% / .13);
    background: hsl(calc(270deg + var(--vm-theme-hue-shift)) max(0%, calc(42.9% - var(--vm-theme-desaturate))) 8.2% / .24);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.015);
}

.vm-ranking-row:hover {
    border-color: hsl(calc(272.6deg + var(--vm-theme-hue-shift)) max(0%, calc(74% - var(--vm-theme-desaturate))) 66.9% / .28);
    background: hsl(calc(273.7deg + var(--vm-theme-hue-shift)) max(0%, calc(50.6% - var(--vm-theme-desaturate))) 15.9% / .28);
}

.vm-rules-header,
.vm-menu-modal-header {
    border-bottom-color: hsl(calc(272deg + var(--vm-theme-hue-shift)) max(0%, calc(56.2% - var(--vm-theme-desaturate))) 58.8% / .14);
}

.vm-rules-content h3,
.vm-option-row strong,
.vm-credit-block strong {
    color: hsl(calc(274.5deg + var(--vm-theme-hue-shift)) max(0%, calc(61.3% - var(--vm-theme-desaturate))) 76.7%);
}

.vm-rules-content p,
.vm-option-row span,
.vm-credit-block span,
.vm-result-panel > p:not(.vm-kicker) {
    color: hsl(calc(274.7deg + var(--vm-theme-hue-shift)) max(0%, calc(14.1% - var(--vm-theme-desaturate))) 73.5%);
}

.vm-option-toggle {
    border-color: hsl(calc(273.5deg + var(--vm-theme-hue-shift)) max(0%, calc(82.2% - var(--vm-theme-desaturate))) 69.2% / .48);
    color: hsl(calc(273.8deg + var(--vm-theme-hue-shift)) max(0%, calc(50% - var(--vm-theme-desaturate))) 93.7%);
    background: hsl(calc(274deg + var(--vm-theme-hue-shift)) max(0%, calc(50.8% - var(--vm-theme-desaturate))) 23.1% / .58);
}

.vm-option-toggle:hover,
.vm-option-toggle:focus-visible {
    border-color: hsl(calc(274.2deg + var(--vm-theme-hue-shift)) max(0%, calc(93.4% - var(--vm-theme-desaturate))) 76.1% / .78);
    background: hsl(calc(274deg + var(--vm-theme-hue-shift)) max(0%, calc(50.3% - var(--vm-theme-desaturate))) 32.4% / .7);
    box-shadow: 0 0 18px hsl(calc(274.3deg + var(--vm-theme-hue-shift)) max(0%, calc(66.3% - var(--vm-theme-desaturate))) 59.2% / .2);
}

.vm-option-toggle.is-muted,
.vm-option-soon {
    color: #a79cac;
    border-color: hsl(calc(271.1deg + var(--vm-theme-hue-shift)) max(0%, calc(47.3% - var(--vm-theme-desaturate))) 56.1% / .14);
    background: hsl(calc(264deg + var(--vm-theme-hue-shift)) max(0%, calc(41.7% - var(--vm-theme-desaturate))) 4.7% / .42);
}

.vm-transfer-target {
    border-color: hsl(calc(271.9deg + var(--vm-theme-hue-shift)) max(0%, calc(52.6% - var(--vm-theme-desaturate))) 57.8% / .16);
    color: hsl(calc(278.8deg + var(--vm-theme-hue-shift)) max(0%, calc(16.5% - var(--vm-theme-desaturate))) 79.8%);
    background: hsl(calc(268deg + var(--vm-theme-hue-shift)) max(0%, calc(42.9% - var(--vm-theme-desaturate))) 6.9% / .42);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.015);
}

.vm-transfer-target:hover,
.vm-transfer-target:focus-visible {
    border-color: hsl(calc(273.5deg + var(--vm-theme-hue-shift)) max(0%, calc(77% - var(--vm-theme-desaturate))) 67.6% / .42);
    background: hsl(calc(273.7deg + var(--vm-theme-hue-shift)) max(0%, calc(50.6% - var(--vm-theme-desaturate))) 15.9% / .34);
}

.vm-transfer-target.is-selected {
    border-color: hsl(calc(273.5deg + var(--vm-theme-hue-shift)) max(0%, calc(87.6% - var(--vm-theme-desaturate))) 71.6% / .78);
    color: hsl(calc(276deg + var(--vm-theme-hue-shift)) max(0%, calc(48.4% - var(--vm-theme-desaturate))) 93.9%);
    background: hsl(calc(274.4deg + var(--vm-theme-hue-shift)) max(0%, calc(51.5% - var(--vm-theme-desaturate))) 25.9% / .5);
    box-shadow:
        0 0 0 1px hsl(calc(272.8deg + var(--vm-theme-hue-shift)) max(0%, calc(62.1% - var(--vm-theme-desaturate))) 59.6% / .1),
        0 0 20px hsl(calc(273.8deg + var(--vm-theme-hue-shift)) max(0%, calc(61.1% - var(--vm-theme-desaturate))) 56.7% / .18);
}

.vm-transfer-target.is-selected strong,
.vm-transfer-target.is-selected span {
    color: hsl(calc(274.4deg + var(--vm-theme-hue-shift)) max(0%, calc(61.4% - var(--vm-theme-desaturate))) 82.7%);
}

.vm-receive-cards .vm-pile-card {
    box-shadow:
        0 20px 36px rgba(0,0,0,.48),
        0 0 22px hsl(calc(273.1deg + var(--vm-theme-hue-shift)) max(0%, calc(54.5% - var(--vm-theme-desaturate))) 54.3% / .12);
}

@media (hover: hover) {
    .vm-opponent:not(.is-finished):hover {
        border-color: hsl(calc(272.4deg + var(--vm-theme-hue-shift)) max(0%, calc(70% - var(--vm-theme-desaturate))) 64.7% / .3);
    }
}
/* V1.7.0 — scène de jeu asymétrique inspirée des interfaces de JRPG */
:root {
    
    
    
    --vm-purple: hsl(calc(273.8deg + var(--vm-theme-hue-shift)) max(0%, calc(56% - var(--vm-theme-desaturate))) 52.7%);
    --vm-purple-bright: hsl(calc(272.6deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 72.9%);
    
    --vm-brass: #c7a664;
    --vm-brass-light: #ead18e;
}

body {
    background:
        linear-gradient(122deg, transparent 0 54%, hsl(calc(274.5deg + var(--vm-theme-hue-shift)) max(0%, calc(54.5% - var(--vm-theme-desaturate))) 45.7% / .035) 54.1% 55.2%, transparent 55.3%),
        linear-gradient(64deg, transparent 0 17%, hsl(calc(282.2deg + var(--vm-theme-hue-shift)) max(0%, calc(41.5% - var(--vm-theme-desaturate))) 87.3% / .018) 17.1% 17.8%, transparent 17.9%),
        radial-gradient(circle at 52% 38%, hsl(calc(274.1deg + var(--vm-theme-hue-shift)) max(0%, calc(59% - var(--vm-theme-desaturate))) 31.6% / .12), transparent 42%),
        linear-gradient(180deg, hsl(calc(262.5deg + var(--vm-theme-hue-shift)) max(0%, calc(44.4% - var(--vm-theme-desaturate))) 3.5%) 0%, hsl(calc(260deg + var(--vm-theme-hue-shift)) max(0%, calc(42.9% - var(--vm-theme-desaturate))) 1.4%) 100%);
}

.vm-app::before {
    opacity: .72;
    background:
        linear-gradient(155deg, transparent 0 74%, hsl(calc(275.3deg + var(--vm-theme-hue-shift)) max(0%, calc(62.4% - var(--vm-theme-desaturate))) 54.1% / .045) 74.2% 76%, transparent 76.2%),
        linear-gradient(22deg, transparent 0 12%, hsl(calc(283.4deg + var(--vm-theme-hue-shift)) max(0%, calc(33.3% - var(--vm-theme-desaturate))) 82.9% / .018) 12.2% 12.8%, transparent 13%),
        radial-gradient(circle at 18% 21%, hsl(calc(274.4deg + var(--vm-theme-hue-shift)) max(0%, calc(90.2% - var(--vm-theme-desaturate))) 72% / .11) 0 1px, transparent 1.5px),
        radial-gradient(circle at 82% 68%, rgba(218, 188, 113, .08) 0 1px, transparent 1.5px);
    background-size: 100% 100%, 100% 100%, 190px 190px, 270px 270px;
    mask-image: linear-gradient(#000, rgba(0,0,0,.65));
}

/* Header : bandeau découpé plutôt que panneau web. */
.vm-header {
    position: relative;
    isolation: isolate;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.vm-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    clip-path: polygon(0 0, 94% 0, 96.5% 18%, 100% 18%, 100% 82%, 96.5% 82%, 94% 100%, 4% 100%, 0 72%);
    background:
        linear-gradient(100deg, rgba(255,255,255,.035), transparent 30%),
        linear-gradient(90deg, hsl(calc(266.7deg + var(--vm-theme-hue-shift)) max(0%, calc(47.4% - var(--vm-theme-desaturate))) 3.7% / .98), hsl(calc(267.7deg + var(--vm-theme-hue-shift)) max(0%, calc(48.1% - var(--vm-theme-desaturate))) 5.3% / .94) 70%, hsl(calc(274.5deg + var(--vm-theme-hue-shift)) max(0%, calc(55.9% - var(--vm-theme-desaturate))) 11.6% / .9));
    filter: drop-shadow(0 13px 22px rgba(0,0,0,.38));
}

.vm-header::after {
    content: "";
    position: absolute;
    left: 0;
    top: 8%;
    bottom: 8%;
    width: clamp(5px, .65vw, 9px);
    z-index: -1;
    pointer-events: none;
    clip-path: polygon(0 0, 100% 10%, 62% 100%, 0 88%);
    background: linear-gradient(180deg, var(--vm-purple-bright), hsl(calc(276.2deg + var(--vm-theme-hue-shift)) max(0%, calc(60% - var(--vm-theme-desaturate))) 36.3%) 72%, var(--vm-brass));
    box-shadow: 0 0 20px hsl(calc(275.7deg + var(--vm-theme-hue-shift)) max(0%, calc(66.7% - var(--vm-theme-desaturate))) 56.5% / .2);
}

.vm-header-title {
    position: relative;
    padding-left: clamp(4px, .6vw, 9px);
    
    transform: skewX(-3deg);
}

.vm-header-title::after {
    content: "";
    position: absolute;
    left: 2px;
    bottom: -5px;
    width: min(120%, 250px);
    height: 2px;
    transform: skewX(-28deg);
    transform-origin: left;
    background: linear-gradient(90deg, var(--vm-purple-bright), hsl(calc(275.2deg + var(--vm-theme-hue-shift)) max(0%, calc(53.4% - var(--vm-theme-desaturate))) 51.2% / .18), transparent);
}

.vm-round-counter,
.vm-icon-button {
    border: 0;
    border-radius: 0;
    clip-path: polygon(12% 0, 100% 0, 100% 78%, 82% 100%, 0 100%, 0 22%);
    background:
        linear-gradient(145deg, rgba(255,255,255,.055), transparent 38%),
        hsl(calc(267.3deg + var(--vm-theme-hue-shift)) max(0%, calc(47.8% - var(--vm-theme-desaturate))) 4.5% / .9);
    filter: drop-shadow(0 8px 12px rgba(0,0,0,.3));
}

.vm-round-counter {
    color: var(--vm-brass-light);
    box-shadow: inset 0 0 0 1px rgba(202, 170, 101, .26);
}

.vm-icon-button {
    box-shadow: inset 0 0 0 1px hsl(calc(274.6deg + var(--vm-theme-hue-shift)) max(0%, calc(71.1% - var(--vm-theme-desaturate))) 66.1% / .22);
}

.vm-icon-button:hover,
.vm-icon-button:focus-visible {
    color: #fff;
    background:
        linear-gradient(145deg, rgba(255,255,255,.09), transparent 38%),
        hsl(calc(276.7deg + var(--vm-theme-hue-shift)) max(0%, calc(57.8% - var(--vm-theme-desaturate))) 28.8% / .82);
    box-shadow: inset 0 0 0 1px hsl(calc(275.5deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 74.5% / .62);
    filter: drop-shadow(0 0 14px hsl(calc(275deg + var(--vm-theme-hue-shift)) max(0%, calc(67.4% - var(--vm-theme-desaturate))) 56.7% / .25));
}

/* Adversaires : portraits sortants, silhouettes non rectangulaires. */
.vm-opponent {
    position: relative;
    isolation: isolate;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
}

.vm-opponent::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    transform: none;
    background:
        linear-gradient(115deg, rgba(255,255,255,.035), transparent 36%),
        linear-gradient(100deg, hsl(calc(266.7deg + var(--vm-theme-hue-shift)) max(0%, calc(47.4% - var(--vm-theme-desaturate))) 3.7% / .98), hsl(calc(270deg + var(--vm-theme-hue-shift)) max(0%, calc(47.4% - var(--vm-theme-desaturate))) 7.5% / .92));
    filter: drop-shadow(0 10px 16px rgba(0,0,0,.34));
}

.vm-opponent[data-seat="1"]::before {
    clip-path: polygon(0 0, 91% 0, 100% 30%, 96% 100%, 8% 100%, 0 73%);
}

.vm-opponent[data-seat="2"]::before {
    clip-path: polygon(6% 0, 94% 0, 100% 24%, 96% 100%, 3% 100%, 0 19%);
}

.vm-opponent[data-seat="3"]::before {
    clip-path: polygon(9% 0, 100% 0, 100% 73%, 92% 100%, 4% 100%, 0 30%);
}

.vm-opponent::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    opacity: .72;
    background: linear-gradient(135deg, var(--vm-purple-bright), hsl(calc(274.6deg + var(--vm-theme-hue-shift)) max(0%, calc(61.2% - var(--vm-theme-desaturate))) 33.3%) 68%, transparent 69%);
}

.vm-opponent[data-seat="1"]::after {
    left: -3px;
    top: 9px;
    bottom: 11px;
    width: 7px;
    clip-path: polygon(0 0, 100% 14%, 55% 100%, 0 83%);
}

.vm-opponent[data-seat="2"]::after {
    left: 14%;
    right: 10%;
    bottom: -3px;
    height: 4px;
    clip-path: polygon(0 0, 100% 35%, 87% 100%, 4% 76%);
}

.vm-opponent[data-seat="3"]::after {
    right: -3px;
    top: 11px;
    bottom: 9px;
    width: 7px;
    clip-path: polygon(45% 0, 100% 17%, 100% 100%, 0 84%);
}

.vm-opponent.is-active {
    border: 0;
    background: transparent;
    box-shadow: none;
    transform: translateY(-2px);
    filter: drop-shadow(0 0 15px hsl(calc(274.9deg + var(--vm-theme-hue-shift)) max(0%, calc(67.9% - var(--vm-theme-desaturate))) 57.3% / .2));
}

.vm-opponent.is-active::before {
    animation: none;
    background:
        linear-gradient(110deg, rgba(255,255,255,.07), transparent 34%),
        linear-gradient(100deg, hsl(calc(274.3deg + var(--vm-theme-hue-shift)) max(0%, calc(56.8% - var(--vm-theme-desaturate))) 7.3% / .99), hsl(calc(278deg + var(--vm-theme-hue-shift)) max(0%, calc(58.7% - var(--vm-theme-desaturate))) 23.7% / .92));
    box-shadow: inset 0 0 0 1px hsl(calc(276deg + var(--vm-theme-hue-shift)) max(0%, calc(94.4% - var(--vm-theme-desaturate))) 72% / .32);
}

.vm-opponent.is-active::after {
    opacity: 1;
    filter: brightness(1.35) drop-shadow(0 0 8px hsl(calc(275.8deg + var(--vm-theme-hue-shift)) max(0%, calc(88% - var(--vm-theme-desaturate))) 67.5% / .55));
    animation: vm-persona-accent 1.4s ease-in-out infinite;
}

.vm-opponent-portrait-wrap {
    z-index: 2;
    border: 0;
    border-radius: 0;
    clip-path: polygon(12% 0, 100% 0, 100% 84%, 83% 100%, 0 100%, 0 14%);
    box-shadow:
        0 0 0 2px hsl(calc(275.2deg + var(--vm-theme-hue-shift)) max(0%, calc(80% - var(--vm-theme-desaturate))) 74.5% / .24),
        8px 9px 0 hsl(calc(276.2deg + var(--vm-theme-hue-shift)) max(0%, calc(59.2% - var(--vm-theme-desaturate))) 19.2% / .58),
        0 10px 18px rgba(0,0,0,.34);
}

.vm-opponent.is-active .vm-opponent-portrait-wrap {
    border: 0;
    box-shadow:
        0 0 0 2px hsl(calc(277.8deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 82.5% / .72),
        8px 9px 0 hsl(calc(277.4deg + var(--vm-theme-hue-shift)) max(0%, calc(56.5% - var(--vm-theme-desaturate))) 42.4% / .78),
        0 0 18px hsl(calc(276.2deg + var(--vm-theme-hue-shift)) max(0%, calc(83.2% - var(--vm-theme-desaturate))) 64.9% / .3);
}

.vm-turn-indicator {
    right: 1px;
    bottom: 2px;
    border-radius: 0;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.vm-opponent-copy {
    position: relative;
    z-index: 2;
}

.vm-opponent-name {
    font-weight: 800;
    letter-spacing: .035em;
}

.vm-opponent-count {
    display: inline-flex;
    align-items: center;
    width: max-content;
    min-height: 22px;
    margin-top: 1px;
    padding: 2px 11px 2px 8px;
    clip-path: polygon(0 0, 100% 0, 91% 100%, 0 100%);
    color: hsl(calc(282.4deg + var(--vm-theme-hue-shift)) max(0%, calc(19.5% - var(--vm-theme-desaturate))) 82.9%);
    background: hsl(calc(273deg + var(--vm-theme-hue-shift)) max(0%, calc(47.6% - var(--vm-theme-desaturate))) 8.2% / .82);
    box-shadow: inset 3px 0 0 hsl(calc(276.5deg + var(--vm-theme-hue-shift)) max(0%, calc(55.2% - var(--vm-theme-desaturate))) 51% / .72);
}

.vm-opponent.is-active .vm-opponent-count {
    color: #fff;
    background: hsl(calc(277.5deg + var(--vm-theme-hue-shift)) max(0%, calc(58.5% - var(--vm-theme-desaturate))) 32.2% / .82);
    box-shadow: inset 3px 0 0 var(--vm-purple-bright);
}

.vm-opponent-count.is-rank-title {
    color: var(--vm-brass-light);
    box-shadow: inset 3px 0 0 var(--vm-brass);
}

.vm-opponent.is-folded:not(.is-finished) {
    opacity: .38;
    transform: translateY(1px) scale(.985);
    filter: grayscale(.55) saturate(.45) brightness(.62);
}

.vm-table {
    position: relative;
    z-index: 0;
    isolation: isolate;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}


.vm-round-info {
    z-index: 3;
    width: max-content;
    min-width: 0;
    margin: 4px auto 0;
    padding: 0;
    border: 0;
    background: transparent;
    backdrop-filter: none;
}

.vm-round-label {
    min-height: 30px;
    padding: 5px 18px 4px;
    border: 0;
    border-radius: 0;
    clip-path: polygon(7% 0, 100% 0, 94% 100%, 0 100%);
    color: hsl(calc(281.2deg + var(--vm-theme-hue-shift)) max(0%, calc(22.9% - var(--vm-theme-desaturate))) 86.3%);
    background:
        linear-gradient(100deg, hsl(calc(278.4deg + var(--vm-theme-hue-shift)) max(0%, calc(57% - var(--vm-theme-desaturate))) 39.2% / .72), hsl(calc(274.7deg + var(--vm-theme-hue-shift)) max(0%, calc(51.4% - var(--vm-theme-desaturate))) 7.3% / .92) 58%, hsl(calc(265.7deg + var(--vm-theme-hue-shift)) max(0%, calc(41.2% - var(--vm-theme-desaturate))) 3.3% / .94));
    box-shadow: none;
    filter: drop-shadow(0 8px 10px rgba(0,0,0,.28));
}

.vm-round-label.is-human-turn,
.vm-round-label.is-ai-turn {
    border: 0;
    color: #fff;
    background:
        linear-gradient(100deg, var(--vm-purple), hsl(calc(277.8deg + var(--vm-theme-hue-shift)) max(0%, calc(59.3% - var(--vm-theme-desaturate))) 24.1% / .94) 48%, hsl(calc(270deg + var(--vm-theme-hue-shift)) max(0%, calc(44.4% - var(--vm-theme-desaturate))) 3.5% / .96));
    box-shadow: none;
    animation: vm-persona-label 1.6s ease-in-out infinite;
}

.vm-pile-shell::before {
    width: min(64vw, 560px);
    height: min(28vw, 205px);
    background:
        radial-gradient(ellipse, hsl(calc(275.4deg + var(--vm-theme-hue-shift)) max(0%, calc(52.8% - var(--vm-theme-desaturate))) 49.8% / .16), hsl(calc(274.8deg + var(--vm-theme-hue-shift)) max(0%, calc(57.9% - var(--vm-theme-desaturate))) 29.8% / .035) 48%, transparent 72%);
    filter: blur(12px);
}

.vm-pile-card {
    border-color: hsl(calc(282.9deg + var(--vm-theme-hue-shift)) max(0%, calc(65.3% - var(--vm-theme-desaturate))) 85.3% / .28);
    box-shadow:
        0 20px 34px rgba(0,0,0,.48),
        8px 9px 0 hsl(calc(277.8deg + var(--vm-theme-hue-shift)) max(0%, calc(59% - var(--vm-theme-desaturate))) 15.3% / .22),
        0 0 18px hsl(calc(276.5deg + var(--vm-theme-hue-shift)) max(0%, calc(53.8% - var(--vm-theme-desaturate))) 48.4% / .08);
}

.vm-last-action {
    padding: 4px 14px;
    border: 0;
    border-radius: 0;
    color: hsl(calc(280deg + var(--vm-theme-hue-shift)) max(0%, calc(12.9% - var(--vm-theme-desaturate))) 72.5%);
    background: transparent;
}

.vm-last-action::before,
.vm-last-action::after {
    content: "";
    display: inline-block;
    width: 18px;
    height: 2px;
    margin: 0 8px 3px;
    transform: skewX(-28deg);
    background: linear-gradient(90deg, transparent, hsl(calc(276.4deg + var(--vm-theme-hue-shift)) max(0%, calc(66.7% - var(--vm-theme-desaturate))) 58.8% / .65));
}

.vm-last-action::after {
    transform: skewX(-28deg) scaleX(-1);
}

/* Dialogue : bulle sombre découpée avec portrait qui déborde. */
.vm-bark {
    isolation: isolate;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.vm-bark::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    clip-path: polygon(3% 0, 97% 0, 100% 18%, 97% 100%, 10% 100%, 6% 83%, 0 75%, 2% 16%);
    background:
        linear-gradient(100deg, rgba(255,255,255,.045), transparent 32%),
        linear-gradient(110deg, hsl(calc(270deg + var(--vm-theme-hue-shift)) max(0%, calc(46.2% - var(--vm-theme-desaturate))) 5.1% / .985), hsl(calc(277.7deg + var(--vm-theme-hue-shift)) max(0%, calc(57.3% - var(--vm-theme-desaturate))) 14.7% / .96));
    filter: drop-shadow(0 17px 25px rgba(0,0,0,.44));
}

.vm-bark::after {
    right: 5%;
    bottom: -3px;
    left: 18%;
    height: 4px;
    background: linear-gradient(90deg, var(--vm-purple-bright), hsl(calc(275.8deg + var(--vm-theme-hue-shift)) max(0%, calc(69.2% - var(--vm-theme-desaturate))) 59.2% / .2), transparent);
    clip-path: polygon(0 0, 100% 35%, 88% 100%, 4% 72%);
}

.vm-bark-portrait-wrap {
    border: 0;
    border-radius: 0;
    clip-path: polygon(12% 0, 100% 0, 100% 82%, 82% 100%, 0 100%, 0 14%);
    box-shadow: 5px 6px 0 hsl(calc(278deg + var(--vm-theme-hue-shift)) max(0%, calc(58.4% - var(--vm-theme-desaturate))) 33.9% / .72), 0 10px 18px rgba(0,0,0,.32);
    transform: translate(-4px, -2px);
}

.vm-bark-copy strong {
    display: inline-block;
    padding: 2px 12px 2px 7px;
    clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
    color: #fff;
    background: hsl(calc(278deg + var(--vm-theme-hue-shift)) max(0%, calc(56.2% - var(--vm-theme-desaturate))) 42.9% / .72);
    letter-spacing: .04em;
}

/* Main du joueur : console découpée, cartes au premier plan. */
.vm-player {
    position: relative;
    isolation: isolate;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.vm-player::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    border-radius: 0;
    clip-path: polygon(0 11%, 4% 0, 28% 0, 30% 4px, 75% 4px, 77% 0, 96% 0, 100% 17%, 99% 91%, 95% 100%, 4% 100%, 0 84%);
    background:
        linear-gradient(110deg, rgba(255,255,255,.035), transparent 29%),
        linear-gradient(180deg, hsl(calc(270deg + var(--vm-theme-hue-shift)) max(0%, calc(42.9% - var(--vm-theme-desaturate))) 5.5% / .965), hsl(calc(264deg + var(--vm-theme-hue-shift)) max(0%, calc(45.5% - var(--vm-theme-desaturate))) 2.2% / .99));
    box-shadow:
        inset 0 0 0 1px hsl(calc(275.7deg + var(--vm-theme-hue-shift)) max(0%, calc(58.5% - var(--vm-theme-desaturate))) 59.4% / .17),
        0 18px 32px rgba(0,0,0,.36);
}

.vm-player.is-active {
    border: 0;
    box-shadow: none;
}

.vm-player.is-active::after {
    background:
        linear-gradient(110deg, rgba(255,255,255,.05), transparent 30%),
        linear-gradient(180deg, hsl(calc(275deg + var(--vm-theme-hue-shift)) max(0%, calc(50% - var(--vm-theme-desaturate))) 9.4% / .97), hsl(calc(265.7deg + var(--vm-theme-hue-shift)) max(0%, calc(53.8% - var(--vm-theme-desaturate))) 2.5% / .995));
    box-shadow:
        inset 0 0 0 1px hsl(calc(276.7deg + var(--vm-theme-hue-shift)) max(0%, calc(85.4% - var(--vm-theme-desaturate))) 70.4% / .3),
        inset 0 18px 42px hsl(calc(278.9deg + var(--vm-theme-hue-shift)) max(0%, calc(58.1% - var(--vm-theme-desaturate))) 37.5% / .055),
        0 0 24px hsl(calc(277.5deg + var(--vm-theme-hue-shift)) max(0%, calc(56.1% - var(--vm-theme-desaturate))) 44.7% / .09),
        0 18px 32px rgba(0,0,0,.38);
}

.vm-player.is-active::before {
    top: -10px;
    border: 0;
    border-radius: 0;
    clip-path: polygon(6% 0, 100% 0, 93% 100%, 0 100%);
    padding: 5px 19px 4px 15px;
    color: #fff;
    background: linear-gradient(100deg, var(--vm-purple), hsl(calc(278.2deg + var(--vm-theme-hue-shift)) max(0%, calc(58.8% - var(--vm-theme-desaturate))) 26.7% / .95) 64%, hsl(calc(272.7deg + var(--vm-theme-hue-shift)) max(0%, calc(47.8% - var(--vm-theme-desaturate))) 4.5% / .95));
    box-shadow: none;
    filter: drop-shadow(0 7px 10px rgba(0,0,0,.34));
    text-shadow: 0 0 10px hsl(calc(275.4deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 80.4% / .3);
}

.vm-player-status {
    border-bottom: 0;
}

.vm-player-name {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 12px 2px 8px;
    clip-path: polygon(0 0, 100% 0, 91% 100%, 0 100%);
    color: #fff;
    background: hsl(calc(278.4deg + var(--vm-theme-hue-shift)) max(0%, calc(57% - var(--vm-theme-desaturate))) 39.2% / .72);
}

.vm-player-identity strong {
    letter-spacing: .025em;
}

.vm-hand-viewport {
    position: relative;
    overflow: visible;
    border: 0;
    background:
        linear-gradient(90deg, transparent, hsl(calc(276.8deg + var(--vm-theme-hue-shift)) max(0%, calc(54.5% - var(--vm-theme-desaturate))) 47.5% / .035) 12%, hsl(calc(276.8deg + var(--vm-theme-hue-shift)) max(0%, calc(54.5% - var(--vm-theme-desaturate))) 47.5% / .035) 88%, transparent);
}

.vm-card-button {
    overflow: visible;
}

.vm-card-button::before,
.vm-card-button::after {
    content: "";
    position: absolute;
    inset: -3px;
    z-index: -1;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}

.vm-card-button.is-selected::before {
    opacity: 1;
    clip-path: polygon(0 7%, 7% 0, 100% 0, 100% 91%, 91% 100%, 0 100%);
    background: hsl(calc(276.2deg + var(--vm-theme-hue-shift)) max(0%, calc(75.6% - var(--vm-theme-desaturate))) 61.4% / .82);
    transform: translate(-3px, 2px) rotate(-1.3deg);
    filter: drop-shadow(0 0 12px hsl(calc(276.7deg + var(--vm-theme-hue-shift)) max(0%, calc(80.9% - var(--vm-theme-desaturate))) 63.1% / .34));
}

.vm-card-button.is-selected::after {
    opacity: .85;
    inset: -1px;
    clip-path: polygon(11% 0, 100% 0, 100% 88%, 88% 100%, 0 100%, 0 12%);
    background: rgba(231, 210, 153, .55);
    transform: translate(3px, -2px) rotate(.8deg);
}

.vm-card-button.is-selected .vm-card-face {
    border-color: rgba(255,255,255,.42);
    box-shadow: 0 20px 34px rgba(0,0,0,.55);
}

/* Commandes : silhouettes franches, interaction rapide. */
.vm-actions {
    overflow: visible;
}

.vm-primary-button,
.vm-secondary-button {
    overflow: visible;
    border: 0;
    border-radius: 0;
    clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%);
    letter-spacing: .1em;
    box-shadow: none;
    filter: drop-shadow(0 9px 12px rgba(0,0,0,.25));
}

.vm-primary-button {
    color: #fff;
    background:
        linear-gradient(105deg, rgba(255,255,255,.09), transparent 30%),
        linear-gradient(90deg, hsl(calc(280.2deg + var(--vm-theme-hue-shift)) max(0%, calc(58.9% - var(--vm-theme-desaturate))) 35.3%), hsl(calc(278.5deg + var(--vm-theme-hue-shift)) max(0%, calc(56.2% - var(--vm-theme-desaturate))) 54.3%) 66%, hsl(calc(279.8deg + var(--vm-theme-hue-shift)) max(0%, calc(56.5% - var(--vm-theme-desaturate))) 28.8%));
}

.vm-secondary-button {
    color: hsl(calc(280deg + var(--vm-theme-hue-shift)) max(0%, calc(18.1% - var(--vm-theme-desaturate))) 83.7%);
    background:
        linear-gradient(105deg, rgba(255,255,255,.035), transparent 30%),
        linear-gradient(90deg, hsl(calc(270deg + var(--vm-theme-hue-shift)) max(0%, calc(41.7% - var(--vm-theme-desaturate))) 4.7%), hsl(calc(276.4deg + var(--vm-theme-hue-shift)) max(0%, calc(46.7% - var(--vm-theme-desaturate))) 11.8%) 70%, hsl(calc(270deg + var(--vm-theme-hue-shift)) max(0%, calc(36.4% - var(--vm-theme-desaturate))) 4.3%));
    box-shadow: inset 0 0 0 1px hsl(calc(276deg + var(--vm-theme-hue-shift)) max(0%, calc(57.7% - var(--vm-theme-desaturate))) 59.2% / .24);
}

.vm-primary-button::before,
.vm-secondary-button::before {
    inset: 0;
    opacity: .42;
    background: linear-gradient(120deg, transparent 0 64%, rgba(255,255,255,.11) 64.5% 68%, transparent 68.5%);
}

.vm-primary-button::after,
.vm-secondary-button::after {
    content: "";
    position: absolute;
    left: 8%;
    right: 7%;
    bottom: 2px;
    height: 2px;
    opacity: .75;
    background: linear-gradient(90deg, var(--vm-purple-bright), transparent);
    transform: skewX(-28deg);
}

.vm-primary-button::after {
    background: linear-gradient(90deg, #f1d99a, rgba(231, 209, 148, .1));
}

.vm-primary-button:not(:disabled):hover,
.vm-primary-button:not(:disabled):focus-visible,
.vm-secondary-button:not(:disabled):hover,
.vm-secondary-button:not(:disabled):focus-visible {
    transform: translateY(-2px) translateX(2px);
    filter: brightness(1.16) drop-shadow(0 10px 14px rgba(0,0,0,.3));
}

.vm-secondary-button.is-forced-pass {
    color: #fff;
    background: linear-gradient(90deg, hsl(calc(280.2deg + var(--vm-theme-hue-shift)) max(0%, calc(60.3% - var(--vm-theme-desaturate))) 30.6%), hsl(calc(278.1deg + var(--vm-theme-hue-shift)) max(0%, calc(52.2% - var(--vm-theme-desaturate))) 51.6%) 70%, hsl(calc(280deg + var(--vm-theme-hue-shift)) max(0%, calc(62.9% - var(--vm-theme-desaturate))) 24.3%));
    box-shadow: inset 0 0 0 1px hsl(calc(277.6deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 82.2% / .38);
}

/* Écrans de résultat et choix : même langage, sans bouleverser leurs dimensions. */
.vm-result-panel,
.vm-rules-panel,
.vm-menu-modal {
    border: 0;
    border-radius: 0;
    clip-path: polygon(2% 0, 97% 0, 100% 4%, 99% 93%, 95% 100%, 3% 100%, 0 96%, 1% 7%);
    background:
        linear-gradient(118deg, rgba(255,255,255,.04), transparent 25%),
        linear-gradient(180deg, hsl(calc(270deg + var(--vm-theme-hue-shift)) max(0%, calc(42.9% - var(--vm-theme-desaturate))) 5.5% / .99), hsl(calc(264deg + var(--vm-theme-hue-shift)) max(0%, calc(55.6% - var(--vm-theme-desaturate))) 1.8% / .997));
    box-shadow:
        inset 0 0 0 1px hsl(calc(276.1deg + var(--vm-theme-hue-shift)) max(0%, calc(72.7% - var(--vm-theme-desaturate))) 65.5% / .22),
        0 34px 80px rgba(0,0,0,.62);
}

.vm-ranking-row,
.vm-option-row,
.vm-credit-block,
.vm-transfer-target {
    border: 0;
    border-radius: 0;
    clip-path: polygon(2% 0, 100% 0, 97% 100%, 0 100%);
    background: linear-gradient(90deg, hsl(calc(278deg + var(--vm-theme-hue-shift)) max(0%, calc(53.2% - var(--vm-theme-desaturate))) 15.1% / .52), hsl(calc(272.3deg + var(--vm-theme-hue-shift)) max(0%, calc(48.1% - var(--vm-theme-desaturate))) 5.3% / .44));
    box-shadow: inset 3px 0 0 hsl(calc(277.7deg + var(--vm-theme-hue-shift)) max(0%, calc(54.1% - var(--vm-theme-desaturate))) 47.8% / .58);
}

.vm-ranking-row:first-child {
    color: #fff;
    background: linear-gradient(90deg, hsl(calc(278.6deg + var(--vm-theme-hue-shift)) max(0%, calc(54.4% - var(--vm-theme-desaturate))) 35.3% / .65), hsl(calc(274.7deg + var(--vm-theme-hue-shift)) max(0%, calc(54.3% - var(--vm-theme-desaturate))) 6.9% / .5));
    box-shadow: inset 3px 0 0 var(--vm-brass);
}

@keyframes vm-persona-accent {
    0%, 100% { opacity: .75; filter: brightness(1.05) drop-shadow(0 0 5px hsl(calc(277deg + var(--vm-theme-hue-shift)) max(0%, calc(85.3% - var(--vm-theme-desaturate))) 65.3% / .28)); }
    50% { opacity: 1; filter: brightness(1.45) drop-shadow(0 0 10px hsl(calc(277deg + var(--vm-theme-hue-shift)) max(0%, calc(85.3% - var(--vm-theme-desaturate))) 65.3% / .52)); }
}

@keyframes vm-persona-label {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.12); }
}

@media (max-width: 720px) {
    .vm-header::before {
        clip-path: polygon(0 0, 92% 0, 95% 17%, 100% 17%, 100% 83%, 95% 83%, 92% 100%, 5% 100%, 0 72%);
    }

    .vm-opponent[data-seat="1"]::before,
    .vm-opponent[data-seat="2"]::before,
    .vm-opponent[data-seat="3"]::before {
        clip-path: polygon(0 0, 91% 0, 100% 26%, 96% 100%, 7% 100%, 0 75%);
    }

    .vm-opponent[data-seat="2"]::after {
        left: -2px;
        right: auto;
        top: 8px;
        bottom: 9px;
        width: 5px;
        height: auto;
        clip-path: polygon(0 0, 100% 14%, 55% 100%, 0 83%);
    }

    .vm-opponent[data-seat="3"]::after {
        width: 5px;
    }

    .vm-opponent-portrait-wrap {
        box-shadow:
            0 0 0 1px hsl(calc(275.2deg + var(--vm-theme-hue-shift)) max(0%, calc(80% - var(--vm-theme-desaturate))) 74.5% / .25),
            4px 5px 0 hsl(calc(276.2deg + var(--vm-theme-hue-shift)) max(0%, calc(59.2% - var(--vm-theme-desaturate))) 19.2% / .58),
            0 7px 12px rgba(0,0,0,.3);
    }

    .vm-opponent.is-active .vm-opponent-portrait-wrap {
        box-shadow:
            0 0 0 1px hsl(calc(277.8deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 82.5% / .72),
            4px 5px 0 hsl(calc(277.4deg + var(--vm-theme-hue-shift)) max(0%, calc(56.5% - var(--vm-theme-desaturate))) 42.4% / .78),
            0 0 12px hsl(calc(276.2deg + var(--vm-theme-hue-shift)) max(0%, calc(83.2% - var(--vm-theme-desaturate))) 64.9% / .26);
    }

    .vm-opponent-count {
        min-height: 18px;
        padding: 1px 7px 1px 5px;
    }


    .vm-round-label {
        padding-inline: 14px;
    }

    .vm-bark::before {
        clip-path: polygon(3% 0, 97% 0, 100% 17%, 97% 100%, 12% 100%, 8% 84%, 0 76%, 2% 17%);
    }

    .vm-player::after {
        clip-path: polygon(0 9%, 4% 0, 29% 0, 31% 3px, 74% 3px, 76% 0, 96% 0, 100% 15%, 99% 92%, 95% 100%, 4% 100%, 0 85%);
    }

    .vm-player.is-active::before {
        padding-inline: 13px 17px;
    }

    .vm-primary-button,
    .vm-secondary-button {
        clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
    }
}

@media (max-height: 720px) and (orientation: landscape) {
    .vm-opponent[data-seat="1"]::before,
    .vm-opponent[data-seat="2"]::before,
    .vm-opponent[data-seat="3"]::before {
        clip-path: polygon(0 0, 92% 0, 100% 20%, 97% 100%, 6% 100%, 0 80%);
    }


}


.vm-card-button {
    isolation: isolate;
}

/* =========================================================
   Ordre des calques du plateau + respiration desktop
   ========================================================= */


.vm-table .vm-round-info {
    position: relative;
    z-index: 4;
}

.vm-table .vm-pile-shell {
    position: relative;
    z-index: 2;
}

.vm-table .vm-bark {
    z-index: 7;
}

.vm-table .vm-match-flash {
    z-index: 9;
}

/* Sur desktop uniquement, le sous-titre de l'action remonte légèrement.
   Le bandeau À VOUS DE JOUER conserve strictement son design et sa position. */


/* V1.7.4 — ajustements titres/menu/branding plateau */
.vm-title-strong,
.vm-menu-kicker strong,
.vm-table-brand-text strong {
    font-weight: 800;
}

.vm-header-title {
    margin: 0;
    color: #f7f3ee;
    font-family: Cinzel, Georgia, serif;
    
    font-weight: 500;
    letter-spacing: .055em;
    line-height: .95;
    text-shadow: 0 4px 18px rgba(0,0,0,.45);
}

.vm-menu-panel {
    text-align: left;
}

.vm-menu-kicker {
    margin: 0 0 14px;
    color: hsl(calc(258.5deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 89.2%);
    font-family: Cinzel, Georgia, serif;
    font-size: clamp(22px, 2vw, 31px);
    letter-spacing: .08em;
    text-shadow: 0 0 18px hsl(calc(259.1deg + var(--vm-theme-hue-shift)) max(0%, calc(85.4% - var(--vm-theme-desaturate))) 70.4% / .14), 0 2px 12px rgba(0,0,0,.6);
}

.vm-menu-button,
.vm-menu-button.is-primary {
    min-height: clamp(48px, 3.8vw, 62px);
    padding: 0 8px 0 26px;
    border: 0;
    border-radius: 0;
    color: hsl(calc(274.3deg + var(--vm-theme-hue-shift)) max(0%, calc(30.4% - var(--vm-theme-desaturate))) 95.5% / .92);
    background: linear-gradient(90deg, rgba(10, 9, 16, .26), rgba(10, 9, 16, .1) 78%, transparent);
    box-shadow: none;
    text-shadow: 0 2px 14px rgba(0,0,0,.82), 0 0 16px hsl(calc(259.1deg + var(--vm-theme-hue-shift)) max(0%, calc(85.4% - var(--vm-theme-desaturate))) 70.4% / .06);
}

.vm-menu-button.is-primary {
    color: hsl(calc(265.1deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 84.5%);
    background: linear-gradient(90deg, hsl(calc(275.6deg + var(--vm-theme-hue-shift)) max(0%, calc(47.4% - var(--vm-theme-desaturate))) 11.2% / .24), hsl(calc(257.1deg + var(--vm-theme-hue-shift)) max(0%, calc(28% - var(--vm-theme-desaturate))) 4.9% / .08) 78%, transparent);
}

.vm-menu-button::before,
.vm-menu-button.is-primary::before {
    left: 0;
    width: 4px;
    height: 30px;
    border: 0;
    background: linear-gradient(180deg, hsl(calc(263.3deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 86.9% / .96), hsl(calc(264.4deg + var(--vm-theme-hue-shift)) max(0%, calc(59.6% - var(--vm-theme-desaturate))) 56.3% / .14));
    box-shadow: 0 0 14px hsl(calc(259.1deg + var(--vm-theme-hue-shift)) max(0%, calc(85.4% - var(--vm-theme-desaturate))) 70.4% / .38);
    transform: translateY(-50%);
    border-radius: 999px;
}

.vm-menu-button::after,
.vm-menu-button.is-primary::after {
    left: 26px;
    right: auto;
    bottom: 9px;
    width: min(72%, 360px);
    height: 1px;
    background: linear-gradient(90deg, hsl(calc(262.1deg + var(--vm-theme-hue-shift)) max(0%, calc(75.4% - var(--vm-theme-desaturate))) 63.3% / .9), hsl(calc(262.1deg + var(--vm-theme-hue-shift)) max(0%, calc(75.4% - var(--vm-theme-desaturate))) 63.3% / .16), transparent 88%);
    opacity: .72;
}

.vm-menu-button:hover,
.vm-menu-button:focus-visible,
.vm-menu-button.is-primary:hover,
.vm-menu-button.is-primary:focus-visible {
    color: hsl(calc(275.3deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 93.3%);
    background: linear-gradient(90deg, hsl(calc(273deg + var(--vm-theme-hue-shift)) max(0%, calc(48.8% - var(--vm-theme-desaturate))) 16.1% / .28), hsl(calc(257.1deg + var(--vm-theme-hue-shift)) max(0%, calc(28% - var(--vm-theme-desaturate))) 4.9% / .08) 80%, transparent);
    transform: translateX(4px);
}

.vm-menu-button:hover::before,
.vm-menu-button:focus-visible::before,
.vm-menu-button.is-primary:hover::before,
.vm-menu-button.is-primary:focus-visible::before {
    background: linear-gradient(180deg, hsl(calc(267.5deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 95.3% / 1), hsl(calc(259.1deg + var(--vm-theme-hue-shift)) max(0%, calc(85.4% - var(--vm-theme-desaturate))) 70.4% / .18));
    box-shadow: 0 0 18px hsl(calc(259.1deg + var(--vm-theme-hue-shift)) max(0%, calc(85.4% - var(--vm-theme-desaturate))) 70.4% / .55);
}

.vm-menu-button:hover::after,
.vm-menu-button:focus-visible::after,
.vm-menu-button.is-primary:hover::after,
.vm-menu-button.is-primary:focus-visible::after {
    background: linear-gradient(90deg, hsl(calc(265.8deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 76.3% / 1), hsl(calc(265.8deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 76.3% / .26), transparent 90%);
}


.vm-pile-shell,
.vm-pile,
.vm-pile-card,
.vm-last-action,
.vm-round-info {
    position: relative;
    z-index: 1;
}

@media (max-width: 720px) {
    .vm-menu-kicker {
        margin-bottom: 10px;
        font-size: clamp(18px, 5.1vw, 26px);
    }

    .vm-menu-button,
    .vm-menu-button.is-primary {
        min-height: clamp(42px, 5.9dvh, 50px);
        padding: 0 6px 0 21px;
    }

    .vm-menu-button::after,
    .vm-menu-button.is-primary::after {
        left: 21px;
        width: min(70%, 220px);
        bottom: 6px;
    }

    

    

    

    
}


/* V1.7.5 — épuration du centre du plateau */
.vm-pile-empty {
    display: none !important;
}

.vm-void-mark,
.vm-table-brand-diamond,
.vm-table-brand::after {
    display: none !important;
}


/* V1.7.6 — corrections menu, Cinzel et statut de sélection */
.vm-menu-panel > .vm-menu-kicker {
    display: block !important;
    position: relative;
    max-width: none;
    margin: 0 0 15px 0;
    color: hsl(calc(264.4deg + var(--vm-theme-hue-shift)) max(0%, calc(53.3% - var(--vm-theme-desaturate))) 88.2%);
    font-family: "Cinzel", Georgia, serif;
    
    font-weight: 500;
    
    letter-spacing: .08em;
    text-align: left;
    text-shadow: 0 0 16px hsl(calc(266.7deg + var(--vm-theme-hue-shift)) max(0%, calc(69.9% - var(--vm-theme-desaturate))) 62.2% / .16), 0 2px 10px rgba(0, 0, 0, .68);
}

.vm-menu-panel > .vm-menu-kicker strong {
    font-weight: 800;
}

.vm-menu-button,
.vm-menu-button:focus,
.vm-menu-button:focus-visible,
.vm-menu-button.is-primary,
.vm-menu-button.is-primary:focus,
.vm-menu-button.is-primary:focus-visible {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.vm-menu-button,
.vm-header-title,
.vm-table-brand-text,
.vm-menu-kicker {
    font-family: "Cinzel", Georgia, serif !important;
}

.vm-selection-summary {
    display: none !important;
}

.vm-player-status {
    grid-template-columns: minmax(0, 1fr) !important;
}


/* V1.7.7 — titres, bouton menu et confirmations */


.vm-header-title {
    font-size: clamp(29px, 3.05vw, 47px);
}

#vm-return-menu svg {
    width: 21px;
    height: 21px;
    display: block;
}

.vm-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 180;
    display: grid;
    place-items: center;
    padding: max(18px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: hsl(calc(252deg + var(--vm-theme-hue-shift)) max(0%, calc(71.4% - var(--vm-theme-desaturate))) 1.4% / .76);
    backdrop-filter: blur(10px);
    transition: opacity .18s ease, visibility .18s ease;
}

.vm-confirm-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.vm-confirm-panel {
    position: relative;
    width: min(100%, 520px);
    padding: clamp(24px, 4vw, 36px);
    border: 1px solid hsl(calc(272deg + var(--vm-theme-hue-shift)) max(0%, calc(78.2% - var(--vm-theme-desaturate))) 69.4% / .42);
    background:
        linear-gradient(135deg, hsl(calc(274.5deg + var(--vm-theme-hue-shift)) max(0%, calc(54.1% - var(--vm-theme-desaturate))) 14.5% / .34), transparent 45%),
        linear-gradient(180deg, hsl(calc(265deg + var(--vm-theme-hue-shift)) max(0%, calc(37.5% - var(--vm-theme-desaturate))) 6.3% / .98), hsl(calc(257.1deg + var(--vm-theme-hue-shift)) max(0%, calc(41.2% - var(--vm-theme-desaturate))) 3.3% / .99));
    box-shadow: 0 28px 80px rgba(0, 0, 0, .58), inset 0 1px 0 rgba(255,255,255,.04);
    clip-path: polygon(0 0, 94% 0, 100% 12%, 100% 100%, 6% 100%, 0 88%);
    transform: translateY(10px) scale(.985);
    transition: transform .18s ease;
}

.vm-confirm-overlay.is-visible .vm-confirm-panel {
    transform: translateY(0) scale(1);
}

.vm-confirm-panel::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, hsl(calc(268.3deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 85.9%), hsl(calc(273.8deg + var(--vm-theme-hue-shift)) max(0%, calc(54.7% - var(--vm-theme-desaturate))) 45.9%) 54%, transparent);
    box-shadow: 0 0 18px hsl(calc(259.1deg + var(--vm-theme-hue-shift)) max(0%, calc(85.4% - var(--vm-theme-desaturate))) 70.4% / .34);
}

.vm-confirm-panel h2 {
    margin: 4px 0 12px;
    color: hsl(calc(277.5deg + var(--vm-theme-hue-shift)) max(0%, calc(50% - var(--vm-theme-desaturate))) 96.9%);
    font-family: "Cinzel", Georgia, serif;
    font-size: clamp(21px, 4vw, 30px);
    font-weight: 700;
    line-height: 1.15;
}

.vm-confirm-panel > p:not(.vm-kicker) {
    margin: 0;
    color: hsl(calc(272.3deg + var(--vm-theme-hue-shift)) max(0%, calc(27.7% - var(--vm-theme-desaturate))) 90.8% / .76);
    font-size: 13px;
    line-height: 1.55;
}

.vm-confirm-actions {
    display: grid;
    grid-template-columns: 1fr 1.18fr;
    gap: 10px;
    margin-top: 24px;
}

.vm-confirm-cancel,
.vm-confirm-accept {
    min-height: 44px;
    padding: 0 14px;
    border: 0;
    color: hsl(calc(278.2deg + var(--vm-theme-hue-shift)) max(0%, calc(29.7% - var(--vm-theme-desaturate))) 92.7%);
    background: rgba(255,255,255,.035);
    font-family: "Cinzel", Georgia, serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    cursor: pointer;
    clip-path: polygon(0 0, 96% 0, 100% 18%, 100% 100%, 4% 100%, 0 82%);
    transition: color .16s ease, background .16s ease, transform .16s ease;
}

.vm-confirm-cancel {
    border-bottom: 1px solid rgba(255,255,255,.16);
}

.vm-confirm-accept {
    color: hsl(calc(271.4deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 95.9%);
    border-bottom: 1px solid hsl(calc(274.1deg + var(--vm-theme-hue-shift)) max(0%, calc(86% - var(--vm-theme-desaturate))) 72% / .72);
    background: linear-gradient(90deg, hsl(calc(276.3deg + var(--vm-theme-hue-shift)) max(0%, calc(54.3% - var(--vm-theme-desaturate))) 41.2% / .44), hsl(calc(275.5deg + var(--vm-theme-hue-shift)) max(0%, calc(60.3% - var(--vm-theme-desaturate))) 24.7% / .28));
}

.vm-confirm-cancel:hover,
.vm-confirm-cancel:focus-visible,
.vm-confirm-accept:hover,
.vm-confirm-accept:focus-visible {
    outline: 0;
    color: #fff;
    background: linear-gradient(90deg, hsl(calc(274.6deg + var(--vm-theme-hue-shift)) max(0%, calc(49% - var(--vm-theme-desaturate))) 50% / .5), hsl(calc(276deg + var(--vm-theme-hue-shift)) max(0%, calc(56.5% - var(--vm-theme-desaturate))) 24.3% / .28));
    transform: translateY(-1px);
}

@media (max-width: 720px) {
    

    .vm-header-title {
        font-size: clamp(21px, 6.4vw, 28px);
    }

    .vm-header-actions {
        gap: 4px;
    }

    .vm-confirm-actions {
        grid-template-columns: 1fr;
    }
}

/* V1.7.8 — barre de défilement des règles transparente */
.vm-rules-content {
    scrollbar-width: none;
    scrollbar-color: transparent transparent;
}

.vm-rules-content::-webkit-scrollbar {
    width: 0;
    height: 0;
    background: transparent;
}

.vm-rules-content::-webkit-scrollbar-track,
.vm-rules-content::-webkit-scrollbar-thumb,
.vm-rules-content::-webkit-scrollbar-corner {
    background: transparent;
    border: 0;
}


/* V1.7.9 — crédits d’Ardyn et position mobile du bandeau joueur */
.vm-credits-panel {
    width: min(100%, 980px);
    
}

.vm-credits-content {
    
    overscroll-behavior: contain;
    
}


.vm-credits-grid {
    display: grid;
    
    
}


.vm-credits-grid .vm-credit-block strong {
    color: hsl(calc(274deg + var(--vm-theme-hue-shift)) max(0%, calc(61.5% - var(--vm-theme-desaturate))) 78.6%);
    font-size: 10px;
    line-height: 1.35;
}

.vm-credits-grid .vm-credit-block span {
    color: hsl(calc(275deg + var(--vm-theme-hue-shift)) max(0%, calc(35.3% - var(--vm-theme-desaturate))) 93.3% / .82);
    font-size: 12px;
}

.vm-ardyn-credit {
    position: relative;
    display: grid;
    gap: 16px;
    margin-top: 10px;
    padding: clamp(18px, 3vw, 28px);
    overflow: hidden;
    background:
        linear-gradient(118deg, hsl(calc(277.7deg + var(--vm-theme-hue-shift)) max(0%, calc(58% - var(--vm-theme-desaturate))) 35.5% / .18), transparent 38%),
        linear-gradient(180deg, hsl(calc(267.3deg + var(--vm-theme-hue-shift)) max(0%, calc(44% - var(--vm-theme-desaturate))) 4.9% / .92), hsl(calc(260deg + var(--vm-theme-hue-shift)) max(0%, calc(50% - var(--vm-theme-desaturate))) 2.4% / .96));
    box-shadow: inset 0 0 0 1px hsl(calc(274.6deg + var(--vm-theme-hue-shift)) max(0%, calc(67.7% - var(--vm-theme-desaturate))) 62.4% / .2);
    clip-path: polygon(0 0, 96% 0, 100% 8%, 99% 92%, 94% 100%, 4% 100%, 0 94%);
}

.vm-ardyn-credit::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, hsl(calc(268deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 88.2%), hsl(calc(274deg + var(--vm-theme-hue-shift)) max(0%, calc(54.4% - var(--vm-theme-desaturate))) 46.5%) 58%, transparent);
    box-shadow: 0 0 18px hsl(calc(259.1deg + var(--vm-theme-hue-shift)) max(0%, calc(85.4% - var(--vm-theme-desaturate))) 70.4% / .32);
}

.vm-ardyn-credit-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
}

.vm-ardyn-credit-portrait {
    width: 66px;
    height: 66px;
    flex: 0 0 66px;
    padding: 3px;
    background: linear-gradient(145deg, hsl(calc(270.5deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 87.3% / .9), hsl(calc(275.5deg + var(--vm-theme-hue-shift)) max(0%, calc(60% - var(--vm-theme-desaturate))) 30.4% / .8));
    clip-path: polygon(8% 0, 100% 0, 94% 92%, 78% 100%, 0 92%, 0 12%);
}

.vm-ardyn-credit-portrait img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: inherit;
}

.vm-ardyn-credit-header > div:last-child {
    display: grid;
    gap: 4px;
}

.vm-ardyn-credit-header span {
    color: hsl(calc(274.5deg + var(--vm-theme-hue-shift)) max(0%, calc(71.7% - var(--vm-theme-desaturate))) 82%);
    font-family: "Cinzel", Georgia, serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .08em;
}

.vm-ardyn-credit-header strong {
    color: hsl(calc(274.3deg + var(--vm-theme-hue-shift)) max(0%, calc(29.2% - var(--vm-theme-desaturate))) 90.6% / .62);
    font-size: 11px;
    font-style: italic;
    font-weight: 500;
}

.vm-ardyn-credit-quote {
    position: relative;
    display: grid;
    gap: 10px;
}

.vm-ardyn-credit-quote p {
    margin: 0;
    color: hsl(calc(276deg + var(--vm-theme-hue-shift)) max(0%, calc(26.3% - var(--vm-theme-desaturate))) 92.5% / .8);
    font-size: 13px;
    font-style: italic;
    line-height: 1.58;
}

.vm-ardyn-credit footer {
    color: hsl(calc(274deg + var(--vm-theme-hue-shift)) max(0%, calc(61.5% - var(--vm-theme-desaturate))) 78.6%);
    font-family: "Cinzel", Georgia, serif;
    font-size: 11px;
    letter-spacing: .16em;
    text-align: right;
}


@media (max-width: 720px) {
    

    

    

    .vm-credits-grid .vm-credit-block {
        
        
        text-align: left;
    }

    .vm-ardyn-credit {
        gap: 12px;
        margin-top: 4px;
        padding: 16px 16px 18px;
    }

    .vm-ardyn-credit-portrait {
        width: 56px;
        height: 56px;
        flex-basis: 56px;
    }

    .vm-ardyn-credit-header span {
        font-size: 12px;
    }

    .vm-ardyn-credit-header strong {
        font-size: 10px;
    }

    .vm-ardyn-credit-quote p {
        font-size: 11px;
        line-height: 1.5;
    }
}


/* V1.17.5 — verrouillage atomique des écrans
   Un écran inactif est retiré du rendu, pas seulement rendu invisible. */
.vm-menu-screen[hidden],
.vm-rules-screen[hidden],
.vm-menu-subscreen[hidden],
.vm-account-screen[hidden] {
    display: none !important;
}

/* V1.8.0 — verrouillage anti-flash des écrans de menu */
.vm-menu-screen,
.vm-rules-screen,
.vm-menu-subscreen {
    background-color: hsl(calc(264deg + var(--vm-theme-hue-shift)) max(0%, calc(71.4% - var(--vm-theme-desaturate))) 1.4%);
    opacity: 1 !important;
    transition: none !important;
    isolation: isolate;
}

.vm-menu-screen:not(.is-visible),
.vm-rules-screen:not(.is-visible),
.vm-menu-subscreen:not(.is-visible) {
    visibility: hidden;
    pointer-events: none;
}

.vm-menu-screen.is-visible,
.vm-rules-screen.is-visible,
.vm-menu-subscreen.is-visible {
    visibility: visible;
    pointer-events: auto;
}

html.vm-menu-mode,
body.vm-menu-mode,
.vm-app.vm-menu-mode {
    background-color: hsl(calc(264deg + var(--vm-theme-hue-shift)) max(0%, calc(71.4% - var(--vm-theme-desaturate))) 1.4%);
}

.vm-app.vm-menu-mode > .vm-header,
.vm-app.vm-menu-mode > .vm-opponents,
.vm-app.vm-menu-mode > .vm-bark,
.vm-app.vm-menu-mode > .vm-table,
.vm-app.vm-menu-mode > .vm-player,
.vm-app.vm-menu-mode > .vm-overlay,
.vm-app.vm-menu-mode > .vm-confirm-overlay {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.vm-app:not(.vm-menu-mode) > .vm-header,
.vm-app:not(.vm-menu-mode) > .vm-opponents,
.vm-app:not(.vm-menu-mode) > .vm-bark,
.vm-app:not(.vm-menu-mode) > .vm-table,
.vm-app:not(.vm-menu-mode) > .vm-player {
    visibility: visible;
}

@media (prefers-reduced-motion: no-preference) {
    .vm-menu-screen.is-visible .vm-menu-panel,
    .vm-rules-screen.is-visible .vm-rules-panel,
    .vm-menu-subscreen.is-visible .vm-menu-modal {
        animation: vm-screen-content-in .16s ease-out both;
    }
}

@keyframes vm-screen-content-in {
    from { opacity: .72; }
    to { opacity: 1; }
}


/* V1.8.1 — crédits, verrouillage du zoom et nettoyage du plateau */


button,
a,
.vm-card-button {
    touch-action: manipulation;
}


.vm-credits-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.vm-credits-grid .vm-credit-block {
    display: grid;
    align-content: center;
    justify-items: center;
    min-height: 150px;
    padding: 22px 18px;
    gap: 9px;
    border: 1px solid rgba(205, 161, 54, .28);
    border-radius: 14px;
    
    
    clip-path: none;
    text-align: center;
}

.vm-credit-eyebrow {
    
    font-family: "Cinzel", Georgia, serif;
    font-size: 9px !important;
    font-weight: 500;
    letter-spacing: .22em;
    line-height: 1.35;
}

.vm-credit-title {
    
    font-family: "Cinzel", Georgia, serif;
    font-size: 14px !important;
    font-weight: 700;
    letter-spacing: .025em !important;
    line-height: 1.3;
}

.vm-credit-names,
.vm-credit-note {
    margin: 4px 0 0;
}

.vm-credit-names {
    color: #f4f2ef;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.55;
}

.vm-credit-note {
    
    font-size: 12px;
    font-style: italic;
    line-height: 1.45;
}

.vm-credit-link {
    color: #f7f4f1;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}


.vm-credit-music {
    margin: 2px 0 0;
    
    font-family: "Cinzel", Georgia, serif;
    font-size: 9px;
    letter-spacing: .18em;
    text-align: center;
}

.vm-option-toggle {
    min-width: 124px;
}

@media (max-width: 720px) {
    .vm-credits-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .vm-credits-grid .vm-credit-block {
        min-height: 116px;
        padding: 16px 14px;
    }

    .vm-credit-eyebrow {
        font-size: 8px !important;
    }

    .vm-credit-title {
        font-size: 12px !important;
    }

    .vm-credit-names {
        font-size: 14px;
    }

    .vm-credit-note {
        font-size: 11px;
    }

    .vm-credit-link {
        font-size: 12px;
    }
}


/* V1.8.2 — palette crédits Void Match + scroll mobile restauré */
html,
body {
    -webkit-text-size-adjust: 100%;
    touch-action: manipulation;
}

.vm-menu-modal-content,
.vm-rules-content,
.vm-credits-content {
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

.vm-hand-viewport,
.vm-exchange-hand-viewport {
    touch-action: pan-x;
}

/* Le panneau possède une vraie zone centrale compressible : le bouton Retour
   reste accessible en faisant défiler le contenu sur les petits écrans. */
.vm-credits-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    max-height: calc(100dvh - max(28px, env(safe-area-inset-top)) - max(28px, env(safe-area-inset-bottom)));
    overflow: hidden;
}

.vm-credits-content {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
}

.vm-credits-content::-webkit-scrollbar {
    width: 0;
    height: 0;
}

/* Palette des crédits alignée sur la nouvelle D.A. : noir, ivoire et violet. */


.vm-credits-grid .vm-credit-block {
    border-color: hsl(calc(274.6deg + var(--vm-theme-hue-shift)) max(0%, calc(67.7% - var(--vm-theme-desaturate))) 62.4% / .28);
    background:
        linear-gradient(125deg, hsl(calc(277.9deg + var(--vm-theme-hue-shift)) max(0%, calc(54.8% - var(--vm-theme-desaturate))) 24.3% / .18), transparent 42%),
        linear-gradient(180deg, hsl(calc(267.3deg + var(--vm-theme-hue-shift)) max(0%, calc(40.7% - var(--vm-theme-desaturate))) 5.3% / .9), hsl(calc(260deg + var(--vm-theme-hue-shift)) max(0%, calc(42.9% - var(--vm-theme-desaturate))) 2.7% / .96));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        inset 3px 0 0 hsl(calc(277.7deg + var(--vm-theme-hue-shift)) max(0%, calc(54.1% - var(--vm-theme-desaturate))) 47.8% / .46);
}

.vm-credit-eyebrow {
    color: hsl(calc(274deg + var(--vm-theme-hue-shift)) max(0%, calc(61.5% - var(--vm-theme-desaturate))) 78.6% / .65) !important;
}

.vm-credit-title {
    color: hsl(calc(273deg + var(--vm-theme-hue-shift)) max(0%, calc(69.8% - var(--vm-theme-desaturate))) 83.1%) !important;
    text-shadow: 0 0 16px hsl(calc(259.1deg + var(--vm-theme-hue-shift)) max(0%, calc(85.4% - var(--vm-theme-desaturate))) 70.4% / .08);
}

.vm-credit-names,
.vm-credit-link {
    color: hsl(calc(273.3deg + var(--vm-theme-hue-shift)) max(0%, calc(36% - var(--vm-theme-desaturate))) 95.1%);
}

.vm-credit-note {
    color: hsl(calc(274.3deg + var(--vm-theme-hue-shift)) max(0%, calc(29.2% - var(--vm-theme-desaturate))) 90.6% / .72);
}

.vm-credit-link:hover,
.vm-credit-link:focus-visible {
    color: hsl(calc(272.8deg + var(--vm-theme-hue-shift)) max(0%, calc(71.1% - var(--vm-theme-desaturate))) 82.4%);
}

.vm-credit-music {
    color: hsl(calc(274deg + var(--vm-theme-hue-shift)) max(0%, calc(61.5% - var(--vm-theme-desaturate))) 78.6% / .58);
}


#vm-credits-screen .vm-menu-back {
    border-color: hsl(calc(274.6deg + var(--vm-theme-hue-shift)) max(0%, calc(67.7% - var(--vm-theme-desaturate))) 62.4% / .28);
    color: hsl(calc(276.5deg + var(--vm-theme-hue-shift)) max(0%, calc(40.4% - var(--vm-theme-desaturate))) 88.8%);
    background: linear-gradient(90deg, hsl(calc(277.6deg + var(--vm-theme-hue-shift)) max(0%, calc(54.5% - var(--vm-theme-desaturate))) 24.1% / .3), hsl(calc(273.8deg + var(--vm-theme-hue-shift)) max(0%, calc(47.1% - var(--vm-theme-desaturate))) 6.7% / .5));
}

#vm-credits-screen .vm-menu-back:not(:disabled):hover,
#vm-credits-screen .vm-menu-back:focus-visible {
    border-color: hsl(calc(274deg + var(--vm-theme-hue-shift)) max(0%, calc(61.5% - var(--vm-theme-desaturate))) 78.6% / .62);
    color: hsl(calc(276.7deg + var(--vm-theme-hue-shift)) max(0%, calc(69.2% - var(--vm-theme-desaturate))) 94.9%);
    background: linear-gradient(90deg, hsl(calc(277.8deg + var(--vm-theme-hue-shift)) max(0%, calc(54.3% - var(--vm-theme-desaturate))) 36.1% / .45), hsl(calc(274.3deg + var(--vm-theme-hue-shift)) max(0%, calc(50% - var(--vm-theme-desaturate))) 11% / .62));
}

@media (max-width: 720px) {
    .vm-credits-panel {
        max-height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)));
    }

    .vm-credits-content {
        padding-bottom: max(20px, env(safe-area-inset-bottom));
    }
}


/* V1.8.3 — scroll crédits, fermeture selon l’ordre actif et PASSER violet */
/* Safari iOS : le sous-écran entier devient la zone de défilement. */
#vm-credits-screen {
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    scrollbar-width: none;
}

#vm-credits-screen::-webkit-scrollbar {
    width: 0;
    height: 0;
}

#vm-credits-screen .vm-credits-panel {
    display: block;
    width: min(100%, 1120px);
    max-height: none;
    margin: 0 auto;
    overflow: visible;
}

#vm-credits-screen .vm-credits-content {
    
    overflow: visible;
    touch-action: pan-y;
}

/* L’ancien hover doré possédait une spécificité plus forte que le thème violet. */


@media (max-width: 720px) {
    #vm-credits-screen {
        padding: max(10px, env(safe-area-inset-top)) 10px max(18px, env(safe-area-inset-bottom));
    }

    #vm-credits-screen .vm-credits-panel {
        width: 100%;
    }
}


/* V1.8.4 — classement des éliminés et chevauchement en révolution */
.vm-opponent-count.is-eliminated-title,
.vm-player-identity strong.is-eliminated-title {
    color: hsl(calc(274.4deg + var(--vm-theme-hue-shift)) max(0%, calc(62.8% - var(--vm-theme-desaturate))) 83.1%);
    box-shadow: inset 3px 0 0 hsl(calc(276.5deg + var(--vm-theme-hue-shift)) max(0%, calc(55.2% - var(--vm-theme-desaturate))) 51% / .72);
}

.vm-opponent.is-eliminated {
    opacity: .58;
    filter: grayscale(.35) saturate(.68) brightness(.74);
}

/* En ordre inversé, les combinaisons se chevauchent pour rester dans le plateau,
   notamment les brelans et carrés sur les écrans étroits. */


.vm-app.is-revolution .vm-pile-card:nth-child(1) { z-index: 1; }
.vm-app.is-revolution .vm-pile-card:nth-child(2) { z-index: 2; }
.vm-app.is-revolution .vm-pile-card:nth-child(3) { z-index: 3; }
.vm-app.is-revolution .vm-pile-card:nth-child(4) { z-index: 4; }

@media (max-width: 720px) {
    .vm-app.is-revolution .vm-pile-card + .vm-pile-card {
        margin-left: clamp(-54px, -10vw, -32px);
    }
}

/* Neutralisation définitive des anciens états dorés du passage obligatoire. */
.vm-secondary-button.is-forced-pass,
.vm-secondary-button.is-forced-pass:not(:disabled):hover,
.vm-secondary-button.is-forced-pass:not(:disabled):focus-visible,
.vm-secondary-button.is-forced-pass:not(:disabled):active {
    border-color: hsl(calc(273.9deg + var(--vm-theme-hue-shift)) max(0%, calc(89.9% - var(--vm-theme-desaturate))) 72.9% / .72) !important;
    color: #fff !important;
    background: linear-gradient(90deg, hsl(calc(280.2deg + var(--vm-theme-hue-shift)) max(0%, calc(60.3% - var(--vm-theme-desaturate))) 30.6%), hsl(calc(278.1deg + var(--vm-theme-hue-shift)) max(0%, calc(52.2% - var(--vm-theme-desaturate))) 51.6%) 70%, hsl(calc(280deg + var(--vm-theme-hue-shift)) max(0%, calc(62.9% - var(--vm-theme-desaturate))) 24.3%)) !important;
    box-shadow:
        inset 0 0 0 1px hsl(calc(277.6deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 82.2% / .38),
        0 0 22px hsl(calc(273.7deg + var(--vm-theme-hue-shift)) max(0%, calc(62% - var(--vm-theme-desaturate))) 56.7% / .24),
        0 12px 24px rgba(0,0,0,.28) !important;
}

.vm-secondary-button.is-forced-pass::before,
.vm-secondary-button.is-forced-pass::after {
    background: linear-gradient(90deg, hsl(calc(278.2deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 82.2% / .9), transparent) !important;
}


/* V1.8.5 — taille réellement augmentée du titre DIES NOX du menu */
.vm-menu-panel > .vm-menu-kicker {
    margin-bottom: 18px !important;
    font-size: clamp(27px, 2.35vw, 38px) !important;
    line-height: 1 !important;
}

@media (max-width: 720px) {
    .vm-menu-panel > .vm-menu-kicker {
        margin-bottom: 13px !important;
        font-size: clamp(22px, 6.2vw, 30px) !important;
    }
}

/* =========================================================
   V1.9.0 — mise en scène des actions spéciales
   Void Match · Joker · Révolution · fermeture du pli
   ========================================================= */


.vm-action-fx-shade,
.vm-action-fx-slash,
.vm-action-fx-burst,
.vm-action-fx-cards {
    position: absolute;
    inset: 0;
    pointer-events: none;
}


.vm-action-fx-slash {
    
    
    
    bottom: auto;
    
    
    
    
    
    
}

.vm-action-fx-burst {
    
    
    right: auto;
    bottom: auto;
    
    
    
    
    
    
    
}

.vm-action-fx-cards {
    
    
    right: auto;
    bottom: auto;
    
    
}


.vm-table.is-fx-running .vm-pile {
    opacity: 0;
    transition: opacity .08s linear;
}

/* VOID MATCH — les deux paires se rejoignent puis sont aspirées. */
.vm-action-fx.is-void-match .vm-action-fx-shade {
    animation: vm-fx-shade-void 1.32s ease both;
}

.vm-action-fx.is-void-match .vm-action-fx-slash {
    animation: vm-fx-slash 1.1s cubic-bezier(.2,.8,.15,1) .18s both;
}

.vm-action-fx.is-void-match .vm-action-fx-burst {
    animation: vm-fx-burst-void .72s ease-out .48s both;
}

.vm-action-fx.is-void-match .vm-action-fx-card.is-previous {
    animation: vm-fx-void-left 1.28s cubic-bezier(.18,.82,.2,1) both;
}

.vm-action-fx.is-void-match .vm-action-fx-card.is-incoming {
    animation: vm-fx-void-right 1.28s cubic-bezier(.18,.82,.2,1) both;
}

/* JOKER — interruption sombre, arrivée verticale et écrasement du pli. */
.vm-action-fx.is-joker .vm-action-fx-shade {
    animation: vm-fx-shade-joker .98s ease both;
}

.vm-action-fx.is-joker .vm-action-fx-burst {
    width: min(42vw, 340px);
    background:
        repeating-conic-gradient(from 14deg, hsl(calc(273.6deg + var(--vm-theme-hue-shift)) max(0%, calc(68.4% - var(--vm-theme-desaturate))) 59% / .4) 0 1deg, transparent 1deg 13deg),
        radial-gradient(circle, hsl(calc(274.3deg + var(--vm-theme-hue-shift)) max(0%, calc(89.1% - var(--vm-theme-desaturate))) 78.4% / .32), hsl(calc(275.3deg + var(--vm-theme-hue-shift)) max(0%, calc(62.6% - var(--vm-theme-desaturate))) 30.4% / .2) 24%, transparent 62%);
    animation: vm-fx-burst-joker .72s ease-out .13s both;
}

.vm-action-fx.is-joker .vm-action-fx-card.is-previous {
    z-index: 1;
    animation: vm-fx-joker-under .78s ease-in .04s both;
}

.vm-action-fx.is-joker .vm-action-fx-card.is-joker {
    z-index: 3;
    border-color: hsl(calc(274.1deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 84.1% / .68);
    box-shadow:
        0 30px 54px rgba(0,0,0,.72),
        0 0 0 1px rgba(255,255,255,.08) inset,
        0 0 24px hsl(calc(275.7deg + var(--vm-theme-hue-shift)) max(0%, calc(91.3% - var(--vm-theme-desaturate))) 72.9% / .52),
        0 0 72px hsl(calc(275.5deg + var(--vm-theme-hue-shift)) max(0%, calc(61% - var(--vm-theme-desaturate))) 40.2% / .36);
    animation: vm-fx-joker-arrive .94s cubic-bezier(.16,.86,.18,1) both;
}

.vm-action-fx.is-joker .vm-action-fx-card.is-joker::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    bottom: 72%;
    width: 44%;
    height: 170%;
    opacity: .74;
    background: linear-gradient(180deg, transparent, hsl(calc(275.3deg + var(--vm-theme-hue-shift)) max(0%, calc(76.6% - var(--vm-theme-desaturate))) 66.5% / .08) 26%, hsl(calc(274.9deg + var(--vm-theme-hue-shift)) max(0%, calc(90.2% - var(--vm-theme-desaturate))) 72% / .62));
    filter: blur(9px);
    transform: translateX(-50%);
}

/* RÉVOLUTION — claquement du carré et bascule temporaire du plateau. */


.vm-action-fx.is-revolution .vm-action-fx-shade {
    animation: vm-fx-shade-revolution 1.2s ease both;
}

.vm-action-fx.is-revolution .vm-action-fx-burst {
    width: min(68vw, 560px);
    animation: vm-fx-burst-revolution 1.08s cubic-bezier(.18,.8,.2,1) .06s both;
}

.vm-action-fx.is-revolution .vm-action-fx-card {
    border-color: hsl(calc(275.9deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 81% / .52);
    animation: vm-fx-revolution-cards 1.12s cubic-bezier(.15,.85,.2,1) both;
}

.vm-action-fx.is-revolution.is-counter .vm-action-fx-burst {
    animation-direction: reverse;
}

/* FERMETURE — impact bref puis balayage immédiat du pli. */
.vm-action-fx.is-closing .vm-action-fx-shade {
    animation: vm-fx-shade-closing .6s ease both;
}

.vm-action-fx.is-closing .vm-action-fx-slash {
    top: 53%;
    height: 2px;
    transform: rotate(0deg) scaleX(0);
    animation: vm-fx-close-slash .42s ease-out .1s both;
}

.vm-action-fx.is-closing .vm-action-fx-burst {
    width: min(34vw, 270px);
    animation: vm-fx-burst-close .46s ease-out both;
}

.vm-action-fx.is-closing .vm-action-fx-card {
    border-color: hsl(calc(274.6deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 84.7% / .58);
    animation: vm-fx-close-card .6s cubic-bezier(.16,.84,.2,1) both;
}

/* Le bandeau possède une animation propre à chaque événement. */


.vm-match-flash.is-void-match.is-active {
    animation: vm-flash-void-match 1.34s ease both !important;
}

.vm-match-flash.is-joker.is-active {
    animation: vm-flash-joker 1.02s ease both !important;
}

.vm-match-flash.is-revolution.is-active {
    animation: vm-flash-revolution 1.28s ease both !important;
}

.vm-match-flash.is-closing.is-active {
    place-content: end center;
    padding-bottom: clamp(76px, 12vh, 116px);
    background: transparent;
    animation: vm-flash-closing .68s ease both !important;
}

.vm-match-flash.is-void-match span {
    font-style: italic;
    transform: skewX(-8deg);
}

.vm-match-flash.is-joker span {
    letter-spacing: .18em;
}


.vm-match-flash.is-revolution small {
    padding: 5px 10px;
    border: 1px solid hsl(calc(275.9deg + var(--vm-theme-hue-shift)) max(0%, calc(89.7% - var(--vm-theme-desaturate))) 81% / .32);
    background: hsl(calc(275.7deg + var(--vm-theme-hue-shift)) max(0%, calc(60.7% - var(--vm-theme-desaturate))) 12% / .52);
}

.vm-match-flash.is-closing span {
    padding: 6px 15px;
    border-left: 3px solid hsl(calc(274.4deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 75.7%);
    color: hsl(calc(281.3deg + var(--vm-theme-hue-shift)) max(0%, calc(61.5% - var(--vm-theme-desaturate))) 94.9%);
    background: linear-gradient(90deg, hsl(calc(277.2deg + var(--vm-theme-hue-shift)) max(0%, calc(58.5% - var(--vm-theme-desaturate))) 26.5% / .82), hsl(calc(276.9deg + var(--vm-theme-hue-shift)) max(0%, calc(61.9% - var(--vm-theme-desaturate))) 8.2% / .56), transparent);
    box-shadow: 0 10px 24px rgba(0,0,0,.3);
    
    letter-spacing: .08em;
    text-shadow: 0 0 18px hsl(calc(276.8deg + var(--vm-theme-hue-shift)) max(0%, calc(84.9% - var(--vm-theme-desaturate))) 71.4% / .52);
}

.vm-match-flash.is-closing small {
    margin-top: 5px;
    color: hsl(calc(278.7deg + var(--vm-theme-hue-shift)) max(0%, calc(37.2% - var(--vm-theme-desaturate))) 76.3%);
    font-size: 8px;
}

@keyframes vm-fx-shade-void {
    0%, 100% { opacity: 0; }
    16%, 72% { opacity: .55; }
}

@keyframes vm-fx-shade-joker {
    0%, 100% { opacity: 0; }
    12%, 76% { opacity: .82; }
}

@keyframes vm-fx-shade-revolution {
    0%, 100% { opacity: 0; }
    14%, 72% { opacity: .52; }
}

@keyframes vm-fx-shade-closing {
    0%, 100% { opacity: 0; }
    12%, 55% { opacity: .24; }
}

@keyframes vm-fx-slash {
    0% { opacity: 0; transform: rotate(-8deg) scaleX(0); }
    18% { opacity: 1; }
    48% { opacity: 1; transform: rotate(-8deg) scaleX(1); }
    100% { opacity: 0; transform: rotate(-8deg) scaleX(1.08); filter: blur(4px); }
}

@keyframes vm-fx-void-left {
    0% {
        opacity: 0;
        filter: blur(4px);
        transform: translate(calc(-50% + var(--vm-fx-offset) - 210px), -50%) rotate(-8deg) scale(.88);
    }
    18% { opacity: 1; filter: blur(0); }
    46%, 61% {
        opacity: 1;
        transform: translate(calc(-50% + var(--vm-fx-offset)), -50%) rotate(-2deg) scale(1);
    }
    76% {
        opacity: 1;
        filter: brightness(1.35) saturate(1.18);
        transform: translate(-50%, -50%) rotate(3deg) scale(.74);
    }
    100% {
        opacity: 0;
        filter: blur(9px) brightness(1.65);
        transform: translate(-50%, -50%) rotate(18deg) scale(.04);
    }
}

@keyframes vm-fx-void-right {
    0% {
        opacity: 0;
        filter: blur(4px);
        transform: translate(calc(-50% + var(--vm-fx-offset) + 210px), -50%) rotate(8deg) scale(.88);
    }
    18% { opacity: 1; filter: blur(0); }
    46%, 61% {
        opacity: 1;
        transform: translate(calc(-50% + var(--vm-fx-offset)), -50%) rotate(2deg) scale(1);
    }
    76% {
        opacity: 1;
        filter: brightness(1.35) saturate(1.18);
        transform: translate(-50%, -50%) rotate(-3deg) scale(.74);
    }
    100% {
        opacity: 0;
        filter: blur(9px) brightness(1.65);
        transform: translate(-50%, -50%) rotate(-18deg) scale(.04);
    }
}

@keyframes vm-fx-burst-void {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.06) rotate(0deg); }
    35% { opacity: .86; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.12) rotate(28deg); }
}

@keyframes vm-fx-joker-under {
    0% {
        opacity: .88;
        transform: translate(calc(-50% + var(--vm-fx-offset)), -50%) rotate(-2deg) scale(.95);
    }
    42% { opacity: .72; }
    100% {
        opacity: 0;
        filter: blur(5px) brightness(.42);
        transform: translate(calc(-50% + var(--vm-fx-offset)), -42%) rotate(8deg) scale(.18);
    }
}

@keyframes vm-fx-joker-arrive {
    0% {
        opacity: 0;
        filter: blur(7px) brightness(1.6);
        transform: translate(calc(-50% + var(--vm-fx-offset)), calc(-50% - 170px)) rotate(-8deg) scale(1.24);
    }
    24% { opacity: 1; }
    48% {
        opacity: 1;
        filter: blur(0) brightness(1.22);
        transform: translate(calc(-50% + var(--vm-fx-offset)), -50%) rotate(1deg) scale(1.12);
    }
    62%, 82% {
        opacity: 1;
        filter: brightness(1);
        transform: translate(calc(-50% + var(--vm-fx-offset)), -50%) rotate(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--vm-fx-offset)), -50%) scale(.96);
    }
}

@keyframes vm-fx-burst-joker {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.08) rotate(-18deg); }
    28% { opacity: .68; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(.92) rotate(22deg); }
}


@keyframes vm-fx-revolution-cards {
    0% {
        opacity: 0;
        filter: blur(3px);
        transform: translate(calc(-50% + var(--vm-fx-offset)), calc(-50% - 80px)) rotate(-7deg) scale(.82);
    }
    27% { opacity: 1; filter: blur(0); }
    48%, 70% {
        opacity: 1;
        transform: translate(calc(-50% + var(--vm-fx-offset)), -50%) rotate(1deg) scale(1.04);
    }
    83% {
        opacity: 1;
        filter: brightness(1.38);
        transform: translate(calc(-50% + var(--vm-fx-offset)), -50%) rotate(0deg) scale(.95);
    }
    100% {
        opacity: 0;
        filter: blur(5px);
        transform: translate(calc(-50% + var(--vm-fx-offset)), -50%) rotate(0deg) scale(.72);
    }
}

@keyframes vm-fx-burst-revolution {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.04) rotate(-26deg); }
    30% { opacity: .72; }
    70% { opacity: .36; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.2) rotate(34deg); }
}

@keyframes vm-fx-close-card {
    0% {
        opacity: 0;
        filter: blur(4px) brightness(1.35);
        transform: translate(calc(-50% + var(--vm-fx-offset)), calc(-50% - 96px)) scale(1.12);
    }
    24% {
        opacity: 1;
        filter: blur(0) brightness(1.3);
        transform: translate(calc(-50% + var(--vm-fx-offset)), -50%) scale(1.06);
    }
    48% {
        opacity: 1;
        filter: brightness(1);
        transform: translate(calc(-50% + var(--vm-fx-offset)), -50%) scale(1);
    }
    100% {
        opacity: 0;
        filter: blur(3px);
        transform: translate(calc(-50% + var(--vm-fx-offset) + 260px), calc(-50% - 8px)) rotate(11deg) scale(.92);
    }
}

@keyframes vm-fx-close-slash {
    0% { opacity: 0; transform: rotate(0) scaleX(0); }
    35% { opacity: 1; }
    100% { opacity: 0; transform: rotate(0) scaleX(1); }
}

@keyframes vm-fx-burst-close {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.08); }
    35% { opacity: .8; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(.82); }
}

@keyframes vm-flash-void-match {
    0%, 100% { opacity: 0; visibility: hidden; }
    15% { opacity: 0; visibility: visible; }
    29%, 59% { opacity: 1; visibility: visible; }
    100% { visibility: hidden; }
}

@keyframes vm-flash-joker {
    0%, 100% { opacity: 0; visibility: hidden; }
    18% { opacity: 0; visibility: visible; }
    34%, 68% { opacity: 1; visibility: visible; }
    100% { visibility: hidden; }
}

@keyframes vm-flash-revolution {
    0%, 100% { opacity: 0; visibility: hidden; }
    16% { opacity: 0; visibility: visible; }
    30%, 66% { opacity: 1; visibility: visible; }
    100% { visibility: hidden; }
}

@keyframes vm-flash-closing {
    0%, 100% { opacity: 0; visibility: hidden; transform: translateX(-16px); }
    18% { opacity: 0; visibility: visible; }
    34%, 68% { opacity: 1; visibility: visible; transform: translateX(0); }
    100% { visibility: hidden; transform: translateX(16px); }
}

@media (max-width: 720px) {

    

    

    .vm-match-flash.is-closing {
        padding-bottom: 66px;
    }

    
}

@media (prefers-reduced-motion: reduce) {
    .vm-action-fx-card,
    .vm-action-fx-shade,
    .vm-action-fx-slash,
    .vm-action-fx-burst,
    .vm-table.is-fx-revolution,
    .vm-match-flash.is-active {
        animation-duration: .18s !important;
        animation-delay: 0s !important;
    }
}

/* Ajustements de lisibilité des effets au-dessus du plateau. */
.vm-match-flash.is-void-match {
    background: radial-gradient(circle, hsl(calc(275.8deg + var(--vm-theme-hue-shift)) max(0%, calc(59.6% - var(--vm-theme-desaturate))) 40.8% / .32), hsl(calc(252deg + var(--vm-theme-hue-shift)) max(0%, calc(55.6% - var(--vm-theme-desaturate))) 1.8% / .5) 67%, transparent 100%);
}

.vm-match-flash.is-joker {
    background: radial-gradient(circle, hsl(calc(275.4deg + var(--vm-theme-hue-shift)) max(0%, calc(63.8% - var(--vm-theme-desaturate))) 29.2% / .4), hsl(calc(255deg + var(--vm-theme-hue-shift)) max(0%, calc(66.7% - var(--vm-theme-desaturate))) 1.2% / .7) 66%);
}

.vm-match-flash.is-revolution {
    background: radial-gradient(circle, hsl(calc(275.5deg + var(--vm-theme-hue-shift)) max(0%, calc(57.4% - var(--vm-theme-desaturate))) 45.1% / .3), hsl(calc(252deg + var(--vm-theme-hue-shift)) max(0%, calc(55.6% - var(--vm-theme-desaturate))) 1.8% / .46) 70%, transparent 100%);
}

.vm-action-fx.is-joker .vm-action-fx-cards::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -32px;
    width: clamp(28px, 8vw, 58px);
    height: min(62vh, 430px);
    opacity: 0;
    background: linear-gradient(180deg, transparent, hsl(calc(274.6deg + var(--vm-theme-hue-shift)) max(0%, calc(54.7% - var(--vm-theme-desaturate))) 44.1% / .06) 24%, hsl(calc(276.2deg + var(--vm-theme-hue-shift)) max(0%, calc(83.4% - var(--vm-theme-desaturate))) 69.2% / .62) 100%);
    filter: blur(12px);
    transform: translateX(-50%) translateY(-70%);
    animation: vm-fx-joker-trail .92s ease-out both;
}

@keyframes vm-fx-joker-trail {
    0% { opacity: 0; transform: translateX(-50%) translateY(-86%) scaleY(.4); }
    20% { opacity: .82; }
    58% { opacity: .64; transform: translateX(-50%) translateY(-16%) scaleY(1); }
    100% { opacity: 0; transform: translateX(-50%) translateY(12%) scaleY(.35); }
}

/* =========================================================
   V1.9.1 — mise en scène lisible des actions spéciales
   ========================================================= */

.vm-app.vm-menu-mode > .vm-action-fx,
.vm-app.vm-menu-mode > .vm-match-flash {
    display: none !important;
}

.vm-table.is-fx-hold .vm-pile,
.vm-table.is-fx-running .vm-pile {
    opacity: 0 !important;
    visibility: hidden !important;
}

.vm-action-fx {
    position: fixed !important;
    inset: 0 !important;
    z-index: 90 !important;
    overflow: hidden !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    isolation: isolate;
}

.vm-action-fx.is-active {
    opacity: 1;
    visibility: visible;
}

.vm-action-fx:not(.is-active) .vm-action-fx-shade,
.vm-action-fx:not(.is-active) .vm-action-fx-vignette,
.vm-action-fx:not(.is-active) .vm-action-fx-grid,
.vm-action-fx:not(.is-active) .vm-action-fx-slash,
.vm-action-fx:not(.is-active) .vm-action-fx-burst,
.vm-action-fx:not(.is-active) .vm-action-fx-card,
.vm-action-fx:not(.is-active) .vm-action-fx-cards::before {
    animation: none !important;
}

.vm-action-fx-shade,
.vm-action-fx-vignette,
.vm-action-fx-grid,
.vm-action-fx-slash,
.vm-action-fx-burst,
.vm-action-fx-cards {
    position: absolute;
    pointer-events: none;
}

.vm-action-fx-shade,
.vm-action-fx-vignette,
.vm-action-fx-grid {
    inset: 0;
}

.vm-action-fx-shade {
    z-index: 0;
    opacity: 0;
    background: hsl(calc(264deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 1% / .86);
}

.vm-action-fx-vignette {
    z-index: 1;
    opacity: 0;
    background:
        radial-gradient(circle at 50% 48%, transparent 0 20%, hsl(calc(274.8deg + var(--vm-theme-hue-shift)) max(0%, calc(66% - var(--vm-theme-desaturate))) 9.2% / .18) 42%, rgba(0, 0, 0, .86) 100%),
        linear-gradient(115deg, transparent 0 42%, hsl(calc(274.9deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 74.7% / .16) 48%, transparent 54%);
}

.vm-action-fx-grid {
    z-index: 1;
    opacity: 0;
    background-image:
        linear-gradient(hsl(calc(273deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 80.4% / .12) 1px, transparent 1px),
        linear-gradient(90deg, hsl(calc(273deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 80.4% / .12) 1px, transparent 1px);
    background-size: 38px 38px;
    mask-image: radial-gradient(circle at center, #000 0 34%, transparent 76%);
    transform: perspective(500px) rotateX(63deg) scale(1.4);
    transform-origin: 50% 68%;
}

.vm-action-fx-slash {
    z-index: 4;
    left: -14%;
    right: -14%;
    top: 49%;
    height: 7px;
    opacity: 0;
    background: linear-gradient(90deg, transparent 2%, hsl(calc(276deg + var(--vm-theme-hue-shift)) max(0%, calc(63.9% - var(--vm-theme-desaturate))) 55.5%) 18%, hsl(calc(279.4deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 93.7%) 46%, #fff 50%, hsl(calc(275.7deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 79.2%) 54%, hsl(calc(276.1deg + var(--vm-theme-hue-shift)) max(0%, calc(64.7% - var(--vm-theme-desaturate))) 43.3%) 82%, transparent 98%);
    box-shadow:
        0 0 12px hsl(calc(283deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 91% / .96),
        0 0 38px hsl(calc(276.7deg + var(--vm-theme-hue-shift)) max(0%, calc(80.9% - var(--vm-theme-desaturate))) 63.1% / .9),
        0 0 90px hsl(calc(275.9deg + var(--vm-theme-hue-shift)) max(0%, calc(66.3% - var(--vm-theme-desaturate))) 36.1% / .62);
    transform: rotate(-8deg) scaleX(0);
    transform-origin: center;
}

.vm-action-fx-burst {
    z-index: 2;
    left: 50%;
    top: 48%;
    width: min(92vw, 760px);
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: 0;
    background:
        repeating-conic-gradient(from 0deg, hsl(calc(278deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 86.1% / .72) 0 1deg, transparent 1deg 8deg),
        radial-gradient(circle, rgba(255,255,255,.82) 0 2%, hsl(calc(277.3deg + var(--vm-theme-hue-shift)) max(0%, calc(90.4% - var(--vm-theme-desaturate))) 71.4% / .46) 8%, hsl(calc(276deg + var(--vm-theme-hue-shift)) max(0%, calc(62.5% - var(--vm-theme-desaturate))) 40.8% / .2) 28%, transparent 62%);
    filter: blur(.15px);
    transform: translate(-50%, -50%) scale(.04) rotate(0deg);
}

.vm-action-fx-cards {
    z-index: 5;
    left: 50%;
    top: 48%;
    width: 1px;
    height: 1px;
}

.vm-action-fx-card {
    position: absolute;
    left: 0;
    top: 0;
    width: clamp(84px, 12vw, 132px) !important;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border: 2px solid hsl(calc(277.3deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 85.5% / .64);
    border-radius: clamp(10px, 1.8vw, 16px);
    opacity: 0;
    background: hsl(calc(270deg + var(--vm-theme-hue-shift)) max(0%, calc(62.5% - var(--vm-theme-desaturate))) 3.1%);
    box-shadow:
        0 34px 70px rgba(0,0,0,.8),
        0 0 0 1px rgba(255,255,255,.08) inset,
        0 0 32px hsl(calc(277.7deg + var(--vm-theme-hue-shift)) max(0%, calc(82.2% - var(--vm-theme-desaturate))) 64.7% / .44),
        0 0 86px hsl(calc(275.5deg + var(--vm-theme-hue-shift)) max(0%, calc(67.3% - var(--vm-theme-desaturate))) 33.5% / .34);
    transform: translate(-50%, -50%);
    will-change: transform, opacity, filter;
}

.vm-fx-card-face,
.vm-fx-card-image,
.vm-fx-card-fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.vm-fx-card-face {
    display: block;
    overflow: hidden;
    border-radius: inherit;
    background: hsl(calc(270deg + var(--vm-theme-hue-shift)) max(0%, calc(62.5% - var(--vm-theme-desaturate))) 3.1%);
}

.vm-fx-card-image {
    z-index: 2;
    object-fit: cover;
    opacity: 0;
    transition: opacity .08s linear;
}

.vm-fx-card-face.is-image-ready .vm-fx-card-image {
    opacity: 1;
}

.vm-fx-card-fallback {
    z-index: 1;
    display: grid !important;
    place-content: center;
    border-radius: inherit;
}

/* VOID MATCH : les deux paires convergent, l'écran est tranché, puis tout est aspiré. */
.vm-action-fx.is-active.is-void-match .vm-action-fx-shade {
    animation: vm-v2-shade-void 1.48s ease both !important;
}

.vm-action-fx.is-active.is-void-match .vm-action-fx-vignette {
    animation: vm-v2-vignette-void 1.48s ease both !important;
}

.vm-action-fx.is-active.is-void-match .vm-action-fx-slash {
    animation: vm-v2-slash-void 1.1s cubic-bezier(.16,.84,.16,1) .22s both !important;
}

.vm-action-fx.is-active.is-void-match .vm-action-fx-burst {
    animation: vm-v2-burst-void .82s cubic-bezier(.16,.82,.18,1) .55s both !important;
}

.vm-action-fx.is-active.is-void-match .vm-action-fx-card.is-previous {
    animation: vm-v2-void-previous 1.45s cubic-bezier(.16,.82,.18,1) both !important;
}

.vm-action-fx.is-active.is-void-match .vm-action-fx-card.is-incoming {
    animation: vm-v2-void-incoming 1.45s cubic-bezier(.16,.82,.18,1) both !important;
}

/* JOKER : le pli est écrasé, puis le Joker domine seul le centre. */
.vm-action-fx.is-active.is-joker .vm-action-fx-shade {
    animation: vm-v2-shade-joker 1.18s ease both !important;
}

.vm-action-fx.is-active.is-joker .vm-action-fx-vignette {
    animation: vm-v2-vignette-joker 1.18s ease both !important;
}

.vm-action-fx.is-active.is-joker .vm-action-fx-burst {
    width: min(70vw, 560px);
    animation: vm-v2-burst-joker .82s ease-out .18s both !important;
}

.vm-action-fx.is-active.is-joker .vm-action-fx-card.is-previous {
    z-index: 1;
    animation: vm-v2-joker-under .82s ease-in .08s both !important;
}

.vm-action-fx.is-active.is-joker .vm-action-fx-card.is-joker {
    z-index: 4;
    border-color: hsl(calc(281.2deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 90.6% / .86);
    animation: vm-v2-joker-arrive 1.14s cubic-bezier(.14,.88,.18,1) both !important;
}

.vm-action-fx.is-active.is-joker .vm-action-fx-cards::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    bottom: -38px;
    width: clamp(54px, 9vw, 90px);
    height: min(78vh, 680px);
    opacity: 0;
    background: linear-gradient(180deg, transparent, hsl(calc(276.4deg + var(--vm-theme-hue-shift)) max(0%, calc(61.4% - var(--vm-theme-desaturate))) 43.7% / .1) 24%, hsl(calc(278.8deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 77.8% / .82));
    filter: blur(15px);
    transform: translateX(-50%) translateY(-82%);
    animation: vm-v2-joker-trail 1.1s ease-out both !important;
}

/* RÉVOLUTION : l'écran bascule, le carré frappe et la grille change d'ordre. */
.vm-table.is-fx-revolution {
    animation: vm-v2-table-revolution 1.36s cubic-bezier(.16,.84,.16,1) both !important;
    transform-origin: 50% 52%;
}

.vm-action-fx.is-active.is-revolution .vm-action-fx-shade {
    animation: vm-v2-shade-revolution 1.38s ease both !important;
}

.vm-action-fx.is-active.is-revolution .vm-action-fx-vignette {
    animation: vm-v2-vignette-revolution 1.38s ease both !important;
}

.vm-action-fx.is-active.is-revolution .vm-action-fx-grid {
    animation: vm-v2-grid-revolution 1.32s cubic-bezier(.16,.82,.18,1) both !important;
}

.vm-action-fx.is-active.is-revolution .vm-action-fx-burst {
    animation: vm-v2-burst-revolution 1.14s cubic-bezier(.16,.82,.18,1) .08s both !important;
}

.vm-action-fx.is-active.is-revolution .vm-action-fx-card {
    animation: vm-v2-revolution-card 1.3s cubic-bezier(.14,.86,.18,1) both !important;
}

.vm-action-fx.is-active.is-revolution.is-counter .vm-action-fx-grid {
    animation-direction: reverse !important;
}

/* FERMETURE : impact sec, annonce claire, puis un seul balayage. */
.vm-action-fx.is-active.is-closing .vm-action-fx-shade {
    animation: vm-v2-shade-closing .72s ease both !important;
}

.vm-action-fx.is-active.is-closing .vm-action-fx-vignette {
    animation: vm-v2-vignette-closing .72s ease both !important;
}

.vm-action-fx.is-active.is-closing .vm-action-fx-slash {
    top: 52%;
    height: 5px;
    transform: rotate(0deg) scaleX(0);
    animation: vm-v2-slash-closing .54s ease-out .1s both !important;
}

.vm-action-fx.is-active.is-closing .vm-action-fx-burst {
    width: min(56vw, 420px);
    animation: vm-v2-burst-closing .55s ease-out both !important;
}

.vm-action-fx.is-active.is-closing .vm-action-fx-card {
    animation: vm-v2-closing-card .7s cubic-bezier(.14,.88,.2,1) both !important;
}

/* Annonce plein écran : volontairement massive et indépendante du plateau. */
.vm-match-flash {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100 !important;
    display: grid !important;
    place-content: center !important;
    gap: 9px !important;
    overflow: hidden;
    padding: 20px !important;
    opacity: 0;
    visibility: hidden;
    color: #fff;
    text-align: center;
    pointer-events: none;
    background: transparent !important;
    isolation: isolate;
}

.vm-match-flash::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -12%;
    right: -12%;
    top: 50%;
    height: clamp(112px, 24vh, 230px);
    opacity: 0;
    background:
        linear-gradient(92deg, transparent 0 3%, hsl(calc(274.3deg + var(--vm-theme-hue-shift)) max(0%, calc(70% - var(--vm-theme-desaturate))) 3.9% / .96) 11% 89%, transparent 97%),
        linear-gradient(90deg, hsl(calc(278.7deg + var(--vm-theme-hue-shift)) max(0%, calc(69.9% - var(--vm-theme-desaturate))) 26.1%), hsl(calc(279.1deg + var(--vm-theme-hue-shift)) max(0%, calc(62.7% - var(--vm-theme-desaturate))) 55.9%) 45%, hsl(calc(279deg + var(--vm-theme-hue-shift)) max(0%, calc(64.1% - var(--vm-theme-desaturate))) 30.6%));
    clip-path: polygon(0 24%, 14% 8%, 48% 16%, 78% 0, 100% 22%, 95% 82%, 63% 91%, 28% 80%, 0 100%);
    transform: translateY(-50%) rotate(-3deg) scaleX(.12);
    box-shadow: 0 0 90px hsl(calc(277.4deg + var(--vm-theme-hue-shift)) max(0%, calc(65% - var(--vm-theme-desaturate))) 39.2% / .5);
}

.vm-match-flash::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: -15%;
    right: -15%;
    top: 50%;
    height: 4px;
    opacity: 0;
    background: linear-gradient(90deg, transparent, hsl(calc(274.9deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 89.2%) 18%, #fff 50%, hsl(calc(274.7deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 74.9%) 82%, transparent);
    box-shadow: 0 0 24px hsl(calc(273.5deg + var(--vm-theme-hue-shift)) max(0%, calc(92.7% - var(--vm-theme-desaturate))) 73.1%), 0 0 70px hsl(calc(274.7deg + var(--vm-theme-hue-shift)) max(0%, calc(55.1% - var(--vm-theme-desaturate))) 50.2% / .86);
    transform: rotate(-6deg) scaleX(0);
}

.vm-match-flash span,
.vm-match-flash small {
    position: relative;
    z-index: 2;
    opacity: 0;
}

.vm-match-flash span {
    color: hsl(calc(273.8deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 96.9%) !important;
    font-family: Cinzel, Georgia, serif;
    font-size: clamp(48px, 11vw, 112px) !important;
    font-weight: 900 !important;
    letter-spacing: .045em !important;
    line-height: .9;
    text-shadow:
        4px 5px 0 hsl(calc(280deg + var(--vm-theme-hue-shift)) max(0%, calc(76.5% - var(--vm-theme-desaturate))) 10% / .94),
        0 0 24px hsl(calc(276.3deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 84.1% / .88),
        0 0 62px hsl(calc(275.8deg + var(--vm-theme-hue-shift)) max(0%, calc(57.5% - var(--vm-theme-desaturate))) 49.8% / .7) !important;
}

.vm-match-flash small {
    justify-self: center;
    padding: 6px 14px;
    border: 1px solid hsl(calc(277.3deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 87.1% / .44);
    color: hsl(calc(277.1deg + var(--vm-theme-hue-shift)) max(0%, calc(66.3% - var(--vm-theme-desaturate))) 83.7%) !important;
    background: hsl(calc(277.9deg + var(--vm-theme-hue-shift)) max(0%, calc(65.5% - var(--vm-theme-desaturate))) 5.7% / .78);
    font-size: clamp(9px, 2vw, 14px) !important;
    font-weight: 900;
    letter-spacing: .22em !important;
    text-shadow: none !important;
}

.vm-match-flash.is-active {
    opacity: 1;
    visibility: visible;
    animation: vm-v2-flash-shell 1.28s ease both !important;
}

.vm-match-flash.is-active::before {
    animation: vm-v2-flash-panel 1.24s cubic-bezier(.16,.84,.18,1) both;
}

.vm-match-flash.is-active::after {
    animation: vm-v2-flash-line .92s cubic-bezier(.16,.84,.18,1) .12s both;
}

.vm-match-flash.is-active span {
    animation: vm-v2-flash-title 1.16s cubic-bezier(.14,.88,.2,1) .1s both;
}

.vm-match-flash.is-active small {
    animation: vm-v2-flash-subtitle 1.05s ease .22s both;
}

.vm-match-flash.is-joker span {
    transform: rotate(-3deg);
}

.vm-match-flash.is-revolution span {
    font-size: clamp(42px, 9vw, 94px) !important;
}

.vm-match-flash.is-closing span {
    font-size: clamp(34px, 8vw, 78px) !important;
}

.vm-match-flash.is-closing::before {
    height: clamp(94px, 19vh, 170px);
}

/* Ambiance persistante et lisible pendant la révolution. */
.vm-app.is-revolution::after {
    z-index: -1;
    opacity: 1;
    background:
        repeating-linear-gradient(118deg, hsl(calc(277.2deg + var(--vm-theme-hue-shift)) max(0%, calc(86.6% - var(--vm-theme-desaturate))) 70.8% / .025) 0 2px, transparent 2px 28px),
        radial-gradient(circle at 50% 44%, hsl(calc(276.4deg + var(--vm-theme-hue-shift)) max(0%, calc(59.5% - var(--vm-theme-desaturate))) 50.6% / .28), transparent 48%),
        linear-gradient(180deg, hsl(calc(277.1deg + var(--vm-theme-hue-shift)) max(0%, calc(70.1% - var(--vm-theme-desaturate))) 24.9% / .16), hsl(calc(274.3deg + var(--vm-theme-hue-shift)) max(0%, calc(63.6% - var(--vm-theme-desaturate))) 4.3% / .08) 45%, hsl(calc(276.1deg + var(--vm-theme-hue-shift)) max(0%, calc(64.1% - var(--vm-theme-desaturate))) 28.4% / .12));
}


@keyframes vm-v2-shade-void {
    0%, 100% { opacity: 0; }
    10%, 78% { opacity: .78; }
}

@keyframes vm-v2-vignette-void {
    0%, 100% { opacity: 0; }
    18%, 76% { opacity: 1; }
}

@keyframes vm-v2-slash-void {
    0% { opacity: 0; transform: rotate(-8deg) scaleX(0); }
    20% { opacity: 1; }
    48% { opacity: 1; transform: rotate(-8deg) scaleX(1); }
    100% { opacity: 0; transform: rotate(-8deg) scaleX(1.12); filter: blur(8px); }
}

@keyframes vm-v2-void-previous {
    0% { opacity: 1; transform: translate(calc(-50% + var(--vm-fx-offset)), -50%) rotate(-4deg) scale(.96); }
    28%, 58% { opacity: 1; transform: translate(calc(-50% + var(--vm-fx-offset) - 24px), -50%) rotate(-2deg) scale(1.04); }
    72% { opacity: 1; filter: brightness(1.45); transform: translate(-50%, -50%) rotate(4deg) scale(.72); }
    100% { opacity: 0; filter: blur(12px) brightness(1.9); transform: translate(-50%, -50%) rotate(28deg) scale(.02); }
}

@keyframes vm-v2-void-incoming {
    0% { opacity: 0; filter: blur(8px); transform: translate(calc(-50% + var(--vm-fx-offset) + var(--vm-fx-origin-x)), calc(-50% + var(--vm-fx-origin-y))) rotate(10deg) scale(.82); }
    18% { opacity: 1; }
    36%, 58% { opacity: 1; filter: blur(0); transform: translate(calc(-50% + var(--vm-fx-offset) + 24px), -50%) rotate(2deg) scale(1.04); }
    72% { opacity: 1; filter: brightness(1.45); transform: translate(-50%, -50%) rotate(-4deg) scale(.72); }
    100% { opacity: 0; filter: blur(12px) brightness(1.9); transform: translate(-50%, -50%) rotate(-28deg) scale(.02); }
}

@keyframes vm-v2-burst-void {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.03) rotate(-20deg); }
    32% { opacity: .95; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.22) rotate(34deg); }
}

@keyframes vm-v2-shade-joker {
    0%, 100% { opacity: 0; }
    8%, 84% { opacity: .9; }
}

@keyframes vm-v2-vignette-joker {
    0%, 100% { opacity: 0; }
    16%, 82% { opacity: 1; }
}

@keyframes vm-v2-joker-under {
    0% { opacity: .92; transform: translate(calc(-50% + var(--vm-fx-offset)), -50%) rotate(-2deg) scale(.96); }
    44% { opacity: .7; filter: brightness(.62); }
    100% { opacity: 0; filter: blur(7px) brightness(.28); transform: translate(calc(-50% + var(--vm-fx-offset)), -38%) rotate(12deg) scale(.12); }
}

@keyframes vm-v2-joker-arrive {
    0% { opacity: 0; filter: blur(10px) brightness(1.8); transform: translate(calc(-50% + var(--vm-fx-offset) + var(--vm-fx-origin-x)), calc(-50% + var(--vm-fx-origin-y))) rotate(-12deg) scale(1.3); }
    22% { opacity: 1; }
    46% { opacity: 1; filter: blur(0) brightness(1.35); transform: translate(calc(-50% + var(--vm-fx-offset)), -50%) rotate(2deg) scale(1.18); }
    62%, 86% { opacity: 1; filter: brightness(1); transform: translate(calc(-50% + var(--vm-fx-offset)), -50%) rotate(0deg) scale(1.06); }
    100% { opacity: 0; transform: translate(calc(-50% + var(--vm-fx-offset)), -50%) scale(.98); }
}

@keyframes vm-v2-joker-trail {
    0% { opacity: 0; transform: translateX(-50%) translateY(-88%) scaleY(.35); }
    18% { opacity: .96; }
    58% { opacity: .76; transform: translateX(-50%) translateY(-12%) scaleY(1); }
    100% { opacity: 0; transform: translateX(-50%) translateY(18%) scaleY(.28); }
}

@keyframes vm-v2-burst-joker {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.05) rotate(-24deg); }
    32% { opacity: .9; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.05) rotate(28deg); }
}

@keyframes vm-v2-table-revolution {
    0% { transform: rotate(0deg) scale(1); filter: none; }
    16% { transform: rotate(-2.8deg) scale(.985); filter: contrast(1.18) saturate(1.24); }
    32% { transform: rotate(3.2deg) scale(1.012); filter: contrast(1.32) saturate(1.38); }
    49% { transform: rotate(-1.6deg) scale(1.006); }
    64% { transform: rotate(.8deg) scale(1.002); }
    100% { transform: rotate(0deg) scale(1); filter: none; }
}

@keyframes vm-v2-shade-revolution {
    0%, 100% { opacity: 0; }
    9%, 82% { opacity: .74; }
}

@keyframes vm-v2-vignette-revolution {
    0%, 100% { opacity: 0; }
    14%, 80% { opacity: 1; }
}

@keyframes vm-v2-grid-revolution {
    0% { opacity: 0; transform: perspective(500px) rotateX(70deg) rotateZ(-12deg) scale(.72); }
    28% { opacity: .78; }
    68% { opacity: .5; transform: perspective(500px) rotateX(58deg) rotateZ(7deg) scale(1.22); }
    100% { opacity: 0; transform: perspective(500px) rotateX(54deg) rotateZ(14deg) scale(1.46); }
}

@keyframes vm-v2-revolution-card {
    0% { opacity: 0; filter: blur(8px); transform: translate(calc(-50% + var(--vm-fx-offset) + var(--vm-fx-origin-x)), calc(-50% + var(--vm-fx-origin-y))) rotate(-12deg) scale(.74); }
    24% { opacity: 1; }
    43% { opacity: 1; filter: blur(0) brightness(1.45); transform: translate(calc(-50% + var(--vm-fx-offset)), -50%) rotate(2deg) scale(1.15); }
    58%, 78% { opacity: 1; filter: brightness(1); transform: translate(calc(-50% + var(--vm-fx-offset)), -50%) rotate(0deg) scale(1); }
    100% { opacity: 0; filter: blur(5px); transform: translate(calc(-50% + var(--vm-fx-offset)), -50%) scale(.78); }
}

@keyframes vm-v2-burst-revolution {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.02) rotate(-35deg); }
    28% { opacity: .92; }
    72% { opacity: .42; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.34) rotate(42deg); }
}

@keyframes vm-v2-shade-closing {
    0%, 100% { opacity: 0; }
    10%, 64% { opacity: .52; }
}

@keyframes vm-v2-vignette-closing {
    0%, 100% { opacity: 0; }
    16%, 66% { opacity: .72; }
}

@keyframes vm-v2-closing-card {
    0% { opacity: 0; filter: blur(8px) brightness(1.8); transform: translate(calc(-50% + var(--vm-fx-offset) + var(--vm-fx-origin-x)), calc(-50% + var(--vm-fx-origin-y))) rotate(-8deg) scale(1.22); }
    24% { opacity: 1; }
    42% { opacity: 1; filter: blur(0) brightness(1.45); transform: translate(calc(-50% + var(--vm-fx-offset)), -50%) rotate(0deg) scale(1.12); }
    58% { opacity: 1; filter: brightness(1); transform: translate(calc(-50% + var(--vm-fx-offset)), -50%) scale(1); }
    100% { opacity: 0; filter: blur(5px); transform: translate(calc(-50% + var(--vm-fx-offset) + 62vw), calc(-50% - 2vh)) rotate(16deg) scale(.88); }
}

@keyframes vm-v2-slash-closing {
    0% { opacity: 0; transform: rotate(0deg) scaleX(0); }
    28% { opacity: 1; }
    68% { opacity: 1; transform: rotate(0deg) scaleX(1); }
    100% { opacity: 0; transform: rotate(0deg) scaleX(1.08); filter: blur(5px); }
}

@keyframes vm-v2-burst-closing {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.04); }
    34% { opacity: .96; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.05); }
}

@keyframes vm-v2-flash-shell {
    0%, 100% { opacity: 0; visibility: hidden; }
    8% { opacity: 1; visibility: visible; }
    86% { opacity: 1; visibility: visible; }
    100% { visibility: hidden; }
}

@keyframes vm-v2-flash-panel {
    0% { opacity: 0; transform: translateY(-50%) rotate(-8deg) scaleX(.08); }
    22% { opacity: 1; transform: translateY(-50%) rotate(-3deg) scaleX(1.04); }
    34%, 76% { opacity: .96; transform: translateY(-50%) rotate(-3deg) scaleX(1); }
    100% { opacity: 0; transform: translateY(-50%) rotate(1deg) scaleX(1.12); }
}

@keyframes vm-v2-flash-line {
    0% { opacity: 0; transform: rotate(-6deg) scaleX(0); }
    28% { opacity: 1; }
    62% { opacity: 1; transform: rotate(-6deg) scaleX(1); }
    100% { opacity: 0; transform: rotate(-6deg) scaleX(1.12); filter: blur(7px); }
}

@keyframes vm-v2-flash-title {
    0% { opacity: 0; filter: blur(10px); transform: translateX(-12vw) skewX(-11deg) scale(1.36); }
    24% { opacity: 1; filter: blur(0); transform: translateX(1.5vw) skewX(-7deg) scale(.96); }
    38%, 74% { opacity: 1; transform: translateX(0) skewX(-7deg) scale(1); }
    100% { opacity: 0; filter: blur(6px); transform: translateX(10vw) skewX(-4deg) scale(1.08); }
}

@keyframes vm-v2-flash-subtitle {
    0% { opacity: 0; transform: translateY(12px); }
    24%, 78% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-8px); }
}

@media (max-width: 720px) {
    .vm-action-fx-cards,
    .vm-action-fx-burst {
        top: 46%;
    }

    .vm-action-fx-card {
        width: clamp(76px, 23vw, 100px) !important;
    }

    .vm-match-flash {
        padding-inline: 8px !important;
    }

    .vm-match-flash span {
        font-size: clamp(42px, 13vw, 70px) !important;
        letter-spacing: .02em !important;
    }

    .vm-match-flash.is-revolution span {
        font-size: clamp(35px, 10.5vw, 58px) !important;
    }

    .vm-match-flash.is-closing span {
        font-size: clamp(30px, 9.6vw, 52px) !important;
    }

    .vm-match-flash small {
        max-width: 92vw;
        font-size: 8px !important;
        letter-spacing: .14em !important;
    }

    .vm-match-flash::before {
        height: clamp(110px, 20vh, 170px);
    }
}

/* Réduire les mouvements ne doit jamais faire disparaître l'information. */
@media (prefers-reduced-motion: reduce) {
    .vm-action-fx.is-active .vm-action-fx-shade,
    .vm-action-fx.is-active .vm-action-fx-vignette {
        animation: vm-v2-reduced-overlay .9s ease both !important;
    }

    .vm-action-fx.is-active .vm-action-fx-grid,
    .vm-action-fx.is-active .vm-action-fx-slash,
    .vm-action-fx.is-active .vm-action-fx-burst {
        animation: none !important;
        opacity: 0 !important;
    }

    .vm-action-fx.is-active .vm-action-fx-card {
        animation: vm-v2-reduced-card .9s ease both !important;
    }

    .vm-table.is-fx-revolution {
        animation: none !important;
    }

    .vm-match-flash.is-active,
    .vm-match-flash.is-active::before,
    .vm-match-flash.is-active span,
    .vm-match-flash.is-active small {
        animation-duration: .9s !important;
        animation-delay: 0s !important;
    }
}

@keyframes vm-v2-reduced-overlay {
    0%, 100% { opacity: 0; }
    18%, 78% { opacity: .72; }
}

@keyframes vm-v2-reduced-card {
    0%, 100% { opacity: 0; transform: translate(calc(-50% + var(--vm-fx-offset)), -50%) scale(.96); }
    20%, 78% { opacity: 1; transform: translate(calc(-50% + var(--vm-fx-offset)), -50%) scale(1); }
}


/* =========================================================
   V1.10.0 — introduction de match et poses physiques
   ========================================================= */

.vm-match-intro {
    position: fixed;
    inset: 0;
    z-index: 140;
    display: grid;
    place-items: center;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    color: hsl(calc(272deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 97.1%);
    background: hsl(calc(260deg + var(--vm-theme-hue-shift)) max(0%, calc(60% - var(--vm-theme-desaturate))) 1%);
    pointer-events: none;
    isolation: isolate;
}

.vm-match-intro.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.vm-intro-backdrop,
.vm-intro-noise,
.vm-intro-fracture,
.vm-intro-card-storm,
.vm-intro-cast {
    position: absolute;
    inset: 0;
}

.vm-intro-backdrop {
    z-index: -4;
    background:
        radial-gradient(circle at 50% 44%, hsl(calc(277.6deg + var(--vm-theme-hue-shift)) max(0%, calc(61.5% - var(--vm-theme-desaturate))) 42.7% / .24), transparent 28%),
        linear-gradient(118deg, hsl(calc(260deg + var(--vm-theme-hue-shift)) max(0%, calc(60% - var(--vm-theme-desaturate))) 1%) 0 36%, hsl(calc(279.2deg + var(--vm-theme-hue-shift)) max(0%, calc(72.2% - var(--vm-theme-desaturate))) 7.1%) 48%, hsl(calc(270deg + var(--vm-theme-hue-shift)) max(0%, calc(66.7% - var(--vm-theme-desaturate))) 1.2%) 62% 100%);
}

.vm-intro-noise {
    z-index: -3;
    opacity: .18;
    background-image:
        repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,.025) 2px 3px),
        repeating-linear-gradient(90deg, transparent 0 11px, hsl(calc(276.8deg + var(--vm-theme-hue-shift)) max(0%, calc(75.6% - var(--vm-theme-desaturate))) 67.8% / .03) 11px 12px);
    mix-blend-mode: screen;
}

.vm-intro-fracture {
    z-index: 8;
    left: 50%;
    width: clamp(9px, 1.2vw, 18px);
    opacity: 0;
    background:
        linear-gradient(180deg, transparent, hsl(calc(280deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 92.4%) 9%, hsl(calc(276.7deg + var(--vm-theme-hue-shift)) max(0%, calc(58.1% - var(--vm-theme-desaturate))) 49.6%) 28% 72%, #fff 91%, transparent),
        radial-gradient(ellipse, hsl(calc(277.8deg + var(--vm-theme-hue-shift)) max(0%, calc(80.2% - var(--vm-theme-desaturate))) 64.3% / .86), transparent 66%);
    box-shadow: 0 0 24px hsl(calc(278.9deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 85.5% / .9), 0 0 90px hsl(calc(277.1deg + var(--vm-theme-hue-shift)) max(0%, calc(61.8% - var(--vm-theme-desaturate))) 43.1% / .78);
    transform: translateX(-50%) rotate(8deg) scaleY(0);
    transform-origin: center;
}

.vm-intro-dies-nox {
    position: absolute;
    z-index: 14;
    left: 50%;
    top: 50%;
    opacity: 0;
    font-family: Cinzel, Georgia, serif;
    font-size: clamp(34px, 8vw, 86px);
    font-weight: 400;
    letter-spacing: .09em;
    white-space: nowrap;
    text-shadow: 0 0 34px hsl(calc(276.7deg + var(--vm-theme-hue-shift)) max(0%, calc(84% - var(--vm-theme-desaturate))) 70.6% / .42), 0 20px 40px rgba(0,0,0,.76);
    transform: translate(-50%, -50%) scale(.82);
}

.vm-intro-dies-nox strong {
    font-weight: 900;
}

.vm-intro-cast {
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: clamp(5px, 1.5vw, 18px);
    padding: clamp(58px, 9vh, 110px) clamp(10px, 4vw, 76px) clamp(74px, 12vh, 130px);
}

.vm-intro-portrait {
    position: relative;
    align-self: stretch;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    opacity: 0;
    background:
        linear-gradient(150deg, hsl(calc(278deg + var(--vm-theme-hue-shift)) max(0%, calc(64% - var(--vm-theme-desaturate))) 39.2% / .52), hsl(calc(273.3deg + var(--vm-theme-hue-shift)) max(0%, calc(60% - var(--vm-theme-desaturate))) 2.9% / .96) 58%),
        hsl(calc(273.3deg + var(--vm-theme-hue-shift)) max(0%, calc(60% - var(--vm-theme-desaturate))) 2.9%);
    box-shadow: 0 24px 70px rgba(0,0,0,.64), inset 0 0 0 1px hsl(calc(277deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 84.1% / .14);
    clip-path: polygon(9% 0, 100% 5%, 92% 100%, 0 92%);
    transform: translateY(18px) scale(.92);
}

.vm-intro-portrait.is-left {
    transform: translateX(-32vw) rotate(-4deg) scale(.9);
}

.vm-intro-portrait.is-center {
    transform: translateY(-34vh) scale(.9);
    clip-path: polygon(4% 5%, 95% 0, 100% 94%, 8% 100%);
}

.vm-intro-portrait.is-right {
    transform: translateX(32vw) rotate(4deg) scale(.9);
    clip-path: polygon(0 5%, 91% 0, 100% 92%, 8% 100%);
}

.vm-intro-portrait::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 46%, hsl(calc(270deg + var(--vm-theme-hue-shift)) max(0%, calc(66.7% - var(--vm-theme-desaturate))) 1.2% / .78) 100%),
        linear-gradient(105deg, hsl(calc(276.9deg + var(--vm-theme-hue-shift)) max(0%, calc(88.6% - var(--vm-theme-desaturate))) 75.9% / .2), transparent 34% 68%, hsl(calc(277.1deg + var(--vm-theme-hue-shift)) max(0%, calc(63.1% - var(--vm-theme-desaturate))) 38.2% / .25));
    box-shadow: inset 0 0 42px rgba(0,0,0,.42);
}

.vm-intro-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 24%;
    opacity: 0;
    filter: saturate(.78) contrast(1.12) brightness(.84);
    transform: scale(1.1);
}

.vm-intro-portrait.is-loaded img {
    opacity: 1;
}

.vm-intro-portrait-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: hsl(calc(276.9deg + var(--vm-theme-hue-shift)) max(0%, calc(85.6% - var(--vm-theme-desaturate))) 81% / .5);
    font-size: clamp(48px, 11vw, 120px);
}

.vm-intro-player-seal {
    position: absolute;
    z-index: 8;
    left: 50%;
    bottom: clamp(18px, 4vh, 46px);
    width: clamp(82px, 13vw, 132px);
    aspect-ratio: 1;
    opacity: 0;
    border-radius: 50%;
    background: radial-gradient(circle, hsl(calc(277.8deg + var(--vm-theme-hue-shift)) max(0%, calc(63.6% - var(--vm-theme-desaturate))) 36.7% / .9), hsl(calc(275.5deg + var(--vm-theme-hue-shift)) max(0%, calc(68.8% - var(--vm-theme-desaturate))) 6.3% / .98) 58%, hsl(calc(260deg + var(--vm-theme-hue-shift)) max(0%, calc(60% - var(--vm-theme-desaturate))) 1%) 72%);
    box-shadow: 0 0 0 1px hsl(calc(277.3deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 87.1% / .42), 0 0 42px hsl(calc(276.8deg + var(--vm-theme-hue-shift)) max(0%, calc(64.4% - var(--vm-theme-desaturate))) 55.9% / .48), 0 20px 48px rgba(0,0,0,.72);
    transform: translate(-50%, 24vh) scale(.72);
}

.vm-intro-player-ring {
    position: absolute;
    inset: 10%;
    border: 1px solid hsl(calc(276.9deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 84.7% / .72);
    border-radius: 50%;
    box-shadow: inset 0 0 22px hsl(calc(278.2deg + var(--vm-theme-hue-shift)) max(0%, calc(80.2% - var(--vm-theme-desaturate))) 64.3% / .28);
}

.vm-intro-player-ring::before,
.vm-intro-player-ring::after {
    content: "";
    position: absolute;
    inset: 12%;
    border: 1px solid hsl(calc(276.9deg + var(--vm-theme-hue-shift)) max(0%, calc(88.6% - var(--vm-theme-desaturate))) 75.9% / .34);
    transform: rotate(45deg);
}

.vm-intro-player-mark {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: hsl(calc(277.7deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 93.1%);
    font-size: clamp(30px, 5vw, 52px);
    text-shadow: 0 0 18px hsl(calc(279.8deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 82% / .92);
}

.vm-intro-card-storm {
    z-index: 11;
    pointer-events: none;
}

.vm-intro-card-storm span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: clamp(42px, 6vw, 68px);
    aspect-ratio: 2 / 3;
    border: 1px solid hsl(calc(277.5deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 85.9% / .48);
    border-radius: 7px;
    opacity: 0;
    background:
        radial-gradient(circle at 50% 42%, hsl(calc(277.7deg + var(--vm-theme-hue-shift)) max(0%, calc(88.7% - var(--vm-theme-desaturate))) 79.2% / .26), transparent 24%),
        linear-gradient(145deg, hsl(calc(279.2deg + var(--vm-theme-hue-shift)) max(0%, calc(61.9% - var(--vm-theme-desaturate))) 16.5%), hsl(calc(272.7deg + var(--vm-theme-hue-shift)) max(0%, calc(64.7% - var(--vm-theme-desaturate))) 3.3%) 56%, hsl(calc(280deg + var(--vm-theme-hue-shift)) max(0%, calc(66% - var(--vm-theme-desaturate))) 27.6%));
    box-shadow: 0 16px 34px rgba(0,0,0,.62), inset 0 0 0 2px rgba(255,255,255,.035);
}

.vm-intro-card-storm span::after {
    content: "◈";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: hsl(calc(277.1deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 87.6% / .72);
    font-size: 18px;
}

.vm-intro-card-storm span:nth-child(1) { --sx: -62vw; --sy: -24vh; --ex: 62vw; --ey: 18vh; --r: 28deg; }
.vm-intro-card-storm span:nth-child(2) { --sx: 58vw; --sy: -32vh; --ex: -58vw; --ey: 28vh; --r: -34deg; }
.vm-intro-card-storm span:nth-child(3) { --sx: -52vw; --sy: 28vh; --ex: 57vw; --ey: -24vh; --r: 46deg; }
.vm-intro-card-storm span:nth-child(4) { --sx: 66vw; --sy: 19vh; --ex: -62vw; --ey: -18vh; --r: -48deg; }
.vm-intro-card-storm span:nth-child(5) { --sx: -28vw; --sy: -60vh; --ex: 34vw; --ey: 58vh; --r: 18deg; }
.vm-intro-card-storm span:nth-child(6) { --sx: 31vw; --sy: 58vh; --ex: -35vw; --ey: -58vh; --r: -22deg; }

.vm-intro-title {
    position: absolute;
    z-index: 18;
    left: 50%;
    top: 50%;
    display: grid;
    justify-items: center;
    gap: 8px;
    opacity: 0;
    text-align: center;
    transform: translate(-50%, -50%) rotate(-3deg) scale(.76);
}

.vm-intro-title::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: -18vw;
    right: -18vw;
    top: 50%;
    height: clamp(105px, 20vh, 190px);
    background: linear-gradient(92deg, transparent, hsl(calc(277.5deg + var(--vm-theme-hue-shift)) max(0%, calc(70.6% - var(--vm-theme-desaturate))) 6.7% / .96) 12% 88%, transparent);
    clip-path: polygon(0 20%, 13% 5%, 48% 15%, 80% 0, 100% 20%, 93% 84%, 60% 94%, 23% 82%, 0 100%);
    transform: translateY(-50%);
    box-shadow: 0 0 80px hsl(calc(277.4deg + var(--vm-theme-hue-shift)) max(0%, calc(65% - var(--vm-theme-desaturate))) 39.2% / .42);
}

.vm-intro-title strong {
    font-family: Cinzel, Georgia, serif;
    font-size: clamp(38px, 10vw, 108px);
    font-weight: 400;
    letter-spacing: .055em;
    white-space: nowrap;
    text-shadow: 0 0 26px hsl(calc(277.8deg + var(--vm-theme-hue-shift)) max(0%, calc(92.6% - var(--vm-theme-desaturate))) 78.8% / .68), 0 16px 34px rgba(0,0,0,.72);
}

.vm-intro-title strong b {
    font-weight: 900;
}

.vm-intro-title small {
    padding: 5px 13px;
    border: 1px solid hsl(calc(274.8deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 84.1% / .42);
    color: hsl(calc(277.6deg + var(--vm-theme-hue-shift)) max(0%, calc(57.3% - var(--vm-theme-desaturate))) 82.5%);
    background: hsl(calc(279.5deg + var(--vm-theme-hue-shift)) max(0%, calc(67.2% - var(--vm-theme-desaturate))) 12% / .78);
    font-family: Cinzel, Georgia, serif;
    font-size: clamp(10px, 1.8vw, 16px);
    font-weight: 800;
    letter-spacing: .24em;
}

.vm-match-intro.is-playing .vm-intro-dies-nox {
    animation: vm-intro-dies 1.02s cubic-bezier(.16,.82,.18,1) both;
}

.vm-match-intro.is-playing .vm-intro-portrait.is-left {
    animation: vm-intro-portrait-left 1.28s cubic-bezier(.16,.82,.18,1) .48s both;
}

.vm-match-intro.is-playing .vm-intro-portrait.is-center {
    animation: vm-intro-portrait-center 1.28s cubic-bezier(.16,.82,.18,1) .62s both;
}

.vm-match-intro.is-playing .vm-intro-portrait.is-right {
    animation: vm-intro-portrait-right 1.28s cubic-bezier(.16,.82,.18,1) .76s both;
}

.vm-match-intro.is-playing .vm-intro-player-seal {
    animation: vm-intro-player 1.12s cubic-bezier(.16,.86,.18,1) .92s both;
}

.vm-match-intro.is-playing .vm-intro-fracture {
    animation: vm-intro-fracture .92s cubic-bezier(.16,.82,.18,1) 1.2s both;
}

.vm-match-intro.is-playing .vm-intro-card-storm span {
    animation: vm-intro-card-cross .72s cubic-bezier(.2,.8,.2,1) calc(1.32s + var(--delay, 0s)) both;
}

.vm-match-intro.is-playing .vm-intro-card-storm span:nth-child(2) { --delay: .05s; }
.vm-match-intro.is-playing .vm-intro-card-storm span:nth-child(3) { --delay: .1s; }
.vm-match-intro.is-playing .vm-intro-card-storm span:nth-child(4) { --delay: .15s; }
.vm-match-intro.is-playing .vm-intro-card-storm span:nth-child(5) { --delay: .2s; }
.vm-match-intro.is-playing .vm-intro-card-storm span:nth-child(6) { --delay: .25s; }

.vm-match-intro.is-playing .vm-intro-title {
    animation: vm-intro-title 1.06s cubic-bezier(.14,.88,.18,1) 1.72s both;
}

.vm-match-intro.is-leaving {
    animation: vm-intro-leave .5s cubic-bezier(.4,0,.2,1) both;
}

@keyframes vm-intro-dies {
    0% { opacity: 0; letter-spacing: .22em; transform: translate(-50%, -50%) scale(.72); filter: blur(9px); }
    28%, 68% { opacity: 1; letter-spacing: .09em; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.16); filter: blur(7px); }
}

@keyframes vm-intro-portrait-left {
    0% { opacity: 0; transform: translateX(-32vw) rotate(-8deg) scale(.88); filter: blur(8px); }
    26%, 72% { opacity: 1; transform: translateX(0) rotate(-2deg) scale(1); filter: blur(0); }
    100% { opacity: .58; transform: translateX(-4vw) rotate(-3deg) scale(1.04); filter: brightness(.72); }
}

@keyframes vm-intro-portrait-center {
    0% { opacity: 0; transform: translateY(-34vh) scale(.88); filter: blur(8px); }
    26%, 72% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
    100% { opacity: .58; transform: translateY(-2vh) scale(1.04); filter: brightness(.72); }
}

@keyframes vm-intro-portrait-right {
    0% { opacity: 0; transform: translateX(32vw) rotate(8deg) scale(.88); filter: blur(8px); }
    26%, 72% { opacity: 1; transform: translateX(0) rotate(2deg) scale(1); filter: blur(0); }
    100% { opacity: .58; transform: translateX(4vw) rotate(3deg) scale(1.04); filter: brightness(.72); }
}

@keyframes vm-intro-player {
    0% { opacity: 0; transform: translate(-50%, 24vh) rotate(-18deg) scale(.58); }
    32%, 72% { opacity: 1; transform: translate(-50%, 0) rotate(0) scale(1); }
    100% { opacity: .78; transform: translate(-50%, 1vh) scale(.92); filter: brightness(.84); }
}

@keyframes vm-intro-fracture {
    0% { opacity: 0; transform: translateX(-50%) rotate(8deg) scaleY(0); }
    32%, 74% { opacity: 1; transform: translateX(-50%) rotate(8deg) scaleY(1.15); }
    100% { opacity: 0; transform: translateX(-50%) rotate(8deg) scaleY(1.4) scaleX(5); filter: blur(8px); }
}

@keyframes vm-intro-card-cross {
    0% { opacity: 0; transform: translate(calc(-50% + var(--sx)), calc(-50% + var(--sy))) rotate(var(--r)) scale(.72); }
    18%, 72% { opacity: .94; }
    100% { opacity: 0; transform: translate(calc(-50% + var(--ex)), calc(-50% + var(--ey))) rotate(calc(var(--r) + 42deg)) scale(1.08); }
}

@keyframes vm-intro-title {
    0% { opacity: 0; transform: translate(-50%, -50%) rotate(-7deg) scale(.58); filter: blur(8px); }
    24%, 74% { opacity: 1; transform: translate(-50%, -50%) rotate(-3deg) scale(1); filter: blur(0); }
    100% { opacity: 1; transform: translate(-50%, -50%) rotate(-2deg) scale(1.02); }
}

@keyframes vm-intro-leave {
    0% { opacity: 1; clip-path: inset(0 0 0 0); }
    48% { opacity: 1; clip-path: polygon(0 0, 100% 0, 100% 42%, 0 62%); }
    100% { opacity: 0; clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
}

.vm-pass-fx-layer {
    position: fixed;
    inset: 0;
    
    overflow: hidden;
    pointer-events: none;
}


.vm-pass-fx-layer {
    z-index: 82;
}

.vm-pass-fx {
    position: absolute;
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 15px;
    border: 1px solid hsl(calc(278deg + var(--vm-theme-hue-shift)) max(0%, calc(88.2% - var(--vm-theme-desaturate))) 80% / .62);
    color: hsl(calc(279deg + var(--vm-theme-hue-shift)) max(0%, calc(71.4% - var(--vm-theme-desaturate))) 94.5%);
    background: linear-gradient(90deg, hsl(calc(278.6deg + var(--vm-theme-hue-shift)) max(0%, calc(64.4% - var(--vm-theme-desaturate))) 26.5% / .92), hsl(calc(277.5deg + var(--vm-theme-hue-shift)) max(0%, calc(63.2% - var(--vm-theme-desaturate))) 7.5% / .9));
    box-shadow: 0 12px 28px rgba(0,0,0,.54), 0 0 24px hsl(calc(277.4deg + var(--vm-theme-hue-shift)) max(0%, calc(61.6% - var(--vm-theme-desaturate))) 55.1% / .35);
    clip-path: polygon(5% 0, 100% 8%, 94% 100%, 0 82%);
    font-family: Cinzel, Georgia, serif;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .17em;
    white-space: nowrap;
}

.vm-opponent.is-passing-now,
.vm-player.is-passing-now {
    filter: brightness(.72) saturate(.72);
    transition: filter .16s ease;
}

@media (max-width: 720px) {
    .vm-intro-cast {
        gap: 3px;
        padding: 74px 5px 112px;
    }

    .vm-intro-portrait {
        clip-path: polygon(6% 0, 100% 5%, 94% 100%, 0 94%);
    }

    .vm-intro-portrait img {
        object-position: center 22%;
    }

    .vm-intro-player-seal {
        bottom: 24px;
    }

    .vm-intro-title::before {
        left: -34vw;
        right: -34vw;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vm-match-intro.is-playing .vm-intro-dies-nox,
    .vm-match-intro.is-playing .vm-intro-title,
    .vm-match-intro.is-playing .vm-intro-portrait,
    .vm-match-intro.is-playing .vm-intro-player-seal,
    .vm-match-intro.is-playing .vm-intro-fracture {
        animation-duration: .7s !important;
        animation-delay: 0s !important;
    }

    .vm-match-intro.is-playing .vm-intro-card-storm span {
        display: none;
    }
}


/* V1.10.1 — poses de cartes volantes retirées, introduction conservée. */

/* V1.11.0 — cérémonie de fin de manche et dialogues contextuels rares */
.vm-overlay.is-ceremony {
    background:
        linear-gradient(118deg, transparent 0 38%, hsl(calc(275.8deg + var(--vm-theme-hue-shift)) max(0%, calc(62.9% - var(--vm-theme-desaturate))) 53.5% / .12) 38.2% 39.1%, transparent 39.3% 100%),
        radial-gradient(circle at 50% 42%, hsl(calc(276.1deg + var(--vm-theme-hue-shift)) max(0%, calc(61.8% - var(--vm-theme-desaturate))) 39% / .22), transparent 46%),
        hsl(calc(255deg + var(--vm-theme-hue-shift)) max(0%, calc(66.7% - var(--vm-theme-desaturate))) 1.2% / .93);
}

.vm-overlay.is-ceremony .vm-result-panel {
    position: relative;
    width: min(100%, 720px);
    padding: clamp(22px, 4vw, 34px);
    overflow: hidden auto;
    isolation: isolate;
    background:
        linear-gradient(116deg, rgba(255,255,255,.045), transparent 24%),
        radial-gradient(circle at 50% -18%, hsl(calc(275.1deg + var(--vm-theme-hue-shift)) max(0%, calc(61.4% - var(--vm-theme-desaturate))) 55.3% / .22), transparent 46%),
        linear-gradient(180deg, hsl(calc(270deg + var(--vm-theme-hue-shift)) max(0%, calc(50% - var(--vm-theme-desaturate))) 5.5% / .995), hsl(calc(260deg + var(--vm-theme-hue-shift)) max(0%, calc(60% - var(--vm-theme-desaturate))) 2% / .999));
    box-shadow:
        inset 0 0 0 1px hsl(calc(275.5deg + var(--vm-theme-hue-shift)) max(0%, calc(81.7% - var(--vm-theme-desaturate))) 70% / .28),
        inset 7px 0 0 hsl(calc(278deg + var(--vm-theme-hue-shift)) max(0%, calc(59.4% - var(--vm-theme-desaturate))) 40.6% / .34),
        0 38px 100px rgba(0,0,0,.72);
}

.vm-overlay.is-ceremony .vm-result-panel::before,
.vm-overlay.is-ceremony .vm-result-panel::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

.vm-overlay.is-ceremony .vm-result-panel::before {
    inset: -20% -8%;
    opacity: 0;
    background:
        repeating-linear-gradient(116deg, transparent 0 28px, hsl(calc(276.1deg + var(--vm-theme-hue-shift)) max(0%, calc(81.7% - var(--vm-theme-desaturate))) 76.5% / .025) 28px 30px),
        linear-gradient(105deg, transparent 0 44%, hsl(calc(276deg + var(--vm-theme-hue-shift)) max(0%, calc(68.2% - var(--vm-theme-desaturate))) 56.9% / .13) 44.2% 45.2%, transparent 45.4% 100%);
    transform: translateX(-7%);
}

.vm-overlay.is-ceremony .vm-result-panel::after {
    left: -12%;
    right: -12%;
    top: 82px;
    height: 3px;
    opacity: 0;
    background: linear-gradient(90deg, transparent, hsl(calc(277deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 80.6%) 18%, #fff 50%, hsl(calc(280deg + var(--vm-theme-hue-shift)) max(0%, calc(75.4% - var(--vm-theme-desaturate))) 63.3%) 82%, transparent);
    box-shadow: 0 0 22px hsl(calc(279.6deg + var(--vm-theme-hue-shift)) max(0%, calc(77.9% - var(--vm-theme-desaturate))) 64.5% / .72);
    transform: rotate(-3deg) scaleX(.05);
}

.vm-overlay.is-ceremony-running .vm-result-panel::before {
    animation: vm-ceremony-grid 1.5s ease-out both;
}

.vm-overlay.is-ceremony-running .vm-result-panel::after {
    animation: vm-ceremony-slash .7s cubic-bezier(.16,.84,.18,1) .08s both;
}

.vm-overlay.is-ceremony .vm-kicker,
.vm-overlay.is-ceremony .vm-result-panel h2,
.vm-overlay.is-ceremony .vm-result-panel > p:not(.vm-kicker) {
    opacity: 0;
}

.vm-overlay.is-ceremony-running .vm-kicker {
    animation: vm-ceremony-heading .48s ease .08s both;
}

.vm-overlay.is-ceremony-running .vm-result-panel h2 {
    animation: vm-ceremony-title .72s cubic-bezier(.15,.88,.18,1) .24s both;
}

.vm-overlay.is-ceremony-ready .vm-result-panel > p:not(.vm-kicker) {
    animation: vm-ceremony-copy .4s ease both;
}

.vm-overlay.is-ceremony .vm-ranking {
    gap: 9px;
    margin-top: 18px;
}

.vm-ranking-row.is-ceremony-row {
    grid-template-columns: 52px minmax(0, 1fr) auto;
    min-height: 66px;
    padding: 7px 13px 7px 7px;
    opacity: 0;
    overflow: hidden;
    background:
        linear-gradient(90deg, hsl(calc(279deg + var(--vm-theme-hue-shift)) max(0%, calc(56.6% - var(--vm-theme-desaturate))) 20.8% / .72), hsl(calc(273.8deg + var(--vm-theme-hue-shift)) max(0%, calc(50% - var(--vm-theme-desaturate))) 6.3% / .78));
    box-shadow:
        inset 4px 0 0 hsl(calc(279deg + var(--vm-theme-hue-shift)) max(0%, calc(55% - var(--vm-theme-desaturate))) 48.8% / .78),
        inset 0 1px 0 rgba(255,255,255,.025);
}

.vm-overlay.is-ceremony-running .vm-ranking-row.is-ceremony-row {
    animation: vm-ceremony-rank-left .58s cubic-bezier(.15,.86,.2,1) calc(.62s + var(--vm-rank-delay)) both;
}

.vm-overlay.is-ceremony-running .vm-ranking-row.is-ceremony-row:nth-child(even) {
    animation-name: vm-ceremony-rank-right;
}

.vm-ranking-row.is-ceremony-row.is-place-1 {
    background:
        linear-gradient(90deg, hsl(calc(280deg + var(--vm-theme-hue-shift)) max(0%, calc(54.3% - var(--vm-theme-desaturate))) 36.9% / .86), hsl(calc(278.2deg + var(--vm-theme-hue-shift)) max(0%, calc(55% - var(--vm-theme-desaturate))) 7.8% / .82));
    box-shadow:
        inset 5px 0 0 hsl(calc(277.8deg + var(--vm-theme-hue-shift)) max(0%, calc(74.3% - var(--vm-theme-desaturate))) 78.6%),
        0 0 26px hsl(calc(277deg + var(--vm-theme-hue-shift)) max(0%, calc(56.6% - var(--vm-theme-desaturate))) 52.2% / .16);
}

.vm-ranking-row.is-ceremony-row.is-place-4 {
    opacity: 0;
    background:
        linear-gradient(90deg, hsl(calc(279.6deg + var(--vm-theme-hue-shift)) max(0%, calc(58% - var(--vm-theme-desaturate))) 15.9% / .6), hsl(calc(270deg + var(--vm-theme-hue-shift)) max(0%, calc(50% - var(--vm-theme-desaturate))) 3.9% / .82));
    box-shadow: inset 4px 0 0 hsl(calc(280.4deg + var(--vm-theme-hue-shift)) max(0%, calc(53.5% - var(--vm-theme-desaturate))) 33.7% / .7);
}

.vm-ranking-portrait-wrap {
    position: relative;
    display: grid;
    place-items: center;
    width: 46px;
    height: 52px;
    overflow: hidden;
    background: linear-gradient(145deg, hsl(calc(277.1deg + var(--vm-theme-hue-shift)) max(0%, calc(50.9% - var(--vm-theme-desaturate))) 42.4% / .42), hsl(calc(273.8deg + var(--vm-theme-hue-shift)) max(0%, calc(53.3% - var(--vm-theme-desaturate))) 5.9% / .92));
    clip-path: polygon(9% 0, 100% 0, 91% 100%, 0 100%);
    box-shadow: inset 0 0 0 1px hsl(calc(276.7deg + var(--vm-theme-hue-shift)) max(0%, calc(79% - var(--vm-theme-desaturate))) 75.7% / .2);
}

.vm-ranking-portrait {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
    filter: contrast(1.05) saturate(.88);
}

.vm-ranking-portrait-fallback {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: hsl(calc(275.2deg + var(--vm-theme-hue-shift)) max(0%, calc(59.2% - var(--vm-theme-desaturate))) 90.4%);
    font-family: Cinzel, Georgia, serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
}

.vm-ranking-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.vm-ranking-copy strong {
    overflow: hidden;
    color: hsl(calc(282deg + var(--vm-theme-hue-shift)) max(0%, calc(45.5% - var(--vm-theme-desaturate))) 95.7%);
    font-family: Cinzel, Georgia, serif;
    font-size: clamp(13px, 2.3vw, 17px);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vm-ranking-title {
    color: hsl(calc(277.1deg + var(--vm-theme-hue-shift)) max(0%, calc(66.9% - var(--vm-theme-desaturate))) 69.2%);
    font-family: Cinzel, Georgia, serif;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .18em;
}

.is-place-1 .vm-ranking-title {
    color: hsl(calc(279deg + var(--vm-theme-hue-shift)) max(0%, calc(74.1% - var(--vm-theme-desaturate))) 89.4%);
    text-shadow: 0 0 12px hsl(calc(279.2deg + var(--vm-theme-hue-shift)) max(0%, calc(82.1% - var(--vm-theme-desaturate))) 75.9% / .48);
}

.is-place-4 .vm-ranking-title {
    color: hsl(calc(279.7deg + var(--vm-theme-hue-shift)) max(0%, calc(29.5% - var(--vm-theme-desaturate))) 52.7%);
}

.vm-ranking-meta {
    color: hsl(calc(279.4deg + var(--vm-theme-hue-shift)) max(0%, calc(17.6% - var(--vm-theme-desaturate))) 64.3%) !important;
    font-size: 10px !important;
    text-align: right;
    white-space: nowrap;
}

.vm-result-quote {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    margin: 5px 0 17px;
    padding: 9px 12px 9px 8px;
    opacity: 0;
    background: linear-gradient(90deg, hsl(calc(279.1deg + var(--vm-theme-hue-shift)) max(0%, calc(55% - var(--vm-theme-desaturate))) 23.5% / .52), hsl(calc(274.3deg + var(--vm-theme-hue-shift)) max(0%, calc(50% - var(--vm-theme-desaturate))) 5.5% / .34));
    box-shadow: inset 3px 0 0 hsl(calc(279.4deg + var(--vm-theme-hue-shift)) max(0%, calc(68.8% - var(--vm-theme-desaturate))) 61% / .66);
    clip-path: polygon(1% 0, 100% 0, 98% 100%, 0 100%);
}

.vm-result-quote[hidden] {
    display: none !important;
}

.vm-overlay.is-ceremony-ready .vm-result-quote {
    animation: vm-ceremony-quote .48s cubic-bezier(.16,.84,.18,1) both;
}

.vm-result-quote-portrait-wrap {
    display: grid;
    place-items: center;
    width: 40px;
    height: 44px;
    overflow: hidden;
    background: hsl(calc(278.7deg + var(--vm-theme-hue-shift)) max(0%, calc(56.4% - var(--vm-theme-desaturate))) 10.8% / .86);
    clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
}

.vm-result-quote-portrait {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
}

.vm-result-quote-fallback {
    color: hsl(calc(278.6deg + var(--vm-theme-hue-shift)) max(0%, calc(52.5% - var(--vm-theme-desaturate))) 84.3%);
    font-family: Cinzel, Georgia, serif;
    font-size: 9px;
    font-weight: 800;
}

.vm-result-quote-copy {
    min-width: 0;
}

.vm-result-quote-copy strong {
    display: block;
    margin-bottom: 2px;
    color: hsl(calc(280.5deg + var(--vm-theme-hue-shift)) max(0%, calc(65.6% - var(--vm-theme-desaturate))) 76.1%);
    font-family: Cinzel, Georgia, serif;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.vm-result-quote-copy p {
    margin: 0;
    color: hsl(calc(280deg + var(--vm-theme-hue-shift)) max(0%, calc(24.3% - var(--vm-theme-desaturate))) 85.5%);
    font-size: 12px;
    font-style: italic;
    line-height: 1.42;
}

.vm-overlay.is-ceremony .vm-result-panel > .vm-primary-button {
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
}

.vm-overlay.is-ceremony-ready .vm-result-panel > .vm-primary-button {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity .35s ease, transform .35s ease, filter .18s ease;
}


.vm-match-flash.is-final-duel span {
    font-size: clamp(38px, 9vw, 88px) !important;
}

.vm-match-flash.is-final-duel::before {
    height: clamp(116px, 23vh, 210px);
    background:
        linear-gradient(96deg, transparent 0 4%, hsl(calc(272deg + var(--vm-theme-hue-shift)) max(0%, calc(72% - var(--vm-theme-desaturate))) 4% / .98) 12% 88%, transparent 96%),
        linear-gradient(90deg, hsl(calc(274deg + var(--vm-theme-hue-shift)) max(0%, calc(78% - var(--vm-theme-desaturate))) 13%), hsl(calc(215deg + var(--vm-theme-hue-shift)) max(0%, calc(82% - var(--vm-theme-desaturate))) 48%) 50%, hsl(calc(274deg + var(--vm-theme-hue-shift)) max(0%, calc(78% - var(--vm-theme-desaturate))) 13%));
    animation: vm-final-duel-slice .42s cubic-bezier(.2,.85,.2,1) both;
}

.vm-match-flash.is-final-duel.is-active span {
    animation: vm-final-duel-title .62s cubic-bezier(.16,.84,.22,1) both;
}

@keyframes vm-final-duel-slice {
    from { opacity: 0; transform: scaleX(.05) skewX(-10deg); }
    to { opacity: 1; transform: scaleX(1) skewX(-3deg); }
}

@keyframes vm-final-duel-title {
    0% { opacity: 0; transform: translateX(-42px) skewX(-8deg) scale(.9); }
    55% { opacity: 1; transform: translateX(7px) skewX(-2deg) scale(1.04); }
    100% { opacity: 1; transform: none; }
}

.vm-match-flash.is-round-transition span {
    font-size: clamp(38px, 9vw, 88px) !important;
}

.vm-match-flash.is-round-transition::before {
    height: clamp(104px, 21vh, 190px);
    background:
        linear-gradient(92deg, transparent 0 3%, hsl(calc(272.3deg + var(--vm-theme-hue-shift)) max(0%, calc(68.4% - var(--vm-theme-desaturate))) 3.7% / .97) 11% 89%, transparent 97%),
        linear-gradient(90deg, hsl(calc(278.6deg + var(--vm-theme-hue-shift)) max(0%, calc(63.6% - var(--vm-theme-desaturate))) 17.3%), hsl(calc(278.8deg + var(--vm-theme-hue-shift)) max(0%, calc(53.7% - var(--vm-theme-desaturate))) 47.5%) 45%, hsl(calc(281.2deg + var(--vm-theme-hue-shift)) max(0%, calc(62.6% - var(--vm-theme-desaturate))) 21%));
}

@keyframes vm-ceremony-grid {
    0% { opacity: 0; transform: translateX(-8%) scale(1.03); }
    35% { opacity: 1; }
    100% { opacity: .7; transform: translateX(0) scale(1); }
}

@keyframes vm-ceremony-slash {
    0% { opacity: 0; transform: rotate(-3deg) scaleX(.03); }
    35% { opacity: 1; }
    100% { opacity: .42; transform: rotate(-3deg) scaleX(1); }
}

@keyframes vm-ceremony-heading {
    from { opacity: 0; transform: translateX(-16px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes vm-ceremony-title {
    0% { opacity: 0; transform: translate(-20px, 4px) skewX(-7deg) scale(.94); }
    58% { opacity: 1; transform: translate(4px, 0) skewX(-2deg) scale(1.025); }
    100% { opacity: 1; transform: none; }
}

@keyframes vm-ceremony-copy {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes vm-ceremony-rank-left {
    0% { opacity: 0; transform: translateX(-34px) skewX(-5deg); filter: brightness(1.6); }
    62% { opacity: 1; transform: translateX(5px) skewX(-1deg); }
    100% { opacity: 1; transform: none; filter: none; }
}

@keyframes vm-ceremony-rank-right {
    0% { opacity: 0; transform: translateX(34px) skewX(5deg); filter: brightness(1.6); }
    62% { opacity: 1; transform: translateX(-5px) skewX(1deg); }
    100% { opacity: 1; transform: none; filter: none; }
}

@keyframes vm-ceremony-quote {
    from { opacity: 0; transform: translateX(-14px); }
    to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 720px) {
    .vm-overlay.is-ceremony {
        align-items: start;
        overflow-y: auto;
    }

    .vm-overlay.is-ceremony .vm-result-panel {
        width: 100%;
        max-height: none;
        margin: auto 0;
        padding: 19px 15px 17px;
        overflow: visible;
    }

    .vm-overlay.is-ceremony .vm-result-panel h2 {
        font-size: clamp(21px, 7vw, 30px);
    }

    .vm-overlay.is-ceremony .vm-ranking {
        margin-top: 13px;
        gap: 7px;
    }

    .vm-ranking-row.is-ceremony-row {
        grid-template-columns: 43px minmax(0, 1fr) auto;
        min-height: 57px;
        padding: 6px 9px 6px 5px;
    }

    .vm-ranking-portrait-wrap {
        width: 39px;
        height: 45px;
    }

    .vm-ranking-title {
        font-size: 7px;
        letter-spacing: .12em;
    }

    .vm-ranking-copy strong {
        font-size: 13px;
    }

    .vm-ranking-meta {
        max-width: 74px;
        font-size: 8px !important;
        white-space: normal;
    }

    .vm-result-quote {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 8px;
        padding: 7px 9px 7px 6px;
    }

    .vm-result-quote-portrait-wrap {
        width: 35px;
        height: 39px;
    }

    .vm-result-quote-copy p {
        font-size: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vm-overlay.is-ceremony-running .vm-kicker,
    .vm-overlay.is-ceremony-running .vm-result-panel h2,
    .vm-overlay.is-ceremony-running .vm-ranking-row.is-ceremony-row,
    .vm-overlay.is-ceremony-ready .vm-result-panel > p:not(.vm-kicker),
    .vm-overlay.is-ceremony-ready .vm-result-quote {
        animation-duration: .18s !important;
        animation-delay: 0s !important;
    }
}

/* V1.12.0 — compte Dies Nox partagé, profil et avatars */
.vm-account-trigger {
    position: fixed;
    z-index: 180;
    top: max(18px, env(safe-area-inset-top));
    right: max(20px, env(safe-area-inset-right));
    max-width: min(42vw, 260px);
    padding: 9px 14px 8px;
    overflow: hidden;
    border: 1px solid hsl(calc(276.4deg + var(--vm-theme-hue-shift)) max(0%, calc(75.3% - var(--vm-theme-desaturate))) 68.2% / .34);
    border-radius: 2px;
    color: hsl(calc(279.1deg + var(--vm-theme-hue-shift)) max(0%, calc(79.3% - var(--vm-theme-desaturate))) 94.3% / .82);
    background: hsl(calc(270deg + var(--vm-theme-hue-shift)) max(0%, calc(57.1% - var(--vm-theme-desaturate))) 2.7% / .68);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.018), 0 12px 30px rgba(0,0,0,.26);
    font-family: "Cinzel", Georgia, serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    touch-action: manipulation;
}

.vm-account-trigger::before {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, hsl(calc(277.3deg + var(--vm-theme-hue-shift)) max(0%, calc(80.8% - var(--vm-theme-desaturate))) 67.3% / .78), transparent);
    transform: scaleX(.42);
    transition: transform .2s ease;
}

.vm-account-trigger:hover,
.vm-account-trigger:focus-visible,
.vm-account-trigger.is-connected {
    color: #fff;
    border-color: hsl(calc(275.8deg + var(--vm-theme-hue-shift)) max(0%, calc(87.2% - var(--vm-theme-desaturate))) 75.5% / .68);
    background: hsl(calc(276.5deg + var(--vm-theme-hue-shift)) max(0%, calc(59% - var(--vm-theme-desaturate))) 7.6% / .82);
}

.vm-account-trigger:hover::before,
.vm-account-trigger:focus-visible::before,
.vm-account-trigger.is-connected::before {
    transform: scaleX(1);
}

.vm-account-screen {
    position: fixed;
    z-index: 2600;
    inset: 0;
    display: none;
    align-items: center;
    justify-items: center;
    padding: max(18px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
    overflow-x: hidden;
    overflow-y: auto;
    color: hsl(calc(280deg + var(--vm-theme-hue-shift)) max(0%, calc(60% - var(--vm-theme-desaturate))) 96.1%);
    background:
        radial-gradient(circle at 78% 18%, hsl(calc(278deg + var(--vm-theme-hue-shift)) max(0%, calc(56.7% - var(--vm-theme-desaturate))) 45.3% / .18), transparent 34%),
        hsl(calc(255deg + var(--vm-theme-hue-shift)) max(0%, calc(66.7% - var(--vm-theme-desaturate))) 1.2% / .9);
    opacity: 0;
    pointer-events: none;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    transition: none;
}

.vm-account-screen.is-visible {
    display: grid;
    opacity: 1;
    pointer-events: auto;
}

.vm-account-modal {
    position: relative;
    width: min(720px, 100%);
    max-height: calc(100dvh - max(36px, env(safe-area-inset-top)) - max(36px, env(safe-area-inset-bottom)));
    overflow-x: hidden;
    overflow-y: auto;
    padding: clamp(24px, 4vw, 42px);
    border: 1px solid hsl(calc(277.7deg + var(--vm-theme-hue-shift)) max(0%, calc(76.7% - var(--vm-theme-desaturate))) 66.3% / .42);
    background:
        linear-gradient(135deg, hsl(calc(278.7deg + var(--vm-theme-hue-shift)) max(0%, calc(60.3% - var(--vm-theme-desaturate))) 24.7% / .18), transparent 42%),
        linear-gradient(180deg, hsl(calc(274.3deg + var(--vm-theme-hue-shift)) max(0%, calc(50% - var(--vm-theme-desaturate))) 5.5% / .98), hsl(calc(260deg + var(--vm-theme-hue-shift)) max(0%, calc(50% - var(--vm-theme-desaturate))) 2.4% / .99));
    box-shadow: 0 30px 90px rgba(0,0,0,.72), inset 4px 0 0 hsl(calc(278.3deg + var(--vm-theme-hue-shift)) max(0%, calc(57.6% - var(--vm-theme-desaturate))) 48% / .55);
    clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
    scrollbar-width: none;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

.vm-account-modal::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.vm-account-close {
    position: absolute;
    z-index: 2;
    top: 12px;
    right: 14px;
    width: 38px;
    height: 38px;
    border: 1px solid hsl(calc(275.7deg + var(--vm-theme-hue-shift)) max(0%, calc(78.7% - var(--vm-theme-desaturate))) 72.4% / .26);
    border-radius: 50%;
    color: hsl(calc(280.8deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 95.1% / .74);
    background: hsl(calc(272.7deg + var(--vm-theme-hue-shift)) max(0%, calc(57.9% - var(--vm-theme-desaturate))) 3.7% / .58);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
}

.vm-account-close:hover,
.vm-account-close:focus-visible {
    color: #fff;
    border-color: hsl(calc(276.5deg + var(--vm-theme-hue-shift)) max(0%, calc(93.9% - var(--vm-theme-desaturate))) 80.8% / .72);
    background: hsl(calc(278.3deg + var(--vm-theme-hue-shift)) max(0%, calc(63.4% - var(--vm-theme-desaturate))) 25.7% / .62);
}

.vm-account-view[hidden] {
    display: none !important;
}

.vm-account-header {
    max-width: 520px;
    margin: 0 auto 28px;
    text-align: center;
}

.vm-account-header p,
.vm-profile-header p,
.vm-avatar-instruction {
    margin: 0 0 8px;
    color: hsl(calc(277.2deg + var(--vm-theme-hue-shift)) max(0%, calc(75.8% - var(--vm-theme-desaturate))) 70.8% / .78);
    font-family: "Cinzel", Georgia, serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .22em;
}

.vm-account-header h2,
.vm-profile-header h2 {
    margin: 0;
    color: hsl(calc(282deg + var(--vm-theme-hue-shift)) max(0%, calc(55.6% - var(--vm-theme-desaturate))) 96.5%);
    font-family: "Cinzel", Georgia, serif;
    font-size: clamp(24px, 4vw, 38px);
    letter-spacing: .05em;
}

.vm-account-header span {
    display: block;
    margin-top: 10px;
    color: hsl(calc(280.9deg + var(--vm-theme-hue-shift)) max(0%, calc(29.7% - var(--vm-theme-desaturate))) 85.5% / .7);
    font-size: 12px;
    line-height: 1.55;
}

.vm-login-form {
    display: grid;
    gap: 16px;
    width: min(440px, 100%);
    margin: 0 auto;
}

.vm-login-form label {
    display: grid;
    gap: 7px;
}

.vm-login-form label > span {
    color: hsl(calc(276.4deg + var(--vm-theme-hue-shift)) max(0%, calc(64.7% - var(--vm-theme-desaturate))) 80% / .72);
    font-family: "Cinzel", Georgia, serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .16em;
}

.vm-login-form input {
    width: 100%;
    min-height: 46px;
    padding: 11px 13px;
    border: 1px solid hsl(calc(277.4deg + var(--vm-theme-hue-shift)) max(0%, calc(57.1% - var(--vm-theme-desaturate))) 59.8% / .32);
    border-radius: 2px;
    outline: none;
    color: #fff;
    background: hsl(calc(265.7deg + var(--vm-theme-hue-shift)) max(0%, calc(63.6% - var(--vm-theme-desaturate))) 2.2% / .76);
    box-shadow: inset 3px 0 0 hsl(calc(278.3deg + var(--vm-theme-hue-shift)) max(0%, calc(61.4% - var(--vm-theme-desaturate))) 40.6% / .32);
    font: inherit;
    font-size: 16px;
}

.vm-login-form input:focus {
    border-color: hsl(calc(277.4deg + var(--vm-theme-hue-shift)) max(0%, calc(89.8% - var(--vm-theme-desaturate))) 76.9% / .76);
    box-shadow: inset 3px 0 0 hsl(calc(278.8deg + var(--vm-theme-hue-shift)) max(0%, calc(74.6% - var(--vm-theme-desaturate))) 61.4% / .74), 0 0 0 3px hsl(calc(278.1deg + var(--vm-theme-hue-shift)) max(0%, calc(54.5% - var(--vm-theme-desaturate))) 51.8% / .12);
}

.vm-account-message {
    min-height: 18px;
    margin: 0;
    color: hsl(calc(277.7deg + var(--vm-theme-hue-shift)) max(0%, calc(83.8% - var(--vm-theme-desaturate))) 85.5% / .86);
    font-size: 11px;
    line-height: 1.5;
    text-align: center;
}

.vm-account-horizon-link {
    display: block;
    width: fit-content;
    margin: 22px auto 0;
    color: hsl(calc(277.4deg + var(--vm-theme-hue-shift)) max(0%, calc(60.9% - var(--vm-theme-desaturate))) 82.9% / .68);
    font-family: "Cinzel", Georgia, serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
    text-align: center;
    text-decoration: none;
}

.vm-account-horizon-link:hover,
.vm-account-horizon-link:focus-visible {
    color: #fff;
}

.vm-profile-header {
    display: flex;
    
    justify-content: space-between;
    
    padding-right: 34px;
    
}

.vm-profile-header h2 {
    overflow-wrap: anywhere;
}

.vm-profile-velys {
    flex: 0 0 auto;
    
    
    
    
    text-align: right;
}

.vm-profile-velys span {
    
    
    font-family: "Cinzel", Georgia, serif;
    
    font-weight: 700;
    
}


.vm-profile-content {
    display: grid;
    
}

.vm-avatar-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    
}

.vm-avatar-option {
    position: relative;
    
    overflow: hidden;
    padding: 0;
    border: 1px solid hsl(calc(277.7deg + var(--vm-theme-hue-shift)) max(0%, calc(52.6% - var(--vm-theme-desaturate))) 57.8% / .28);
    border-radius: 2px;
    color: hsl(calc(278.1deg + var(--vm-theme-hue-shift)) max(0%, calc(81.3% - var(--vm-theme-desaturate))) 87.5% / .7);
    
    cursor: pointer;
    touch-action: manipulation;
    transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.vm-avatar-option::after {
    content: "";
    position: absolute;
    
    border: 1px solid hsl(calc(277.3deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 83.9% / .12);
    pointer-events: none;
}

.vm-avatar-option:hover,
.vm-avatar-option:focus-visible {
    
    transform: translateY(-2px);
}


.vm-avatar-option img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vm-avatar-option-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: hsl(calc(277.4deg + var(--vm-theme-hue-shift)) max(0%, calc(81.5% - var(--vm-theme-desaturate))) 87.3% / .72);
    font-family: "Cinzel", Georgia, serif;
    font-size: clamp(18px, 4vw, 30px);
    font-weight: 700;
    letter-spacing: .08em;
}

.vm-profile-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
}

.vm-player-identity {
    align-items: center;
}

.vm-player-avatar-wrap {
    position: relative;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    overflow: hidden;
    border: 1px solid hsl(calc(276.6deg + var(--vm-theme-hue-shift)) max(0%, calc(74.7% - var(--vm-theme-desaturate))) 69% / .48);
    border-radius: 50%;
    background: hsl(calc(277.2deg + var(--vm-theme-hue-shift)) max(0%, calc(61.7% - var(--vm-theme-desaturate))) 9.2% / .76);
    box-shadow: 0 0 14px hsl(calc(278.6deg + var(--vm-theme-hue-shift)) max(0%, calc(58.4% - var(--vm-theme-desaturate))) 48% / .18);
}

.vm-player-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vm-player-avatar-fallback {
    color: hsl(calc(278.5deg + var(--vm-theme-hue-shift)) max(0%, calc(92.9% - var(--vm-theme-desaturate))) 83.5% / .76);
    font-size: 14px;
}

.vm-intro-player-avatar {
    position: absolute;
    z-index: 2;
    inset: 13%;
    width: 74%;
    height: 74%;
    object-fit: cover;
    border-radius: 50%;
    filter: saturate(.88) contrast(1.08);
}

.vm-intro-player-avatar:not([hidden]) + .vm-intro-player-mark {
    display: none;
}

@media (max-width: 720px) {
    .vm-account-trigger {
        top: max(12px, env(safe-area-inset-top));
        right: max(12px, env(safe-area-inset-right));
        max-width: 48vw;
        padding: 8px 10px 7px;
        font-size: 8px;
    }

    .vm-account-screen {
        align-items: start;
        padding-top: max(12px, env(safe-area-inset-top));
        padding-bottom: max(18px, env(safe-area-inset-bottom));
    }

    .vm-account-modal {
        width: 100%;
        max-height: none;
        min-height: min(620px, calc(100dvh - 30px));
        padding: 54px 16px 24px;
        clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
    }

    .vm-profile-header {
        
        padding-right: 0;
    }

    .vm-profile-header h2 {
        font-size: clamp(20px, 6vw, 28px);
    }

    

    

    

    .vm-profile-actions {
        grid-template-columns: 1fr;
    }

    .vm-player-avatar-wrap {
        width: 27px;
        height: 27px;
    }
}

@media (max-width: 390px) {
    .vm-avatar-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* V1.12.1 — accès au compte visible dans le menu */
#vm-main-menu .vm-account-trigger:not(.is-connected) {
    position: relative;
    z-index: auto;
    top: auto;
    right: auto;
    display: flex;
    width: 100%;
    max-width: none;
    min-height: inherit;
    padding: inherit;
    overflow: visible;
    border: inherit;
    border-radius: inherit;
    color: inherit;
    background: inherit;
    box-shadow: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    text-align: inherit;
    white-space: normal;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

#vm-main-menu .vm-account-trigger:not(.is-connected)::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 7px;
    height: auto;
    background: linear-gradient(180deg, hsl(calc(274.5deg + var(--vm-theme-hue-shift)) max(0%, calc(78.6% - var(--vm-theme-desaturate))) 83.5% / .95), hsl(calc(275.7deg + var(--vm-theme-hue-shift)) max(0%, calc(54.7% - var(--vm-theme-desaturate))) 39.8% / .24));
    transform: none;
    transition: width .2s ease, filter .2s ease;
}

#vm-main-menu .vm-account-trigger:not(.is-connected):hover::before,
#vm-main-menu .vm-account-trigger:not(.is-connected):focus-visible::before {
    width: 10px;
    filter: brightness(1.2);
    transform: none;
}

#vm-main-menu .vm-account-trigger.is-connected {
    position: fixed;
    z-index: 220;
    top: max(18px, env(safe-area-inset-top));
    right: max(20px, env(safe-area-inset-right));
    display: block;
    width: auto;
    max-width: min(42vw, 260px);
    min-height: 0;
    padding: 9px 14px 8px;
    overflow: hidden;
    border: 1px solid hsl(calc(276.4deg + var(--vm-theme-hue-shift)) max(0%, calc(75.3% - var(--vm-theme-desaturate))) 68.2% / .46);
    border-radius: 2px;
    color: #fff;
    background: hsl(calc(276.5deg + var(--vm-theme-hue-shift)) max(0%, calc(59% - var(--vm-theme-desaturate))) 7.6% / .84);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.018), 0 12px 30px rgba(0,0,0,.26);
    font-family: "Cinzel", Georgia, serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    line-height: 1.2;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

#vm-main-menu .vm-account-trigger.is-connected::before {
    content: "";
    position: absolute;
    inset: auto 0 0;
    width: auto;
    height: 2px;
    background: linear-gradient(90deg, transparent, hsl(calc(277.3deg + var(--vm-theme-hue-shift)) max(0%, calc(80.8% - var(--vm-theme-desaturate))) 67.3% / .78), transparent);
    transform: scaleX(1);
}

@media (max-width: 720px) {
    #vm-main-menu .vm-account-trigger.is-connected {
        top: max(12px, env(safe-area-inset-top));
        right: max(12px, env(safe-area-inset-right));
        max-width: 48vw;
        padding: 8px 10px 7px;
        font-size: 8px;
    }
}


/* V1.12.3 — CONNEXION utilise strictement le style de JOUER tant que le compte est déconnecté.
   La classe de profil fixe n'est ajoutée par JavaScript qu'après authentification. */
#vm-main-menu #vm-account-trigger:not(.is-connected) {
    position: relative;
}

/* V1.12.4 — refonte du compte, sélection visible et validation sans clignotement */


.vm-profile-header {
    
    
    gap: 28px;
    
    margin-bottom: 26px;
    border-bottom: 1px solid hsl(calc(277.3deg + var(--vm-theme-hue-shift)) max(0%, calc(71.3% - var(--vm-theme-desaturate))) 67.3% / .18);
}

.vm-profile-header::after {
    
    
    
    
    width: min(220px, 38%);
    
    
}

.vm-profile-identity {
    
    display: flex;
    align-items: center;
    
}

.vm-profile-avatar-preview {
    position: relative;
    
    display: grid;
    place-items: center;
    
    aspect-ratio: 1;
    overflow: visible;
    
    
    
    
}

.vm-profile-avatar-preview::after {
    content: "";
    position: absolute;
    
    z-index: 2;
    
    pointer-events: none;
}

.vm-profile-avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#vm-profile-avatar-fallback {
    color: hsl(calc(278.2deg + var(--vm-theme-hue-shift)) max(0%, calc(84.6% - var(--vm-theme-desaturate))) 84.7% / .76);
    font-size: 34px;
}


.vm-profile-copy p {
    margin-bottom: 9px;
}


.vm-profile-copy > span {
    display: block;
    margin-top: 10px;
    color: hsl(calc(280deg + var(--vm-theme-hue-shift)) max(0%, calc(30.8% - var(--vm-theme-desaturate))) 84.7% / .62);
    font-size: 11px;
    line-height: 1.45;
}

.vm-profile-velys {
    
    
    border-color: hsl(calc(277.9deg + var(--vm-theme-hue-shift)) max(0%, calc(85.4% - var(--vm-theme-desaturate))) 73.1% / .46);
    
    
}


.vm-profile-velys strong {
    margin-top: 5px;
    
    
}

.vm-profile-velys small {
    
    
    
    font-family: "Cinzel", Georgia, serif;
    
    font-weight: 700;
    
}


.vm-avatar-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
}


.vm-avatar-section-heading > div > span {
    color: hsl(calc(280deg + var(--vm-theme-hue-shift)) max(0%, calc(30.3% - var(--vm-theme-desaturate))) 82.5% / .56);
    font-size: 10px;
}

.vm-avatar-section-heading > div > span.is-pending {
    color: hsl(calc(278.4deg + var(--vm-theme-hue-shift)) max(0%, calc(94.9% - var(--vm-theme-desaturate))) 84.5% / .9);
}

.vm-avatar-count {
    flex: 0 0 auto;
    padding: 5px 8px;
    border: 1px solid hsl(calc(277.6deg + var(--vm-theme-hue-shift)) max(0%, calc(62.4% - var(--vm-theme-desaturate))) 61.4% / .22);
    color: hsl(calc(277.3deg + var(--vm-theme-hue-shift)) max(0%, calc(59.7% - var(--vm-theme-desaturate))) 75.7% / .55);
    font-family: "Cinzel", Georgia, serif;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: .13em;
}

.vm-avatar-grid {
    gap: 14px;
}

.vm-avatar-option {
    aspect-ratio: 1 / 1;
    border-color: hsl(calc(277.2deg + var(--vm-theme-hue-shift)) max(0%, calc(51.1% - var(--vm-theme-desaturate))) 56.7% / .32);
    background: hsl(calc(270deg + var(--vm-theme-hue-shift)) max(0%, calc(62.5% - var(--vm-theme-desaturate))) 3.1%);
    box-shadow: 0 12px 25px rgba(0,0,0,.2);
    isolation: isolate;
}

.vm-avatar-option::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 58%, hsl(calc(274.3deg + var(--vm-theme-hue-shift)) max(0%, calc(77.8% - var(--vm-theme-desaturate))) 1.8% / .82)),
        linear-gradient(135deg, hsl(calc(278.3deg + var(--vm-theme-hue-shift)) max(0%, calc(59% - var(--vm-theme-desaturate))) 53.1% / .12), transparent 44%);
    opacity: .65;
    pointer-events: none;
    transition: opacity .16s ease;
}

.vm-avatar-option::after {
    z-index: 3;
    inset: 8px;
    border-color: hsl(calc(278.9deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 86.1% / .13);
}

.vm-avatar-option:hover,
.vm-avatar-option:focus-visible {
    border-color: hsl(calc(278.7deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 79.6% / .76);
    box-shadow: 0 16px 32px rgba(0,0,0,.32), 0 0 22px hsl(calc(277.9deg + var(--vm-theme-hue-shift)) max(0%, calc(60% - var(--vm-theme-desaturate))) 52.9% / .16);
}

.vm-avatar-option.is-selected {
    border-color: hsl(calc(278.8deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 80.6%);
    transform: translateY(-3px);
    box-shadow:
        0 0 0 2px hsl(calc(278.9deg + var(--vm-theme-hue-shift)) max(0%, calc(66.7% - var(--vm-theme-desaturate))) 56.5% / .72),
        0 0 0 5px hsl(calc(279.2deg + var(--vm-theme-hue-shift)) max(0%, calc(63.3% - var(--vm-theme-desaturate))) 38.4% / .2),
        0 18px 36px rgba(0,0,0,.38),
        0 0 32px hsl(calc(278.7deg + var(--vm-theme-hue-shift)) max(0%, calc(70.6% - var(--vm-theme-desaturate))) 58.6% / .28);
}

.vm-avatar-option.is-selected::before {
    opacity: .28;
}

.vm-avatar-option.is-saved:not(.is-selected) {
    border-color: hsl(calc(277.5deg + var(--vm-theme-hue-shift)) max(0%, calc(68.4% - var(--vm-theme-desaturate))) 70.2% / .56);
}

.vm-avatar-option img {
    display: block;
    position: relative;
    z-index: 1;
    transition: transform .2s ease, filter .2s ease;
}

.vm-avatar-option:hover img,
.vm-avatar-option:focus-visible img {
    transform: scale(1.025);
}

.vm-avatar-option.is-selected img {
    filter: saturate(1.07) contrast(1.04);
}

.vm-avatar-option-check {
    position: absolute;
    z-index: 5;
    top: 10px;
    right: 10px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid hsl(calc(281.5deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 89.8% / .82);
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, hsl(calc(280.6deg + var(--vm-theme-hue-shift)) max(0%, calc(61.2% - var(--vm-theme-desaturate))) 55.5%), hsl(calc(279.8deg + var(--vm-theme-hue-shift)) max(0%, calc(59.7% - var(--vm-theme-desaturate))) 31.2%));
    box-shadow: 0 6px 18px rgba(0,0,0,.4), 0 0 18px hsl(calc(279.7deg + var(--vm-theme-hue-shift)) max(0%, calc(75.5% - var(--vm-theme-desaturate))) 61.6% / .36);
    font-family: Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    opacity: 0;
    transform: scale(.72);
    transition: opacity .14s ease, transform .14s ease;
}

.vm-avatar-option-label {
    position: absolute;
    z-index: 5;
    left: 9px;
    bottom: 9px;
    min-width: 72px;
    padding: 7px 15px 6px 12px;
    overflow: hidden;
    border-left: 4px solid var(--vm-accent-bright);
    color: #fff;
    background:
        linear-gradient(112deg, var(--vm-accent-main) 0 58%, var(--vm-accent-dark) 58% 100%);
    box-shadow:
        5px 6px 0 rgba(0, 0, 0, .68),
        0 0 18px color-mix(in srgb, var(--vm-accent-main) 20%, transparent);
    clip-path: polygon(0 0, 100% 0, calc(100% - 11px) 100%, 0 100%);
    font-family: "Cinzel", Georgia, serif;
    font-size: clamp(8px, .7vw, 11px);
    font-weight: 800;
    letter-spacing: .12em;
    line-height: 1;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: .9;
    transform: rotate(-1.5deg);
    transform-origin: left bottom;
    transition: opacity .14s ease, transform .14s ease, filter .14s ease;
}

.vm-avatar-option-label::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg, rgba(255,255,255,.22), transparent 34%);
}

.vm-avatar-option:hover .vm-avatar-option-label,
.vm-avatar-option:focus-visible .vm-avatar-option-label {
    opacity: 1;
    transform: rotate(-1.5deg) translateY(-2px);
}

.vm-avatar-option.is-selected .vm-avatar-option-check {
    opacity: 1;
    transform: scale(1);
}

.vm-avatar-option.is-selected .vm-avatar-option-label {
    opacity: 1;
    filter: brightness(1.12) saturate(1.08);
    transform: rotate(-1.5deg) translateY(-2px) scale(1.035);
}

.vm-avatar-option-fallback {
    z-index: 1;
}

.vm-account-message#vm-profile-message {
    
    padding: 1px 0;
}


@media (max-width: 720px) {
    .vm-account-modal:has(#vm-profile-view:not([hidden])) {
        padding: 54px 16px 24px;
    }

    .vm-profile-header {
        align-items: flex-start;
        padding: 0 0 22px;
        gap: 14px;
    }

    .vm-profile-identity {
        gap: 13px;
    }

    .vm-profile-avatar-preview {
        width: 78px;
    }

    

    .vm-profile-copy h2 {
        font-size: clamp(24px, 7vw, 34px);
    }

    .vm-profile-copy > span {
        display: none;
    }

    

    

    

    .vm-avatar-grid {
        gap: 9px;
    }

    .vm-avatar-option-check {
        top: 7px;
        right: 7px;
        width: 23px;
        height: 23px;
        font-size: 12px;
    }

    .vm-avatar-option-label {
        bottom: 7px;
        font-size: 5px;
    }
}

@media (max-width: 480px) {
    .vm-profile-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .vm-profile-avatar-preview {
        width: 68px;
    }

    .vm-profile-copy p {
        font-size: 7px;
    }

    .vm-profile-copy h2 {
        font-size: clamp(20px, 6.4vw, 28px);
    }

    

    .vm-avatar-section-heading {
        align-items: flex-start;
    }

    .vm-avatar-count {
        display: none;
    }
}


/* V1.12.5 — profil épuré et compteur de Velys angulaire */


.vm-avatar-section-heading > div {
    display: flex;
    align-items: center;
    min-height: 24px;
}

.vm-avatar-section-heading .vm-avatar-instruction {
    margin-bottom: 0;
}

.vm-profile-velys {
    position: relative;
    isolation: isolate;
    min-width: 198px;
    padding: 18px 26px 16px 34px;
    border: 0 !important;
    color: hsl(calc(279deg + var(--vm-theme-hue-shift)) max(0%, calc(52.6% - var(--vm-theme-desaturate))) 7.5%);
    background: hsl(calc(278.6deg + var(--vm-theme-hue-shift)) max(0%, calc(43.8% - var(--vm-theme-desaturate))) 93.7%) !important;
    box-shadow: none !important;
    clip-path: polygon(10% 0, 100% 0, 94% 43%, 100% 100%, 0 100%, 6% 18%);
    
    overflow: visible;
}

.vm-profile-velys::before {
    content: "";
    position: absolute;
    z-index: -2;
    inset: 7px -10px -9px 10px;
    background: hsl(calc(278.2deg + var(--vm-theme-hue-shift)) max(0%, calc(61.4% - var(--vm-theme-desaturate))) 39.6%);
    clip-path: polygon(7% 0, 100% 8%, 92% 48%, 98% 100%, 0 94%, 9% 18%);
    transform: rotate(2.5deg);
}

.vm-profile-velys::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(133deg, transparent 0 70%, hsl(calc(280.3deg + var(--vm-theme-hue-shift)) max(0%, calc(65% - var(--vm-theme-desaturate))) 35.9% / .72) 71% 76%, transparent 77%),
        linear-gradient(133deg, transparent 0 84%, hsl(calc(279deg + var(--vm-theme-hue-shift)) max(0%, calc(52.6% - var(--vm-theme-desaturate))) 7.5% / .52) 85% 88%, transparent 89%);
    opacity: .72;
}

.vm-profile-velys span {
    position: relative;
    z-index: 2;
    display: inline-block;
    margin: -4px 0 4px -20px;
    padding: 5px 25px 4px 22px;
    color: hsl(calc(277.7deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 93.1%) !important;
    background: hsl(calc(279deg + var(--vm-theme-hue-shift)) max(0%, calc(52.6% - var(--vm-theme-desaturate))) 7.5%);
    clip-path: polygon(0 0, 100% 0, 90% 100%, 7% 100%);
    font-size: 8px;
    letter-spacing: .2em;
    transform: rotate(-1.5deg);
}

.vm-profile-velys strong {
    position: relative;
    z-index: 2;
    display: block;
    margin: 0 !important;
    color: hsl(calc(279deg + var(--vm-theme-hue-shift)) max(0%, calc(52.6% - var(--vm-theme-desaturate))) 7.5%);
    font-family: "Cinzel", Georgia, serif;
    font-size: clamp(34px, 3.2vw, 46px) !important;
    font-weight: 800;
    line-height: .92 !important;
    letter-spacing: -.035em;
    text-align: right;
    text-shadow: 3px 3px 0 hsl(calc(278.2deg + var(--vm-theme-hue-shift)) max(0%, calc(61.4% - var(--vm-theme-desaturate))) 39.6% / .24);
    transform: skew(-5deg);
}

.vm-profile-velys small {
    position: relative;
    z-index: 2;
    display: inline-block !important;
    float: right;
    clear: both;
    margin-top: 8px !important;
    padding: 3px 8px 2px 10px;
    color: hsl(calc(277.7deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 93.1%) !important;
    background: hsl(calc(278.2deg + var(--vm-theme-hue-shift)) max(0%, calc(61.4% - var(--vm-theme-desaturate))) 39.6%);
    clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%);
    font-size: 6px !important;
    letter-spacing: .15em;
    transform: rotate(1deg);
}

@media (max-width: 720px) {
    .vm-profile-velys {
        min-width: 132px;
        padding: 13px 18px 12px 24px;
        transform: rotate(-1deg);
    }

    .vm-profile-velys span {
        margin-left: -15px;
        padding: 4px 17px 3px 16px;
        font-size: 6px;
    }

    .vm-profile-velys strong {
        font-size: clamp(25px, 7vw, 34px) !important;
    }

    .vm-profile-velys small {
        display: inline-block !important;
        margin-top: 6px !important;
        font-size: 5px !important;
    }
}

@media (max-width: 480px) {
    .vm-profile-velys {
        min-width: 112px;
        padding: 11px 14px 10px 20px;
    }

    .vm-profile-velys span {
        margin-left: -12px;
        padding-inline: 13px;
    }

    .vm-profile-velys strong {
        font-size: clamp(22px, 6.8vw, 29px) !important;
    }

    .vm-profile-velys small {
        display: none !important;
    }
}

/* =========================================================
   V1.13.0 — NOTES DE MISE À JOUR
   Fonctionnement repris du panneau de The Last Horizon.
   ========================================================= */
.vm-patch-toggle {
    position: fixed;
    top: max(22px, calc(env(safe-area-inset-top) + 14px));
    left: max(24px, calc(env(safe-area-inset-left) + 14px));
    z-index: 140;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    border: 1px solid hsl(calc(276.9deg + var(--vm-theme-hue-shift)) max(0%, calc(79.9% - var(--vm-theme-desaturate))) 68.8% / .34);
    border-radius: 999px;
    color: hsl(calc(276.8deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 91.4% / .88);
    background: hsl(calc(272.7deg + var(--vm-theme-hue-shift)) max(0%, calc(64.7% - var(--vm-theme-desaturate))) 3.3% / .58);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-family: Cinzel, Georgia, serif;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .14em;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
    touch-action: manipulation;
    transition: border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease;
}

.vm-patch-toggle:hover,
.vm-patch-toggle:focus-visible,
.vm-patch-toggle[aria-expanded="true"] {
    border-color: hsl(calc(277.2deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 82% / .72);
    color: #fff;
    background: hsl(calc(278.7deg + var(--vm-theme-hue-shift)) max(0%, calc(64.9% - var(--vm-theme-desaturate))) 14.5% / .78);
    outline: none;
    transform: translateY(-1px);
}

.vm-patch-toggle-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: hsl(calc(277deg + var(--vm-theme-hue-shift)) max(0%, calc(76.7% - var(--vm-theme-desaturate))) 68%);
    box-shadow: 0 0 12px hsl(calc(277deg + var(--vm-theme-hue-shift)) max(0%, calc(76.7% - var(--vm-theme-desaturate))) 68% / .88);
}

.vm-patch-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2400;
    background: hsl(calc(264deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 1% / .68);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, visibility .22s ease;
}

.vm-patch-panel {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 2410;
    width: min(680px, calc(100vw - 48px));
    max-height: min(78dvh, 780px);
    padding: 30px 32px 28px;
    overflow: hidden;
    border: 1px solid hsl(calc(278.3deg + var(--vm-theme-hue-shift)) max(0%, calc(77.9% - var(--vm-theme-desaturate))) 64.5% / .42);
    color: hsl(calc(280deg + var(--vm-theme-hue-shift)) max(0%, calc(60% - var(--vm-theme-desaturate))) 96.1%);
    background:
        linear-gradient(120deg, hsl(calc(280.2deg + var(--vm-theme-hue-shift)) max(0%, calc(61.4% - var(--vm-theme-desaturate))) 38.6% / .16), transparent 38%),
        linear-gradient(180deg, hsl(calc(276.7deg + var(--vm-theme-hue-shift)) max(0%, calc(56.2% - var(--vm-theme-desaturate))) 6.3% / .985), hsl(calc(265.7deg + var(--vm-theme-hue-shift)) max(0%, calc(63.6% - var(--vm-theme-desaturate))) 2.2% / .995));
    box-shadow:
        0 34px 100px rgba(0, 0, 0, .72),
        inset 4px 0 0 hsl(calc(278.1deg + var(--vm-theme-hue-shift)) max(0%, calc(57.3% - var(--vm-theme-desaturate))) 50.4% / .72),
        inset 0 1px 0 rgba(255, 255, 255, .035);
    clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
    transform: translate(-50%, -47%) scale(.985);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
    touch-action: pan-y;
}

.vm-main-menu.is-patch-open .vm-patch-backdrop,
#vm-main-menu.is-patch-open .vm-patch-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.vm-main-menu.is-patch-open .vm-patch-panel,
#vm-main-menu.is-patch-open .vm-patch-panel {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.vm-patch-panel-head {
    position: relative;
    padding: 0 48px 18px 0;
    border-bottom: 1px solid hsl(calc(278.3deg + var(--vm-theme-hue-shift)) max(0%, calc(77.9% - var(--vm-theme-desaturate))) 64.5% / .2);
}

.vm-patch-kicker {
    display: block;
    margin-bottom: 8px;
    color: hsl(calc(278.5deg + var(--vm-theme-hue-shift)) max(0%, calc(76.8% - var(--vm-theme-desaturate))) 72.9%);
    font-family: Cinzel, Georgia, serif;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .22em;
}

.vm-patch-panel h2 {
    margin: 0;
    color: #fff;
    font-family: Cinzel, Georgia, serif;
    font-size: clamp(1.22rem, 3vw, 1.7rem);
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.2;
}

.vm-patch-close {
    position: absolute;
    top: 16px;
    right: 18px;
    z-index: 2;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid hsl(calc(276.9deg + var(--vm-theme-hue-shift)) max(0%, calc(79.9% - var(--vm-theme-desaturate))) 68.8% / .32);
    border-radius: 50%;
    color: hsl(calc(278.3deg + var(--vm-theme-hue-shift)) max(0%, calc(85.7% - var(--vm-theme-desaturate))) 91.8% / .76);
    background: rgba(255, 255, 255, .025);
    font-family: Arial, sans-serif;
    font-size: 1.55rem;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
    transition: border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease;
}

.vm-patch-close:hover,
.vm-patch-close:focus-visible {
    border-color: hsl(calc(277.6deg + var(--vm-theme-hue-shift)) max(0%, calc(100% - var(--vm-theme-desaturate))) 82.2% / .72);
    color: #fff;
    background: hsl(calc(278.1deg + var(--vm-theme-hue-shift)) max(0%, calc(57.3% - var(--vm-theme-desaturate))) 50.4% / .14);
    outline: none;
    transform: rotate(4deg);
}

.vm-patch-scroll {
    max-height: calc(min(78dvh, 780px) - 126px);
    padding: 20px 12px 2px 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: hsl(calc(278.8deg + var(--vm-theme-hue-shift)) max(0%, calc(73.5% - var(--vm-theme-desaturate))) 62.9% / .55) transparent;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

.vm-patch-scroll::-webkit-scrollbar {
    width: 6px;
}

.vm-patch-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.vm-patch-scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: hsl(calc(278.8deg + var(--vm-theme-hue-shift)) max(0%, calc(73.5% - var(--vm-theme-desaturate))) 62.9% / .5);
}

.vm-patch-version {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    padding: 7px 10px;
    border-left: 3px solid hsl(calc(279.4deg + var(--vm-theme-hue-shift)) max(0%, calc(63.7% - var(--vm-theme-desaturate))) 57.8%);
    color: hsl(calc(278.3deg + var(--vm-theme-hue-shift)) max(0%, calc(85.7% - var(--vm-theme-desaturate))) 91.8%);
    background: hsl(calc(280deg + var(--vm-theme-hue-shift)) max(0%, calc(59.4% - var(--vm-theme-desaturate))) 41.6% / .1);
    font-family: Cinzel, Georgia, serif;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
}

.vm-patch-version span {
    color: hsl(calc(277.7deg + var(--vm-theme-hue-shift)) max(0%, calc(49.3% - var(--vm-theme-desaturate))) 86.1% / .54);
    font-size: .66rem;
    letter-spacing: .08em;
}

.vm-patch-scroll ul + .vm-patch-version {
    margin-top: 22px;
}

.vm-patch-scroll ul {
    margin: 0;
    padding: 0 0 0 20px;
    color: hsl(calc(280deg + var(--vm-theme-hue-shift)) max(0%, calc(40.9% - var(--vm-theme-desaturate))) 91.4% / .78);
    font-size: .88rem;
    line-height: 1.68;
}

.vm-patch-scroll li {
    margin: 0 0 14px;
    padding-left: 4px;
}

.vm-patch-scroll li::marker {
    color: hsl(calc(279.3deg + var(--vm-theme-hue-shift)) max(0%, calc(63.6% - var(--vm-theme-desaturate))) 58%);
}

.vm-patch-scroll strong {
    color: hsl(calc(279deg + var(--vm-theme-hue-shift)) max(0%, calc(74.1% - var(--vm-theme-desaturate))) 89.4%);
    font-weight: 700;
}

.vm-patch-loading,
.vm-patch-error {
    margin: 34px 16px;
    color: hsl(calc(278.7deg + var(--vm-theme-hue-shift)) max(0%, calc(44.9% - var(--vm-theme-desaturate))) 86.5% / .56);
    text-align: center;
    font-style: italic;
}

.vm-patch-error {
    color: #d59ab8;
}

body.vm-patch-lock {
    overflow: hidden;
}

@media (max-width: 720px) {
    .vm-patch-toggle {
        top: max(12px, calc(env(safe-area-inset-top) + 8px));
        left: max(12px, calc(env(safe-area-inset-left) + 8px));
        padding: 8px 11px;
        font-size: .62rem;
    }

    .vm-patch-panel {
        width: calc(100vw - 24px);
        max-height: 78dvh;
        padding: 24px 20px 20px;
        clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
    }

    .vm-patch-scroll {
        max-height: calc(78dvh - 112px);
        padding-top: 16px;
        font-size: .84rem;
    }

    .vm-patch-panel-head {
        padding-right: 42px;
    }

    .vm-patch-close {
        top: 12px;
        right: 12px;
        width: 34px;
        height: 34px;
    }
}


/* V1.13.1 — disposition du compte, bandeau de tour et avatar de cérémonie */
.vm-menu-heading {
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.5vw, 20px);
    width: max-content;
    max-width: none;
    margin: 0 0 17px;
    overflow: visible;
}

.vm-menu-heading > .vm-menu-kicker {
    flex: 0 0 auto;
    margin: 0 !important;
}

#vm-main-menu .vm-menu-heading .vm-account-trigger.is-connected {
    position: relative !important;
    inset: auto !important;
    z-index: 3;
    display: block;
    flex: 0 1 auto;
    width: auto;
    max-width: min(34vw, 190px);
    min-height: 0;
    margin: 0;
    padding: 9px 14px 8px;
    transform: none;
}

/* Le bandeau est rattaché à la moitié droite de la zone du joueur. */
.vm-player.is-active::before {
    left: auto;
    right: clamp(80px, 18vw, 360px);
    transform: none;
}

@media (max-width: 720px) {
    .vm-menu-heading {
        gap: 10px;
        margin-bottom: 13px;
    }

    #vm-main-menu .vm-menu-heading .vm-account-trigger.is-connected {
        max-width: min(35vw, 145px);
        padding: 7px 10px 6px;
        font-size: 8px;
    }

    .vm-player.is-active::before {
        left: auto;
        right: clamp(18px, 8vw, 42px);
        transform: none;
    }
}


/* Sélecteur de thème du compte */
.vm-theme-section {
    display: grid;
    gap: 12px;
    margin-top: 8px;
    padding-top: 20px;
    border-top: 1px solid color-mix(in srgb, var(--vm-accent-bright) 18%, transparent);
}
.vm-theme-section-heading { display:flex; align-items:end; justify-content:space-between; gap:16px; }
.vm-theme-instruction { margin:0; color:var(--vm-accent-bright); font-family:"Cinzel",Georgia,serif; font-size:10px; font-weight:700; letter-spacing:.18em; }
.vm-theme-section-heading > span { color:color-mix(in srgb,var(--vm-accent-light) 54%,transparent); font-family:"Cinzel",Georgia,serif; font-size:6px; font-weight:700; letter-spacing:.12em; text-align:right; }
.vm-theme-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:9px; }
.vm-theme-option { position:relative; display:grid; grid-template-columns:34px minmax(0,1fr); align-items:center; gap:8px; min-width:0; min-height:54px; padding:8px 9px; overflow:hidden; border:1px solid color-mix(in srgb,var(--vm-accent-bright) 24%,transparent); color:rgba(255,255,255,.76); background:rgba(4,4,7,.78); clip-path:polygon(5px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 5px); cursor:pointer; transition:transform .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease; }
.vm-theme-option::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(125deg,color-mix(in srgb,var(--vm-accent-main) 12%,transparent),transparent 46%); opacity:0; transition:opacity .15s ease; }
.vm-theme-option:hover,.vm-theme-option:focus-visible { transform:translateY(-2px); border-color:color-mix(in srgb,var(--vm-accent-light) 72%,transparent); }
.vm-theme-option.is-selected { border-color:var(--vm-accent-bright); color:#fff; background:color-mix(in srgb,var(--vm-accent-dark) 68%,transparent); box-shadow:0 0 0 2px color-mix(in srgb,var(--vm-accent-main) 28%,transparent),0 12px 24px rgba(0,0,0,.28),0 0 20px color-mix(in srgb,var(--vm-accent-main) 20%,transparent); }
.vm-theme-option.is-selected::before { opacity:1; }
.vm-theme-swatch { position:relative; display:block; width:34px; height:34px; overflow:hidden; border:1px solid rgba(255,255,255,.3); background:var(--vm-theme-swatch-main); transform:skew(-7deg); }
.vm-theme-swatch i { position:absolute; inset:0; background:var(--vm-theme-swatch-main); }
.vm-theme-swatch i:nth-child(1) { clip-path:polygon(0 0,58% 0,33% 100%,0 100%); background:var(--vm-theme-swatch-dark); }
.vm-theme-swatch i:nth-child(2) { clip-path:polygon(58% 0,100% 0,100% 45%,34% 100%); background:var(--vm-theme-swatch-light); }
.vm-theme-swatch i:nth-child(3) { clip-path:polygon(82% 44%,100% 31%,100% 100%,46% 100%); background:rgba(0,0,0,.34); }
.vm-theme-option[data-theme-id="violet"] { --vm-theme-swatch-dark:#3b1756; --vm-theme-swatch-main:#9543c4; --vm-theme-swatch-light:#d9b7ff; }
.vm-theme-option[data-theme-id="blue"] { --vm-theme-swatch-dark:#082643; --vm-theme-swatch-main:#1f84c4; --vm-theme-swatch-light:#a5dbff; }
.vm-theme-option[data-theme-id="red"] { --vm-theme-swatch-dark:#4c101b; --vm-theme-swatch-main:#c43d50; --vm-theme-swatch-light:#ffb5c0; }
.vm-theme-option[data-theme-id="green"] { --vm-theme-swatch-dark:#103a26; --vm-theme-swatch-main:#2f9d61; --vm-theme-swatch-light:#b5f2cc; }
.vm-theme-option[data-theme-id="pink"] { --vm-theme-swatch-dark:#4c123d; --vm-theme-swatch-main:#c74594; --vm-theme-swatch-light:#fbb7dc; }
.vm-theme-option[data-theme-id="black"] { --vm-theme-swatch-dark:#171a1f; --vm-theme-swatch-main:#6f7885; --vm-theme-swatch-light:#d7dde4; }
.vm-theme-option[data-theme-id="aqua"] { --vm-theme-swatch-dark:#0d3736; --vm-theme-swatch-main:#56c5bb; --vm-theme-swatch-light:#c6fff6; }
.vm-theme-option[data-theme-id="yellow"] { --vm-theme-swatch-dark:#6a5207; --vm-theme-swatch-main:#e1be22; --vm-theme-swatch-light:#ffe88c; }
.vm-theme-option[data-theme-id="orange"] { --vm-theme-swatch-dark:#842700; --vm-theme-swatch-main:#ff6a00; --vm-theme-swatch-light:#ffd0a0; }
.vm-theme-option[data-theme-id="peach"] { --vm-theme-swatch-dark:#7c4a33; --vm-theme-swatch-main:#f0a27c; --vm-theme-swatch-light:#ffd8c8; }
.vm-theme-label { position:relative; z-index:1; overflow:hidden; font-family:"Cinzel",Georgia,serif; font-size:7px; font-weight:700; letter-spacing:.08em; text-overflow:ellipsis; white-space:nowrap; }
.vm-theme-check { position:absolute; z-index:3; top:4px; right:5px; display:grid; place-items:center; width:17px; height:17px; border-radius:50%; color:#fff; background:var(--vm-accent-main); box-shadow:0 4px 12px rgba(0,0,0,.4); font-family:Arial,sans-serif; font-size:9px; font-weight:700; opacity:0; transform:scale(.7); transition:opacity .14s ease,transform .14s ease; }
.vm-theme-option.is-selected .vm-theme-check { opacity:1; transform:scale(1); }
@media (max-width:860px) { .vm-theme-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:480px) { .vm-theme-section-heading > span { display:none; } .vm-theme-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .vm-theme-option { min-height:50px; } }


/* V1.14.1 — lisibilité du texte d'action sur desktop */


/* V1.15.0 — profil à onglets, statistiques persistantes et refonte Persona */
.vm-account-modal:has(#vm-profile-view:not([hidden])) {
    width: min(940px, 100%);
    padding: clamp(22px, 3vw, 38px);
    border-color: color-mix(in srgb, var(--vm-accent-bright) 56%, transparent);
    background:
        linear-gradient(118deg, color-mix(in srgb, var(--vm-accent-main) 20%, transparent) 0 8%, transparent 8% 100%),
        radial-gradient(circle at 88% 8%, color-mix(in srgb, var(--vm-accent-main) 19%, transparent), transparent 27%),
        linear-gradient(180deg, rgba(15, 12, 20, .99), rgba(4, 4, 7, .995));
    box-shadow:
        0 34px 100px rgba(0, 0, 0, .78),
        inset 5px 0 0 var(--vm-accent-main),
        inset 0 -1px 0 color-mix(in srgb, var(--vm-accent-light) 18%, transparent);
    clip-path: polygon(0 0, calc(100% - 36px) 0, 100% 36px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 20px 100%, 0 calc(100% - 22px));
}

#vm-profile-view {
    position: relative;
    min-width: 0;
}

#vm-profile-view::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 72px;
    right: -54px;
    width: 240px;
    height: 72px;
    background: var(--vm-accent-main);
    clip-path: polygon(8% 0, 100% 12%, 90% 100%, 0 78%);
    opacity: .14;
    transform: rotate(-8deg);
    pointer-events: none;
}

.vm-profile-header {
    position: relative;
    z-index: 1;
    align-items: center;
    min-height: 122px;
    margin: 0 0 18px;
    padding: 8px 58px 12px 6px;
}

.vm-profile-header::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 18px 18% 4px 46px;
    background: rgba(255, 255, 255, .035);
    clip-path: polygon(3% 0, 100% 8%, 94% 100%, 0 82%);
    transform: rotate(-1deg);
}

.vm-profile-header::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 6px;
    right: 28%;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--vm-accent-bright), var(--vm-accent-main) 58%, transparent);
    clip-path: polygon(0 0, 100% 0, 96% 100%, 2% 100%);
}

.vm-profile-identity {
    min-width: 0;
    gap: 18px;
}

.vm-profile-avatar-preview {
    width: clamp(86px, 11vw, 116px);
    height: clamp(86px, 11vw, 116px);
    flex: 0 0 auto;
    border: 3px solid #f6f1e8;
    background: #07070a;
    box-shadow:
        8px 8px 0 var(--vm-accent-main),
        13px 13px 0 rgba(0, 0, 0, .68);
    clip-path: polygon(9% 0, 100% 0, 100% 88%, 89% 100%, 0 100%, 0 10%);
    transform: rotate(-2deg);
}

.vm-profile-avatar-preview::after {
    inset: auto -8px -8px auto;
    width: 42%;
    height: 16%;
    border: 0;
    border-radius: 0;
    background: var(--vm-accent-bright);
    clip-path: polygon(12% 0, 100% 0, 82% 100%, 0 74%);
    box-shadow: none;
}

.vm-profile-avatar-preview img {
    transform: scale(1.045) rotate(2deg);
}

.vm-profile-copy {
    min-width: 0;
}

.vm-profile-copy p {
    display: inline-block;
    margin: 0 0 7px;
    padding: 5px 15px 4px 13px;
    color: #09090c;
    background: #f5f0e7;
    clip-path: polygon(0 0, 100% 0, 92% 100%, 5% 100%);
    font-size: 8px;
    letter-spacing: .22em;
    transform: rotate(-1deg);
}

.vm-profile-copy h2 {
    max-width: min(440px, 52vw);
    color: #fff;
    font-size: clamp(27px, 4.2vw, 48px);
    line-height: .94;
    letter-spacing: .025em;
    text-shadow: 4px 4px 0 color-mix(in srgb, var(--vm-accent-dark) 85%, #000);
    transform: skew(-4deg);
}

.vm-profile-copy > .vm-profile-status {
    display: flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    margin-top: 10px;
    color: color-mix(in srgb, var(--vm-accent-light) 82%, #fff);
    font-family: "Cinzel", Georgia, serif;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: .17em;
}

.vm-profile-status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--vm-accent-bright);
    box-shadow: 0 0 10px var(--vm-accent-bright);
}

.vm-profile-velys {
    margin-right: 6px;
    transform: rotate(1.2deg);
}

.vm-profile-tabs {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    margin: 4px 0 18px;
    padding: 0 8px;
}

.vm-profile-tabs::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 5px 0 2px;
    background: rgba(255, 255, 255, .035);
    clip-path: polygon(1% 0, 100% 7%, 98% 100%, 0 91%);
}

.vm-profile-tab {
    position: relative;
    min-width: 0;
    min-height: 44px;
    padding: 10px 12px 9px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--vm-accent-light) 22%, transparent);
    color: rgba(255, 255, 255, .58);
    background: rgba(5, 5, 8, .78);
    clip-path: polygon(6px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
    font-family: "Cinzel", Georgia, serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .1em;
    text-align: left;
    cursor: pointer;
    transition: transform .16s ease, color .16s ease, background .16s ease, border-color .16s ease;
}

.vm-profile-tab::after {
    content: "";
    position: absolute;
    inset: auto 8px 4px 8px;
    height: 2px;
    background: var(--vm-accent-bright);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .16s ease;
}

.vm-profile-tab span {
    display: inline-block;
    margin-right: 7px;
    color: color-mix(in srgb, var(--vm-accent-light) 60%, transparent);
    font-size: 6px;
    letter-spacing: .04em;
    transform: translateY(-1px);
}

.vm-profile-tab:hover,
.vm-profile-tab:focus-visible {
    color: #fff;
    border-color: color-mix(in srgb, var(--vm-accent-bright) 62%, transparent);
    transform: translateY(-2px);
}

.vm-profile-tab.is-active {
    color: #08080b;
    border-color: #f6f1e8;
    background: #f6f1e8;
    box-shadow: 6px 5px 0 var(--vm-accent-main);
    transform: translateY(-3px) rotate(-.6deg);
}

.vm-profile-tab.is-active span {
    color: var(--vm-accent-dark);
}

.vm-profile-tab.is-active::after {
    transform: scaleX(1);
}

.vm-profile-content {
    gap: 12px;
}

.vm-profile-panel {
    position: relative;
    min-height: 286px;
    padding: clamp(17px, 2.6vw, 26px);
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--vm-accent-light) 18%, transparent);
    background:
        linear-gradient(132deg, color-mix(in srgb, var(--vm-accent-main) 8%, transparent), transparent 38%),
        rgba(6, 6, 10, .72);
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}

.vm-profile-panel[hidden] {
    display: none !important;
}

.vm-profile-panel::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: -32px;
    right: -40px;
    width: 160px;
    height: 84px;
    background: var(--vm-accent-main);
    clip-path: polygon(0 18%, 100% 0, 82% 100%, 12% 78%);
    opacity: .08;
    transform: rotate(12deg);
    pointer-events: none;
}

.vm-profile-panel > * {
    position: relative;
    z-index: 1;
}

.vm-profile-general-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 86px;
    margin-bottom: 18px;
    padding: 12px 22px 12px 12px;
    color: #08080b;
    background: #f5f0e7;
    clip-path: polygon(0 0, 97% 4%, 100% 82%, 4% 100%);
    transform: rotate(-.5deg);
}

.vm-profile-general-index {
    display: grid;
    place-items: center;
    width: 60px;
    align-self: stretch;
    color: #fff;
    background: var(--vm-accent-main);
    clip-path: polygon(12% 0, 100% 8%, 85% 100%, 0 88%);
    font-family: "Cinzel", Georgia, serif;
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    transform: rotate(-2deg);
}

.vm-profile-general-banner p,
.vm-profile-panel-heading p {
    margin: 0 0 3px;
    color: var(--vm-accent-dark);
    font-family: "Cinzel", Georgia, serif;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .2em;
}

.vm-profile-general-banner strong {
    display: block;
    overflow-wrap: anywhere;
    font-family: "Cinzel", Georgia, serif;
    font-size: clamp(22px, 3.2vw, 34px);
    line-height: 1;
    letter-spacing: .02em;
}

.vm-profile-general-banner small {
    display: block;
    margin-top: 7px;
    color: rgba(8, 8, 11, .6);
    font-family: "Cinzel", Georgia, serif;
    font-size: 6px;
    font-weight: 700;
    letter-spacing: .14em;
}

.vm-profile-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
}

.vm-profile-overview-card {
    position: relative;
    min-width: 0;
    min-height: 84px;
    padding: 13px 12px 11px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--vm-accent-light) 22%, transparent);
    background: rgba(255, 255, 255, .035);
    clip-path: polygon(7px 0, 100% 0, calc(100% - 9px) 100%, 0 100%, 0 7px);
}

.vm-profile-overview-card::before {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 3px;
    background: var(--vm-accent-main);
    opacity: .7;
}

.vm-profile-overview-card.is-accent {
    color: #09090c;
    border-color: var(--vm-accent-bright);
    background: var(--vm-accent-light);
    transform: rotate(.8deg);
}

.vm-profile-overview-card span,
.vm-stat-card span,
.vm-profile-quick-stats span {
    display: block;
    margin-bottom: 8px;
    color: color-mix(in srgb, var(--vm-accent-light) 66%, rgba(255,255,255,.55));
    font-family: "Cinzel", Georgia, serif;
    font-size: 6px;
    font-weight: 700;
    letter-spacing: .16em;
}

.vm-profile-overview-card.is-accent span,
.vm-profile-overview-card.is-accent small {
    color: color-mix(in srgb, var(--vm-accent-dark) 72%, #000);
}

.vm-profile-overview-card strong {
    display: block;
    overflow: hidden;
    color: #fff;
    font-family: "Cinzel", Georgia, serif;
    font-size: clamp(13px, 1.7vw, 18px);
    line-height: 1.08;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vm-profile-overview-card.is-accent strong {
    color: #08080b;
}

.vm-profile-overview-card small {
    display: block;
    margin-top: 7px;
    color: rgba(255, 255, 255, .38);
    font-size: 8px;
}

.vm-profile-quick-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.vm-profile-quick-stats > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    padding: 10px 13px;
    border-left: 3px solid var(--vm-accent-main);
    background: rgba(0, 0, 0, .36);
}

.vm-profile-quick-stats span {
    margin: 0;
}

.vm-profile-quick-stats strong {
    color: #fff;
    font-family: "Cinzel", Georgia, serif;
    font-size: 18px;
}

.vm-profile-panel-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.vm-profile-panel-heading h3 {
    margin: 0;
    color: #fff;
    font-family: "Cinzel", Georgia, serif;
    font-size: clamp(21px, 3vw, 32px);
    line-height: 1;
    letter-spacing: .05em;
}

.vm-profile-panel-heading > span {
    display: inline-block;
    padding: 6px 10px 5px;
    color: #08080b;
    background: var(--vm-accent-light);
    clip-path: polygon(5% 0, 100% 0, 92% 100%, 0 86%);
    font-family: "Cinzel", Georgia, serif;
    font-size: 6px;
    font-weight: 800;
    letter-spacing: .14em;
}

.vm-profile-panel-heading > span.is-warning {
    color: #fff;
    background: #9b2639;
}

.vm-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
}

.vm-stat-card {
    position: relative;
    min-height: 105px;
    padding: 14px 13px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--vm-accent-light) 20%, transparent);
    background: rgba(255, 255, 255, .035);
    clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 7px);
}

.vm-stat-card::after {
    content: "";
    position: absolute;
    right: -16px;
    bottom: -22px;
    width: 58px;
    height: 58px;
    border: 12px solid color-mix(in srgb, var(--vm-accent-main) 24%, transparent);
    transform: rotate(22deg);
}

.vm-stat-card strong {
    display: block;
    margin-top: 17px;
    color: #fff;
    font-family: "Cinzel", Georgia, serif;
    font-size: clamp(28px, 4vw, 42px);
    line-height: .9;
    letter-spacing: -.04em;
}

.vm-stat-card.is-primary {
    color: #08080b;
    border-color: #f5f0e7;
    background: #f5f0e7;
    box-shadow: 7px 7px 0 var(--vm-accent-main);
    transform: rotate(-1deg);
}

.vm-stat-card.is-primary span,
.vm-stat-card.is-primary strong {
    color: #08080b;
}

.vm-stat-card.is-void {
    border-color: var(--vm-accent-bright);
    background: color-mix(in srgb, var(--vm-accent-dark) 68%, #050507);
}

#vm-profile-panel-avatar .vm-avatar-section-heading,
#vm-profile-panel-theme .vm-theme-section-heading {
    margin-bottom: 15px;
}

.vm-avatar-section-heading > div > span,
.vm-theme-section-heading small {
    display: block;
    margin-top: 5px;
    color: rgba(255, 255, 255, .42);
    font-size: 9px;
    line-height: 1.45;
}

#vm-profile-panel-theme .vm-theme-section {
    margin: 0;
    padding: 0;
    border: 0;
}

#vm-profile-panel-theme .vm-theme-section-heading > div {
    min-width: 0;
}

#vm-profile-panel-avatar .vm-avatar-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
}

#vm-profile-panel-theme .vm-theme-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

#vm-profile-panel-theme .vm-theme-option {
    min-height: 76px;
    grid-template-columns: 46px minmax(0, 1fr);
    padding: 11px 13px;
}

#vm-profile-panel-theme .vm-theme-swatch {
    width: 46px;
    height: 46px;
}

#vm-profile-panel-theme .vm-theme-label {
    font-size: 9px;
}

.vm-account-message#vm-profile-message {
    min-height: 17px;
    margin: 0;
}

.vm-profile-actions {
    margin-top: 0;
    padding-top: 12px;
    border-top: 1px solid color-mix(in srgb, var(--vm-accent-light) 13%, transparent);
}

.vm-profile-actions .vm-primary-button,
.vm-profile-actions .vm-secondary-button {
    min-width: 160px;
}

@media (max-width: 780px) {
    .vm-account-modal:has(#vm-profile-view:not([hidden])) {
        padding: 22px 17px 18px;
    }

    .vm-profile-header {
        align-items: flex-start;
        min-height: 104px;
        padding: 4px 42px 10px 0;
    }

    .vm-profile-avatar-preview {
        width: 82px;
        height: 82px;
    }

    .vm-profile-copy h2 {
        max-width: 42vw;
        font-size: clamp(22px, 6vw, 34px);
    }

    .vm-profile-velys {
        min-width: 130px;
        padding: 14px 18px 13px 22px !important;
    }

    .vm-profile-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        padding: 0;
    }

    .vm-profile-overview-grid,
    .vm-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vm-profile-quick-stats {
        grid-template-columns: 1fr;
    }

    #vm-profile-panel-theme .vm-theme-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .vm-account-modal:has(#vm-profile-view:not([hidden])) {
        padding: 18px 13px 15px;
        clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 10px 100%, 0 calc(100% - 12px));
    }

    .vm-profile-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 13px;
        padding: 4px 36px 14px 0;
    }

    .vm-profile-identity {
        gap: 13px;
    }

    .vm-profile-avatar-preview {
        width: 72px;
        height: 72px;
        box-shadow: 5px 5px 0 var(--vm-accent-main), 9px 9px 0 rgba(0, 0, 0, .68);
    }

    .vm-profile-copy h2 {
        max-width: calc(100vw - 150px);
        font-size: clamp(20px, 7vw, 29px);
    }

    .vm-profile-copy > .vm-profile-status {
        font-size: 5px;
        letter-spacing: .11em;
    }

    .vm-profile-velys {
        justify-self: end;
        min-width: 150px;
        margin-right: 2px;
    }

    .vm-profile-tab {
        min-height: 40px;
        padding: 9px 8px 8px;
        font-size: 7px;
    }

    .vm-profile-panel {
        min-height: 250px;
        padding: 14px 12px;
    }

    .vm-profile-general-banner {
        gap: 11px;
        min-height: 74px;
        padding: 10px 14px 10px 9px;
    }

    .vm-profile-general-index {
        width: 48px;
        font-size: 22px;
    }

    .vm-profile-general-banner strong {
        font-size: 20px;
    }

    .vm-profile-general-banner small {
        font-size: 5px;
        letter-spacing: .09em;
    }

    .vm-profile-overview-grid,
    .vm-stats-grid {
        gap: 7px;
    }

    .vm-profile-overview-card {
        min-height: 76px;
        padding: 11px 9px;
    }

    .vm-stat-card {
        min-height: 92px;
        padding: 11px 9px;
    }

    .vm-stat-card strong {
        margin-top: 14px;
        font-size: 27px;
    }

    .vm-profile-panel-heading {
        align-items: flex-start;
        gap: 10px;
    }

    .vm-profile-panel-heading > span {
        max-width: 120px;
        text-align: right;
    }

    #vm-profile-panel-avatar .vm-avatar-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    #vm-profile-panel-theme .vm-theme-option {
        min-height: 62px;
        grid-template-columns: 38px minmax(0, 1fr);
        padding: 9px;
    }

    #vm-profile-panel-theme .vm-theme-swatch {
        width: 38px;
        height: 38px;
    }

    .vm-profile-actions {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .vm-profile-actions .vm-primary-button,
    .vm-profile-actions .vm-secondary-button {
        min-width: 0;
        padding-inline: 9px;
        font-size: 8px;
    }
}


/* V1.15.1 — profil nettoyé et diagonales Velys dégagées du compteur */

/* V1.15.2 — séparation définitive des cartes et du texte d’action sur desktop */
@media (min-width: 721px) {
    .vm-pile-shell {
        
        
        row-gap: clamp(14px, 2dvh, 22px);
        
    }

    

    .vm-last-action {
        
        
        align-self: auto;
        
        
        
        
        
        
        
    }
}


/* V1.15.3 — actions de fin de partie */
.vm-result-panel > .vm-result-menu-button {
    display: block;
    width: 100%;
    margin-top: 12px;
}

.vm-result-panel > .vm-result-menu-button[hidden] {
    display: none;
}


/* V1.16.1 — zone d’action desktop indépendante de la taille des cartes */
@media (min-width: 721px) {
    .vm-pile-shell {
        position: relative;
        display: grid;
        grid-template-rows: minmax(0, 1fr);
        align-content: stretch;
        min-height: 0;
        padding: clamp(8px, 1.25dvh, 12px) 16px 54px;
        overflow: hidden;
    }

    .vm-pile {
        align-self: stretch;
        min-height: 0;
        height: 100%;
        max-height: 100%;
    }

    .vm-pile-card {
        width: auto;
        height: min(calc(var(--vm-card-w) * 1.5), calc(100% - 4px));
        max-height: 100%;
        flex: 0 0 auto;
        aspect-ratio: 2 / 3;
    }

    .vm-last-action {
        position: absolute !important;
        left: 50%;
        bottom: 12px;
        z-index: 8;
        width: min(calc(100% - 32px), 720px);
        min-height: 28px;
        margin: 0;
        padding: 5px 18px;
        transform: translateX(-50%) !important;
        line-height: 1.35;
        white-space: normal;
    }
}

/* V1.16.0 — préparation de partie et mises en Velys */
.vm-game-setup-screen {
    align-items: start;
    justify-items: center;
    padding: max(24px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-block: max(24px, env(safe-area-inset-top));
    background:
        linear-gradient(115deg, rgba(2, 3, 8, .96), color-mix(in srgb, var(--vm-accent-dark) 34%, rgba(2, 3, 8, .93)) 55%, rgba(2, 3, 8, .96)),
        url("background.webp") center / cover no-repeat;
}

.vm-game-setup-screen::after {
    background:
        linear-gradient(132deg, transparent 0 45%, color-mix(in srgb, var(--vm-accent-main) 12%, transparent) 45% 49%, transparent 49% 100%),
        repeating-linear-gradient(112deg, transparent 0 52px, color-mix(in srgb, var(--vm-accent-light) 4%, transparent) 53px 54px);
}

.vm-game-setup-panel {
    position: relative;
    z-index: 2;
    width: min(100%, 980px);
    margin-block: auto;
    padding: clamp(24px, 3vw, 42px);
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--vm-accent-light) 34%, transparent);
    background:
        linear-gradient(118deg, color-mix(in srgb, var(--vm-accent-dark) 38%, #07070b) 0 29%, rgba(5, 5, 9, .98) 29% 100%);
    box-shadow: 18px 18px 0 color-mix(in srgb, var(--vm-accent-main) 18%, transparent), 0 30px 90px rgba(0, 0, 0, .68);
    clip-path: polygon(0 0, calc(100% - 46px) 0, 100% 46px, 100% calc(100% - 24px), calc(100% - 24px) 100%, 28px 100%, 0 calc(100% - 28px));
}

.vm-game-setup-panel::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 9px;
    background: linear-gradient(180deg, var(--vm-accent-bright), var(--vm-accent-dark));
}

.vm-game-setup-panel::after {
    content: "";
    position: absolute;
    top: -90px;
    right: 15%;
    width: 82px;
    height: 150%;
    pointer-events: none;
    background: color-mix(in srgb, var(--vm-accent-main) 12%, transparent);
    transform: rotate(18deg);
}

.vm-game-setup-story-entry {
    position: absolute;
    top: 22px;
    left: 24px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    min-height: 50px;
    padding: 0 28px 0 24px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--vm-accent-light) 42%, transparent);
    color: #f8f4ed;
    background: linear-gradient(118deg, color-mix(in srgb, var(--vm-accent-main) 86%, #7bb6ff) 0 76%, color-mix(in srgb, var(--vm-accent-bright) 55%, #d8ebff) 76% 100%);
    font-family: "Cinzel", Georgia, serif;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    cursor: pointer;
    clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 18px) 100%, 0 100%, 0 16px);
    box-shadow: 8px 8px 0 color-mix(in srgb, var(--vm-accent-dark) 42%, transparent);
    transform: rotate(-4deg);
    transform-origin: 24% 55%;
    transition: transform .2s cubic-bezier(.2, .8, .2, 1), filter .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease, background .2s ease;
}

.vm-game-setup-story-entry::before {
    content: "";
    position: absolute;
    top: -30%;
    bottom: -30%;
    left: -65%;
    width: 44%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .58), transparent);
    pointer-events: none;
    transform: skewX(-18deg);
    transition: left .44s cubic-bezier(.2, .8, .2, 1);
}

.vm-game-setup-story-entry::after {
    content: "";
    position: absolute;
    right: 15px;
    bottom: 8px;
    width: 32px;
    height: 3px;
    background: rgba(255, 255, 255, .82);
    transform: skewX(-30deg) scaleX(.42);
    transform-origin: right center;
    transition: transform .2s ease, width .2s ease;
}

@media (hover: hover) {
    .vm-game-setup-story-entry:hover {
        border-color: #fff;
        color: #fff;
        filter: brightness(1.14) saturate(1.12);
        transform: rotate(-2deg) translate(-3px, -4px) scale(1.045);
        box-shadow: 13px 13px 0 color-mix(in srgb, var(--vm-accent-dark) 58%, transparent);
    }

    .vm-game-setup-story-entry:hover::before {
        left: 126%;
    }

    .vm-game-setup-story-entry:hover::after {
        width: 48px;
        transform: skewX(-30deg) scaleX(1);
    }
}

.vm-game-setup-story-entry:focus-visible {
    border-color: #fff;
    outline: 3px solid color-mix(in srgb, var(--vm-accent-light) 72%, #fff);
    outline-offset: 4px;
    filter: brightness(1.1);
    transform: rotate(-2deg) translate(-2px, -3px) scale(1.035);
    box-shadow: 12px 12px 0 color-mix(in srgb, var(--vm-accent-dark) 55%, transparent);
}

.vm-game-setup-story-entry:active {
    transform: rotate(-3deg) translate(2px, 2px) scale(.985);
    box-shadow: 5px 5px 0 color-mix(in srgb, var(--vm-accent-dark) 48%, transparent);
}

.vm-game-setup-story-entry span {
    position: relative;
    z-index: 1;
    line-height: 1;
    transition: letter-spacing .2s ease, transform .2s ease;
}

@media (hover: hover) {
    .vm-game-setup-story-entry:hover span {
        letter-spacing: .23em;
        transform: translateX(2px);
    }
}

.vm-game-setup-story-entry,
.vm-game-setup-header,
.vm-game-mode-grid,
.vm-wager-options,
.vm-game-setup-message,
.vm-game-setup-actions {
    position: relative;
    z-index: 1;
}

.vm-game-setup-header {
    display: grid;
    gap: 6px;
    margin-bottom: 24px;
    padding-top: 52px;
    padding-bottom: 18px;
    border-bottom: 1px solid color-mix(in srgb, var(--vm-accent-light) 22%, transparent);
}

.vm-game-setup-header p,
.vm-wager-heading span,
.vm-wager-summary span {
    margin: 0;
    color: var(--vm-accent-light);
    font-family: "Cinzel", Georgia, serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .2em;
}

.vm-game-setup-header h2,
.vm-wager-heading h3 {
    margin: 0;
    color: #f8f4ed;
    font-family: "Cinzel", Georgia, serif;
    line-height: 1;
    letter-spacing: .055em;
}

.vm-game-setup-header h2 {
    font-size: clamp(28px, 4vw, 52px);
}

.vm-game-setup-header > span {
    color: rgba(255, 255, 255, .52);
    font-size: 13px;
}

.vm-game-mode-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.vm-game-mode-option {
    position: relative;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 32px;
    align-items: center;
    gap: 14px;
    min-height: 118px;
    padding: 18px 20px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--vm-accent-light) 18%, transparent);
    color: #f8f4ed;
    background: linear-gradient(118deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
    text-align: left;
    cursor: pointer;
    clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.vm-game-mode-option::after {
    content: "";
    position: absolute;
    right: -18px;
    bottom: -36px;
    width: 82px;
    height: 150px;
    background: color-mix(in srgb, var(--vm-accent-main) 12%, transparent);
    transform: rotate(28deg);
}

.vm-game-mode-option:hover:not(:disabled),
.vm-game-mode-option:focus-visible:not(:disabled) {
    border-color: var(--vm-accent-light);
    transform: translateY(-2px);
}

.vm-game-mode-option.is-selected {
    color: #08080b;
    border-color: #f5f0e7;
    background: linear-gradient(118deg, #f5f0e7 0 72%, var(--vm-accent-light) 72% 100%);
    box-shadow: 7px 7px 0 var(--vm-accent-main);
}

.vm-game-mode-option:disabled,
.vm-game-mode-option.is-disabled {
    opacity: .42;
    cursor: not-allowed;
}

.vm-game-mode-index {
    color: var(--vm-accent-bright);
    font-family: "Cinzel", Georgia, serif;
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
}

.vm-game-mode-option.is-selected .vm-game-mode-index {
    color: var(--vm-accent-dark);
}

.vm-game-mode-copy {
    display: flex;
    align-items: center;
    min-width: 0;
}

.vm-game-mode-copy strong {
    font-family: "Cinzel", Georgia, serif;
    font-size: clamp(21px, 2.5vw, 30px);
    line-height: 1.08;
    letter-spacing: .075em;
}

.vm-game-mode-check {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid color-mix(in srgb, var(--vm-accent-light) 36%, transparent);
    color: transparent;
    font-weight: 900;
    transform: rotate(45deg);
}

.vm-game-mode-check::first-letter {
    transform: rotate(-45deg);
}

.vm-game-mode-option.is-selected .vm-game-mode-check {
    color: #fff;
    border-color: var(--vm-accent-main);
    background: var(--vm-accent-main);
}

.vm-wager-options {
    display: grid;
    gap: 16px;
    margin-top: 20px;
    padding: 20px;
    border: 1px solid color-mix(in srgb, var(--vm-accent-light) 19%, transparent);
    background: color-mix(in srgb, var(--vm-accent-dark) 18%, rgba(0, 0, 0, .42));
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
}

.vm-wager-options[hidden] {
    display: none;
}

.vm-wager-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.vm-wager-heading > div:first-child {
    display: grid;
    gap: 6px;
}

.vm-wager-heading h3 {
    font-size: clamp(18px, 2.6vw, 30px);
}

.vm-wager-balance {
    display: grid;
    grid-template-columns: auto auto;
    align-items: baseline;
    gap: 3px 8px;
    min-width: 150px;
    padding: 10px 16px;
    border-left: 5px solid var(--vm-accent-main);
    background: rgba(0, 0, 0, .42);
    text-align: right;
}

.vm-wager-balance span {
    grid-column: 1 / -1;
    color: rgba(255, 255, 255, .46);
}

.vm-wager-balance strong {
    color: #fff;
    font-family: "Cinzel", Georgia, serif;
    font-size: 26px;
}

.vm-wager-balance small {
    color: var(--vm-accent-light);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .12em;
}

.vm-wager-amounts {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 9px;
}

.vm-wager-amounts button {
    min-height: 52px;
    border: 1px solid color-mix(in srgb, var(--vm-accent-light) 22%, transparent);
    color: #f5f0e7;
    background: rgba(255, 255, 255, .035);
    font-family: "Cinzel", Georgia, serif;
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.vm-wager-amounts button:hover:not(:disabled),
.vm-wager-amounts button:focus-visible:not(:disabled) {
    border-color: var(--vm-accent-light);
    transform: translateY(-2px);
}

.vm-wager-amounts button.is-selected {
    color: #08080b;
    border-color: #fff;
    background: var(--vm-accent-light);
    box-shadow: 4px 4px 0 var(--vm-accent-dark);
}

.vm-wager-amounts button:disabled {
    opacity: .25;
    cursor: not-allowed;
}

.vm-wager-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: color-mix(in srgb, var(--vm-accent-light) 16%, transparent);
}

.vm-wager-summary > div {
    display: grid;
    gap: 6px;
    padding: 13px 16px;
    background: #08080c;
}

.vm-wager-summary strong {
    color: #fff;
    font-family: "Cinzel", Georgia, serif;
    font-size: 16px;
    letter-spacing: .04em;
}

.vm-wager-summary > div:nth-child(2) strong,
.vm-wager-summary > div:nth-child(3) strong {
    color: var(--vm-accent-light);
}

.vm-game-setup-message {
    min-height: 21px;
    margin: 14px 0 0;
    color: var(--vm-accent-light);
    font-size: 11px;
    text-align: center;
}

.vm-game-setup-message.is-error {
    color: #ffb5b5;
}

.vm-game-setup-actions {
    display: grid;
    grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
    gap: 12px;
    margin-top: 4px;
}

.vm-game-setup-actions .vm-primary-button,
.vm-game-setup-actions .vm-secondary-button {
    width: 100%;
    min-height: 54px;
}

.vm-result-wager {
    margin: 12px 0 16px !important;
    padding: 11px 16px;
    border: 1px solid color-mix(in srgb, var(--vm-accent-light) 26%, transparent);
    color: var(--vm-accent-light) !important;
    background: color-mix(in srgb, var(--vm-accent-dark) 22%, rgba(0, 0, 0, .55));
    font-family: "Cinzel", Georgia, serif;
    font-size: 10px !important;
    font-weight: 800;
    letter-spacing: .08em;
    text-align: center;
}

.vm-result-wager.is-won {
    color: #fff !important;
    border-color: var(--vm-accent-light);
    background: color-mix(in srgb, var(--vm-accent-main) 34%, rgba(0, 0, 0, .58));
}

.vm-result-wager.is-lost {
    color: rgba(255, 255, 255, .62) !important;
}

.vm-result-wager.is-pending {
    animation: vm-wager-pulse 1.2s ease-in-out infinite alternate;
}

@keyframes vm-wager-pulse {
    from { opacity: .58; }
    to { opacity: 1; }
}

@media (max-width: 720px) {
    .vm-game-setup-screen {
        align-items: start;
        background:
            linear-gradient(180deg, rgba(2, 3, 8, .93), color-mix(in srgb, var(--vm-accent-dark) 28%, rgba(2, 3, 8, .95))),
            url("background_mobile.webp") center / cover no-repeat;
    }

    .vm-game-setup-panel {
        margin-block: auto;
        padding: 22px 16px 18px;
        box-shadow: 9px 9px 0 color-mix(in srgb, var(--vm-accent-main) 17%, transparent);
        clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px));
    }

    .vm-game-setup-story-entry {
        top: 16px;
        left: 16px;
        min-width: 122px;
        min-height: 42px;
        padding: 0 20px 0 18px;
        font-size: 17px;
        letter-spacing: .16em;
        box-shadow: 6px 6px 0 color-mix(in srgb, var(--vm-accent-dark) 40%, transparent);
    }

    .vm-game-setup-header {
        margin-bottom: 16px;
        padding-top: 46px;
        padding-bottom: 13px;
    }

    .vm-game-setup-header h2 {
        font-size: clamp(25px, 8vw, 38px);
    }

    .vm-game-mode-grid {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .vm-game-mode-option {
        grid-template-columns: 42px minmax(0, 1fr) 26px;
        min-height: 88px;
        padding: 13px 14px;
    }

    .vm-game-mode-index {
        font-size: 24px;
    }

    .vm-game-mode-copy strong {
        font-size: clamp(18px, 6vw, 24px);
    }

    .vm-wager-options {
        gap: 12px;
        margin-top: 13px;
        padding: 14px 12px;
    }

    .vm-wager-heading {
        align-items: stretch;
    }

    .vm-wager-balance {
        min-width: 112px;
        padding: 8px 10px;
    }

    .vm-wager-balance strong {
        font-size: 20px;
    }

    .vm-wager-amounts {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 5px;
    }

    .vm-wager-amounts button {
        min-height: 43px;
        font-size: 12px;
    }

    .vm-wager-summary {
        grid-template-columns: 1fr;
    }

    .vm-wager-summary > div {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        padding: 9px 11px;
    }

    .vm-wager-summary strong {
        font-size: 12px;
        text-align: right;
    }

    .vm-game-setup-actions {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .vm-game-setup-actions .vm-primary-button {
        grid-row: 1;
    }
}

@media (max-height: 720px) and (orientation: landscape) {
    .vm-game-setup-screen {
        align-items: start;
        padding-block: 14px;
    }

    .vm-game-setup-panel {
        width: min(100%, 900px);
        padding: 18px 24px;
    }

    .vm-game-setup-story-entry {
        top: 14px;
        left: 18px;
        min-width: 124px;
        min-height: 40px;
        font-size: 16px;
    }

    .vm-game-setup-header {
        margin-bottom: 12px;
        padding-top: 42px;
        padding-bottom: 10px;
    }

    .vm-game-setup-header h2 {
        font-size: 30px;
    }

    .vm-game-mode-option {
        min-height: 82px;
        padding-block: 11px;
    }

    .vm-wager-options {
        margin-top: 11px;
        padding: 12px 16px;
    }

    .vm-wager-amounts button {
        min-height: 40px;
    }

    .vm-game-setup-actions .vm-primary-button,
    .vm-game-setup-actions .vm-secondary-button {
        min-height: 44px;
    }
}

.vm-result-wager.is-draw {
    color: #fff !important;
    border-color: color-mix(in srgb, var(--vm-accent-light) 62%, #fff);
    background: color-mix(in srgb, var(--vm-accent-dark) 42%, rgba(0, 0, 0, .62));
}

/* =========================================================
   V1.17.2 — RÈGLES THÉMATIQUES À CONTRASTE DOU
   Navigation par sections, composition angulaire et lecture
   adaptée au thème sélectionné.
   ========================================================= */
.vm-rules-screen {
    --vm-rules-canvas: color-mix(in srgb, var(--vm-accent-dark) 24%, #080b12);
    --vm-rules-surface: color-mix(in srgb, var(--vm-accent-dark) 20%, #121821);
    --vm-rules-surface-raised: color-mix(in srgb, var(--vm-accent-main) 12%, #1a222d);
    --vm-rules-surface-strong: color-mix(in srgb, var(--vm-accent-dark) 44%, #151b25);
    --vm-rules-accent-soft: color-mix(in srgb, var(--vm-accent-main) 48%, #293446);
    --vm-rules-accent-deep: color-mix(in srgb, var(--vm-accent-dark) 58%, #151c28);
    --vm-rules-line: color-mix(in srgb, var(--vm-accent-light) 24%, rgba(255,255,255,.13));
    --vm-rules-text: #e9edf3;
    --vm-rules-muted: #b8c0cc;
    --vm-rules-soft: #858f9f;
    place-items: stretch;
    padding: 0;
    overflow: hidden;
    background:
        linear-gradient(112deg, hsl(calc(278deg + var(--vm-theme-hue-shift)) max(0%, calc(74% - var(--vm-theme-desaturate))) 14% / .34), transparent 34%),
        linear-gradient(292deg, hsl(calc(278deg + var(--vm-theme-hue-shift)) max(0%, calc(65% - var(--vm-theme-desaturate))) 30% / .14), transparent 38%),
        radial-gradient(circle at 88% 16%, rgba(255,255,255,.07) 0 1px, transparent 2px),
        radial-gradient(circle at 18% 76%, rgba(255,255,255,.05) 0 1px, transparent 2px),
        #020306;
    background-size: auto, auto, 130px 130px, 170px 170px, auto;
    backdrop-filter: none;
}

.vm-rules-screen::before,
.vm-rules-screen::after {
    content: "";
    position: fixed;
    z-index: 0;
    pointer-events: none;
}

.vm-rules-screen::before {
    width: min(43vw, 720px);
    height: 140vh;
    left: -15vw;
    top: -20vh;
    transform: rotate(14deg);
    background:
        linear-gradient(90deg, transparent 0 12%, hsl(calc(278deg + var(--vm-theme-hue-shift)) max(0%, calc(73% - var(--vm-theme-desaturate))) 48% / .12) 12% 18%, transparent 18% 34%, hsl(calc(278deg + var(--vm-theme-hue-shift)) max(0%, calc(73% - var(--vm-theme-desaturate))) 48% / .07) 34% 40%, transparent 40%);
}

.vm-rules-screen::after {
    inset: 0;
    background:
        linear-gradient(116deg, transparent 0 62%, rgba(255,255,255,.025) 62% 63%, transparent 63% 69%, rgba(255,255,255,.018) 69% 70%, transparent 70%),
        repeating-linear-gradient(132deg, transparent 0 72px, rgba(255,255,255,.014) 72px 73px);
    mask-image: linear-gradient(90deg, transparent, #000 28%, #000 100%);
}

.vm-rules-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100dvh;
    max-height: none;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background:
        linear-gradient(180deg, rgba(4,6,11,.95), rgba(2,3,6,.985)),
        #030409;
    box-shadow: none;
}

.vm-rules-panel::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 7px;
    z-index: 5;
    background: linear-gradient(180deg, var(--vm-accent-bright), var(--vm-accent-main) 42%, var(--vm-accent-dark));
    box-shadow: 7px 0 28px color-mix(in srgb, var(--vm-accent-main) 38%, transparent);
}

.vm-rules-header {
    position: relative;
    min-height: clamp(112px, 15vh, 154px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: clamp(20px, 4vw, 56px);
    padding: max(20px, env(safe-area-inset-top)) clamp(28px, 5vw, 78px) 18px clamp(38px, 6vw, 92px);
    overflow: hidden;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--vm-accent-main) 34%, rgba(255,255,255,.08));
    text-align: left;
    background:
        linear-gradient(103deg, color-mix(in srgb, var(--vm-accent-dark) 72%, #06070b) 0 23%, transparent 23.2%),
        linear-gradient(90deg, rgba(6,8,14,.98), rgba(5,7,12,.92));
}

.vm-rules-header::before {
    content: "RULES";
    position: absolute;
    right: clamp(130px, 16vw, 260px);
    bottom: -26px;
    color: rgba(255,255,255,.025);
    font-family: Cinzel, Georgia, serif;
    font-size: clamp(86px, 13vw, 190px);
    font-weight: 800;
    line-height: .8;
    letter-spacing: -.08em;
    transform: skewX(-10deg);
    pointer-events: none;
}

.vm-rules-header::after {
    content: "";
    position: absolute;
    left: 22%;
    bottom: -56px;
    width: min(38vw, 620px);
    height: 92px;
    transform: skewX(-28deg);
    background: linear-gradient(90deg, var(--vm-accent-main), color-mix(in srgb, var(--vm-accent-bright) 35%, transparent));
    opacity: .2;
    pointer-events: none;
}

.vm-rules-title-lockup {
    position: relative;
    z-index: 2;
    min-width: 0;
}


.vm-rules-header p {
    margin: 0;
    color: var(--vm-accent-bright);
    font-size: clamp(9px, .72vw, 12px);
    font-weight: 900;
    letter-spacing: .46em;
}

.vm-rules-header h2 {
    margin: 2px 0 0;
    color: #f8f4eb;
    font-family: Cinzel, Georgia, serif;
    font-size: clamp(35px, 5.2vw, 76px);
    font-weight: 700;
    line-height: .95;
    letter-spacing: .035em;
    text-shadow: 0 12px 34px rgba(0,0,0,.5);
}

.vm-rules-progress {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: auto auto;
    align-items: end;
    justify-items: end;
    column-gap: 5px;
    min-width: 142px;
    color: #f8f4eb;
}

.vm-rules-progress strong {
    font-family: Cinzel, Georgia, serif;
    font-size: clamp(40px, 5vw, 70px);
    font-weight: 800;
    line-height: .8;
}

.vm-rules-progress > span {
    padding-bottom: 2px;
    color: var(--vm-accent-light);
    font-weight: 900;
    letter-spacing: .12em;
}

.vm-rules-progress i {
    grid-column: 1 / -1;
    position: relative;
    width: 100%;
    height: 5px;
    margin-top: 13px;
    overflow: hidden;
    background: rgba(255,255,255,.1);
    transform: skewX(-24deg);
}

.vm-rules-progress i b {
    display: block;
    width: 12.5%;
    height: 100%;
    background: linear-gradient(90deg, var(--vm-accent-main), var(--vm-accent-light));
    box-shadow: 0 0 18px color-mix(in srgb, var(--vm-accent-main) 55%, transparent);
    transition: width .22s ease;
}

.vm-rules-close {
    position: relative;
    z-index: 3;
    display: grid;
    place-items: center;
    width: clamp(58px, 5vw, 76px);
    aspect-ratio: 1;
    border: 2px solid color-mix(in srgb, var(--vm-accent-light) 48%, rgba(255,255,255,.28));
    border-radius: 50%;
    color: #f8f4eb;
    background: rgba(4,6,11,.82);
    box-shadow: inset 0 0 0 7px rgba(255,255,255,.02), 0 15px 40px rgba(0,0,0,.35);
    cursor: pointer;
    transition: transform .16s ease, background .16s ease, border-color .16s ease;
}

.vm-rules-close span {
    font-size: clamp(38px, 4vw, 56px);
    font-weight: 300;
    line-height: .7;
    transform: translateY(-2px);
}

.vm-rules-close:hover,
.vm-rules-close:focus-visible {
    border-color: var(--vm-accent-light);
    background: color-mix(in srgb, var(--vm-accent-main) 42%, #06070b);
    transform: rotate(6deg) scale(1.04);
}

.vm-rules-layout {
    min-height: 0;
    display: grid;
    grid-template-columns: clamp(248px, 22vw, 355px) minmax(0, 1fr);
    gap: clamp(18px, 2.2vw, 36px);
    padding: clamp(18px, 2.4vw, 34px) clamp(20px, 3.8vw, 62px) max(20px, env(safe-area-inset-bottom)) clamp(26px, 4vw, 68px);
    overflow: hidden;
}

.vm-rules-nav {
    min-height: 0;
    display: grid;
    align-content: center;
    gap: clamp(7px, .9vh, 12px);
    padding: 8px 18px 8px 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}

.vm-rules-nav::-webkit-scrollbar {
    display: none;
}

.vm-rules-tab {
    position: relative;
    width: 100%;
    min-height: clamp(58px, 7vh, 78px);
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 12px;
    padding: 10px 30px 10px 14px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.09);
    color: var(--vm-rules-muted);
    background: linear-gradient(90deg, var(--vm-rules-surface-raised), var(--vm-rules-canvas));
    clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%, 10px 50%);
    text-align: left;
    cursor: pointer;
    transition: transform .16s ease, color .16s ease, background .16s ease, border-color .16s ease;
}

.vm-rules-tab::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;
    background: var(--vm-rules-accent-soft);
    opacity: .2;
    transition: width .16s ease, opacity .16s ease;
}

.vm-rules-tab > span {
    grid-row: 1 / 3;
    position: relative;
    z-index: 1;
    color: color-mix(in srgb, var(--vm-accent-bright) 80%, #fff);
    font-family: Cinzel, Georgia, serif;
    font-size: clamp(22px, 2vw, 32px);
    font-weight: 800;
    line-height: 1;
    text-align: center;
}

.vm-rules-tab strong,
.vm-rules-tab small {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.vm-rules-tab strong {
    align-self: end;
    font-family: Cinzel, Georgia, serif;
    font-size: clamp(11px, .9vw, 14px);
    letter-spacing: .07em;
}

.vm-rules-tab small {
    align-self: start;
    margin-top: 3px;
    color: var(--vm-rules-soft);
    font-size: clamp(9px, .72vw, 11px);
    font-weight: 700;
    letter-spacing: .02em;
}

.vm-rules-tab:hover,
.vm-rules-tab:focus-visible {
    color: var(--vm-rules-text);
    border-color: color-mix(in srgb, var(--vm-accent-main) 58%, transparent);
    transform: translateX(5px);
}

.vm-rules-tab.is-active {
    color: var(--vm-rules-text);
    border-color: color-mix(in srgb, var(--vm-accent-light) 46%, transparent);
    background:
        linear-gradient(105deg, var(--vm-rules-accent-soft), var(--vm-rules-accent-deep));
    box-shadow: 0 12px 26px color-mix(in srgb, var(--vm-accent-dark) 24%, transparent);
    transform: translateX(12px);
}

.vm-rules-tab.is-active::before {
    width: 100%;
    opacity: .12;
}

.vm-rules-tab.is-active small {
    color: color-mix(in srgb, var(--vm-accent-pale) 75%, white);
}

.vm-rules-stage {
    position: relative;
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    color: var(--vm-rules-text);
    background:
        linear-gradient(138deg, color-mix(in srgb, var(--vm-accent-main) 9%, transparent), transparent 42%),
        linear-gradient(165deg, var(--vm-rules-surface-raised), var(--vm-rules-surface));
    clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
    box-shadow: 0 30px 80px rgba(0,0,0,.48);
}

.vm-rules-stage::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(115deg, transparent 0 72%, color-mix(in srgb, var(--vm-accent-main) 10%, transparent) 72% 76%, transparent 76%),
        repeating-linear-gradient(135deg, transparent 0 54px, rgba(255,255,255,.018) 54px 55px);
}

.vm-rules-stage-top {
    position: relative;
    z-index: 2;
    min-height: 54px;
    display: grid;
    grid-template-columns: auto minmax(50px, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 9px clamp(22px, 3vw, 44px);
    color: var(--vm-rules-text);
    background: linear-gradient(90deg, var(--vm-rules-surface-strong) 0 62%, var(--vm-rules-accent-deep) 100%);
}

.vm-rules-stage-top::after {
    content: "";
    position: absolute;
    right: -20px;
    bottom: -16px;
    width: 42%;
    height: 28px;
    transform: skewX(-34deg);
    background: var(--vm-rules-accent-soft);
    opacity: .88;
}

.vm-rules-stage-top > span,
.vm-rules-stage-top > strong,
.vm-rules-stage-top > i {
    position: relative;
    z-index: 1;
}

.vm-rules-stage-top > span {
    color: var(--vm-accent-light);
    font-family: Cinzel, Georgia, serif;
    font-size: 25px;
    font-weight: 800;
}

.vm-rules-stage-top > i {
    height: 1px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--vm-accent-bright) 78%, transparent), transparent);
}

.vm-rules-stage-top > strong {
    font-size: 11px;
    letter-spacing: .2em;
}

.vm-rules-pages {
    position: relative;
    z-index: 1;
    min-height: 0;
    overflow: hidden;
}

.vm-rules-page {
    position: relative;
    height: 100%;
    min-height: 0;
    padding: clamp(28px, 4vw, 60px) clamp(24px, 4.4vw, 70px) clamp(30px, 4vw, 58px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--vm-accent-main) 62%, #2b2b2b) transparent;
    color: var(--vm-rules-text);
}

.vm-rules-page[hidden] {
    display: none !important;
}

.vm-rules-page.is-active {
    display: block;
    animation: vm-rules-page-enter .22s ease-out both;
}


@keyframes vm-rules-page-enter {
    from { opacity: 0; transform: translateX(18px); }
    to { opacity: 1; transform: translateX(0); }
}

.vm-rule-page-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(16px, 2vw, 28px);
    margin-bottom: clamp(24px, 3vw, 42px);
}

.vm-rule-page-number {
    display: grid;
    place-items: center;
    width: clamp(74px, 8vw, 112px);
    aspect-ratio: 1.12;
    color: var(--vm-rules-text);
    background:
        linear-gradient(145deg, var(--vm-accent-main), color-mix(in srgb, var(--vm-accent-dark) 78%, #05060a));
    clip-path: polygon(13% 0, 100% 8%, 88% 100%, 0 90%);
    font-family: Cinzel, Georgia, serif;
    font-size: clamp(34px, 4vw, 58px);
    font-weight: 800;
    line-height: 1;
    box-shadow: 10px 12px 0 #101217;
}

.vm-rule-page-header p {
    margin: 0 0 4px;
    color: color-mix(in srgb, var(--vm-accent-light) 70%, var(--vm-rules-muted));
    font-size: clamp(10px, .8vw, 12px);
    font-weight: 900;
    letter-spacing: .25em;
}

.vm-rule-page-header h3 {
    margin: 0;
    color: var(--vm-rules-text);
    font-family: Cinzel, Georgia, serif;
    font-size: clamp(27px, 3.7vw, 55px);
    font-weight: 800;
    line-height: .98;
    letter-spacing: .015em;
}

.vm-rules-page p {
    max-width: 1020px;
    margin: 0;
    color: var(--vm-rules-muted);
    font-size: clamp(13px, 1.04vw, 17px);
    line-height: 1.65;
}

.vm-rules-page > p + p,
.vm-rule-feature p + p {
    margin-top: 12px;
}

.vm-rules-page strong,
.vm-rules-page h4 {
    color: var(--vm-rules-text);
}

.vm-rule-lead {
    position: relative;
    max-width: 1040px;
    margin-bottom: 24px;
    padding: clamp(22px, 2.4vw, 34px) clamp(22px, 3vw, 46px);
    color: var(--vm-rules-text);
    background: linear-gradient(110deg, var(--vm-rules-surface-strong) 0 67%, var(--vm-rules-accent-deep) 100%);
    clip-path: polygon(0 0, calc(100% - 32px) 0, 100% 50%, calc(100% - 32px) 100%, 0 100%, 14px 50%);
}

.vm-rule-lead::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 10px;
    background: var(--vm-rules-accent-soft);
}

.vm-rule-lead strong {
    display: block;
    margin-bottom: 8px;
    color: var(--vm-rules-text);
    font-family: Cinzel, Georgia, serif;
    font-size: clamp(17px, 1.65vw, 25px);
    letter-spacing: .04em;
}

.vm-rule-lead p {
    color: var(--vm-rules-muted);
}

.vm-rule-rank-grid,
.vm-rule-metrics,
.vm-rule-combo-grid,
.vm-rule-examples-grid {
    display: grid;
    gap: 12px;
}

.vm-rule-rank-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: clamp(26px, 3vw, 46px);
}

.vm-rule-rank-grid > div {
    position: relative;
    min-height: 124px;
    display: grid;
    align-content: center;
    gap: 4px;
    padding: 20px 15px;
    overflow: hidden;
    color: var(--vm-rules-text);
    background: var(--vm-rules-surface-raised);
    clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
    text-align: center;
}

.vm-rule-rank-grid > div:first-child {
    background: linear-gradient(145deg, var(--vm-rules-accent-soft), var(--vm-rules-accent-deep));
    transform: translateY(-10px);
}

.vm-rule-rank-grid span,
.vm-rule-rank-grid small {
    color: var(--vm-rules-muted);
    font-weight: 800;
    letter-spacing: .12em;
}

.vm-rule-rank-grid strong {
    color: var(--vm-rules-text);
    font-family: Cinzel, Georgia, serif;
    font-size: clamp(12px, 1.15vw, 17px);
}

.vm-rule-rank-grid small {
    font-size: 9px;
}

.vm-rule-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 860px;
    margin-bottom: 24px;
}

.vm-rule-metrics > div {
    display: grid;
    place-items: center;
    min-height: 132px;
    padding: 18px;
    border: 1px solid var(--vm-rules-line);
    background: var(--vm-rules-surface-raised);
    clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}

.vm-rule-metrics strong {
    color: color-mix(in srgb, var(--vm-accent-light) 78%, var(--vm-rules-text));
    font-family: Cinzel, Georgia, serif;
    font-size: clamp(42px, 5vw, 72px);
    line-height: .9;
}

.vm-rule-metrics span {
    margin-top: 8px;
    color: var(--vm-rules-muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .2em;
}

.vm-rule-family-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.vm-rule-family-list span {
    padding: 9px 18px;
    color: var(--vm-rules-text);
    background: var(--vm-rules-surface-strong);
    clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
    font-family: Cinzel, Georgia, serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
}

.vm-rule-block {
    position: relative;
    padding: clamp(19px, 2vw, 28px);
    border: 1px solid var(--vm-rules-line);
    background: var(--vm-rules-surface-raised);
    clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}

.vm-rule-block.is-accent {
    border-color: color-mix(in srgb, var(--vm-accent-light) 36%, var(--vm-rules-line));
    background: color-mix(in srgb, var(--vm-accent-main) 18%, var(--vm-rules-surface-raised));
}

.vm-rule-block h4,
.vm-rule-feature h4 {
    margin: 0 0 10px;
    font-family: Cinzel, Georgia, serif;
    font-size: clamp(14px, 1.2vw, 18px);
    letter-spacing: .05em;
}

.vm-rule-note,
.vm-rule-warning {
    position: relative;
    max-width: 1040px;
    margin-top: 24px;
    padding: 18px 22px 18px 28px;
    border-left: 8px solid var(--vm-accent-main);
    background: color-mix(in srgb, var(--vm-accent-main) 15%, var(--vm-rules-surface-raised));
}

.vm-rule-note strong,
.vm-rule-warning strong {
    display: block;
    margin-bottom: 5px;
    font-size: 11px;
    letter-spacing: .2em;
}

.vm-rule-warning {
    margin-bottom: 24px;
    border-left-color: color-mix(in srgb, #c85b67 68%, var(--vm-accent-main));
    background: color-mix(in srgb, #7a2e39 24%, var(--vm-rules-surface-raised));
}

.vm-rule-value-line {
    display: grid;
    
    gap: 6px;
    margin-top: 14px;
}

.vm-rule-value-line span {
    display: grid;
    place-items: center;
    min-height: 48px;
    color: var(--vm-rules-text);
    background: var(--vm-rules-surface-strong);
    font-family: Cinzel, Georgia, serif;
    font-size: clamp(16px, 1.5vw, 23px);
    font-weight: 800;
    clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
}

.vm-rule-value-line span:last-child {
    background: var(--vm-rules-accent-deep);
}

.vm-rule-order-card {
    max-width: 1040px;
    margin-bottom: 18px;
    padding: 20px 22px 24px;
    color: var(--vm-rules-text);
    background: var(--vm-rules-surface-strong);
    clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}

.vm-rule-order-card.is-reversed {
    background: linear-gradient(120deg, var(--vm-rules-accent-deep), var(--vm-rules-surface-strong) 78%);
}

.vm-rule-order-card .vm-rule-value-line span {
    color: var(--vm-rules-text);
    background: var(--vm-rules-surface-raised);
}

.vm-rule-order-card.is-reversed .vm-rule-value-line span:last-child,
.vm-rule-order-card:not(.is-reversed) .vm-rule-value-line span:last-child {
    color: var(--vm-rules-text);
    background: var(--vm-rules-accent-soft);
}

.vm-rule-order-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.vm-rule-order-title span {
    font-family: Cinzel, Georgia, serif;
    font-size: 17px;
    font-weight: 800;
}

.vm-rule-order-title strong {
    color: var(--vm-accent-light);
    font-size: 10px;
    letter-spacing: .16em;
}

.vm-rule-two-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.vm-rule-combo-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 24px 0;
}

.vm-rule-combo-grid > div {
    min-height: 112px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 4px;
    padding: 18px 10px;
    color: var(--vm-rules-text);
    background: var(--vm-rules-surface-strong);
    clip-path: polygon(11px 0, 100% 0, calc(100% - 11px) 100%, 0 100%);
    text-align: center;
}

.vm-rule-combo-grid span {
    color: var(--vm-accent-bright);
    font-family: Cinzel, Georgia, serif;
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
}

.vm-rule-combo-grid strong {
    color: var(--vm-rules-text);
    font-size: 10px;
    letter-spacing: .12em;
}

.vm-rule-combo-grid small {
    color: var(--vm-rules-soft);
    font-size: 9px;
}

.vm-rule-checklist {
    display: grid;
    gap: 10px;
    max-width: 1040px;
}

.vm-rule-checklist p {
    display: grid;
    grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    padding: 14px 18px;
    border-left: 7px solid var(--vm-accent-main);
    background: color-mix(in srgb, var(--vm-accent-main) 9%, var(--vm-rules-surface-raised));
}

.vm-rule-checklist strong {
    font-size: 11px;
    letter-spacing: .12em;
}

.vm-rule-checklist span {
    color: var(--vm-rules-muted);
    font-size: 13px;
    line-height: 1.45;
}

.vm-rule-feature {
    position: relative;
    max-width: 1050px;
    margin-bottom: 18px;
    padding: clamp(20px, 2.4vw, 34px);
    border: 1px solid var(--vm-rules-line);
    background: var(--vm-rules-surface-raised);
    clip-path: polygon(15px 0, 100% 0, calc(100% - 15px) 100%, 0 100%);
}

.vm-rule-feature::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 8px;
    background: var(--vm-rules-accent-soft);
}

.vm-rule-feature > header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 13px;
}

.vm-rule-feature > header span {
    display: grid;
    place-items: center;
    width: 42px;
    aspect-ratio: 1;
    color: var(--vm-rules-text);
    background: var(--vm-accent-dark);
    font-family: Cinzel, Georgia, serif;
    font-weight: 800;
    clip-path: polygon(12% 0, 100% 8%, 88% 100%, 0 90%);
}

.vm-rule-feature h4 {
    margin: 0;
    font-size: clamp(17px, 1.6vw, 24px);
}

.vm-rule-feature.is-joker {
    background: linear-gradient(145deg, color-mix(in srgb, var(--vm-accent-main) 14%, var(--vm-rules-surface-raised)), var(--vm-rules-surface-raised));
}

.vm-rule-example {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
}

.vm-rule-example span,
.vm-rule-example strong {
    padding: 9px 14px;
    background: var(--vm-rules-surface-strong);
    color: var(--vm-rules-text);
    font-family: Cinzel, Georgia, serif;
    font-size: 12px;
    clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
}

.vm-rule-example strong {
    background: var(--vm-rules-accent-soft);
}

.vm-rule-examples-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 18px 0;
}

.vm-rule-examples-grid > span {
    display: grid;
    gap: 5px;
    padding: 15px;
    background: var(--vm-rules-surface-strong);
    clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
}

.vm-rule-examples-grid b {
    color: var(--vm-rules-text);
    font-family: Cinzel, Georgia, serif;
    font-size: 12px;
}

.vm-rule-examples-grid small {
    color: var(--vm-accent-light);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
}

.vm-rule-exchange-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(130px, .6fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 12px;
    max-width: 1050px;
    margin-top: 24px;
}

.vm-rule-exchange-side,
.vm-rule-exchange-arrow {
    display: grid;
    place-items: center;
    align-content: center;
    min-height: 142px;
    padding: 18px;
    text-align: center;
}

.vm-rule-exchange-side {
    color: var(--vm-rules-text);
    background: var(--vm-rules-surface-strong);
    clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}

.vm-rule-exchange-side.is-winner {
    background: linear-gradient(145deg, var(--vm-rules-accent-soft), var(--vm-rules-accent-deep));
}

.vm-rule-exchange-side span,
.vm-rule-exchange-side small {
    color: var(--vm-rules-muted);
    font-weight: 800;
    letter-spacing: .1em;
}

.vm-rule-exchange-side strong {
    margin: 4px 0;
    color: var(--vm-rules-text);
    font-family: Cinzel, Georgia, serif;
    font-size: clamp(14px, 1.4vw, 20px);
}

.vm-rule-exchange-side small {
    font-size: 9px;
}

.vm-rule-exchange-arrow {
    background: color-mix(in srgb, var(--vm-accent-main) 8%, var(--vm-rules-surface-raised));
}

.vm-rule-exchange-arrow b,
.vm-rule-exchange-arrow small {
    color: var(--vm-rules-muted);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: normal;
}

.vm-rule-exchange-arrow i {
    margin: 3px 0;
    color: var(--vm-rules-text);
    font-family: Cinzel, Georgia, serif;
    font-size: 34px;
    font-style: normal;
}


.vm-rule-exchange-grid.is-secondary {
    margin-top: 12px;
}

.vm-rule-end-card {
    position: relative;
    max-width: 960px;
    margin-bottom: 18px;
    padding: clamp(26px, 3vw, 46px);
    overflow: hidden;
    color: var(--vm-rules-text);
    background: linear-gradient(120deg, var(--vm-rules-accent-soft), var(--vm-rules-accent-deep));
    clip-path: polygon(18px 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
}


.vm-rule-end-card.is-draw {
    color: var(--vm-rules-text);
    border: 1px solid var(--vm-rules-line);
    background: var(--vm-rules-surface-raised);
}


.vm-rule-end-card > span,
.vm-rule-end-card > strong,
.vm-rule-end-card > p {
    position: relative;
    z-index: 1;
}

.vm-rule-end-card > span {
    display: block;
    margin-bottom: 8px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .22em;
}

.vm-rule-end-card > strong {
    display: block;
    max-width: 720px;
    margin-bottom: 12px;
    color: inherit;
    font-family: Cinzel, Georgia, serif;
    font-size: clamp(20px, 2.2vw, 34px);
    line-height: 1.12;
}

.vm-rule-end-card p {
    max-width: 680px;
    color: inherit;
    opacity: .82;
}


.vm-rules-footer {
    position: relative;
    z-index: 2;
    min-height: 64px;
    display: grid;
    grid-template-columns: minmax(130px, 1fr) auto minmax(130px, 1fr);
    align-items: center;
    gap: 10px;
    padding: 9px clamp(18px, 2.5vw, 38px);
    border-top: 1px solid var(--vm-rules-line);
    background: color-mix(in srgb, var(--vm-accent-dark) 18%, #101620);
}

.vm-rules-step,
.vm-rules-menu-return {
    min-height: 44px;
    border: 0;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .12em;
    cursor: pointer;
}

.vm-rules-step {
    justify-self: start;
    padding: 0 20px;
    color: var(--vm-rules-text);
    background: var(--vm-rules-surface-strong);
    clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}

.vm-rules-step.is-next {
    justify-self: end;
    background: var(--vm-rules-accent-soft);
}

.vm-rules-step:disabled {
    opacity: .25;
    cursor: default;
}

.vm-rules-menu-return {
    padding: 0 18px;
    color: var(--vm-rules-muted);
    background: transparent;
}

.vm-rules-step:not(:disabled):hover,
.vm-rules-step:not(:disabled):focus-visible,
.vm-rules-menu-return:hover,
.vm-rules-menu-return:focus-visible {
    filter: brightness(1.16);
    transform: translateY(-1px);
}

@media (max-width: 980px) {
    .vm-rules-header {
        min-height: 118px;
        grid-template-columns: minmax(0, 1fr) auto;
        padding-left: 34px;
        padding-right: 24px;
    }

    .vm-rules-progress {
        display: none;
    }

    .vm-rules-layout {
        grid-template-columns: 210px minmax(0, 1fr);
        gap: 16px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .vm-rules-tab {
        grid-template-columns: 42px minmax(0, 1fr);
        padding-right: 18px;
    }

    .vm-rules-tab small {
        display: none;
    }

    .vm-rule-rank-grid,
    .vm-rule-combo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vm-rule-examples-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .vm-rules-screen {
        padding: 0;
        background:
            linear-gradient(155deg, color-mix(in srgb, var(--vm-accent-dark) 48%, transparent), transparent 45%),
            #020306;
    }

    .vm-rules-panel {
        height: 100dvh;
        border-radius: 0;
    }

    .vm-rules-panel::before {
        width: 4px;
    }

    .vm-rules-header {
        min-height: 104px;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
        padding: max(15px, env(safe-area-inset-top)) 14px 12px 22px;
    }

    .vm-rules-header::before {
        right: 72px;
        bottom: -8px;
        font-size: 76px;
    }

    .vm-rules-header::after {
        left: 36%;
        bottom: -66px;
        width: 55%;
    }

    

    .vm-rules-header p {
        font-size: 8px;
        letter-spacing: .32em;
    }

    .vm-rules-header h2 {
        font-size: clamp(28px, 10vw, 42px);
    }

    .vm-rules-close {
        width: 54px;
    }

    .vm-rules-layout {
        min-height: 0;
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
        gap: 9px;
        padding: 9px 9px max(9px, env(safe-area-inset-bottom)) 12px;
    }

    .vm-rules-nav {
        display: flex;
        align-items: stretch;
        gap: 7px;
        padding: 0 0 3px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
    }

    .vm-rules-tab {
        flex: 0 0 auto;
        width: auto;
        min-width: 112px;
        min-height: 48px;
        grid-template-columns: 30px auto;
        grid-template-rows: 1fr;
        gap: 6px;
        padding: 8px 18px 8px 8px;
        scroll-snap-align: center;
        clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 6px 50%);
    }

    .vm-rules-tab > span {
        grid-row: auto;
        font-size: 17px;
    }

    .vm-rules-tab strong {
        align-self: center;
        font-size: 9px;
        white-space: nowrap;
    }

    .vm-rules-tab.is-active {
        transform: none;
    }

    .vm-rules-tab:hover,
    .vm-rules-tab:focus-visible {
        transform: none;
    }

    .vm-rules-stage {
        clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    }

    .vm-rules-stage-top {
        min-height: 42px;
        grid-template-columns: auto minmax(20px, 1fr) auto;
        gap: 9px;
        padding: 7px 15px;
    }

    .vm-rules-stage-top > span {
        font-size: 18px;
    }

    .vm-rules-stage-top > strong {
        font-size: 8px;
        letter-spacing: .1em;
    }

    .vm-rules-stage-top::after {
        bottom: -11px;
        height: 20px;
        width: 50%;
    }

    .vm-rules-page {
        padding: 24px 16px 28px;
    }

    .vm-rule-page-header {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 12px;
        margin-bottom: 22px;
    }

    .vm-rule-page-number {
        width: 58px;
        font-size: 27px;
        box-shadow: 6px 7px 0 #101217;
    }

    .vm-rule-page-header p {
        font-size: 8px;
        letter-spacing: .16em;
    }

    .vm-rule-page-header h3 {
        font-size: clamp(23px, 7.3vw, 34px);
    }

    .vm-rules-page p {
        font-size: 13px;
        line-height: 1.58;
    }

    .vm-rule-lead {
        padding: 20px 20px 20px 24px;
        clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 8px 50%);
    }

    .vm-rule-rank-grid,
    .vm-rule-metrics,
    .vm-rule-combo-grid,
    .vm-rule-two-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vm-rule-rank-grid > div,
    .vm-rule-combo-grid > div {
        min-height: 96px;
    }

    .vm-rule-rank-grid > div:first-child {
        transform: none;
    }

    .vm-rule-metrics > div {
        min-height: 100px;
    }

    .vm-rule-metrics > div:last-child {
        grid-column: 1 / -1;
    }

    

    .vm-rule-order-title {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .vm-rule-checklist p {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .vm-rule-exchange-grid {
        grid-template-columns: 1fr;
    }

    .vm-rule-exchange-side,
    .vm-rule-exchange-arrow {
        min-height: 92px;
    }

    .vm-rule-exchange-arrow i {
        transform: rotate(90deg);
    }

    

    

    .vm-rules-footer {
        min-height: 58px;
        grid-template-columns: 1fr 1fr;
        padding: 7px 10px;
    }

    .vm-rules-menu-return {
        display: none;
    }

    .vm-rules-step {
        width: 100%;
        justify-self: stretch;
        padding-inline: 10px;
        font-size: 8px;
    }
}

@media (max-width: 420px) {
    .vm-rules-header h2 {
        font-size: 27px;
    }

    .vm-rules-tab {
        min-width: 104px;
    }

    .vm-rule-rank-grid,
    .vm-rule-metrics,
    .vm-rule-combo-grid,
    .vm-rule-two-columns {
        grid-template-columns: 1fr;
    }

    .vm-rule-metrics > div:last-child {
        grid-column: auto;
    }

    .vm-rule-rank-grid > div,
    .vm-rule-combo-grid > div,
    .vm-rule-metrics > div {
        min-height: 84px;
    }
}

/* =========================================================
   V1.18.0 — OPTIONS ET CRÉDITS, ÉCRANS PERSONA CONFINÉS
   ========================================================= */
#vm-options-screen,
#vm-credits-screen {
    display: grid;
    place-items: center;
    overflow: hidden;
    padding:
        max(18px, env(safe-area-inset-top))
        max(18px, env(safe-area-inset-right))
        max(18px, env(safe-area-inset-bottom))
        max(18px, env(safe-area-inset-left));
    background:
        linear-gradient(108deg, rgba(1, 2, 6, .94) 0 44%, color-mix(in srgb, var(--vm-accent-deep) 72%, rgba(1, 2, 6, .92)) 44% 100%),
        url("background.webp") center / cover no-repeat;
}

#vm-options-screen::before,
#vm-credits-screen::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(118deg, transparent 0 58%, color-mix(in srgb, var(--vm-accent-main) 15%, transparent) 58% 62%, transparent 62%),
        repeating-linear-gradient(132deg, transparent 0 54px, color-mix(in srgb, var(--vm-accent-light) 3%, transparent) 54px 56px);
}

#vm-options-screen .vm-options-panel,
#vm-credits-screen .vm-credits-panel {
    position: relative;
    z-index: 1;
    width: min(100%, 1540px);
    height: min(94dvh, 980px);
    max-height: none;
    margin: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--vm-accent-light) 32%, transparent);
    border-left: 9px solid var(--vm-accent-main);
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - 46px) 0, 100% 46px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
    background:
        linear-gradient(113deg, color-mix(in srgb, var(--vm-accent-dark) 17%, rgba(8, 8, 13, .98)) 0 18%, transparent 18%),
        linear-gradient(180deg, rgba(13, 13, 21, .985), rgba(5, 5, 10, .995));
    box-shadow: 0 35px 100px rgba(0, 0, 0, .68), inset 0 1px 0 rgba(255, 255, 255, .04);
}

#vm-options-screen .vm-options-panel::before,
#vm-credits-screen .vm-credits-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(105deg, color-mix(in srgb, var(--vm-accent-main) 10%, transparent), transparent 34%),
        linear-gradient(90deg, transparent 0 76%, color-mix(in srgb, var(--vm-accent-main) 7%, transparent) 76% 100%);
}

.vm-persona-subscreen-header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 150px;
    padding: 22px 48px 20px 42px;
    border-bottom: 1px solid color-mix(in srgb, var(--vm-accent-light) 22%, transparent);
    background:
        linear-gradient(102deg, color-mix(in srgb, var(--vm-accent-dark) 45%, rgba(8, 8, 14, .88)) 0 33%, rgba(8, 8, 14, .76) 33% 72%, color-mix(in srgb, var(--vm-accent-main) 20%, rgba(8, 8, 14, .72)) 72% 100%);
}

.vm-persona-subscreen-header::after {
    content: "";
    position: absolute;
    left: 42px;
    right: 42px;
    bottom: -5px;
    height: 5px;
    background: linear-gradient(90deg, var(--vm-accent-bright), color-mix(in srgb, var(--vm-accent-main) 35%, transparent) 55%, transparent);
}

.vm-persona-title-lockup {
    display: flex;
    align-items: center;
    gap: 26px;
    min-width: 0;
}

.vm-persona-title-index {
    display: grid;
    place-items: center;
    width: 98px;
    height: 98px;
    flex: 0 0 auto;
    color: var(--vm-accent-pale);
    background: linear-gradient(145deg, var(--vm-accent-main), var(--vm-accent-dark));
    clip-path: polygon(14px 0, 100% 8px, calc(100% - 10px) 100%, 0 calc(100% - 12px));
    font-family: Cinzel, Georgia, serif;
    font-size: 44px;
    font-weight: 800;
    transform: rotate(-4deg);
    box-shadow: 13px 10px 0 rgba(0, 0, 0, .38);
}

.vm-persona-title-lockup p {
    margin: 0 0 3px;
    color: var(--vm-accent-bright);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .28em;
}

.vm-persona-title-lockup h2 {
    margin: 0;
    color: #f6f2ea;
    font-family: Cinzel, Georgia, serif;
    font-size: clamp(38px, 5vw, 74px);
    line-height: .95;
    letter-spacing: .035em;
    text-shadow: 5px 5px 0 color-mix(in srgb, var(--vm-accent-dark) 72%, #000);
}

.vm-persona-close {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    flex: 0 0 auto;
    border: 1px solid color-mix(in srgb, var(--vm-accent-light) 30%, transparent);
    border-radius: 50%;
    color: #e9e5df;
    background: rgba(4, 4, 8, .7);
    font-family: Arial, sans-serif;
    font-size: 42px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    transition: transform .16s ease, border-color .16s ease, color .16s ease, background .16s ease;
}

.vm-persona-close:hover,
.vm-persona-close:focus-visible {
    color: #fff;
    border-color: var(--vm-accent-bright);
    background: color-mix(in srgb, var(--vm-accent-dark) 56%, rgba(4, 4, 8, .9));
    transform: rotate(8deg) scale(1.05);
}

#vm-options-screen .vm-options-body {
    position: relative;
    z-index: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(220px, .42fr) minmax(0, 1.58fr);
    gap: clamp(24px, 4vw, 70px);
    padding: clamp(28px, 4vw, 58px) clamp(28px, 5vw, 78px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--vm-accent-main) 65%, transparent) transparent;
}

#vm-options-screen .vm-options-rail {
    position: relative;
    min-height: 460px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 34px 30px 34px 46px;
    overflow: hidden;
    color: #f2eee8;
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--vm-accent-dark) 76%, #08080d), color-mix(in srgb, var(--vm-accent-deep) 80%, #050509));
    clip-path: polygon(20px 0, 100% 0, calc(100% - 42px) 100%, 0 calc(100% - 28px));
}

#vm-options-screen .vm-options-rail::before {
    content: "OPTIONS";
    position: absolute;
    right: -30px;
    bottom: -18px;
    color: color-mix(in srgb, var(--vm-accent-light) 7%, transparent);
    font-family: Cinzel, Georgia, serif;
    font-size: 92px;
    font-weight: 800;
    transform: rotate(-90deg) translateX(70%);
    transform-origin: right bottom;
}

#vm-options-screen .vm-options-rail span {
    color: var(--vm-accent-bright);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .24em;
}

#vm-options-screen .vm-options-rail strong {
    margin-top: 14px;
    font-family: Cinzel, Georgia, serif;
    font-size: clamp(30px, 3vw, 52px);
    line-height: 1.05;
}

#vm-options-screen .vm-options-rail i {
    width: 76%;
    height: 6px;
    margin-top: 30px;
    background: linear-gradient(90deg, var(--vm-accent-bright), transparent);
    transform: skewX(-28deg);
}

#vm-options-screen .vm-options-list {
    align-self: center;
    display: grid;
    gap: 14px;
}

#vm-options-screen .vm-option-card {
    position: relative;
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) minmax(150px, auto);
    align-items: center;
    gap: 18px;
    min-height: 102px;
    padding: 18px 24px 18px 18px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--vm-accent-light) 18%, transparent);
    color: #ece8e2;
    background:
        linear-gradient(102deg, color-mix(in srgb, var(--vm-accent-dark) 25%, rgba(8, 8, 13, .86)) 0 18%, rgba(8, 8, 13, .88) 18% 100%);
    clip-path: polygon(12px 0, 100% 0, calc(100% - 14px) 100%, 0 100%, 0 12px);
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

#vm-options-screen .vm-option-card:hover,
#vm-options-screen .vm-option-card:focus-within {
    border-color: color-mix(in srgb, var(--vm-accent-bright) 56%, transparent);
    background:
        linear-gradient(102deg, color-mix(in srgb, var(--vm-accent-main) 34%, rgba(8, 8, 13, .9)) 0 18%, color-mix(in srgb, var(--vm-accent-dark) 18%, rgba(8, 8, 13, .9)) 18% 100%);
    transform: translateX(7px);
}

#vm-options-screen .vm-option-index {
    color: var(--vm-accent-light);
    font-family: Cinzel, Georgia, serif;
    font-size: 34px;
    font-weight: 800;
    text-align: center;
}

#vm-options-screen .vm-option-copy {
    display: grid;
    gap: 5px;
    min-width: 0;
}

#vm-options-screen .vm-option-copy strong {
    color: #f4f0e9;
    font-family: Cinzel, Georgia, serif;
    font-size: clamp(17px, 1.55vw, 25px);
    letter-spacing: .05em;
}

#vm-options-screen .vm-option-copy small {
    color: color-mix(in srgb, var(--vm-accent-pale) 55%, #858994);
    font-size: 12px;
    line-height: 1.35;
}

#vm-options-screen .vm-option-toggle {
    min-width: 142px;
    min-height: 48px;
    padding: 0 18px;
    border: 1px solid color-mix(in srgb, var(--vm-accent-light) 50%, transparent);
    border-radius: 0;
    color: #0c0910;
    background: linear-gradient(110deg, var(--vm-accent-light), var(--vm-accent-main));
    clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
    font-family: Cinzel, Georgia, serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
}

#vm-options-screen .vm-option-toggle.is-muted {
    color: #c7c2c8;
    border-color: color-mix(in srgb, var(--vm-accent-light) 18%, transparent);
    background: rgba(255, 255, 255, .045);
}

#vm-options-screen .vm-option-range-wrap {
    display: grid;
    grid-template-columns: minmax(120px, 210px) 52px;
    align-items: center;
    gap: 14px;
}

#vm-options-screen #vm-options-volume {
    width: 100%;
    height: 8px;
    margin: 0;
    appearance: none;
    border: 0;
    border-radius: 0;
    background: linear-gradient(90deg, var(--vm-accent-main), color-mix(in srgb, var(--vm-accent-dark) 72%, #14141b));
    cursor: pointer;
}

#vm-options-screen #vm-options-volume::-webkit-slider-thumb {
    width: 22px;
    height: 28px;
    appearance: none;
    border: 2px solid #f5f0e9;
    border-radius: 0;
    background: var(--vm-accent-main);
    transform: skewX(-10deg);
    box-shadow: 4px 4px 0 rgba(0, 0, 0, .35);
}

#vm-options-screen #vm-options-volume::-moz-range-thumb {
    width: 20px;
    height: 26px;
    border: 2px solid #f5f0e9;
    border-radius: 0;
    background: var(--vm-accent-main);
    transform: skewX(-10deg);
}

#vm-options-screen #vm-options-volume:disabled {
    opacity: .35;
    cursor: not-allowed;
}

#vm-options-screen #vm-options-volume-value {
    color: var(--vm-accent-light);
    font-family: Cinzel, Georgia, serif;
    font-size: 15px;
    font-weight: 800;
    text-align: right;
}

#vm-options-screen .vm-option-choice {
    display: grid;
    grid-template-columns: repeat(2, minmax(92px, 1fr));
    gap: 5px;
    min-width: 220px;
}

#vm-options-screen .vm-option-choice button {
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid color-mix(in srgb, var(--vm-accent-light) 16%, transparent);
    color: #98959d;
    background: rgba(255, 255, 255, .035);
    font-family: Cinzel, Georgia, serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    cursor: pointer;
}

#vm-options-screen .vm-option-choice button.is-selected {
    color: #0b0810;
    border-color: var(--vm-accent-light);
    background: linear-gradient(110deg, var(--vm-accent-light), var(--vm-accent-main));
}

.vm-persona-subscreen-footer {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    min-height: 88px;
    padding: 16px 48px;
    border-top: 1px solid color-mix(in srgb, var(--vm-accent-light) 16%, transparent);
    background: rgba(5, 5, 9, .94);
}

.vm-persona-subscreen-footer > span {
    color: color-mix(in srgb, var(--vm-accent-pale) 45%, #777a84);
    font-size: 11px;
}

.vm-persona-subscreen-footer .vm-menu-back,
#vm-credits-screen .vm-credits-legal .vm-menu-back {
    width: min(360px, 42vw);
    min-height: 54px;
    margin: 0;
    border-radius: 0;
    clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}

#vm-credits-screen .vm-credits-panel {
    grid-template-rows: auto minmax(0, 1fr);
}

#vm-credits-screen .vm-credits-content {
    position: relative;
    z-index: 1;
    min-height: 0;
    display: block;
    padding: clamp(26px, 3.5vw, 52px) clamp(28px, 5vw, 76px) max(28px, env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--vm-accent-main) 62%, transparent) transparent;
}

#vm-credits-screen .vm-credits-intro {
    position: relative;
    min-height: 172px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 28px;
    padding: 24px clamp(28px, 4vw, 64px);
    overflow: hidden;
    color: #f5f1e9;
    background:
        linear-gradient(112deg, color-mix(in srgb, var(--vm-accent-main) 72%, #11111a) 0 34%, color-mix(in srgb, var(--vm-accent-dark) 75%, #08080d) 34% 100%);
    clip-path: polygon(18px 0, 100% 0, calc(100% - 44px) 100%, 0 calc(100% - 16px));
}

#vm-credits-screen .vm-credits-intro::after {
    content: "CREDITS";
    position: absolute;
    right: 22px;
    bottom: -34px;
    color: rgba(255, 255, 255, .055);
    font-family: Cinzel, Georgia, serif;
    font-size: clamp(74px, 11vw, 170px);
    font-weight: 800;
    line-height: 1;
}

#vm-credits-screen .vm-credits-intro span {
    position: relative;
    z-index: 1;
    color: var(--vm-accent-pale);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .3em;
}

#vm-credits-screen .vm-credits-intro strong {
    position: relative;
    z-index: 1;
    margin-top: 8px;
    font-family: Cinzel, Georgia, serif;
    font-size: clamp(28px, 3.7vw, 55px);
    line-height: 1.02;
    letter-spacing: .035em;
}

#vm-credits-screen .vm-credits-intro i {
    position: absolute;
    top: 0;
    right: 16%;
    width: 18%;
    height: 100%;
    background: color-mix(in srgb, var(--vm-accent-light) 12%, transparent);
    transform: skewX(-24deg);
}

#vm-credits-screen .vm-credits-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(360px, .96fr);
    gap: 24px;
    align-items: stretch;
}

#vm-credits-screen .vm-credits-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

#vm-credits-screen .vm-credit-block {
    position: relative;
    min-height: 198px;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    padding: 24px 24px 24px 18px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--vm-accent-light) 18%, transparent);
    border-radius: 0;
    text-align: left;
    background:
        linear-gradient(108deg, color-mix(in srgb, var(--vm-accent-dark) 26%, rgba(8, 8, 13, .92)) 0 21%, rgba(8, 8, 13, .92) 21% 100%);
    clip-path: polygon(12px 0, 100% 0, calc(100% - 14px) 100%, 0 100%, 0 12px);
}

#vm-credits-screen .vm-credit-block::after {
    content: "";
    position: absolute;
    right: -25px;
    bottom: -40px;
    width: 110px;
    height: 160px;
    background: color-mix(in srgb, var(--vm-accent-main) 8%, transparent);
    transform: rotate(25deg);
}

#vm-credits-screen .vm-credit-number {
    align-self: stretch;
    display: grid;
    place-items: center;
    color: var(--vm-accent-light) !important;
    font-family: Cinzel, Georgia, serif;
    font-size: 32px !important;
    font-weight: 800;
    border-right: 1px solid color-mix(in srgb, var(--vm-accent-light) 18%, transparent);
}

#vm-credits-screen .vm-credit-block > div {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 8px;
}

#vm-credits-screen .vm-credit-eyebrow {
    color: var(--vm-accent-bright) !important;
    font-size: 8px !important;
    font-weight: 900;
    letter-spacing: .18em;
}

#vm-credits-screen .vm-credit-title {
    color: #f4f0e8 !important;
    font-family: Cinzel, Georgia, serif;
    font-size: clamp(17px, 1.65vw, 25px) !important;
    line-height: 1.15;
    letter-spacing: .045em;
}

#vm-credits-screen .vm-credit-names,
#vm-credits-screen .vm-credit-note {
    margin: 0;
    color: #b8b5bc;
    font-size: 12px;
    line-height: 1.55;
}

#vm-credits-screen .vm-credit-names {
    color: #ece8e2;
    font-family: Cinzel, Georgia, serif;
    font-size: 15px;
    font-weight: 700;
}

#vm-credits-screen .vm-credit-link {
    width: max-content;
    color: var(--vm-accent-light);
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--vm-accent-light) 44%, transparent);
}

#vm-credits-screen .vm-credit-link:hover,
#vm-credits-screen .vm-credit-link:focus-visible {
    color: #fff;
    border-bottom-color: #fff;
}

#vm-credits-screen .vm-ardyn-credit {
    min-height: 410px;
    margin: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--vm-accent-light) 24%, transparent);
    border-radius: 0;
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--vm-accent-main) 20%, rgba(10, 8, 14, .94)), rgba(6, 6, 10, .97));
    clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 18px);
}

#vm-credits-screen .vm-ardyn-credit-header {
    min-height: 116px;
    padding: 18px 24px;
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    border-bottom: 1px solid color-mix(in srgb, var(--vm-accent-light) 16%, transparent);
    background: linear-gradient(100deg, color-mix(in srgb, var(--vm-accent-dark) 58%, transparent), transparent);
}

#vm-credits-screen .vm-ardyn-credit-portrait {
    width: 80px;
    height: 80px;
    overflow: hidden;
    border: 2px solid var(--vm-accent-light);
    clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
    transform: rotate(-3deg);
}

#vm-credits-screen .vm-ardyn-credit-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#vm-credits-screen .vm-ardyn-credit-header span {
    color: var(--vm-accent-bright);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .18em;
}

#vm-credits-screen .vm-ardyn-credit-header strong {
    display: block;
    margin-top: 5px;
    color: #f4f0e8;
    font-family: Cinzel, Georgia, serif;
    font-size: 16px;
}

#vm-credits-screen .vm-ardyn-credit-quote {
    align-self: center;
    padding: 26px clamp(24px, 3vw, 42px);
}

#vm-credits-screen .vm-ardyn-credit-quote p {
    margin: 0 0 14px;
    color: #c8c4cb;
    font-size: 12px;
    line-height: 1.65;
}

#vm-credits-screen .vm-ardyn-credit-quote p:last-child {
    margin-bottom: 0;
}

#vm-credits-screen .vm-ardyn-credit > footer {
    padding: 15px 28px;
    color: var(--vm-accent-light);
    font-family: Cinzel, Georgia, serif;
    font-size: 14px;
    font-weight: 800;
    text-align: right;
    border-top: 1px solid color-mix(in srgb, var(--vm-accent-light) 14%, transparent);
}

#vm-credits-screen .vm-credits-legal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid color-mix(in srgb, var(--vm-accent-light) 16%, transparent);
}

#vm-credits-screen .vm-credits-legal > span {
    margin-left: auto;
    color: #76737b;
    font-size: 10px;
}

@media (max-width: 1050px) {
    #vm-options-screen .vm-options-body {
        grid-template-columns: 1fr;
    }

    #vm-options-screen .vm-options-rail {
        min-height: 140px;
        padding: 24px 34px;
        justify-content: center;
    }

    #vm-options-screen .vm-options-rail strong br {
        display: none;
    }

    #vm-options-screen .vm-options-rail::before {
        transform: none;
        right: 22px;
        bottom: -24px;
        font-size: 88px;
    }

    #vm-credits-screen .vm-credits-layout {
        grid-template-columns: 1fr;
    }

    #vm-credits-screen .vm-ardyn-credit {
        min-height: 0;
    }
}

@media (max-width: 760px) {
    #vm-options-screen,
    #vm-credits-screen {
        padding: 0;
        background:
            linear-gradient(180deg, rgba(2, 2, 7, .9), color-mix(in srgb, var(--vm-accent-deep) 35%, rgba(2, 2, 7, .94))),
            url("background_mobile.webp") center / cover no-repeat;
    }

    #vm-options-screen .vm-options-panel,
    #vm-credits-screen .vm-credits-panel {
        width: 100%;
        height: 100dvh;
        border: 0;
        border-left: 6px solid var(--vm-accent-main);
        clip-path: none;
    }

    .vm-persona-subscreen-header {
        min-height: 112px;
        padding: max(14px, env(safe-area-inset-top)) 18px 14px;
    }

    .vm-persona-subscreen-header::after {
        left: 18px;
        right: 18px;
    }

    .vm-persona-title-lockup {
        gap: 14px;
    }

    .vm-persona-title-index {
        width: 68px;
        height: 68px;
        font-size: 29px;
    }

    .vm-persona-title-lockup p {
        font-size: 7px;
    }

    .vm-persona-title-lockup h2 {
        font-size: clamp(27px, 9vw, 40px);
    }

    .vm-persona-close {
        width: 48px;
        height: 48px;
        font-size: 32px;
    }

    #vm-options-screen .vm-options-body {
        display: block;
        padding: 20px 14px 24px;
    }

    #vm-options-screen .vm-options-rail {
        display: none;
    }

    #vm-options-screen .vm-options-list {
        gap: 10px;
    }

    #vm-options-screen .vm-option-card {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 10px 12px;
        min-height: 0;
        padding: 15px 14px 15px 10px;
    }

    #vm-options-screen .vm-option-index {
        grid-row: 1 / span 2;
        font-size: 25px;
    }

    #vm-options-screen .vm-option-copy strong {
        font-size: 15px;
    }

    #vm-options-screen .vm-option-copy small {
        font-size: 10px;
    }

    #vm-options-screen .vm-option-toggle,
    #vm-options-screen .vm-option-range-wrap,
    #vm-options-screen .vm-option-choice {
        grid-column: 2;
        width: 100%;
        min-width: 0;
    }

    #vm-options-screen .vm-option-toggle {
        min-height: 43px;
    }

    #vm-options-screen .vm-option-range-wrap {
        grid-template-columns: minmax(0, 1fr) 46px;
    }

    .vm-persona-subscreen-footer {
        min-height: 78px;
        padding: 12px 16px max(12px, env(safe-area-inset-bottom));
    }

    .vm-persona-subscreen-footer > span {
        display: none;
    }

    .vm-persona-subscreen-footer .vm-menu-back,
    #vm-credits-screen .vm-credits-legal .vm-menu-back {
        width: 100%;
    }

    #vm-credits-screen .vm-credits-content {
        padding: 18px 14px max(20px, env(safe-area-inset-bottom));
    }

    #vm-credits-screen .vm-credits-intro {
        min-height: 134px;
        margin-bottom: 14px;
        padding: 20px 24px;
    }

    #vm-credits-screen .vm-credits-intro strong {
        font-size: 25px;
    }

    #vm-credits-screen .vm-credits-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    #vm-credits-screen .vm-credit-block {
        min-height: 150px;
        grid-template-columns: 46px minmax(0, 1fr);
        padding: 18px 18px 18px 12px;
    }

    #vm-credits-screen .vm-credit-number {
        font-size: 25px !important;
    }

    #vm-credits-screen .vm-ardyn-credit-header {
        grid-template-columns: 66px minmax(0, 1fr);
        padding: 15px 18px;
    }

    #vm-credits-screen .vm-ardyn-credit-portrait {
        width: 66px;
        height: 66px;
    }

    #vm-credits-screen .vm-ardyn-credit-quote {
        padding: 22px 20px;
    }

    #vm-credits-screen .vm-credits-legal {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
        margin-top: 20px;
    }

    #vm-credits-screen .vm-credits-legal > span {
        margin-left: 0;
        text-align: center;
    }
}


/* VOID MATCH OST — lecteur des crédits */
#vm-credits-screen .vm-ost-player {
    position: relative;
    margin-top: 28px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--vm-accent-light) 24%, transparent);
    background: rgba(5, 7, 13, .94);
    clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 18px);
}

#vm-credits-screen .vm-ost-player::before {
    content: "OST";
    position: absolute;
    right: -10px;
    top: -38px;
    color: color-mix(in srgb, var(--vm-accent-main) 8%, transparent);
    font-family: Cinzel, Georgia, serif;
    font-size: clamp(110px, 15vw, 210px);
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
}

#vm-credits-screen .vm-ost-cover-wrap {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(210px, 320px) minmax(0, 1fr);
    align-items: center;
    gap: clamp(28px, 5vw, 70px);
    padding: clamp(26px, 4vw, 54px);
    border-bottom: 1px solid color-mix(in srgb, var(--vm-accent-light) 16%, transparent);
    background:
        linear-gradient(112deg, color-mix(in srgb, var(--vm-accent-dark) 38%, transparent), transparent 58%),
        linear-gradient(90deg, rgba(255,255,255,.02), transparent);
}

#vm-credits-screen .vm-ost-cover {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border: 2px solid #f3f3f6;
    box-shadow: 14px 14px 0 color-mix(in srgb, var(--vm-accent-main) 42%, transparent);
    transform: rotate(-1.5deg);
}

#vm-credits-screen .vm-ost-cover-copy {
    position: relative;
    z-index: 1;
}

#vm-credits-screen .vm-ost-cover-copy > span {
    color: var(--vm-accent-bright);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .28em;
}

#vm-credits-screen .vm-ost-cover-copy h3 {
    margin: 10px 0 14px;
    color: #fff;
    font-family: Cinzel, Georgia, serif;
    font-size: clamp(36px, 5vw, 74px);
    line-height: .95;
    letter-spacing: .025em;
}

#vm-credits-screen .vm-ost-cover-copy p {
    max-width: 530px;
    margin: 0;
    color: #b9b9c2;
    font-size: 13px;
    line-height: 1.6;
}

#vm-credits-screen .vm-ost-tracklist {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 1px;
    padding: 18px clamp(18px, 3vw, 38px) 30px;
}

#vm-credits-screen .vm-ost-track {
    min-height: 82px;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 12px 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--vm-accent-light) 13%, transparent);
    background: linear-gradient(90deg, rgba(255,255,255,.025), transparent);
}

#vm-credits-screen .vm-ost-track:last-child {
    border-bottom: 0;
}

#vm-credits-screen .vm-ost-number {
    color: var(--vm-accent-light);
    font-family: Cinzel, Georgia, serif;
    font-size: 21px;
}

#vm-credits-screen .vm-ost-track > strong {
    color: #eeeeF2;
    font-size: 17px;
    font-weight: 700;
}

#vm-credits-screen .vm-ost-toggle {
    min-width: 126px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 9px 14px;
    border: 1px solid color-mix(in srgb, var(--vm-accent-light) 38%, transparent);
    color: var(--vm-accent-bright);
    background: transparent;
    font: inherit;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .12em;
    cursor: pointer;
    clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}

#vm-credits-screen .vm-ost-toggle:hover,
#vm-credits-screen .vm-ost-toggle:focus-visible,
#vm-credits-screen .vm-ost-toggle.is-playing {
    color: #070912;
    background: var(--vm-accent-bright);
    border-color: var(--vm-accent-bright);
}

#vm-credits-screen .vm-ost-play-icon {
    width: 15px;
    text-align: center;
    font-size: 13px;
}

#vm-credits-screen #vm-ost-audio {
    display: none;
}

@media (max-width: 760px) {
    #vm-credits-screen .vm-ost-player {
        margin-top: 18px;
        clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 12px);
    }

    #vm-credits-screen .vm-ost-cover-wrap {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 24px 18px 28px;
    }

    #vm-credits-screen .vm-ost-cover {
        width: min(100%, 360px);
        margin: 0 auto;
        box-shadow: 9px 9px 0 color-mix(in srgb, var(--vm-accent-main) 42%, transparent);
    }

    #vm-credits-screen .vm-ost-cover-copy {
        text-align: center;
    }

    #vm-credits-screen .vm-ost-cover-copy h3 {
        font-size: clamp(34px, 12vw, 50px);
    }

    #vm-credits-screen .vm-ost-tracklist {
        padding: 10px 10px 20px;
    }

    #vm-credits-screen .vm-ost-track {
        min-height: 74px;
        grid-template-columns: 38px minmax(0, 1fr) 48px;
        gap: 8px;
        padding: 10px 8px;
    }

    #vm-credits-screen .vm-ost-number {
        font-size: 17px;
    }

    #vm-credits-screen .vm-ost-track > strong {
        font-size: 13px;
        line-height: 1.25;
    }

    #vm-credits-screen .vm-ost-toggle {
        min-width: 48px;
        width: 48px;
        min-height: 42px;
        padding: 8px;
    }

    #vm-credits-screen .vm-ost-action {
        display: none;
    }
}


/* Sélection rapide des combinaisons */
.vm-quick-select:not([hidden]) {
    position: relative;
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: max-content;
    max-width: calc(100% - 24px);
    margin: 0 0 2px 12px;
}

.vm-quick-select-button {
    position: relative;
    min-width: 82px;
    min-height: 34px;
    padding: 0 15px;
    overflow: visible;
    border: 0;
    color: #fff;
    background:
        linear-gradient(108deg, rgba(255,255,255,.14), transparent 34%),
        linear-gradient(96deg, var(--vm-accent-dark), var(--vm-accent-main) 68%, var(--vm-accent-dark));
    clip-path: polygon(8px 0, 100% 0, calc(100% - 7px) 100%, 0 100%, 4px 56%, 0 32%);
    box-shadow: none;
    filter: drop-shadow(4px 4px 0 rgba(0,0,0,.72));
    font-family: Cinzel, Georgia, serif;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    cursor: pointer;
    transform: rotate(-1deg);
    transition: transform .14s ease, filter .14s ease, brightness .14s ease;
}

.vm-quick-select-button:nth-child(even) {
    transform: rotate(1deg);
}

.vm-quick-select-button::before {
    content: "";
    position: absolute;
    top: 4px;
    right: 7px;
    width: 3px;
    height: calc(100% - 8px);
    background: var(--vm-accent-light);
    opacity: .8;
    transform: skew(-13deg);
    pointer-events: none;
}

.vm-quick-select-button span {
    position: relative;
    z-index: 1;
}

.vm-quick-select-button:hover,
.vm-quick-select-button:focus-visible {
    filter: drop-shadow(4px 4px 0 rgba(0,0,0,.72)) brightness(1.15);
    outline: 0;
}

.vm-quick-select-button:active {
    filter: drop-shadow(2px 2px 0 rgba(0,0,0,.72));
    transform: translate(2px, 2px) rotate(-1deg);
}

.vm-quick-select-button:nth-child(even):active {
    transform: translate(2px, 2px) rotate(1deg);
}

@media (max-width: 720px) {
    .vm-quick-select:not([hidden]) {
        gap: 6px;
        max-width: calc(100% - 12px);
        margin: 0 0 1px 6px;
    }

    .vm-quick-select-button {
        min-width: 66px;
        min-height: 29px;
        padding: 0 12px;
        font-size: 9px;
    }
}

@media (max-width: 390px) {
    .vm-quick-select:not([hidden]) {
        gap: 4px;
        margin-left: 4px;
    }

    .vm-quick-select-button {
        min-width: 60px;
        min-height: 27px;
        padding-inline: 9px;
        font-size: 8px;
    }
}

/* Rupture du 7 : une fermeture de pli construite autour de la silhouette du chiffre. */
.vm-seven-fx-mark {
    position: absolute;
    z-index: 8;
    left: 0;
    top: 0;
    width: clamp(210px, 39vw, 500px);
    height: clamp(260px, 55vh, 590px);
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-8deg) scale(.28);
    transform-origin: 50% 48%;
    pointer-events: none;
    will-change: transform, opacity, filter;
}

.vm-seven-fx-mark::before,
.vm-seven-fx-mark::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    opacity: 0;
    background: linear-gradient(90deg, transparent, var(--vm-accent-light) 18%, #fff 50%, var(--vm-accent-main) 82%, transparent);
    box-shadow: 0 0 24px color-mix(in srgb, var(--vm-accent-light) 76%, transparent), 0 0 64px color-mix(in srgb, var(--vm-accent-main) 54%, transparent);
}

.vm-seven-fx-mark::before {
    top: 13%;
    width: 112%;
    height: clamp(7px, 1.1vw, 13px);
    transform: translateX(-50%) rotate(-3deg) scaleX(.08);
}

.vm-seven-fx-mark::after {
    top: 18%;
    width: clamp(8px, 1.2vw, 14px);
    height: 86%;
    transform-origin: 50% 0;
    transform: translateX(84%) rotate(28deg) scaleY(.08);
}

.vm-seven-fx-mark span {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: Cinzel, Georgia, serif;
    font-size: clamp(280px, 48vw, 590px);
    font-weight: 900;
    line-height: .78;
    letter-spacing: -.08em;
    transform: skewX(-7deg);
    transform-origin: center;
}

.vm-seven-fx-mark .is-shadow {
    z-index: 1;
    color: rgba(0, 0, 0, .94);
    -webkit-text-stroke: clamp(12px, 2vw, 24px) rgba(0, 0, 0, .96);
    text-shadow: 18px 20px 0 color-mix(in srgb, var(--vm-accent-dark) 82%, #000);
}

.vm-seven-fx-mark .is-core {
    z-index: 2;
    color: var(--vm-accent-main);
    -webkit-text-stroke: clamp(4px, .72vw, 9px) #fff;
    text-shadow:
        7px 9px 0 var(--vm-accent-dark),
        0 0 30px color-mix(in srgb, var(--vm-accent-light) 88%, transparent),
        0 0 90px color-mix(in srgb, var(--vm-accent-main) 68%, transparent);
}

.vm-seven-fx-mark .is-edge {
    z-index: 3;
    color: transparent;
    -webkit-text-stroke: clamp(2px, .35vw, 5px) var(--vm-accent-light);
    transform: translate(-12px, 8px) skewX(-7deg);
    opacity: .78;
}

.vm-action-fx.is-active.is-seven .vm-action-fx-shade {
    animation: vm-v2-shade-seven 1.32s ease both !important;
}

.vm-action-fx.is-active.is-seven .vm-action-fx-vignette {
    animation: vm-v2-vignette-seven 1.32s ease both !important;
}

.vm-action-fx.is-active.is-seven .vm-action-fx-grid {
    background-size: 56px 56px;
    mask-image: linear-gradient(132deg, transparent 0 34%, #000 35% 62%, transparent 63%);
    animation: vm-v2-grid-seven 1.18s cubic-bezier(.16,.84,.18,1) .08s both !important;
}

.vm-action-fx.is-active.is-seven .vm-action-fx-burst {
    width: min(76vw, 620px);
    background:
        repeating-conic-gradient(from -18deg, color-mix(in srgb, var(--vm-accent-light) 72%, transparent) 0 1deg, transparent 1deg 11deg),
        radial-gradient(circle, #fff 0 2%, color-mix(in srgb, var(--vm-accent-light) 66%, transparent) 7%, color-mix(in srgb, var(--vm-accent-main) 26%, transparent) 29%, transparent 61%);
    animation: vm-v2-burst-seven .92s cubic-bezier(.16,.84,.18,1) .18s both !important;
}

.vm-action-fx.is-active.is-seven .vm-seven-fx-mark {
    animation: vm-v2-seven-mark 1.3s cubic-bezier(.12,.88,.16,1) both !important;
}

.vm-action-fx.is-active.is-seven .vm-seven-fx-mark::before {
    animation: vm-v2-seven-top-stroke .82s cubic-bezier(.12,.88,.18,1) .17s both !important;
}

.vm-action-fx.is-active.is-seven .vm-seven-fx-mark::after {
    animation: vm-v2-seven-diagonal-stroke .9s cubic-bezier(.12,.88,.18,1) .28s both !important;
}

.vm-action-fx.is-active.is-seven .vm-action-fx-card {
    z-index: 4;
    border-color: color-mix(in srgb, var(--vm-accent-light) 74%, transparent);
    animation: vm-v2-seven-card 1.24s cubic-bezier(.14,.86,.18,1) both !important;
}

.vm-match-flash.is-seven span {
    font-size: clamp(92px, 23vw, 250px) !important;
    line-height: .62;
    letter-spacing: -.04em !important;
    transform: rotate(-8deg) skewX(-7deg);
}

.vm-match-flash.is-seven::before {
    height: clamp(150px, 30vh, 290px);
    clip-path: polygon(3% 14%, 98% 0, 82% 36%, 69% 100%, 8% 88%, 18% 48%);
}

.vm-match-flash.is-seven::after {
    top: 34%;
    transform: rotate(-3deg) scaleX(0);
}

@keyframes vm-v2-shade-seven {
    0%, 100% { opacity: 0; }
    8%, 82% { opacity: .84; }
}

@keyframes vm-v2-vignette-seven {
    0%, 100% { opacity: 0; }
    14%, 80% { opacity: 1; }
}

@keyframes vm-v2-grid-seven {
    0% { opacity: 0; transform: perspective(520px) rotateX(64deg) rotateZ(-18deg) scale(.72); }
    32% { opacity: .72; }
    74% { opacity: .44; transform: perspective(520px) rotateX(58deg) rotateZ(7deg) scale(1.16); }
    100% { opacity: 0; transform: perspective(520px) rotateX(54deg) rotateZ(14deg) scale(1.4); }
}

@keyframes vm-v2-burst-seven {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.03) rotate(-24deg); }
    34% { opacity: .96; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.18) rotate(28deg); }
}

@keyframes vm-v2-seven-mark {
    0% { opacity: 0; filter: blur(14px) brightness(1.9); transform: translate(calc(-50% - 18vw), calc(-50% - 10vh)) rotate(-24deg) scale(.34); }
    24% { opacity: 1; filter: blur(0) brightness(1.35); transform: translate(calc(-50% + 2vw), calc(-50% + 1vh)) rotate(-5deg) scale(1.08); }
    40%, 68% { opacity: 1; filter: brightness(1); transform: translate(-50%, -50%) rotate(-8deg) scale(1); }
    82% { opacity: 1; filter: brightness(1.7); transform: translate(-50%, -50%) rotate(-8deg) scale(1.05); }
    100% { opacity: 0; filter: blur(9px) brightness(2); transform: translate(calc(-50% + 15vw), calc(-50% + 11vh)) rotate(5deg) scale(1.24); }
}

@keyframes vm-v2-seven-top-stroke {
    0% { opacity: 0; transform: translateX(-50%) rotate(-3deg) scaleX(.05); }
    34%, 74% { opacity: 1; transform: translateX(-50%) rotate(-3deg) scaleX(1); }
    100% { opacity: 0; transform: translateX(-50%) rotate(-3deg) scaleX(1.12); filter: blur(6px); }
}

@keyframes vm-v2-seven-diagonal-stroke {
    0% { opacity: 0; transform: translateX(84%) rotate(28deg) scaleY(.04); }
    36%, 76% { opacity: 1; transform: translateX(84%) rotate(28deg) scaleY(1); }
    100% { opacity: 0; transform: translateX(84%) rotate(28deg) scaleY(1.08); filter: blur(7px); }
}

@keyframes vm-v2-seven-card {
    0% { opacity: 0; filter: blur(9px); transform: translate(calc(-50% + var(--vm-fx-offset) + var(--vm-fx-origin-x)), calc(-50% + var(--vm-fx-origin-y))) rotate(-12deg) scale(.78); }
    22% { opacity: 1; }
    42%, 66% { opacity: .88; filter: blur(0) brightness(.84); transform: translate(calc(-50% + var(--vm-fx-offset)), -50%) rotate(2deg) scale(.96); }
    78% { opacity: .74; filter: brightness(1.4); transform: translate(calc(-50% + var(--vm-fx-offset) + 12px), calc(-50% + 8px)) rotate(5deg) scale(.9); }
    100% { opacity: 0; filter: blur(8px) brightness(1.8); transform: translate(calc(-50% + var(--vm-fx-offset) + 34vw), calc(-50% + 24vh)) rotate(24deg) scale(.48); }
}

@media (max-width: 720px) {
    .vm-seven-fx-mark {
        width: clamp(170px, 62vw, 300px);
        height: clamp(230px, 48vh, 410px);
    }

    .vm-seven-fx-mark span {
        font-size: clamp(235px, 78vw, 390px);
    }

    .vm-match-flash.is-seven span {
        font-size: clamp(86px, 31vw, 155px) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vm-action-fx.is-active.is-seven .vm-seven-fx-mark {
        animation: vm-v2-reduced-seven .9s ease both !important;
    }

    .vm-action-fx.is-active.is-seven .vm-seven-fx-mark::before,
    .vm-action-fx.is-active.is-seven .vm-seven-fx-mark::after {
        animation: none !important;
        opacity: .72;
    }
}

@keyframes vm-v2-reduced-seven {
    0%, 100% { opacity: 0; transform: translate(-50%, -50%) rotate(-8deg) scale(.96); }
    18%, 78% { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg) scale(1); }
}


/* V1.20.0 — Oméga et choix du mode de pli */
.vm-rule-mode-choice {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 12px;
    margin-top: 18px;
    padding: 16px 18px;
    border: 1px solid color-mix(in srgb, var(--vm-accent-light) 22%, transparent);
    border-left: 7px solid var(--vm-accent-main);
    background: color-mix(in srgb, var(--vm-accent-dark) 18%, rgba(0, 0, 0, .42));
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}

.vm-rule-mode-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.vm-rule-mode-heading > div {
    display: grid;
    gap: 4px;
}

.vm-rule-mode-heading span {
    color: var(--vm-accent-light);
    font-family: "Cinzel", Georgia, serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .2em;
}

.vm-rule-mode-heading strong {
    color: #f8f4ed;
    font-family: "Cinzel", Georgia, serif;
    font-size: clamp(17px, 2vw, 24px);
    letter-spacing: .07em;
}

.vm-rule-mode-heading b {
    flex: 0 0 auto;
    padding: 8px 11px;
    color: #08080b;
    background: var(--vm-accent-light);
    font-family: "Cinzel", Georgia, serif;
    font-size: 9px;
    letter-spacing: .12em;
    clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
}

.vm-rule-mode-choice.is-classic .vm-rule-mode-heading b {
    color: #fff;
    background: var(--vm-accent-main);
}

.vm-classic-mode-toggle {
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    min-height: 62px;
    padding: 11px 14px;
    border: 1px solid color-mix(in srgb, var(--vm-accent-light) 18%, transparent);
    color: #f8f4ed;
    background: rgba(255, 255, 255, .035);
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.vm-classic-mode-toggle:hover {
    border-color: color-mix(in srgb, var(--vm-accent-light) 68%, transparent);
    transform: translateY(-1px);
}

.vm-classic-mode-toggle input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.vm-classic-mode-box {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid color-mix(in srgb, var(--vm-accent-light) 48%, transparent);
    color: transparent;
    background: rgba(0, 0, 0, .34);
    font-family: "Cinzel", Georgia, serif;
    font-weight: 900;
    transform: rotate(45deg);
    transition: color .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.vm-classic-mode-box::first-letter {
    transform: rotate(-45deg);
}

.vm-classic-mode-toggle input:checked + .vm-classic-mode-box {
    color: #fff;
    border-color: var(--vm-accent-light);
    background: var(--vm-accent-main);
    box-shadow: 4px 4px 0 color-mix(in srgb, var(--vm-accent-dark) 72%, #000);
}

.vm-classic-mode-toggle input:focus-visible + .vm-classic-mode-box {
    outline: 2px solid #fff;
    outline-offset: 4px;
}

.vm-classic-mode-toggle input:disabled ~ * {
    opacity: .45;
}

.vm-classic-mode-copy {
    display: grid;
    gap: 4px;
}

.vm-classic-mode-copy strong {
    font-family: "Cinzel", Georgia, serif;
    font-size: 14px;
    letter-spacing: .1em;
}

.vm-classic-mode-copy small {
    color: rgba(255, 255, 255, .56);
    font-size: 11px;
    line-height: 1.35;
}

.vm-rule-deal-summary {
    max-width: 1040px;
    margin: 14px 0 0;
    padding: 11px 15px;
    border-left: 6px solid var(--vm-accent-main);
    color: var(--vm-rules-muted);
    background: color-mix(in srgb, var(--vm-accent-main) 9%, var(--vm-rules-surface-raised));
    font-size: 12px;
    line-height: 1.45;
}

.vm-rule-checklist .is-classic-mode-rule {
    border-left-color: var(--vm-accent-light);
    background: color-mix(in srgb, var(--vm-accent-light) 7%, var(--vm-rules-surface-raised));
}

.vm-rule-value-line {
    grid-template-columns: repeat(11, minmax(32px, 1fr));
}

.vm-card-omega-mark {
    position: absolute;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 26%;
    height: 19%;
    color: #fff;
    background: #000;
    font-family: "Cinzel", Georgia, serif;
    font-size: max(14px, calc(var(--vm-card-w) * .19));
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}

.vm-card-omega-mark.is-top {
    top: 2.2%;
    left: 2.8%;
}

.vm-card-omega-mark.is-bottom {
    right: 2.8%;
    bottom: 2.2%;
    transform: rotate(180deg);
}

.vm-card-fallback:not([hidden]) ~ .vm-card-omega-mark {
    display: none;
}

.vm-card-fallback.is-omega .vm-card-fallback-symbol {
    color: rgba(0, 0, 0, .82);
    font-size: 34px;
    font-weight: 800;
}

@media (max-width: 720px) {
    .vm-rule-mode-choice {
        gap: 9px;
        margin-top: 11px;
        padding: 12px;
    }

    .vm-rule-mode-heading {
        align-items: flex-start;
    }

    .vm-rule-mode-heading strong {
        font-size: 16px;
    }

    .vm-rule-mode-heading b {
        padding: 7px 8px;
        font-size: 7px;
    }

    .vm-classic-mode-toggle {
        min-height: 56px;
        padding: 9px 10px;
    }

    .vm-classic-mode-copy strong {
        font-size: 12px;
    }

    .vm-classic-mode-copy small {
        font-size: 10px;
    }

    .vm-rule-value-line {
        grid-template-columns: repeat(6, minmax(34px, 1fr));
    }
}

@media (max-width: 420px) {
    .vm-rule-mode-heading {
        display: grid;
        gap: 8px;
    }

    .vm-rule-mode-heading b {
        justify-self: start;
    }

    .vm-rule-value-line {
        grid-template-columns: repeat(4, minmax(36px, 1fr));
    }
}

.vm-classic-mode-box {
    font-size: 0;
}

.vm-classic-mode-box::after {
    content: "✓";
    color: transparent;
    font-family: "Cinzel", Georgia, serif;
    font-size: 16px;
    font-weight: 900;
    transform: rotate(-45deg);
}

.vm-classic-mode-toggle input:checked + .vm-classic-mode-box::after {
    color: #fff;
}

/* =========================================================
   COMPENDIUM — PROFILS DES ADVERSAIRES
   ========================================================= */
.vm-compendium-screen {
    --vm-compendium-canvas: color-mix(in srgb, var(--vm-accent-dark) 24%, #080b12);
    
    --vm-compendium-raised: color-mix(in srgb, var(--vm-accent-main) 12%, #1a222d);
    --vm-compendium-line: color-mix(in srgb, var(--vm-accent-light) 24%, rgba(255,255,255,.13));
    place-items: stretch;
    padding: 0;
    overflow: hidden;
    background:
        linear-gradient(112deg, hsl(calc(278deg + var(--vm-theme-hue-shift)) max(0%, calc(74% - var(--vm-theme-desaturate))) 14% / .34), transparent 34%),
        linear-gradient(292deg, hsl(calc(278deg + var(--vm-theme-hue-shift)) max(0%, calc(65% - var(--vm-theme-desaturate))) 30% / .14), transparent 38%),
        radial-gradient(circle at 88% 16%, rgba(255,255,255,.07) 0 1px, transparent 2px),
        #020306;
    background-size: auto, auto, 130px 130px, auto;
}

.vm-compendium-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100dvh;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    color: #e9edf3;
    background: linear-gradient(180deg, rgba(4,6,11,.95), rgba(2,3,6,.985));
}

.vm-compendium-panel::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 7px;
    z-index: 5;
    background: linear-gradient(180deg, var(--vm-accent-bright), var(--vm-accent-main) 42%, var(--vm-accent-dark));
    box-shadow: 7px 0 28px color-mix(in srgb, var(--vm-accent-main) 38%, transparent);
    pointer-events: none;
}

.vm-compendium-header {
    position: relative;
    min-height: clamp(112px, 15vh, 154px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, .75fr) auto;
    align-items: center;
    gap: clamp(20px, 4vw, 56px);
    padding: max(20px, env(safe-area-inset-top)) clamp(28px, 5vw, 78px) 18px clamp(38px, 6vw, 92px);
    overflow: hidden;
    border-bottom: 1px solid color-mix(in srgb, var(--vm-accent-main) 34%, rgba(255,255,255,.08));
    background:
        linear-gradient(103deg, color-mix(in srgb, var(--vm-accent-dark) 72%, #06070b) 0 23%, transparent 23.2%),
        linear-gradient(90deg, rgba(6,8,14,.98), rgba(5,7,12,.92));
}

.vm-compendium-header::before {
    content: "ARCHIVES";
    position: absolute;
    right: clamp(130px, 16vw, 260px);
    bottom: -26px;
    color: rgba(255,255,255,.025);
    font-family: Cinzel, Georgia, serif;
    font-size: clamp(76px, 11vw, 170px);
    font-weight: 800;
    line-height: .8;
    letter-spacing: -.08em;
    transform: skewX(-10deg);
    pointer-events: none;
}

.vm-compendium-title-lockup,
.vm-compendium-header > p,
.vm-compendium-close {
    position: relative;
    z-index: 2;
}

.vm-compendium-title-lockup > span {
    display: block;
    margin-bottom: 6px;
    color: color-mix(in srgb, var(--vm-accent-light) 82%, white);
    font-size: clamp(9px, .72vw, 12px);
    font-weight: 900;
    letter-spacing: .24em;
}

.vm-compendium-title-lockup h2 {
    margin: 2px 0 0;
    color: #f8f4eb;
    font-family: Cinzel, Georgia, serif;
    font-size: clamp(35px, 5.2vw, 76px);
    font-weight: 700;
    line-height: .95;
    letter-spacing: .035em;
    text-shadow: 0 12px 34px rgba(0,0,0,.5);
}

.vm-compendium-header > p {
    max-width: 520px;
    margin: 0;
    color: #aeb7c5;
    font-size: clamp(12px, 1vw, 15px);
    line-height: 1.55;
}

.vm-compendium-close {
    display: grid;
    place-items: center;
    width: clamp(58px, 5vw, 76px);
    aspect-ratio: 1;
    border: 2px solid color-mix(in srgb, var(--vm-accent-light) 48%, rgba(255,255,255,.28));
    border-radius: 50%;
    color: #f8f4eb;
    background: rgba(4,6,11,.82);
    box-shadow: inset 0 0 0 7px rgba(255,255,255,.02), 0 15px 40px rgba(0,0,0,.35);
    cursor: pointer;
    transition: transform .16s ease, background .16s ease, border-color .16s ease;
}

.vm-compendium-close span {
    font-size: clamp(38px, 4vw, 56px);
    font-weight: 300;
    line-height: .7;
    transform: translateY(-2px);
}

.vm-compendium-close:hover,
.vm-compendium-close:focus-visible {
    border-color: var(--vm-accent-light);
    background: color-mix(in srgb, var(--vm-accent-main) 42%, #06070b);
    transform: rotate(6deg) scale(1.04);
}

.vm-compendium-layout {
    min-height: 0;
    display: grid;
    grid-template-columns: clamp(270px, 24vw, 390px) minmax(0, 1fr);
    gap: clamp(18px, 2.2vw, 36px);
    padding: clamp(18px, 2.4vw, 34px) clamp(20px, 3.8vw, 62px) max(20px, env(safe-area-inset-bottom)) clamp(26px, 4vw, 68px);
    overflow: hidden;
}

.vm-compendium-list {
    min-height: 0;
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 4px 15px 4px 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--vm-accent-main) 55%, transparent) transparent;
}

.vm-compendium-entry {
    position: relative;
    min-height: 66px;
    display: grid;
    grid-template-columns: 38px 50px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 7px 28px 7px 10px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.09);
    color: #b8c0cc;
    background: linear-gradient(90deg, var(--vm-compendium-raised), var(--vm-compendium-canvas));
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%, 8px 50%);
    text-align: left;
    cursor: pointer;
    transition: transform .16s ease, color .16s ease, background .16s ease, border-color .16s ease;
}

.vm-compendium-entry::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--vm-accent-main);
    opacity: .2;
    transition: width .16s ease, opacity .16s ease;
}

.vm-compendium-entry:hover,
.vm-compendium-entry:focus-visible {
    color: #f5f7fb;
    border-color: color-mix(in srgb, var(--vm-accent-light) 44%, rgba(255,255,255,.12));
    transform: translateX(4px);
}

.vm-compendium-entry.is-active {
    color: #fff;
    border-color: color-mix(in srgb, var(--vm-accent-light) 58%, rgba(255,255,255,.16));
    background: linear-gradient(90deg, color-mix(in srgb, var(--vm-accent-dark) 68%, #111924), color-mix(in srgb, var(--vm-accent-main) 19%, #172131));
}

.vm-compendium-entry.is-active::before {
    width: 10px;
    opacity: 1;
}

.vm-compendium-entry-number {
    position: relative;
    z-index: 1;
    color: color-mix(in srgb, var(--vm-accent-light) 84%, #fff);
    font-family: Cinzel, Georgia, serif;
    font-size: 18px;
    font-weight: 800;
    text-align: center;
}

.vm-compendium-entry-avatar {
    position: relative;
    z-index: 1;
    width: 46px;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--vm-accent-light) 36%, rgba(255,255,255,.13));
    background: #080b11;
    clip-path: polygon(10% 0, 100% 0, 100% 86%, 86% 100%, 0 100%, 0 10%);
}

.vm-compendium-entry-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.vm-compendium-entry-copy {
    position: relative;
    z-index: 1;
    min-width: 0;
    display: grid;
    gap: 3px;
}

.vm-compendium-entry-copy strong {
    overflow: hidden;
    color: inherit;
    font-family: Cinzel, Georgia, serif;
    font-size: 13px;
    letter-spacing: .08em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vm-compendium-entry-copy small {
    overflow: hidden;
    color: #7f8999;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .13em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vm-compendium-entry.is-active .vm-compendium-entry-copy small {
    color: color-mix(in srgb, var(--vm-accent-light) 76%, #fff);
}

.vm-compendium-detail {
    position: relative;
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(250px, 34%) minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--vm-compendium-line);
    background:
        linear-gradient(130deg, color-mix(in srgb, var(--vm-accent-dark) 28%, rgba(18,24,33,.96)), rgba(5,8,13,.98) 64%),
        #070a10;
    clip-path: polygon(0 0, calc(100% - 32px) 0, 100% 32px, 100% 100%, 24px 100%, 0 calc(100% - 24px));
}

.vm-compendium-detail::after {
    content: "VOID MATCH";
    position: absolute;
    right: -18px;
    bottom: -20px;
    color: rgba(255,255,255,.025);
    font-family: Cinzel, Georgia, serif;
    font-size: clamp(50px, 7vw, 110px);
    font-weight: 800;
    letter-spacing: -.05em;
    white-space: nowrap;
    pointer-events: none;
}

.vm-compendium-portrait-shell {
    position: relative;
    min-height: 0;
    padding: clamp(24px, 3vw, 42px);
    overflow: hidden;
    border-right: 1px solid var(--vm-compendium-line);
    background:
        linear-gradient(152deg, color-mix(in srgb, var(--vm-accent-main) 20%, transparent), transparent 45%),
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0));
}

.vm-compendium-portrait-index {
    position: absolute;
    top: 14px;
    left: 18px;
    z-index: 3;
    color: rgba(255,255,255,.11);
    font-family: Cinzel, Georgia, serif;
    font-size: clamp(56px, 6vw, 96px);
    font-weight: 900;
    line-height: 1;
}

.vm-compendium-portrait {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    min-height: 300px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--vm-accent-light) 40%, rgba(255,255,255,.13));
    background: color-mix(in srgb, var(--vm-accent-dark) 34%, #06080d);
    clip-path: polygon(8% 0, 100% 0, 100% 90%, 90% 100%, 0 100%, 0 8%);
}

.vm-compendium-portrait::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 58%, color-mix(in srgb, var(--vm-accent-dark) 72%, rgba(0,0,0,.88)) 100%);
    pointer-events: none;
}

.vm-compendium-portrait img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.vm-compendium-portrait-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--vm-accent-light);
    font-family: Cinzel, Georgia, serif;
    font-size: 92px;
    font-weight: 800;
}

.vm-compendium-portrait-role {
    position: absolute;
    z-index: 4;
    left: clamp(34px, 4vw, 58px);
    bottom: clamp(34px, 4vw, 58px);
    padding: 8px 14px;
    color: #fff;
    background: color-mix(in srgb, var(--vm-accent-main) 72%, #111720);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .22em;
    transform: skewX(-12deg);
}

.vm-compendium-profile {
    position: relative;
    z-index: 2;
    min-width: 0;
    min-height: 0;
    display: grid;
    align-content: center;
    gap: clamp(20px, 2.5vh, 32px);
    padding: clamp(28px, 4vw, 64px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.vm-compendium-profile header p,
.vm-compendium-profile section > span {
    margin: 0 0 6px;
    color: color-mix(in srgb, var(--vm-accent-light) 84%, #fff);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .24em;
}

.vm-compendium-profile header h3 {
    margin: 0;
    color: #f8f4eb;
    font-family: Cinzel, Georgia, serif;
    font-size: clamp(42px, 5vw, 76px);
    font-weight: 700;
    line-height: .95;
    letter-spacing: .03em;
}

.vm-compendium-profile header strong {
    display: inline-block;
    margin-top: 11px;
    padding: 7px 13px;
    color: #fff;
    background: linear-gradient(90deg, var(--vm-accent-main), color-mix(in srgb, var(--vm-accent-dark) 58%, #111720));
    font-size: 10px;
    letter-spacing: .18em;
    transform: skewX(-10deg);
}

.vm-compendium-profile section {
    max-width: 820px;
    padding-left: 18px;
    border-left: 4px solid color-mix(in srgb, var(--vm-accent-main) 62%, transparent);
}

.vm-compendium-profile section p {
    margin: 0;
    color: #c2c9d4;
    font-size: clamp(13px, 1.1vw, 17px);
    line-height: 1.65;
}

.vm-compendium-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vm-compendium-tags span {
    padding: 8px 11px;
    border: 1px solid color-mix(in srgb, var(--vm-accent-light) 28%, rgba(255,255,255,.1));
    color: color-mix(in srgb, var(--vm-accent-light) 84%, #fff);
    background: color-mix(in srgb, var(--vm-accent-main) 10%, rgba(255,255,255,.025));
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .12em;
}

@media (max-width: 980px) {
    .vm-compendium-header {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .vm-compendium-header > p {
        display: none;
    }

    .vm-compendium-layout {
        grid-template-columns: clamp(230px, 30vw, 310px) minmax(0, 1fr);
    }

    .vm-compendium-detail {
        grid-template-columns: minmax(190px, 34%) minmax(0, 1fr);
    }

    .vm-compendium-portrait-shell {
        padding: 24px;
    }

    .vm-compendium-portrait-role {
        left: 34px;
        bottom: 34px;
    }
}

@media (max-width: 720px) {
    .vm-compendium-header {
        min-height: 92px;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 14px;
        padding: max(14px, env(safe-area-inset-top)) 16px 12px 24px;
    }

    .vm-compendium-title-lockup > span {
        font-size: 7px;
        letter-spacing: .18em;
    }

    .vm-compendium-title-lockup h2 {
        font-size: clamp(28px, 9vw, 42px);
    }

    .vm-compendium-close {
        width: 48px;
    }

    .vm-compendium-close span {
        font-size: 36px;
    }

    .vm-compendium-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
        gap: 12px;
        padding: 12px 12px max(12px, env(safe-area-inset-bottom)) 18px;
    }

    .vm-compendium-list {
        display: flex;
        gap: 7px;
        padding: 0 0 5px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
    }

    .vm-compendium-entry {
        flex: 0 0 146px;
        min-height: 58px;
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 8px;
        padding: 6px 14px 6px 7px;
        scroll-snap-align: start;
        clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 6px 50%);
    }

    .vm-compendium-entry-number {
        display: none;
    }

    .vm-compendium-entry-avatar {
        width: 38px;
    }

    .vm-compendium-entry-copy strong {
        font-size: 11px;
    }

    .vm-compendium-entry-copy small {
        font-size: 7px;
        letter-spacing: .08em;
    }

    .vm-compendium-detail {
        
        min-height: 0;
        clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
    }

    

    .vm-compendium-portrait-index {
        top: 7px;
        left: 8px;
        font-size: 44px;
    }

    

    .vm-compendium-portrait-role {
        left: 18px;
        bottom: 18px;
        padding: 6px 8px;
        font-size: 6px;
        letter-spacing: .12em;
    }

    .vm-compendium-profile {
        align-content: start;
        gap: 16px;
        padding: 20px 18px 24px;
    }

    .vm-compendium-profile header p,
    .vm-compendium-profile section > span {
        font-size: 7px;
        letter-spacing: .18em;
    }

    

    .vm-compendium-profile header strong {
        margin-top: 8px;
        padding: 6px 8px;
        font-size: 7px;
        letter-spacing: .11em;
    }

    .vm-compendium-profile section {
        padding-left: 11px;
        border-left-width: 3px;
    }

    .vm-compendium-profile section p {
        font-size: 12px;
        line-height: 1.52;
    }

    .vm-compendium-tags {
        gap: 5px;
    }

    .vm-compendium-tags span {
        padding: 6px 7px;
        font-size: 7px;
        letter-spacing: .08em;
    }
}

@media (max-width: 420px) {
    .vm-compendium-detail {
        grid-template-columns: 86px minmax(0, 1fr);
    }

    .vm-compendium-profile {
        padding: 16px 14px 22px;
    }

    .vm-compendium-profile header h3 {
        font-size: 27px;
    }

    .vm-compendium-profile section p {
        font-size: 11px;
    }
}

@media (max-height: 720px) and (orientation: landscape) {
    .vm-compendium-header {
        min-height: 82px;
        padding-top: 12px;
        padding-bottom: 10px;
    }

    .vm-compendium-title-lockup h2 {
        font-size: 36px;
    }

    .vm-compendium-layout {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .vm-compendium-entry {
        min-height: 54px;
    }

    .vm-compendium-entry-avatar {
        width: 40px;
    }

    .vm-compendium-profile {
        gap: 14px;
        padding-top: 22px;
        padding-bottom: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vm-compendium-entry,
    .vm-compendium-close {
        transition: none;
    }
}


.vm-account-close,
.vm-patch-close,
.vm-rules-close,
.vm-persona-close,
.vm-compendium-close {
    display: grid;
    place-items: center;
    width: 38px;
    height: 34px;
    aspect-ratio: auto;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    clip-path: polygon(9% 4%, 91% 0, 100% 72%, 78% 100%, 4% 92%, 0 21%);
    color: transparent;
    background:
        linear-gradient(138deg, transparent 0 71%, var(--vm-accent-main) 72% 100%),
        linear-gradient(165deg, #fffdf7 0 58%, #e9e5dc 59% 100%);
    box-shadow:
        4px 4px 0 color-mix(in srgb, var(--vm-accent-dark) 72%, #000),
        7px 7px 0 rgba(0, 0, 0, .42);
    font-family: Arial, sans-serif;
    font-size: 0;
    font-weight: 400;
    line-height: 0;
    cursor: pointer;
    transform: rotate(-2deg);
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}

.vm-persona-close,
.vm-rules-close,
.vm-compendium-close {
    position: relative;
}

.vm-account-close::before,
.vm-account-close::after,
.vm-patch-close::before,
.vm-patch-close::after,
.vm-rules-close::before,
.vm-rules-close::after,
.vm-persona-close::before,
.vm-persona-close::after,
.vm-compendium-close::before,
.vm-compendium-close::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    height: 3px;
    background: #080b10;
    transform-origin: center;
    pointer-events: none;
}

.vm-account-close::before,
.vm-patch-close::before,
.vm-rules-close::before,
.vm-persona-close::before,
.vm-compendium-close::before {
    width: 20px;
    transform: translate(-51%, -50%) rotate(42deg);
}

.vm-account-close::after,
.vm-patch-close::after,
.vm-rules-close::after,
.vm-persona-close::after,
.vm-compendium-close::after {
    width: 17px;
    transform: translate(-48%, -50%) rotate(-49deg);
}

.vm-rules-close span,
.vm-compendium-close span {
    display: none;
}

.vm-account-close:hover,
.vm-account-close:focus-visible,
.vm-patch-close:hover,
.vm-patch-close:focus-visible,
.vm-rules-close:hover,
.vm-rules-close:focus-visible,
.vm-persona-close:hover,
.vm-persona-close:focus-visible,
.vm-compendium-close:hover,
.vm-compendium-close:focus-visible {
    color: transparent;
    background:
        linear-gradient(138deg, transparent 0 67%, #fffdf7 68% 100%),
        linear-gradient(165deg, var(--vm-accent-bright), var(--vm-accent-main));
    box-shadow:
        4px 4px 0 #07090d,
        7px 7px 0 color-mix(in srgb, var(--vm-accent-dark) 58%, #000);
    outline: 2px solid transparent;
    transform: rotate(2deg) translateY(-1px) scale(1.06);
}

.vm-account-close:hover::before,
.vm-account-close:hover::after,
.vm-account-close:focus-visible::before,
.vm-account-close:focus-visible::after,
.vm-patch-close:hover::before,
.vm-patch-close:hover::after,
.vm-patch-close:focus-visible::before,
.vm-patch-close:focus-visible::after,
.vm-rules-close:hover::before,
.vm-rules-close:hover::after,
.vm-rules-close:focus-visible::before,
.vm-rules-close:focus-visible::after,
.vm-persona-close:hover::before,
.vm-persona-close:hover::after,
.vm-persona-close:focus-visible::before,
.vm-persona-close:focus-visible::after,
.vm-compendium-close:hover::before,
.vm-compendium-close:hover::after,
.vm-compendium-close:focus-visible::before,
.vm-compendium-close:focus-visible::after {
    background: #fffdf7;
}

@media (min-width: 721px) {
    .vm-compendium-close {
        grid-column: 3;
        justify-self: end;
    }
}

@media (max-width: 720px) {
    .vm-account-close,
    .vm-patch-close,
    .vm-rules-close,
    .vm-persona-close,
    .vm-compendium-close {
        width: 34px;
        height: 31px;
        box-shadow:
            3px 3px 0 color-mix(in srgb, var(--vm-accent-dark) 72%, #000),
            5px 5px 0 rgba(0, 0, 0, .4);
    }

    .vm-account-close::before,
    .vm-patch-close::before,
    .vm-rules-close::before,
    .vm-persona-close::before,
    .vm-compendium-close::before {
        width: 18px;
    }

    .vm-account-close::after,
    .vm-patch-close::after,
    .vm-rules-close::after,
    .vm-persona-close::after,
    .vm-compendium-close::after {
        width: 15px;
    }

    .vm-compendium-close {
        grid-column: 2;
        justify-self: end;
    }
}

/* Correction — les cartes posées restent toujours entièrement visibles. */
.vm-app.is-revolution .vm-pile {
    gap: 10px;
}

.vm-app.is-revolution .vm-pile-card + .vm-pile-card {
    margin-left: 0;
}

@media (max-width: 720px) {
    .vm-app.is-revolution .vm-pile {
        gap: 6px;
    }

    .vm-pile:has(> .vm-pile-card:nth-child(3)) {
        gap: 6px;
    }

    .vm-pile:has(> .vm-pile-card:nth-child(3)):not(:has(> .vm-pile-card:nth-child(4))) > .vm-pile-card {
        width: min(25vw, 110px);
        flex-basis: min(25vw, 110px);
    }

    .vm-pile:has(> .vm-pile-card:nth-child(4)) > .vm-pile-card {
        width: min(20vw, 96px);
        flex-basis: min(20vw, 96px);
    }
}


/* Compendium mobile : portrait carré lisible, sans modification du rendu desktop */
@media (max-width: 720px) {
    .vm-compendium-detail {
        grid-template-columns: 112px minmax(0, 1fr);
        grid-template-rows: auto auto auto auto;
        column-gap: 14px;
        row-gap: 16px;
        align-content: start;
        padding: 16px;
        overflow-y: auto;
    }

    .vm-compendium-portrait-shell {
        grid-column: 1;
        grid-row: 1;
        width: 112px;
        height: 112px;
        min-height: 112px;
        padding: 0;
        overflow: visible;
        border: 0;
        background: transparent;
    }

    .vm-compendium-portrait-shell::before {
        content: "";
        position: absolute;
        z-index: 1;
        inset: -5px 7px 7px -5px;
        background: linear-gradient(135deg, var(--vm-accent-main), color-mix(in srgb, var(--vm-accent-dark) 72%, #05080e));
        clip-path: polygon(0 0, 82% 0, 100% 18%, 100% 100%, 18% 100%, 0 82%);
    }

    .vm-compendium-portrait-index,
    .vm-compendium-portrait-role {
        display: none;
    }

    .vm-compendium-portrait {
        position: relative;
        z-index: 2;
        width: 112px;
        height: 112px;
        min-height: 112px;
        border: 2px solid color-mix(in srgb, var(--vm-accent-light) 56%, #fff 12%);
        clip-path: polygon(0 0, 84% 0, 100% 16%, 100% 100%, 16% 100%, 0 84%);
    }

    .vm-compendium-portrait::after {
        background:
            linear-gradient(135deg, transparent 0 72%, color-mix(in srgb, var(--vm-accent-main) 72%, transparent) 72% 100%),
            linear-gradient(180deg, transparent 64%, rgba(0,0,0,.34));
    }

    .vm-compendium-portrait img {
        object-position: center 18%;
    }

    .vm-compendium-profile {
        display: contents;
        overflow: visible;
    }

    .vm-compendium-profile > header {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        min-width: 0;
    }

    .vm-compendium-profile > section,
    .vm-compendium-tags {
        grid-column: 1 / -1;
    }

    .vm-compendium-profile > section:nth-of-type(1) {
        grid-row: 2;
    }

    .vm-compendium-profile > section:nth-of-type(2) {
        grid-row: 3;
    }

    .vm-compendium-tags {
        grid-row: 4;
    }

    .vm-compendium-profile header h3 {
        font-size: clamp(26px, 8vw, 36px);
        overflow-wrap: anywhere;
    }
}

@media (max-width: 390px) {
    .vm-compendium-detail {
        grid-template-columns: 96px minmax(0, 1fr);
        column-gap: 12px;
        padding: 14px;
    }

    .vm-compendium-portrait-shell,
    .vm-compendium-portrait {
        width: 96px;
        height: 96px;
        min-height: 96px;
    }
}


/* =========================================================
   MODE HISTOIRE — ASCENSION
   ========================================================= */
.vm-story-screen {
    overflow: auto;
    padding: clamp(14px, 2.4vw, 34px);
    
}

.vm-story-panel {
    width: min(1260px, 100%);
    
    margin: auto;
    position: relative;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--vm-accent-light) 44%, transparent);
    
    box-shadow: 0 28px 90px rgba(0,0,0,.58), 0 0 0 1px rgba(255,255,255,.035) inset;
}

.vm-story-panel::before,
.vm-story-panel::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

.vm-story-panel::before {
    width: 410px;
    height: 160px;
    right: -88px;
    top: 38px;
    transform: rotate(-8deg) skewX(-24deg);
    border: 1px solid color-mix(in srgb, var(--vm-accent-light) 16%, transparent);
    
}

.vm-story-panel::after {
    width: 360px;
    height: 360px;
    left: -245px;
    bottom: -210px;
    transform: rotate(32deg);
    border: 36px solid color-mix(in srgb, var(--vm-accent) 10%, transparent);
}

.vm-story-header {
    
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px clamp(22px, 4vw, 54px);
    position: relative;
    z-index: 3;
    border-bottom: 1px solid rgba(255,255,255,.09);
    
}

.vm-story-header p,
.vm-story-detail-copy > p:first-child {
    margin: 0 0 6px;
    color: var(--vm-accent-light);
    font: 800 .68rem/1 Cinzel, serif;
    letter-spacing: .26em;
}

.vm-story-header h2 {
    margin: 0;
    font: 900 clamp(2rem, 5vw, 4.1rem)/.86 Cinzel, serif;
    letter-spacing: .02em;
    
}

.vm-story-rank-sequence {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 13px;
    color: rgba(239,245,255,.64);
    font: 800 .57rem/1 Cinzel, serif;
    letter-spacing: .17em;
}

.vm-story-rank-sequence i {
    width: clamp(10px, 2vw, 28px);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--vm-accent-light), transparent);
}

.vm-story-close {
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    border: 1px solid rgba(255,255,255,.2);
    color: white;
    background: rgba(0,0,0,.3);
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    transform: rotate(3deg);
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.vm-story-close:hover,
.vm-story-close:focus-visible {
    transform: rotate(-3deg) scale(1.04);
    border-color: var(--vm-accent-light);
    background: color-mix(in srgb, var(--vm-accent-dark) 74%, black);
}

.vm-story-layout {
    display: grid;
    
    
    position: relative;
    z-index: 2;
}

.vm-story-map-shell {
    
    
    border-right: 1px solid rgba(255,255,255,.08);
}

.vm-story-map-head {
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.vm-story-map-head > div:first-child span,
.vm-story-stats span {
    display: block;
    color: rgba(233,241,255,.55);
    font: 700 .57rem/1.3 Cinzel, serif;
    letter-spacing: .17em;
}

.vm-story-map-head strong {
    display: block;
    margin-top: 4px;
    color: white;
    font: 900 1.35rem/1 Cinzel, serif;
}

.vm-story-stats {
    display: flex;
    gap: 20px;
    text-align: right;
}

.vm-story-stats b {
    color: var(--vm-accent-light);
    font-size: .95rem;
}

.vm-story-route-viewport {
    
    
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    scrollbar-width: none;
    
    
    
}

.vm-story-route-viewport::-webkit-scrollbar { display: none; }

.vm-story-route-viewport::before,
.vm-story-route-viewport::after {
    content: "";
    position: sticky;
    left: 0;
    right: 0;
    z-index: 20;
    
    height: 52px;
    pointer-events: none;
}

.vm-story-route-viewport::before {
    top: 0;
    margin-bottom: -52px;
    background: linear-gradient(to bottom, rgba(2,6,14,.97), transparent);
}

.vm-story-route-viewport::after {
    bottom: 0;
    margin-top: -52px;
    background: linear-gradient(to top, rgba(2,6,14,.97), transparent);
}

.vm-story-route {
    width: 100%;
    height: 1600px;
    min-height: 1600px;
    position: relative;
    isolation: isolate;
}

.vm-story-route::before {
    content: "ASCENSION";
    position: absolute;
    left: 4%;
    top: 46%;
    z-index: 0;
    color: rgba(255,255,255,.025);
    font: 900 clamp(3rem, 10vw, 7.5rem)/1 Cinzel, serif;
    letter-spacing: .08em;
    transform: rotate(-90deg) translateX(-50%);
    transform-origin: left center;
    pointer-events: none;
}


.vm-story-node-portrait img,
.vm-story-node-portrait b,
.vm-story-detail-portrait img,
.vm-story-detail-portrait > span {
    grid-area: 1 / 1;
}


.vm-story-node-portrait img[hidden],
.vm-story-detail-portrait img[hidden] { display: none; }


.vm-story-detail {
    min-width: 0;
    display: flex;
    flex-direction: column;
    
    
    position: relative;
    
}

.vm-story-detail::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 42%;
    height: 8px;
    background: var(--vm-accent);
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
}

.vm-story-detail-portrait {
    width: min(100%, 310px);
    aspect-ratio: 1;
    
    align-self: center;
    overflow: hidden;
    position: relative;
    border: 1px solid color-mix(in srgb, var(--vm-accent-light) 50%, transparent);
    background: rgba(255,255,255,.025);
    clip-path: polygon(0 0, 88% 0, 100% 12%, 100% 100%, 12% 100%, 0 88%);
}

.vm-story-detail-portrait::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 4px solid color-mix(in srgb, var(--vm-accent) 18%, transparent);
    clip-path: inherit;
    pointer-events: none;
}

.vm-story-detail-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vm-story-detail-portrait > span {
    place-self: center;
    color: var(--vm-accent-light);
    font: 900 2rem Cinzel, serif;
}

.vm-story-detail-portrait i {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    min-width: 44%;
    padding: 10px 20px;
    color: white;
    background: var(--vm-accent-dark);
    font: 900 .66rem Cinzel, serif;
    letter-spacing: .16em;
    font-style: normal;
    clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
}

.vm-story-detail-copy h3 {
    margin: 0;
    color: white;
    font: 900 clamp(1.9rem, 3.5vw, 3.1rem)/.95 Cinzel, serif;
}

.vm-story-detail-copy > strong {
    display: block;
    margin-top: 8px;
    color: var(--vm-accent-light);
    font: 800 .76rem/1.35 Cinzel, serif;
    letter-spacing: .1em;
}

.vm-story-detail-copy > span {
    display: inline-block;
    margin-top: 13px;
    padding: 6px 10px;
    border: 1px solid color-mix(in srgb, var(--vm-accent-light) 42%, transparent);
    color: rgba(245,248,255,.8);
    font: 800 .56rem Cinzel, serif;
    letter-spacing: .14em;
}

.vm-story-detail-copy > p:not(:first-child) {
    margin: 16px 0 0;
    color: rgba(231,239,255,.72);
    font-size: .82rem;
    
}

.vm-story-detail-copy blockquote {
    margin: 17px 0 0;
    
    border-left: 3px solid var(--vm-accent);
    color: rgba(250,252,255,.88);
    background: rgba(255,255,255,.035);
    font-size: .81rem;
    line-height: 1.55;
    font-style: italic;
}

.vm-story-format {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    margin-top: 16px;
}

.vm-story-format span {
    min-height: 46px;
    display: grid;
    align-content: center;
    gap: 3px;
    padding: 8px 6px;
    border: 1px solid rgba(255,255,255,.09);
    color: rgba(235,242,255,.58);
    background: rgba(255,255,255,.025);
    text-align: center;
    font: 800 .48rem/1.2 Cinzel, serif;
    letter-spacing: .11em;
}

.vm-story-format b {
    display: block;
    color: white;
    font-size: .9rem;
}

.vm-story-message {
    min-height: 0;
    margin: 0;
    color: #ffb6bf;
    font-size: .72rem;
}

.vm-story-actions {
    display: grid;
    
    gap: 10px;
    margin-top: auto;
}

.vm-story-detail.is-locked .vm-story-detail-portrait img { filter: grayscale(1) brightness(.56); }
.vm-story-detail.is-locked .vm-story-detail-copy { opacity: .66; }

.vm-app.is-story-match .vm-opponents {
    grid-template-columns: minmax(0, 360px);
    justify-content: center;
}

.vm-app.is-story-match .vm-opponent[data-seat="1"] {
    width: min(360px, 86vw);
    transform: scale(1.05);
    overflow: visible;
}

.vm-app.is-story-match .vm-opponent[data-seat="2"],
.vm-app.is-story-match .vm-opponent[data-seat="3"] { display: none !important; }
.vm-app.is-story-match .vm-player-avatar-wrap { display: none !important; }
.vm-app.is-story-match .vm-player-identity { gap: 8px; }
.vm-app.is-story-match .vm-player-count,
.vm-app.is-story-match .vm-opponent-count { font-size: clamp(.54rem, 1.5vw, .68rem); letter-spacing: .06em; }

.vm-story-draw-cue {
    position: absolute;
    z-index: 30;
    right: 14px;
    top: 12px;
    min-width: 38px;
    min-height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid white;
    color: white;
    background: var(--vm-accent-dark);
    font: 900 .75rem/1 Cinzel, serif;
    clip-path: polygon(0 0, 86% 0, 100% 24%, 100% 100%, 14% 100%, 0 76%);
    pointer-events: none;
}

.vm-player.is-story-drawing .vm-story-draw-cue,
.vm-opponent.is-story-drawing .vm-story-draw-cue {
    animation: vm-story-draw-cue .72s cubic-bezier(.18,.82,.18,1) both;
}

@keyframes vm-story-draw-cue {
    0% { opacity: 0; transform: translateY(12px) rotate(-8deg) scale(.7); }
    28% { opacity: 1; transform: translateY(0) rotate(3deg) scale(1.08); }
    100% { opacity: 0; transform: translateY(-28px) rotate(-3deg) scale(.92); }
}

.vm-match-intro.is-story-intro .vm-intro-portrait.is-left,
.vm-match-intro.is-story-intro .vm-intro-portrait.is-right,
.vm-match-intro.is-story-intro .vm-intro-player-seal { display: none !important; }
.vm-match-intro.is-story-intro .vm-intro-portrait[hidden] { display: none !important; }
.vm-match-intro.is-story-intro .vm-intro-portrait.is-center {
    display: block !important;
    left: 50%;
    transform: translateX(-50%) scale(1.12);
}

@media (max-width: 920px) {
    .vm-story-screen { padding: 0; }
    .vm-story-panel { min-height: 100vh; border: 0; }
    .vm-story-layout { grid-template-columns: 1fr; }
    .vm-story-map-shell { border-right: 0; }
    .vm-story-detail {
        border-top: 1px solid rgba(255,255,255,.08);
        display: grid;
        grid-template-columns: minmax(150px, 240px) minmax(0, 1fr);
        align-items: start;
    }
    .vm-story-detail-portrait { width: 100%; }
    .vm-story-actions { grid-column: 1 / -1; width: 100%; }
    .vm-story-message { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
    .vm-story-header {
        min-height: 112px;
        padding: 18px 16px;
    }
    .vm-story-header h2 { font-size: clamp(2rem, 13vw, 3rem); }
    .vm-story-rank-sequence { gap: 5px; font-size: .48rem; letter-spacing: .1em; }
    .vm-story-close { width: 42px; height: 42px; }
    .vm-story-map-shell { padding: 16px 10px 22px; }
    .vm-story-map-head { padding-inline: 6px; }
    .vm-story-stats { flex-direction: column; gap: 4px; }
    .vm-story-route-viewport { height: 560px; }
    .vm-story-route { height: 1450px; min-height: 1450px; }
    
    
    
    
    
    
    
    
    
    
    .vm-story-detail {
        display: flex;
        padding: 24px 16px 30px;
    }
    .vm-story-detail-portrait { width: min(245px, 76vw); }
    .vm-story-format { grid-template-columns: repeat(3, 1fr); }
    .vm-story-actions { grid-template-columns: 1fr; }
}

@media (max-width: 390px) {
    .vm-story-rank-sequence {
        width: min(100%, 282px);
        gap: 3px;
        font-size: .4rem;
        letter-spacing: .055em;
    }
    .vm-story-rank-sequence i {
        width: auto;
        min-width: 4px;
        flex: 1;
    }
    
    .vm-story-format span { font-size: .43rem; letter-spacing: .07em; }
}


/* =========================================================
   MODE HISTOIRE — PORTAIL CINÉMATIQUE
   ========================================================= */
.vm-story-layout {
    
    align-items: stretch;
}

.vm-story-map-shell {
    
    
    
    min-width: 0;
}

.vm-story-route-viewport {
    
    
    
    border: 1px solid rgba(151, 203, 240, .16);
    
    
}

.vm-story-route.vm-story-route--gate {
    position: relative;
    
    
}

.vm-story-route.vm-story-route--gate::before,
.vm-story-route.vm-story-route--gate::after {
    content: "";
    position: absolute;
    pointer-events: none;
    
    clip-path: polygon(7% 0, 100% 0, 86% 100%, 0 78%);
}

.vm-story-route.vm-story-route--gate::before {
    
    
    
    
    transform: rotate(-7deg);
}

.vm-story-route.vm-story-route--gate::after {
    
    
    
    
    
    transform: rotate(9deg);
}

.vm-story-gate-scene {
    position: relative;
    
    
    
    
    align-items: center;
    
    
}

.vm-story-gate-scene::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    
}

.vm-story-route.is-changing .vm-story-gate,
.vm-story-route.is-changing .vm-story-gate-path {
    animation: vmStoryGateChange .36s cubic-bezier(.2,.8,.2,1);
}

@keyframes vmStoryGateChange {
    from { opacity: .18; transform: translateX(20px) scale(.985); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}

.vm-story-gate-neighbour {
    position: relative;
    z-index: 4;
    
    border-top: 1px solid rgba(255,255,255,.15);
    border-bottom: 1px solid rgba(255,255,255,.08);
    
    
    
    
    
    transition: transform .22s ease, background .22s ease, opacity .22s ease;
}


.vm-story-gate-neighbour small { display: block; margin-bottom: 7px; color: rgba(255,255,255,.48); font-size: .63rem; letter-spacing: .24em; }
.vm-story-gate-neighbour strong { font-size: .92rem; letter-spacing: .09em; }
.vm-story-gate-neighbour:not(:disabled):hover { transform: translateY(-3px); background: rgba(20, 42, 66, .72); }
.vm-story-gate-neighbour:disabled {  cursor: default; }

.vm-story-gate {
    position: relative;
    z-index: 3;
    
    margin: 0 auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    
    transform-origin: 50% 45%;
    cursor: pointer;
}

.vm-story-gate:disabled { cursor: default; }

.vm-story-gate-rank {
    position: absolute;
    z-index: 12;
    
    
    
    
    padding: 12px 26px 11px;
    
    
    font-family: "Cinzel", serif;
    font-size: .93rem;
    letter-spacing: .3em;
    
    
    box-shadow: 0 12px 26px rgba(0,0,0,.28);
}

.vm-story-gate-frame {
    position: relative;
    display: block;
    
    
    
    
    overflow: hidden;
}

.vm-story-gate-portal {
    position: absolute;
    
    display: block;
    overflow: hidden;
    
    
    border: 1px solid rgba(185, 225, 251, .16);
}

.vm-story-gate-portrait,
.vm-story-gate-portrait img,
.vm-story-gate-portrait b,
.vm-story-gate-veil,
.vm-story-gate-leaf,
.vm-story-gate-flare {
    position: absolute;
    inset: 0;
    display: block;
}

.vm-story-gate-portrait img,
.vm-story-gate-portrait b {
    width: 100%;
    height: 100%;
    object-fit: cover;
    
}

.vm-story-gate-portrait b {
    display: grid;
    place-items: center;
    font-family: "Cinzel", serif;
    font-size: 3rem;
    letter-spacing: .14em;
    
}

.vm-story-gate-veil {
    z-index: 2;
    
    pointer-events: none;
}

.vm-story-gate-leaf {
    z-index: 4;
    
    
    border: 1px solid rgba(157, 216, 255, .18);
    
}

.vm-story-gate-leaf::after {
    content: "";
    position: absolute;
    inset: 8%;
    border: 1px solid rgba(255,255,255,.07);
}

.vm-story-gate-leaf.is-left {
    right: auto;
    clip-path: polygon(0 0, 100% 0, 91% 100%, 0 100%);
    
}

.vm-story-gate-leaf.is-right {
    left: auto;
    clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%);
    
}

.vm-story-gate-flare {
    z-index: 3;
    pointer-events: none;
    opacity: .35;
    
}

.vm-story-gate-plate {
    position: absolute;
    z-index: 9;
    
    
    
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-areas: "step action" "name action" "title action";
    align-items: center;
    
    
    
    
    text-align: left;
    clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%);
    transform: rotate(-2deg);
    box-shadow: 0 16px 30px rgba(0,0,0,.32);
}

.vm-story-gate-plate small { grid-area: step; color: #536475;  letter-spacing: .22em; }
.vm-story-gate-plate strong { grid-area: name; font-family: "Cinzel", serif;  letter-spacing: .08em; line-height: 1; }
.vm-story-gate-plate em { grid-area: title; font-style: normal;  font-weight: 800; line-height: 1.15; }
.vm-story-gate-plate i {
    grid-area: action;
    align-self: end;
    
    
    
    font-style: normal;
    
    font-weight: 900;
    letter-spacing: .14em;
    clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
}

.vm-story-gate:hover .vm-story-gate-frame { filter: brightness(1.08); }
.vm-story-gate:hover .vm-story-gate-plate { transform: rotate(-1deg) translateY(-2px); }

.vm-story-gate-path {
    position: relative;
    z-index: 7;
    
    display: flex;
    
    
    
    
    
    border-top: 1px solid rgba(255,255,255,.12);
    
    
    
}

.vm-story-gate-group {
    position: relative;
    flex: 0 0 auto;
    display: grid;
    
    
}

.vm-story-gate-group:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -6px;
    top: 18px;
    bottom: 3px;
    width: 1px;
    
}

.vm-story-gate-group-label {
    
    font-family: "Cinzel", serif;
    
    
}


.vm-story-gate-lane {
    display: flex;
    align-items: end;
    
}

.vm-story-gate-node {
    position: relative;
    width: 66px;
    height: 82px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.12);
    background: #0a1727;
    color: white;
    clip-path: polygon(9% 0, 100% 0, 91% 100%, 0 100%);
    overflow: hidden;
    opacity: .62;
    transition: width .2s ease, height .2s ease, opacity .2s ease, transform .2s ease, border-color .2s ease;
}

.vm-story-gate-node:not(:disabled):hover { transform: translateY(-3px); opacity: .9; border-color: rgba(160, 219, 255, .48); }
.vm-story-gate-node.is-selected {   opacity: 1;   }


.vm-story-gate-node-avatar,
.vm-story-gate-node-avatar img,
.vm-story-gate-node-avatar b {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.vm-story-gate-node-avatar img { object-fit: cover; }
.vm-story-gate-node-avatar b { display: grid; place-items: center; }
.vm-story-gate-node-copy { position: absolute; inset: auto 0 0; display: grid;   text-align: left; }
.vm-story-gate-node-copy small {   color: rgba(255,255,255,.56); }
.vm-story-gate-node-copy strong {  letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.vm-story-gate-node.is-selected .vm-story-gate-node-copy small { color: #5d6e7c; }
.vm-story-gate-node.is-completed::after { content: "✓"; position: absolute; z-index: 5;     display: grid; place-items: center; border-radius: 50%; background: rgba(239,248,253,.96); color: #06111c; font-weight: 900; }


.vm-story-gate-scene.is-opening .vm-story-gate-plate,
.vm-story-gate-scene.is-opening .vm-story-gate-neighbour,
.vm-story-gate-scene.is-opening .vm-story-gate-path { animation: vmStoryGateFade .78s ease forwards; }


@keyframes vmStoryGateFade { to { opacity: 0; } }

@keyframes vmStoryGateFlash { 0%,38% { opacity: .35; } 100% { opacity: 1; background: rgba(221,244,255,.98); } }

@media (max-width: 1120px) {
    .vm-story-layout { grid-template-columns: 1fr; }
    .vm-story-route-viewport { min-height: 560px; }
}

@media (max-width: 760px) {
    
    
    
    
    
    
    
    
    
    
    
    .vm-story-gate-node { width: 58px; height: 74px; }
    
}


/* =========================================================
   MODE HISTOIRE — NAVIGATION MOBILE COMPACTE
   Le portail reste visible, le chemin et les commandes aussi.
   ========================================================= */
@media (max-width: 760px) {
    .vm-story-screen {
        height: 100dvh;
        min-height: 100dvh;
        overflow: hidden;
        padding: 0;
    }

    .vm-story-panel {
        width: 100%;
        height: 100dvh;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border: 0;
    }

    .vm-story-header {
        flex: 0 0 auto;
        min-height: 0;
        padding: calc(9px + env(safe-area-inset-top)) 14px 9px;
        gap: 10px;
    }

    .vm-story-header p {
        display: none;
    }

    .vm-story-header h2 {
        font-size: clamp(2rem, 11vw, 2.75rem);
        line-height: .88;
        letter-spacing: .01em;
    }

    .vm-story-rank-sequence {
        margin-top: 8px;
        gap: 4px;
        font-size: .42rem;
        letter-spacing: .065em;
        white-space: nowrap;
    }

    .vm-story-rank-sequence i {
        min-width: 5px;
        flex: 1;
    }

    .vm-story-close {
        width: 40px;
        height: 40px;
        font-size: 1.7rem;
    }

    .vm-story-layout {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        overflow: hidden;
    }

    .vm-story-map-shell {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
        overflow: hidden;
    }

    .vm-story-map-head {
        flex: 0 0 auto;
        min-height: 0;
        padding: 0 4px 8px;
        gap: 10px;
    }

    .vm-story-map-head > div:first-child span,
    .vm-story-stats span {
        font-size: .48rem;
        letter-spacing: .12em;
    }

    .vm-story-map-head strong {
        margin-top: 2px;
        font-size: 1.05rem;
    }

    .vm-story-stats {
        flex-direction: row;
        gap: 12px;
    }

    .vm-story-stats b {
        font-size: .82rem;
    }

    .vm-story-route-viewport {
        flex: 1 1 auto;
        height: auto !important;
        min-height: 0 !important;
        margin-top: 0;
        overflow: hidden;
        border-radius: 20px;
    }

    .vm-story-route.vm-story-route--gate {
        width: 100%;
        height: 100% !important;
        min-height: 0 !important;
        padding: 8px 7px 7px;
    }

    .vm-story-route.vm-story-route--gate::before {
        width: 108px;
        height: 25px;
        left: 14px;
        top: 17px;
    }

    .vm-story-route.vm-story-route--gate::after {
        width: 88px;
        height: 18px;
        right: -15px;
        top: 74px;
    }

    .vm-story-gate-scene {
        width: 100%;
        height: 100%;
        min-height: 0;
        grid-template-columns: 44px minmax(0, 1fr) 44px;
        grid-template-rows: minmax(0, 1fr) 88px;
        gap: 6px;
        overflow: hidden;
        touch-action: pan-y;
    }

    .vm-story-gate-neighbour {
        display: grid;
        place-items: center;
        align-self: center;
        width: 42px;
        height: 54px;
        min-width: 0;
        padding: 0;
        border: 1px solid rgba(185, 225, 251, .22);
        background: rgba(5, 13, 25, .84);
        clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%);
    }

    .vm-story-gate-neighbour small,
    .vm-story-gate-neighbour strong {
        display: none;
    }

    .vm-story-gate-neighbour::before {
        font-size: 1.7rem;
        line-height: 1;
        color: rgba(235, 248, 255, .94);
    }

    .vm-story-gate-neighbour.is-previous::before {
        content: "‹";
    }

    .vm-story-gate-neighbour.is-next::before {
        content: "›";
    }

    .vm-story-gate-neighbour:disabled {
        opacity: .15;
    }

    .vm-story-gate {
        grid-column: 2;
        align-self: stretch;
        width: min(100%, 300px);
        height: 100%;
        min-height: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .vm-story-gate-frame {
        width: 100%;
        height: min(100%, 390px);
        padding-top: 0;
    }

    .vm-story-gate-portal {
        inset: 17px 18px 23px 16px;
    }

    .vm-story-gate-rank {
        top: 4px;
        min-width: 118px;
        padding: 8px 18px 7px;
        font-size: .7rem;
        letter-spacing: .22em;
    }

    .vm-story-gate-plate {
        left: 4%;
        right: 0;
        bottom: 3%;
        padding: 10px 12px 11px;
        column-gap: 8px;
    }

    .vm-story-gate-plate small {
        font-size: .52rem;
        letter-spacing: .15em;
    }

    .vm-story-gate-plate strong {
        font-size: clamp(1.25rem, 6vw, 1.7rem);
    }

    .vm-story-gate-plate em {
        max-width: 22ch;
        font-size: .59rem;
    }

    .vm-story-gate-plate i {
        padding: 9px 8px;
        font-size: .55rem;
        letter-spacing: .09em;
    }

    .vm-story-gate-path {
        grid-column: 1 / -1;
        grid-row: 2;
        height: 88px;
        min-height: 88px;
        align-items: center;
        gap: 5px;
        padding: 6px 7px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        clip-path: none;
        border: 1px solid rgba(255,255,255,.1);
        border-radius: 12px;
    }

    .vm-story-gate-path::-webkit-scrollbar {
        display: none;
    }

    .vm-story-gate-group {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 0 5px;
    }

    .vm-story-gate-group-label {
        display: none;
    }

    .vm-story-gate-group:not(:last-child)::after {
        top: 5px;
        bottom: 5px;
    }

    .vm-story-gate-lane {
        gap: 5px;
    }

    .vm-story-gate-node,
    .vm-story-gate-node.is-selected {
        flex: 0 0 auto;
        width: 54px;
        height: 68px;
        scroll-snap-align: center;
    }

    .vm-story-gate-node.is-selected {
        width: 64px;
        height: 74px;
        transform: translateY(-1px);
    }

    .vm-story-gate-node-copy {
        padding: 4px 5px;
    }

    .vm-story-gate-node-copy small {
        display: none;
    }

    .vm-story-gate-node-copy strong {
        font-size: .49rem;
    }

    .vm-story-detail {
        display: none !important;
    }
}

@media (max-width: 390px) {
    

    .vm-story-gate-scene {
        grid-template-columns: 40px minmax(0, 1fr) 40px;
        
    }

    

    

    

    
}

/* =========================================================
   MODE HISTOIRE — SÉLECTEUR COMPACT ET PORTAIL CENTRAL
   ========================================================= */
.vm-story-panel {
    min-height: 0;
    height: min(860px, calc(100dvh - 28px));
    display: flex;
    flex-direction: column;
}

.vm-story-header {
    min-height: 108px;
    flex: 0 0 auto;
    padding-block: 18px;
}

.vm-story-layout {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
}

.vm-story-map-shell {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 20px 20px;
}

.vm-story-map-head {
    flex: 0 0 auto;
    min-height: 48px;
    padding: 0 4px 12px;
}

.vm-story-route-viewport {
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    min-height: 0;
    margin-top: 0;
    overflow: hidden;
    border-radius: 0;
    clip-path: polygon(0 0, 97% 0, 100% 6%, 100% 100%, 3% 100%, 0 94%);
    
}

.vm-story-route-viewport::before,
.vm-story-route-viewport::after {
    display: none;
}

.vm-story-route.vm-story-route--gate {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 12px;
}

.vm-story-route.vm-story-route--gate::before {
    width: 142px;
    height: 31px;
    left: 20px;
    top: 20px;
    opacity: .9;
}

.vm-story-route.vm-story-route--gate::after {
    width: 118px;
    height: 24px;
    right: -20px;
    top: 76px;
    opacity: .11;
}

.vm-story-gate-scene {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(300px, 1fr) 122px;
    gap: 12px;
    overflow: hidden;
}


.vm-story-gate-scene::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 30;
    opacity: 0;
    pointer-events: none;
    
}

.vm-story-gate-stage {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: 54px minmax(260px, 420px) 54px;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 14px 18px 4px;
    position: relative;
    z-index: 4;
    touch-action: pan-y;
}

.vm-story-gate-neighbour {
    width: 52px;
    height: 84px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(190,226,250,.25);
    
    
    font: 300 3.2rem/1 Arial, sans-serif;
    text-align: center;
    clip-path: polygon(13% 0, 100% 0, 87% 100%, 0 100%);
    cursor: pointer;
}

.vm-story-gate-neighbour.is-next {
    text-align: center;
    clip-path: polygon(0 0, 87% 0, 100% 100%, 13% 100%);
}

.vm-story-gate-neighbour:not(:disabled):hover,
.vm-story-gate-neighbour:not(:disabled):focus-visible {
    transform: translateY(-3px) scale(1.04);
    
    
}

.vm-story-gate-neighbour:disabled {
    opacity: .14;
}

.vm-story-gate {
    width: min(100%, 420px);
    height: min(100%, 430px);
    min-height: 310px;
    align-self: center;
    filter: drop-shadow(0 25px 35px rgba(0,0,0,.54));
}

.vm-story-gate-frame {
    width: 100%;
    height: 100%;
    padding-top: 0;
    
    clip-path: polygon(8% 0, 100% 0, 93% 100%, 0 100%);
}

.vm-story-gate-portal {
    inset: 24px 27px 28px 23px;
    
    clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
}

.vm-story-gate-portrait img,
.vm-story-gate-portrait b {
    object-position: center 30%;
}


.vm-story-gate-leaf {
    width: 50%;
    
    
}

.vm-story-gate-leaf.is-left {
    transform: translateX(-82%);
}

.vm-story-gate-leaf.is-right {
    transform: translateX(82%);
}

.vm-story-gate-rank,
.vm-story-gate-status {
    position: absolute;
    z-index: 14;
    padding: 9px 18px 8px;
    font: 900 .7rem/1 Cinzel, serif;
    letter-spacing: .2em;
    box-shadow: 0 10px 24px rgba(0,0,0,.3);
}

.vm-story-gate-rank {
    top: -10px;
    left: 44px;
    min-width: 118px;
    transform: rotate(-4deg);
    color: #06111d;
    background: #eff9ff;
    text-align: center;
    clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
}

.vm-story-gate-status {
    top: 14px;
    right: -2px;
    
    
    clip-path: polygon(10% 0, 100% 0, 91% 100%, 0 100%);
}

.vm-story-gate-scene.is-completed .vm-story-gate-status {
    color: #06111d;
    background: #dff5ff;
}

.vm-story-gate-plate {
    left: 5%;
    right: -1%;
    bottom: 4%;
    padding: 14px 19px 15px;
    column-gap: 12px;
}

.vm-story-gate-plate small {
    font-size: .58rem;
}

.vm-story-gate-plate strong {
    font-size: clamp(1.55rem, 2.4vw, 2.25rem);
}

.vm-story-gate-plate em {
    font-size: .72rem;
}

.vm-story-gate-plate i {
    max-width: 104px;
    padding: 10px 11px;
    
    font-size: .58rem;
    line-height: 1.18;
    text-align: center;
}

.vm-story-gate:focus-visible {
    outline: 3px solid rgba(219,244,255,.9);
    outline-offset: 5px;
}

.vm-story-gate:disabled {
    opacity: .5;
    filter: grayscale(.85) brightness(.62);
}

.vm-story-gate-path {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    min-height: 122px;
    height: 122px;
    align-items: end;
    gap: 8px;
    padding: 10px 14px 11px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    
    border: 1px solid rgba(188,226,251,.15);
    
    
    clip-path: polygon(2% 0, 100% 0, 98% 100%, 0 100%);
}

.vm-story-gate-path::-webkit-scrollbar {
    height: 5px;
}


.vm-story-gate-group {
    gap: 6px;
    padding: 2px 8px 0;
}

.vm-story-gate-group-label {
    font-size: .52rem;
    letter-spacing: .18em;
}

.vm-story-gate-lane {
    gap: 6px;
}

.vm-story-gate-node,
.vm-story-gate-node.is-selected {
    flex: 0 0 auto;
    width: 70px;
    height: 88px;
    scroll-snap-align: center;
    border: 1px solid rgba(173,218,247,.23);
    
    clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 100%);
    transition: transform .18s ease, opacity .18s ease, border-color .18s ease, filter .18s ease;
}

.vm-story-gate-node:not(:disabled):hover,
.vm-story-gate-node:not(:disabled):focus-visible {
    transform: translateY(-4px);
    border-color: rgba(216,242,255,.72);
    outline: 0;
}

.vm-story-gate-node.is-selected {
    width: 84px;
    height: 99px;
    transform: translateY(-2px);
    border-color: rgba(227,247,255,.9);
    
}

.vm-story-gate-node.is-selected:hover,
.vm-story-gate-node.is-selected:focus-visible {
    transform: translateY(-5px);
}

.vm-story-gate-node-avatar img {
    object-position: center 27%;
}

.vm-story-gate-node-copy {
    padding: 5px 6px 6px;
}

.vm-story-gate-node-copy small {
    font-size: .43rem;
    letter-spacing: .09em;
}

.vm-story-gate-node-copy strong {
    font-size: .54rem;
}

.vm-story-gate-node.is-selected .vm-story-gate-node-copy {
    color: #06111c;
    background: rgba(242,250,255,.97);
}

.vm-story-gate-node.is-locked {
    opacity: .28;
    cursor: not-allowed;
}

.vm-story-gate-node.is-locked img {
    filter: grayscale(1) brightness(.35);
}

.vm-story-gate-node.is-completed::after {
    width: 19px;
    height: 19px;
    right: 4px;
    top: 4px;
    font-size: .68rem;
}

.vm-story-detail {
    gap: 15px;
    padding: 27px 25px 24px;
    overflow-y: auto;
}

.vm-story-detail-portrait {
    display: none !important;
}

.vm-story-detail-copy h3 {
    font-size: clamp(1.65rem, 2.5vw, 2.35rem);
}

.vm-story-detail-copy > p:not(:first-child) {
    margin-top: 13px;
    line-height: 1.55;
}

.vm-story-detail-copy blockquote {
    margin-top: 13px;
    padding: 12px 14px;
}

.vm-story-actions {
    grid-template-columns: .8fr 1.4fr;
}

.vm-story-route.is-changing .vm-story-gate-stage,
.vm-story-route.is-changing .vm-story-gate-path {
    animation: vmStoryCompactChange .3s cubic-bezier(.2,.8,.2,1);
}

@keyframes vmStoryCompactChange {
    from { opacity: .28; transform: translateX(14px) scale(.992); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}

.vm-story-gate-scene.is-opening .vm-story-gate-leaf.is-left {
    animation: vmStoryCompactOpenLeft .94s cubic-bezier(.16,.86,.18,1) forwards;
}

.vm-story-gate-scene.is-opening .vm-story-gate-leaf.is-right {
    animation: vmStoryCompactOpenRight .94s cubic-bezier(.16,.86,.18,1) forwards;
}

.vm-story-gate-scene.is-opening .vm-story-gate-plate,
.vm-story-gate-scene.is-opening .vm-story-gate-rank,
.vm-story-gate-scene.is-opening .vm-story-gate-status,
.vm-story-gate-scene.is-opening .vm-story-gate-neighbour,
.vm-story-gate-scene.is-opening .vm-story-gate-path {
    animation: vmStoryCompactFade .62s ease forwards;
}

.vm-story-gate-scene.is-opening .vm-story-gate {
    animation: vmStoryCompactCamera .98s cubic-bezier(.16,.86,.18,1) forwards;
}

.vm-story-gate-scene.is-opening .vm-story-gate-flare {
    animation: vmStoryCompactFlare .98s ease forwards;
}

.vm-story-gate-scene.is-opening::after {
    animation: vmStoryCompactFlash .98s ease forwards;
}

@keyframes vmStoryCompactOpenLeft {
    from { transform: translateX(-82%); }
    to { transform: translateX(-152%); }
}

@keyframes vmStoryCompactOpenRight {
    from { transform: translateX(82%); }
    to { transform: translateX(152%); }
}

@keyframes vmStoryCompactFade {
    to { opacity: 0; }
}

@keyframes vmStoryCompactCamera {
    0% { transform: scale(1); filter: brightness(1); }
    62% { filter: brightness(1.22); }
    100% { transform: scale(1.88) translateY(1%); filter: brightness(1.5); }
}

@keyframes vmStoryCompactFlare {
    0%, 34% { opacity: .24; }
    100% { opacity: 1; background: rgba(225,247,255,.96); }
}

@keyframes vmStoryCompactFlash {
    0%, 72% { opacity: 0; }
    100% { opacity: .92; }
}

@media (max-width: 1040px) {
    .vm-story-layout {
        grid-template-columns: minmax(0, 1fr) 290px;
    }

    .vm-story-gate-stage {
        grid-template-columns: 48px minmax(240px, 370px) 48px;
        gap: 12px;
        padding-inline: 8px;
    }

    .vm-story-gate-neighbour {
        width: 46px;
        height: 74px;
    }
}

@media (max-width: 800px) {
    .vm-story-screen {
        height: 100dvh;
        min-height: 100dvh;
        
        
    }

    .vm-story-panel {
        
        height: 100dvh;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        border: 0;
    }

    .vm-story-header {
        min-height: 84px;
        padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
    }

    .vm-story-header p {
        display: none;
    }

    .vm-story-header h2 {
        font-size: clamp(2rem, 10vw, 2.75rem);
    }

    .vm-story-rank-sequence {
        margin-top: 7px;
        gap: 4px;
        font-size: .42rem;
        letter-spacing: .07em;
        white-space: nowrap;
    }

    .vm-story-rank-sequence i {
        min-width: 5px;
        flex: 1;
    }

    .vm-story-close {
        width: 40px;
        height: 40px;
    }

    .vm-story-layout {
        display: block;
        min-height: 0;
    }

    .vm-story-map-shell {
        min-height: 0;
        padding: 8px 8px 10px;
        border-right: 0;
    }

    .vm-story-map-head {
        min-height: 42px;
        padding: 0 4px 7px;
    }

    .vm-story-stats {
        flex-direction: row;
        gap: 10px;
    }

    .vm-story-route-viewport {
        
        
        
        clip-path: polygon(0 0, 96% 0, 100% 4%, 100% 100%, 4% 100%, 0 96%);
    }

    .vm-story-route.vm-story-route--gate {
        height: 100%;
        min-height: 0;
        padding: 7px;
    }

    .vm-story-route.vm-story-route--gate::before {
        width: 92px;
        height: 20px;
        left: 11px;
        top: 12px;
    }

    .vm-story-route.vm-story-route--gate::after {
        width: 72px;
        height: 15px;
        top: 52px;
    }

    .vm-story-gate-scene {
        grid-template-rows: minmax(0, 1fr) 94px;
        gap: 6px;
    }

    .vm-story-gate-stage {
        
        
        padding: 12px 3px 0;
    }

    .vm-story-gate-neighbour {
        width: 36px;
        height: 56px;
        font-size: 2.35rem;
    }

    .vm-story-gate {
        
        height: 100%;
        min-height: 0;
    }

    .vm-story-gate-portal {
        inset: 17px 19px 22px 16px;
    }

    .vm-story-gate-rank,
    .vm-story-gate-status {
        padding: 7px 12px 6px;
        font-size: .55rem;
    }

    .vm-story-gate-rank {
        top: -4px;
        left: 25px;
        min-width: 92px;
    }

    .vm-story-gate-status {
        top: 7px;
        right: -1px;
    }

    .vm-story-gate-plate {
        left: 3%;
        right: -1%;
        bottom: 3%;
        padding: 9px 10px 10px;
        column-gap: 7px;
    }

    .vm-story-gate-plate small {
        font-size: .43rem;
        letter-spacing: .12em;
    }

    .vm-story-gate-plate strong {
        font-size: clamp(1.18rem, 6vw, 1.55rem);
    }

    .vm-story-gate-plate em {
        max-width: 22ch;
        font-size: .52rem;
    }

    .vm-story-gate-plate i {
        max-width: 76px;
        padding: 7px 6px;
        font-size: .45rem;
        letter-spacing: .07em;
    }

    .vm-story-gate-path {
        height: 94px;
        min-height: 94px;
        gap: 3px;
        padding: 6px 7px 7px;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;
    }

    .vm-story-gate-path::-webkit-scrollbar {
        display: none;
    }

    .vm-story-gate-group {
        gap: 3px;
        padding: 0 4px;
    }

    .vm-story-gate-group-label {
        display: none;
    }

    .vm-story-gate-group:not(:last-child)::after {
        top: 4px;
        bottom: 4px;
    }

    .vm-story-gate-lane {
        gap: 4px;
    }

    .vm-story-gate-node,
    .vm-story-gate-node.is-selected {
        width: 53px;
        height: 72px;
    }

    .vm-story-gate-node.is-selected {
        width: 61px;
        height: 80px;
    }

    .vm-story-gate-node-copy {
        padding: 4px;
    }

    .vm-story-gate-node-copy small {
        display: none;
    }

    .vm-story-gate-node-copy strong {
        font-size: .46rem;
    }

    .vm-story-detail {
        display: flex !important;
        gap: 8px;
        padding: 9px 9px calc(10px + env(safe-area-inset-bottom));
        overflow: visible;
        border-top: 1px solid rgba(255,255,255,.08);
    }

    .vm-story-detail-copy {
        display: none;
    }

    .vm-story-message {
        font-size: .66rem;
    }

    .vm-story-actions {
        width: 100%;
        grid-template-columns: .72fr 1.28fr;
        gap: 7px;
        margin-top: 0;
    }

    .vm-story-actions .vm-secondary-button,
    .vm-story-actions .vm-primary-button {
        min-height: 46px;
        padding: 10px 8px;
        font-size: .64rem;
    }
}

@media (max-width: 390px) {
    .vm-story-header {
        min-height: 78px;
    }

    .vm-story-header h2 {
        font-size: 1.9rem;
    }

    

    .vm-story-gate-scene {
        grid-template-rows: minmax(0, 1fr) 88px;
    }

    

    .vm-story-gate-neighbour {
        
        height: 52px;
        font-size: 2.1rem;
    }

    

    .vm-story-gate-path {
        height: 88px;
        min-height: 88px;
    }

    .vm-story-gate-node,
    .vm-story-gate-node.is-selected {
        width: 49px;
        height: 67px;
    }

    .vm-story-gate-node.is-selected {
        width: 56px;
        height: 75px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vm-story-route.is-changing .vm-story-gate-stage,
    .vm-story-route.is-changing .vm-story-gate-path,
    .vm-story-gate-scene.is-opening .vm-story-gate-leaf,
    .vm-story-gate-scene.is-opening .vm-story-gate-plate,
    .vm-story-gate-scene.is-opening .vm-story-gate-rank,
    .vm-story-gate-scene.is-opening .vm-story-gate-status,
    .vm-story-gate-scene.is-opening .vm-story-gate-neighbour,
    .vm-story-gate-scene.is-opening .vm-story-gate-path,
    .vm-story-gate-scene.is-opening .vm-story-gate,
    .vm-story-gate-scene.is-opening .vm-story-gate-flare,
    .vm-story-gate-scene.is-opening::after {
        animation-duration: .01ms !important;
    }
}

/* Correctif de hauteur pour neutraliser les anciennes règles mobiles en !important. */


.vm-story-gate-stage {
    height: 100%;
    align-self: stretch;
}

@media (max-width: 800px) {
    .vm-story-gate {
        align-self: stretch;
    }
}

.vm-story-gate-neighbour::before {
    content: none !important;
}

/* V1.25.1 — correction Safari iOS : le sélecteur ne doit jamais déplacer le viewport. */
@media (max-width: 800px) {
    html,
    body,
    .vm-app {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .vm-story-screen {
        inset: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        overflow: hidden !important;
        overscroll-behavior-x: none;
    }

    .vm-story-panel {
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        margin: 0 !important;
        transform: none !important;
        contain: layout paint;
    }

    .vm-story-header,
    .vm-story-layout,
    .vm-story-map-shell,
    .vm-story-map-head,
    .vm-story-route-viewport,
    .vm-story-route.vm-story-route--gate,
    .vm-story-gate-scene,
    .vm-story-gate-stage,
    .vm-story-gate-path,
    .vm-story-detail,
    .vm-story-actions {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .vm-story-header > div {
        min-width: 0;
        max-width: calc(100% - 50px);
    }

    .vm-story-header h2,
    .vm-story-rank-sequence {
        max-width: 100%;
    }

    .vm-story-route-viewport {
        flex: 0 0 clamp(340px, calc(100dvh - 292px), 452px) !important;
        height: clamp(340px, calc(100dvh - 292px), 452px) !important;
        min-height: 340px !important;
        overflow: hidden !important;
    }

    .vm-story-gate-scene {
        overflow: hidden !important;
    }

    .vm-story-gate-stage {
        grid-template-columns: 34px minmax(0, 1fr) 34px !important;
        gap: 5px !important;
        padding-inline: 3px !important;
        overflow: hidden;
    }

    .vm-story-gate {
        width: min(100%, 286px) !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .vm-story-gate-path {
        display: flex;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        overscroll-behavior-inline: contain;
        
    }

    .vm-story-gate-group,
    .vm-story-gate-lane {
        flex: 0 0 auto;
        min-width: 0;
    }

    .vm-story-actions .vm-secondary-button,
    .vm-story-actions .vm-primary-button {
        min-width: 0;
    }
}

@media (max-width: 390px) {
    .vm-story-route-viewport {
        flex-basis: clamp(340px, calc(100dvh - 292px), 430px) !important;
        height: clamp(340px, calc(100dvh - 292px), 430px) !important;
        min-height: 340px !important;
    }

    .vm-story-gate-stage {
        grid-template-columns: 32px minmax(0, 1fr) 32px !important;
        gap: 4px !important;
    }

    .vm-story-gate-neighbour {
        width: 30px !important;
    }

    .vm-story-gate {
        width: min(100%, 270px) !important;
    }
}

@media (max-width: 800px) {
    .vm-story-gate-path::before,
    .vm-story-gate-path::after {
        content: "";
        flex: 0 0 calc(50% - 31px);
        width: calc(50% - 31px);
        height: 1px;
        pointer-events: none;
    }

    .vm-story-gate-path {
        touch-action: pan-x pan-y;
    }
}

/* =========================================================
   V1.26.0 — ASCENSION : SCÈNES NARRATIVES ET ARCHIVES
   ========================================================= */
.vm-story-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vm-story-archive {
    min-height: 40px;
    padding: 9px 16px 8px;
    border: 1px solid rgba(205, 235, 255, .3);
    
    
    font: 900 .58rem/1 Cinzel, serif;
    letter-spacing: .18em;
    clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
}


#vm-story-chapter-label {
    display: block;
    margin-top: 4px;
    max-width: 44ch;
    color: rgba(217, 239, 254, .68);
    font: 800 .5rem/1.25 Arial, sans-serif;
    letter-spacing: .14em;
}

.vm-story-dialogue-overlay {
    position: fixed;
    z-index: 5000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: clamp(12px, 2.2vw, 28px);
    overflow: hidden;
    
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, visibility .22s ease;
}

.vm-story-dialogue-overlay[hidden] {
    display: none !important;
}

.vm-story-dialogue-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

.vm-story-dialogue-overlay::before,
.vm-story-dialogue-overlay::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.vm-story-dialogue-overlay::before {
    width: min(72vw, 920px);
    height: 92px;
    left: -8vw;
    top: 7vh;
    
    clip-path: polygon(0 20%, 100% 0, 92% 71%, 5% 100%);
    transform: rotate(-4deg);
    opacity: .08;
}

.vm-story-dialogue-overlay::after {
    inset: 0;
    
}

.vm-story-dialogue-noise {
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    opacity: .26;
    
}

.vm-story-dialogue-shell {
    position: relative;
    z-index: 2;
    width: min(1060px, 100%);
    height: min(720px, calc(100dvh - 48px));
    min-height: 520px;
    overflow: hidden;
    border: 1px solid rgba(185, 224, 249, .22);
    
    clip-path: polygon(2.5% 0, 100% 0, 100% 94%, 96% 100%, 0 100%, 0 5%);
    box-shadow: 0 30px 90px rgba(0,0,0,.58);
}

.vm-story-dialogue-shell::before {
    content: "";
    position: absolute;
    z-index: 0;
    width: 46%;
    height: 18px;
    right: -3%;
    top: 32px;
    background: color-mix(in srgb, var(--vm-accent) 72%, #bfe9ff);
    transform: rotate(2deg);
    opacity: .7;
}

.vm-story-dialogue-panel,
.vm-story-archive-panel {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
}

.vm-story-dialogue-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding: clamp(22px, 3vw, 42px);
}

.vm-story-dialogue-header {
    position: relative;
    z-index: 5;
    max-width: 74%;
    padding-left: 20px;
}

.vm-story-dialogue-header::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 0;
    width: 7px;
    background: color-mix(in srgb, var(--vm-accent) 74%, #bfeaff);
    transform: skewY(-13deg);
}

.vm-story-dialogue-header span,
.vm-story-archive-header p {
    display: block;
    
    font: 900 .62rem/1 Arial, sans-serif;
    letter-spacing: .26em;
}

.vm-story-dialogue-header h2,
.vm-story-archive-header h2 {
    margin: 6px 0 0;
    color: #f3f9fd;
    font: 800 clamp(1.65rem, 4vw, 3.25rem)/.95 Cinzel, serif;
    letter-spacing: .035em;
    text-wrap: balance;
}

.vm-story-dialogue-stage {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(260px, .82fr) minmax(360px, 1.18fr);
    align-items: end;
    gap: clamp(16px, 3vw, 44px);
    padding-top: 14px;
}

.vm-story-dialogue-portrait-wrap {
    position: relative;
    align-self: stretch;
    min-height: 0;
    overflow: hidden;
    background:
        linear-gradient(160deg, color-mix(in srgb, var(--vm-accent) 30%, #0d2235), #020811 78%);
    clip-path: polygon(9% 0, 100% 0, 91% 100%, 0 100%);
}

.vm-story-dialogue-portrait-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(2,7,14,.72), transparent 24% 78%, rgba(2,7,14,.38)),
        linear-gradient(0deg, rgba(2,7,14,.85), transparent 45%);
}

.vm-story-dialogue-portrait-wrap img,
.vm-story-dialogue-portrait-wrap > span {
    width: 100%;
    height: 100%;
}

.vm-story-dialogue-portrait-wrap img {
    display: block;
    object-fit: cover;
    object-position: center 25%;
    filter: saturate(.9) contrast(1.06);
    transform: scale(1.04);
}

.vm-story-dialogue-portrait-wrap img[hidden] {
    display: none;
}

.vm-story-dialogue-portrait-wrap > span {
    display: grid;
    place-items: center;
    color: rgba(234, 248, 255, .94);
    font: 800 clamp(2.8rem, 9vw, 7rem)/1 Cinzel, serif;
    letter-spacing: .08em;
}


.vm-story-dialogue-portrait-wrap[data-portrait="system"] > span {
    animation: vmStoryVoidPulse 2.2s ease-in-out infinite;
}

.vm-story-dialogue-copy {
    position: relative;
    z-index: 4;
    align-self: end;
    min-height: 238px;
    display: grid;
    align-content: center;
    padding: clamp(24px, 3.2vw, 42px);
    
    
    clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%);
    box-shadow: 0 24px 54px rgba(0,0,0,.34);
}

.vm-story-dialogue-copy::before {
    content: "";
    position: absolute;
    width: 35%;
    height: 11px;
    left: 7%;
    top: -5px;
    background: color-mix(in srgb, var(--vm-accent) 75%, #9fddff);
    transform: rotate(-2deg);
}

.vm-story-dialogue-copy strong {
    color: color-mix(in srgb, var(--vm-accent-dark) 78%, #07111b);
    font: 950 .72rem/1 Arial, sans-serif;
    letter-spacing: .22em;
}

.vm-story-dialogue-copy p {
    margin: 13px 0 0;
    max-height: 9.3em;
    overflow-y: auto;
    color: #07121c;
    font: 700 clamp(.98rem, 1.6vw, 1.28rem)/1.55 Arial, sans-serif;
}

.vm-story-dialogue-choices {
    display: grid;
    gap: 9px;
    margin-top: 18px;
}

.vm-story-dialogue-choices[hidden] {
    display: none !important;
}

.vm-story-dialogue-choices button {
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid rgba(8, 29, 45, .24);
    color: #07121c;
    
    font: 900 .66rem/1.2 Arial, sans-serif;
    letter-spacing: .12em;
    text-align: left;
    clip-path: polygon(3% 0, 100% 0, 97% 100%, 0 100%);
}


.vm-story-dialogue-footer {
    display: grid;
    grid-template-columns: minmax(120px, .7fr) auto minmax(180px, 1fr);
    align-items: center;
    gap: 14px;
    padding-top: 18px;
}

.vm-story-dialogue-footer > span {
    color: rgba(222, 240, 252, .65);
    font: 900 .58rem/1 Arial, sans-serif;
    letter-spacing: .16em;
}

.vm-story-dialogue-skip,
.vm-story-dialogue-next {
    min-height: 48px;
    padding: 12px 20px;
    border: 1px solid rgba(190, 226, 249, .26);
    font: 900 .66rem/1 Arial, sans-serif;
    letter-spacing: .16em;
    clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%);
}

.vm-story-dialogue-skip {
    color: rgba(234, 247, 255, .84);
    background: rgba(5, 16, 28, .88);
}


.vm-story-dialogue-next:hover,
.vm-story-dialogue-next:focus-visible {
    filter: brightness(1.13);
}

.vm-story-dialogue-panel.is-line-changing .vm-story-dialogue-copy,
.vm-story-dialogue-panel.is-line-changing .vm-story-dialogue-portrait-wrap {
    animation: vmStoryLineIn .32s cubic-bezier(.2,.82,.2,1) both;
}

.vm-story-dialogue-panel.is-glitch .vm-story-dialogue-shell,
.vm-story-dialogue-panel.is-glitch .vm-story-dialogue-copy {
    animation: vmStoryGlitch .36s steps(2, end) both;
}

.vm-story-dialogue-panel.is-impact .vm-story-dialogue-copy {
    animation: vmStoryImpact .38s cubic-bezier(.2,.9,.2,1) both;
}

.vm-story-dialogue-panel.is-reveal .vm-story-dialogue-portrait-wrap {
    animation: vmStoryReveal .55s cubic-bezier(.16,.86,.18,1) both;
}

.vm-story-dialogue-panel.is-quiet .vm-story-dialogue-copy {
    filter: saturate(.72);
}

.vm-story-archive-panel {
    display: flex;
    flex-direction: column;
    padding: clamp(22px, 3vw, 42px);
}

.vm-story-archive-panel[hidden] {
    display: none !important;
}

.vm-story-archive-header {
    flex: 0 0 auto;
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 20px;
}

.vm-story-archive-header button {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(211, 239, 255, .28);
    color: #f3faff;
    background: rgba(5, 16, 29, .88);
    font: 300 2rem/1 Arial, sans-serif;
    clip-path: polygon(9% 0, 100% 0, 91% 100%, 0 100%);
}

.vm-story-archive-intro {
    flex: 0 0 auto;
    margin: 14px 0 18px;
    color: rgba(222, 240, 252, .68);
    font: 700 .82rem/1.4 Arial, sans-serif;
}

.vm-story-archive-list {
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    overflow-y: auto;
    padding: 3px 6px 18px 3px;
}

.vm-story-archive-entry {
    min-height: 78px;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    grid-template-areas: "index title" "index status";
    align-items: center;
    gap: 4px 12px;
    padding: 12px 16px;
    border: 1px solid rgba(182, 223, 249, .17);
    
    
    text-align: left;
    clip-path: polygon(2.5% 0, 100% 0, 97.5% 100%, 0 100%);
}

.vm-story-archive-entry > span {
    grid-area: index;
    color: color-mix(in srgb, var(--vm-accent) 70%, white);
    font: 800 1.5rem/1 Cinzel, serif;
}

.vm-story-archive-entry > strong {
    grid-area: title;
    font: 900 .72rem/1.2 Arial, sans-serif;
    letter-spacing: .07em;
}

.vm-story-archive-entry > small {
    grid-area: status;
    color: rgba(214, 234, 247, .5);
    font: 800 .48rem/1 Arial, sans-serif;
    letter-spacing: .15em;
}

.vm-story-archive-entry.is-unlocked:hover,
.vm-story-archive-entry.is-unlocked:focus-visible {
    transform: translateY(-2px);
    
    
}

.vm-story-archive-entry.is-completed::after {
    content: "✓";
    align-self: center;
    justify-self: end;
    grid-column: 2;
    grid-row: 1 / 3;
    color: color-mix(in srgb, var(--vm-accent) 65%, white);
    font-weight: 900;
}

.vm-story-archive-entry.is-locked {
    opacity: .32;
}

@keyframes vmStoryLineIn {
    from { opacity: .18; transform: translateX(22px) skewX(-1deg); }
    to { opacity: 1; transform: translateX(0) skewX(0); }
}

@keyframes vmStoryGlitch {
    0% { transform: translate(0); filter: none; }
    25% { transform: translate(-7px, 2px); filter: contrast(1.3); }
    50% { transform: translate(6px, -2px); filter: hue-rotate(12deg); }
    75% { transform: translate(-3px, 1px); }
    100% { transform: translate(0); filter: none; }
}

@keyframes vmStoryImpact {
    from { transform: scale(.94) rotate(-1deg); opacity: .35; }
    to { transform: scale(1) rotate(0); opacity: 1; }
}

@keyframes vmStoryReveal {
    from { opacity: 0; clip-path: polygon(48% 0, 52% 0, 54% 100%, 46% 100%); }
    to { opacity: 1; clip-path: polygon(9% 0, 100% 0, 91% 100%, 0 100%); }
}

@keyframes vmStoryVoidPulse {
    0%, 100% { transform: scale(.94); opacity: .68; }
    50% { transform: scale(1.05); opacity: 1; }
}

@media (max-width: 800px) {
    .vm-story-header-actions {
        gap: 6px;
    }

    .vm-story-archive {
        min-height: 36px;
        padding: 8px 9px 7px;
        font-size: .46rem;
        letter-spacing: .11em;
    }

    #vm-story-chapter-label {
        max-width: 23ch;
        font-size: .42rem;
        letter-spacing: .08em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .vm-story-dialogue-overlay {
        padding: 0;
    }

    .vm-story-dialogue-shell {
        width: 100%;
        height: 100dvh;
        min-height: 0;
        border: 0;
        clip-path: none;
    }

    .vm-story-dialogue-panel {
        padding: calc(14px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom));
        grid-template-rows: auto minmax(0, 1fr) auto;
    }

    .vm-story-dialogue-header {
        max-width: calc(100% - 16px);
        padding-left: 13px;
    }

    .vm-story-dialogue-header h2,
    .vm-story-archive-header h2 {
        font-size: clamp(1.35rem, 7.2vw, 2rem);
    }

    .vm-story-dialogue-stage {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(180px, 42%) minmax(0, 1fr);
        gap: 8px;
        padding-top: 8px;
    }

    .vm-story-dialogue-portrait-wrap {
        min-height: 0;
        clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
    }

    .vm-story-dialogue-portrait-wrap img {
        object-position: center 24%;
    }

    .vm-story-dialogue-copy {
        align-self: stretch;
        min-height: 0;
        padding: 19px 20px;
        clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
    }

    .vm-story-dialogue-copy p {
        max-height: none;
        font-size: .98rem;
        line-height: 1.45;
    }

    .vm-story-dialogue-choices {
        gap: 7px;
        margin-top: 12px;
    }

    .vm-story-dialogue-choices button {
        min-height: 42px;
        padding: 9px 12px;
        font-size: .58rem;
    }

    .vm-story-dialogue-footer {
        grid-template-columns: .72fr auto 1.15fr;
        gap: 7px;
        padding-top: 9px;
    }

    .vm-story-dialogue-skip,
    .vm-story-dialogue-next {
        min-height: 44px;
        padding: 10px 8px;
        font-size: .55rem;
        letter-spacing: .11em;
    }

    .vm-story-archive-panel {
        padding: calc(16px + env(safe-area-inset-top)) 12px calc(14px + env(safe-area-inset-bottom));
    }

    .vm-story-archive-header button {
        width: 42px;
        height: 42px;
    }

    .vm-story-archive-list {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .vm-story-archive-entry {
        min-height: 68px;
        padding: 10px 13px;
    }
}

@media (max-width: 390px) {
    .vm-story-dialogue-panel {
        padding-inline: 9px;
    }

    .vm-story-dialogue-stage {
        grid-template-rows: minmax(155px, 38%) minmax(0, 1fr);
    }

    .vm-story-dialogue-copy {
        padding: 16px 17px;
    }

    .vm-story-dialogue-copy p {
        font-size: .9rem;
    }

    .vm-story-dialogue-footer > span {
        font-size: .48rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vm-story-dialogue-overlay,
    .vm-story-dialogue-panel.is-line-changing .vm-story-dialogue-copy,
    .vm-story-dialogue-panel.is-line-changing .vm-story-dialogue-portrait-wrap,
    .vm-story-dialogue-panel.is-glitch .vm-story-dialogue-copy,
    .vm-story-dialogue-panel.is-impact .vm-story-dialogue-copy,
    .vm-story-dialogue-panel.is-reveal .vm-story-dialogue-portrait-wrap,
    .vm-story-dialogue-portrait-wrap[data-portrait="system"] > span {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* Fallbacks opaques pour les navigateurs qui ignorent color-mix() dans les dégradés. */


/* V1.26.1 — réinitialisation du Mode Histoire */
.vm-app.vm-menu-mode > .vm-confirm-overlay.is-visible {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

#vm-options-screen .vm-option-card--danger {
    border-color: color-mix(in srgb, #ff6f7d 38%, transparent);
}

#vm-options-screen .vm-option-card--danger:hover,
#vm-options-screen .vm-option-card--danger:focus-within {
    border-color: color-mix(in srgb, #ff6f7d 76%, transparent);
    background: linear-gradient(102deg, rgba(100, 18, 30, .44) 0 18%, rgba(16, 8, 13, .92) 18% 100%);
}

#vm-options-screen .vm-option-danger {
    min-width: 142px;
    min-height: 48px;
    padding: 0 18px;
    border: 1px solid rgba(255, 126, 141, .72);
    border-radius: 0;
    color: #fff5f5;
    background: linear-gradient(110deg, #8f1f34, #50101f);
    clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
    font-family: Cinzel, Georgia, serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    cursor: pointer;
}

#vm-options-screen .vm-option-danger:hover,
#vm-options-screen .vm-option-danger:focus-visible {
    background: linear-gradient(110deg, #b72a43, #6b1428);
}

#vm-options-screen .vm-option-danger:disabled {
    cursor: not-allowed;
    opacity: .48;
}

#vm-options-screen .vm-option-status {
    min-height: 1.35em;
    color: color-mix(in srgb, var(--vm-accent-pale) 72%, #d7dae2);
}

#vm-options-screen .vm-option-status:empty {
    display: none;
}

#vm-options-screen .vm-option-status.is-error {
    color: #ff9ca7;
}

@media (max-width: 720px) {
    #vm-options-screen .vm-option-danger {
        grid-column: 2;
        width: 100%;
        min-width: 0;
        min-height: 43px;
    }
}

/* V1.27.0 — emprise du Joker et affrontement final en équipe */
.vm-story-gate-scene.is-corrupted .vm-story-gate-portrait img,
.vm-story-gate-node.is-corrupted .vm-story-gate-node-avatar img,
.vm-story-detail.is-corrupted .vm-story-detail-portrait img,
.vm-story-dialogue-portrait-wrap.is-corrupted img {
    filter: grayscale(1) contrast(1.16) brightness(.7) saturate(.12);
}

.vm-story-gate-scene.is-corrupted .vm-story-gate-portal::after,
.vm-story-dialogue-portrait-wrap.is-corrupted::before {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(106deg, transparent 0 13px, rgba(228, 241, 250, .06) 13px 14px, transparent 14px 31px),
        linear-gradient(155deg, rgba(2, 7, 14, .05), rgba(2, 7, 14, .58));
    mix-blend-mode: screen;
}

.vm-story-gate-scene.is-liberated .vm-story-gate-portrait img,
.vm-story-gate-node.is-liberated .vm-story-gate-node-avatar img,
.vm-story-detail.is-liberated .vm-story-detail-portrait img,
.vm-story-dialogue-portrait-wrap.is-liberated img {
    filter: saturate(1.06) contrast(1.04) brightness(1.02);
}

.vm-story-gate-node.is-corrupted:not(.is-selected) {
    opacity: .48;
}

.vm-story-gate-node.is-corrupted::after {
    content: "LIÉ";
    position: absolute;
    z-index: 5;
    top: 5px;
    right: 4px;
    padding: 4px 5px;
    color: rgba(244, 249, 252, .9);
    background: rgba(4, 8, 13, .82);
    font: 900 .38rem/1 Arial, sans-serif;
    letter-spacing: .1em;
}

.vm-story-gate-node.is-liberated::after {
    content: "✓";
}

.vm-story-detail.is-corrupted .vm-story-detail-copy > strong,
.vm-story-detail.is-corrupted .vm-story-detail-copy blockquote {
    color: rgba(225, 233, 240, .68);
}

.vm-story-ally-panel {
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: clamp(22px, 3vw, 42px);
    color: #f3f9fd;
}

.vm-story-ally-panel[hidden] {
    display: none !important;
}

.vm-story-ally-header {
    flex: 0 0 auto;
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 20px;
}

.vm-story-ally-header p {
    margin: 0;
    color: color-mix(in srgb, var(--vm-accent) 68%, white);
    font: 900 .62rem/1 Arial, sans-serif;
    letter-spacing: .26em;
}

.vm-story-ally-header h2 {
    margin: 7px 0 0;
    font: 800 clamp(1.7rem, 4vw, 3.25rem)/.95 Cinzel, serif;
    letter-spacing: .035em;
}

.vm-story-ally-header > strong {
    min-width: 82px;
    padding: 13px 14px;
    border: 1px solid rgba(198, 232, 252, .28);
    color: #06111b;
    background: color-mix(in srgb, var(--vm-accent) 72%, #d9f2ff);
    text-align: center;
    font: 900 .72rem/1 Arial, sans-serif;
    letter-spacing: .14em;
    clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
}

.vm-story-ally-intro {
    flex: 0 0 auto;
    margin: 15px 0 18px;
    max-width: 760px;
    color: rgba(222, 240, 252, .72);
    font: 700 .86rem/1.45 Arial, sans-serif;
}

.vm-story-ally-list {
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    overflow-y: auto;
    padding: 4px 6px 14px 3px;
}

.vm-story-ally-entry {
    position: relative;
    min-width: 0;
    min-height: 178px;
    padding: 0;
    border: 1px solid rgba(182, 223, 249, .18);
    color: #eff9ff;
    background: #071522;
    overflow: hidden;
    text-align: left;
    clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%);
    transition: transform .18s ease, border-color .18s ease, filter .18s ease;
}

.vm-story-ally-entry:hover,
.vm-story-ally-entry:focus-visible {
    transform: translateY(-3px);
    border-color: rgba(178, 226, 255, .7);
}

.vm-story-ally-avatar,
.vm-story-ally-avatar img,
.vm-story-ally-avatar b {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.vm-story-ally-avatar img {
    object-fit: cover;
    object-position: center 25%;
}

.vm-story-ally-avatar b {
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, rgba(32, 75, 108, .44), #06101c);
    font: 800 1.5rem/1 Cinzel, serif;
}

.vm-story-ally-entry > span:last-child {
    position: absolute;
    z-index: 2;
    inset: auto 0 0;
    display: grid;
    gap: 3px;
    padding: 28px 11px 11px;
    background: linear-gradient(180deg, transparent, rgba(2, 8, 15, .96) 43%);
}

.vm-story-ally-entry small,
.vm-story-ally-entry em {
    color: rgba(222, 239, 250, .62);
    font: 900 .46rem/1 Arial, sans-serif;
    letter-spacing: .12em;
    font-style: normal;
}

.vm-story-ally-entry strong {
    overflow: hidden;
    font: 900 .72rem/1.1 Arial, sans-serif;
    letter-spacing: .07em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vm-story-ally-entry.is-selected {
    border-color: rgba(230, 248, 255, .92);
    box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--vm-accent) 48%, transparent);
}

.vm-story-ally-entry.is-selected::after {
    content: "✓";
    position: absolute;
    z-index: 4;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #06111b;
    background: #edf9ff;
    font-weight: 950;
}

.vm-story-ally-entry.is-selected > span:last-child {
    color: #06111b;
    background: rgba(239, 249, 255, .96);
}

.vm-story-ally-entry.is-selected small,
.vm-story-ally-entry.is-selected em {
    color: #53687a;
}

.vm-story-ally-actions {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(130px, .72fr) minmax(230px, 1.28fr);
    gap: 12px;
    padding-top: 16px;
}

.vm-app.is-story-final-battle .vm-opponents {
    width: min(100%, 1120px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: center;
    gap: clamp(8px, 1.5vw, 18px);
}

.vm-app.is-story-final-battle .vm-opponent[data-seat] {
    display: grid !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    overflow: hidden;
}

.vm-app.is-story-final-battle .vm-opponent.is-story-ally {
    border-color: color-mix(in srgb, var(--vm-accent) 56%, rgba(255,255,255,.18));
    background: linear-gradient(145deg, color-mix(in srgb, var(--vm-accent-dark) 76%, #07111d), #050c15);
}

.vm-app.is-story-final-battle .vm-opponent.is-story-boss {
    border-color: rgba(238, 247, 253, .62);
    box-shadow: 0 0 0 2px rgba(236, 247, 253, .08), 0 18px 34px rgba(0,0,0,.32);
}

.vm-app.is-story-final-battle .vm-opponent.is-story-boss .vm-opponent-portrait {
    filter: contrast(1.14) saturate(.72) brightness(.82);
}

.vm-app.is-story-final-battle .vm-opponent-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vm-match-intro.is-story-intro.is-story-final-intro .vm-intro-portrait.is-left,
.vm-match-intro.is-story-intro.is-story-final-intro .vm-intro-portrait.is-center,
.vm-match-intro.is-story-intro.is-story-final-intro .vm-intro-portrait.is-right {
    display: block !important;
}

.vm-match-intro.is-story-intro.is-story-final-intro .vm-intro-portrait.is-center {
    left: 50%;
    transform: translateX(-50%) scale(1.12);
}

.vm-match-intro.is-story-intro.is-story-final-intro .vm-intro-player-seal {
    display: none !important;
}

@media (max-width: 820px) {
    .vm-story-ally-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .vm-app.is-story-final-battle .vm-opponents {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        padding-inline: 5px;
    }

    .vm-app.is-story-final-battle .vm-opponent {
        min-width: 0;
        padding-inline: 5px;
    }

    .vm-app.is-story-final-battle .vm-opponent-portrait-wrap {
        width: clamp(48px, 15vw, 82px);
        height: clamp(48px, 15vw, 82px);
    }

    .vm-app.is-story-final-battle .vm-opponent-name {
        font-size: clamp(.47rem, 2.1vw, .65rem);
        letter-spacing: .035em;
    }

    .vm-app.is-story-final-battle .vm-opponent-count {
        font-size: clamp(.38rem, 1.7vw, .52rem);
        letter-spacing: 0;
    }
}

@media (max-width: 560px) {
    .vm-story-ally-panel {
        padding: calc(15px + env(safe-area-inset-top)) 10px calc(12px + env(safe-area-inset-bottom));
    }

    .vm-story-ally-header {
        gap: 9px;
    }

    .vm-story-ally-header h2 {
        font-size: clamp(1.35rem, 7vw, 1.9rem);
    }

    .vm-story-ally-header > strong {
        min-width: 66px;
        padding: 10px 8px;
        font-size: .6rem;
    }

    .vm-story-ally-intro {
        margin: 10px 0 12px;
        font-size: .76rem;
    }

    .vm-story-ally-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    .vm-story-ally-entry {
        min-height: 128px;
    }

    .vm-story-ally-entry > span:last-child {
        padding: 24px 9px 8px;
    }

    .vm-story-ally-actions {
        grid-template-columns: .72fr 1.28fr;
        gap: 7px;
        padding-top: 9px;
    }

    .vm-story-ally-actions button {
        min-width: 0;
        min-height: 44px;
        padding-inline: 7px;
        font-size: .52rem;
        letter-spacing: .08em;
    }
}

@media (max-width: 390px) {
    .vm-story-ally-entry {
        min-height: 112px;
    }

    .vm-app.is-story-final-battle .vm-opponent-copy {
        min-width: 0;
    }

    .vm-app.is-story-final-battle .vm-opponent-name {
        max-width: 100%;
        font-size: .42rem;
    }

    .vm-app.is-story-final-battle .vm-opponent-count {
        font-size: .34rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vm-story-ally-entry,
    .vm-story-gate-scene.is-corrupted .vm-story-gate-portal::after,
    .vm-story-dialogue-portrait-wrap.is-corrupted::before {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* V1.27.1 — le protagoniste n’a pas de portrait en Mode Histoire */
.vm-story-dialogue-panel.is-player-line .vm-story-dialogue-stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: center;
}

.vm-story-dialogue-panel.is-player-line .vm-story-dialogue-portrait-wrap {
    display: none;
}

.vm-story-dialogue-panel.is-player-line .vm-story-dialogue-copy {
    width: min(100%, 900px);
    justify-self: center;
    align-self: center;
}

@media (max-width: 800px) {
    .vm-story-dialogue-panel.is-player-line .vm-story-dialogue-stage {
        grid-template-rows: minmax(0, 1fr);
    }

    .vm-story-dialogue-panel.is-player-line .vm-story-dialogue-copy {
        width: 100%;
        min-height: 0;
        align-self: center;
    }
}

/* V1.28.0 — arrivée animée des cartes de réserve en Mode Histoire */
.vm-story-draw-flight-layer {
    position: fixed;
    inset: 0;
    z-index: 88;
    overflow: hidden;
    pointer-events: none;
    perspective: 1200px;
}

.vm-story-reserve-stack {
    position: fixed;
    width: 62px;
    height: 86px;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(7deg) scale(.78);
    animation: vm-story-reserve-stack-in .22s cubic-bezier(.18,.82,.18,1) forwards;
}

.vm-story-reserve-stack::before,
.vm-story-reserve-stack::after,
.vm-story-reserve-stack > span {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255,255,255,.62);
    border-radius: 6px;
    background:
        linear-gradient(145deg, transparent 0 42%, rgba(255,255,255,.12) 43% 44%, transparent 45%),
        radial-gradient(circle at 50% 46%, var(--vm-accent-light) 0 7%, transparent 8%),
        linear-gradient(150deg, color-mix(in srgb, var(--vm-accent-dark) 72%, #040711), #050811 66%);
    box-shadow: 0 14px 28px rgba(0,0,0,.46), inset 0 0 0 3px rgba(255,255,255,.045);
    clip-path: polygon(7% 0, 100% 5%, 94% 100%, 0 92%);
}

.vm-story-reserve-stack::before { transform: translate(-7px, 5px) rotate(-7deg); opacity: .42; }
.vm-story-reserve-stack::after { transform: translate(-3px, 2px) rotate(-3deg); opacity: .7; }
.vm-story-reserve-stack > span { z-index: 1; }

.vm-story-reserve-stack strong {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: calc(100% + 8px);
    padding: 4px 8px;
    color: #fff;
    background: color-mix(in srgb, var(--vm-accent-dark) 88%, #02040a);
    border: 1px solid rgba(255,255,255,.38);
    clip-path: polygon(7% 0, 100% 0, 94% 100%, 0 86%);
    font: 900 .48rem/1 Cinzel, Georgia, serif;
    letter-spacing: .14em;
    white-space: nowrap;
    transform: translateX(-50%) rotate(-3deg);
}

.vm-story-reserve-stack.is-leaving {
    animation: vm-story-reserve-stack-out .16s ease-in forwards;
}

.vm-story-draw-flight {
    position: fixed;
    display: block;
    transform-origin: center;
    will-change: transform, opacity;
}

.vm-story-draw-flight::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 50%;
    width: 170%;
    height: 24%;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--vm-accent-light) 72%, white), transparent);
    filter: blur(8px);
    opacity: .5;
    transform: translate(-50%, -50%) rotate(-14deg);
}

.vm-story-draw-flight-inner {
    position: absolute;
    inset: 0;
    display: block;
    transform-style: preserve-3d;
    will-change: transform;
}

.vm-story-draw-flight-back,
.vm-story-draw-flight-front {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(235,242,255,.62);
    border-radius: var(--vm-card-radius);
    box-shadow: 0 18px 36px rgba(0,0,0,.56), 0 0 24px color-mix(in srgb, var(--vm-accent-light) 24%, transparent);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.vm-story-draw-flight-back {
    color: #fff;
    background:
        linear-gradient(145deg, transparent 0 43%, rgba(255,255,255,.11) 44% 45%, transparent 46%),
        radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--vm-accent-light) 72%, white) 0 7%, transparent 8%),
        linear-gradient(150deg, color-mix(in srgb, var(--vm-accent-dark) 74%, #03050c), #03050b 70%);
    clip-path: polygon(5% 0, 100% 3%, 96% 100%, 0 95%);
    font-family: Cinzel, Georgia, serif;
}

.vm-story-draw-flight-back::before,
.vm-story-draw-flight-back::after {
    content: "";
    position: absolute;
    inset: 8%;
    border: 1px solid rgba(255,255,255,.14);
    transform: rotate(5deg);
}

.vm-story-draw-flight-back::after {
    inset: 15%;
    transform: rotate(-7deg);
}

.vm-story-draw-flight-back span,
.vm-story-draw-flight-back small,
.vm-story-draw-flight-back i {
    position: relative;
    z-index: 2;
    grid-column: 1;
    grid-row: 1;
    font-style: normal;
    text-shadow: 0 4px 12px rgba(0,0,0,.6);
}

.vm-story-draw-flight-back span {
    align-self: start;
    margin-top: 25%;
    font-size: .58em;
    font-weight: 900;
    letter-spacing: .12em;
}

.vm-story-draw-flight-back i {
    font-size: 2.1em;
    transform: rotate(45deg);
}

.vm-story-draw-flight-back small {
    align-self: end;
    margin-bottom: 23%;
    font-size: .44em;
    font-weight: 900;
    letter-spacing: .14em;
}

.vm-story-draw-flight-front {
    background: #090b11;
    transform: rotateY(180deg);
}

.vm-story-draw-flight-front .vm-fx-card-face,
.vm-story-draw-flight-front .vm-card-image,
.vm-story-draw-flight-front .vm-card-fallback {
    width: 100%;
    height: 100%;
}

.vm-app.is-story-match .vm-card-button.is-story-draw-pending {
    opacity: 0 !important;
    pointer-events: none;
    transform: translateY(-12px) scale(.88);
}

.vm-app.is-story-match .vm-card-button.is-story-draw-arrived {
    animation: vm-story-draw-card-arrived .48s cubic-bezier(.16,.86,.18,1) both;
}

@keyframes vm-story-reserve-stack-in {
    0% { opacity: 0; transform: translate(-50%, -38%) rotate(12deg) scale(.62); filter: blur(5px); }
    100% { opacity: 1; transform: translate(-50%, -50%) rotate(7deg) scale(.78); filter: blur(0); }
}

@keyframes vm-story-reserve-stack-out {
    to { opacity: 0; transform: translate(-50%, -62%) rotate(3deg) scale(.68); }
}

@keyframes vm-story-draw-card-arrived {
    0% { opacity: .25; transform: translateY(-10px) scale(.9); filter: brightness(1.7); }
    42% { opacity: 1; transform: translateY(-7px) scale(1.06); filter: brightness(1.35); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
}

@media (max-width: 720px) {
    .vm-story-reserve-stack {
        width: 48px;
        height: 70px;
    }

    .vm-story-reserve-stack strong {
        top: calc(100% + 5px);
        padding: 3px 6px;
        font-size: .39rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vm-app.is-story-match .vm-card-button.is-story-draw-pending {
        opacity: 1 !important;
        transform: none;
    }
}

/* =========================================================
   V1.29.0 — ASCENSION ADAPTÉE AUX THÈMES
   Les surfaces restent sombres et neutres ; toutes les
   lumières, lignes et profondeurs suivent le thème actif.
   ========================================================= */
.vm-story-screen,
.vm-story-dialogue-overlay,
.vm-app.is-story-match {
    --vm-accent: var(--vm-accent-main);
}

.vm-story-screen,
.vm-story-dialogue-overlay {
    --vm-story-deep: color-mix(in srgb, var(--vm-accent-deep) 46%, #01040a);
    --vm-story-canvas: color-mix(in srgb, var(--vm-accent-deep) 27%, #030912);
    --vm-story-surface: color-mix(in srgb, var(--vm-accent-dark) 19%, #07101b);
    --vm-story-surface-raised: color-mix(in srgb, var(--vm-accent-dark) 32%, #0b1622);
    
    --vm-story-line: color-mix(in srgb, var(--vm-accent-light) 27%, transparent);
    --vm-story-line-strong: color-mix(in srgb, var(--vm-accent-light) 58%, transparent);
    --vm-story-glow: color-mix(in srgb, var(--vm-accent-main) 25%, transparent);
    --vm-story-paper: color-mix(in srgb, var(--vm-accent-pale) 10%, #f6f6f2);
    
    --vm-story-ink: color-mix(in srgb, var(--vm-accent-deep) 64%, #090b0f);
    --vm-story-muted: rgba(238, 240, 244, .61);
}

.vm-story-screen {
    background:
        linear-gradient(132deg, color-mix(in srgb, var(--vm-story-deep) 94%, rgba(0,0,0,.96)), color-mix(in srgb, var(--vm-story-canvas) 88%, rgba(0,0,0,.9))),
        url("background.webp") center/cover fixed;
}

.vm-story-panel {
    border-color: var(--vm-story-line-strong);
    background: linear-gradient(145deg, var(--vm-story-canvas), color-mix(in srgb, var(--vm-story-deep) 86%, #06080d));
}

.vm-story-panel::before {
    border-color: var(--vm-story-line);
    background: var(--vm-story-glow);
}

.vm-story-panel::after {
    border-color: color-mix(in srgb, var(--vm-accent-main) 13%, transparent);
}

.vm-story-header {
    border-bottom-color: color-mix(in srgb, var(--vm-accent-light) 14%, transparent);
    background: linear-gradient(104deg, color-mix(in srgb, var(--vm-accent-dark) 42%, transparent), transparent 59%);
}

.vm-story-header h2 {
    text-shadow: 0 0 26px var(--vm-story-glow);
}

.vm-story-rank-sequence,
.vm-story-map-head > div:first-child span,
.vm-story-stats span,
#vm-story-chapter-label {
    color: var(--vm-story-muted);
}

.vm-story-map-shell {
    border-right-color: color-mix(in srgb, var(--vm-accent-light) 12%, transparent);
}

.vm-story-map-head {
    border-bottom-color: color-mix(in srgb, var(--vm-accent-light) 13%, transparent);
}

.vm-story-route-viewport {
    border-color: var(--vm-story-line);
    background:
        linear-gradient(122deg, transparent 0 17%, color-mix(in srgb, var(--vm-accent-light) 5%, transparent) 17% 18%, transparent 18% 74%, color-mix(in srgb, var(--vm-accent-main) 8%, transparent) 74% 75%, transparent 75%),
        radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--vm-accent-main) 23%, transparent), transparent 44%),
        linear-gradient(150deg, var(--vm-story-surface), var(--vm-story-deep));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vm-accent-light) 4%, transparent), 0 28px 74px rgba(0,0,0,.36);
}

.vm-story-route.vm-story-route--gate::before,
.vm-story-route.vm-story-route--gate::after {
    background: var(--vm-story-paper);
}

.vm-story-gate-scene::before {
    background:
        linear-gradient(118deg, transparent 0 23%, color-mix(in srgb, var(--vm-accent-bright) 10%, transparent) 23% 24%, transparent 24% 69%, color-mix(in srgb, var(--vm-accent-light) 5%, transparent) 69% 70%, transparent 70%),
        radial-gradient(circle at 50% 46%, transparent 0 46%, rgba(0,0,0,.22) 78%);
}

.vm-story-gate-scene::after {
    background: color-mix(in srgb, var(--vm-accent-pale) 14%, #f3f4f1);
}

.vm-story-gate-neighbour {
    border-color: var(--vm-story-line);
    color: color-mix(in srgb, var(--vm-accent-pale) 18%, #f5f5f2);
    background: linear-gradient(150deg, var(--vm-story-surface-raised), var(--vm-story-deep));
}

.vm-story-gate-neighbour:not(:disabled):hover,
.vm-story-gate-neighbour:not(:disabled):focus-visible {
    border-color: var(--vm-story-line-strong);
    background: linear-gradient(150deg, color-mix(in srgb, var(--vm-accent-main) 42%, var(--vm-story-surface-raised)), var(--vm-story-deep));
}

.vm-story-gate-frame {
    background: linear-gradient(135deg,
        var(--vm-accent-pale) 0 1.1%,
        color-mix(in srgb, var(--vm-accent-bright) 62%, #687078) 1.1% 2.3%,
        color-mix(in srgb, var(--vm-accent-dark) 58%, #17202a) 2.3% 6%,
        var(--vm-story-deep) 6% 94%,
        color-mix(in srgb, var(--vm-accent-main) 52%, #4b535b) 94% 96%,
        var(--vm-story-deep) 96%);
}

.vm-story-gate-portal {
    border-color: var(--vm-story-line);
    background: var(--vm-story-deep);
}

.vm-story-gate-portrait b {
    background: linear-gradient(145deg, color-mix(in srgb, var(--vm-accent-main) 28%, var(--vm-story-surface-raised)), var(--vm-story-deep));
}

.vm-story-gate-veil {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--vm-story-deep) 88%, transparent), transparent 22% 78%, color-mix(in srgb, var(--vm-story-deep) 90%, transparent)),
        linear-gradient(0deg, color-mix(in srgb, var(--vm-story-deep) 92%, transparent), transparent 48%);
}

.vm-story-gate-leaf {
    border-color: var(--vm-story-line);
    background:
        linear-gradient(145deg, var(--vm-story-surface-raised), var(--vm-story-deep)),
        repeating-linear-gradient(128deg, color-mix(in srgb, var(--vm-accent-light) 5%, transparent) 0 2px, transparent 2px 23px);
    box-shadow: inset 0 0 50px color-mix(in srgb, var(--vm-accent-main) 8%, transparent);
}

.vm-story-gate-flare {
    background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--vm-accent-light) 55%, transparent), color-mix(in srgb, var(--vm-accent-main) 14%, transparent) 28%, transparent 62%);
}

.vm-story-gate-rank,
.vm-story-gate-scene.is-completed .vm-story-gate-status {
    color: var(--vm-story-ink);
    background: var(--vm-story-paper);
}

.vm-story-gate-status {
    color: color-mix(in srgb, var(--vm-accent-pale) 18%, #f4f4f1);
    background: color-mix(in srgb, var(--vm-accent-dark) 78%, var(--vm-story-deep));
}

.vm-story-gate-plate {
    color: var(--vm-story-ink);
    background: color-mix(in srgb, var(--vm-accent-pale) 8%, rgba(246,246,242,.98));
}

.vm-story-gate-plate small,
.vm-story-gate-node.is-selected .vm-story-gate-node-copy small {
    color: color-mix(in srgb, var(--vm-accent-dark) 35%, #64686d);
}

.vm-story-gate-plate i {
    color: var(--vm-story-ink);
    background: linear-gradient(110deg, var(--vm-accent-light), var(--vm-accent-main));
}

.vm-story-gate:focus-visible {
    outline-color: color-mix(in srgb, var(--vm-accent-light) 82%, white);
}

.vm-story-gate-path {
    border-color: var(--vm-story-line);
    border-top-color: var(--vm-story-line-strong);
    background: linear-gradient(180deg, var(--vm-story-surface-raised), var(--vm-story-deep));
    scrollbar-color: color-mix(in srgb, var(--vm-accent-bright) 48%, transparent) transparent;
}

.vm-story-gate-path::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--vm-accent-bright) 48%, transparent);
}

.vm-story-gate-group:not(:last-child)::after {
    background: color-mix(in srgb, var(--vm-accent-light) 17%, transparent);
}

.vm-story-gate-group-label {
    color: rgba(239,240,242,.48);
}

.vm-story-gate-group.is-current .vm-story-gate-group-label {
    color: color-mix(in srgb, var(--vm-accent-light) 72%, white);
}

.vm-story-gate-node,
.vm-story-gate-node.is-selected {
    border-color: var(--vm-story-line);
    background: var(--vm-story-deep);
}

.vm-story-gate-node:not(:disabled):hover,
.vm-story-gate-node:not(:disabled):focus-visible,
.vm-story-gate-node.is-selected {
    border-color: var(--vm-story-line-strong);
}

.vm-story-gate-node.is-selected {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--vm-accent-main) 28%, transparent), 0 14px 24px rgba(0,0,0,.34);
}

.vm-story-gate-node-copy {
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--vm-story-deep) 96%, transparent));
}

.vm-story-gate-node.is-selected .vm-story-gate-node-copy,
.vm-story-gate-node.is-completed::after {
    color: var(--vm-story-ink);
    background: var(--vm-story-paper);
}

.vm-story-detail {
    background:
        linear-gradient(165deg, color-mix(in srgb, var(--vm-accent-dark) 20%, transparent), transparent 46%),
        color-mix(in srgb, var(--vm-story-canvas) 74%, transparent);
}

.vm-story-format span,
.vm-story-detail-copy blockquote {
    border-color: color-mix(in srgb, var(--vm-accent-light) 14%, transparent);
    color: rgba(239,240,243,.66);
    background: color-mix(in srgb, var(--vm-accent-light) 4%, transparent);
}

.vm-story-archive {
    border-color: var(--vm-story-line);
    color: color-mix(in srgb, var(--vm-accent-pale) 18%, #f4f4f1);
    background: linear-gradient(145deg, var(--vm-story-surface-raised), var(--vm-story-deep));
}

.vm-story-archive:hover,
.vm-story-archive:focus-visible {
    border-color: var(--vm-story-line-strong);
    background: linear-gradient(145deg, color-mix(in srgb, var(--vm-accent-main) 48%, var(--vm-story-surface-raised)), var(--vm-story-deep));
}

.vm-story-dialogue-overlay {
    background-color: var(--vm-story-deep);
    background:
        radial-gradient(circle at 70% 22%, color-mix(in srgb, var(--vm-accent-main) 30%, transparent), transparent 36%),
        linear-gradient(135deg, var(--vm-story-deep), var(--vm-story-canvas));
}

.vm-story-dialogue-overlay::before {
    background: var(--vm-story-paper);
}

.vm-story-dialogue-overlay::after,
.vm-story-dialogue-noise {
    background-color: transparent;
}

.vm-story-dialogue-overlay::after {
    background:
        linear-gradient(112deg, transparent 0 19%, color-mix(in srgb, var(--vm-accent-bright) 9%, transparent) 19% 20%, transparent 20% 67%, color-mix(in srgb, var(--vm-accent-light) 5%, transparent) 67% 68%, transparent 68%),
        repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.015) 3px 4px);
}

.vm-story-dialogue-noise {
    background:
        linear-gradient(24deg, transparent 0 47%, color-mix(in srgb, var(--vm-accent-bright) 10%, transparent) 48%, transparent 49%),
        linear-gradient(156deg, transparent 0 61%, color-mix(in srgb, var(--vm-accent-light) 4%, transparent) 62%, transparent 63%);
}

.vm-story-dialogue-shell {
    border-color: var(--vm-story-line);
    background-color: var(--vm-story-canvas);
    background:
        radial-gradient(circle at 26% 35%, color-mix(in srgb, var(--vm-accent-main) 25%, transparent), transparent 38%),
        linear-gradient(147deg, var(--vm-story-surface), var(--vm-story-deep));
}

.vm-story-dialogue-shell::before,
.vm-story-dialogue-header::before,
.vm-story-dialogue-copy::before {
    background: linear-gradient(90deg, var(--vm-accent-bright), var(--vm-accent-main));
}

.vm-story-dialogue-header span,
.vm-story-archive-header p {
    color: color-mix(in srgb, var(--vm-accent-light) 74%, white);
}

.vm-story-dialogue-portrait-wrap,
.vm-story-dialogue-portrait-wrap[data-portrait="system"] {
    background-color: var(--vm-story-deep);
    background: linear-gradient(160deg, color-mix(in srgb, var(--vm-accent-main) 30%, var(--vm-story-surface-raised)), var(--vm-story-deep) 78%);
}

.vm-story-dialogue-portrait-wrap[data-portrait="system"] {
    background:
        radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--vm-accent-main) 52%, transparent), transparent 31%),
        repeating-radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--vm-accent-light) 15%, transparent) 0 1px, transparent 1px 24px),
        var(--vm-story-deep);
}

.vm-story-dialogue-copy {
    color: var(--vm-story-ink);
    background: color-mix(in srgb, var(--vm-accent-pale) 7%, rgba(244,244,241,.98));
}

.vm-story-dialogue-copy p,
.vm-story-dialogue-choices button {
    color: var(--vm-story-ink);
}

.vm-story-dialogue-choices button {
    border-color: color-mix(in srgb, var(--vm-accent-dark) 24%, transparent);
    background: color-mix(in srgb, var(--vm-accent-light) 20%, rgba(226,226,221,.82));
}

.vm-story-dialogue-choices button:hover,
.vm-story-dialogue-choices button:focus-visible {
    color: #f7f7f4;
    background: color-mix(in srgb, var(--vm-accent-dark) 82%, var(--vm-story-deep));
}

.vm-story-dialogue-footer > span,
.vm-story-dialogue-skip,
.vm-story-archive-intro,
.vm-story-archive-entry > small {
    color: rgba(238,240,243,.66);
}

.vm-story-dialogue-skip,
.vm-story-archive-header button {
    border-color: var(--vm-story-line);
    background: var(--vm-story-surface);
}

.vm-story-dialogue-next {
    color: var(--vm-story-ink);
    background-color: var(--vm-accent-light);
    background: linear-gradient(110deg, var(--vm-accent-light), var(--vm-accent-main));
}

.vm-story-archive-entry {
    border-color: var(--vm-story-line);
    color: rgba(244,245,246,.91);
    background-color: var(--vm-story-surface);
    background: linear-gradient(145deg, var(--vm-story-surface-raised), var(--vm-story-deep));
}

.vm-story-archive-entry > span,
.vm-story-archive-entry.is-completed::after {
    color: color-mix(in srgb, var(--vm-accent-bright) 70%, white);
}

.vm-story-archive-entry.is-unlocked:hover,
.vm-story-archive-entry.is-unlocked:focus-visible {
    border-color: var(--vm-story-line-strong);
    background: linear-gradient(145deg, color-mix(in srgb, var(--vm-accent-main) 44%, var(--vm-story-surface-raised)), var(--vm-story-deep));
}

@keyframes vmStoryGateFlash {
    0%,38% { opacity: .35; }
    100% { opacity: 1; background: color-mix(in srgb, var(--vm-accent-pale) 18%, #f4f4f1); }
}

@keyframes vmStoryCompactFlare {
    0%, 34% { opacity: .24; }
    100% { opacity: 1; background: color-mix(in srgb, var(--vm-accent-pale) 18%, #f4f4f1); }
}

/* V1.31.0 — Vesper, guide de l’Ascension */
.vm-story-dialogue-portrait-wrap[data-portrait="vesper"] {
    background:
        linear-gradient(155deg, color-mix(in srgb, var(--vm-accent-main) 26%, var(--vm-story-surface-raised)), var(--vm-story-deep) 74%);
}

.vm-story-dialogue-portrait-wrap[data-portrait="vesper"] img {
    object-fit: contain;
    object-position: center bottom;
    filter: saturate(.96) contrast(1.04);
    transform: scale(1.015);
    transform-origin: center bottom;
}

.vm-story-dialogue-portrait-wrap[data-portrait="vesper"]::after {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--vm-story-deep) 70%, transparent), transparent 28% 82%, color-mix(in srgb, var(--vm-story-deep) 35%, transparent)),
        linear-gradient(0deg, color-mix(in srgb, var(--vm-story-deep) 76%, transparent), transparent 48%);
}

/* V1.32.0 — affordance desktop des éléments interactifs */
@media (hover: hover) and (pointer: fine) {
    a[href],
    button:not(:disabled),
    [role="button"]:not([aria-disabled="true"]),
    summary,
    label[for],
    input[type="checkbox"],
    input[type="radio"],
    input[type="range"],
    select {
        cursor: pointer;
    }

    button:disabled,
    [role="button"][aria-disabled="true"],
    [aria-disabled="true"] {
        cursor: not-allowed;
    }
}


/* V1.32.1 — stabilité des cadres pendant les dialogues */
/* Les transitions animent désormais le contenu, jamais la géométrie des panneaux. */
.vm-story-dialogue-panel.is-line-changing .vm-story-dialogue-copy,
.vm-story-dialogue-panel.is-line-changing .vm-story-dialogue-portrait-wrap,
.vm-story-dialogue-panel.is-glitch .vm-story-dialogue-copy,
.vm-story-dialogue-panel.is-impact .vm-story-dialogue-copy,
.vm-story-dialogue-panel.is-reveal .vm-story-dialogue-portrait-wrap {
    animation: none !important;
    transform: none;
}

.vm-story-dialogue-panel.is-line-changing .vm-story-dialogue-copy > *,
.vm-story-dialogue-panel.is-line-changing .vm-story-dialogue-portrait-wrap img,
.vm-story-dialogue-panel.is-line-changing .vm-story-dialogue-portrait-wrap > span {
    animation: vmStoryDialogueContentFade .2s ease both;
}

.vm-story-dialogue-panel.is-glitch .vm-story-dialogue-copy > * {
    animation: vmStoryDialogueGlitchContent .24s steps(2, end) both;
}

.vm-story-dialogue-panel.is-impact .vm-story-dialogue-copy > * {
    animation: vmStoryDialogueImpactContent .24s ease both;
}

.vm-story-dialogue-panel.is-reveal .vm-story-dialogue-portrait-wrap img,
.vm-story-dialogue-panel.is-reveal .vm-story-dialogue-portrait-wrap > span {
    animation: vmStoryDialogueRevealContent .3s ease both;
}

/* Une hauteur réservée absorbe les choix sans redimensionner le cadre sur desktop. */
.vm-story-dialogue-copy {
    height: clamp(238px, 36vh, 320px);
    max-height: 100%;
    overflow: hidden;
}

/* Le portrait de l'interlocuteur reste visible pendant les choix et les réponses du joueur. */
.vm-story-dialogue-panel.is-player-line .vm-story-dialogue-stage {
    grid-template-columns: minmax(260px, .82fr) minmax(360px, 1.18fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: end;
}

.vm-story-dialogue-panel.is-player-line .vm-story-dialogue-portrait-wrap {
    display: block;
}

.vm-story-dialogue-panel.is-player-line .vm-story-dialogue-copy {
    width: auto;
    justify-self: stretch;
    align-self: end;
}

@keyframes vmStoryDialogueContentFade {
    from { opacity: .28; }
    to { opacity: 1; }
}

@keyframes vmStoryDialogueGlitchContent {
    0% { opacity: .55; filter: contrast(1.22) saturate(.85); }
    50% { opacity: .86; filter: contrast(1.08) saturate(1.1); }
    100% { opacity: 1; filter: none; }
}

@keyframes vmStoryDialogueImpactContent {
    from { opacity: .35; filter: brightness(1.3); }
    to { opacity: 1; filter: none; }
}

@keyframes vmStoryDialogueRevealContent {
    from { opacity: 0; filter: saturate(.55); }
    to { opacity: 1; filter: none; }
}

@media (max-width: 800px) {
    .vm-story-dialogue-shell {
        height: 100vh;
        height: 100svh;
        max-height: 100svh;
    }

    .vm-story-dialogue-copy {
        height: auto;
        max-height: none;
    }

    .vm-story-dialogue-panel.is-player-line .vm-story-dialogue-stage {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(180px, 42%) minmax(0, 1fr);
        align-items: end;
    }

    .vm-story-dialogue-panel.is-player-line .vm-story-dialogue-copy {
        width: auto;
        justify-self: stretch;
        align-self: stretch;
    }
}

@media (max-width: 390px) {
    .vm-story-dialogue-panel.is-player-line .vm-story-dialogue-stage {
        grid-template-rows: minmax(155px, 38%) minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .vm-story-dialogue-panel.is-line-changing .vm-story-dialogue-copy > *,
    .vm-story-dialogue-panel.is-line-changing .vm-story-dialogue-portrait-wrap img,
    .vm-story-dialogue-panel.is-line-changing .vm-story-dialogue-portrait-wrap > span,
    .vm-story-dialogue-panel.is-glitch .vm-story-dialogue-copy > *,
    .vm-story-dialogue-panel.is-impact .vm-story-dialogue-copy > *,
    .vm-story-dialogue-panel.is-reveal .vm-story-dialogue-portrait-wrap img,
    .vm-story-dialogue-panel.is-reveal .vm-story-dialogue-portrait-wrap > span {
        animation: none !important;
    }
}

/* V1.32.2 — défilement de la sélection des alliés */
/* Le panneau occupe la hauteur disponible ; seule la grille des portraits défile. */
.vm-story-ally-panel {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.vm-story-ally-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    scrollbar-gutter: stable;
}

/* V1.27.4 — affrontement final lisible, alliés coordonnés */

/* L’introduction finale reprend les placements éprouvés de l’introduction classique. */
.vm-match-intro.is-story-intro.is-story-final-intro .vm-intro-cast {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: clamp(5px, 1.5vw, 18px);
    padding: clamp(58px, 9vh, 110px) clamp(10px, 4vw, 76px) clamp(74px, 12vh, 130px);
}

.vm-match-intro.is-story-intro.is-story-final-intro .vm-intro-portrait {
    display: block !important;
    min-height: 0;
}

.vm-match-intro.is-story-intro.is-story-final-intro .vm-intro-portrait.is-left {
    left: auto;
    transform: translateX(-32vw) rotate(-4deg) scale(.9);
    clip-path: polygon(9% 0, 100% 5%, 92% 100%, 0 92%);
}

.vm-match-intro.is-story-intro.is-story-final-intro .vm-intro-portrait.is-center {
    left: auto;
    transform: translateY(-34vh) scale(.9);
    clip-path: polygon(4% 5%, 95% 0, 100% 94%, 8% 100%);
}

.vm-match-intro.is-story-intro.is-story-final-intro .vm-intro-portrait.is-right {
    left: auto;
    transform: translateX(32vw) rotate(4deg) scale(.9);
    clip-path: polygon(0 5%, 91% 0, 100% 92%, 8% 100%);
}

.vm-intro-portrait-caption {
    position: absolute;
    z-index: 4;
    left: clamp(7px, 1.3vw, 17px);
    right: clamp(7px, 1.3vw, 17px);
    bottom: clamp(8px, 1.8vh, 18px);
    display: grid;
    gap: 1px;
    padding: 8px 11px 7px;
    color: #f6f3ef;
    background: linear-gradient(125deg, rgba(4, 10, 18, .94), rgba(10, 22, 38, .78));
    clip-path: polygon(0 0, 100% 0, 93% 100%, 0 100%);
    box-shadow: 0 12px 24px rgba(0,0,0,.42);
}

.vm-intro-portrait-role {
    font-size: clamp(.46rem, .9vw, .7rem);
    font-weight: 900;
    letter-spacing: .18em;
    color: rgba(220, 232, 247, .72);
}

.vm-intro-portrait-name {
    overflow: hidden;
    font-family: Cinzel, Georgia, serif;
    font-size: clamp(.82rem, 1.5vw, 1.28rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: .04em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vm-match-intro.is-story-intro.is-story-final-intro .vm-intro-portrait.is-center .vm-intro-portrait-role {
    color: var(--vm-brass-light);
}

.vm-match-intro.is-story-intro.is-story-final-intro .vm-intro-title small {
    color: var(--vm-brass-light);
    border-color: color-mix(in srgb, var(--vm-brass-light) 48%, transparent);
}

/* Cartes du HUD final : identité claire, stocks séparés et tour actif évident. */
.vm-app.is-story-final-battle .vm-opponents {
    align-items: stretch;
    gap: clamp(8px, 1.25vw, 15px);
}

.vm-app.is-story-final-battle .vm-opponent {
    position: relative;
    display: grid !important;
    grid-template-columns: clamp(54px, 5vw, 72px) minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 104px;
    padding: 10px 11px 12px;
    transition: transform .18s ease, filter .18s ease;
}

.vm-app.is-story-final-battle .vm-opponent::before {
    inset: 0;
    background:
        linear-gradient(128deg, rgba(255,255,255,.045), transparent 34%),
        linear-gradient(105deg, rgba(5,14,25,.98), rgba(5,10,18,.94));
    filter: drop-shadow(0 12px 20px rgba(0,0,0,.3));
}

.vm-app.is-story-final-battle .vm-opponent::after {
    left: 11px;
    right: 11px;
    top: auto;
    bottom: -2px;
    width: auto;
    height: 5px;
    opacity: .9;
    background: linear-gradient(90deg, color-mix(in srgb, var(--vm-accent-main) 70%, #9ec7ff), transparent 78%);
    clip-path: polygon(0 0, 100% 16%, 94% 100%, 4% 100%);
}

.vm-app.is-story-final-battle .vm-opponent-portrait-wrap {
    width: clamp(54px, 5vw, 72px);
    height: clamp(54px, 5vw, 72px);
    margin: 0;
    box-shadow: 0 0 0 1px rgba(255,255,255,.15), 5px 6px 0 rgba(35,57,91,.52), 0 10px 18px rgba(0,0,0,.32);
}

.vm-app.is-story-final-battle .vm-opponent-copy {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.vm-app.is-story-final-battle .vm-opponent-name {
    display: flex;
    align-items: center;
    gap: 7px;
    overflow: visible;
    font-size: clamp(.76rem, .96vw, 1rem);
    font-weight: 900;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: normal;
}

.vm-app.is-story-final-battle .vm-opponent.is-story-ally .vm-opponent-name::after,
.vm-app.is-story-final-battle .vm-opponent.is-story-boss .vm-opponent-name::after {
    display: inline-flex;
    padding: 2px 7px 1px;
    font-size: .5rem;
    font-weight: 900;
    letter-spacing: .15em;
    clip-path: polygon(0 0, 100% 0, 91% 100%, 0 100%);
}

.vm-app.is-story-final-battle .vm-opponent.is-story-ally .vm-opponent-name::after {
    content: "ALLIÉ";
    color: rgba(237,244,255,.9);
    background: rgba(74,112,170,.32);
}

.vm-app.is-story-final-battle .vm-opponent.is-story-boss .vm-opponent-name::after {
    content: "BOSS";
    color: #17131a;
    background: linear-gradient(90deg, #f2e8d6, #c8a966);
}

.vm-app.is-story-final-battle .vm-opponent-count {
    display: flex;
    gap: 5px;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    color: rgba(226,235,246,.84);
    background: transparent;
    box-shadow: none;
    clip-path: none;
    flex-wrap: wrap;
}

.vm-app.is-story-final-battle .vm-opponent-count.is-story-stock .vm-opponent-stat {
    display: inline-grid;
    gap: 1px;
    padding: 5px 8px 4px;
    background: rgba(8,19,33,.88);
    box-shadow: inset 2px 0 0 color-mix(in srgb, var(--vm-accent-main) 72%, rgba(255,255,255,.2));
    clip-path: polygon(0 0, 100% 0, 91% 100%, 0 100%);
}

.vm-app.is-story-final-battle .vm-opponent-stat b {
    color: #fff;
    font-size: clamp(.72rem, .92vw, .9rem);
    line-height: 1;
}

.vm-app.is-story-final-battle .vm-opponent-stat small {
    color: rgba(224,234,246,.63);
    font-size: clamp(.38rem, .65vw, .48rem);
    line-height: 1.1;
    letter-spacing: .13em;
}

.vm-app.is-story-final-battle .vm-opponent.is-active {
    z-index: 5;
    transform: translateY(-5px) scale(1.035);
    filter: drop-shadow(0 0 18px color-mix(in srgb, var(--vm-accent-main) 58%, transparent));
}

.vm-app.is-story-final-battle .vm-opponent.is-active::before {
    background:
        linear-gradient(128deg, rgba(255,255,255,.11), transparent 36%),
        linear-gradient(105deg, color-mix(in srgb, var(--vm-accent-dark) 68%, #071322), color-mix(in srgb, var(--vm-accent-main) 28%, #06101c));
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--vm-accent-main) 72%, #eef6ff);
}

.vm-app.is-story-final-battle .vm-opponent.is-active .vm-opponent-copy::before {
    content: "TOUR ACTIF";
    display: inline-flex;
    justify-self: start;
    margin-bottom: 1px;
    padding: 4px 10px 3px;
    color: #07101c;
    background: linear-gradient(90deg, #d9f2ff, color-mix(in srgb, var(--vm-accent-main) 58%, #fff));
    font-size: clamp(.52rem, .72vw, .64rem);
    font-weight: 950;
    letter-spacing: .15em;
    clip-path: polygon(0 0, 100% 0, 91% 100%, 0 100%);
    animation: vm-final-turn-pulse 1.15s ease-in-out infinite;
}

.vm-app.is-story-final-battle .vm-opponent.is-story-ally.is-active .vm-opponent-copy::before {
    content: "ALLIÉ EN JEU";
}

.vm-app.is-story-final-battle .vm-opponent.is-story-boss.is-active .vm-opponent-copy::before {
    content: "JOKER JOUE";
    color: #17130f;
    background: linear-gradient(90deg, #fff3da, #d6b36a);
}

.vm-app.is-story-final-battle .vm-round-label.is-ai-turn,
.vm-app.is-story-final-battle .vm-round-label.is-human-turn {
    min-width: min(88vw, 380px);
    padding: 10px 22px 9px;
    color: #fff;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--vm-accent-dark) 84%, #06101b) 12% 88%, transparent);
    text-shadow: 0 0 14px color-mix(in srgb, var(--vm-accent-main) 60%, transparent);
    letter-spacing: .18em;
}

@keyframes vm-final-turn-pulse {
    0%, 100% { filter: brightness(.94); transform: translateX(0); }
    50% { filter: brightness(1.18); transform: translateX(2px); }
}

/* Question de coordination de l’allié placé juste avant le joueur. */
.vm-story-assist-prompt {
    position: fixed;
    inset: 0;
    z-index: 132;
    display: grid;
    place-items: end center;
    padding: 20px max(14px, env(safe-area-inset-right)) calc(22px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 45%, rgba(0,5,12,.62));
    transition: opacity .18s ease, visibility .18s ease;
}

.vm-story-assist-prompt.is-visible {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.vm-story-assist-card {
    display: grid;
    grid-template-columns: clamp(64px, 9vw, 92px) minmax(0, 1fr);
    gap: 13px;
    width: min(94vw, 620px);
    padding: 13px 15px 14px;
    color: #f4f7fb;
    background:
        linear-gradient(120deg, rgba(255,255,255,.045), transparent 34%),
        linear-gradient(108deg, rgba(5,14,25,.98), rgba(9,25,45,.96));
    box-shadow: 0 22px 62px rgba(0,0,0,.58), inset 0 0 0 1px rgba(160,202,255,.25);
    clip-path: polygon(2% 0, 100% 0, 97% 91%, 89% 100%, 0 100%, 0 12%);
}

.vm-story-assist-portrait-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    background: #07111e;
    clip-path: polygon(12% 0, 100% 0, 100% 84%, 83% 100%, 0 100%, 0 14%);
    box-shadow: 4px 5px 0 rgba(74,112,170,.46);
}

.vm-story-assist-portrait,
.vm-story-assist-fallback {
    width: 100%;
    height: 100%;
}

.vm-story-assist-portrait {
    object-fit: cover;
    object-position: center 22%;
}

.vm-story-assist-fallback {
    display: grid;
    place-items: center;
    font-family: Cinzel, Georgia, serif;
    font-size: 1.5rem;
}

.vm-story-assist-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.vm-story-assist-copy > small {
    color: rgba(166,204,247,.72);
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .19em;
}

.vm-story-assist-copy > strong {
    font-family: Cinzel, Georgia, serif;
    font-size: clamp(.95rem, 2.2vw, 1.2rem);
    letter-spacing: .05em;
}

.vm-story-assist-copy p {
    margin: 1px 0 7px;
    color: rgba(241,246,253,.9);
    font-size: clamp(.78rem, 1.8vw, .96rem);
    line-height: 1.38;
}

.vm-story-assist-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.vm-story-assist-actions button {
    min-height: 42px;
    border: 1px solid rgba(151,194,244,.24);
    color: #eaf4ff;
    background: rgba(8,22,39,.9);
    font-weight: 900;
    letter-spacing: .15em;
    clip-path: polygon(5% 0, 100% 0, 94% 100%, 0 100%);
}

.vm-story-assist-actions button:first-child {
    color: #07101b;
    background: linear-gradient(90deg, #c9ecff, color-mix(in srgb, var(--vm-accent-main) 58%, #fff));
}

@media (max-width: 720px) {
    .vm-match-intro.is-story-intro.is-story-final-intro .vm-intro-cast {
        gap: 3px;
        padding: 74px 5px 112px;
    }

    .vm-match-intro.is-story-intro.is-story-final-intro .vm-intro-title strong {
        max-width: 86vw;
        font-size: clamp(30px, 7vw, 54px);
        letter-spacing: .035em;
    }

    .vm-match-intro.is-story-intro.is-story-final-intro .vm-intro-title::before {
        left: -25vw;
        right: -25vw;
        height: clamp(88px, 15vh, 135px);
    }

    .vm-intro-portrait-caption {
        left: 4px;
        right: 4px;
        bottom: 6px;
        padding: 6px 7px 5px;
    }

    .vm-intro-portrait-role {
        font-size: clamp(.32rem, 1.45vw, .48rem);
        letter-spacing: .12em;
    }

    .vm-intro-portrait-name {
        font-size: clamp(.58rem, 2.25vw, .82rem);
    }

    .vm-app.is-story-final-battle .vm-opponents {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        padding-inline: 5px;
    }

    .vm-app.is-story-final-battle .vm-opponent {
        grid-template-columns: 1fr;
        align-content: start;
        justify-items: start;
        gap: 7px;
        min-height: 138px;
        padding: 8px 7px 10px;
    }

    .vm-app.is-story-final-battle .vm-opponent-portrait-wrap {
        width: clamp(48px, 15vw, 74px);
        height: clamp(48px, 15vw, 74px);
    }

    .vm-app.is-story-final-battle .vm-opponent-name {
        display: grid;
        justify-items: start;
        gap: 3px;
        font-size: clamp(.54rem, 2.05vw, .72rem);
        line-height: .95;
    }

    .vm-app.is-story-final-battle .vm-opponent.is-story-ally .vm-opponent-name::after,
    .vm-app.is-story-final-battle .vm-opponent.is-story-boss .vm-opponent-name::after {
        padding: 2px 5px 1px;
        font-size: .4rem;
    }

    .vm-app.is-story-final-battle .vm-opponent-count {
        display: grid;
        width: 100%;
        gap: 4px;
    }

    .vm-app.is-story-final-battle .vm-opponent-count.is-story-stock .vm-opponent-stat {
        width: 100%;
        padding: 4px 6px 3px;
    }

    .vm-app.is-story-final-battle .vm-opponent.is-active .vm-opponent-copy::before {
        padding: 3px 6px 2px;
        font-size: clamp(.38rem, 1.5vw, .48rem);
        letter-spacing: .1em;
    }

    .vm-app.is-story-final-battle .vm-round-label.is-ai-turn,
    .vm-app.is-story-final-battle .vm-round-label.is-human-turn {
        min-width: min(92vw, 350px);
        padding: 8px 14px 7px;
        font-size: clamp(.7rem, 2.9vw, .9rem);
    }

    .vm-story-assist-prompt {
        padding-bottom: calc(18px + env(safe-area-inset-bottom));
    }

    .vm-story-assist-card {
        grid-template-columns: 62px minmax(0, 1fr);
        gap: 10px;
        padding: 11px 12px 12px;
    }
}

@media (max-width: 390px) {
    .vm-app.is-story-final-battle .vm-opponent {
        min-height: 130px;
    }

    .vm-app.is-story-final-battle .vm-opponent-name {
        font-size: .5rem;
    }

    .vm-app.is-story-final-battle .vm-opponent-stat b {
        font-size: .62rem;
    }

    .vm-app.is-story-final-battle .vm-opponent-stat small {
        font-size: .32rem;
    }

    .vm-story-assist-card {
        grid-template-columns: 54px minmax(0, 1fr);
    }

    .vm-story-assist-copy p {
        font-size: .74rem;
    }
}

/* V1.27.4 — consultation de la main et décisions tactiques des alliés */
.vm-story-assist-actions #vm-story-assist-view {
    grid-column: 1 / -1;
    min-height: 38px;
    color: rgba(223, 237, 253, .9);
    background: rgba(4, 12, 23, .78);
    border-color: rgba(151, 194, 244, .16);
    font-size: .68rem;
}

.vm-story-assist-actions #vm-story-assist-view[aria-pressed="true"] {
    color: #07101b;
    background: linear-gradient(90deg, #e8f6ff, color-mix(in srgb, var(--vm-accent-main) 38%, #fff));
}

.vm-app.is-story-assist-open .vm-player {
    transition: transform .22s ease, filter .22s ease, box-shadow .22s ease;
}

.vm-app.is-story-assist-inspecting .vm-player {
    position: relative;
    z-index: 131;
    transform: translateY(-18px);
    filter: brightness(1.12) saturate(1.06);
    box-shadow: 0 -26px 54px rgba(0, 10, 24, .72);
}

.vm-app.is-story-assist-inspecting .vm-hand-viewport {
    overflow-x: auto;
    padding-top: 22px;
    border-top-color: rgba(164, 207, 255, .34);
}

.vm-app.is-story-assist-inspecting .vm-hand .vm-card-button {
    filter: none !important;
    opacity: 1 !important;
}

.vm-story-assist-prompt.is-inspecting {
    place-items: start center;
    padding-top: max(18px, env(safe-area-inset-top));
    background: linear-gradient(180deg, rgba(0, 5, 12, .74), transparent 34% 72%, rgba(0, 5, 12, .18));
    pointer-events: none;
}

.vm-story-assist-prompt.is-inspecting .vm-story-assist-card {
    width: min(96vw, 720px);
    pointer-events: auto;
    transform: scale(.96);
    transform-origin: top center;
}

@media (max-width: 720px) {
    .vm-story-assist-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vm-story-assist-actions #vm-story-assist-view {
        min-height: 36px;
        font-size: .6rem;
    }

    .vm-story-assist-prompt.is-inspecting .vm-story-assist-card {
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 8px;
        padding: 9px 10px 10px;
    }

    .vm-story-assist-prompt.is-inspecting .vm-story-assist-copy p {
        margin-bottom: 5px;
        font-size: .7rem;
        line-height: 1.28;
    }

    .vm-app.is-story-assist-inspecting .vm-player {
        transform: translateY(-12px);
    }
}

@media (max-height: 720px) and (orientation: landscape) {
    .vm-story-assist-prompt.is-inspecting .vm-story-assist-portrait-wrap {
        display: none;
    }

    .vm-story-assist-prompt.is-inspecting .vm-story-assist-card {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   V1.33.0 — CHAPITRE XII : VESPER
   ========================================================= */
.vm-app.is-story-vesper-battle {
    --vm-vesper-violet: #8f45ff;
    --vm-vesper-violet-deep: #251044;
    --vm-vesper-ink: #07060d;
    --vm-vesper-cream: #f4eddf;
}

.vm-app.is-story-vesper-battle::before {
    background:
        radial-gradient(circle at 50% 34%, rgba(116, 56, 190, .2), transparent 32%),
        linear-gradient(135deg, rgba(7, 6, 13, .18), rgba(33, 15, 61, .2));
}

.vm-vesper-hud {
    position: relative;
    z-index: 8;
    display: grid;
    grid-template-columns: minmax(150px, .78fr) minmax(230px, 1.35fr) minmax(150px, .9fr);
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 62px;
    padding: 9px 12px;
    overflow: hidden;
    color: #f8f3ff;
    background:
        linear-gradient(112deg, rgba(4, 3, 9, .96) 0 21%, rgba(35, 14, 67, .96) 21% 73%, rgba(8, 5, 14, .97) 73%),
        #09060f;
    border: 1px solid rgba(181, 130, 255, .32);
    clip-path: polygon(0 10px, 22px 0, 97% 0, 100% 13px, 100% calc(100% - 8px), calc(100% - 18px) 100%, 3% 100%, 0 calc(100% - 13px));
    box-shadow: inset 0 0 28px rgba(113, 52, 198, .16), 0 12px 34px rgba(0, 0, 0, .28);
}

.vm-vesper-hud::before,
.vm-vesper-hud::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.vm-vesper-hud::before {
    inset: 0 auto 0 20%;
    width: 4px;
    background: #f2ecdf;
    transform: skewX(-18deg);
    opacity: .78;
}

.vm-vesper-hud::after {
    right: 0;
    bottom: 7px;
    width: 27%;
    height: 3px;
    background: #9d58ff;
    transform: skewX(-30deg);
    transform-origin: right;
}

.vm-vesper-hud-act,
.vm-free-will,
.vm-vesper-prediction-chip,
.vm-vesper-seals {
    position: relative;
    z-index: 1;
}

.vm-vesper-hud-act {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding-left: 8px;
}

.vm-vesper-hud-act small,
.vm-free-will-title,
.vm-vesper-prediction-chip small,
.vm-vesper-seals small {
    font-size: .55rem;
    font-weight: 900;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.vm-vesper-hud-act small {
    color: rgba(231, 213, 255, .66);
}

.vm-vesper-hud-act strong {
    overflow: hidden;
    color: #fff;
    font-family: Cinzel, Georgia, serif;
    font-size: clamp(.72rem, 1.5vw, .92rem);
    letter-spacing: .06em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vm-free-will {
    display: grid;
    grid-template-columns: auto minmax(90px, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.vm-free-will-title {
    color: #f4eddf;
    transform: rotate(-2deg);
}

.vm-free-will-track {
    position: relative;
    height: 15px;
    overflow: hidden;
    background: rgba(0, 0, 0, .66);
    border: 1px solid rgba(245, 238, 222, .42);
    clip-path: polygon(5px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
}

.vm-free-will-track::after {
    content: "";
    position: absolute;
    inset: 3px 25% 3px auto;
    width: 1px;
    background: rgba(255, 255, 255, .22);
    box-shadow: -48px 0 rgba(255, 255, 255, .22), 48px 0 rgba(255, 255, 255, .22);
}

.vm-free-will-track i {
    display: block;
    width: calc(var(--vm-free-will-progress, 0) * 100%);
    height: 100%;
    background:
        repeating-linear-gradient(-62deg, rgba(255, 255, 255, .2) 0 5px, transparent 5px 10px),
        linear-gradient(90deg, #5a1fb3, #b96fff 68%, #f5eafc);
    box-shadow: 0 0 13px rgba(172, 102, 255, .8);
    transition: width .36s cubic-bezier(.2, .85, .2, 1);
}

.vm-free-will-charges {
    display: flex;
    gap: 5px;
}

.vm-free-will-charges b {
    display: block;
    width: 17px;
    height: 17px;
    background: rgba(0, 0, 0, .72);
    border: 1px solid rgba(239, 229, 255, .5);
    clip-path: polygon(50% 0, 100% 28%, 85% 100%, 15% 100%, 0 28%);
    transition: transform .25s ease, background .25s ease, filter .25s ease;
}

.vm-free-will-charges b.is-filled {
    background: linear-gradient(145deg, #f6f0e5 0 38%, #a552ff 39% 100%);
    filter: drop-shadow(0 0 6px rgba(181, 104, 255, .84));
    transform: translateY(-2px) rotate(4deg);
}

.vm-vesper-prediction-chip {
    justify-self: end;
    display: grid;
    gap: 1px;
    min-width: 145px;
    padding: 7px 13px 7px 17px;
    color: #170b26;
    background: #f4eddf;
    clip-path: polygon(11px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
    transform: rotate(-1deg);
}

.vm-vesper-prediction-chip small {
    color: #6f2ab6;
}

.vm-vesper-prediction-chip strong {
    overflow: hidden;
    font-size: .73rem;
    font-weight: 950;
    letter-spacing: .05em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vm-vesper-seals {
    grid-column: 2 / 4;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: center;
}

.vm-vesper-seals > div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

.vm-vesper-seals .is-player {
    color: #f4eddf;
}

.vm-vesper-seals .is-vesper {
    color: #d7b9ff;
}

.vm-vesper-seals span {
    display: flex;
    gap: 6px;
}

.vm-vesper-seals i {
    display: block;
    width: 22px;
    height: 22px;
    background: currentColor;
    border: 2px solid rgba(255, 255, 255, .62);
    clip-path: polygon(50% 0, 94% 22%, 100% 70%, 67% 100%, 20% 91%, 0 48%, 16% 12%);
    filter: drop-shadow(0 0 7px currentColor);
    transition: transform .4s ease, opacity .4s ease, filter .4s ease;
}

.vm-vesper-seals i.is-broken {
    opacity: .14;
    filter: grayscale(1);
    transform: scale(.55) rotate(28deg);
}

.vm-app.is-vesper-cracked-one .vm-table {
    box-shadow: inset 0 0 0 1px rgba(166, 95, 255, .2), inset 0 0 42px rgba(91, 35, 153, .1);
}

.vm-app.is-vesper-cracked-two .vm-table {
    box-shadow: inset 0 0 0 1px rgba(197, 146, 255, .32), inset 0 0 76px rgba(103, 37, 181, .2);
}

.vm-vesper-system-overlay,
.vm-false-ending,
.vm-final-ending {
    position: fixed;
    inset: 0;
    z-index: 310;
    place-items: center;
    padding: max(18px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

.vm-vesper-system-overlay {
    display: grid;
    background:
        linear-gradient(120deg, rgba(4, 3, 8, .94), rgba(26, 8, 48, .9)),
        repeating-linear-gradient(-63deg, transparent 0 24px, rgba(166, 90, 255, .07) 24px 26px);
    opacity: 0;
    transition: opacity .2s ease;
}

.vm-vesper-system-overlay.is-visible {
    opacity: 1;
}

.vm-vesper-system-panel {
    position: relative;
    width: min(680px, 100%);
    overflow: hidden;
    padding: clamp(25px, 5vw, 48px) clamp(22px, 6vw, 58px) clamp(22px, 5vw, 42px);
    color: #17111f;
    background: #f3eddf;
    clip-path: polygon(0 19px, 43px 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
    box-shadow: 0 30px 90px rgba(0, 0, 0, .62);
    transform: translateY(18px) rotate(-.6deg);
    transition: transform .28s cubic-bezier(.2, .9, .2, 1);
}

.vm-vesper-system-overlay.is-visible .vm-vesper-system-panel {
    transform: translateY(0) rotate(-.6deg);
}

.vm-vesper-system-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 9px;
    background: #8e43ea;
}

.vm-vesper-system-slash {
    position: absolute;
    top: -18%;
    right: 12%;
    width: 42px;
    height: 142%;
    background: rgba(118, 42, 201, .13);
    transform: rotate(17deg);
}

.vm-vesper-system-kicker {
    position: relative;
    z-index: 1;
    display: inline-block;
    margin: 0 0 10px;
    padding: 5px 10px;
    color: #fff;
    background: #1c1027;
    font-size: .66rem;
    font-weight: 950;
    letter-spacing: .18em;
    transform: rotate(-1.5deg);
}

.vm-vesper-system-panel h2 {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #180b23;
    font-family: Cinzel, Georgia, serif;
    font-size: clamp(1.55rem, 5vw, 3.2rem);
    line-height: .98;
    letter-spacing: -.02em;
    text-transform: uppercase;
}

.vm-vesper-system-panel > p:not(.vm-vesper-system-kicker) {
    position: relative;
    z-index: 1;
    max-width: 56ch;
    margin: 18px 0 0;
    font-size: .95rem;
    line-height: 1.55;
}

.vm-vesper-system-rule {
    position: relative;
    z-index: 1;
    margin-top: 18px;
    padding: 12px 14px 12px 18px;
    color: #f8f0ff;
    background: #2a103f;
    border-left: 5px solid #a95aff;
    font-size: .8rem;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: .035em;
    clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}

.vm-vesper-system-actions {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
}

.vm-vesper-system-actions button {
    min-width: min(220px, 46%);
}

.vm-false-ending,
.vm-final-ending {
    display: grid;
    color: #f6f0e8;
    background: #030307;
    opacity: 0;
    transition: opacity .7s ease;
}

.vm-false-ending.is-visible,
.vm-final-ending.is-visible {
    opacity: 1;
}

.vm-false-ending-noise {
    position: absolute;
    inset: 0;
    opacity: .18;
    pointer-events: none;
    background:
        repeating-linear-gradient(0deg, transparent 0 3px, rgba(255, 255, 255, .08) 3px 4px),
        radial-gradient(circle at 50% 50%, rgba(130, 70, 205, .22), transparent 48%);
}

.vm-false-ending-copy,
.vm-final-ending-copy {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    text-align: center;
}

.vm-false-ending-copy small,
.vm-final-ending-copy > small {
    font-size: .67rem;
    font-weight: 900;
    letter-spacing: .33em;
}

.vm-false-ending-copy strong {
    margin-top: 7px;
    font-family: Cinzel, Georgia, serif;
    font-size: clamp(2.6rem, 12vw, 7.5rem);
    line-height: .9;
    letter-spacing: .04em;
}

.vm-false-ending-copy span {
    margin-top: 18px;
    color: rgba(246, 240, 232, .68);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .18em;
}

.vm-false-ending.is-corrupted {
    animation: vm-false-ending-shudder .09s steps(2) 9;
}

.vm-false-ending.is-corrupted .vm-false-ending-copy {
    animation: vm-false-ending-break .7s steps(2) both;
}

.vm-final-ending {
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 46%, rgba(107, 50, 172, .22), transparent 34%),
        #030307;
}

.vm-final-ending-shards,
.vm-final-ending-shards i {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.vm-final-ending-shards i {
    width: 1px;
    height: 120%;
    margin: auto;
    background: linear-gradient(transparent, rgba(174, 112, 255, .58), transparent);
    transform-origin: center;
}

.vm-final-ending-shards i:nth-child(1) { transform: rotate(22deg) translateX(-160px); }
.vm-final-ending-shards i:nth-child(2) { transform: rotate(-34deg) translateX(190px); }
.vm-final-ending-shards i:nth-child(3) { transform: rotate(66deg) translateX(-110px); }
.vm-final-ending-shards i:nth-child(4) { transform: rotate(-71deg) translateX(140px); }
.vm-final-ending-shards i:nth-child(5) { transform: rotate(8deg) translateX(250px); }

.vm-final-ending-copy {
    width: min(620px, 100%);
}

.vm-final-ending-copy h2 {
    margin: 12px 0 0;
    color: #f7f0e5;
    font-family: Cinzel, Georgia, serif;
    font-size: clamp(5rem, 24vw, 12rem);
    font-weight: 700;
    line-height: .78;
    letter-spacing: .05em;
    text-shadow: 10px 8px 0 rgba(112, 47, 181, .38);
}

.vm-final-ending-copy > p {
    margin: 28px 0 0;
    color: rgba(246, 240, 232, .78);
    font-size: .88rem;
    letter-spacing: .05em;
}

.vm-final-reward {
    display: grid;
    grid-template-columns: 62px auto;
    align-items: center;
    gap: 12px;
    margin: 26px 0 24px;
    padding: 9px 18px 9px 9px;
    color: #1b0d28;
    background: #f3eddf;
    clip-path: polygon(0 8px, 12px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
    text-align: left;
}

.vm-final-reward > span {
    width: 54px;
    height: 54px;
    overflow: hidden;
    background: #1b0c2d;
    clip-path: polygon(50% 0, 100% 18%, 92% 100%, 10% 92%, 0 24%);
}

.vm-final-reward img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vm-final-reward div {
    display: grid;
    gap: 2px;
}

.vm-final-reward small {
    color: #7d3db7;
    font-size: .55rem;
    font-weight: 950;
    letter-spacing: .16em;
}

.vm-final-reward strong {
    font-family: Cinzel, Georgia, serif;
    font-size: 1.05rem;
    letter-spacing: .08em;
}

@keyframes vm-false-ending-shudder {
    0%, 100% { transform: translate(0); filter: none; }
    25% { transform: translate(-5px, 2px); filter: hue-rotate(45deg); }
    50% { transform: translate(6px, -2px); filter: contrast(1.7); }
    75% { transform: translate(-2px, -4px); filter: invert(.12); }
}

@keyframes vm-false-ending-break {
    0% { opacity: 1; transform: skewX(0); clip-path: inset(0); }
    35% { transform: skewX(-9deg) translateX(8px); clip-path: inset(17% 0 41% 0); }
    62% { transform: skewX(14deg) translateX(-11px); clip-path: inset(49% 0 13% 0); }
    100% { opacity: 0; transform: scale(1.08); clip-path: inset(50% 0 50% 0); }
}

@media (max-width: 760px) {
    .vm-vesper-hud {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px 10px;
        min-height: 0;
        padding: 8px 10px 10px;
    }

    .vm-vesper-hud::before {
        display: none;
    }

    .vm-vesper-hud-act {
        padding-left: 4px;
    }

    .vm-free-will {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .vm-vesper-prediction-chip {
        grid-column: 2;
        grid-row: 1;
        min-width: 120px;
        padding: 5px 9px 5px 13px;
    }

    .vm-vesper-seals {
        grid-column: 1 / -1;
        grid-row: 2;
        gap: 10px;
    }

    .vm-vesper-seals > div {
        flex-direction: column;
        gap: 4px;
    }

    .vm-vesper-seals i {
        width: 18px;
        height: 18px;
    }

    .vm-vesper-system-panel {
        padding: 28px 20px 22px;
    }

    .vm-vesper-system-actions {
        flex-direction: column-reverse;
    }

    .vm-vesper-system-actions button {
        width: 100%;
        min-width: 0;
    }

    .vm-final-ending-copy h2 {
        text-shadow: 6px 5px 0 rgba(112, 47, 181, .38);
    }
}

@media (max-width: 430px) {
    .vm-vesper-hud-act strong {
        font-size: .65rem;
    }

    .vm-free-will {
        grid-template-columns: 1fr auto;
    }

    .vm-free-will-title {
        grid-column: 1 / -1;
        font-size: .48rem;
    }

    .vm-free-will-track {
        height: 12px;
    }

    .vm-free-will-charges b {
        width: 14px;
        height: 14px;
    }

    .vm-vesper-prediction-chip {
        min-width: 105px;
    }

    .vm-vesper-prediction-chip strong {
        font-size: .62rem;
    }

    .vm-final-reward {
        grid-template-columns: 52px auto;
        padding-right: 13px;
    }

    .vm-final-reward > span {
        width: 46px;
        height: 46px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vm-false-ending.is-corrupted,
    .vm-false-ending.is-corrupted .vm-false-ending-copy {
        animation: none;
    }
}


/* =========================================================
   V1.33.1 — Lisibilité narrative, coordination et HUD Vesper
   ========================================================= */

/* Les décisions des alliés restent hors du plateau et la main est visible d’office. */
.vm-story-assist-prompt {
    inset: auto clamp(12px, 2vw, 26px) clamp(168px, 24dvh, 238px) auto;
    display: block;
    width: min(430px, calc(100vw - 24px));
    padding: 0;
    background: transparent;
    pointer-events: none;
}

.vm-story-assist-prompt.is-visible {
    pointer-events: none;
}

.vm-story-assist-card {
    width: 100%;
    grid-template-columns: 68px minmax(0, 1fr);
    padding: 11px 13px 12px;
    pointer-events: auto;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .48), inset 0 0 0 1px rgba(160, 202, 255, .28);
    transform: translateX(18px);
    transition: transform .2s ease;
}

.vm-story-assist-prompt.is-visible .vm-story-assist-card {
    transform: translateX(0);
}

.vm-story-assist-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vm-app.is-story-assist-open .vm-player {
    position: relative;
    z-index: 131;
    transform: translateY(-14px);
    filter: brightness(1.1) saturate(1.04);
    box-shadow: 0 -20px 44px rgba(0, 10, 24, .55);
    transition: transform .22s ease, filter .22s ease, box-shadow .22s ease;
}

.vm-app.is-story-assist-open .vm-hand-viewport {
    overflow-x: auto;
    padding-top: 18px;
    border-top-color: rgba(164, 207, 255, .3);
}

.vm-app.is-story-assist-open .vm-hand .vm-card-button {
    filter: none !important;
    opacity: 1 !important;
}

/* Le HUD de Vesper ne vole plus la hauteur du plateau. */
.vm-app.is-story-vesper-battle .vm-vesper-hud {
    grid-template-columns: minmax(150px, auto) minmax(120px, auto) minmax(0, 1fr);
    justify-self: center;
    width: min(100%, 760px);
    min-height: 34px;
    padding: 4px 9px 5px;
    gap: 8px;
    clip-path: polygon(0 7px, 15px 0, 98% 0, 100% 8px, 100% calc(100% - 5px), calc(100% - 12px) 100%, 2% 100%, 0 calc(100% - 8px));
}

.vm-app.is-story-vesper-battle .vm-vesper-hud::before {
    display: none;
}

.vm-app.is-story-vesper-battle .vm-vesper-hud::after {
    bottom: 3px;
    height: 2px;
}

.vm-app.is-story-vesper-battle .vm-vesper-hud-act {
    gap: 0;
    padding-left: 5px;
}

.vm-app.is-story-vesper-battle .vm-vesper-hud-act small {
    display: none;
}

.vm-app.is-story-vesper-battle .vm-vesper-hud-act strong {
    font-size: clamp(.62rem, 1.2vw, .78rem);
}

.vm-app.is-story-vesper-battle .vm-vesper-prediction-chip {
    min-width: 118px;
    padding: 4px 9px 4px 13px;
}

.vm-app.is-story-vesper-battle .vm-vesper-prediction-chip small {
    font-size: .43rem;
}

.vm-app.is-story-vesper-battle .vm-vesper-prediction-chip strong {
    font-size: .62rem;
}

.vm-app.is-story-vesper-battle .vm-vesper-seals {
    grid-column: 2 / 4;
    gap: 18px;
}

.vm-app.is-story-vesper-battle .vm-vesper-seals i {
    width: 17px;
    height: 17px;
}

/* Petite jauge verticale, accolée au bandeau du tour. */
.vm-app.is-story-vesper-battle .vm-round-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.vm-app.is-story-vesper-battle .vm-free-will {
    position: absolute;
    left: calc(100% + 7px);
    top: 50%;
    z-index: 6;
    display: grid;
    grid-template-columns: 9px 8px;
    grid-template-rows: auto 1fr;
    gap: 3px 4px;
    width: 27px;
    height: 76px;
    padding: 5px 4px;
    color: #f5efff;
    background: linear-gradient(180deg, rgba(8, 5, 15, .96), rgba(42, 17, 74, .94));
    border: 1px solid rgba(200, 161, 255, .4);
    clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 5px) 100%, 0 100%, 0 6px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .34), inset 0 0 14px rgba(150, 77, 235, .16);
    transform: translateY(-50%);
}

.vm-app.is-story-vesper-battle .vm-free-will-title {
    grid-column: 1 / -1;
    color: rgba(244, 237, 223, .88);
    font-size: .38rem;
    line-height: 1;
    letter-spacing: .1em;
    text-align: center;
    transform: none;
}

.vm-app.is-story-vesper-battle .vm-free-will-track {
    position: relative;
    grid-column: 1;
    grid-row: 2;
    width: 8px;
    height: 53px;
    align-self: end;
    overflow: hidden;
    border: 1px solid rgba(245, 238, 222, .42);
    background: rgba(0, 0, 0, .7);
    clip-path: polygon(2px 0, 100% 0, 100% calc(100% - 3px), 0 100%);
}

.vm-app.is-story-vesper-battle .vm-free-will-track::after {
    inset: 33% 1px auto;
    width: auto;
    height: 1px;
    background: rgba(255, 255, 255, .24);
    box-shadow: 0 17px rgba(255, 255, 255, .24);
}

.vm-app.is-story-vesper-battle .vm-free-will-track i {
    position: absolute;
    inset: auto 0 0;
    width: 100%;
    height: calc(var(--vm-free-will-progress, 0) * 100%);
    background: linear-gradient(0deg, #5a1fb3, #b96fff 72%, #f5eafc);
    transition: height .35s cubic-bezier(.2, .85, .2, 1);
}

.vm-app.is-story-vesper-battle .vm-free-will-charges {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-direction: column-reverse;
    align-self: end;
    gap: 5px;
}

.vm-app.is-story-vesper-battle .vm-free-will-charges b {
    width: 8px;
    height: 13px;
    border-width: 1px;
    clip-path: polygon(50% 0, 100% 25%, 86% 100%, 14% 100%, 0 25%);
}

.vm-app.is-story-vesper-battle .vm-free-will-charges b.is-filled {
    transform: none;
}

.vm-app.is-story-vesper-battle .vm-free-will.is-decree-stock {
    grid-template-columns: 1fr;
    width: 25px;
    height: 68px;
}

.vm-app.is-story-vesper-battle .vm-free-will.is-decree-stock .vm-free-will-track {
    display: none;
}

.vm-app.is-story-vesper-battle .vm-free-will.is-decree-stock .vm-free-will-charges {
    grid-column: 1;
    justify-self: center;
}

@media (max-width: 720px) {
    .vm-story-assist-prompt {
        inset: max(84px, calc(env(safe-area-inset-top) + 64px)) 8px auto;
        width: auto;
    }

    .vm-story-assist-card {
        grid-template-columns: 50px minmax(0, 1fr);
        gap: 8px;
        padding: 8px 10px 9px;
    }

    .vm-story-assist-copy p {
        margin-bottom: 5px;
        font-size: .72rem;
        line-height: 1.28;
    }

    .vm-story-assist-actions button {
        min-height: 36px;
    }

    .vm-app.is-story-assist-open .vm-player {
        transform: translateY(-9px);
    }

    .vm-app.is-story-vesper-battle .vm-vesper-hud {
        grid-template-columns: minmax(0, 1fr) auto;
        width: min(100%, 560px);
        min-height: 31px;
        padding: 4px 7px;
    }

    .vm-app.is-story-vesper-battle .vm-vesper-seals {
        grid-column: 1 / -1;
        grid-row: 2;
        gap: 10px;
    }

    .vm-app.is-story-vesper-battle .vm-free-will {
        left: calc(100% + 4px);
        width: 24px;
        height: 68px;
        padding-inline: 3px;
    }

    .vm-app.is-story-vesper-battle .vm-free-will-track {
        height: 46px;
    }

    .vm-app.is-story-vesper-battle .vm-free-will-track::after {
        box-shadow: 0 15px rgba(255, 255, 255, .24);
    }
}

@media (max-width: 390px) {
    .vm-app.is-story-vesper-battle .vm-round-label {
        padding-inline: 13px;
        font-size: .62rem;
    }

    .vm-app.is-story-vesper-battle .vm-free-will {
        left: calc(100% + 2px);
        transform: translateY(-50%) scale(.9);
        transform-origin: left center;
    }
}


/* V1.33.1b — HUD Vesper superposé au plateau, sans réduire la table. */
.vm-app.is-story-vesper-battle .vm-table {
    position: relative;
}

.vm-app.is-story-vesper-battle .vm-vesper-hud {
    position: absolute;
    inset: 3px 7px auto;
    z-index: 5;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    width: auto;
    min-height: 0;
    padding: 0;
    color: #f8f3ff;
    background: transparent;
    border: 0;
    clip-path: none;
    box-shadow: none;
    pointer-events: none;
}

.vm-app.is-story-vesper-battle .vm-vesper-hud::before,
.vm-app.is-story-vesper-battle .vm-vesper-hud::after {
    display: none;
}

.vm-app.is-story-vesper-battle .vm-vesper-hud-act {
    grid-column: 1;
    display: block;
    justify-self: start;
    padding: 4px 12px 4px 15px;
    color: #f8f2ff;
    background: linear-gradient(100deg, rgba(28, 10, 51, .96), rgba(89, 38, 145, .9));
    border-left: 3px solid #f4eddf;
    clip-path: polygon(6px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
    filter: drop-shadow(0 6px 10px rgba(0,0,0,.32));
}

.vm-app.is-story-vesper-battle .vm-vesper-hud-act strong {
    font-size: .58rem;
    letter-spacing: .13em;
}

.vm-app.is-story-vesper-battle .vm-vesper-prediction-chip {
    grid-column: 3;
    justify-self: end;
    min-width: 108px;
    padding: 4px 8px 4px 12px;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,.28));
}

.vm-app.is-story-vesper-battle .vm-vesper-seals {
    grid-column: 2;
    justify-self: center;
    align-self: start;
    width: min(360px, 70%);
    padding: 3px 12px 4px;
    gap: 18px;
    background: rgba(10, 5, 18, .82);
    border: 1px solid rgba(185, 118, 255, .22);
    clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}

@media (max-width: 720px) {
    .vm-app.is-story-vesper-battle .vm-vesper-hud {
        inset: 2px 4px auto;
        grid-template-columns: auto 1fr auto;
    }

    .vm-app.is-story-vesper-battle .vm-vesper-hud-act {
        padding: 3px 8px 3px 10px;
    }

    .vm-app.is-story-vesper-battle .vm-vesper-hud-act strong {
        font-size: .48rem;
    }

    .vm-app.is-story-vesper-battle .vm-vesper-prediction-chip {
        min-width: 88px;
        padding: 3px 6px 3px 9px;
    }

    .vm-app.is-story-vesper-battle .vm-vesper-prediction-chip small {
        font-size: .35rem;
    }

    .vm-app.is-story-vesper-battle .vm-vesper-prediction-chip strong {
        font-size: .52rem;
    }

    .vm-app.is-story-vesper-battle .vm-vesper-seals {
        width: min(250px, 66%);
        gap: 7px;
        padding-inline: 6px;
    }

    .vm-app.is-story-vesper-battle .vm-vesper-seals small {
        font-size: .38rem;
    }

    .vm-app.is-story-vesper-battle .vm-vesper-seals i {
        width: 13px;
        height: 13px;
    }
}


/* =========================================================
   V1.33.2 — lignes du protagoniste + Libre Arbitre simplifié
   ========================================================= */
.vm-story-dialogue-panel.is-player-line .vm-story-dialogue-stage {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    align-items: center !important;
}

.vm-story-dialogue-panel.is-player-line .vm-story-dialogue-portrait-wrap {
    display: none !important;
}

.vm-story-dialogue-panel.is-player-line .vm-story-dialogue-copy {
    width: min(100%, 900px) !important;
    justify-self: center !important;
    align-self: center !important;
}

.vm-story-dialogue-panel.is-player-line:not(.is-choice-line) .vm-story-dialogue-copy {
    align-content: center;
}

.vm-story-dialogue-panel.is-player-line:not(.is-choice-line) #vm-story-dialogue-speaker {
    display: none !important;
}

.vm-free-will[hidden] {
    display: none !important;
}

.vm-app.is-story-vesper-battle .vm-free-will {
    position: absolute;
    top: clamp(58px, 8dvh, 78px);
    right: clamp(12px, 1.8vw, 24px);
    z-index: 7;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 4px;
    width: clamp(136px, 15vw, 172px);
    height: auto;
    min-height: 0;
    padding: 6px 10px 8px;
    color: #f8f2ff;
    background: linear-gradient(105deg, rgba(10, 6, 18, .97), rgba(66, 25, 108, .94));
    border: 1px solid rgba(207, 171, 255, .48);
    clip-path: polygon(7px 0, 100% 0, calc(100% - 11px) 100%, 0 100%);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .32), inset 0 0 16px rgba(159, 84, 239, .13);
    transform: rotate(-6deg);
    transform-origin: center;
    pointer-events: none;
}

.vm-app.is-story-vesper-battle .vm-free-will-title {
    display: block;
    color: rgba(248, 242, 255, .9);
    font-size: .43rem;
    line-height: 1;
    font-weight: 950;
    letter-spacing: .14em;
    text-align: left;
    transform: none;
}

.vm-app.is-story-vesper-battle .vm-free-will-track {
    position: relative;
    display: block;
    width: 100%;
    height: 10px;
    overflow: visible;
    background: rgba(0, 0, 0, .7);
    border: 1px solid rgba(245, 238, 222, .46);
    clip-path: polygon(4px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}

.vm-app.is-story-vesper-battle .vm-free-will-track::after {
    display: none;
}

.vm-app.is-story-vesper-battle .vm-free-will-track i {
    position: absolute;
    inset: 0 auto 0 0;
    display: block;
    width: calc(var(--vm-free-will-progress, 0) * 100%);
    height: 100%;
    background: linear-gradient(90deg, #5820a6, #a65aff 72%, #f4eddf);
    box-shadow: 0 0 9px rgba(170, 96, 255, .72);
    transition: width .35s cubic-bezier(.2, .85, .2, 1);
}

.vm-app.is-story-vesper-battle .vm-free-will-charges {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.vm-app.is-story-vesper-battle .vm-free-will-charges b {
    position: absolute;
    top: -3px;
    display: block;
    width: 2px;
    height: 16px;
    background: rgba(248, 242, 255, .48);
    border: 0;
    clip-path: none;
    box-shadow: 0 0 0 1px rgba(8, 4, 13, .7);
    transform: skewX(-15deg);
    transition: background .25s ease, box-shadow .25s ease;
}

.vm-app.is-story-vesper-battle .vm-free-will-charges b:nth-child(1) { left: 33.333%; }
.vm-app.is-story-vesper-battle .vm-free-will-charges b:nth-child(2) { left: 66.666%; }
.vm-app.is-story-vesper-battle .vm-free-will-charges b:nth-child(3) { right: 3px; }

.vm-app.is-story-vesper-battle .vm-free-will-charges b.is-filled {
    background: #f4eddf;
    box-shadow: 0 0 7px rgba(224, 193, 255, .9), 0 0 0 1px rgba(8, 4, 13, .72);
    filter: none;
    transform: skewX(-15deg);
}

.vm-app.is-story-vesper-battle .vm-free-will.is-decree-stock {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    width: auto;
    min-width: 86px;
    padding: 7px 12px;
}

.vm-app.is-story-vesper-battle .vm-free-will.is-decree-stock .vm-free-will-title {
    font-size: .5rem;
    text-align: center;
    white-space: nowrap;
}

.vm-app.is-story-vesper-battle .vm-free-will.is-decree-stock .vm-free-will-track {
    display: none;
}

@media (max-width: 720px) {
    .vm-story-dialogue-panel.is-player-line .vm-story-dialogue-copy {
        width: 100% !important;
        min-height: 0;
    }

    .vm-app.is-story-vesper-battle .vm-free-will {
        top: 52px;
        right: 7px;
        width: 122px;
        padding: 5px 8px 7px;
        transform: rotate(-5deg);
    }

    .vm-app.is-story-vesper-battle .vm-free-will-title {
        font-size: .38rem;
    }

    .vm-app.is-story-vesper-battle .vm-free-will-track {
        height: 8px;
    }

    .vm-app.is-story-vesper-battle .vm-free-will-charges b {
        top: -3px;
        height: 14px;
    }
}

/* =========================================================
   V1.33.3 — Libre Arbitre jaune sous les commandes du match
   ========================================================= */
.vm-app.is-story-vesper-battle > .vm-free-will {
    position: absolute;
    top: calc(var(--vm-safe-top) + clamp(70px, 8.5dvh, 88px));
    right: calc(var(--vm-safe-right) + clamp(10px, 1.4vw, 18px));
    z-index: 24;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 5px;
    width: clamp(156px, 15vw, 188px);
    height: auto;
    min-height: 0;
    padding: 8px 13px 10px;
    color: #080808;
    background:
        linear-gradient(104deg, rgba(255, 255, 255, .3), transparent 38%),
        linear-gradient(110deg, #fff06a 0%, #f4cb25 58%, #d99d00 100%);
    border: 0;
    clip-path: polygon(10px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
    box-shadow: none;
    filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .55));
    transform: rotate(-7deg);
    transform-origin: center;
    pointer-events: none;
}

.vm-app.is-story-vesper-battle > .vm-free-will::before {
    content: "";
    position: absolute;
    inset: 3px;
    z-index: -1;
    clip-path: polygon(8px 0, 100% 0, calc(100% - 11px) 100%, 0 100%);
    border: 2px solid rgba(8, 8, 8, .88);
    pointer-events: none;
}

.vm-app.is-story-vesper-battle > .vm-free-will .vm-free-will-title {
    display: block;
    color: #080808;
    font-size: .48rem;
    line-height: 1;
    font-weight: 950;
    letter-spacing: .13em;
    text-align: left;
    text-shadow: none;
    transform: none;
}

.vm-app.is-story-vesper-battle > .vm-free-will .vm-free-will-track {
    position: relative;
    display: block;
    width: 100%;
    height: 14px;
    overflow: visible;
    background: rgba(255, 249, 190, .72);
    border: 2px solid #080808;
    clip-path: polygon(4px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}

.vm-app.is-story-vesper-battle > .vm-free-will .vm-free-will-track::after {
    display: none;
}

.vm-app.is-story-vesper-battle > .vm-free-will .vm-free-will-track i {
    position: absolute;
    inset: 0 auto 0 0;
    display: block;
    width: calc(var(--vm-free-will-progress, 0) * 100%);
    height: 100%;
    background: linear-gradient(90deg, #ffef4d, #f1b900 76%, #d78b00);
    box-shadow: inset -2px 0 0 rgba(0, 0, 0, .3);
    transition: width .35s cubic-bezier(.2, .85, .2, 1);
}

.vm-app.is-story-vesper-battle > .vm-free-will .vm-free-will-charges {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.vm-app.is-story-vesper-battle > .vm-free-will .vm-free-will-charges b,
.vm-app.is-story-vesper-battle > .vm-free-will .vm-free-will-charges b.is-filled {
    position: absolute;
    top: -4px;
    display: block;
    width: 4px;
    height: 18px;
    background: #050505;
    border: 0;
    box-shadow: 1px 0 0 rgba(255, 241, 87, .34);
    filter: none;
    transform: skewX(-17deg);
    transition: none;
}

.vm-app.is-story-vesper-battle > .vm-free-will .vm-free-will-charges b:nth-child(1) { left: 33.333%; }
.vm-app.is-story-vesper-battle > .vm-free-will .vm-free-will-charges b:nth-child(2) { left: 66.666%; }
.vm-app.is-story-vesper-battle > .vm-free-will .vm-free-will-charges b:nth-child(3) { right: 3px; }

.vm-app.is-story-vesper-battle > .vm-free-will.is-decree-stock {
    width: auto;
    min-width: 104px;
    padding: 9px 14px;
}

.vm-app.is-story-vesper-battle > .vm-free-will.is-decree-stock .vm-free-will-title {
    color: #080808;
    font-size: .52rem;
    text-align: center;
    white-space: nowrap;
}

.vm-app.is-story-vesper-battle > .vm-free-will.is-decree-stock .vm-free-will-track {
    display: none;
}

@media (max-width: 720px) {
    .vm-app.is-story-vesper-battle > .vm-free-will {
        top: calc(var(--vm-safe-top) + 67px);
        right: calc(var(--vm-safe-right) + 7px);
        width: 138px;
        padding: 7px 11px 9px;
        transform: rotate(-7deg);
    }

    .vm-app.is-story-vesper-battle > .vm-free-will .vm-free-will-title {
        font-size: .42rem;
    }

    .vm-app.is-story-vesper-battle > .vm-free-will .vm-free-will-track {
        height: 12px;
    }

    .vm-app.is-story-vesper-battle > .vm-free-will .vm-free-will-charges b,
    .vm-app.is-story-vesper-battle > .vm-free-will .vm-free-will-charges b.is-filled {
        top: -4px;
        height: 17px;
    }
}

/* =========================================================
   V1.33.4 — Libre Arbitre intégré au bandeau de Vesper
   ========================================================= */
.vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] > .vm-free-will {
    position: absolute;
    top: auto;
    right: 14px;
    bottom: 11px;
    left: auto;
    z-index: 4;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 3px;
    width: 104px;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 5px 8px 7px;
    color: #080808;
    background:
        linear-gradient(104deg, rgba(255, 255, 255, .28), transparent 38%),
        linear-gradient(110deg, #fff06a 0%, #f4cb25 58%, #d99d00 100%);
    border: 0;
    clip-path: polygon(8px 0, 100% 0, calc(100% - 11px) 100%, 0 100%);
    box-shadow: none;
    filter: drop-shadow(0 5px 5px rgba(0, 0, 0, .45));
    transform: rotate(-6deg);
    transform-origin: center;
    pointer-events: none;
}

.vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] > .vm-free-will::before {
    content: "";
    position: absolute;
    inset: 2px;
    z-index: -1;
    border: 1px solid rgba(8, 8, 8, .9);
    clip-path: polygon(7px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
    pointer-events: none;
}

.vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] > .vm-free-will .vm-free-will-title {
    display: block;
    color: #080808;
    font-size: .35rem;
    line-height: 1;
    font-weight: 950;
    letter-spacing: .09em;
    text-align: left;
    white-space: nowrap;
    text-shadow: none;
    transform: none;
}

.vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] > .vm-free-will .vm-free-will-track {
    position: relative;
    display: block;
    width: 100%;
    height: 9px;
    overflow: visible;
    background: rgba(255, 249, 190, .76);
    border: 1px solid #080808;
    clip-path: polygon(3px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}

.vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] > .vm-free-will .vm-free-will-track::after {
    display: none;
}

.vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] > .vm-free-will .vm-free-will-track i {
    position: absolute;
    inset: 0 auto 0 0;
    display: block;
    width: calc(var(--vm-free-will-progress, 0) * 100%);
    height: 100%;
    background: linear-gradient(90deg, #ffef4d, #f1b900 76%, #d78b00);
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .3);
    transition: width .35s cubic-bezier(.2, .85, .2, 1);
}

.vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] > .vm-free-will .vm-free-will-charges {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] > .vm-free-will .vm-free-will-charges b,
.vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] > .vm-free-will .vm-free-will-charges b.is-filled {
    position: absolute;
    top: -3px;
    display: block;
    width: 3px;
    height: 13px;
    background: #050505;
    border: 0;
    box-shadow: none;
    filter: none;
    transform: skewX(-17deg);
    transition: none;
}

.vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] > .vm-free-will .vm-free-will-charges b:nth-child(1) { left: 33.333%; }
.vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] > .vm-free-will .vm-free-will-charges b:nth-child(2) { left: 66.666%; }
.vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] > .vm-free-will .vm-free-will-charges b:nth-child(3) { right: 2px; }

.vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] > .vm-free-will.is-decree-stock {
    right: 14px;
    bottom: 14px;
    width: auto;
    min-width: 82px;
    padding: 7px 10px;
}

.vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] > .vm-free-will.is-decree-stock .vm-free-will-title {
    font-size: .4rem;
    text-align: center;
}

.vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] > .vm-free-will.is-decree-stock .vm-free-will-track {
    display: none;
}

@media (min-width: 721px) {
    .vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] > .vm-free-will {
        right: 18px;
        bottom: 10px;
        width: 116px;
        padding: 6px 9px 8px;
    }

    .vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] > .vm-free-will .vm-free-will-title {
        font-size: .39rem;
    }

    .vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] > .vm-free-will .vm-free-will-track {
        height: 10px;
    }
}

/* =========================================================
   V1.33.5 — Libre Arbitre : jauge verticale simple
   ========================================================= */
.vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] {
    padding-right: 51px;
}

.vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] > .vm-free-will,
.vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] > .vm-free-will.is-decree-stock {
    position: absolute;
    top: 5px;
    right: 13px;
    bottom: 5px;
    left: auto;
    z-index: 4;
    display: block;
    width: 27px;
    height: auto;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 3px;
    overflow: visible;
    color: #080808;
    background: #050505;
    border: 0;
    clip-path: polygon(35% 0, 100% 0, 65% 100%, 0 100%);
    box-shadow: none;
    filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .48)) drop-shadow(0 0 3px rgba(255, 213, 46, .24));
    transform: none;
    pointer-events: none;
}

.vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] > .vm-free-will::before {
    display: none;
}

.vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] > .vm-free-will .vm-free-will-title {
    display: none;
}

.vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] > .vm-free-will .vm-free-will-track,
.vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] > .vm-free-will.is-decree-stock .vm-free-will-track {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255, 234, 90, .52) 0%, rgba(213, 157, 8, .42) 100%);
    border: 0;
    clip-path: polygon(35% 0, 100% 0, 65% 100%, 0 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 239, 122, .48);
}

.vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] > .vm-free-will .vm-free-will-track::after {
    display: none;
}

.vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] > .vm-free-will .vm-free-will-track i {
    position: absolute;
    inset: auto 0 0 0;
    display: block;
    width: 100%;
    height: calc(var(--vm-free-will-progress, 0) * 100%);
    background: linear-gradient(180deg, #fff171 0%, #ffd52e 54%, #f0ad00 100%);
    box-shadow: none;
    transition: height .35s cubic-bezier(.2, .85, .2, 1);
}

.vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] > .vm-free-will .vm-free-will-charges {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] > .vm-free-will .vm-free-will-charges b,
.vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] > .vm-free-will .vm-free-will-charges b.is-filled {
    position: absolute;
    left: -5px;
    right: auto;
    top: auto;
    display: block;
    width: calc(100% + 10px);
    height: 3px;
    background: #050505;
    border: 0;
    box-shadow: none;
    filter: none;
    transform: rotate(7deg);
    transform-origin: center;
    transition: none;
}

.vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] > .vm-free-will .vm-free-will-charges b:nth-child(1) {
    bottom: 33.333%;
}

.vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] > .vm-free-will .vm-free-will-charges b:nth-child(2) {
    bottom: 66.666%;
}

.vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] > .vm-free-will .vm-free-will-charges b:nth-child(3) {
    right: auto;
    bottom: calc(100% - 4px);
}

@media (min-width: 721px) {
    .vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] {
        padding-right: 58px;
    }

    .vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] > .vm-free-will,
    .vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] > .vm-free-will.is-decree-stock {
        top: 7px;
        right: 16px;
        bottom: 7px;
        width: 31px;
        padding: 3px;
    }
}

/* =========================================================
   V1.33.7 — Sceaux verticaux + Libre Arbitre actif
   ========================================================= */
.vm-opponent[data-seat="1"] .vm-opponent-copy {
    overflow: visible;
}

.vm-opponent[data-seat="1"] .vm-opponent-name-line.vm-vesper-seals {
    position: relative;
    z-index: 5;
    display: flex;
    grid-column: auto;
    grid-template-columns: none;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    width: max-content;
    min-width: 0;
    overflow: visible;
}

.vm-opponent[data-seat="1"] .vm-opponent-name-line.vm-vesper-seals > .vm-vesper-seal-column {
    display: none;
}

.vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] .vm-opponent-name-line.vm-vesper-seals.is-visible {
    display: grid;
    grid-template-columns: 18px minmax(0, auto) 18px;
    align-items: center;
    gap: 8px;
    width: max-content;
    overflow: visible;
}

.vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] .vm-vesper-seals.is-visible > .vm-vesper-seal-column {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 18px;
    min-width: 18px;
    height: 44px;
    overflow: visible;
    color: #f7f0df;
    transform: rotate(-7deg);
    transform-origin: center;
}

.vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] .vm-vesper-seals.is-visible > .vm-vesper-seal-column.is-vesper {
    color: #c796ff;
    transform: rotate(7deg);
}

.vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] .vm-vesper-seal-column i {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    margin: 0;
    background: currentColor;
    border: 1px solid rgba(255, 255, 255, .72);
    clip-path: polygon(50% 0, 92% 21%, 100% 68%, 68% 100%, 20% 91%, 0 49%, 15% 12%);
    filter: drop-shadow(0 0 5px currentColor);
    transform: none;
    transition: transform .38s ease, opacity .38s ease, filter .38s ease;
}

.vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] .vm-vesper-seal-column i:nth-child(1) { translate: 3px 0; }
.vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] .vm-vesper-seal-column i:nth-child(2) { translate: 0 0; }
.vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] .vm-vesper-seal-column i:nth-child(3) { translate: -3px 0; }
.vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] .vm-vesper-seal-column.is-vesper i:nth-child(1) { translate: -3px 0; }
.vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] .vm-vesper-seal-column.is-vesper i:nth-child(3) { translate: 3px 0; }

.vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] .vm-vesper-seal-column i.is-broken {
    opacity: .13;
    filter: grayscale(1);
    transform: scale(.48) rotate(32deg);
}

/* À l'acte II, la jauge change franchement de couleur : elle est maintenant dépensable. */
.vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] > .vm-free-will.is-decree-stock {
    background: #17072d;
    filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .5)) drop-shadow(0 0 6px rgba(174, 95, 255, .7));
}

.vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] > .vm-free-will.is-decree-stock .vm-free-will-track {
    background: linear-gradient(180deg, rgba(210, 169, 255, .72) 0%, rgba(105, 41, 181, .64) 100%);
    box-shadow: inset 0 0 0 1px rgba(232, 211, 255, .72), inset 0 0 10px rgba(78, 16, 139, .34);
}

.vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] > .vm-free-will.is-decree-stock .vm-free-will-track i {
    background: linear-gradient(180deg, #f3dcff 0%, #c276ff 46%, #7d2bd3 100%);
    box-shadow: 0 0 8px rgba(192, 109, 255, .72);
}

.vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] > .vm-free-will.is-decree-stock .vm-free-will-charges b,
.vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] > .vm-free-will.is-decree-stock .vm-free-will-charges b.is-filled {
    background: #050505;
}

.vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] > .vm-free-will.is-shattering {
    display: block !important;
    animation: vm-free-will-shatter .68s cubic-bezier(.2, .8, .25, 1) both;
    transform-origin: center;
}

.vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] > .vm-free-will.is-shattering::before,
.vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] > .vm-free-will.is-shattering::after {
    content: "";
    position: absolute;
    z-index: 8;
    display: block;
    width: 4px;
    height: 5px;
    left: 45%;
    top: 48%;
    background: #e8c8ff;
    pointer-events: none;
    opacity: 0;
}

.vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] > .vm-free-will.is-shattering::before {
    box-shadow:
        -15px -25px 0 #9e4be5,
        12px -21px 0 #f1dcff,
        -18px -3px 0 #c279ff,
        17px 2px 0 #7c25c6,
        -12px 22px 0 #f0d9ff,
        14px 27px 0 #a650e8;
    animation: vm-free-will-shards-a .68s ease-out both;
}

.vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] > .vm-free-will.is-shattering::after {
    box-shadow:
        -8px -31px 0 #d6a7ff,
        18px -13px 0 #8a34d1,
        -22px 10px 0 #f5e8ff,
        20px 18px 0 #bd6cff,
        -4px 32px 0 #7a20bd;
    animation: vm-free-will-shards-b .68s ease-out both;
}

@keyframes vm-free-will-shatter {
    0% { opacity: 1; transform: scale(1); filter: brightness(1); }
    34% { opacity: 1; transform: scale(1.13) rotate(-3deg); filter: brightness(2.35); }
    58% { opacity: .82; transform: scale(.92) rotate(4deg); filter: brightness(1.55); }
    100% { opacity: 0; transform: scale(1.42) rotate(9deg); filter: brightness(2) blur(1px); }
}

@keyframes vm-free-will-shards-a {
    0%, 20% { opacity: 0; transform: translate(0, 0) scale(.35); }
    42% { opacity: 1; }
    100% { opacity: 0; transform: translate(-8px, -5px) scale(1.35) rotate(42deg); }
}

@keyframes vm-free-will-shards-b {
    0%, 20% { opacity: 0; transform: translate(0, 0) scale(.35); }
    42% { opacity: 1; }
    100% { opacity: 0; transform: translate(9px, 6px) scale(1.2) rotate(-38deg); }
}

@media (max-width: 720px) {
    .vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] .vm-opponent-name-line.vm-vesper-seals.is-visible {
        grid-template-columns: 16px minmax(0, auto) 16px;
        gap: 6px;
    }

    .vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] .vm-vesper-seals.is-visible > .vm-vesper-seal-column {
        width: 16px;
        min-width: 16px;
        height: 40px;
        gap: 1px;
    }

    .vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] .vm-vesper-seal-column i {
        width: 11px;
        height: 11px;
    }
}

/* La jauge est un élément absolu du bandeau, jamais une cellule de la grille héritée. */
.vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] > .vm-free-will,
.vm-app.is-story-vesper-battle .vm-opponent[data-seat="1"] > .vm-free-will.is-decree-stock {
    grid-area: auto;
    grid-column: auto;
    grid-row: auto;
    align-self: auto;
    justify-self: auto;
}

/* =========================================================
   STORY ENTRY FROM MAIN MENU / STORY HUB VESPER
   ========================================================= */
#vm-main-menu .vm-main-story-entry {
    position: absolute;
    top: 50%;
    right: clamp(28px, 6vw, 110px);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: min(340px, calc(100vw - 64px));
    padding: 22px 26px 24px;
    border: 1px solid rgba(190, 214, 255, .28);
    border-left: 5px solid rgba(162, 195, 255, .9);
    color: #f7f3ea;
    background:
        linear-gradient(135deg, rgba(0, 0, 0, .78), rgba(8, 14, 32, .58) 58%, rgba(26, 46, 98, .52)),
        linear-gradient(180deg, rgba(255,255,255,.06), transparent 48%);
    box-shadow: 0 26px 60px rgba(0,0,0,.42);
    backdrop-filter: blur(8px);
    clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 22px) 100%, 0 100%, 0 18px);
    transform: translateY(-50%) rotate(3.5deg);
    text-align: left;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease;
}

#vm-main-menu .vm-main-story-entry::before {
    content: "";
    position: absolute;
    inset: auto 18px 18px auto;
    width: 76px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(190, 214, 255, .96));
    transform: skewX(-34deg);
}

#vm-main-menu .vm-main-story-entry .vm-main-story-entry-kicker {
    color: rgba(203, 218, 255, .92);
    font: 800 .82rem/1 Cinzel, serif;
    letter-spacing: .28em;
}

#vm-main-menu .vm-main-story-entry strong {
    font: 900 clamp(1.8rem, 3vw, 2.9rem)/.88 Cinzel, serif;
    letter-spacing: .04em;
}

#vm-main-menu .vm-main-story-entry small {
    color: rgba(244, 234, 217, .86);
    font: 600 .9rem/1.35 Inter, system-ui, sans-serif;
    letter-spacing: .04em;
}

@media (hover: hover) {
    #vm-main-menu .vm-main-story-entry:hover {
        transform: translateY(calc(-50% - 5px)) rotate(2deg) scale(1.02);
        border-color: rgba(228, 238, 255, .7);
        box-shadow: 0 30px 72px rgba(0,0,0,.54);
        filter: brightness(1.04);
    }
}

#vm-main-menu .vm-main-story-entry:focus-visible {
    outline: 3px solid rgba(206, 225, 255, .88);
    outline-offset: 5px;
    border-color: rgba(235, 241, 255, .9);
}

.vm-story-hub-screen {
    background: url("background.webp") center center / cover no-repeat;
}

.vm-story-hub-screen::before {
    content: "";
    position: absolute;
    inset: -20px;
    z-index: 0;
    background: url("background.webp") center center / cover no-repeat;
    filter: blur(14px) brightness(.42);
    transform: scale(1.06);
}

.vm-story-hub-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.18) 34%, rgba(0,0,0,.38) 56%, rgba(0,0,0,.72) 100%),
        linear-gradient(180deg, rgba(0,0,0,.12), transparent 25%, transparent 75%, rgba(0,0,0,.22)),
        url("backgroundvesper.webp") center center / cover no-repeat;
}

.vm-story-hub-panel {
    position: absolute;
    top: 50%;
    right: clamp(24px, 6vw, 96px);
    z-index: 2;
    width: min(420px, calc(100vw - 64px));
    padding: clamp(28px, 3vw, 42px);
    border: 1px solid rgba(196, 213, 255, .22);
    border-left: 5px solid rgba(176, 201, 255, .95);
    color: #f7f3ea;
    background:
        linear-gradient(128deg, rgba(0,0,0,.82), rgba(6, 10, 22, .7) 60%, rgba(23, 34, 74, .6)),
        linear-gradient(180deg, rgba(255,255,255,.045), transparent 46%);
    box-shadow: 0 36px 86px rgba(0,0,0,.52);
    backdrop-filter: blur(10px);
    clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 22px) 100%, 0 100%, 0 18px);
    transform: translateY(-50%);
}

.vm-story-hub-panel::before {
    content: "";
    position: absolute;
    top: -16px;
    left: 28px;
    width: 138px;
    height: 14px;
    background: linear-gradient(90deg, rgba(185, 218, 255, .95), rgba(116, 157, 255, .82));
    transform: skewX(-18deg);
}

.vm-story-hub-copy {
    display: grid;
    gap: 10px;
}

.vm-story-hub-copy p {
    margin: 0;
    color: rgba(210, 225, 255, .92);
    font: 800 .78rem/1 Cinzel, serif;
    letter-spacing: .28em;
}

.vm-story-hub-copy h2 {
    margin: 0;
    font: 900 clamp(2.4rem, 5vw, 4rem)/.86 Cinzel, serif;
    letter-spacing: .02em;
    text-shadow: 0 8px 26px rgba(0,0,0,.48);
}

.vm-story-hub-copy span {
    max-width: 30ch;
    color: rgba(244, 234, 217, .9);
    font: 600 1rem/1.5 Inter, system-ui, sans-serif;
}

.vm-story-hub-actions {
    display: grid;
    gap: 14px;
    margin-top: 26px;
}

.vm-story-hub-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 62px;
    padding: 0 22px;
    border: 1px solid rgba(194, 214, 255, .18);
    border-left: 4px solid rgba(176, 201, 255, .8);
    color: #f7f3ea;
    background: linear-gradient(96deg, rgba(6, 10, 24, .92), rgba(14, 25, 60, .74));
    font: 800 1.05rem/1 Cinzel, serif;
    letter-spacing: .18em;
    text-transform: uppercase;
    box-shadow: 0 16px 34px rgba(0,0,0,.24);
    clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 18px) 100%, 0 100%, 0 14px);
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, filter .18s ease;
}

.vm-story-hub-button.is-primary {
    background: linear-gradient(98deg, rgba(94, 131, 218, .98), rgba(61, 100, 197, .92) 72%, rgba(168, 207, 255, .98));
    color: #101728;
    border-color: rgba(219, 235, 255, .52);
    border-left-color: rgba(238, 244, 255, .96);
}

@media (hover: hover) {
    .vm-story-hub-button:hover {
        transform: translateX(4px) translateY(-2px);
        border-color: rgba(231, 239, 255, .44);
        filter: brightness(1.06);
    }
}

.vm-story-hub-button:focus-visible {
    outline: 3px solid rgba(219, 234, 255, .88);
    outline-offset: 4px;
}

@media (max-width: 720px) {
    #vm-main-menu .vm-main-story-entry {
        top: auto;
        right: max(16px, env(safe-area-inset-right));
        bottom: max(110px, calc(env(safe-area-inset-bottom) + 88px));
        width: min(300px, calc(100vw - 34px));
        transform: rotate(2.5deg);
    }

    .vm-story-hub-screen::after {
        background:
            linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,.02) 30%, rgba(0,0,0,.42) 72%, rgba(0,0,0,.74) 100%),
            linear-gradient(90deg, rgba(0,0,0,.02), rgba(0,0,0,.52)),
            url("backgroundvesper_mobile.webp") center center / cover no-repeat;
    }

    .vm-story-hub-panel {
        top: auto;
        right: max(16px, env(safe-area-inset-right));
        bottom: max(18px, calc(env(safe-area-inset-bottom) + 12px));
        width: min(360px, calc(100vw - 32px));
        padding: 24px 20px 22px;
        transform: none;
    }

    .vm-story-hub-copy h2 {
        font-size: clamp(2rem, 10vw, 3rem);
    }

    .vm-story-hub-copy span {
        font-size: .94rem;
    }

    .vm-story-hub-button {
        min-height: 58px;
        font-size: 1rem;
    }
}


/* =========================================================
   STORY HUB — titre contenu + sélection instantanée
   ========================================================= */
.vm-story-hub-copy h2 {
    max-width: 100%;
    font-size: clamp(2.35rem, 4.2vw, 3.45rem);
    letter-spacing: -.02em;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .vm-story-hub-copy h2 {
        font-size: clamp(2rem, 9vw, 2.8rem);
        letter-spacing: -.025em;
    }
}

/* =========================================================
   STORY HUB — panneau mobile horizontal sous le bureau
   ========================================================= */
@media (max-width: 720px) {
    .vm-story-hub-panel {
        top: auto;
        right: max(10px, env(safe-area-inset-right));
        bottom: max(10px, env(safe-area-inset-bottom));
        left: max(10px, env(safe-area-inset-left));
        display: grid;
        grid-template-columns: minmax(0, 1.25fr) minmax(112px, .75fr);
        align-items: center;
        column-gap: 12px;
        width: auto;
        max-width: none;
        min-height: 0;
        padding: 14px 14px 13px 18px;
        border-left-width: 4px;
        transform: none;
        backdrop-filter: blur(8px);
        box-shadow: 0 18px 44px rgba(0,0,0,.52);
        clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 16px) 100%, 0 100%, 0 12px);
    }

    .vm-story-hub-panel::before {
        top: -8px;
        left: 18px;
        width: 84px;
        height: 7px;
    }

    .vm-story-hub-copy {
        min-width: 0;
        gap: 5px;
    }

    .vm-story-hub-copy p {
        font-size: .55rem;
        letter-spacing: .2em;
    }

    .vm-story-hub-copy h2 {
        max-width: 100%;
        font-size: clamp(1.45rem, 7.3vw, 2rem);
        line-height: .88;
        letter-spacing: -.035em;
        white-space: nowrap;
    }

    .vm-story-hub-copy span {
        max-width: 29ch;
        font-size: clamp(.68rem, 2.6vw, .78rem);
        line-height: 1.28;
    }

    .vm-story-hub-actions {
        align-self: stretch;
        display: grid;
        grid-template-rows: repeat(2, minmax(42px, 1fr));
        gap: 8px;
        margin-top: 0;
    }

    .vm-story-hub-button {
        min-height: 42px;
        padding: 0 12px;
        border-left-width: 3px;
        font-size: clamp(.7rem, 2.8vw, .82rem);
        letter-spacing: .12em;
        clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 12px) 100%, 0 100%, 0 9px);
        box-shadow: 0 8px 18px rgba(0,0,0,.22);
    }
}

@media (max-width: 360px) {
    .vm-story-hub-panel {
        grid-template-columns: minmax(0, 1.18fr) minmax(104px, .82fr);
        column-gap: 9px;
        padding: 12px 11px 11px 15px;
    }

    .vm-story-hub-copy span {
        font-size: .66rem;
    }

    .vm-story-hub-button {
        padding-inline: 9px;
        font-size: .68rem;
        letter-spacing: .09em;
    }
}