:root {
    --bg-0: #0b0d11;
    --bg-1: #121821;
    --bg-2: #1a212d;
    --bg-3: #242d3c;
    --stroke: rgba(255, 255, 255, 0.08);
    --stroke-strong: rgba(255, 255, 255, 0.16);
    --text: #edf1f5;
    --text-soft: #aab3bf;
    --text-dim: #7e8897;
    --accent: #d0a95f;
    --danger: #d35a5a;
    --success: #63b579;
    --shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
    --radius-lg: 26px;
    --radius-md: 18px;
    --radius-sm: 12px;
    --font-ui: "Space Grotesk", "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", "Consolas", "Courier New", monospace;
    --comic-ink: #0a0708;
    --comic-paper: #f4ead5;
    --comic-bone: #cdbfa3;
    --comic-red: #d22b2b;
    --comic-yellow: #e8b923;
    --comic-cyan: #3a8fc4;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    min-height: 100%;
    background:
        radial-gradient(ellipse at 30% 0%, #2a1c14, #0e0807 82%);
    background-attachment: fixed;
}

[hidden] { display: none !important; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-ui);
    color: var(--text);
    background:
        radial-gradient(ellipse at 30% 0%, #2a1c14, #0e0807 82%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 24%);
    background-attachment: fixed, fixed;
    position: relative;
    background-color: #0e0807;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 2px 2px, rgba(0, 0, 0, 0.2) 0 1px, transparent 1px),
        radial-gradient(circle at 4px 4px, rgba(255, 255, 255, 0.06) 0 0.8px, transparent 0.8px),
        repeating-linear-gradient(
            3deg,
            transparent 0 13px,
            rgba(255, 255, 255, 0.018) 13px 14px
        );
    background-size: 6px 6px, 8px 8px, auto;
    opacity: 0.38;
    mix-blend-mode: screen;
    pointer-events: none;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input {
    font: inherit;
}

.backdrop {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 70% 120%, rgba(0, 0, 0, 0.52), transparent 44%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.26) 0%, transparent 32%);
}

.site-shell {
    width: min(1280px, calc(100% - 36px));
    margin: 0 auto;
    padding: 40px 0 72px;
    position: relative;
}

.has-global-hud:not(.hub-view) .site-shell {
    padding-top: 100px;
}

.hub-view .site-shell {
    width: min(520px, calc(100% - 18px));
    padding-top: 14px;
}

.account-trigger {
    display: none !important;
}

.account-trigger:hover,
.account-trigger:focus-visible {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--comic-ink);
}

.account-trigger__icon {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    border-radius: inherit;
    border: 0;
    background: transparent;
}

.account-trigger__icon svg {
    width: 17px;
    height: 17px;
    fill: var(--comic-ink);
}

.account-trigger > span:last-child {
    display: none;
    white-space: nowrap;
}

.flash-stack {
    display: grid;
    gap: 12px;
    margin-bottom: 24px;
}

.flash {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--stroke-strong);
    background: rgba(18, 22, 30, 0.9);
    box-shadow: var(--shadow);
}

.flash--success {
    border-color: rgba(99, 181, 121, 0.35);
}

.flash--error {
    border-color: rgba(211, 90, 90, 0.35);
}

.flash__close,
.icon-button {
    border: 0;
    background: transparent;
    color: var(--text-soft);
    cursor: pointer;
    font-size: 1.15rem;
}

.auth-view .site-shell {
    padding: 0;
    width: 100%;
    max-width: 100%;
}

.auth-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 28px 16px;
}

.auth-panel {
    width: min(480px, 100%);
    position: relative;
    background:
        radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px),
        linear-gradient(180deg, #1c1008 0%, #120b05 100%);
    background-size: 8px 8px, auto;
    border: 4px solid #0a0708;
    border-radius: 20px;
    box-shadow: 6px 6px 0 #0a0708;
    padding: 16px 28px 32px;
    overflow: hidden;
}

.auth-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: repeating-linear-gradient(
        90deg,
        #d22b2b 0 18px,
        #0a0708 18px 22px
    );
}

.auth-panel__badge {
    display: inline-block;
    margin: 0 0 14px;
    padding: 3px 12px;
    background: #d22b2b;
    border: 2px solid #0a0708;
    border-radius: 6px;
    box-shadow: 2px 2px 0 #0a0708;
    font-family: "Special Elite", monospace;
    font-size: 0.54rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #f4ead5;
}

.auth-heading {
    margin: 0 0 6px;
    font-family: "Bowlby One", sans-serif;
    font-size: clamp(1.9rem, 6vw, 2.6rem);
    line-height: 0.9;
    text-transform: uppercase;
    color: #f4ead5;
    letter-spacing: 0.03em;
}

.auth-heading__accent {
    display: block;
    font-family: "Anton", sans-serif;
    font-size: clamp(2.4rem, 9vw, 3.6rem);
    color: #d22b2b;
    text-shadow: 3px 3px 0 rgba(244, 234, 213, 0.65);
    letter-spacing: 0.04em;
}

.auth-copy {
    margin: 0 0 22px;
    font-family: "Special Elite", monospace;
    font-size: 0.78rem;
    line-height: 1.55;
    color: rgba(244, 234, 213, 0.5);
}

.auth-avatar-section {
    margin: 0 0 20px;
}

.auth-avatar-section__label {
    display: block;
    margin-bottom: 12px;
    font-family: "Special Elite", monospace;
    font-size: 0.54rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(244, 234, 213, 0.62);
}

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

.auth-avatar-item {
    position: relative;
    cursor: pointer;
}

.auth-avatar-item input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.auth-avatar-item__img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 12px;
    border: 3px solid rgba(10, 7, 8, 0.7);
    box-shadow: 3px 3px 0 #0a0708;
    object-fit: cover;
    background: #2a1d0e;
    filter: grayscale(20%) brightness(0.82);
    transition: transform 0.12s, box-shadow 0.12s, filter 0.12s, border-color 0.12s;
}

.auth-avatar-item:hover .auth-avatar-item__img {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 #0a0708;
    filter: none;
}

.auth-avatar-item input[type="radio"]:checked ~ .auth-avatar-item__img {
    border-color: #d22b2b;
    box-shadow: 3px 3px 0 #d22b2b;
    filter: none;
}

.auth-avatar-item__check {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #d22b2b;
    border: 2px solid #0a0708;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    color: #f4ead5;
    font-weight: 900;
    opacity: 0;
    transform: scale(0.3);
    transition: opacity 0.12s, transform 0.15s;
    pointer-events: none;
}

.auth-avatar-item input[type="radio"]:checked ~ .auth-avatar-item__check {
    opacity: 1;
    transform: scale(1);
}

.panel,
.zone-card {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 40%),
        rgba(17, 22, 30, 0.92);
    border: 1px solid var(--stroke);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.eyebrow {
    margin: 0;
    color: var(--accent);
    font-size: 0.76rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

.auth-card h1 {
    margin-bottom: 12px;
    font-size: clamp(2rem, 5vw, 3.4rem);
    line-height: 0.96;
}

.auth-card {
    display: none;
}

.page-header {
    display: grid;
    gap: 8px;
    margin-bottom: 34px;
}

.page-header h1 {
    margin-bottom: 0;
    font-size: clamp(1.7rem, 3.8vw, 2.4rem);
    line-height: 1;
}

.page-header--compact {
    gap: 6px;
}

.auth-copy,
.page-copy,
.muted {
    color: var(--text-soft);
}

.back-link,
.auth-links a {
    color: var(--accent);
}

.page-back-link {
    display: inline-flex;
    align-items: center;
    margin: 0 0 18px;
}

.page-auto-topbar {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
}

.page-auto-topbar--with-sub {
    margin-bottom: 24px;
}

.page-auto-topbar h1 {
    margin: 0;
    color: #f4ead5;
    font-family: "Anton", "Archivo Black", var(--font-ui);
    font-size: clamp(1.42rem, 3.6vw, 1.88rem);
    line-height: 0.92;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-shadow:
        1px 1px 0 rgba(10, 7, 8, 0.95),
        2px 2px 0 rgba(10, 7, 8, 0.62);
}

.page-auto-topbar__titles {
    min-width: 0;
}

.page-auto-topbar__titles--with-sub {
    position: relative;
    display: inline-block;
}

.page-auto-topbar--library {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 8px;
}

.page-auto-topbar__titles--library {
    min-width: 0;
}

.page-back-link--auto {
    display: inline-flex;
    flex: 0 0 56px;
    justify-content: center;
    align-items: center;
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
    padding: 0 0 2px;
    margin: 0;
    border-radius: 8px;
    border: 3px solid var(--comic-ink);
    background: #f4ead5;
    color: var(--comic-ink);
    font-family: "Bowlby One", "Archivo Black", var(--font-ui);
    font-size: 32px;
    letter-spacing: 0;
    line-height: 1;
    box-shadow: 3px 3px 0 var(--comic-ink);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.page-back-link--auto:hover,
.page-back-link--auto:focus-visible {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--comic-ink);
}

.has-auto-page-topbar .page-back-link:not(.page-back-link--auto) {
    display: none !important;
}

.has-auto-page-topbar .page-header h1 {
    display: none;
}

.has-auto-page-topbar .page-header {
    margin-bottom: 14px;
}

.page-back-link--yard-mobile,
.yard-mobile-bar,
.cantine-mobile-switch {
    display: none;
}

.auth-form {
    display: grid;
    gap: 14px;
    margin-top: 0;
}

.auth-form label {
    display: grid;
    gap: 7px;
}

.auth-form label > span {
    font-family: "Special Elite", monospace;
    font-size: 0.54rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(244, 234, 213, 0.6);
}

.auth-form input {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 2.5px solid #0a0708;
    background: rgba(10, 7, 8, 0.65);
    color: #f4ead5;
    box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.3);
}

.auth-form input:focus {
    outline: none;
    border-color: #d22b2b;
}

.auth-form .button--primary {
    margin-top: 6px;
    background: #d22b2b;
    border: 3px solid #0a0708;
    border-radius: 12px;
    box-shadow: 4px 4px 0 #0a0708;
    color: #f4ead5;
    font-family: "Bowlby One", sans-serif;
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    min-height: 52px;
    transition: transform 0.1s, box-shadow 0.1s;
}

.auth-form .button--primary:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 #0a0708;
}

.auth-form .button--primary:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 #0a0708;
}

.auth-links {
    margin-top: 18px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    font-family: "Special Elite", monospace;
    font-size: 0.78rem;
    color: rgba(244, 234, 213, 0.5);
}

.auth-links a {
    color: #d22b2b;
}

.form-errors {
    margin: 0 0 18px;
    padding: 14px 16px;
    border-radius: 10px;
    border: 2px solid rgba(210, 43, 43, 0.5);
    background: rgba(210, 43, 43, 0.12);
}

.form-errors p {
    margin: 0;
    font-size: 0.84rem;
    color: #ff8080;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 0 18px;
    border-radius: 14px;
    border: 1px solid var(--stroke-strong);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.button:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: rgba(208, 169, 95, 0.42);
}

.button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.button--primary {
    border-color: rgba(208, 169, 95, 0.45);
    background: linear-gradient(180deg, rgba(208, 169, 95, 0.22), rgba(208, 169, 95, 0.1));
}

.button--ghost {
    background: transparent;
}

.button--wide {
    width: 100%;
}

.badge,
.pill,
.zone-card__tag,
.zone-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--stroke-strong);
    background: rgba(255, 255, 255, 0.035);
    color: var(--text-soft);
    font-size: 0.9rem;
}

.badge--enemy {
    color: #f4b1b1;
}

.badge--founder {
    color: #f3d28d;
}

.badge--guard {
    color: #94b8ef;
}

.badge--inmate {
    color: #bfc7d6;
}

.pill--money {
    color: #f6d88f;
}

.pill--food {
    color: #b8dfab;
}

.status-strip,
.metric-pills,
.stats-inline,
.reward-line,
.account-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.status-strip--spaced {
    margin-bottom: 34px;
}

.split-layout,
.card-grid,
.stats-grid,
.combat-columns,
.account-grid,
.roster-list {
    display: grid;
    gap: 34px;
}

.split-layout {
    grid-template-columns: minmax(0, 1.6fr) minmax(320px, 0.95fr);
    align-items: start;
}

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

.card-grid--combat-select {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.card-grid--three {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.panel {
    padding: 32px;
}

.panel--slim {
    padding: 18px 22px;
    margin-bottom: 24px;
}

.active-fight-banner {
    display: flex;
    justify-content: flex-end;
}

.enemy-card__header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 16px;
}

.enemy-card h2,
.action-card h2 {
    margin: 14px 0 18px;
    font-size: 1.55rem;
    line-height: 1.05;
}

.fight-gains {
    display: flex;
    gap: 18px;
    margin: 20px 0 24px;
    color: #f0d082;
}

.section-stack {
    display: grid;
    gap: 52px;
}

.section-block {
    display: grid;
    gap: 22px;
}

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.section-head__button {
    min-height: 42px;
    padding: 0 14px;
}

.section-block h2 {
    margin: 0;
    font-size: 1.2rem;
}

.object-card {
    display: grid;
    gap: 20px;
    min-height: 260px;
}

.object-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.object-card__head h3 {
    margin: 0;
    font-size: 2.15rem;
    line-height: 0.95;
}

.object-card__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--stroke-strong);
    background: rgba(255, 255, 255, 0.04);
    color: #f0d082;
    font-size: 0.95rem;
    white-space: nowrap;
}

.object-card__meta {
    margin-top: auto;
    color: var(--text-soft);
    font-size: 0.88rem;
}

.enemy-select-card {
    display: grid;
    gap: 20px;
    min-height: 240px;
}

.enemy-select-card h2 {
    margin: 0;
    font-size: 2rem;
    line-height: 0.95;
}

.enemy-select-card__bar {
    display: grid;
    gap: 10px;
    margin-top: auto;
}

.enemy-select-card__bar small,
.progress-card small {
    color: var(--text-soft);
}

.pve-gang-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
}

.pve-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    justify-items: center;
    gap: 12px;
    padding: 20px 18px;
}

.pve-timeline__line {
    position: absolute;
    left: 44px;
    right: 44px;
    top: 50%;
    height: 2px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(208, 169, 95, 0.35));
    border-radius: 999px;
}

.pve-gang-node {
    position: relative;
    z-index: 1;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(12, 16, 23, 0.86);
    color: var(--text-soft);
    font-weight: 800;
    letter-spacing: 0.08em;
    box-shadow: var(--shadow);
}

.pve-gang-node--selected {
    border-color: rgba(208, 169, 95, 0.38);
    color: #f0d082;
}

.pve-gang-node--completed {
    background: rgba(99, 181, 121, 0.12);
    border-color: rgba(99, 181, 121, 0.32);
    color: #bde8c9;
}

.pve-gang-node--locked {
    opacity: 0.4;
}

.pve-gang-node__number {
    font-size: 0.76rem;
}

.pve-gang-panel {
    display: grid;
    gap: 18px;
}

.pve-gang-panel__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.pve-gang-panel__header h2,
.pve-choice-card h3 {
    margin: 0;
}

.pve-gang-panel__badge,
.pve-choice-card__tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-soft);
    font-size: 0.78rem;
}

.pve-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.pve-action-stack {
    display: grid;
    gap: 14px;
    max-width: 320px;
    justify-self: center;
    width: 100%;
}

.pve-help {
    text-align: left;
    gap: 10px;
}

.pve-help p {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.45;
}

.pve-help__toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    color: var(--text-soft);
}

/* pve-view modal styles now unified in base modal__dialog */

.pve-view .modal__dialog .yard-challenge,
.pve-view .modal__dialog .pve-help {
    position: relative;
    z-index: 1;
    padding: 20px 20px 24px;
    display: grid;
    gap: 12px;
}

.pve-view .modal__dialog .pve-help p {
    color: rgba(10, 7, 8, 0.8);
    font-family: "Special Elite", var(--font-ui);
    font-size: 0.92rem;
}

.pve-view .modal__dialog .pve-help__toggle {
    color: rgba(10, 7, 8, 0.7);
    font-family: "Special Elite", var(--font-ui);
}

.pve-view .modal__dialog .button--primary {
    background: #d22b2b;
    color: #f4ead5;
    border: 3px solid #0a0708;
    box-shadow: 4px 4px 0 #0a0708;
    border-radius: 2px;
    font-family: "Bowlby One", "Anton", var(--font-ui);
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.kitchen-card__time {
    text-align: center;
}

.pve-choice-card {
    min-height: 250px;
    display: grid;
    gap: 18px;
}

.pve-choice-card__body {
    display: grid;
    gap: 12px;
    align-content: start;
}

.pve-choice-card__body h3 {
    font-size: 1.5rem;
}

.pve-choice-card__text {
    margin: 0;
    color: var(--text-soft);
}

.pve-choice-card--boss .pve-choice-card__text {
    color: #f0d082;
}

.pve-gang-empty {
    min-height: 220px;
    display: grid;
    place-items: center;
    text-align: center;
    color: var(--text-soft);
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.025);
}

/* ─── LE QUARTIER : STYLE COMIC BD ─── */
.pve-view .pve-timeline {
    border: 4px solid #0a0708;
    border-radius: 6px;
    box-shadow: 5px 5px 0 #0a0708;
    background: #1a120e;
    padding: 16px 14px;
    position: relative;
    overflow: hidden;
}

.pve-view .pve-timeline::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 2px 2px, rgba(244, 234, 213, 0.06) 0 1px, transparent 1px);
    background-size: 6px 6px;
    pointer-events: none;
}

.pve-view .pve-timeline__line {
    background: linear-gradient(90deg, rgba(244, 234, 213, 0.12), rgba(210, 43, 43, 0.45));
    border-radius: 0;
    height: 3px;
}

.pve-view .pve-gang-node {
    width: 52px;
    height: 52px;
    border: 3px solid rgba(244, 234, 213, 0.22);
    border-radius: 6px;
    background: rgba(10, 7, 8, 0.86);
    color: rgba(244, 234, 213, 0.6);
    font-family: "JetBrains Mono", var(--font-mono);
    font-size: 0.82rem;
    font-weight: 700;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.5);
    letter-spacing: 0.06em;
}

.pve-view .pve-gang-node--selected {
    border: 3px solid #e8b923;
    background: rgba(232, 185, 35, 0.14);
    color: #e8b923;
    box-shadow: 3px 3px 0 rgba(232, 185, 35, 0.4);
}

.pve-view .pve-gang-node--completed {
    border-color: #3a8fc4;
    background: rgba(58, 143, 196, 0.14);
    color: #8ed2f8;
    box-shadow: 3px 3px 0 rgba(58, 143, 196, 0.3);
}

.pve-view .pve-gang-node--locked {
    opacity: 0.38;
}

.pve-view .pve-gang-panel {
    border: 4px solid #0a0708;
    border-radius: 6px;
    box-shadow: 6px 6px 0 #0a0708;
    background: #f4ead5;
    padding: 20px;
    color: #0a0708;
    position: relative;
    overflow: hidden;
}

.pve-view .pve-gang-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 2px 2px, rgba(10, 7, 8, 0.12) 0 1px, transparent 1px);
    background-size: 6px 6px;
    opacity: 0.18;
    pointer-events: none;
}

.pve-view .pve-gang-panel__header .eyebrow {
    font-family: "Special Elite", var(--font-ui);
    color: rgba(10, 7, 8, 0.6);
    letter-spacing: 0.2em;
}

.pve-view .pve-gang-panel__header h2 {
    font-family: "Anton", "Bowlby One", var(--font-ui);
    font-size: 2rem;
    color: #0a0708;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 0.92;
    text-shadow: 2px 2px 0 rgba(244, 234, 213, 0.6), 3px 3px 0 #0a0708;
}

.pve-view .pve-action-stack .button {
    border: 3px solid #0a0708;
    border-radius: 4px;
    font-family: "Bowlby One", "Anton", var(--font-ui);
    font-size: 1rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: 4px 4px 0 #0a0708;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.pve-view .pve-action-stack .button:hover:not(:disabled) {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 #0a0708;
}

.pve-view .pve-action-stack .button--ghost {
    background: #f4ead5;
    color: #0a0708;
    border-color: #0a0708;
}

.pve-view .pve-action-stack .button--primary {
    background: linear-gradient(180deg, #d22b2b, #b01c1c);
    color: #f4ead5;
    border-color: #0a0708;
}

.pve-view .pve-gang-empty {
    border: 3px dashed rgba(10, 7, 8, 0.22);
    background: rgba(10, 7, 8, 0.04);
    border-radius: 4px;
    color: rgba(10, 7, 8, 0.6);
}

.pve-view .page-auto-topbar h1 {
    font-family: "Anton", "Bowlby One", var(--font-ui);
    color: #f4ead5;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.8);
}

.fight-layout {
    display: grid;
    grid-template-columns: minmax(290px, 360px) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

.fight-aside {
    display: grid;
    gap: 24px;
}

.fight-reward {
    display: grid;
    gap: 10px;
    padding: 18px;
    border-radius: 18px;
    border: 1px solid var(--stroke);
    background: rgba(255, 255, 255, 0.03);
}

.fight-reward__label {
    color: var(--text-dim);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
}

.fight-reward strong {
    font-size: 1.2rem;
    color: #f0d082;
}

.fight-topbar {
    display: grid;
    gap: 18px;
    margin-bottom: 28px;
}

.fight-topbar__rewards {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.fight-topbar__form {
    display: flex;
    justify-content: flex-start;
}

.progress-card {
    display: grid;
    gap: 10px;
    max-width: 380px;
}

.fight-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.stock-card,
.stat-card,
.roster-entry {
    padding: 14px;
    border-radius: 16px;
    border: 1px solid var(--stroke);
    background: rgba(255, 255, 255, 0.03);
}

.stock-card span,
.stat-card span,
.roster-entry span,
.roster-entry small {
    display: block;
    color: var(--text-soft);
}

.stock-card strong,
.stat-card strong {
    display: block;
    margin-top: 6px;
    font-size: 1.12rem;
}

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

.roster-list--wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.activity-list,
.log-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.activity-list li,
.log-list li {
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0, 0, 0, 0.16);
    color: var(--text-soft);
}

.combat-shell {
    display: grid;
    gap: 22px;
}

.combat-topline {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: start;
}

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

.combat-side__title {
    margin-bottom: 10px;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.76rem;
}

.progress {
    position: relative;
    width: 100%;
    height: 14px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.progress__fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    transition: width 0.2s ease;
}

.progress__fill--player {
    background: linear-gradient(90deg, #67cb83, #9fe9b6);
}

.progress__fill--enemy {
    background: linear-gradient(90deg, #b83838, #f08a77);
}

.progress__fill--xp {
    background: linear-gradient(90deg, #9eaad7, #d0a95f);
}

.progress--attack {
    height: 9px;
}

.progress__fill--attack-player {
    background: linear-gradient(90deg, rgba(103, 203, 131, 0.26), #67cb83);
}

.progress__fill--attack-enemy {
    background: linear-gradient(90deg, rgba(240, 138, 119, 0.28), #f08a77);
}

.metric-line {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    color: var(--text-soft);
}

.combat-message {
    margin: 0;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--stroke);
    background: rgba(255, 255, 255, 0.025);
}

.combat-log {
    border-top: 1px solid var(--stroke);
    padding-top: 18px;
}

.attack-progress {
    margin-top: 12px;
}

.log-list {
    max-height: 420px;
    overflow: auto;
    font-family: var(--font-mono);
    font-size: 0.92rem;
}

.log-list__empty {
    color: var(--text-dim);
}

.account-grid {
    grid-template-columns: 1fr;
    margin: 22px 0;
}

.modal[hidden] {
    display: none;
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(4, 5, 8, 0.78);
    backdrop-filter: blur(4px);
}

/* ── Unified BD Modal Dialog ─────────────────────────────────────────────── */
.modal__dialog {
    position: relative;
    z-index: 1;
    width: min(480px, calc(100vw - 20px));
    max-height: min(74vh, 560px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 6px;
    border: 4px solid #0a0708;
    background: #f4ead5;
    color: #0a0708;
    box-shadow: 6px 6px 0 #0a0708;
    padding: 0;
}

.modal__dialog::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 2px 2px, rgba(10, 7, 8, 0.07) 0 0.9px, transparent 0.9px);
    background-size: 6px 6px;
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
}

.modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px 12px;
    border-bottom: 3px solid rgba(10, 7, 8, 0.14);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    margin: 0;
}

.modal__header h2 {
    margin: 0;
    font-family: "Bowlby One", sans-serif;
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #0a0708;
}

.modal__body {
    padding: 16px 18px;
    position: relative;
    z-index: 1;
}

.modal__footer {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 12px 18px 14px;
    border-top: 3px solid rgba(10, 7, 8, 0.12);
    position: relative;
    z-index: 1;
    margin: 0;
    flex-wrap: wrap;
}

.modal__footer .bd-create-btn {
    flex: 1;
}

.modal__warning {
    font-family: "Special Elite", monospace;
    font-size: 0.9rem;
    color: #0a0708;
    line-height: 1.5;
    margin: 0;
}

/* Close / icon button inside any modal */
.modal .icon-button,
.modal .bd-modal-close {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 3px solid #0a0708;
    border-radius: 4px;
    background: #0a0708;
    color: #f4ead5;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    box-shadow: 2px 2px 0 rgba(10, 7, 8, 0.35);
    flex-shrink: 0;
    padding: 0;
    transition: transform 0.1s;
}

.modal .icon-button:hover,
.modal .bd-modal-close:hover {
    transform: translate(-1px, -1px);
}

/* Width variants */
.modal__dialog--wide {
    width: min(640px, calc(100vw - 20px));
}

/* Compact variant for edit-style modals */
.modal__dialog--sm {
    width: min(400px, calc(100vw - 20px));
    max-height: min(62vh, 480px);
}

/* Profile: tall fixed-height, inner scroll via profile-modal-scroll */
.modal__dialog--profile {
    width: min(840px, calc(100vw - 20px));
    height: min(700px, calc(100dvh - 40px));
    max-height: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Gang profile: narrower fixed-height dossier */
.modal__dialog--gang-profile {
    width: min(560px, calc(100vw - 20px));
    height: min(640px, calc(100dvh - 40px));
    max-height: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Chat / messaging: fixed height, only inner msgs area scrolls */
.modal__dialog--chat {
    width: min(540px, calc(100vw - 20px));
    height: min(74vh, 560px);
    max-height: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal__msgs {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    z-index: 1;
}

.modal__msgs .yard-msg-empty p {
    color: rgba(10, 7, 8, 0.45);
    font-family: "Special Elite", monospace;
    font-size: 12px;
    text-align: center;
    padding: 24px 0;
    margin: 0;
}

.modal__chat-form {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 12px;
    border-top: 3px solid rgba(10, 7, 8, 0.14);
    position: relative;
    z-index: 1;
}

.modal__chat-input {
    flex: 1;
    height: 42px;
    border: 3px solid #0a0708;
    border-radius: 4px;
    padding: 0 12px;
    font-family: "Special Elite", monospace;
    font-size: 16px;
    background: #fff;
    color: #0a0708;
    outline: none;
}

.modal__chat-input:focus {
    border-color: #d22b2b;
}

.modal__chat-send {
    flex-shrink: 0;
    height: 42px;
    padding: 0 16px;
    background: #d22b2b;
    color: #f4ead5;
    border: 3px solid #0a0708;
    border-radius: 4px;
    box-shadow: 3px 3px 0 #0a0708;
    font-family: "Bowlby One", sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.1s, box-shadow 0.1s;
}

.modal__chat-send:hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 #0a0708;
}

/* Old-system buttons inside BD modals */
.modal .button {
    color: #0a0708;
    background: rgba(10, 7, 8, 0.06);
    border-color: rgba(10, 7, 8, 0.28);
    border-radius: 6px;
}

.modal .button--primary {
    background: #d22b2b;
    color: #f4ead5;
    border: 3px solid #0a0708;
    border-radius: 4px;
    box-shadow: 3px 3px 0 #0a0708;
    font-family: "Bowlby One", sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
}

.modal .button--primary:hover:not(:disabled) {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 #0a0708;
    border-color: #0a0708;
}

.modal .button--secondary,
.modal .button--ghost {
    color: #0a0708;
    background: transparent;
    border-color: rgba(10, 7, 8, 0.3);
}

.app-body.modal-open {
    overflow: hidden;
}

.hub-world {
    position: relative;
    min-height: calc(100vh - 88px);
    display: grid;
    gap: 18px;
}

.hub-heading {
    grid-column: 1 / -1;
    grid-row: 1;
    padding: 0 4px 0;
    margin-bottom: 0;
    pointer-events: none;
    user-select: none;
}

.hub-heading__eyebrow {
    display: block;
    margin: 0 0 2px;
    font-family: "Special Elite", monospace;
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #cdbfa3;
    opacity: 0.7;
}

.hub-heading__title {
    margin: 0;
    font-family: "Bowlby One", var(--font-ui);
    font-size: 2.2rem;
    line-height: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #f4ead5;
}

.hub-heading__ou {
    display: block;
    font-family: "Anton", var(--font-ui);
    font-size: 2.8rem;
    color: #d22b2b;
    text-shadow: 2px 2px 0 #f4ead5;
    letter-spacing: 0.06em;
}

.global-hud,
.hub-hud {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    gap: 8px;
    align-items: center;
    padding-right: 0;
}

.global-hud-shell {
    position: fixed;
    top: 14px;
    left: 50%;
    z-index: 40;
    display: grid;
    row-gap: 8px;
    justify-items: stretch;
    align-items: center;
    width: min(520px, calc(100% - 24px));
    transform: translateX(-50%);
}

.global-hud-backdrop {
    position: fixed;
    inset: 0 0 auto 0;
    height: 112px;
    z-index: 35;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(12, 8, 9, 0.74) 0%, rgba(12, 8, 9, 0.34) 62%, rgba(12, 8, 9, 0) 100%);
}

.global-hud {
    min-width: 0;
}

.hud-profile {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 3px 10px 3px 3px;
    border-radius: 999px;
    border: 3px solid var(--comic-ink);
    background: #0a0708;
    box-shadow: 3px 3px 0 var(--comic-ink);
    appearance: none;
    cursor: pointer;
    text-align: left;
}

.hud-profile--account:hover,
.hud-profile--account:focus-visible {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--comic-ink);
}

.hud-profile--account:focus-visible {
    outline: 2px solid rgba(244, 234, 213, 0.95);
    outline-offset: 2px;
}

.hud-profile__avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--comic-paper);
    display: block;
    object-fit: cover;
    flex-shrink: 0;
}

.hud-profile__meta {
    display: grid;
    gap: 1px;
    line-height: 1;
    align-items: start;
}

.hud-profile__meta strong {
    font-family: "Archivo Black", "Bowlby One", var(--font-ui);
    font-size: 0.64rem;
    letter-spacing: 0.06em;
    color: #f8f1de;
}

.hud-profile__meta small {
    font-family: var(--font-mono);
    font-size: 0.5rem;
    color: rgba(248, 241, 222, 0.74);
}

.hud-boosts {
    position: fixed;
    right: 14px;
    top: 88px;
    z-index: 38;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    width: auto;
    max-width: 200px;
    pointer-events: none;
}

.fight-view .hud-boosts {
    display: none;
}

/* ─── Fatigue bar (bloc style like ÉNERGIE) ─── */
.hud-fatigue {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    grid-column: 1 / -1;
    padding: 4px 8px;
    background: rgba(10, 7, 8, 0.55);
    border: 2px solid #0a0708;
    border-radius: 6px;
    box-shadow: 2px 2px 0 rgba(10, 7, 8, 0.5);
}

.hud-fatigue__label {
    font-family: "Special Elite", monospace;
    font-size: 0.48rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(244, 234, 213, 0.72);
    flex-shrink: 0;
    min-width: 46px;
}

.hud-fatigue__blocks {
    flex: 1;
    display: flex;
    gap: 3px;
    align-items: center;
}

.hud-fatigue__block {
    flex: 1;
    height: 12px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(10, 7, 8, 0.7);
}

.hud-fatigue__block--filled {
    background: linear-gradient(180deg, #ef5350 0%, #b71c1c 100%);
    border-color: #7f0000;
    box-shadow: inset 0 1px 0 rgba(255, 180, 180, 0.25);
}

.hud-fatigue__count {
    font-family: "JetBrains Mono", monospace;
    font-size: 0.5rem;
    color: rgba(244, 234, 213, 0.65);
    flex-shrink: 0;
    min-width: 30px;
    text-align: right;
    letter-spacing: 0.04em;
}

.hud-steaks {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 100%;
    margin-top: 0;
    padding: 4px 10px;
    grid-column: 1 / -1;
    border-radius: 10px;
    border: 3px solid #0a0708;
    background: #f4ead5;
    box-shadow: 3px 3px 0 var(--comic-ink);
    position: relative;
    overflow: hidden;
}

.hud-steaks::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 2px 2px, rgba(210, 43, 43, 0.12) 0 0.9px, transparent 0.9px);
    background-size: 4px 4px;
    opacity: 0.34;
    pointer-events: none;
}

.hud-steaks__bars {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    width: 100%;
    flex: 1 1 auto;
}

.hud-steak {
    display: block;
    flex: 0 0 auto;
    width: 18px;
    height: 14px;
    border: 0;
    background: transparent;
}

.hud-steak::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: center/contain no-repeat url("../../images/steak_outline.svg");
    transform-origin: center;
}

.hud-steak.is-filled {
    opacity: 1;
}

.hud-steak.is-filled::before {
    background-image: url("../../images/steak.svg");
}

.hud-steak.is-empty {
    opacity: 1;
}

.hud-steak.is-locked {
    opacity: 1;
}
.hud-boost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
    padding: 4px 9px;
    border-radius: 999px;
    border: 2px solid var(--comic-ink);
    background: linear-gradient(180deg, #f6e8c9, #e3c981);
    color: var(--comic-ink);
    font-size: 0.7rem;
    font-family: "Archivo Black", "Bowlby One", var(--font-ui);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
    box-shadow: 2px 2px 0 var(--comic-ink);
}

.hud-boost small {
    color: rgba(10, 7, 8, 0.72);
    font-size: 0.64rem;
    font-family: var(--font-mono);
}

.hud-boost--rest {
    background: linear-gradient(180deg, #dde6fb, #a8badf);
}

.hud-card {
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.hud-card__label {
    display: block;
    margin-bottom: 5px;
    color: var(--comic-ink);
    font-size: 0.62rem;
    font-family: var(--font-mono);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.hud-card strong {
    display: block;
    font-size: 0.88rem;
    font-family: "Archivo Black", "Bowlby One", var(--font-ui);
    letter-spacing: 0.02em;
}

.hud-chip {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 4px 10px;
    border-radius: 10px;
    border: 3px solid var(--comic-ink);
    background: linear-gradient(180deg, #f2c529, #d7a914);
    box-shadow: 3px 3px 0 var(--comic-ink);
    position: relative;
    overflow: hidden;
}

.hud-chip::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 2px 2px, rgba(10, 7, 8, 0.12) 0 0.8px, transparent 0.8px);
    background-size: 4px 4px;
    opacity: 0.32;
    pointer-events: none;
}

.hud-chip strong {
    position: relative;
    display: block;
    font-size: 0.95rem;
}

.hud-chip--gold strong {
    color: var(--comic-ink);
    font-family: "Archivo Black", "Bowlby One", var(--font-ui);
    font-weight: 900;
    letter-spacing: 0.03em;
    font-variant-numeric: tabular-nums;
}

.hud-chip--gold {
    justify-self: end;
}

.hud-card--hp {
    min-width: 0;
}

.hud-bar {
    position: relative;
    width: calc(100% - 10px);
    height: 26px;
    border-radius: 999px;
    overflow: hidden;
    background: #0a0708;
    box-shadow: 3px 3px 0 rgba(10, 7, 8, 0.55);
    padding: 3px;
    box-sizing: content-box;
    margin: 0 auto;
}

.hud-bar__fill {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #d22b2b 0%, #e8b923 100%);
    border-radius: 999px;
    position: relative;
    transition: width 0.35s ease;
}

.hud-bar__fill::before {
    content: "";
    position: absolute;
    inset: 2px 6px auto 6px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.5);
}

.hud-bar__text {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    text-align: center;
    padding: 0 10px;
    font-family: "Anton", "Archivo Black", var(--font-ui);
    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1;
    z-index: 4;
    letter-spacing: 0.06em;
    color: #ffffff;
    -webkit-text-stroke: 1.5px #0a0708;
    paint-order: stroke fill;
    text-shadow:
        1px 0 0 #0a0708,
        -1px 0 0 #0a0708,
        0 1px 0 #0a0708,
        0 -1px 0 #0a0708,
        2px 0 0 #0a0708,
        -2px 0 0 #0a0708,
        0 2px 0 #0a0708,
        0 -2px 0 #0a0708,
        1px 1px 0 #0a0708,
        -1px -1px 0 #0a0708,
        1px -1px 0 #0a0708,
        -1px 1px 0 #0a0708,
        2px 2px 0 #0a0708,
        -2px -2px 0 #0a0708,
        2px -2px 0 #0a0708,
        -2px 2px 0 #0a0708;
}

.hub-scene {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: min-content;
    grid-auto-rows: minmax(160px, auto);
    align-content: start;
    gap: 10px;
    min-height: 760px;
    padding: clamp(155px, 21vh, 188px) 16px 18px;
    border-radius: 22px;
    overflow: hidden;
    border: 4px solid #0a0708;
    background:
        radial-gradient(circle at 30% 0%, #2b1d15, #0f0a08 78%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 24%);
    box-shadow:
        0 14px 0 rgba(10, 7, 8, 0.46),
        0 26px 60px rgba(0, 0, 0, 0.5);
}

.hub-scene::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.08) 0 0.8px, transparent 0.8px),
        radial-gradient(circle at 80% 72%, rgba(0, 0, 0, 0.18) 0 1.1px, transparent 1.1px),
        radial-gradient(circle at 60% 36%, rgba(0, 0, 0, 0.14) 0 0.9px, transparent 0.9px),
        linear-gradient(180deg, rgba(0, 0, 0, 0.38), transparent 28%),
        repeating-linear-gradient(
            180deg,
            transparent 0 11px,
            rgba(255, 255, 255, 0.025) 11px 12px
        );
    background-size: 5px 5px, 7px 7px, 6px 6px, auto, auto;
    opacity: 0.45;
    mix-blend-mode: screen;
    pointer-events: none;
}

.hub-scene::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 120%, rgba(0, 0, 0, 0.62), transparent 46%);
    pointer-events: none;
}

.scene-zone {
    --zone-bg: linear-gradient(180deg, #69768a, #4b5667);
    --zone-ink: #0a0708;
    --zone-tilt: 0deg;
    appearance: none;
    z-index: 1;
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    align-content: start;
    min-height: 156px;
    padding: 12px;
    border-radius: 12px;
    border: 4px solid #0a0708;
    background: var(--zone-bg);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        6px 6px 0 #0a0708;
    color: var(--zone-ink);
    transform: rotate(var(--zone-tilt));
    text-align: left;
    font-family: "Bowlby One", "Archivo Black", var(--font-ui);
    letter-spacing: 0.02em;
    isolation: isolate;
    overflow: visible;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.16s ease;
}

.scene-zone::before,
.scene-zone::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: 10px;
    overflow: hidden;
}

.scene-zone::before {
    inset: 0;
    background:
        radial-gradient(circle at 2px 2px, rgba(10, 7, 8, 0.22) 0 1px, transparent 1px);
    background-size: 6px 6px;
    opacity: 0.22;
    mix-blend-mode: multiply;
}

.scene-zone::after {
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 36%),
        linear-gradient(180deg, transparent 74%, rgba(0, 0, 0, 0.24) 100%);
    opacity: 0.78;
}

.scene-zone:hover,
.scene-zone:focus-visible {
    transform: rotate(var(--zone-tilt)) translate(3px, 3px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        3px 3px 0 #0a0708;
    filter: saturate(1.06);
}

.scene-zone:focus-visible {
    outline: 2px solid rgba(244, 234, 213, 0.95);
    outline-offset: 4px;
}

.scene-zone__head {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.scene-zone__icon {
    position: relative;
    z-index: 2;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    border: 3px solid #0a0708;
    background: #f4ead5;
    box-shadow: 2px 2px 0 #0a0708;
}

.scene-zone__icon svg {
    width: 28px;
    height: 28px;
    stroke: currentColor;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.scene-zone__chip {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 0 7px;
    border-radius: 5px;
    border: 2px solid #0a0708;
    background: #0a0708;
    color: #f4ead5;
    font-family: "JetBrains Mono", var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    white-space: nowrap;
}

.scene-zone__body {
    position: relative;
    z-index: 3;
    margin-top: 10px;
}

.scene-zone__label {
    display: block;
    max-width: 14ch;
    color: var(--zone-ink);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 0.92;
    font-size: clamp(1.08rem, 2.2vw, 1.58rem);
    font-family: "Bowlby One", "Archivo Black", var(--font-ui);
    text-shadow: 1px 1px 0 rgba(244, 234, 213, 0.8);
}

.scene-zone__sub {
    display: block;
    margin-top: 5px;
    font-family: "Special Elite", var(--font-ui);
    font-size: 0.64rem;
    font-weight: 400;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    opacity: 0.82;
}

.scene-zone--pve {
    --zone-bg: linear-gradient(180deg, #d22b2b, #a51f1f);
    --zone-tilt: -1.8deg;
    grid-column: 1 / -1;
    min-height: 176px;
    padding-bottom: 26px;
}

.scene-zone--pve .scene-zone__label {
    font-size: clamp(1.58rem, 3.08vw, 2.12rem);
    max-width: 11ch;
    line-height: 0.9;
    letter-spacing: 0.02em;
    text-shadow:
        2px 2px 0 #f4ead5,
        3px 3px 0 #0a0708;
}

.scene-zone--pve .scene-zone__sub {
    font-size: 0.66rem;
    letter-spacing: 0.1em;
}

.scene-zone__badge-bagarre {
    position: absolute;
    right: 16px;
    bottom: 12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 62px;
    padding: 6px 28px 4px;
    border-radius: 8px;
    border: 4px solid var(--comic-paper);
    background: #0a0708;
    color: var(--comic-yellow);
    font-family: "Bowlby One", "Archivo Black", var(--font-ui);
    font-size: 1.7rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transform: rotate(-3deg);
    box-shadow: 5px 5px 0 #0a0708;
    pointer-events: none;
    animation: hubBagarrePulse 2.1s ease-in-out infinite;
}

.scene-zone__notif {
    position: absolute;
    top: -10px;
    right: -10px;
    z-index: 10;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #0a0708;
    border-radius: 999px;
    background: #d22b2b;
    color: #fff;
    box-shadow: 2px 2px 0 #0a0708;
    font-family: "Bowlby One", "Archivo Black", var(--font-ui);
    font-size: 0.9rem;
    line-height: 1;
}

@keyframes hubBagarrePulse {
    0%,
    100% {
        transform: rotate(-3deg) translateY(0) scale(1);
    }
    50% {
        transform: rotate(-2deg) translateY(-4px) scale(1.03);
    }
}

.scene-zone--gym {
    --zone-bg: linear-gradient(180deg, #3a8fc4, #2f6f9a);
    --zone-tilt: 1.2deg;
}

.scene-zone--yard {
    --zone-bg: linear-gradient(180deg, #e8b923, #ba9018);
    --zone-tilt: -1.3deg;
    grid-column: 1 / -1;
    min-height: 164px;
}

.scene-zone--kitchen {
    --zone-bg: linear-gradient(180deg, #c9821e, #9a6418);
    --zone-tilt: 1.1deg;
}

.scene-zone--gangs {
    --zone-bg: linear-gradient(180deg, #8a3a1c, #672a14);
    --zone-ink: #f4ead5;
    --zone-tilt: -1.5deg;
}

.scene-zone--gangs .scene-zone__icon,
.scene-zone--cell .scene-zone__icon,
.scene-zone--market .scene-zone__icon,
.scene-zone--library .scene-zone__icon,
.scene-zone--vincent .scene-zone__icon {
    background: #cdbfa3;
    color: #0a0708;
}

.scene-zone--gangs .scene-zone__chip,
.scene-zone--cell .scene-zone__chip {
    background: #f4ead5;
    color: #0a0708;
}

.scene-zone--gangs .scene-zone__label,
.scene-zone--cell .scene-zone__label,
.scene-zone--market .scene-zone__label,
.scene-zone--library .scene-zone__label,
.scene-zone--vincent .scene-zone__label {
    text-shadow:
        1px 1px 0 rgba(10, 7, 8, 0.95),
        2px 2px 0 rgba(10, 7, 8, 0.62);
}

.scene-zone--cell {
    --zone-bg: linear-gradient(180deg, #3a4150, #28303e);
    --zone-ink: #f4ead5;
    --zone-tilt: 1deg;
}

.scene-zone--infirmary {
    --zone-bg: linear-gradient(180deg, #a8a394, #7e7a70);
    --zone-tilt: -0.9deg;
}

.scene-zone--market {
    --zone-bg: linear-gradient(180deg, #7a4cb8, #5d398f);
    --zone-ink: #f4ead5;
    --zone-tilt: 1.5deg;
}

.scene-zone--library {
    --zone-bg: linear-gradient(180deg, #3a6644, #2a4a30);
    --zone-ink: #f4ead5;
    --zone-tilt: 0.8deg;
    grid-column: 1 / -1;
}

.scene-zone--library .scene-zone__icon {
    background: #b0cfb8;
}

.scene-zone--library .scene-zone__chip {
    background: #f4ead5;
    color: #0a0708;
}

.scene-zone--library .scene-zone__label {
    max-width: 12ch;
}

.scene-zone--vincent {
    --zone-bg: linear-gradient(180deg, #b84f32, #813421);
    --zone-ink: #f4ead5;
    --zone-tilt: -0.7deg;
    grid-column: 1 / -1;
}

.scene-zone--vincent .scene-zone__icon {
    background: #f0c18a;
}

.scene-zone--vincent .scene-zone__chip {
    background: #f4ead5;
    color: #0a0708;
}

.scene-zone--vincent .scene-zone__label {
    max-width: 12ch;
}

.scene-zone--locked {
    pointer-events: none;
    cursor: default;
    filter: grayscale(45%) brightness(0.78);
}

.scene-zone__lock-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: rgba(10, 7, 8, 0.28);
    border-radius: inherit;
    pointer-events: none;
}

.scene-zone__lock-icon {
    width: 52px;
    height: 52px;
    color: rgba(244, 234, 213, 0.8);
    filter: drop-shadow(0 2px 6px rgba(10, 7, 8, 0.95));
}

.scene-zone__lock-level {
    font-family: "Bowlby One", var(--font-ui);
    font-size: 0.58rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #f4ead5;
    background: rgba(10, 7, 8, 0.72);
    padding: 2px 10px 1px;
    border-radius: 5px;
    border: 1.5px solid rgba(244, 234, 213, 0.25);
    text-shadow: 1px 1px 0 rgba(10, 7, 8, 0.9);
}

.scene-zone--gym .scene-zone__label,
.scene-zone--kitchen .scene-zone__label,
.scene-zone--infirmary .scene-zone__label,
.scene-zone--market .scene-zone__label {
    max-width: 10ch;
}

.scene-zone--gangs .scene-zone__label {
    max-width: 12ch;
    font-size: clamp(1.02rem, 1.92vw, 1.38rem);
}

/* ── Personnages hub ── */
.scene-zone__clip {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

.scene-zone__character {
    position: absolute;
    bottom: 0;
    right: 6px;
    z-index: 2;
    height: 108px;
    width: auto;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(2px 2px 0 rgba(10, 7, 8, 0.35));
}

.scene-zone--pve .scene-zone__character {
    height: 148px;
    right: 18px;
    bottom: 0;
}

.scene-zone--yard .scene-zone__character {
    height: 134px;
    right: 6px;
    bottom: 0;
}

.scene-zone--gym .scene-zone__character {
    height: 118px;
    right: 0;
}

.scene-zone--kitchen .scene-zone__character {
    height: 112px;
    right: 2px;
}

.scene-zone--infirmary .scene-zone__character {
    height: 106px;
    right: 0;
}

.scene-zone--market .scene-zone__character {
    height: 104px;
    right: 0;
}

.scene-zone--cell .scene-zone__character {
    height: 104px;
    right: 4px;
}

.scene-zone--gangs .scene-zone__character {
    height: 96px;
    right: 0;
    bottom: 0;
}

.scene-zone--library .scene-zone__character {
    height: 92px;
    right: 4px;
    bottom: 0;
}

.uniform-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 250px));
    gap: 24px;
    justify-content: start;
}

.uniform-grid--compact {
    grid-template-columns: repeat(auto-fit, minmax(168px, 168px));
    gap: 16px;
}

.gangs-layout {
    display: grid;
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.gangs-layout--single {
    grid-template-columns: 1fr;
}

.gang-status-card,
.gang-directory-panel,
.gang-preview-card,
.gang-pending-card,
.gang-panel,
.gang-hero,
.gang-modal,
.gang-modal__head,
.gang-modal__identity,
.gang-form,
.gang-field,
.gang-preview-card__head,
.gang-preview-card__text,
.gang-hero__cover,
.gang-hero__identity,
.gang-hero__members,
.gang-directory-button__main,
.gang-inline-actions {
    display: grid;
    gap: 16px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.gang-status-card h3,
.gang-directory-panel h3,
.gang-card__title {
    margin: 0;
}

.gang-card__title {
    font-size: 1.2rem;
}

.gang-field span:first-child,
.gang-preview-card__text span,
.gang-directory-link__meta {
    color: var(--text-soft);
    font-size: 0.9rem;
}

.gang-member__role {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(208, 169, 95, 0.28);
    background: rgba(208, 169, 95, 0.08);
    color: #f0d082;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.gang-avatar {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    object-fit: cover;
    border: 1px solid var(--stroke-strong);
    background: rgba(255, 255, 255, 0.03);
}

.gang-avatar--lg {
    width: 72px;
    height: 72px;
    border-radius: 18px;
}

.gang-avatar--xl {
    width: 96px;
    height: 96px;
    border-radius: 22px;
}

.gang-avatar--xxl {
    width: 116px;
    height: 116px;
    border-radius: 24px;
}

.gang-summary-list,
.gang-application-list {
    display: grid;
    gap: 14px;
}

.gang-summary-item,
.gang-member {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}

.gang-summary-item span,
.gang-member__text span {
    color: var(--text-soft);
    font-size: 0.88rem;
}

.gang-members {
    display: grid;
    gap: 12px;
}

.gang-member {
    justify-content: flex-start;
}

.gang-member .player-trigger {
    flex: 1 1 auto;
    min-width: 0;
}

.gang-member__text {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.gang-member__role {
    margin-left: auto;
}

.gang-pending-card,
.gang-preview-card {
    padding: 18px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}

.gang-status-card--mine {
    padding: 22px;
}

.gang-preview-simple,
.gang-preview-simple__head,
.gang-preview-simple__identity {
    display: grid;
    gap: 16px;
}

.gang-preview-simple__head {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
}

.gang-preview-simple__identity strong {
    font-size: 1.4rem;
    line-height: 1;
}

.gang-members--compact .gang-member {
    padding: 12px 14px;
}

.gang-page-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.gang-page-layout--single {
    grid-template-columns: 1fr;
}

.gang-hero {
    grid-template-columns: 1fr;
    align-items: stretch;
    padding: 24px;
}

.gang-hero--centered {
    justify-items: center;
    text-align: center;
    gap: 20px;
}

.gang-hero__cover,
.gang-modal__head {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 18px;
}

.gang-hero__identity h2,
.gang-modal__identity h3 {
    margin: 0;
}

.gang-hero__identity--centered {
    justify-items: center;
}

.gang-hero__title {
    margin: 0;
}

.gang-hero__description {
    max-width: 620px;
}

.gang-hero__actions {
    justify-content: start;
}

.gang-hero__members {
    margin-top: 4px;
    width: min(100%, 760px);
}

.gang-panel {
    padding: 24px;
}

.gang-panel--footer {
    gap: 18px;
}

.gang-directory-button {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    color: inherit;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.gang-directory-button:hover {
    border-color: rgba(208, 169, 95, 0.35);
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-1px);
}

.gang-directory-button__main {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
}

.gang-modal__head--centered {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
}

.gang-directory-link__meta {
    margin: 0;
}

.gang-chat-list {
    max-height: 318px;
    overflow-y: auto;
    padding-right: 6px;
    align-content: start;
}

.gang-pending-card p,
.gang-modal__identity p {
    margin: 0;
}

.gang-chat-list .chat-item:first-child {
    margin-top: 0;
}

.gang-chat-list .chat-item:last-child {
    margin-bottom: 0;
}

.gang-modal__identity p,
.gang-pending-card p {
    color: var(--text-soft);
    font-size: 0.88rem;
}

.gang-chat-composer {
    margin-top: 12px;
}

.gang-inline-form {
    margin: 0;
}

.gang-inline-actions {
    grid-auto-flow: column;
    gap: 10px;
    justify-content: start;
}

.gang-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.gang-button-danger {
    border-color: rgba(211, 90, 90, 0.4);
    color: #f5b8b8;
}

.gang-input,
.gang-select,
.gang-textarea {
    width: 100%;
    min-height: 54px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--stroke);
    background: rgba(8, 11, 16, 0.82);
    color: var(--text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    -webkit-appearance: none;
    appearance: none;
}

.gang-input:focus,
.gang-select:focus,
.gang-textarea:focus {
    outline: 1px solid rgba(208, 169, 95, 0.45);
    border-color: rgba(208, 169, 95, 0.35);
    box-shadow: 0 0 0 4px rgba(208, 169, 95, 0.08);
}

.gang-textarea {
    min-height: 104px;
    resize: vertical;
}

.gang-select {
    padding-right: 48px;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-soft) 50%),
        linear-gradient(135deg, var(--text-soft) 50%, transparent 50%);
    background-position:
        calc(100% - 24px) calc(50% - 2px),
        calc(100% - 18px) calc(50% - 2px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.gang-select option {
    background: #10151d;
    color: var(--text);
}

.gang-image-picker {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.gang-image-picker__option {
    display: block;
    position: relative;
    cursor: pointer;
}

.gang-image-picker__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.gang-image-picker__tile {
    display: block;
    padding: 6px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.gang-image-picker__option:hover .gang-image-picker__tile {
    transform: translateY(-1px);
    border-color: rgba(208, 169, 95, 0.25);
    background: rgba(255, 255, 255, 0.05);
}

.gang-image-picker__input:checked + .gang-image-picker__tile {
    border-color: rgba(208, 169, 95, 0.62);
    background: rgba(208, 169, 95, 0.08);
    box-shadow: 0 0 0 3px rgba(208, 169, 95, 0.12);
}

.gang-image-picker__image {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 14px;
    object-fit: cover;
}

.gang-member__kick-button {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(211, 90, 90, 0.28);
    background: rgba(211, 90, 90, 0.08);
    color: #f3b3b3;
    font-size: 1.2rem;
}

.gang-member__kick-button:hover {
    border-color: rgba(211, 90, 90, 0.42);
    background: rgba(211, 90, 90, 0.14);
}

.gang-chat-page__composer {
    margin-top: 20px;
}

.modal .gang-image-picker {
    grid-template-columns: repeat(5, minmax(54px, 64px));
    justify-content: center;
}

.modal .gang-image-picker__tile {
    padding: 4px;
    border-radius: 14px;
}

.modal .gang-image-picker__image {
    border-radius: 10px;
}

/* ── BD Comic Design System (Gang pages) ── */

:root {
    --bd-ink: #0a0708;
    --bd-paper: #1a120e;
    --bd-cream: #f4ead5;
    --bd-red: #d22b2b;
    --bd-yellow: #e8b923;
    --bd-cyan: #3a8fc4;
    --bd-rust: #8a3a1c;
    --bd-green: #3e8b3a;
    --bd-purple: #7a4cb8;
    --bd-bone: #cdbfa3;
}

.bd-page-wrap {
    max-width: 480px;
    margin: 0 auto;
    padding: 4px 0 40px;
    display: grid;
    gap: 14px;
}

.bd-panel {
    position: relative;
    background: var(--bd-cream);
    color: var(--bd-ink);
    border: 3px solid var(--bd-ink);
    box-shadow: 5px 5px 0 var(--bd-ink);
    overflow: hidden;
}

/* Gang banner */
.bd-gang-banner {
    position: relative;
    border: 3px solid var(--bd-ink);
    box-shadow: 3px 3px 0 var(--bd-ink);
    display: grid;
    place-items: center;
    overflow: hidden;
    flex-shrink: 0;
}

.bd-gang-banner__dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(10, 7, 8, 0.22) 1px, transparent 1px);
    background-size: 3px 3px;
    pointer-events: none;
}

.bd-gang-banner__stripes {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(0, 0, 0, 0.08) 6px 7px);
    pointer-events: none;
}

.bd-gang-banner__glyph {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.bd-gang-banner__glyph svg {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
}

.bd-gang-banner__tag {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bd-ink);
    color: var(--bd-cream);
    text-align: center;
    font-family: "Bowlby One", sans-serif;
    font-size: 10px;
    letter-spacing: 2px;
    padding: 2px 0;
    text-transform: uppercase;
}

@keyframes orRoyalShimmer {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.bd-gang-banner--or-royal {
    background: linear-gradient(135deg, #7a5500 0%, #c9a227 20%, #f9e84a 45%, #d4a017 70%, #7a5500 100%) !important;
    background-size: 300% 300% !important;
    animation: orRoyalShimmer 2.5s ease infinite;
}

.bd-reward-swatch--or-royal {
    background: linear-gradient(135deg, #7a5500 0%, #c9a227 20%, #f9e84a 45%, #d4a017 70%, #7a5500 100%) !important;
    background-size: 300% 300% !important;
    animation: orRoyalShimmer 2.5s ease infinite;
}

/* Top bar */
.bd-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0 6px;
}

.bd-topbar__back {
    display: inline-flex;
    flex: 0 0 56px;
    justify-content: center;
    align-items: center;
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
    padding: 0 0 2px;
    margin: 0;
    background: var(--bd-cream);
    color: var(--bd-ink);
    border: 3px solid var(--bd-ink);
    border-radius: 0;
    box-shadow: 3px 3px 0 var(--bd-ink);
    font-family: "Bowlby One", sans-serif;
    font-size: 32px;
    letter-spacing: 0;
    line-height: 1;
    text-decoration: none;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.bd-topbar__back:hover,
.bd-topbar__back:focus-visible {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--bd-ink);
}

.bd-topbar__titles {
    flex: 1;
    min-width: 0;
}

.bd-topbar__title {
    font-family: "Anton", sans-serif;
    font-size: 22px;
    line-height: 0.95;
    letter-spacing: 1.2px;
    color: var(--bd-cream);
    text-transform: uppercase;
    margin: 0;
}

.bd-topbar__subtitle {
    font-family: "Special Elite", monospace;
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--bd-bone);
    text-transform: uppercase;
    opacity: 0.7;
    margin: 2px 0 0;
}

/* Stamp */
.bd-stamp {
    display: inline-block;
    padding: 2px 8px;
    border: 2.5px solid var(--bd-red);
    color: var(--bd-red);
    font-family: "Special Elite", monospace;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transform: rotate(-8deg);
    flex-shrink: 0;
    white-space: nowrap;
}

.bd-stamp--yellow {
    border-color: var(--bd-yellow);
    color: var(--bd-yellow);
    transform: rotate(5deg);
}

/* Notices */
.bd-notice {
    padding: 10px 14px;
    border: 3px solid var(--bd-ink);
    font-family: "Special Elite", monospace;
    font-size: 0.85rem;
    box-shadow: 3px 3px 0 var(--bd-ink);
}

.bd-notice--ok {
    background: rgba(62, 139, 58, 0.12);
    color: #3e8b3a;
    border-color: #3e8b3a;
    box-shadow: 3px 3px 0 #3e8b3a;
}

.bd-notice--err {
    background: rgba(210, 43, 43, 0.1);
    color: var(--bd-red);
    border-color: var(--bd-red);
    box-shadow: 3px 3px 0 var(--bd-red);
}

.bd-notice--warn {
    background: rgba(232, 185, 35, 0.1);
    color: var(--bd-yellow);
    border-color: var(--bd-yellow);
    box-shadow: 3px 3px 0 var(--bd-yellow);
}

/* Preview panel */
.bd-preview-panel {
    padding: 14px 16px;
}

.bd-preview-inner {
    display: flex;
    align-items: center;
    gap: 14px;
}

.bd-preview-text {
    flex: 1;
    min-width: 0;
}

.bd-preview-name {
    font-family: "Anton", sans-serif;
    font-size: 17px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--bd-ink);
    line-height: 1;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bd-preview-desc {
    font-family: "Special Elite", monospace;
    font-size: 11px;
    color: rgba(10, 7, 8, 0.52);
    line-height: 1.35;
}

/* Form */
.bd-gang-form {
    display: grid;
    gap: 14px;
}

.bd-field {
    display: grid;
    gap: 6px;
}

.bd-field-label {
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    letter-spacing: 2px;
    color: rgba(244, 234, 213, 0.52);
    text-transform: uppercase;
}

.bd-input {
    width: 100%;
    background: var(--bd-cream);
    border: 3px solid var(--bd-ink);
    box-shadow: 3px 3px 0 var(--bd-ink);
    padding: 11px 14px;
    color: var(--bd-ink);
    font-family: "Archivo Black", sans-serif;
    font-size: 0.92rem;
    box-sizing: border-box;
    outline: none;
    border-radius: 0;
    transition: border-color 0.12s, box-shadow 0.12s;
}

.bd-input:focus {
    border-color: var(--bd-yellow);
    box-shadow: 3px 3px 0 var(--bd-yellow);
}

.bd-input::placeholder {
    color: rgba(10, 7, 8, 0.32);
    font-family: "Special Elite", monospace;
    font-size: 0.9rem;
    font-weight: normal;
}

.bd-input--textarea {
    resize: vertical;
    min-height: 72px;
    font-family: "Special Elite", monospace;
    font-size: 0.88rem;
    font-weight: normal;
}

/* Color picker */
.bd-color-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.bd-color-swatch {
    width: 38px;
    height: 38px;
    border: 3px solid transparent;
    box-shadow: 3px 3px 0 var(--bd-ink);
    cursor: pointer;
    padding: 0;
    transition: transform 0.1s, box-shadow 0.1s, border-color 0.1s;
    outline: none;
}

.bd-color-swatch.is-active {
    border-color: var(--bd-yellow);
    transform: scale(1.14) rotate(-4deg);
    box-shadow: 3px 3px 0 var(--bd-yellow);
}

/* Icon picker */
.bd-icon-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.bd-icon-btn {
    width: 44px;
    height: 44px;
    background: var(--bd-cream);
    border: 3px solid var(--bd-ink);
    box-shadow: 3px 3px 0 var(--bd-ink);
    display: grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
    transition: transform 0.1s, box-shadow 0.1s, border-color 0.1s;
    outline: none;
}

.bd-icon-btn.is-active {
    border-color: var(--bd-yellow);
    box-shadow: 3px 3px 0 var(--bd-yellow);
    transform: rotate(-5deg) scale(1.1);
}

.bd-icon-btn svg {
    width: 70%;
    height: 70%;
    display: block;
    pointer-events: none;
    flex-shrink: 0;
}

/* Gang edit modal — banner preview */
.gang-edit-preview {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: rgba(10, 7, 8, 0.06);
    border-radius: 10px;
}

.gang-edit-preview__name {
    margin: 0;
    font-family: 'Special Elite', monospace;
    font-size: 1.05rem;
    font-weight: 700;
    color: #0a0708;
    word-break: break-word;
}

/* Create / submit button */
.bd-create-btn {
    width: 100%;
    background: var(--bd-red);
    color: var(--bd-cream);
    border: 3px solid var(--bd-ink);
    box-shadow: 5px 5px 0 var(--bd-ink);
    padding: 16px;
    font-family: "Bowlby One", sans-serif;
    font-size: 17px;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    outline: none;
    transition: transform 0.08s, box-shadow 0.08s;
    display: block;
    text-align: center;
    text-decoration: none;
}

.bd-create-btn--locked {
    background: rgba(232, 185, 35, 0.13);
    color: rgba(10, 7, 8, 0.5);
    border: 2px dashed rgba(10, 7, 8, 0.28);
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: none;
}

.bd-create-btn:hover {
    transform: translate(-1px, -1px);
    box-shadow: 6px 6px 0 var(--bd-ink);
}

.bd-create-btn:active {
    transform: translate(3px, 3px);
    box-shadow: 2px 2px 0 var(--bd-ink);
}

/* Separator */
.bd-separator {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(244, 234, 213, 0.32);
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.bd-separator::before,
.bd-separator::after {
    content: "";
    flex: 1;
    height: 2px;
    background: rgba(244, 234, 213, 0.12);
}

/* Directory open button */
.bd-dir-btn {
    width: 100%;
    background: var(--bd-cream);
    border: 3px solid var(--bd-ink);
    box-shadow: 5px 5px 0 var(--bd-ink);
    padding: 14px 14px 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    outline: none;
    transition: transform 0.08s, box-shadow 0.08s;
}

.bd-dir-btn:hover {
    transform: translate(-1px, -1px);
    box-shadow: 6px 6px 0 var(--bd-ink);
}

.bd-dir-btn__label {
    flex: 1;
    font-family: "Bowlby One", sans-serif;
    font-size: 14px;
    letter-spacing: 0.5px;
    color: var(--bd-ink);
    text-transform: uppercase;
    text-align: left;
}

.bd-dir-btn__arrow {
    width: 36px;
    height: 36px;
    background: var(--bd-ink);
    color: var(--bd-cream);
    display: grid;
    place-items: center;
    font-size: 22px;
    font-family: "Bowlby One", sans-serif;
    flex-shrink: 0;
}

/* Directory modal box */
/* bd-modal-box is now an alias for modal__dialog — HTML uses modal__dialog directly */

.bd-dir-search-wrap {
    padding: 12px 16px;
    border-bottom: 2px solid rgba(10, 7, 8, 0.12);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.bd-dir-list {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.bd-dir-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 2px solid rgba(10, 7, 8, 0.09);
}

.bd-dir-row__info {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 2px;
}

.bd-dir-row__name {
    font-family: "Bowlby One", sans-serif;
    font-size: 12px;
    color: #0a0708;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bd-dir-row__meta {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    color: rgba(10, 7, 8, 0.6);
    letter-spacing: 0.3px;
}

.bd-dir-row__preview {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    padding: 0;
}

.bd-dir-row__apply {
    flex-shrink: 0;
}

.bd-dir-empty {
    text-align: center;
    color: rgba(10, 7, 8, 0.55);
    font-family: "Special Elite", monospace;
    font-size: 13px;
    padding: 20px 16px;
}

/* Apply / postuler button */
.bd-apply-btn {
    background: var(--bd-red);
    color: var(--bd-cream);
    border: 2.5px solid var(--bd-ink);
    box-shadow: 3px 3px 0 var(--bd-ink);
    padding: 6px 12px;
    font-family: "Bowlby One", sans-serif;
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    outline: none;
    display: block;
    transition: transform 0.08s;
}

.bd-apply-btn:hover {
    transform: translate(-1px, -1px);
}

.bd-apply-btn--sent {
    background: rgba(10, 7, 8, 0.07);
    color: rgba(10, 7, 8, 0.5);
    cursor: default;
    box-shadow: none;
    border-color: rgba(10, 7, 8, 0.2);
}

.bd-apply-btn--locked {
    background: rgba(232, 185, 35, 0.12);
    color: rgba(10, 7, 8, 0.55);
    border: 2px dashed rgba(10, 7, 8, 0.28);
    box-shadow: none;
    cursor: not-allowed;
    font-size: 0.52rem;
    letter-spacing: 0.04em;
    pointer-events: none;
}

/* Gang hero card (gang.php) */
.bd-gang-hero-card {
    overflow: hidden;
}

.bd-gang-hero-card__content {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
}

.bd-gang-hero-card__info {
    flex: 1;
    min-width: 0;
}

.bd-gang-hero-card__name {
    font-family: "Anton", sans-serif;
    font-size: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--bd-cream);
    line-height: 1;
    margin-bottom: 6px;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
}

.bd-gang-hero-card__desc {
    font-family: "Special Elite", monospace;
    font-size: 12px;
    color: rgba(244, 234, 213, 0.68);
    line-height: 1.4;
    margin-bottom: 8px;
}

.bd-gang-hero-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bd-badge {
    display: inline-block;
    padding: 2px 7px;
    background: rgba(10, 7, 8, 0.4);
    border: 2px solid rgba(244, 234, 213, 0.18);
    color: var(--bd-cream);
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.5px;
}

.bd-badge--rep {
    background: rgba(232, 185, 35, 0.15);
    border-color: rgba(232, 185, 35, 0.3);
    color: var(--bd-yellow);
}

/* Apply panel */
.bd-apply-panel {
    padding: 2px 0;
}

/* Action grid */
.bd-action-grid {
    display: grid;
    gap: 10px;
    padding-top: 10px;
}

.bd-action-grid--1 {
    grid-template-columns: 1fr;
}

.bd-action-grid--4 {
    grid-template-columns: 1fr 1fr;
}

.bd-action-dissolve {
    display: flex;
    justify-content: center;
    margin-top: 6px;
}

.bd-action-dissolve .bd-action-btn {
    width: min(220px, 100%);
}

/* Treasury leaderboard */
.bd-treasury-donors {
    margin-top: 14px;
    border-top: 2px solid rgba(10, 7, 8, 0.12);
    padding-top: 10px;
    max-height: 160px;
    overflow-y: auto;
}

.bd-treasury-donors__title {
    font-family: "Special Elite", monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    color: rgba(10, 7, 8, 0.5);
    margin: 0 0 8px;
}

.bd-treasury-donor {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(10, 7, 8, 0.08);
}

.bd-treasury-donor:last-child {
    border-bottom: none;
}

.bd-treasury-donor__rank {
    font-family: "Bowlby One", var(--font-ui);
    font-size: 0.7rem;
    color: rgba(10, 7, 8, 0.4);
    min-width: 22px;
}

.bd-treasury-donor__name {
    flex: 1;
    font-family: "Special Elite", monospace;
    font-size: 0.85rem;
    color: #0a0708;
}

.bd-treasury-donor__amount {
    font-family: "Bowlby One", var(--font-ui);
    font-size: 0.8rem;
    color: #3e8b3a;
    white-space: nowrap;
}

/* Gang profile modal */
.gp-body {
    padding: 14px 16px;
}

.gp-banner-row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.gp-info {
    flex: 1;
    min-width: 0;
}

.gp-name {
    font-family: "Bowlby One", var(--font-ui);
    font-size: 1.1rem;
    color: #0a0708;
    letter-spacing: 0.03em;
    margin-bottom: 4px;
}

.gp-desc {
    font-family: "Special Elite", monospace;
    font-size: 0.8rem;
    color: rgba(10, 7, 8, 0.65);
    line-height: 1.4;
    margin-bottom: 8px;
}

.gp-stats {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: "Special Elite", monospace;
    font-size: 0.78rem;
    color: rgba(10, 7, 8, 0.6);
}

.gp-stats strong {
    color: #0a0708;
    font-family: "Bowlby One", var(--font-ui);
    font-size: 0.9rem;
}

.gp-stat-sep {
    color: rgba(10, 7, 8, 0.3);
}

/* Gang profile modal — dossier style */
.gang-dossier {
    display: grid;
    gap: 16px;
}

.gang-dossier__top {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.gang-dossier__banner-col {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gang-dossier__name {
    font-family: "Bowlby One", var(--font-ui);
    font-size: 1.15rem;
    color: #0a0708;
    margin-bottom: 5px;
    line-height: 1.2;
}

.gang-dossier__desc {
    font-family: "Special Elite", monospace;
    font-size: 0.8rem;
    color: rgba(10, 7, 8, 0.62);
    line-height: 1.45;
    margin-bottom: 8px;
}

.gang-dossier__stats {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: "Special Elite", monospace;
    font-size: 0.82rem;
    color: rgba(10, 7, 8, 0.6);
}

.gang-dossier__stats strong {
    font-family: "Bowlby One", var(--font-ui);
    color: #0a0708;
    font-size: 1rem;
}

.gang-dossier__stat-sep {
    color: rgba(10, 7, 8, 0.28);
}

.gang-dossier__members-section {
    border-top: 2px solid rgba(10, 7, 8, 0.1);
    padding-top: 12px;
}

.gang-dossier__section-label {
    font-family: var(--font-mono);
    font-size: 0.54rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: rgba(10, 7, 8, 0.45);
    margin: 0 0 8px;
}

.gang-dossier__empty {
    font-family: "Special Elite", monospace;
    font-size: 0.82rem;
    color: rgba(10, 7, 8, 0.45);
    margin: 0;
}

/* Gang member list */
.gang-member-list {
    display: grid;
    gap: 0;
}

.gang-member-row {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(10, 7, 8, 0.09);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s;
    border-radius: 0;
}

.gang-member-row:hover {
    background: rgba(10, 7, 8, 0.05);
    border-radius: 6px;
}

.gang-member-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.gang-member-avatar {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    border: 2px solid rgba(10, 7, 8, 0.2);
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(10, 7, 8, 0.08);
}

.gang-member-name {
    flex: 1;
    font-family: "Impact", "Arial Black", var(--font-ui);
    font-size: 0.9rem;
    color: #0a0708;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gang-member-badge {
    font-family: var(--font-mono);
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 3px;
    border: 1.5px solid;
    flex-shrink: 0;
}

.gang-member-badge--leader {
    color: #d22b2b;
    border-color: #d22b2b;
    background: rgba(210, 43, 43, 0.08);
}

.gang-member-level {
    font-family: "Bowlby One", var(--font-ui);
    font-size: 0.78rem;
    color: rgba(10, 7, 8, 0.6);
    flex-shrink: 0;
}

/* Gang profile modal layout */
.gang-profile__banner-wrap {
    line-height: 0;
}

.gang-profile__head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 2px 0;
}

.gang-profile__name {
    font-family: "Bowlby One", var(--font-ui);
    font-size: 1.35rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--comic-ink);
    margin: 0;
    line-height: 1.15;
}

.gang-profile__desc {
    font-family: "Special Elite", monospace;
    font-size: 0.82rem;
    line-height: 1.45;
    color: rgba(10, 7, 8, 0.68);
    margin: 0;
}

.gang-profile__rep-line {
    margin: 2px 0 0;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(10, 7, 8, 0.55);
}

.gang-profile__rep-line strong {
    font-size: 1rem;
    color: var(--comic-ink);
    margin-right: 2px;
}

/* Player profile username stamp */
.player-dossier__stamp {
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(10, 7, 8, 0.12);
}

.player-dossier__username {
    display: block;
    font-family: "Bowlby One", var(--font-ui);
    font-size: 1.55rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--comic-ink);
    line-height: 1.15;
}

.dossier-username-display {
    font-family: "Bowlby One", var(--font-ui);
    font-size: 1.45rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--comic-ink);
    text-align: center;
    margin: 0 0 14px 0;
    line-height: 1.15;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(10, 7, 8, 0.12);
}

/* Dossier gang link */
.dossier-gang-link {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    color: #3a8fc4;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.dossier-gang-link:hover {
    color: #2a6f9a;
}

.dossier-gang-link--none {
    color: rgba(10, 7, 8, 0.38);
    cursor: default;
    text-decoration: none;
    pointer-events: none;
}

.chat-gang-tag--link {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    color: #3a8fc4;
    font-weight: bold;
}

.chat-gang-tag--link:hover {
    text-decoration: underline;
    color: #2a6f9a;
}

.bd-treasury-balance {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 12px 14px;
    border: 3px solid #0a0708;
    border-radius: 4px;
    background: rgba(10, 7, 8, 0.05);
    box-shadow: 3px 3px 0 #0a0708;
}

.bd-treasury-balance__label {
    font-family: "Special Elite", monospace;
    font-size: 11px;
    color: rgba(10, 7, 8, 0.55);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bd-treasury-balance__amount {
    font-family: "Bowlby One", var(--font-ui);
    font-size: 1.5rem;
    color: #3e8b3a;
    letter-spacing: 0.02em;
}

.bd-action-btn {
    position: relative;
    border: 3px solid var(--bd-ink);
    box-shadow: 4px 4px 0 var(--bd-ink);
    padding: 10px 12px;
    cursor: pointer;
    font-family: "Bowlby One", sans-serif;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 62px;
    overflow: visible;
    text-decoration: none;
    width: 100%;
    box-sizing: border-box;
    outline: none;
    transition: transform 0.08s, box-shadow 0.08s;
}

.bd-action-btn:hover {
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0 var(--bd-ink);
}

.bd-action-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--bd-ink);
}

.bd-action-btn__icon {
    position: relative;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    background: rgba(10, 7, 8, 0.18);
    border: 2.5px solid rgba(10, 7, 8, 0.25);
    display: grid;
    place-items: center;
}

.bd-badge-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--bd-red);
    color: var(--bd-cream);
    font-family: "Bowlby One", sans-serif;
    font-size: 10px;
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border: 2px solid var(--bd-ink);
}

.bd-action-btn__label {
    position: relative;
    flex: 1;
    min-width: 0;
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1.1;
    word-break: break-word;
    text-align: left;
}

/* Members section */
.bd-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
}

.bd-section-label {
    font-family: "Bowlby One", sans-serif;
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--bd-cream);
    text-transform: uppercase;
}

.bd-section-count {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    color: var(--bd-bone);
    background: rgba(244, 234, 213, 0.07);
    border: 2px solid rgba(244, 234, 213, 0.1);
    padding: 1px 7px;
}

.bd-member-list {
    display: grid;
    gap: 8px;
}

.bd-member-row {
    background: var(--bd-cream);
    border: 3px solid var(--bd-ink);
    box-shadow: 3px 3px 0 var(--bd-ink);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
}

.bd-member-trigger {
    flex: 1;
    min-width: 0;
}

.bd-member-trigger .player-name,
.bd-member-trigger .player-trigger__text strong {
    color: var(--bd-ink);
}

.bd-member-trigger .player-trigger__text span {
    color: rgba(10, 7, 8, 0.55);
}

.bd-member-badges {
    flex-shrink: 0;
}

.bd-role-badge {
    display: inline-block;
    padding: 2px 6px;
    border: 2px solid var(--bd-ink);
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    letter-spacing: 1px;
    color: var(--bd-ink);
    text-transform: uppercase;
    background: rgba(10, 7, 8, 0.06);
}

.bd-role-badge--chef {
    background: var(--bd-yellow);
    border-color: var(--bd-ink);
    color: var(--bd-ink);
}

.bd-kick-btn {
    width: 28px;
    height: 28px;
    background: var(--bd-red);
    border: 2.5px solid var(--bd-ink);
    box-shadow: 2px 2px 0 var(--bd-ink);
    color: var(--bd-cream);
    font-size: 16px;
    display: grid;
    place-items: center;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
}

/* BD modal body / footer — used by simple confirmation modals (dissolve, leave, kick) */
/* bd-modal-body/footer/warning replaced by modal__body/footer/warning */

/* Character limit hint */
.bd-char-limit {
    display: block;
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    letter-spacing: 1px;
    color: rgba(244, 234, 213, 0.4);
    text-transform: uppercase;
    margin-top: 4px;
}

/* BD form elements inside modals — override for cream bg */
.modal .bd-field-label {
    color: rgba(10, 7, 8, 0.55);
}

.modal .bd-char-limit {
    color: rgba(10, 7, 8, 0.4);
}

/* gang-chat-dialog and gang-edit-dialog now use modal__dialog / modal__dialog--chat */

/* Smaller pickers inside the edit dialog */
#editColorRow .bd-color-swatch {
    width: 26px;
    height: 26px;
    box-shadow: 2px 2px 0 var(--bd-ink);
}

#editIconRow .bd-icon-btn {
    width: 30px;
    height: 30px;
    box-shadow: 2px 2px 0 var(--bd-ink);
}

/* Application accept/reject row */
.bd-app-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.bd-app-actions .bd-apply-btn--sent {
    background: rgba(10, 7, 8, 0.06);
    border-color: rgba(10, 7, 8, 0.18);
}

/* Member list using existing gang-member style - right side layout */
.bd-member-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
}

.button--sm {
    padding: 7px 14px;
    font-size: 0.8rem;
    border-radius: 8px;
}

.modal__dialog--gang-dir {
    width: min(500px, calc(100% - 24px));
    margin-left: auto;
    margin-right: auto;
}

.uniform-grid--duo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.uniform-grid--stack {
    grid-template-columns: 1fr;
}

.object-card--fixed,
.enemy-select-card--fixed {
    width: 250px;
    min-height: 250px;
    height: 250px;
}

.object-card--fixed {
    gap: 16px;
}

.object-card--fixed .object-card__head h3,
.enemy-select-card--fixed h2 {
    font-size: 1.8rem;
}

.cantine-layout {
    display: grid;
    grid-template-columns: 1.4fr 0.6fr;
    gap: 34px;
    align-items: start;
}

.cantine-column {
    display: grid;
    gap: 26px;
}

.cantine-sidehead {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.activity-panel {
    display: grid;
    gap: 14px;
    margin-bottom: 28px;
}

.activity-panel--compact {
    margin-bottom: 0;
}

.activity-panel__eyebrow {
    margin: 0;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.72rem;
}

.activity-panel__time {
    margin: 0;
    color: var(--text-soft);
}

.progress--activity {
    height: 10px;
}

.progress__fill--activity {
    background: linear-gradient(90deg, #d0a95f, #f0d082);
}

.enemy-select-card__top {
    min-height: 110px;
    display: flex;
    align-items: flex-start;
}

.enemy-select-card--fixed .enemy-select-card__bar {
    margin-top: auto;
}

.duel-shell {
    max-width: 1040px;
    margin: 0 auto;
    padding: 22px 24px;
}

.duel-view {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 28px;
    align-items: start;
}

.combat-entity {
    width: min(100%, 360px);
    display: grid;
    gap: 10px;
    justify-items: center;
    text-align: center;
}

.combat-popup-anchor {
    min-height: 52px;
    display: grid;
    align-items: end;
    justify-items: center;
}

.combat-popup {
    max-width: 280px;
    min-height: 42px;
    padding: 10px 14px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(10, 13, 19, 0.95);
    color: var(--text);
    font-size: 0.9rem;
    line-height: 1.2;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none;
}

.combat-popup--enemy {
    border-color: rgba(240, 138, 119, 0.24);
}

.combat-popup--visible {
    opacity: 1;
    transform: translateY(0);
}

.combat-avatar {
    width: 132px;
    height: 132px;
    border-radius: 18px;
    border: 1px solid var(--stroke-strong);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)),
        rgba(12, 16, 22, 0.92);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.combat-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.combat-name {
    font-size: 1.28rem;
    font-weight: 700;
}

.combat-hp {
    color: var(--text-soft);
    font-size: 0.95rem;
}

.combat-effects {
    min-height: 28px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.combat-effect {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--stroke);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-soft);
    font-size: 0.78rem;
}

.combat-effect--infection {
    border-color: rgba(132, 202, 120, 0.42);
    background: rgba(132, 202, 120, 0.12);
    color: #b8e8af;
}

.combat-effect--empty {
    opacity: 0.6;
}

.ai-prompts-view .site-shell {
    width: min(1040px, calc(100% - 18px));
}

.ai-panel-page {
    display: grid;
    gap: 18px;
}

.ai-panel-card {
    position: relative;
    overflow: hidden;
    padding: 24px;
    border: 3px solid var(--comic-ink);
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(28, 35, 46, 0.96), rgba(13, 17, 24, 0.96)),
        linear-gradient(135deg, rgba(255, 255, 255, 0.03), transparent 60%);
    box-shadow:
        8px 8px 0 rgba(10, 7, 8, 0.88),
        0 22px 44px rgba(0, 0, 0, 0.28);
}

.ai-panel-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at top right, rgba(232, 185, 35, 0.14), transparent 28%),
        linear-gradient(120deg, rgba(255, 255, 255, 0.04), transparent 30%);
    opacity: 0.9;
}

.ai-panel-page > * {
    position: relative;
    z-index: 1;
}

.ai-panel-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.9fr);
    gap: 20px;
    align-items: stretch;
}

.ai-panel-hero__copy {
    display: grid;
    gap: 12px;
    align-content: start;
}

.ai-panel-eyebrow {
    margin: 0;
    color: #f0d082;
    font-family: "JetBrains Mono", "Special Elite", monospace;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.ai-panel-hero h2,
.ai-panel-section-head h3 {
    margin: 0;
}

.ai-panel-hero h2 {
    font-family: "Anton", "Bowlby One", var(--font-ui);
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 0.96;
    text-transform: uppercase;
    text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55);
}

.ai-panel-hero__text {
    margin: 0;
    max-width: 62ch;
    color: var(--text-soft);
    line-height: 1.62;
}

.ai-panel-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.ai-panel-stat {
    display: grid;
    gap: 8px;
    align-content: center;
    min-height: 132px;
    padding: 18px 16px;
    border: 3px solid var(--comic-ink);
    border-radius: 18px;
    box-shadow: 4px 4px 0 rgba(10, 7, 8, 0.86);
    color: var(--comic-ink);
    text-align: center;
}

.ai-panel-stat span {
    font-family: "JetBrains Mono", monospace;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ai-panel-stat strong {
    font-family: "Bowlby One", "Anton", var(--font-ui);
    font-size: clamp(1.75rem, 4vw, 2.6rem);
    line-height: 1;
}

.ai-panel-stat--waiting {
    background: linear-gradient(180deg, #f3d163, #d8ac33);
}

.ai-panel-stat--running {
    background: linear-gradient(180deg, #6bc0f0, #2f87bf);
}

.ai-panel-stat--done {
    background: linear-gradient(180deg, #8bdd9b, #57a969);
}

.ai-panel-compose,
.ai-panel-history {
    display: grid;
    gap: 16px;
}

.ai-panel-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.ai-panel-section-head--history {
    align-items: center;
}

.ai-panel-live,
.ai-panel-history__meta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 12px;
    border: 2px solid rgba(208, 169, 95, 0.24);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.18);
    color: var(--text-soft);
    font-family: var(--font-mono);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ai-panel-live[data-state="loading"] {
    color: #f0d082;
    border-color: rgba(232, 185, 35, 0.34);
}

.ai-panel-live[data-state="ok"] {
    color: #9fe3ad;
    border-color: rgba(99, 181, 121, 0.38);
}

.ai-panel-live[data-state="error"] {
    color: #f4b1b1;
    border-color: rgba(211, 90, 90, 0.38);
}

.ai-panel-form {
    display: grid;
    gap: 14px;
}

.ai-panel-form__label {
    color: var(--text);
    font-weight: 700;
    letter-spacing: 0.03em;
}

.ai-panel-form__textarea {
    width: 100%;
    min-height: 220px;
    resize: vertical;
    padding: 18px 18px 20px;
    border: 3px solid var(--comic-ink);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(247, 238, 223, 0.95), rgba(225, 214, 188, 0.92));
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 4px 4px 0 rgba(10, 7, 8, 0.86);
    color: var(--comic-ink);
    font-family: "Space Grotesk", "Segoe UI", sans-serif;
    font-size: 1rem;
    line-height: 1.55;
}

.ai-panel-form__textarea:focus {
    outline: none;
    border-color: var(--comic-red);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.45),
        0 0 0 3px rgba(210, 43, 43, 0.18),
        4px 4px 0 rgba(10, 7, 8, 0.86);
}

.ai-panel-form__footer {
    display: grid;
    gap: 14px;
}

.ai-panel-form__hint {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.55;
}

.ai-panel-form__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.ai-panel-refresh,
.ai-panel-submit {
    min-height: 52px;
    font-family: "Bowlby One", "Anton", var(--font-ui);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ai-panel-refresh.button {
    border: 3px solid var(--comic-ink);
    background: linear-gradient(180deg, #dcc7a0, #c3ae87);
    box-shadow: 3px 3px 0 var(--comic-ink);
    color: var(--comic-ink);
}

.ai-panel-submit.button--primary {
    border: 3px solid var(--comic-ink);
    background: linear-gradient(180deg, #d93737, #be2323);
    box-shadow: 4px 4px 0 var(--comic-ink);
    color: var(--comic-paper);
}

.ai-panel-refresh.button:hover:not(:disabled),
.ai-panel-submit.button--primary:hover:not(:disabled) {
    transform: translate(-1px, -1px);
}

.ai-panel-list {
    display: grid;
    gap: 14px;
}

.ai-prompt-card {
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 2px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.025));
}

.ai-prompt-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ai-prompt-card__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    color: var(--text-soft);
    font-family: var(--font-mono);
    font-size: 0.8rem;
}

.ai-prompt-card__meta strong {
    color: var(--text);
    font-size: 0.88rem;
}

.ai-prompt-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 94px;
    min-height: 34px;
    padding: 6px 12px;
    border: 2px solid var(--comic-ink);
    border-radius: 999px;
    color: var(--comic-ink);
    font-family: var(--font-mono);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ai-prompt-badge--waiting {
    background: linear-gradient(180deg, #f3d163, #d8ac33);
}

.ai-prompt-badge--running {
    background: linear-gradient(180deg, #6bc0f0, #2f87bf);
}

.ai-prompt-badge--done {
    background: linear-gradient(180deg, #8bdd9b, #57a969);
}

.ai-prompt-badge--failed {
    background: linear-gradient(180deg, #eb8d8d, #cb5b5b);
}

.ai-prompt-card__section {
    display: grid;
    gap: 8px;
}

.ai-prompt-card__section--response {
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ai-prompt-card__label {
    color: #f0d082;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ai-prompt-card__text {
    white-space: pre-wrap;
    word-break: break-word;
    padding: 14px 15px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.22);
    color: var(--text);
    line-height: 1.6;
}

.ai-prompt-card__text--response {
    background: rgba(58, 143, 196, 0.12);
}

.ai-prompt-empty {
    display: grid;
    gap: 6px;
    padding: 26px 20px;
    border: 2px dashed rgba(255, 255, 255, 0.16);
    border-radius: 18px;
    text-align: center;
    color: var(--text-soft);
}

.ai-prompt-empty strong {
    color: var(--text);
    font-family: "Bowlby One", "Anton", var(--font-ui);
    font-size: 1.1rem;
    letter-spacing: 0.03em;
}

@media (max-width: 900px) {
    .ai-panel-hero {
        grid-template-columns: 1fr;
    }

    .ai-panel-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .ai-prompts-view .site-shell {
        width: calc(100% - 12px);
    }

    .ai-panel-card {
        padding: 18px 16px;
        border-radius: 20px;
        box-shadow:
            5px 5px 0 rgba(10, 7, 8, 0.88),
            0 18px 34px rgba(0, 0, 0, 0.28);
    }

    .ai-panel-section-head,
    .ai-panel-card__head,
    .ai-prompt-card__head {
        flex-direction: column;
        align-items: flex-start;
    }

    .ai-panel-stats {
        grid-template-columns: 1fr;
    }

    .ai-panel-stat {
        min-height: 0;
    }

    .ai-panel-form__textarea {
        min-height: 180px;
        padding: 15px 14px 16px;
    }

    .ai-panel-form__actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .ai-panel-refresh,
    .ai-panel-submit {
        width: 100%;
    }

    .ai-prompt-card {
        padding: 15px;
    }
}

.director-balance-view .site-shell {
    width: min(1760px, calc(100% - 36px));
}

.director-balance {
    display: grid;
    gap: 22px;
}

.director-balance__hero h2,
.director-balance__formulas h3,
.director-balance__table-head h3 {
    margin: 0;
}

.director-balance__hero .muted {
    margin-top: 10px;
}

.director-formula-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.director-formula-grid div {
    display: grid;
    gap: 6px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid var(--stroke);
    background: rgba(255, 255, 255, 0.035);
}

.director-formula-grid span {
    color: var(--text-soft);
    font-size: 0.9rem;
    line-height: 1.35;
}

.director-setting-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(78px, 0.45fr) auto;
    align-items: center;
    gap: 10px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid var(--stroke);
    background: rgba(255, 255, 255, 0.035);
}

.director-setting-card span {
    color: var(--text-soft);
    font-size: 0.84rem;
    line-height: 1.25;
}

.director-setting-card input {
    width: 100%;
    min-height: 38px;
    border: 1px solid rgba(208, 169, 95, 0.2);
    border-radius: 12px;
    background: rgba(8, 11, 16, 0.58);
    color: var(--text);
    padding: 8px 10px;
    text-align: right;
    outline: none;
}

.director-setting-card input:focus {
    border-color: rgba(208, 169, 95, 0.5);
    box-shadow: 0 0 0 2px rgba(208, 169, 95, 0.12);
}

.director-setting-card input.is-error {
    border-color: rgba(240, 138, 119, 0.56);
    color: #f08a77;
}

.director-setting-card small {
    color: var(--text-dim);
    font-size: 0.78rem;
}

.director-setting-card--static {
    grid-template-columns: 1fr;
}

.director-setting-card--static strong {
    font-size: 0.9rem;
    line-height: 1.35;
}

.director-balance__table-panel {
    overflow: hidden;
}

.director-balance__table-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.director-save-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--stroke);
    color: var(--text-soft);
    background: rgba(255, 255, 255, 0.035);
    font-size: 0.82rem;
}

.director-save-state[data-state="saved"] {
    border-color: rgba(103, 203, 131, 0.35);
    color: #9fe9b6;
}

.director-save-state[data-state="error"] {
    border-color: rgba(240, 138, 119, 0.42);
    color: #f08a77;
}

.director-table-wrap {
    overflow: auto;
    border-radius: 18px;
    border: 1px solid var(--stroke);
}

.director-table {
    width: 100%;
    min-width: 1820px;
    border-collapse: collapse;
    background: rgba(8, 11, 16, 0.42);
}

.director-table th,
.director-table td {
    padding: 12px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    text-align: left;
    vertical-align: middle;
    font-size: 0.88rem;
    white-space: nowrap;
}

.director-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: rgba(16, 20, 28, 0.98);
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
}

.director-gang-divider th {
    position: static;
    padding: 14px 12px;
    background: rgba(208, 169, 95, 0.12);
    color: var(--accent);
    text-align: left;
}

.director-gang-column-head th {
    top: 0;
    background: rgba(16, 20, 28, 0.98);
}

.director-table td[contenteditable="true"] {
    cursor: text;
    color: #f3d28d;
    background: rgba(208, 169, 95, 0.08);
    outline: none;
}

.director-table td[contenteditable="true"]:focus {
    background: rgba(208, 169, 95, 0.18);
    box-shadow: inset 0 0 0 1px rgba(208, 169, 95, 0.42);
}

.director-table td.is-saving {
    opacity: 0.72;
}

.director-table td.is-error {
    background: rgba(240, 138, 119, 0.16);
    color: #f08a77;
}

.director-table__skills {
    max-width: 260px;
    white-space: normal;
    color: var(--text-soft);
    line-height: 1.35;
}

.director-skill-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 360px;
}

.director-skill-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border: 1px solid var(--stroke);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.035);
    color: var(--text-soft);
    font-size: 0.76rem;
    cursor: pointer;
    user-select: none;
}

.director-skill-toggle input {
    width: 14px;
    height: 14px;
    accent-color: var(--accent);
}

.director-skill-toggle:has(input:checked) {
    border-color: rgba(208, 169, 95, 0.42);
    color: var(--text);
    background: rgba(208, 169, 95, 0.12);
}

@media (max-width: 760px) {
    .director-balance-view .site-shell {
        width: calc(100% - 14px);
        padding-top: 100px;
    }

    .director-balance {
        gap: 14px;
    }

    .director-formula-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .director-formula-grid div {
        padding: 12px;
    }

    .director-setting-card {
        grid-template-columns: minmax(0, 1fr) minmax(72px, 0.5fr) auto;
    }

    .director-balance__table-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .director-table-wrap {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .director-table,
    .director-table thead,
    .director-table tbody,
    .director-table tr,
    .director-table td {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .director-table {
        background: transparent;
        border-collapse: separate;
    }

    .director-table thead {
        display: none;
    }

    .director-table tbody {
        display: grid;
        gap: 12px;
    }

    .director-table tr {
        padding: 14px;
        border: 1px solid var(--stroke);
        border-radius: 18px;
        background: rgba(8, 11, 16, 0.42);
    }

    .director-table .director-gang-divider {
        padding: 0;
        border: 0;
        background: transparent;
    }

    .director-table .director-gang-divider th {
        display: block;
        border-radius: 16px;
        padding: 12px 14px;
    }

    .director-table .director-gang-column-head {
        display: none;
    }

    .director-table td {
        display: grid;
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
        align-items: center;
        gap: 10px;
        padding: 9px 0;
        border: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        white-space: normal;
        text-align: right;
        overflow-wrap: anywhere;
    }

    .director-table td:last-child {
        border-bottom: 0;
    }

    .director-table td::before {
        content: attr(data-label);
        color: var(--text-soft);
        font-size: 0.72rem;
        letter-spacing: 0.08em;
        text-align: left;
        text-transform: uppercase;
    }

    .director-table td[contenteditable="true"] {
        justify-self: stretch;
        min-height: 36px;
        padding: 8px 10px;
        border: 1px solid rgba(208, 169, 95, 0.18);
        border-radius: 12px;
        text-align: right;
    }

    .director-table__skills {
        max-width: none;
        line-height: 1.35;
    }

    .director-skill-toggles {
        min-width: 0;
        justify-content: flex-end;
    }
}

.director-foldout {
    border: 1px solid var(--stroke);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.025);
    overflow: hidden;
}

.director-foldout > summary,
.director-formula-section > summary,
.director-skill-foldout > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.director-foldout > summary::-webkit-details-marker,
.director-formula-section > summary::-webkit-details-marker,
.director-skill-foldout > summary::-webkit-details-marker {
    display: none;
}

.director-foldout > summary {
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.035);
    color: var(--text);
    font-weight: 800;
}

.director-foldout > summary small,
.director-formula-section > summary::after,
.director-skill-foldout > summary::after {
    color: var(--text-dim);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.director-formula-section > summary::after,
.director-skill-foldout > summary::after {
    content: "ouvrir";
}

.director-formula-section[open] > summary::after,
.director-skill-foldout[open] > summary::after {
    content: "fermer";
}

.director-formula-sections,
.director-gang-sections {
    display: grid;
    gap: 12px;
}

.director-formula-foldout {
    padding-bottom: 14px;
}

.director-formula-foldout .director-setting-card--static {
    margin: 12px 14px 0;
}

.director-formula-sections {
    grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
    padding: 14px;
}

.director-formula-section {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(8, 11, 16, 0.32);
    overflow: hidden;
}

.director-formula-section > summary {
    padding: 10px 12px;
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(208, 169, 95, 0.08);
}

.director-formula-table-wrap {
    overflow-x: auto;
}

.director-formula-table {
    width: 100%;
    border-collapse: collapse;
}

.director-formula-table th,
.director-formula-table td {
    padding: 8px 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    text-align: left;
    font-size: 0.78rem;
}

.director-formula-table th {
    width: 58%;
    color: var(--text-soft);
    font-weight: 700;
}

.director-formula-table td:last-child {
    width: 34px;
    color: var(--text-dim);
    text-align: left;
}

.director-formula-table input {
    width: 76px;
    min-height: 30px;
    border: 1px solid rgba(208, 169, 95, 0.2);
    border-radius: 10px;
    background: rgba(8, 11, 16, 0.58);
    color: var(--text);
    padding: 5px 8px;
    text-align: right;
    outline: none;
}

.director-formula-table input:focus {
    border-color: rgba(208, 169, 95, 0.5);
    box-shadow: 0 0 0 2px rgba(208, 169, 95, 0.12);
}

.director-formula-table input.is-error {
    border-color: rgba(240, 138, 119, 0.56);
    color: #f08a77;
}

.director-gang-section > .director-table-wrap {
    border: 0;
    border-top: 1px solid var(--stroke);
    border-radius: 0;
}

.director-enemy-list {
    display: grid;
    gap: 10px;
    padding: 12px;
    border-top: 1px solid var(--stroke);
}

.director-enemy-foldout {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: rgba(8, 11, 16, 0.36);
    overflow: hidden;
}

.director-enemy-foldout > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.director-enemy-foldout > summary::-webkit-details-marker {
    display: none;
}

.director-enemy-name {
    color: var(--text);
    font-weight: 900;
}

.director-enemy-foldout > summary small {
    color: var(--text-dim);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.director-enemy-foldout > summary::after {
    content: "ouvrir";
    color: var(--text-dim);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.director-enemy-foldout[open] > summary::after {
    content: "fermer";
}

.director-enemy-body {
    display: grid;
    gap: 12px;
    padding: 0 14px 14px;
}

.director-enemy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 8px;
}

.director-enemy-grid--metrics {
    padding-top: 2px;
}

.director-enemy-field {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
}

.director-enemy-field--wide {
    grid-column: 1 / -1;
}

.director-enemy-field > span {
    color: var(--text-soft);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.director-enemy-field__value {
    min-width: 0;
    color: var(--text);
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.director-enemy-field__input {
    width: 100%;
    min-height: 34px;
    border: 1px solid rgba(208, 169, 95, 0.2);
    border-radius: 10px;
    background: rgba(8, 11, 16, 0.58);
    color: var(--text);
    padding: 6px 8px;
    text-align: right;
    outline: none;
}

.director-enemy-field__input:focus {
    border-color: rgba(208, 169, 95, 0.5);
    box-shadow: 0 0 0 2px rgba(208, 169, 95, 0.12);
}

.director-enemy-field__input.is-error {
    border-color: rgba(240, 138, 119, 0.56);
    color: #f08a77;
}

.director-enemy-field__value[contenteditable="true"] {
    cursor: text;
    color: #f3d28d;
    outline: none;
}

.director-enemy-field__value[contenteditable="true"]:focus {
    border-radius: 8px;
    background: rgba(208, 169, 95, 0.14);
    box-shadow: 0 0 0 4px rgba(208, 169, 95, 0.14);
}

.director-enemy-field__value.is-saving {
    opacity: 0.72;
}

.director-enemy-field__value.is-error {
    color: #f08a77;
}

.director-skill-foldout {
    min-width: 250px;
}

.director-skill-foldout > summary {
    padding: 7px 10px;
    border: 1px solid var(--stroke);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.035);
    color: var(--text-soft);
    font-size: 0.78rem;
    font-weight: 800;
}

.director-skill-foldout[open] > summary {
    border-color: rgba(208, 169, 95, 0.36);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background: rgba(208, 169, 95, 0.1);
    color: var(--text);
}

.director-skill-foldout .director-skill-toggles {
    min-width: 0;
    padding: 8px;
    border: 1px solid rgba(208, 169, 95, 0.22);
    border-top: 0;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    background: rgba(8, 11, 16, 0.48);
}

@media (max-width: 760px) {
    .director-foldout > summary {
        padding: 12px 14px;
    }

    .director-formula-sections {
        grid-template-columns: 1fr;
        padding: 10px;
    }

    .director-formula-section:not([open]) {
        min-height: 0;
    }

    .director-formula-table th,
    .director-formula-table td {
        padding: 7px 8px;
    }

    .director-formula-table input {
        width: 66px;
        min-height: 30px;
    }

    .director-gang-section > .director-table-wrap {
        overflow: visible;
        border-top: 1px solid var(--stroke);
    }

    .director-enemy-list {
        padding: 10px;
    }

    .director-enemy-foldout > summary {
        align-items: flex-start;
        flex-wrap: wrap;
        padding: 11px 12px;
    }

    .director-enemy-foldout > summary small {
        order: 3;
        width: 100%;
    }

    .director-enemy-body {
        padding: 0 10px 10px;
    }

    .director-enemy-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .director-table__skills {
        display: block;
        text-align: left;
    }

    .director-table__skills::before {
        display: block;
        margin-bottom: 8px;
    }

    .director-skill-foldout {
        min-width: 0;
        width: 100%;
    }

    .director-skill-foldout .director-skill-toggles {
        display: grid;
        grid-template-columns: 1fr;
        justify-content: stretch;
        max-height: 230px;
        overflow: auto;
    }

    .director-skill-toggle {
        justify-content: flex-start;
        border-radius: 12px;
        padding: 9px 10px;
        width: 100%;
    }
}

.combat-controls {
    display: grid;
    gap: 14px;
    grid-column: 1 / -1;
    justify-items: center;
}

.combat-skill-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.combat-skill-card {
    position: relative;
    display: grid;
    width: 100%;
    min-width: 0;
}

.combat-skill-card__drag {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: inline-grid;
    gap: 3px;
    padding: 6px;
    border-radius: 10px;
    background: transparent;
    border: 0;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.combat-skill-card__drag:active {
    cursor: grabbing;
}

.combat-skill-card__drag span {
    display: block;
    width: 12px;
    height: 2px;
    border-radius: 999px;
    background: #ffffff;
}

.combat-skill-card--dragging {
    opacity: 0.98;
    filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.34));
}

.combat-skill-card--dragging .combat-skill-button {
    border-color: rgba(208, 169, 95, 0.4);
    background: rgba(18, 22, 30, 0.98);
}

.combat-skill-card--placeholder {
    min-height: 96px;
    border-radius: 14px;
    border: 1px dashed rgba(208, 169, 95, 0.32);
    background: rgba(208, 169, 95, 0.08);
}

body.combat-skill-sorting {
    cursor: grabbing;
    user-select: none;
    -webkit-user-select: none;
}

.combat-skill-button {
    width: 100%;
    min-width: 0;
    min-height: 96px;
    display: grid;
    grid-template-rows: auto auto 1fr;
    justify-items: stretch;
    align-items: stretch;
    justify-content: stretch;
    gap: 8px;
    position: relative;
    box-sizing: border-box;
    padding: 18px 12px 20px;
    text-align: center;
    align-content: start;
}

.fight-view .combat-skill-grid .combat-skill-button {
    display: grid;
    width: 100%;
    max-width: none;
}

.combat-skill-button__title {
    justify-self: center;
    font-weight: 700;
}

.combat-skill-button small {
    justify-self: center;
    color: var(--text-soft);
}

.combat-skill-button__progress {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 10px;
    align-self: end;
    justify-self: stretch;
    display: block;
    width: auto;
    min-width: 0;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.combat-skill-button__fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(208, 169, 95, 0.45), rgba(208, 169, 95, 0.95));
    transition: width 0.35s linear;
}

.combat-entity--act .combat-avatar {
    animation: combatActPulse 0.55s ease;
}

.combat-entity--hit .combat-avatar {
    animation: combatHitPulse 0.6s ease;
}

.combat-entity--heal .combat-avatar {
    animation: combatHealPulse 0.7s ease;
}

.combat-entity--buff .combat-avatar {
    animation: combatBuffPulse 0.7s ease;
}

.fight-view .site-shell {
    width: min(560px, calc(100% - 14px));
    min-height: 100vh;
    padding-top: 12px;
    padding-bottom: 24px;
}

.fight-view .page-auto-topbar h1 {
    font-family: "Bowlby One", "Anton", var(--font-ui);
    font-size: clamp(1.4rem, 4vw, 1.9rem);
    letter-spacing: 0.04em;
}

/* ─── FightPanel: entity blocks ─── */
.fight-view .combat-entity {
    position: relative;
    width: 100%;
    border: 3px solid #0a0708;
    box-shadow: 4px 4px 0 #0a0708;
    overflow: hidden;
    padding: 10px 10px 8px;
    gap: 6px;
    border-radius: 0;
}

.fight-view .combat-entity::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 2px 2px, rgba(10, 7, 8, 0.22) 0 1px, transparent 1px);
    background-size: 5px 5px;
    pointer-events: none;
    z-index: 0;
}

.fight-view .combat-entity::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        -28deg,
        transparent 0 13px,
        rgba(10, 7, 8, 0.07) 13px 14px
    );
    pointer-events: none;
    z-index: 0;
}

.fight-view .combat-entity--player {
    background: #3a8fc4;
    transform: rotate(-2deg);
}

.fight-view .combat-entity--enemy {
    background: #d22b2b;
    transform: rotate(2deg);
}

.fight-view .combat-popup-anchor {
    position: relative;
    z-index: 2;
    height: 46px;
    overflow: visible;
}

.fight-view .combat-popup {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    width: max-content;
    max-width: 190px;
    min-height: auto;
    text-align: center;
    border-radius: 2px;
    border: 2px solid #0a0708;
    background: #f4ead5;
    color: #0a0708;
    box-shadow: 3px 3px 0 #0a0708;
    font-family: "Bowlby One", var(--font-ui);
    font-size: 0.75rem;
    line-height: 1.25;
    padding: 7px 10px;
}

.fight-view .combat-popup--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.fight-view .combat-popup--enemy {
    border-color: #0a0708;
    background: #0a0708;
    color: #f4ead5;
    box-shadow: 3px 3px 0 #d22b2b;
}

.fight-view .combat-avatar {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 120px;
    border-radius: 2px;
    border: 2px solid rgba(10, 7, 8, 0.6);
    background: rgba(10, 7, 8, 0.32);
    box-shadow: none;
}

.fight-view .combat-avatar img {
    border-radius: 1px;
}

.fight-view .combat-name {
    position: relative;
    z-index: 1;
    font-family: "Bowlby One", "Anton", var(--font-ui);
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #f4ead5;
    text-shadow: 1px 1px 0 #0a0708, -1px -1px 0 #0a0708;
}

/* ─── FightBar: HP bar ─── */
.fight-view .progress--hp {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 18px;
    border-radius: 0;
    border: 2px solid #0a0708;
    background: #0a0708;
    overflow: hidden;
    padding: 2px;
    box-shadow: 2px 2px 0 rgba(10, 7, 8, 0.5);
}

.fight-view .progress__fill {
    height: 100%;
    border-radius: 0;
    transition: width 0.3s ease;
}

.fight-view .progress__fill--player {
    background: #3a8fc4;
}

.fight-view .progress__fill--enemy {
    background: #d22b2b;
}

.fight-view .combat-hp {
    position: relative;
    z-index: 1;
    font-family: "JetBrains Mono", var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    color: rgba(244, 234, 213, 0.92);
    -webkit-text-stroke: 1.5px #0a0708;
    paint-order: stroke fill;
    text-shadow:
        1px 0 0 #0a0708,
        -1px 0 0 #0a0708,
        0 1px 0 #0a0708,
        0 -1px 0 #0a0708,
        2px 0 0 #0a0708,
        -2px 0 0 #0a0708,
        0 2px 0 #0a0708,
        0 -2px 0 #0a0708,
        1px 1px 0 #0a0708,
        -1px -1px 0 #0a0708,
        1px -1px 0 #0a0708,
        -1px 1px 0 #0a0708,
        2px 2px 0 #0a0708,
        -2px -2px 0 #0a0708,
        2px -2px 0 #0a0708,
        -2px 2px 0 #0a0708;
}

.fight-view .combat-effects {
    position: relative;
    z-index: 1;
    min-height: 0;
    gap: 4px;
}

.fight-view .combat-effect {
    border: 2px solid rgba(244, 234, 213, 0.75);
    background: rgba(244, 234, 213, 0.22);
    color: #f4ead5;
    font-size: 0.76rem;
    font-weight: 700;
    border-radius: 2px;
    text-shadow: 1px 1px 0 rgba(10, 7, 8, 0.7);
}

/* ─── Controls ─── */
.fight-view .combat-controls {
    grid-column: 1 / -1;
    display: grid;
    gap: 8px;
    padding-top: 4px;
}

.fight-view .combat-skill-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.fight-view .combat-skill-grid .combat-skill-button {
    background: #1a0c0c;
    color: #f4ead5;
    border: 3px solid #0a0708;
    border-radius: 2px;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.55);
    font-family: "Bowlby One", "Anton", var(--font-ui);
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: transform 0.08s, box-shadow 0.08s;
    min-height: 68px;
    padding: 8px 10px 22px;
}

/* ── Skill card per-type customization ── */
.fight-view [data-skill-key="frappe"] .combat-skill-button {
    border-color: #3a8fc4;
}
.fight-view [data-skill-key="frappe"] .combat-skill-button__fill {
    background: #3a8fc4;
}

.fight-view [data-skill-key="attaque_lourde"] .combat-skill-button {
    border-color: #d22b2b;
}
.fight-view [data-skill-key="attaque_lourde"] .combat-skill-button__fill {
    background: #d22b2b;
}

.fight-view [data-skill-key="attaque_chargee"] .combat-skill-button {
    border-color: #e8b923;
}
.fight-view [data-skill-key="attaque_chargee"] .combat-skill-button__fill {
    background: #e8b923;
}

.fight-view [data-skill-key="assome"] .combat-skill-button {
    border-color: #7a4cb8;
}
.fight-view [data-skill-key="assome"] .combat-skill-button__fill {
    background: #7a4cb8;
}

.fight-view [data-skill-key="lame_rouillee"] .combat-skill-button {
    border-color: #5a8a3a;
}
.fight-view [data-skill-key="lame_rouillee"] .combat-skill-button__fill {
    background: #5a8a3a;
}

.fight-view [data-skill-key="bandage"] .combat-skill-button {
    border-color: #2e8b57;
}
.fight-view [data-skill-key="bandage"] .combat-skill-button__fill {
    background: #2e8b57;
}

.fight-view [data-skill-key="en_garde"] .combat-skill-button {
    border-color: #3a6ab8;
}
.fight-view [data-skill-key="en_garde"] .combat-skill-button__fill {
    background: #3a6ab8;
}

.fight-view [data-skill-key="esquive"] .combat-skill-button {
    border-color: #2aa8a0;
}
.fight-view [data-skill-key="esquive"] .combat-skill-button__fill {
    background: #2aa8a0;
}

.fight-view [data-skill-key="renvoi"] .combat-skill-button {
    border-color: #b84ca0;
}
.fight-view [data-skill-key="renvoi"] .combat-skill-button__fill {
    background: #b84ca0;
}

.fight-view .combat-skill-grid .combat-skill-button:hover:not(:disabled) {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55);
}

.fight-view .combat-skill-grid .combat-skill-button:disabled {
    opacity: 0.55;
    transform: translate(3px, 3px);
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.55);
}

.fight-view .combat-skill-button small {
    font-family: "JetBrains Mono", var(--font-mono);
    font-size: 0.6rem;
    color: rgba(244, 234, 213, 0.6);
}

.fight-view .combat-skill-button__progress {
    border-radius: 0;
    background: rgba(10, 7, 8, 0.12);
    border: 1px solid rgba(10, 7, 8, 0.2);
    left: 8px;
    right: 8px;
    bottom: 8px;
}

.fight-view .combat-skill-button__fill {
    background: #3a8fc4;
    border-radius: 0;
}

.fight-view .button--ghost {
    background: #f4ead5;
    color: #0a0708;
    border: 3px solid #0a0708;
    border-radius: 2px;
    box-shadow: 4px 4px 0 #0a0708;
    font-family: "Bowlby One", "Anton", var(--font-ui);
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: transform 0.08s, box-shadow 0.08s;
    width: 100%;
}

.fight-view .button--ghost:hover:not(:disabled) {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 #0a0708;
}

.fight-view .button--primary {
    background: linear-gradient(180deg, #d93737, #c12222);
    color: #f4ead5;
    border: 3px solid #0a0708;
    border-radius: 2px;
    box-shadow: 4px 4px 0 #0a0708;
    font-family: "Bowlby One", "Anton", var(--font-ui);
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: transform 0.08s, box-shadow 0.08s;
    width: 100%;
    min-height: 52px;
}

.fight-view .button--primary:hover:not(:disabled) {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 #0a0708;
}

/* combat entity hit/heal animations keep the tilt */
.fight-view .combat-entity--player.combat-entity--hit .combat-avatar {
    animation: combatHitPulse 0.6s ease;
}

.fight-view .combat-entity--enemy.combat-entity--hit .combat-avatar {
    animation: combatHitPulse 0.6s ease;
}

@keyframes combatActPulse {
    0% { transform: scale(1); }
    35% { transform: scale(1.06); }
    100% { transform: scale(1); }
}

@keyframes combatHitPulse {
    0% { transform: translateX(0); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02); }
    20% { transform: translateX(-6px); box-shadow: 0 0 0 2px rgba(240, 138, 119, 0.35); }
    45% { transform: translateX(5px); }
    100% { transform: translateX(0); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02); }
}

@keyframes combatHealPulse {
    0% { transform: scale(1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02); }
    40% { transform: scale(1.04); box-shadow: 0 0 0 2px rgba(103, 203, 131, 0.35); }
    100% { transform: scale(1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02); }
}

@keyframes combatBuffPulse {
    0% { transform: scale(1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02); }
    40% { transform: scale(1.04); box-shadow: 0 0 0 2px rgba(208, 169, 95, 0.35); }
    100% { transform: scale(1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02); }
}

@keyframes combatLogAppear {
    0% { opacity: 0; transform: translateY(6px); }
    100% { opacity: 1; transform: translateY(0); }
}

.fight-result-view .site-shell {
    width: min(480px, calc(100% - 14px));
    min-height: 100vh;
    display: grid;
    align-items: center;
    padding-top: 12px;
    padding-bottom: 32px;
}

/* ─── Fight result : comic redesign ─── */
.fight-result-view .fight-result-card {
    position: relative;
    overflow: hidden;
    background: #f4ead5;
    border: 4px solid #0a0708;
    box-shadow: 7px 7px 0 #0a0708;
    padding: 32px 28px 28px;
    color: #0a0708;
}

.fight-result-view .fight-result-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 2px 2px, rgba(10, 7, 8, 0.12) 0 1px, transparent 1px);
    background-size: 6px 6px;
    opacity: 0.18;
    pointer-events: none;
}

.fight-result-view .fight-result-card .eyebrow {
    position: relative;
    margin: 0 0 6px;
    color: rgba(10, 7, 8, 0.6);
    font-family: "Special Elite", var(--font-ui);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.fight-result-view .fight-result-card h1 {
    position: relative;
    margin: 0;
    font-family: "Bowlby One", "Anton", var(--font-ui);
    font-size: clamp(2.6rem, 10vw, 3.8rem);
    line-height: 0.92;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    transform: rotate(-2deg);
    display: inline-block;
}

.fight-result-view--victory .fight-result-card h1 {
    color: #e8b923;
    text-shadow: 3px 3px 0 #0a0708, -2px -2px 0 #0a0708;
}

.fight-result-view--defeat .fight-result-card h1 {
    color: #d22b2b;
    text-shadow: 3px 3px 0 #0a0708, -2px -2px 0 #0a0708;
}

.fight-result-view .fight-result-card__text {
    position: relative;
    margin: 0;
    display: grid;
    gap: 6px;
    color: rgba(10, 7, 8, 0.82);
    font-family: "Special Elite", var(--font-ui);
    font-size: 0.94rem;
}

.fight-result-view .fight-result-gain-line {
    color: rgba(10, 7, 8, 0.85);
}

.fight-result-view .fight-result-card__actions {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.fight-result-view .fight-result-card__actions .button {
    border: 3px solid #0a0708;
    border-radius: 2px;
    box-shadow: 4px 4px 0 #0a0708;
    font-family: "Bowlby One", "Anton", var(--font-ui);
    font-size: 1rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: transform 0.08s, box-shadow 0.08s;
    min-height: 52px;
    min-width: 140px;
}

.fight-result-view .fight-result-card__actions .button:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 #0a0708;
}

.fight-result-view .fight-result-card__actions .button--ghost {
    background: rgba(10, 7, 8, 0.08);
    color: #0a0708;
}

.fight-result-view .fight-result-card__actions .button--primary {
    background: linear-gradient(180deg, #d93737, #c12222);
    color: #f4ead5;
}

.kitchen-game-view--stability .site-shell {
    width: calc(100vw - 10px);
    max-width: none;
}

.fight-result-card {
    width: min(420px, 100%);
    max-width: 420px;
    margin: 0 auto;
    display: grid;
    gap: 18px;
    text-align: center;
}

.fight-result-card h1 {
    margin: 0;
    font-size: clamp(2rem, 5vw, 3rem);
}

.fight-result-card__text {
    margin: 0;
    display: grid;
    gap: 8px;
    color: var(--text-soft);
    font-size: 1.02rem;
}

.fight-result-gain-line {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.fight-result-steaks {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.fight-result-steak-icon {
    width: 1.2em;
    height: 1.2em;
    display: block;
    object-fit: contain;
}

.fight-result-card__actions {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.flash-stack {
    position: fixed;
    top: 18px;
    left: 50%;
    width: min(560px, calc(100% - 24px));
    margin: 0;
    transform: translateX(-50%);
    z-index: 50;
    pointer-events: none;
}

.flash {
    pointer-events: auto;
}

.hub-view .site-shell {
    width: min(520px, calc(100% - 14px));
    padding-top: 12px;
    padding-bottom: 12px;
}

.hub-world {
    min-height: calc(100vh - 24px);
    display: block;
}

.hub-hud {
    position: absolute;
    top: 22px;
    left: 24px;
    z-index: 3;
    align-items: flex-start;
    gap: 24px;
    padding-right: 220px;
}

.global-hud .hud-card,
.hub-view .hud-card,
.global-hud .hud-chip,
.hub-view .hud-chip {
    min-width: auto;
}

.global-hud .hud-card__label,
.hub-view .hud-card__label {
    margin-bottom: 5px;
    color: var(--comic-ink);
    font-size: 0.62rem;
}

.global-hud .hud-card strong,
.hub-view .hud-card strong,
.global-hud .hud-chip strong,
.hub-view .hud-chip strong {
    font-size: 0.9rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.03em;
    text-shadow: none;
    font-family: "Archivo Black", "Bowlby One", var(--font-ui);
    font-variant-numeric: tabular-nums;
}

.global-hud .hud-card--hp,
.hub-view .hud-card--hp {
    width: 100%;
    min-width: 0;
}

.global-hud .hud-bar,
.hub-view .hud-bar {
    height: 26px;
}

.hub-view .hub-scene {
    min-height: calc(100vh - 24px);
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
}

.cantine-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 394px;
    gap: 22px;
    align-items: start;
}

.cantine-pane {
    display: grid;
    gap: 16px;
    padding: 22px;
}

.cantine-pane--work {
    width: 394px;
    min-width: 394px;
    justify-self: end;
}

.cantine-pane__title {
    margin: 0;
    font-size: 1.08rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cantine-mobile-switch {
    gap: 10px;
}

.cantine-mobile-switch__button {
    min-height: 40px;
}

    .cantine-mobile-switch__button.is-active {
        border-color: rgba(208, 169, 95, 0.45);
        background: linear-gradient(180deg, rgba(208, 169, 95, 0.22), rgba(208, 169, 95, 0.1));
    }

    .section-head {
        align-items: flex-start;
    }

.dish-grid {
    display: grid;
    gap: 12px;
}

.dish-grid--eat {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.dish-grid--work {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dish-card {
    position: relative;
    display: grid;
    align-content: start;
    gap: 8px;
    min-height: 186px;
    padding: 14px 12px 12px;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.dish-card--disabled {
    opacity: 0.48;
}

.dish-card--disabled .dish-card__image {
    filter: grayscale(0.9);
}

.dish-card__qty {
    position: absolute;
    top: 8px;
    right: 8px;
    left: auto;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(7, 10, 14, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text);
    font-size: 0.82rem;
}

.dish-card__gain {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(7, 10, 14, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #f0d082;
    font-size: 0.78rem;
    line-height: 1;
}

.dish-card__visual {
    display: grid;
    place-items: center;
    min-height: 82px;
    margin-top: 12px;
}

.dish-card__image {
    display: block;
    width: 112px;
    height: 84px;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}

.dish-card--work .dish-card__image {
    width: 92px;
    height: 92px;
    border-radius: 18px;
}

.dish-card__title {
    margin: 0;
    text-align: center;
    font-size: 1rem;
    line-height: 1.08;
}

.dish-card__sub {
    margin: 0;
    text-align: center;
    color: var(--text-soft);
    font-size: 0.8rem;
}

.dish-card__form {
    margin-top: auto;
}

.dish-card .button {
    min-height: 40px;
    font-size: 0.9rem;
}

.uniform-grid--duo .dish-card {
    min-height: 178px;
    padding: 12px 10px 10px;
}

.uniform-grid--duo .dish-card__visual {
    min-height: 74px;
    margin-top: 8px;
}

.uniform-grid--duo .dish-card__image {
    width: 92px;
    height: 68px;
}

.uniform-grid--duo .dish-card--work .dish-card__image {
    width: 84px;
    height: 84px;
}

.uniform-grid--duo .dish-card__title {
    font-size: 0.96rem;
}

.uniform-grid--duo .dish-card__sub {
    font-size: 0.78rem;
}

.item-card {
    min-height: 180px;
}

.item-card__info-button {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(7, 10, 14, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #f0d082;
    font-size: 0.95rem;
    font-weight: 700;
    z-index: 1;
}

.item-card__info-button:hover {
    color: #fff2cf;
}

.item-card__effect {
    min-height: 54px;
    margin: 0;
    text-align: center;
    color: var(--text-soft);
    font-size: 0.8rem;
    line-height: 1.35;
}

.inventory-empty {
    padding: 18px 20px;
    border-radius: 18px;
    border: 1px dashed rgba(255, 255, 255, 0.12);
    color: var(--text-soft);
}

.kitchen-active {
    display: grid;
    justify-items: center;
    gap: 12px;
    width: 100%;
    min-height: 384px;
    align-content: start;
    padding: 10px 6px 2px;
}

.kitchen-active__image {
    display: block;
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.kitchen-active__title {
    margin: 0;
    text-align: center;
    font-size: 1.15rem;
}

.kitchen-active__sub {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.84rem;
}

.modal__dialog--job {
    width: min(720px, calc(100% - 24px));
}

.job-sheet {
    display: grid;
    gap: 22px;
}

.job-sheet__progress {
    display: grid;
    gap: 10px;
}

.job-sheet__line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    color: var(--text-soft);
}

.job-sheet__line strong {
    color: var(--text);
    font-size: 1.08rem;
}

.job-bonus-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.job-bonus-card {
    display: grid;
    gap: 8px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid var(--stroke);
    background: rgba(255, 255, 255, 0.025);
    color: var(--text-soft);
}

.job-bonus-card strong {
    color: var(--text);
    font-size: 1rem;
}

.job-bonus-card.is-locked {
    opacity: 0.65;
}

.job-bonus-card.is-unlocked {
    border-color: rgba(240, 226, 174, 0.45);
    background: rgba(245, 232, 179, 0.16);
    color: #f8efc9;
}

.job-bonus-card.is-unlocked strong {
    color: #fff8dc;
}

.kitchen-charge-copy {
    margin: 8px 0 0;
    color: var(--text-soft);
    font-size: 0.88rem;
}

.kitchen-charge-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
}

.kitchen-charge-dot {
    width: 44px;
    height: 44px;
    background-image: url('../../images/Cantine/chargevide.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.4;
    transition: opacity 0.2s ease;
}

.kitchen-charge-dot.is-filled {
    background-image: url('../../images/Cantine/chargepleine.png');
    opacity: 1;
}

.button.is-disabled {
    opacity: 0.55;
    pointer-events: none;
    cursor: not-allowed;
}

.kitchen-minigame-shell {
    max-width: 1100px;
    margin: 0 auto;
}

.kitchen-game-view--stability .kitchen-minigame-shell {
    max-width: none;
    width: 100%;
}

.kitchen-minigame {
    display: grid;
    gap: 20px;
}

.kitchen-minigame__board {
    position: relative;
    min-height: 420px;
    padding: 34px 28px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(180deg, rgba(18, 24, 32, 0.94), rgba(11, 15, 21, 0.98)),
        rgba(9, 12, 18, 0.96);
}

.kitchen-game-view--stability .kitchen-minigame__board {
    min-height: calc(100vh - 245px);
    padding: 18px;
}

.kitchen-game-panel {
    display: grid;
    height: 100%;
    place-items: center;
}

.kitchen-game-panel--stability {
    width: 100%;
    align-self: stretch;
}

.kitchen-minigame__action {
    width: min(100%, 260px);
    justify-self: center;
}

.kitchen-minigame__action--overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    transform: translate(-50%, -50%);
}

.kitchen-minigame__countdown {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    transform: translate(-50%, -50%);
    color: rgba(248, 244, 232, 0.96);
    font-size: clamp(3.4rem, 10vw, 5.6rem);
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    text-shadow: 0 0 22px rgba(208, 169, 95, 0.34);
    pointer-events: none;
}

.kitchen-precision {
    width: min(100%, 680px);
    display: grid;
    gap: 24px;
}

.kitchen-precision__top {
    display: flex;
    justify-content: center;
}

.kitchen-precision__cuts {
    display: flex;
    gap: 8px;
}

.kitchen-precision__cut-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.kitchen-precision__cut-dot.is-current {
    background: rgba(208, 169, 95, 0.86);
    border-color: rgba(208, 169, 95, 0.44);
}

.kitchen-precision__cut-dot.is-done {
    background: rgba(255, 255, 255, 0.7);
}

.kitchen-precision__track {
    position: relative;
    width: 100%;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    touch-action: manipulation;
}

.kitchen-precision__target {
    position: absolute;
    top: 50%;
    height: 100%;
    border-radius: 999px;
    transform: translate(-50%, -50%);
}

.kitchen-precision__target--bad {
    background: rgba(214, 84, 84, 0.26);
}

.kitchen-precision__target--medium {
    background: rgba(214, 146, 44, 0.34);
}

.kitchen-precision__target--perfect {
    background: rgba(71, 164, 101, 0.5);
}

.kitchen-precision__cursor {
    position: absolute;
    top: 50%;
    left: 0;
    width: 8px;
    height: 54px;
    border-radius: 999px;
    background: rgba(240, 208, 130, 0.98);
    box-shadow: 0 0 14px rgba(208, 169, 95, 0.34);
    transform: translate(-50%, -50%);
}

.kitchen-stability {
    position: relative;
    width: 100%;
    min-height: max(460px, calc(100vh - 330px));
    height: 100%;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background:
        radial-gradient(circle at center, rgba(255, 255, 255, 0.04), transparent 64%),
        rgba(255, 255, 255, 0.03);
    overflow: hidden;
    touch-action: none;
}

.kitchen-stability__gold {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(8, 11, 16, 0.76);
    color: var(--text);
    font-size: 0.92rem;
    font-weight: 700;
}

.kitchen-stability__target {
    position: absolute;
    border-radius: 999px;
    transform: translate(-50%, -50%);
    width: 75px;
    height: 75px;
    border: 2px solid rgba(240, 208, 130, 0.78);
    background: rgba(208, 169, 95, 0.08);
    transition: box-shadow 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

.kitchen-stability__target.is-active {
    background: rgba(71, 164, 101, 0.16);
    border-color: rgba(71, 164, 101, 0.72);
    box-shadow: 0 0 18px rgba(71, 164, 101, 0.26);
}

.kitchen-help {
    gap: 18px;
}

.kitchen-help__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--text-soft);
    font-size: 0.96rem;
}

.kitchen-help__toggle input {
    width: 16px;
    height: 16px;
    margin: 0;
}

.kitchen-cooking {
    width: min(100%, 180px);
    display: grid;
    justify-items: center;
}

.kitchen-cooking__gauge {
    position: relative;
    width: 92px;
    height: 360px;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    touch-action: manipulation;
}

.kitchen-cooking__fill,
.kitchen-cooking__target {
    position: absolute;
    left: 0;
    right: 0;
}

.kitchen-cooking__fill {
    bottom: 0;
    height: 0;
    background: linear-gradient(180deg, rgba(240, 208, 130, 0.98), rgba(214, 106, 44, 0.98));
}

.kitchen-cooking__target--bad {
    bottom: 30%;
    height: 28%;
    background: rgba(214, 84, 84, 0.2);
}

.kitchen-cooking__target--medium {
    bottom: 62%;
    height: 16%;
    background: rgba(214, 146, 44, 0.26);
}

.kitchen-cooking__target--perfect {
    bottom: 80%;
    height: 9%;
    background: rgba(71, 164, 101, 0.34);
}

.kitchen-view--comic .site-shell,
.kitchen-game-view--comic .site-shell,
.kitchen-result-view .site-shell {
    width: min(520px, calc(100% - 14px));
}

.kitchen-view--comic .page-auto-topbar,
.kitchen-game-view--comic .page-auto-topbar,
.kitchen-result-view .page-auto-topbar {
    margin-bottom: 4px;
}

.kitchen-view--comic .page-auto-topbar h1,
.kitchen-game-view--comic .page-auto-topbar h1,
.kitchen-result-view .page-auto-topbar h1 {
    font-family: "Anton", "Archivo Black", var(--font-ui);
    font-size: clamp(1.64rem, 5vw, 2rem);
    letter-spacing: 0.03em;
}

.kitchen-view--comic .page-back-link--auto,
.kitchen-game-view--comic .page-back-link--auto,
.kitchen-result-view .page-back-link--auto {
    border-radius: 8px;
}

/* ── Bibliothèque ── */

.library-page {
    display: grid;
    gap: 0;
    padding-top: 18px;
    padding-bottom: 18px;
}

.library-stage {
    position: relative;
}

.library-stage__deco {
    position: absolute;
    top: -139px;
    right: 9px;
    width: 169px;
    height: auto;
    object-fit: contain;
    pointer-events: none;
    z-index: 4;
}

.page-auto-topbar__sub {
    position: absolute;
    left: 0;
    top: calc(100% + 3px);
    margin: 0;
    font-family: "JetBrains Mono", var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #d7b35f;
    white-space: nowrap;
}

.library-shelf {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
    padding: 11px 10px 15px;
    margin-top: 0;
    background:
        radial-gradient(circle at 1px 1px, rgba(244, 234, 213, 0.06) 0 1px, transparent 1px),
        linear-gradient(180deg, rgba(20, 14, 10, 0.95) 0%, rgba(14, 10, 8, 0.95) 100%);
    background-size: 6px 6px, auto;
    border: 3px solid #0a0708;
    border-radius: 10px;
    box-shadow: 4px 4px 0 #0a0708;
    position: relative;
    align-items: end;
}

.library-shelf::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 13px;
    background: linear-gradient(180deg, #59422d, #2b1f15);
    border-top: 2px solid #0a0708;
    border-radius: 0 0 7px 7px;
}

.library-cover {
    position: relative;
    display: block;
    width: 100%;
    max-width: none;
    aspect-ratio: 3 / 4.2;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.14s ease;
}

.library-cover::before {
    display: none;
}

.library-cover__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    z-index: 0;
}

.library-cover:hover,
.library-cover:focus-visible {
    transform: translateY(-3px);
}

/* modal livre ouvert */
.book-modal {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: grid;
    place-items: center;
    padding: 16px;
}

.book-modal[hidden] {
    display: none;
}

.book-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 3, 2, 0.82);
    backdrop-filter: blur(3px);
}

.book-modal__spread {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    width: min(820px, 100%);
    max-height: calc(100vh - 40px);
    border: 4px solid #0a0708;
    border-radius: 4px 10px 10px 4px;
    box-shadow: 8px 8px 0 #0a0708, 0 24px 60px rgba(0,0,0,0.7);
    overflow: visible;
    transform: scale(0.88) rotateY(-6deg);
    opacity: 0;
    transform-origin: left center;
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease;
}

.book-modal.is-open .book-modal__spread {
    transform: scale(1) rotateY(0deg);
    opacity: 1;
}

.book-modal__page {
    position: relative;
}

.book-modal__pages {
    position: relative;
}

/* page gauche — couverture */
.book-modal__page--left {
    min-height: 400px;
}

.book-modal__cover {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    height: 100%;
    padding: 28px 22px;
    background: linear-gradient(160deg, var(--book-color), var(--book-dark));
}

.book-modal__cover::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 14px;
    background: rgba(0,0,0,0.35);
}

.book-modal__chapter {
    font-family: "JetBrains Mono", var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(244, 234, 213, 0.55);
}

.book-modal__title {
    font-family: "Anton", "Archivo Black", var(--font-ui);
    font-size: clamp(1.6rem, 5vw, 2.4rem);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #f4ead5;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.4);
    line-height: 0.95;
}

.book-modal__sub {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(244, 234, 213, 0.6);
}

.book-modal__lines {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 14px;
}

.book-modal__lines span {
    display: block;
    height: 2px;
    background: rgba(244, 234, 213, 0.2);
    border-radius: 2px;
}

.book-modal__lines span:nth-child(1) { width: 80%; }
.book-modal__lines span:nth-child(2) { width: 60%; }
.book-modal__lines span:nth-child(3) { width: 70%; }
.book-modal__lines span:nth-child(4) { width: 40%; }

/* page unique — image seule */
.book-modal__page--only {
    background: #f4ead5;
    overflow-y: auto;
    max-height: calc(100vh - 48px);
}

.library-book-placeholder {
    min-height: min(68vh, 560px);
    padding: clamp(26px, 5vw, 40px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    background:
        linear-gradient(180deg, rgba(203, 63, 66, 0.08), rgba(203, 63, 66, 0.02)),
        repeating-linear-gradient(180deg, transparent 0 31px, rgba(10, 7, 8, 0.08) 31px 32px),
        #f4ead5;
}

.library-book-placeholder__eyebrow {
    margin: 0;
    font-family: "JetBrains Mono", var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(125, 31, 40, 0.9);
}

.library-book-placeholder__title {
    margin: 0;
    font-family: "Anton", "Archivo Black", var(--font-ui);
    font-size: clamp(1.9rem, 6vw, 2.8rem);
    line-height: 0.95;
    text-transform: uppercase;
    color: #221312;
}

.library-book-placeholder__copy {
    margin: 0;
    max-width: 28rem;
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(34, 19, 18, 0.82);
}

/* demi-page — vue cuisine gauche/droite */
.book-modal__page--split {
    overflow: hidden;
}

.book-modal__page--split .book-modal__zoom-area {
    overflow: hidden;
    cursor: default;
}

.book-modal__page--split .book-modal__img {
    width: 200%;
    transition: transform 0.44s cubic-bezier(0.4, 0, 0.2, 1);
}

.book-modal__page--split.show-right .book-modal__img {
    transform: translateX(-50%);
}

/* Legend/annuaire: slide the entire book div — same mechanism as book-modal__img */
.book-modal__page--split .legend-book,
.book-modal__page--split .annuaire-book {
    width: 200%;
    transition: transform 0.44s cubic-bezier(0.4, 0, 0.2, 1);
}

.book-modal__page--split.show-right .legend-book,
.book-modal__page--split.show-right .annuaire-book {
    transform: translateX(-50%);
}

/* Constrain title/toolbar to left-page area so they stay visible in left view */
.book-modal__page--split .legend-book__title-wrap {
    justify-self: start;
    width: 44%;
    text-align: center;
}

.book-modal__page--split .annuaire-book__head {
    display: none;
}

/* Columns always in row 2 so empty title row collapses to zero height */
.legend-book__title-wrap {
    grid-row: 1;
}

.legend-book__columns {
    grid-row: 2;
}

.book-modal__content {
    padding: 0;
}

.book-modal__zoom-area {
    position: relative;
    overflow: visible;
    cursor: zoom-in;
    touch-action: none;
}

.book-modal__zoom-area.is-zoom-enabled {
    cursor: none;
}

.book-modal__img {
    display: block;
    width: 100%;
    height: auto;
}

.book-modal__lens {
    position: fixed;
    top: -9999px;
    left: -9999px;
    width: 166px;
    height: 166px;
    border-radius: 50%;
    border: 3px solid #0a0708;
    box-shadow: 4px 4px 0 rgba(10, 7, 8, 0.75);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.14s ease;
    background-repeat: no-repeat;
    background-color: #f4ead5;
    z-index: 1200;
    transform: translate(-50%, -50%);
}

.book-modal__controls {
    position: absolute;
    top: -44px;
    right: 0;
    z-index: 12;
    display: flex;
    align-items: center;
    gap: 8px;
}

.book-modal__pager {
    position: absolute;
    left: 50%;
    bottom: -46px;
    transform: translateX(-50%);
    z-index: 12;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.book-modal__pager-index {
    display: none;
}

.book-modal__pager-btn {
    min-height: 30px;
    padding: 0 10px;
    border: 2px solid #0a0708;
    border-radius: 10px;
    background: #f4ead5;
    color: #0a0708;
    box-shadow: 2px 2px 0 #0a0708;
    font-family: "Bowlby One", "Archivo Black", var(--font-ui);
    font-size: 0.58rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
}

.book-modal__pager-btn:hover:not(:disabled) {
    transform: translate(-1px, -1px);
}

.book-modal__pager-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: 1px 1px 0 #0a0708;
}

.book-modal__pager-index {
    display: none !important;
}

/* bouton fermer */
.book-modal__close {
    width: 30px;
    height: 30px;
    border: 2px solid #0a0708;
    border-radius: 50%;
    background: #f4ead5;
    color: #0a0708;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    box-shadow: 2px 2px 0 #0a0708;
    transition: transform 0.1s ease;
}

.book-modal__close:hover {
    transform: scale(1.08);
}

.book-modal__zoom-toggle {
    width: 30px;
    height: 30px;
    border: 2px solid #0a0708;
    border-radius: 50%;
    background: #f4ead5;
    color: #0a0708;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    box-shadow: 2px 2px 0 #0a0708;
    transition: transform 0.1s ease, background 0.1s ease;
}

.book-modal__zoom-toggle:hover {
    transform: scale(1.08);
}

.book-modal__zoom-toggle[aria-pressed="true"] {
    background: #d7be89;
}

.legend-book {
    position: relative;
    font-size: clamp(10px, 1.7vw, 21px);
}

.legend-book__bg {
    display: block;
    width: 100%;
    height: auto;
}

.legend-book__overlay {
    position: absolute;
    inset: 5.8% 5.2% 6.7%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
}

.legend-book__title-wrap {
    display: grid;
    justify-items: center;
    gap: 0.2em;
    margin-bottom: 0.8em;
    text-align: center;
}

.legend-book__eyebrow {
    margin: 0;
    font-family: "JetBrains Mono", var(--font-mono);
    font-size: 0.7em;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(64, 40, 25, 0.72);
}

.legend-book__title {
    margin: 0;
    font-family: "Bowlby One", "Anton", "Archivo Black", var(--font-ui);
    font-size: 1.34em;
    line-height: 0.95;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #221811;
    text-shadow: 1px 1px 0 rgba(255, 245, 224, 0.38);
}

.legend-book__columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 11.8%;
    min-height: 0;
    padding: 0 2.5%;
}

.legend-book__sheet {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
}

.legend-book__sheet-head,
.legend-book__row {
    display: grid;
    grid-template-columns: 6em minmax(0, 1fr) 7.6em;
    align-items: center;
    column-gap: 0.7em;
}

.legend-book__sheet-head {
    padding: 0 0 0.45em;
    border-bottom: 0.18em solid rgba(49, 34, 22, 0.18);
    font-family: "JetBrains Mono", var(--font-mono);
    font-size: 0.7em;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: rgba(63, 40, 25, 0.82);
}

.legend-book__sheet-head span:last-child {
    text-align: right;
}

.legend-book__sheet-body {
    display: grid;
    align-content: start;
    gap: 0.5em;
    padding-top: 0.6em;
}

.legend-book__row {
    min-height: 8.8em;
    padding: 0.3em 0.1em;
    border-bottom: 0.12em dashed rgba(72, 49, 30, 0.2);
}

.legend-book__rank {
    font-family: "Bowlby One", "Anton", "Archivo Black", var(--font-ui);
    font-size: 1.2em;
    letter-spacing: 0.03em;
    color: #23170f;
}

.legend-book__player {
    display: inline-grid;
    grid-template-columns: 7.3em minmax(0, 1fr);
    align-items: center;
    gap: 0.7em;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

.legend-book__player:hover .legend-book__name,
.legend-book__player:focus-visible .legend-book__name {
    text-decoration: underline;
}

.legend-book__avatar {
    width: 7.3em;
    height: 7.3em;
    border-radius: 0.6em;
    border: 0.16em solid #23170f;
    object-fit: cover;
    box-shadow: 0.12em 0.12em 0 #23170f;
    background: rgba(255, 250, 238, 0.6);
}

.legend-book__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: "Impact", "Arial Black", var(--font-ui);
    font-size: 1.74em;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #1b130d;
}

.legend-book__reputation {
    justify-self: end;
    min-width: 7em;
    padding: 0.32em 0.52em;
    border: 0.14em solid #23170f;
    border-radius: 999px;
    background: rgba(243, 210, 104, 0.62);
    box-shadow: 0.1em 0.1em 0 rgba(35, 23, 15, 0.92);
    font-family: "JetBrains Mono", var(--font-mono);
    font-size: 1.3em;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-align: center;
    color: #1b130d;
}

.legend-book__empty {
    margin: 3.8em auto 0;
    max-width: 14em;
    text-align: center;
    font-family: "Special Elite", var(--font-ui);
    font-size: 0.9em;
    line-height: 1.45;
    color: rgba(52, 33, 19, 0.78);
}

.annuaire-book {
    position: relative;
    font-size: clamp(10px, 1.7vw, 21px);
}

.annuaire-book__bg {
    display: block;
    width: 100%;
    height: auto;
}

.annuaire-book__overlay {
    position: absolute;
    inset: 5.8% 5.2% 6.7%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
}

.annuaire-book__head {
    display: grid;
    gap: 0.4em;
    margin-bottom: 0.45em;
}

.annuaire-book__title-wrap {
    display: grid;
    justify-items: center;
    gap: 0.18em;
    text-align: center;
}

.annuaire-book__eyebrow {
    margin: 0;
    font-family: "JetBrains Mono", var(--font-mono);
    font-size: 0.68em;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(64, 40, 25, 0.72);
}

.annuaire-book__title {
    margin: 0;
    font-family: "Bowlby One", "Anton", "Archivo Black", var(--font-ui);
    font-size: 1.22em;
    line-height: 0.95;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #221811;
    text-shadow: 1px 1px 0 rgba(255, 245, 224, 0.38);
}

.annuaire-book__toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.3em;
    align-items: center;
    margin-bottom: 0;
}

.annuaire-book__search {
    width: 60%;
    justify-self: center;
    min-width: 0;
    min-height: 2.2em;
    padding: 0 1em;
    border: 0.16em solid #23170f;
    border-radius: 999px;
    background: rgba(255, 249, 236, 0.92);
    box-shadow: 0.1em 0.1em 0 rgba(35, 23, 15, 0.92);
    color: #1b130d;
    font-family: "JetBrains Mono", var(--font-mono);
    font-size: max(16px, 0.76em);
    font-weight: 700;
    letter-spacing: 0.03em;
}

.annuaire-book__search::placeholder {
    color: rgba(35, 23, 15, 0.55);
}

.annuaire-book__count {
    justify-self: start;
    font-family: "JetBrains Mono", var(--font-mono);
    font-size: 0.68em;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(49, 34, 22, 0.82);
}

.annuaire-book__columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 11.8%;
    min-height: 0;
    padding: 0 2.5%;
}

.annuaire-book__sheet {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
}

.annuaire-book__sheet .annuaire-book__head {
    display: grid;
    gap: 0.4em;
    margin-bottom: 0.45em;
    width: 100%;
}

.annuaire-book__sheet-head,
.annuaire-book__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 6.6em;
    align-items: center;
    column-gap: 0.6em;
}

.annuaire-book__sheet-head {
    padding: 0 0 0.45em;
    border-bottom: 0.18em solid rgba(49, 34, 22, 0.18);
    font-family: "JetBrains Mono", var(--font-mono);
    font-size: 0.7em;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: rgba(63, 40, 25, 0.82);
}

.annuaire-book__sheet-head span:last-child {
    text-align: right;
}

.annuaire-book__sheet-body {
    display: grid;
    align-content: start;
    gap: 0.5em;
    padding-top: 0.6em;
}

.annuaire-book__row {
    min-height: 9.2em;
    padding: 0.3em 0.1em;
    border-bottom: 0.12em dashed rgba(72, 49, 30, 0.2);
}

.annuaire-book__player {
    display: inline-grid;
    grid-template-columns: 7.5em minmax(0, 1fr);
    align-items: center;
    gap: 0.78em;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

.annuaire-book__player:hover .annuaire-book__name,
.annuaire-book__player:focus-visible .annuaire-book__name {
    text-decoration: underline;
}

.annuaire-book__avatar {
    width: 7.5em;
    height: 7.5em;
    border-radius: 0.6em;
    border: 0.16em solid #23170f;
    object-fit: cover;
    box-shadow: 0.12em 0.12em 0 #23170f;
    background: rgba(255, 250, 238, 0.6);
}

.annuaire-book__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: "Impact", "Arial Black", var(--font-ui);
    font-size: 1.76em;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #1b130d;
}

.annuaire-book__meta {
    justify-self: end;
    min-width: 6.2em;
    padding: 0.3em 0.52em;
    border: 0.14em solid #23170f;
    border-radius: 999px;
    background: rgba(209, 226, 162, 0.76);
    box-shadow: 0.1em 0.1em 0 rgba(35, 23, 15, 0.92);
    font-family: "JetBrains Mono", var(--font-mono);
    font-size: 1.3em;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-align: center;
    color: #1b130d;
}

.annuaire-book__empty {
    position: absolute;
    inset: auto 0 20%;
    margin: 0 auto;
    max-width: 16em;
    text-align: center;
    font-family: "Special Elite", var(--font-ui);
    font-size: 0.92em;
    line-height: 1.45;
    color: rgba(52, 33, 19, 0.78);
}

.library-unlock-modal[hidden] {
    display: none;
}

.library-unlock-modal {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: grid;
    place-items: center;
    padding: 14px;
}

.library-unlock-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7, 4, 2, 0.84);
    backdrop-filter: blur(2px);
}

.library-unlock-modal__card {
    position: relative;
    width: min(286px, 100%);
    border: 3px solid #0a0708;
    border-radius: 14px;
    box-shadow: 5px 5px 0 #0a0708;
    padding: 10px 10px 10px;
    text-align: center;
    background:
        radial-gradient(circle at 2px 2px, rgba(10, 7, 8, 0.13) 0 0.9px, transparent 0.9px),
        linear-gradient(180deg, #f2e4c9, #ddc08f);
    background-size: 6px 6px, auto;
    color: #0a0708;
}

.library-unlock-modal__card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 7px;
    background: repeating-linear-gradient(
        90deg,
        #d22b2b 0 14px,
        #0a0708 14px 17px
    );
    border-radius: 10px 10px 0 0;
}

.library-unlock-modal__eyebrow {
    margin: 8px 0 3px;
    font-family: "JetBrains Mono", var(--font-mono);
    font-size: 0.46rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(10, 7, 8, 0.62);
}

.library-unlock-modal__title {
    margin: 0 0 5px;
    font-family: "Bowlby One", "Anton", "Archivo Black", var(--font-ui);
    font-size: clamp(0.98rem, 4vw, 1.35rem);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 0.92;
    color: #0a0708;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.52);
}

.library-unlock-modal__img {
    display: block;
    width: min(118px, 56%);
    margin: 0 auto 5px;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.24));
}

.library-unlock-modal__stars {
    margin: 0 0 4px;
    font-size: 0.82rem;
    letter-spacing: 0.12em;
    color: #d22b2b;
    text-shadow: 1px 1px 0 rgba(10, 7, 8, 0.22);
}

.library-unlock-modal__copy {
    margin: 0 0 8px;
    font-size: 0.64rem;
    line-height: 1.28;
    letter-spacing: 0.03em;
    color: rgba(10, 7, 8, 0.82);
}

.library-unlock-modal__button {
    min-height: 30px;
    padding: 0 12px;
    border: 3px solid #0a0708;
    border-radius: 10px;
    background: linear-gradient(180deg, #f3d163, #d39f28);
    color: #0a0708;
    box-shadow: 2px 2px 0 #0a0708;
    font-family: "Bowlby One", "Archivo Black", var(--font-ui);
    font-size: 0.58rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    cursor: pointer;
}

.library-unlock-modal__button:hover {
    transform: translate(-1px, -1px);
}

/* mobile : livre en pleine page */
@media (max-width: 560px) {
    .page-auto-topbar--library {
        grid-template-columns: auto 1fr;
    }

    .page-auto-topbar--with-sub {
        margin-bottom: 21px;
    }

    .page-auto-topbar__sub {
        font-size: 0.6rem;
        letter-spacing: 0.11em;
    }

    .library-page {
        padding-top: 16px;
    }

    .library-shelf {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        padding: 8px 6px 14px;
    }

    .book-modal__spread {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        max-height: calc(100vh - 32px);
    }

    .book-modal__page--left {
        min-height: auto;
    }

    .book-modal__cover {
        padding: 20px 18px;
    }

    .book-modal__page--right {
        border-left: none;
        border-top: 3px solid #0a0708;
    }

    .book-modal__controls {
        top: -40px;
    }

    .book-modal__pager {
        bottom: -42px;
        gap: 6px;
    }

    .book-modal__pager-btn {
        min-height: 28px;
        padding: 0 8px;
        font-size: 0.54rem;
    }

    .book-modal__pager-index { display: none !important; }

    .book-modal__lens {
        width: 132px;
        height: 132px;
    }

    .legend-book {
        font-size: clamp(7px, 2.1vw, 13px);
    }

    .legend-book__overlay {
        inset: 6.4% 4.8% 7%;
    }

    .legend-book__columns {
        column-gap: 10.2%;
        padding: 0 1.8%;
    }

    .legend-book__title {
        font-size: 1.18em;
    }

    .legend-book__sheet-head,
    .legend-book__row {
        grid-template-columns: 3.8em minmax(0, 1fr) 5.6em;
        column-gap: 0.5em;
    }

    .legend-book__row {
        min-height: 4.6em;
    }

    .legend-book__player {
        grid-template-columns: 2.9em minmax(0, 1fr);
        gap: 0.48em;
    }

    .legend-book__avatar {
        width: 2.9em;
        height: 2.9em;
    }

    .annuaire-book {
        font-size: clamp(7px, 2.05vw, 13px);
    }

    .annuaire-book__overlay {
        inset: 6.4% 4.8% 7%;
    }

    .annuaire-book__columns {
        column-gap: 10.2%;
        padding: 0 1.8%;
    }

    .annuaire-book__toolbar {
        gap: 0.3em;
    }

    .annuaire-book__count {
        font-size: 0.62em;
    }

    .annuaire-book__sheet-head,
    .annuaire-book__row {
        grid-template-columns: minmax(0, 1fr) 5.1em;
        column-gap: 0.45em;
    }

    .annuaire-book__row {
        min-height: 5em;
    }

    .annuaire-book__player {
        grid-template-columns: 3.1em minmax(0, 1fr);
        gap: 0.52em;
    }

    .annuaire-book__avatar {
        width: 3.1em;
        height: 3.1em;
    }
}

.canteen-page {
    display: grid;
    gap: 12px;
}

.canteen-banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.canteen-charges-block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

.canteen-charges-title {
    color: rgba(244, 234, 213, 0.68);
    font-family: "Special Elite", var(--font-ui);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    white-space: nowrap;
}

.canteen-charges-icons {
    display: flex;
    gap: 6px;
    margin-bottom: 0;
}

.canteen-charges-next {
    flex-basis: 100%;
    color: #e03030;
    font-family: "JetBrains Mono", var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-shadow: 0 0 8px rgba(224, 48, 48, 0.4);
    min-height: 1.1em;
}

.canteen-banner .kitchen-charge-bar {
    gap: 6px;
    margin-bottom: 0;
}

.canteen-banner .kitchen-charge-dot {
    width: 36px;
    height: 36px;
}

.canteen-banner__stamp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 2px 8px;
    border: 3px solid #d22b2b;
    color: #d22b2b;
    background: transparent;
    font-family: "Special Elite", var(--font-ui);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transform: rotate(-7deg);
}

.canteen-recipe-intro {
    padding: 12px 14px;
    border-radius: 3px;
    border: 4px solid #0a0708;
    background: #f4ead5;
    box-shadow: 4px 4px 0 #0a0708;
}

.canteen-recipe-intro p {
    margin: 0 0 4px;
    color: rgba(10, 7, 8, 0.66);
    font-family: "Special Elite", var(--font-ui);
    font-size: 0.72rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.canteen-recipe-intro h2 {
    margin: 0;
    color: #0a0708;
    font-family: "Anton", "Archivo Black", var(--font-ui);
    font-size: clamp(1.32rem, 3.8vw, 1.62rem);
    line-height: 0.95;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.canteen-menu {
    display: grid;
    gap: 14px;
}

.canteen-menu-item {
    --canteen-tilt: 0deg;
    position: relative;
    border: 4px solid #0a0708;
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 5px 5px 0 #0a0708;
    transform: rotate(var(--canteen-tilt));
    transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.canteen-menu-item:hover,
.canteen-menu-item:focus-within {
    transform: rotate(var(--canteen-tilt)) translate(2px, 2px);
    box-shadow: 3px 3px 0 #0a0708;
    filter: saturate(1.04);
}

.canteen-menu-item__link {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) max-content;
    align-items: center;
    gap: 12px;
    min-height: 96px;
    padding: 10px 12px;
    color: #0a0708;
    cursor: pointer;
}

.canteen-menu-item__link.is-disabled {
    pointer-events: none;
}

.canteen-menu-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 2px 2px, rgba(10, 7, 8, 0.2) 0 0.9px, transparent 0.9px);
    background-size: 5px 5px;
    opacity: 0.24;
    pointer-events: none;
}

.canteen-menu-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 36%),
        linear-gradient(180deg, transparent 72%, rgba(0, 0, 0, 0.18) 100%);
    pointer-events: none;
}

.canteen-menu-item--rust {
    --canteen-tilt: -1.1deg;
    background: linear-gradient(180deg, #c56c31, #9a461d);
}

.canteen-menu-item--yellow {
    --canteen-tilt: 0.8deg;
    background: linear-gradient(180deg, #e8be26, #bc9110);
}

.canteen-menu-item--red {
    --canteen-tilt: -0.9deg;
    background: linear-gradient(180deg, #df3131, #b61f1f);
}

.canteen-menu-item--green {
    background: linear-gradient(180deg, #3aa05c, #2b7a46);
}

.canteen-menu-item--purple {
    background: linear-gradient(180deg, #7a4cb8, #5c3490);
}

.canteen-menu-item__link--btn {
    width: 100%;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.canteen-menu-item__link--btn:disabled {
    cursor: not-allowed;
}

.canteen-menu-item__icon {
    position: relative;
    z-index: 1;
    width: 72px;
    height: 72px;
    flex-shrink: 0;
}

.canteen-menu-item__dish-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.canteen-menu-item__stars {
    display: inline-block;
    margin-left: 6px;
    font-size: 0.82rem;
    letter-spacing: 2px;
    vertical-align: middle;
    opacity: 0.9;
}

.canteen-menu-item__consume {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 56px;
    padding: 6px 8px;
    background: #0a0708;
    border: 2px solid rgba(244, 234, 213, 0.2);
    border-radius: 4px;
}

.canteen-menu-item__consume-label {
    font-family: "JetBrains Mono", var(--font-mono);
    font-size: 0.44rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(244, 234, 213, 0.6);
}

.canteen-menu-item__consume-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.canteen-menu-item__consume-icon {
    width: 26px;
    height: 26px;
    object-fit: contain;
    flex-shrink: 0;
}

.canteen-menu-item__consume-count {
    font-family: "Anton", "Archivo Black", var(--font-ui);
    font-size: 1.2rem;
    color: #f4ead5;
    line-height: 1;
}

.canteen-menu-item__body {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.canteen-menu-item__name {
    display: block;
    font-family: "Anton", "Archivo Black", var(--font-ui);
    font-size: clamp(1.44rem, 4vw, 1.78rem);
    line-height: 0.92;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.canteen-menu-item__meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

.canteen-menu-item__tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 0 9px;
    border: 2px solid #0a0708;
    font-family: "JetBrains Mono", var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.canteen-menu-item__tag--time {
    background: #0a0708;
    color: #f4ead5;
}

.canteen-menu-item__tag--stars {
    background: #f4ead5;
    color: #0a0708;
    font-family: inherit;
    font-size: 1.18rem;
    letter-spacing: 3px;
    min-height: 30px;
    padding: 0 10px;
    border-color: #0a0708;
}

.canteen-menu-item__reward {
    position: relative;
    z-index: 1;
    font-family: "Anton", "Archivo Black", var(--font-ui);
    font-size: clamp(1.34rem, 3.4vw, 1.7rem);
    letter-spacing: 0.01em;
    line-height: 1;
    text-transform: uppercase;
}

.canteen-menu-item.is-disabled {
    opacity: 0.74;
}

.canteen-menu-item__lock {
    position: absolute;
    top: 6px;
    right: 8px;
    z-index: 2;
    min-height: 20px;
    padding: 2px 8px;
    border: 2px solid #0a0708;
    border-radius: 4px;
    background: #0a0708;
    color: #f4ead5;
    font-family: "JetBrains Mono", var(--font-mono);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.canteen-cook {
    min-height: calc(100vh - 182px);
    display: grid;
    align-content: start;
    gap: 18px;
}

.canteen-cook__center {
    display: grid;
    justify-items: center;
    gap: 12px;
    padding-top: 8px;
}

@keyframes canteenWobble {
    0%, 100% { transform: rotate(-2deg); }
    50% { transform: rotate(2deg); }
}

@keyframes canteenBubble {
    0% { transform: translateY(0) scale(0.6); opacity: 0; }
    30% { opacity: 1; }
    100% { transform: translateY(-36px) scale(1.1); opacity: 0; }
}

@keyframes serviPopIn {
    0% { transform: scale(0) rotate(-18deg); opacity: 0; }
    70% { transform: scale(1.14) rotate(-4deg); opacity: 1; }
    100% { transform: scale(1) rotate(-6deg); opacity: 1; }
}

.canteen-cook__pot-wrap {
    position: relative;
    display: grid;
    place-items: center;
    padding: 16px 20px 10px;
}

.canteen-cook__pot {
    width: 140px;
    height: 140px;
    color: #0a0708;
    position: relative;
}

.canteen-cook__pot svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    stroke-width: 4.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.canteen-cook__pot--animated {
    /* animation starts only when .is-cooking is added by JS */
}

.is-cooking .canteen-cook__pot--animated {
    animation: canteenWobble 0.4s ease-in-out infinite;
}

.canteen-cook__bubble {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(244, 234, 213, 0.62);
    animation: canteenBubble 1.4s ease-in-out infinite;
    animation-play-state: paused;
    top: -4px;
}

.is-cooking .canteen-cook__bubble {
    animation-play-state: running;
}

.canteen-cook__bubble:nth-child(1) { left: 26%; animation-delay: 0s; }
.canteen-cook__bubble:nth-child(2) { left: 48%; animation-delay: 0.3s; }
.canteen-cook__bubble:nth-child(3) { left: 70%; animation-delay: 0.6s; }

.canteen-cook__name {
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 4px 14px;
    border: 3px solid #f4ead5;
    background: #0a0708;
    color: #f4ead5;
    transform: rotate(-4deg);
    font-family: "Archivo Black", "Bowlby One", var(--font-ui);
    font-size: clamp(1.18rem, 3.2vw, 1.42rem);
    line-height: 1;
    letter-spacing: 0.01em;
}

.canteen-cook__progress-copy {
    margin: 10px 0 0;
    width: min(100%, 392px);
    color: rgba(244, 234, 213, 0.8);
    font-family: "Special Elite", var(--font-ui);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.canteen-cook__progress {
    position: relative;
    width: min(100%, 392px);
    height: 30px;
    border-radius: 2px;
    border: 4px solid #0a0708;
    background: #0a0708;
    overflow: hidden;
}

.canteen-cook__progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background: repeating-linear-gradient(
        45deg,
        #f2c529 0 10px,
        #d22b2b 10px 20px
    );
    transition: width 0.1s linear;
}

.canteen-cook__action {
    width: min(100%, 392px);
    min-height: 68px;
    border-radius: 2px;
    border: 4px solid #0a0708;
    background: linear-gradient(180deg, #d93737, #c12222);
    box-shadow: 4px 4px 0 #0a0708;
    color: #f4ead5;
    font-family: "Anton", "Archivo Black", var(--font-ui);
    font-size: clamp(1.22rem, 3.2vw, 1.46rem);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.canteen-cook__action.is-pressing {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 #0a0708;
}

.canteen-cook__action--trap {
    background: linear-gradient(180deg, #7f0000, #5c0000) !important;
    border-color: #f4ead5 !important;
    box-shadow: 4px 4px 0 #0a0708, 0 0 0 2px #d22b2b !important;
    animation: trapPulse 0.22s ease-in-out infinite alternate;
}

@keyframes trapPulse {
    from { transform: scale(1); }
    to { transform: scale(1.025); }
}

.canteen-trap-warning {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background: rgba(160, 0, 0, 0.22);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s;
}

.canteen-trap-warning--active {
    opacity: 1;
}

.canteen-trap-warning__tri {
    font-size: 3.4rem;
    line-height: 1;
    animation: warnTriPulse 0.35s ease-in-out infinite alternate;
    filter: drop-shadow(0 0 6px rgba(255, 200, 0, 0.9));
}

.canteen-trap-warning__tri:nth-child(2) {
    animation-delay: 0.1s;
    font-size: 4.2rem;
}

.canteen-trap-warning__tri:nth-child(3) {
    animation-delay: 0.2s;
}

@keyframes warnTriPulse {
    from { transform: scale(1); opacity: 0.8; }
    to { transform: scale(1.18); opacity: 1; }
}

.canteen-cook__form {
    display: none;
}

.canteen-served {
    min-height: calc(100vh - 184px);
    display: grid;
    align-items: start;
    padding-top: 36px;
}

.canteen-served__content {
    display: grid;
    justify-items: center;
    gap: 14px;
    text-align: center;
}

.canteen-served__eyebrow {
    margin: 0;
    color: rgba(244, 234, 213, 0.68);
    font-family: "Special Elite", var(--font-ui);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.canteen-served__content h1 {
    margin: 0;
    color: #e8b923;
    font-family: "Bowlby One", "Anton", var(--font-ui);
    font-size: clamp(3.8rem, 14vw, 5.4rem);
    line-height: 0.9;
    letter-spacing: 0.02em;
    text-shadow: 4px 4px 0 #0a0708, -2px -2px 0 #0a0708;
    animation: serviPopIn 0.4s ease-out forwards;
}

.canteen-served__dish {
    margin: 0;
    color: #f4ead5;
    font-family: "Special Elite", var(--font-ui);
    font-size: 1.05rem;
    letter-spacing: 0.04em;
}

.canteen-served__stamp {
    display: inline-block;
    margin: 4px 0;
    padding: 6px 16px;
    border: 3px solid #d22b2b;
    color: #d22b2b;
    font-family: "Special Elite", var(--font-ui);
    font-size: clamp(1.1rem, 4vw, 1.5rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transform: rotate(-8deg);
    background: transparent;
    box-shadow: inset 0 0 0 1px #d22b2b;
}

.canteen-served__xp {
    margin: 0;
    color: rgba(244, 234, 213, 0.88);
    font-family: "JetBrains Mono", var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
}

.canteen-served__button {
    margin-top: 8px;
    min-width: 172px;
    min-height: 52px;
    border: 3px solid #0a0708;
    border-radius: 2px;
    background: #f4ead5;
    color: #0a0708;
    box-shadow: 4px 4px 0 #0a0708;
    font-family: "Bowlby One", "Archivo Black", var(--font-ui);
    font-size: 1.1rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.canteen-served__button:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 #0a0708;
}

.infirmary-block {
    max-width: 560px;
}

.infirmary-card {
    display: grid;
    gap: 18px;
    padding: 22px;
    background:
        linear-gradient(180deg, rgba(208, 169, 95, 0.08), transparent 34%),
        rgba(17, 22, 30, 0.92);
}

.infirmary-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.infirmary-hero__badge {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(208, 169, 95, 0.22), rgba(208, 169, 95, 0.08));
    border: 1px solid rgba(208, 169, 95, 0.28);
    color: #f4d89b;
    font-size: 2rem;
    font-weight: 700;
}

.infirmary-hero__copy {
    display: grid;
    gap: 6px;
}

.infirmary-hero__copy h2 {
    margin: 0;
}

.infirmary-hero__copy p {
    margin: 0;
    color: var(--text-soft);
}

.infirmary-card__meter {
    display: grid;
    gap: 10px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(8, 11, 16, 0.34);
}

.infirmary-card__meter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.infirmary-card__meter-head span {
    color: var(--text-soft);
}

.infirmary-card__meter-head strong {
    font-size: 1.02rem;
}

.infirmary-card__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.infirmary-card__line {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.04);
}

.infirmary-card__line span {
    color: var(--text-soft);
}

.infirmary-card__line strong {
    font-size: 1.1rem;
}

.infirmary-card__form {
    display: grid;
}

.infirmary-grid {
    width: 100%;
}

.infirmary-grid .dish-card {
    min-height: 100%;
}

.infirmary-grid .dish-card__sub {
    min-height: 32px;
}

.infirmary-view .page-header {
    margin-bottom: 22px;
}

.infirmary-view .page-header h1 {
    font-size: 1.28rem;
    line-height: 1.05;
}

/* ── Infirmary page ── */
.infirmary-intro p {
    font-family: "Special Elite", var(--font-ui);
    font-size: 0.76rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(10, 7, 8, 0.65);
}

/* Full-health state */
.inf-full {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 40px 24px;
    background: #f4ead5;
    border: 3px solid #0a0708;
    border-radius: 12px;
    box-shadow: 4px 4px 0 #0a0708;
    text-align: center;
}

.inf-full__cross {
    font-size: 2rem;
    color: #3e8b3a;
    line-height: 1;
}

.inf-full__label {
    font-family: "Bowlby One", var(--font-ui);
    font-size: 1.1rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #0a0708;
}

.inf-full__sub {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: rgba(10, 7, 8, 0.45);
    letter-spacing: 0.1em;
}

/* ── Infirmary realtime heal ── */
.inf-hold-wrap {
    display: grid;
    gap: 18px;
    padding: 22px;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.12)),
        linear-gradient(135deg, #f8efe1, #ead8c0 72%);
    border: 3px solid #0a0708;
    border-radius: 18px;
    box-shadow: 6px 6px 0 #0a0708;
    width: 100%;
}

.inf-vitals {
    display: grid;
    gap: 12px;
    padding: 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.45);
    border: 2px solid rgba(10, 7, 8, 0.12);
}

.inf-vitals__head,
.inf-vitals__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.inf-vitals__head span,
.inf-vitals__meta span {
    font-family: "Special Elite", var(--font-ui);
    font-size: 0.72rem;
    color: rgba(10, 7, 8, 0.6);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.inf-vitals__head strong {
    font-family: "Bowlby One", var(--font-ui);
    font-size: 1rem;
    color: #0a0708;
    letter-spacing: 0.04em;
}

.inf-hold-bar-wrap {
    width: 100%;
    height: 40px;
    background: linear-gradient(180deg, rgba(10, 7, 8, 0.08), rgba(10, 7, 8, 0.02));
    border: 2px solid rgba(10, 7, 8, 0.16);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 2px 5px rgba(10, 7, 8, 0.12);
}

.inf-hold-bar-fill {
    height: 100%;
    width: 0%;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.2), transparent 40%),
        linear-gradient(90deg, #c1262d, #dd6248 50%, #e59e46);
    border-radius: 10px;
    transition: width 0.22s ease;
}

.inf-hold-bar-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Bowlby One", var(--font-ui);
    font-size: 0.88rem;
    color: rgba(10, 7, 8, 0.72);
    letter-spacing: 0.08em;
    pointer-events: none;
}

.inf-hold-readout {
    display: grid;
    gap: 5px;
    justify-items: center;
    text-align: center;
}

.inf-hold-readout__cost {
    font-family: "Special Elite", var(--font-ui);
    font-size: 0.76rem;
    font-weight: 700;
    color: rgba(10, 7, 8, 0.56);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.inf-hold-readout__status {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    color: rgba(10, 7, 8, 0.7);
}

.inf-hold-btn {
    width: 100%;
    padding: 18px 20px;
    background:
        linear-gradient(180deg, #171214, #090708);
    color: #f4ead5;
    border: 3px solid #0a0708;
    border-radius: 14px;
    font-family: "Bowlby One", var(--font-ui);
    font-size: 1rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 5px 5px 0 #0a0708;
    transition: background 0.14s ease, transform 0.08s ease, box-shadow 0.08s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    touch-action: none;
    display: grid;
    gap: 4px;
    justify-items: center;
}

.inf-hold-btn small {
    font-family: "Special Elite", var(--font-ui);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: none;
    color: rgba(244, 234, 213, 0.84);
}

.inf-hold-btn.is-holding {
    background: linear-gradient(180deg, #214d28, #14351a);
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 #0a0708;
}

.inf-hold-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

@keyframes btnPop {
    from { transform: scale(0.8); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

/* ── Scratch Ticket Modals ── */
.scratch-modal .modal__overlay.st-overlay {
    background:
        radial-gradient(circle at top, rgba(255, 240, 209, 0.18), transparent 36%),
        rgba(8, 8, 11, 0.68);
    backdrop-filter: blur(2px);
}

.st-dialog {
    width: min(700px, calc(100vw - 24px));
    max-width: 700px;
    max-height: calc(100vh - 18px);
    overflow-x: visible;
    overflow-y: auto;
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

.st-dialog::before {
    display: none;
}

.st-dialog--gold {
    --st-main: #f1bc30;
    --st-dark: #8a5a00;
    --st-soft: #fff4cd;
    --st-accent: #f7d978;
    width: min(540px, calc(100vw - 24px));
    max-width: 540px;
}

.st-dialog--red {
    --st-main: #d13c37;
    --st-dark: #71120f;
    --st-soft: #ffe0dd;
    --st-accent: #f3a39b;
    width: min(620px, calc(100vw - 24px));
    max-width: 620px;
}

.st-dialog--violet {
    --st-main: #7b56c7;
    --st-dark: #301756;
    --st-soft: #ede1ff;
    --st-accent: #b99cf2;
    width: min(600px, calc(100vw - 24px));
    max-width: 600px;
}

.st-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 42px;
    height: 42px;
    border: 3px solid #0a0708;
    border-radius: 50%;
    background: #f4ead5;
    color: #0a0708;
    font-family: "Bowlby One", var(--font-ui);
    font-size: 1rem;
    box-shadow: 4px 4px 0 #0a0708;
    cursor: pointer;
    z-index: 3;
}

.st-ticket {
    position: relative;
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    height: auto;
    min-height: 0;
    border-radius: 14px;
    overflow: hidden;
    background:
        linear-gradient(180deg, var(--st-accent), var(--st-main) 44%, var(--st-dark));
    border: 1.5px solid rgba(10, 7, 8, 0.34);
    box-shadow: 0 18px 36px rgba(10, 7, 8, 0.2);
}

.st-ticket--cash {
    min-height: 216px;
}

.st-ticket--sept {
    min-height: 236px;
}

.st-ticket--banco {
    min-height: 368px;
}

.st-ticket::before,
.st-ticket::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    transform: translateY(-50%);
    z-index: 3;
}

.st-ticket::before {
    left: -7px;
}

.st-ticket::after {
    right: -7px;
}

.st-ticket__stub {
    position: relative;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 6px;
    padding: 12px 6px;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.28));
    color: var(--st-soft);
    border-right: 3px dashed rgba(255, 255, 255, 0.46);
    text-align: center;
}

.st-ticket--slim-stub .st-body {
    justify-content: flex-start;
    padding: 0 16px 16px;
}

.st-ticket--slim-stub .st-grid--sept {
    max-width: 100%;
    align-self: center;
}

.st-ticket__stub span {
    font-family: "Special Elite", var(--font-ui);
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.st-ticket__stub-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 36px;
    font-family: "JetBrains Mono", var(--font-mono);
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.12em;
    text-align: center;
    text-transform: uppercase;
    word-break: break-word;
}

.st-ticket__main {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    min-width: 0;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03));
}

.st-ticket__hero {
    padding: 12px 16px 8px;
    display: grid;
    gap: 4px;
}

.st-ticket__eyebrow {
    margin: 0;
    font-family: "Special Elite", var(--font-ui);
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(10, 7, 8, 0.68);
}

.st-title {
    font-family: "JetBrains Mono", var(--font-mono);
    font-size: clamp(0.98rem, 2.2vw, 1.12rem);
    font-weight: 800;
    letter-spacing: 0.16em;
    color: rgba(10, 7, 8, 0.78);
    margin: 0;
    line-height: 1;
    text-transform: uppercase;
    text-align: center;
}

.st-subtitle {
    margin: 0;
    font-family: "Special Elite", monospace;
    font-size: 0.72rem;
    color: rgba(10, 7, 8, 0.62);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.st-body {
    padding: 0 14px 14px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
    overflow: visible;
    min-height: 0;
}

.st-hint {
    font-family: "Special Elite", monospace;
    font-size: 0.72rem;
    color: rgba(10, 7, 8, 0.64);
    letter-spacing: 0.06em;
    min-height: 18px;
}

.st-section-label {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(10, 7, 8, 0.42);
    align-self: flex-start;
}

.st-grid {
    display: grid;
    gap: 8px;
    width: 100%;
}

.st-grid--triple {
    grid-template-columns: repeat(3, 1fr);
    max-width: 260px;
    align-self: center;
}

.st-grid--sept {
    grid-template-columns: repeat(5, 1fr);
    max-width: 100%;
    align-self: center;
}

.st-grid--symbole {
    grid-template-columns: repeat(3, 1fr);
    max-width: 100%;
}

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

.st-dialog--violet .st-body {
    gap: 6px;
}

.st-dialog--violet .st-cell {
    min-height: 48px;
}

.st-dialog--violet .st-cell--player {
    min-height: 62px;
}

.st-dialog--violet .st-zone__amt {
    font-size: 0.58rem;
}

.st-cell {
    position: relative;
    min-height: 56px;
    border-radius: 8px;
    border: 1px solid rgba(10, 7, 8, 0.18);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 241, 241, 0.94));
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    -webkit-tap-highlight-color: transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.st-cell--player {
    min-height: 54px;
}

.st-cell__symbol {
    font-size: clamp(1.05rem, 2.8vw, 1.5rem);
    line-height: 1;
    user-select: none;
    pointer-events: none;
    font-family: "JetBrains Mono", var(--font-mono);
    font-weight: 700;
}

.st-cell--prize.is-match {
    border-color: #2f8f4b;
    box-shadow: inset 0 0 0 2px rgba(47, 143, 75, 0.28), 0 0 0 4px rgba(47, 143, 75, 0.12);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 241, 241, 0.94));
}

.st-dialog--gold .st-ticket {
    background: linear-gradient(180deg, #f7e840 0%, #d4aa0a 100%);
}

.st-dialog--gold .st-ticket__stub {
    background: rgba(160, 120, 0, 0.22);
}

.st-dialog--gold .st-cell {
    border-color: rgba(122, 88, 0, 0.2);
}

.st-dialog--gold .st-title,
.st-dialog--gold .st-zone__amt {
    color: #5a3e00;
}

.st-dialog--red .st-ticket {
    background: linear-gradient(180deg, #e83030 0%, #a01010 100%);
}

.st-dialog--red .st-ticket__stub {
    background: rgba(0, 0, 0, 0.15);
}

.st-dialog--red .st-cell {
    border-color: rgba(128, 8, 8, 0.24);
}

.st-dialog--red .st-title,
.st-dialog--red .st-zone__amt,
.st-dialog--red .st-cell__symbol {
    color: rgba(255, 220, 220, 0.88);
}

.st-dialog--violet .st-ticket {
    background: linear-gradient(180deg, #9060e0 0%, #5020a0 100%);
}

.st-dialog--violet .st-ticket__stub {
    background: rgba(0, 0, 0, 0.15);
}

.st-dialog--violet .st-title,
.st-dialog--violet .st-section-label,
.st-dialog--violet .st-zone__amt {
    color: rgba(220, 200, 255, 0.9);
}

.st-dialog--violet .st-cell {
    border-color: rgba(58, 8, 128, 0.22);
}

.st-ticket--banco .st-body {
    justify-content: flex-start;
    padding: 0 14px 12px;
    gap: 6px;
}

.st-ticket--banco .st-title {
    font-size: clamp(1.18rem, 2.7vw, 1.42rem);
    letter-spacing: 0.18em;
}

.st-ticket--banco .st-player-grid {
    gap: 6px;
}

.st-ticket--banco .st-cell--player {
    min-height: 58px;
}

.st-ticket--banco .st-grid--symbole {
    gap: 6px;
}

.st-ticket--banco .st-section-label {
    align-self: center;
    width: 100%;
    text-align: center;
}

.st-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
}

.st-zone__amt {
    display: block;
    width: 100%;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 700;
    color: rgba(10, 7, 8, 0.78);
    letter-spacing: 0.02em;
    text-align: center;
}

.st-zone .st-cell {
    width: 100%;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 1 / 1;
}

.st-ticket--banco .st-zone .st-cell {
    max-width: 44px;
    justify-self: center;
}

.st-ticket--banco .st-cell__symbol {
    font-size: clamp(1.34rem, 3vw, 1.8rem);
}

.st-scratch-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    cursor: crosshair;
    touch-action: none;
}

.st-outcome {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(10, 7, 8, 0.18);
    backdrop-filter: blur(2px);
    border-radius: inherit;
    z-index: 4;
    pointer-events: auto;
}

.st-outcome__card {
    width: min(260px, 100%);
    display: grid;
    gap: 10px;
    justify-items: center;
    padding: 14px 12px;
    border: 1.5px solid rgba(10, 7, 8, 0.34);
    border-radius: 10px;
    margin: auto;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 234, 213, 0.94));
    box-shadow: 0 12px 24px rgba(10, 7, 8, 0.22);
}

.st-result {
    text-align: center;
    width: 100%;
    min-height: 0;
    padding: 0;
    background: transparent;
}

.st-result__prize {
    font-family: "JetBrains Mono", var(--font-mono);
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.25;
    animation: btnPop .35s cubic-bezier(.34, 1.56, .64, 1) forwards;
}

.st-claim-btn {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid rgba(10, 7, 8, 0.7);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(18, 18, 20, 0.96), rgba(9, 7, 8, 0.96));
    color: #f4ead5;
    box-shadow: 0 6px 14px rgba(10, 7, 8, 0.24);
    font-family: "JetBrains Mono", var(--font-mono);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.st-claim-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 #0a0708;
}

@media (max-width: 720px) {
    .inf-hold-wrap {
        padding: 18px;
    }

    .inf-vitals__head,
    .inf-vitals__meta {
        flex-direction: column;
        align-items: flex-start;
    }

    .st-dialog {
        width: calc(100vw - 16px);
    }

    .st-ticket {
        grid-template-columns: 1fr;
        height: auto;
    }

    .st-ticket--slim-stub::before,
    .st-ticket--slim-stub::after,
    .st-ticket::before,
    .st-ticket::after {
        left: auto;
    }

    .st-ticket::before {
        left: -7px;
    }

    .st-ticket::after {
        right: -7px;
    }

    .st-ticket__stub {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: center;
        justify-items: start;
        border-right: none;
        border-bottom: 2px dashed rgba(255, 255, 255, 0.46);
        text-align: left;
        padding: 12px 14px;
    }

    .st-ticket__main {
        min-width: 0;
    }

    .st-ticket__stub-label {
        min-height: 0;
        font-size: 0.58rem;
    }

    .st-ticket__hero {
        padding: 10px 14px 8px;
    }

    .st-body {
        padding: 0 12px 12px;
    }

    .st-grid--sept {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .st-cell {
        min-height: 64px;
    }

    .st-cell--player {
        min-height: 72px;
    }

    .st-dialog--violet .st-cell {
        min-height: 42px;
    }

    .st-dialog--violet .st-cell--player {
        min-height: 54px;
    }
}


/* ── Market page ── */
.market-item__effect {
    display: block;
    margin: 3px 0 0;
    font-size: 0.73rem;
    line-height: 1.3;
    color: rgba(10, 7, 8, 0.68);
}

.market-page .canteen-menu-item__reward {
    text-align: center;
    line-height: 1.15;
}

.market-page .canteen-menu,
.cell-inventory-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.market-page .canteen-menu-item,
.cell-inventory-menu .canteen-menu-item {
    aspect-ratio: 1 / 1;
    transform: none;
}

.market-page .canteen-menu-item:hover,
.market-page .canteen-menu-item:focus-within,
.cell-inventory-menu .canteen-menu-item:hover,
.cell-inventory-menu .canteen-menu-item:focus-within {
    transform: translate(2px, 2px);
}

.market-page .canteen-menu-item__link,
.cell-inventory-menu .canteen-menu-item__link {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    justify-items: center;
    align-content: start;
    height: 100%;
    min-height: 100%;
    padding: 12px;
    gap: 8px;
    text-align: center;
}

.market-page .canteen-menu-item__icon,
.cell-inventory-menu .canteen-menu-item__icon {
    width: 76px;
    height: 76px;
}

.market-page .canteen-menu-item__body,
.cell-inventory-menu .canteen-menu-item__body {
    display: grid;
    gap: 4px;
    align-content: start;
    width: 100%;
    text-align: center;
}

.market-page .canteen-menu-item__name,
.cell-inventory-menu .canteen-menu-item__name {
    font-size: clamp(1.02rem, 3vw, 1.34rem);
    line-height: 0.95;
}

.market-page .market-item__effect,
.cell-inventory-menu .market-item__effect {
    margin: 0;
    min-height: 2.5em;
    font-size: 0.66rem;
    line-height: 1.24;
}

.market-page .canteen-menu-item__meta,
.cell-inventory-menu .canteen-menu-item__meta {
    justify-content: center;
    margin-top: 2px;
}

.market-page .canteen-menu-item__reward,
.cell-inventory-menu .canteen-menu-item__reward {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: stretch;
    min-height: 42px;
    padding: 8px 10px;
    border: 2px solid #0a0708;
    border-radius: 8px;
    background: rgba(10, 7, 8, 0.88);
    color: #f4ead5;
    font-size: 0.82rem;
    line-height: 1.1;
}

.market-page .canteen-menu-item__lock,
.cell-inventory-menu .canteen-menu-item__lock {
    top: 8px;
    right: 8px;
}

@media (max-width: 720px) {
    .market-page .canteen-menu,
    .cell-inventory-menu {
        gap: 10px;
    }

    .market-page .canteen-menu-item__link,
    .cell-inventory-menu .canteen-menu-item__link {
        padding: 10px;
        gap: 6px;
    }

    .market-page .canteen-menu-item__icon,
    .cell-inventory-menu .canteen-menu-item__icon {
        width: 62px;
        height: 62px;
    }

    .market-page .canteen-menu-item__name,
    .cell-inventory-menu .canteen-menu-item__name {
        font-size: clamp(0.92rem, 3.9vw, 1.14rem);
    }

    .market-page .market-item__effect,
    .cell-inventory-menu .market-item__effect {
        font-size: 0.6rem;
        min-height: 2.35em;
    }

    .market-page .canteen-menu-item__reward,
    .cell-inventory-menu .canteen-menu-item__reward {
        min-height: 38px;
        padding: 7px 8px;
        font-size: 0.74rem;
    }
}

.progress--training {
    height: 18px;
    border: 2px solid var(--comic-ink);
    border-radius: 999px;
    background: #171110;
}

.progress__fill--training {
    background: linear-gradient(90deg, var(--comic-red), var(--comic-yellow));
}

.progress--training-card {
    background: #171110;
    border-color: var(--comic-ink);
}

.progress__label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: #0f1319;
    z-index: 2;
    pointer-events: none;
}

.progress__label--training {
    color: #fff7e3;
    font-family: "Bowlby One", "Archivo Black", var(--font-ui);
    letter-spacing: 0.03em;
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.95);
    paint-order: stroke fill;
    text-shadow: none;
}

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

.training-card {
    --training-tilt: 0deg;
    position: relative;
    display: grid;
    gap: 8px;
    min-height: 236px;
    padding: 11px;
    border: 4px solid var(--comic-ink);
    border-radius: 10px;
    background: linear-gradient(180deg, #f4ead5, #d9c8a8);
    box-shadow: 5px 5px 0 var(--comic-ink);
    color: var(--comic-ink);
    overflow: hidden;
    transform: rotate(var(--training-tilt));
    transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.training-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 2px 2px, rgba(10, 7, 8, 0.16) 0 1px, transparent 1px);
    background-size: 6px 6px;
    opacity: 0.24;
    mix-blend-mode: multiply;
    pointer-events: none;
}

.training-card:hover,
.training-card:focus-within {
    transform: rotate(var(--training-tilt)) translate(3px, 3px);
    box-shadow: 2px 2px 0 var(--comic-ink);
    filter: saturate(1.04);
}

.training-card:nth-child(5n + 1) {
    background: linear-gradient(180deg, #d22b2b, #a51f1f);
    --training-tilt: -1.6deg;
}

.training-card:nth-child(5n + 2) {
    background: linear-gradient(180deg, #3a8fc4, #2f6f9a);
    --training-tilt: 1.4deg;
}

.training-card:nth-child(5n + 3) {
    background: linear-gradient(180deg, #e8b923, #ba9018);
    --training-tilt: -1.1deg;
}

.training-card:nth-child(5n + 4) {
    background: linear-gradient(180deg, #c9821e, #9a6418);
    --training-tilt: 1.2deg;
}

.training-card:nth-child(5n) {
    background: linear-gradient(180deg, #7a4cb8, #5d398f);
    color: #f7efdb;
    --training-tilt: -1.2deg;
}

.training-card:nth-child(5n) .training-card__meta,
.training-card:nth-child(5n) .training-card__sub,
.training-card:nth-child(5n) .training-card__stat-head span,
.training-card:nth-child(5n) .training-card__stat-foot span {
    color: rgba(247, 239, 219, 0.92);
}

.training-card:nth-child(5n + 1) .training-card__stat-head span,
.training-card:nth-child(5n + 1) .training-card__stat-foot span,
.training-card:nth-child(5n + 1) .training-card__stat-head strong,
.training-card:nth-child(5n + 2) .training-card__stat-head span,
.training-card:nth-child(5n + 2) .training-card__stat-foot span,
.training-card:nth-child(5n + 2) .training-card__stat-head strong,
.training-card:nth-child(5n) .training-card__stat-head strong,
.training-card:nth-child(5n + 3) .training-card__stat-head span,
.training-card:nth-child(5n + 3) .training-card__stat-foot span,
.training-card:nth-child(5n + 3) .training-card__stat-head strong,
.training-card:nth-child(5n + 4) .training-card__stat-head span,
.training-card:nth-child(5n + 4) .training-card__stat-foot span,
.training-card:nth-child(5n + 4) .training-card__stat-head strong {
    color: rgba(247, 239, 219, 0.95);
}

.training-card__visual {
    display: grid;
    place-items: center;
    min-height: 64px;
    margin-top: 2px;
    margin-bottom: 2px;
}

.training-card__image {
    display: block;
    width: 64px;
    height: 64px;
    object-fit: contain;
    filter: drop-shadow(2px 2px 0 rgba(10, 7, 8, 0.48));
}

.training-card__image--active {
    width: 76px;
    height: 76px;
}

.training-card__title {
    margin: 0;
    text-align: center;
    font-size: 1.12rem;
    line-height: 0.94;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-family: "Bowlby One", "Archivo Black", var(--font-ui);
}

.training-card__meta,
.training-card__sub {
    margin: 0;
    text-align: center;
    color: #0a0708;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    font-family: "Special Elite", var(--font-ui);
    text-transform: uppercase;
}

.training-card__bonus {
    margin-left: 6px;
    color: rgba(10, 7, 8, 0.72);
    font-size: 0.64rem;
}

.training-card__fatigue-cost {
    display: block;
    margin-top: 2px;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.58rem;
    color: rgba(200, 40, 40, 0.8);
    letter-spacing: 0.03em;
}

.training-card__gain {
    margin: 0;
    text-align: left;
    color: #fff7e4;
    background: #0a0708;
    border: 3px solid #f4ead5;
    border-radius: 7px;
    padding: 4px 7px 3px;
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    font-family: "Archivo Black", "Bowlby One", var(--font-ui);
    text-transform: uppercase;
    width: fit-content;
}

.training-card__stat {
    display: grid;
    gap: 6px;
    margin-top: 2px;
    padding: 8px;
    border-radius: 10px;
    border: 3px solid var(--comic-ink);
    background: rgba(10, 7, 8, 0.5);
}

.training-card__stat-head,
.training-card__stat-foot {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}

.training-card__stat-head span,
.training-card__stat-foot span {
    color: rgba(10, 7, 8, 0.9);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    font-family: var(--font-mono);
    text-transform: uppercase;
}

.training-card__stat-foot small {
    color: rgba(10, 7, 8, 0.8);
    font-size: 0.66rem;
}

.training-card__stat-head strong {
    font-size: 0.9rem;
    font-family: "Archivo Black", "Bowlby One", var(--font-ui);
}

.training-card__stat-foot {
    justify-content: center;
}

.training-card__active {
    display: grid;
    gap: 8px;
}

.training-card__active-time {
    margin: 0;
    text-align: left;
    color: rgba(10, 7, 8, 0.85);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    font-family: "Special Elite", var(--font-ui);
    text-transform: uppercase;
}

.training-card--locked {
    opacity: 0.68;
    filter: grayscale(0.35);
}

.training-card--active {
    border-color: var(--comic-paper);
    box-shadow: 6px 6px 0 var(--comic-ink), 0 0 0 2px rgba(244, 234, 213, 0.6) inset;
}

.training-card__form {
    margin-top: auto;
}

.gym-congrats-card {
    position: relative;
    width: min(272px, calc(100% - 24px));
    border: 3px solid #0a0708;
    box-shadow: 5px 5px 0 #0a0708;
    border-radius: 10px;
    background: #f4ead5;
    color: #0a0708;
    overflow: hidden;
    text-align: center;
    padding: 26px 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.gym-congrats-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 2px 2px, rgba(10, 7, 8, 0.07) 0 0.9px, transparent 0.9px);
    background-size: 6px 6px;
    pointer-events: none;
}

.gym-congrats-card__close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: transparent;
    border: 0;
    font-size: 1.2rem;
    line-height: 1;
    color: rgba(10, 7, 8, 0.5);
    cursor: pointer;
}

.gym-congrats-card__eyebrow {
    font-family: "JetBrains Mono", var(--font-mono);
    font-size: 0.48rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(10, 7, 8, 0.52);
    margin: 0;
}

.gym-congrats-card__title {
    font-family: "Bowlby One", "Anton", "Archivo Black", var(--font-ui);
    font-size: clamp(0.92rem, 4vw, 1.15rem);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #0a0708;
    margin: 2px 0 8px;
}

.gym-congrats-card__percent {
    font-family: "Bowlby One", "Anton", var(--font-ui);
    font-size: clamp(2.2rem, 9vw, 2.8rem);
    color: #3aa05c;
    margin: 0;
    line-height: 1;
    text-shadow: 2px 2px 0 rgba(10, 7, 8, 0.14);
}

.gym-congrats-card__label {
    font-family: "JetBrains Mono", var(--font-mono);
    font-size: 0.52rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(10, 7, 8, 0.58);
    margin: 0 0 10px;
}

.gym-congrats-card__button {
    min-height: 30px;
    padding: 0 18px;
    border: 3px solid #0a0708;
    box-shadow: 3px 3px 0 #0a0708;
    border-radius: 4px;
    background: #0a0708;
    color: #f4ead5;
    font-family: "Bowlby One", "Anton", var(--font-ui);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}

.gym-congrats-card__button:hover {
    transform: translate(-1px, -1px);
}

.activity-panel--training {
    justify-items: center;
    text-align: center;
}

.gym-view .training-card .button {
    border: 3px solid var(--comic-ink);
    border-radius: 10px;
    min-height: 42px;
    background: linear-gradient(180deg, #f4ead5, #d9c8a8);
    color: var(--comic-ink);
    box-shadow: 3px 3px 0 var(--comic-ink);
    font-family: "Archivo Black", "Bowlby One", var(--font-ui);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.gym-view .training-card .button--primary {
    background: linear-gradient(180deg, #f2c529, #d7a914);
}

.gym-view .page-back-link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 14px;
    border: 3px solid var(--comic-ink);
    border-radius: 10px;
    background: linear-gradient(180deg, #f4ead5, #d8c6a6);
    color: var(--comic-ink);
    box-shadow: 3px 3px 0 var(--comic-ink);
    font-family: "Archivo Black", "Bowlby One", var(--font-ui);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.gym-view .site-shell {
    width: min(520px, calc(100% - 14px));
}

/* modal__dialog--profile: structural only — visual from base modal__dialog */

.profile-modal-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
}

.profile-modal-scroll[data-profile-tabs-host] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-items: stretch;
    overflow: hidden;
}

.profile-tabs {
    display: flex;
    align-items: stretch;
    gap: 5px;
    padding: 4px;
    border: 3px solid var(--comic-ink);
    border-radius: 14px;
    background: rgba(10, 7, 8, 0.08);
    box-shadow: 2px 2px 0 var(--comic-ink);
}

.profile-tabs__button {
    flex: 1;
    min-height: 28px;
    padding: 0 8px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: rgba(10, 7, 8, 0.7);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}

.profile-tabs__button.is-active {
    background: linear-gradient(180deg, #f2c529, #d7a914);
    color: var(--comic-ink);
    box-shadow: 2px 2px 0 rgba(10, 7, 8, 0.28);
}

.profile-tabs__panel {
    display: grid;
    gap: 16px;
    min-height: 0;
}

.profile-modal-scroll[data-profile-tabs-host] .profile-tabs__panel {
    align-content: start;
    overflow-y: auto;
    padding-right: 4px;
}

.profile-tabs__panel[hidden] {
    display: none !important;
}

@keyframes profilePanelSlideIn {
    from { opacity: 0; transform: translateX(var(--slide-dir, 24px)); }
    to   { opacity: 1; transform: translateX(0); }
}

.profile-tabs__panel.is-sliding-in {
    animation: profilePanelSlideIn 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.dc-separator {
    height: 2px;
    background: rgba(10, 7, 8, 0.12);
    border: none;
    margin: 2px 0;
}

.modal__dialog--profile .badge {
    border: 2px solid var(--comic-ink);
    border-radius: 999px;
    background: #f4ead5;
    color: var(--comic-ink);
    padding: 6px 10px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
}

.modal__dialog--profile .modal__footer .button,
.modal__dialog--profile .dossier-criminel__close-row .button,
.modal__dialog--gang-profile .modal__footer .button,
.modal__dialog--gang-profile .dossier-criminel__close-row .button {
    border: 3px solid var(--comic-ink);
    border-radius: 10px;
    min-height: 42px;
    background: linear-gradient(180deg, #f7eedb, #d8c6a6);
    color: var(--comic-ink);
    box-shadow: 3px 3px 0 var(--comic-ink);
    font-family: "Impact", "Arial Black", var(--font-ui);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.modal__dialog--profile .modal__footer .button--primary,
.modal__dialog--profile .dossier-criminel__close-row .button--primary,
.modal__dialog--gang-profile .modal__footer .button--primary,
.modal__dialog--gang-profile .dossier-criminel__close-row .button--primary {
    background: linear-gradient(180deg, #f2c529, #d7a914);
}

.modal__dialog--profile .modal__footer .button--ghost,
.modal__dialog--profile .dossier-criminel__close-row .button--ghost,
.modal__dialog--gang-profile .modal__footer .button--ghost,
.modal__dialog--gang-profile .dossier-criminel__close-row .button--ghost {
    background: linear-gradient(180deg, #dcc7a0, #c3ae87);
}

/* modal__dialog--list is now an alias for --wide */
.modal__dialog--list {
    width: min(640px, calc(100vw - 20px));
}

.dossier {
    display: grid;
    gap: 18px;
}

.dossier__header {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 12px;
    border-radius: 12px;
    border: 3px solid var(--comic-ink);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.05));
    box-shadow: 3px 3px 0 var(--comic-ink);
}

.dossier__avatar-stack {
    display: grid;
    justify-items: center;
    gap: 10px;
}

.dossier__avatar {
    width: 132px;
    height: 132px;
    border-radius: 16px;
    object-fit: cover;
    border: 3px solid var(--comic-ink);
    background: rgba(255, 255, 255, 0.24);
    box-shadow: 3px 3px 0 var(--comic-ink);
}

.dossier__identity h2 {
    margin: 8px 0 0;
    font-size: 2rem;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-family: "Impact", "Arial Black", var(--font-ui);
}

.dossier__meta {
    margin-top: 14px;
}

.dossier-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.dossier-status--under-avatar {
    justify-content: center;
    width: 100%;
    text-align: center;
}

.dossier-status__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cf5e5e;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04);
}

.dossier-status--online .dossier-status__dot {
    background: #63b579;
}

.dossier-status--offline .dossier-status__dot {
    background: #cf5e5e;
}

.dossier__panel {
    padding: 18px;
    border: 3px solid var(--comic-ink);
    border-radius: 12px;
    background:
        radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.22), transparent 62%),
        rgba(255, 255, 255, 0.12);
    box-shadow: 3px 3px 0 var(--comic-ink);
}

.dossier__topline {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: start;
    margin-bottom: 18px;
}

.dossier__topline h3 {
    margin: 0 0 6px;
}

.dossier__subtitle {
    margin: 0;
}

.dossier__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.dossier__stat {
    display: grid;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 3px solid var(--comic-ink);
    background: linear-gradient(180deg, #f4ead5, #dfcfb1);
    box-shadow: 2px 2px 0 var(--comic-ink);
}

.dossier__stat span {
    color: rgba(10, 7, 8, 0.78);
    font-size: 0.7rem;
    font-family: var(--font-mono);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.dossier__stat strong {
    font-size: 1.12rem;
    font-family: "Impact", "Arial Black", var(--font-ui);
    letter-spacing: 0.02em;
}

.dossier__stat--value-only {
    align-content: center;
}

/* ─── DOSSIER CRIMINEL (nouvelle modale profil) ─── */
.dossier-criminel {
    display: grid;
    gap: 16px;
}

.dossier-criminel__card {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 16px;
    padding: 0;
    background: transparent;
}

.dossier-criminel__photo-col {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dossier-criminel__photo-frame {
    position: relative;
    width: 100%;
}

.dossier-criminel__photo {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 10px;
    object-fit: cover;
    border: 3px solid var(--comic-ink);
    box-shadow: 3px 3px 0 var(--comic-ink);
    background: rgba(10, 7, 8, 0.12);
    display: block;
}

.dossier-criminel__mugshot {
    display: none;
}

.dossier-criminel__level-corner {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 7, 8, 0.85);
    color: #f4ead5;
    font-family: "Bowlby One", var(--font-ui);
    font-size: 0.72rem;
    min-width: 26px;
    height: 22px;
    border-radius: 4px;
    border: 1.5px solid rgba(244, 234, 213, 0.35);
    padding: 0 6px;
    margin-top: 5px;
    white-space: nowrap;
}

.dossier-criminel__status {
    font-size: 0.62rem;
    justify-content: center;
}

.dossier-criminel__photo-frame .dossier-criminel__status {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(10, 7, 8, 0.72);
    border: 1px solid rgba(244, 234, 213, 0.18);
    border-radius: 99px;
    padding: 2px 7px;
    color: #f4ead5;
    font-size: 0.5rem;
    gap: 4px;
}

.dossier-criminel__photo-frame .dossier-status--online .dossier-status__dot {
    background: #3aa05c;
}

.dossier-criminel__level-label {
    font-family: "JetBrains Mono", var(--font-mono);
    font-size: 0.48rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(10, 7, 8, 0.72);
    margin: 0 0 -4px;
}

.dossier-criminel__fields {
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
    list-style: none;
}

.dossier-criminel__field {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 6px;
    align-items: baseline;
    padding: 5px 0;
    border-bottom: 1px solid rgba(10, 7, 8, 0.12);
}

.dossier-criminel__field:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.dossier-criminel__field dt {
    font-family: var(--font-mono);
    font-size: 0.54rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(10, 7, 8, 0.52);
    margin: 0;
}

.dossier-criminel__field dd {
    font-family: "Impact", "Arial Black", var(--font-ui);
    font-size: 0.84rem;
    letter-spacing: 0.02em;
    color: var(--comic-ink);
    margin: 0;
    word-break: break-word;
}

.dossier-criminel__level-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: rgba(10, 7, 8, 0.42);
    border: 2px solid rgba(10, 7, 8, 0.55);
    border-radius: 7px;
    flex-shrink: 0;
}

.dossier-criminel__level-badge__num {
    font-family: "Impact", "Arial Black", var(--font-ui);
    font-size: 2rem;
    color: #ffffff;
    line-height: 1;
    letter-spacing: -0.02em;
}

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

.dossier-criminel__stat {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px 10px 18px;
    background: #fff;
    border: 2px solid rgba(10, 7, 8, 0.15);
    border-radius: 8px;
    overflow: hidden;
}

.dossier-criminel__stat::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: var(--dc-strip-color, #9e9e9e);
}

.dossier-criminel__stat span {
    color: rgba(10, 7, 8, 0.52);
    font-family: var(--font-mono);
    font-size: 0.52rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.dossier-criminel__stat strong {
    font-family: "Impact", "Arial Black", var(--font-ui);
    font-size: 1.22rem;
    letter-spacing: 0.02em;
    color: var(--comic-ink);
    line-height: 1.1;
}

.dossier-criminel__stat small {
    font-family: var(--font-mono);
    font-size: 0.46rem;
    color: rgba(10, 7, 8, 0.40);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.dossier-criminel__stats--with-gold {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dossier-criminel__stat--level  { --dc-strip-color: #d22b2b; }
.dossier-criminel__stat--rep    { --dc-strip-color: #3a8fc4; }
.dossier-criminel__stat--fights { --dc-strip-color: #8b4513; }
.dossier-criminel__stat--gold   { --dc-strip-color: #e8b923; }

.dossier-criminel__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.dossier-criminel__close-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.profile-challenges {
    display: grid;
    gap: 12px;
}

.profile-challenge-card {
    position: relative;
    display: grid;
    gap: 6px;
    padding: 18px 14px 14px;
    border: 3px solid var(--comic-ink);
    border-radius: 12px;
    box-shadow: 3px 3px 0 var(--comic-ink);
}

.profile-challenge-card--locked {
    background: linear-gradient(180deg, #d6d1c5, #b6b0a4);
    color: rgba(10, 7, 8, 0.92);
    filter: grayscale(0.1);
}

.profile-challenge-card--completed {
    background: linear-gradient(180deg, #f3d163, #d8ac33);
    color: var(--comic-ink);
}

.profile-challenge-card__reward {
    position: absolute;
    top: 12px;
    right: 12px;
    max-width: none;
    padding: 4px 10px;
    border: 2px solid rgba(10, 7, 8, 0.72);
    border-radius: 999px;
    background: rgba(244, 234, 213, 0.84);
    font-family: var(--font-mono);
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
}

.profile-challenge-card__reward--swatch {
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 5px;
    top: 10px;
    right: 10px;
    background-clip: padding-box;
}

.profile-challenge-card__reward--icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    top: 8px;
    right: 8px;
    overflow: visible;
}

.profile-challenge-card__reward--icon svg {
    width: 100%;
    height: 100%;
    transform: scale(1.6);
}

.profile-challenge-card__reward--skin {
    width: 38px;
    height: 38px;
    padding: 0;
    top: 8px;
    right: 8px;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid var(--comic-ink);
    background: none;
}

.profile-challenge-card__skin-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.profile-challenge-card__title {
    margin: 0;
    padding-right: 150px;
    font-family: "Impact", "Arial Black", var(--font-ui);
    font-size: 1.02rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.profile-challenge-card__description {
    margin: 0;
    padding-right: 52px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    line-height: 1.45;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.dc-action-card {
    flex: 1;
    min-width: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border: 2px solid var(--comic-ink);
    border-radius: 8px;
    background: linear-gradient(180deg, #f7eedf, #e0d0aa);
    box-shadow: 2px 2px 0 var(--comic-ink);
    cursor: pointer;
    text-decoration: none;
    color: var(--comic-ink);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.dc-action-card:hover,
.dc-action-card:focus-visible {
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 var(--comic-ink);
}

.dc-action-card--danger {
    box-shadow: 2px 2px 0 #b81c1c;
    border-color: var(--comic-ink);
}

.dc-action-card--danger:hover,
.dc-action-card--danger:focus-visible {
    box-shadow: 3px 3px 0 #b81c1c;
}

@media (max-width: 520px) {
    .dossier-criminel__card {
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 12px;
    }

    .dossier-criminel__level-badge {
        width: 50px;
        height: 50px;
    }

    .dossier-criminel__level-badge__num {
        font-size: 1.6rem;
    }

    .dossier-criminel__stats--with-gold {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dossier-criminel__stat strong {
        font-size: 1rem;
    }

    .profile-modal-scroll {
        padding: 14px 16px;
    }

    .profile-tabs {
        gap: 4px;
    }

    .profile-tabs__button {
        min-height: 26px;
        padding: 0 8px;
        font-size: 0.58rem;
    }

    .profile-challenge-card__reward {
        top: 10px;
        right: 10px;
        padding: 4px 8px;
        font-size: 0.48rem;
    }

    .profile-challenge-card__title {
        padding-right: 120px;
    }

    .profile-challenge-card__description {
        padding-right: 50px;
        font-size: 0.66rem;
    }
}

@media (max-width: 380px) {
    .dossier-criminel__card {
        grid-template-columns: 1fr;
    }

    .dossier-criminel__photo-frame {
        width: 80px;
        margin: 0 auto;
    }

    .dossier-criminel__photo-col {
        flex-direction: row;
        align-items: flex-start;
        gap: 12px;
    }
}

/* ─── EDIT PROFILE MODAL ─── */
.edit-profile-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border: 2px solid rgba(10, 7, 8, 0.14);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.55);
}

.edit-profile-section--danger {
    border-color: rgba(210, 43, 43, 0.3);
    background: rgba(255, 240, 240, 0.5);
}

.edit-profile-section__title {
    margin: 0 0 4px;
    font-family: "Impact", "Arial Black", var(--font-ui);
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--comic-ink);
}

.edit-profile-section--danger .edit-profile-section__title {
    color: #b81c1c;
}

.edit-profile-section__hint {
    margin: -6px 0 4px;
    font-family: var(--font-mono);
    font-size: 0.52rem;
    color: rgba(10, 7, 8, 0.48);
    letter-spacing: 0.04em;
}

.edit-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.edit-form__group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.edit-form__label {
    font-family: var(--font-mono);
    font-size: 0.54rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(10, 7, 8, 0.58);
}

.edit-form__input,
.edit-form__select {
    width: 100%;
    padding: 9px 12px;
    font-family: var(--font-ui);
    font-size: 0.88rem;
    color: var(--comic-ink);
    background: #fff;
    border: 2px solid rgba(10, 7, 8, 0.22);
    border-radius: 8px;
    outline: none;
    transition: border-color 0.15s ease;
}

.edit-form__input:focus,
.edit-form__select:focus {
    border-color: rgba(10, 7, 8, 0.6);
}

.edit-form__error {
    font-family: var(--font-mono);
    font-size: 0.52rem;
    color: #b81c1c;
    letter-spacing: 0.04em;
    padding: 6px 10px;
    background: rgba(210, 43, 43, 0.1);
    border-radius: 6px;
    border: 1px solid rgba(210, 43, 43, 0.25);
}

.edit-form__row {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.edit-form__row .edit-form__group {
    flex: 1;
}

.edit-form .button {
    border: 3px solid var(--comic-ink);
    border-radius: 8px;
    min-height: 38px;
    background: linear-gradient(180deg, #f7eedb, #d8c6a6);
    color: var(--comic-ink);
    font-family: "Impact", "Arial Black", var(--font-ui);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 0 16px;
    transition: transform 0.1s ease;
}

.edit-form .button:hover {
    transform: translate(-1px, -1px);
}

.edit-form .button--danger {
    background: linear-gradient(180deg, #e83a3a, #bf2020);
    color: #fff;
    border-color: #7a1515;
}

.yard-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 128px;
    gap: 22px;
    align-items: start;
}

.yard-chat {
    display: grid;
    gap: 22px;
    padding: 26px;
    width: 100%;
}

.yard-chat__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
}

.yard-chat__header h2 {
    margin: 8px 0 0;
    font-size: 1.8rem;
}

.yard-chat__intro {
    display: grid;
    gap: 10px;
}

.yard-status {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
}

.yard-status__badge {
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(208, 169, 95, 0.28);
    background: rgba(208, 169, 95, 0.08);
    color: #f0d082;
    font-size: 0.84rem;
}

.yard-status__badge--pvp {
    border-color: rgba(208, 169, 95, 0.28);
    background: rgba(208, 169, 95, 0.08);
    color: #f0d082;
}

.yard-status__badge--protection {
    border-color: rgba(99, 181, 121, 0.3);
    background: rgba(99, 181, 121, 0.1);
    color: #b9efc6;
}

.yard-status__badge--cooldown {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
}

.yard-status__badge--warn {
    border-color: rgba(240, 138, 119, 0.28);
    background: rgba(240, 138, 119, 0.08);
    color: #f3b3a7;
}

.yard-rules-button {
    min-height: 40px;
    padding: 0 14px;
}

.yard-rules-row {
    display: flex;
    justify-content: flex-end;
    margin-left: auto;
    flex: 0 0 auto;
}

.chat-composer {
    display: grid;
    gap: 12px;
}

.chat-composer__input {
    width: 100%;
    min-height: 110px;
    padding: 16px 18px;
    resize: vertical;
    border-radius: 18px;
    border: 1px solid var(--stroke);
    background: rgba(8, 11, 16, 0.82);
    color: var(--text);
}

.chat-composer__input:focus {
    outline: 1px solid rgba(208, 169, 95, 0.45);
    border-color: rgba(208, 169, 95, 0.35);
}

.chat-composer__submit {
    justify-self: end;
    min-width: 172px;
}

.chat-list {
    display: grid;
    gap: 14px;
    width: 100%;
    align-items: stretch;
}

.yard-feedback {
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(240, 138, 119, 0.28);
    background: rgba(240, 138, 119, 0.08);
    color: #f3b3a7;
    font-size: 0.92rem;
}

.chat-item {
    display: grid;
    gap: 14px;
    padding: 18px;
    border-radius: 20px;
    border: 1px solid var(--stroke);
    background: rgba(255, 255, 255, 0.03);
}

.chat-item__head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
}

.chat-item__identity {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
}

.chat-item__head-right {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.chat-item__actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.chat-item__message-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
    margin-top: 10px;
}

.chat-item__time {
    color: var(--text-dim);
    font-size: 0.82rem;
    white-space: nowrap;
}

.chat-item__message {
    margin: 0;
    color: var(--text);
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

.player-trigger--static {
    cursor: default;
}

.chat-item--system {
    border-color: rgba(208, 169, 95, 0.18);
    background: rgba(208, 169, 95, 0.04);
}

.chat-item--npc-event {
    border-color: rgba(208, 169, 95, 0.2);
}

.chat-npc-progress {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(208, 169, 95, 0.24);
    background: rgba(208, 169, 95, 0.08);
    color: #f0d082;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-left: auto;
}

.chat-system__identity {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.chat-system-event {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--text);
    line-height: 1.4;
}

.chat-system__badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(208, 169, 95, 0.28);
    background: rgba(208, 169, 95, 0.1);
    color: #f0d082;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.chat-action-button {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    cursor: pointer;
}

.chat-action-button--ticketed {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.chat-action-button:disabled {
    opacity: 0.72;
    cursor: not-allowed;
}

.chat-action-button--inline {
    flex: 0 0 auto;
    white-space: nowrap;
}

.chat-action-button--warn {
    border-color: rgba(240, 138, 119, 0.28);
    color: #f3b3a7;
}

.chat-action-button__icon {
    width: 14px;
    height: 14px;
    object-fit: contain;
    flex: 0 0 14px;
}

.chat-empty {
    width: 100%;
    min-height: 98px;
    display: grid;
    place-items: center;
    padding: 28px 18px;
    border-radius: 18px;
    border: 1px dashed rgba(255, 255, 255, 0.12);
    color: var(--text-soft);
    text-align: center;
}

.yard-nav {
    display: grid;
    gap: 12px;
    padding: 14px;
}

.yard-nav__button {
    display: grid;
    justify-items: center;
    gap: 10px;
    min-height: 110px;
    padding: 14px 10px;
    border-radius: 18px;
    border: 1px solid var(--stroke);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text);
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.yard-nav__button:hover {
    transform: translateY(-1px);
    border-color: rgba(208, 169, 95, 0.42);
    background: rgba(255, 255, 255, 0.05);
}

.yard-nav__icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
}

.yard-nav__icon svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

/* ─── LA COUR : STYLE COMIC BD ─── */
.yard-view .yard-chat {
    border: 4px solid #0a0708;
    border-radius: 6px;
    box-shadow: 6px 6px 0 #0a0708;
    background: #1a120e;
    padding: 20px;
    position: relative;
    overflow: hidden;
}

.yard-view .yard-chat::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 2px 2px, rgba(244, 234, 213, 0.05) 0 1px, transparent 1px);
    background-size: 6px 6px;
    pointer-events: none;
}

.yard-view .yard-chat__header h2 {
    font-family: "Anton", "Bowlby One", var(--font-ui);
    font-size: 2rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #f4ead5;
    line-height: 0.92;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.72);
}

.yard-view .yard-chat__header .eyebrow {
    font-family: "Special Elite", var(--font-ui);
    color: rgba(244, 234, 213, 0.6);
    letter-spacing: 0.22em;
}

.yard-view .yard-status__badge {
    border-radius: 4px;
    border-width: 2px;
    font-family: "Special Elite", var(--font-ui);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
}

.yard-view .yard-rules-button {
    border: 2px solid rgba(244, 234, 213, 0.3);
    border-radius: 4px;
    color: #f4ead5;
    font-family: "Special Elite", var(--font-ui);
    letter-spacing: 0.06em;
}

.yard-view .chat-composer__input {
    border: 3px solid #0a0708;
    border-radius: 4px;
    background: #f4ead5;
    color: #0a0708;
    font-family: "Special Elite", var(--font-ui);
    font-size: 0.98rem;
    box-shadow: 3px 3px 0 #0a0708;
}

.yard-view .chat-composer__input:focus {
    outline: none;
    border-color: #0a0708;
    box-shadow: 2px 2px 0 #0a0708;
}

.yard-view .chat-composer__input::placeholder {
    color: rgba(10, 7, 8, 0.45);
}

.yard-view .chat-composer__submit {
    border: 3px solid #0a0708;
    border-radius: 4px;
    background: #d22b2b;
    color: #f4ead5;
    box-shadow: 3px 3px 0 #0a0708;
    font-family: "Bowlby One", "Anton", var(--font-ui);
    font-size: 0.92rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.yard-view .chat-composer__submit:hover {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 #0a0708;
}

.yard-view .chat-item {
    border: 3px solid #0a0708;
    border-radius: 4px;
    background: #f4ead5;
    color: #0a0708;
    box-shadow: 4px 4px 0 #0a0708;
    padding: 12px 14px;
    gap: 8px;
    position: relative;
    overflow: hidden;
    transform: rotate(-0.3deg);
}

.yard-view .chat-item:nth-child(even) {
    transform: rotate(0.3deg);
}

.yard-view .chat-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 2px 2px, rgba(10, 7, 8, 0.1) 0 0.9px, transparent 0.9px);
    background-size: 5px 5px;
    opacity: 0.18;
    pointer-events: none;
}

.yard-view .chat-item__time {
    color: rgba(10, 7, 8, 0.5);
    font-family: "JetBrains Mono", var(--font-mono);
    font-size: 0.72rem;
}

.yard-view .chat-item__message {
    color: #0a0708;
    font-family: "Special Elite", var(--font-ui);
    font-size: 0.96rem;
    position: relative;
}

.yard-view .chat-item--system {
    background: rgba(10, 7, 8, 0.82);
    color: #f4ead5;
    border-color: rgba(244, 234, 213, 0.22);
    box-shadow: 3px 3px 0 rgba(0,0,0,0.6);
}

.yard-view .chat-item--system .chat-item__message {
    color: #f4ead5;
}

.yard-view .chat-system__badge {
    border-radius: 4px;
    font-family: "Special Elite", var(--font-ui);
}

.yard-view .chat-item--npc-event {
    background: linear-gradient(180deg, #f4ead5, #e8d9bc);
}

.yard-view .chat-empty {
    border: 2px dashed rgba(244, 234, 213, 0.22);
    border-radius: 4px;
    color: rgba(244, 234, 213, 0.5);
}

.yard-view .yard-nav {
    border: 4px solid #0a0708;
    border-radius: 6px;
    box-shadow: 5px 5px 0 #0a0708;
    background: #1a120e;
}

.yard-view .yard-nav__button {
    border: 3px solid rgba(244, 234, 213, 0.22);
    border-radius: 4px;
    background: rgba(244, 234, 213, 0.04);
    color: #f4ead5;
    font-family: "Special Elite", var(--font-ui);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
}

.yard-view .yard-nav__button:hover {
    border-color: #f4ead5;
    background: rgba(244, 234, 213, 0.1);
    transform: translate(2px, 2px);
}

.yard-view .yard-nav__icon {
    border-radius: 8px;
    border: 2px solid rgba(244, 234, 213, 0.2);
    background: rgba(244, 234, 213, 0.06);
}

.yard-view .chat-action-button {
    border: 2px solid #0a0708;
    border-radius: 4px;
    background: #0a0708;
    color: #f2c529;
    font-family: "Special Elite", var(--font-ui);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
}

.yard-view .chat-action-button:disabled {
    opacity: 0.44;
}

/* ── Pseudo & niveau lisibles sur fond crème ── */
.yard-view .chat-item .player-trigger--chat .player-trigger__text strong {
    font-size: 1rem;
    color: #0a0708;
    font-family: "Bowlby One", var(--font-ui);
}

.yard-view .chat-item .player-trigger__text span {
    color: rgba(10, 7, 8, 0.58);
    font-family: "Special Elite", var(--font-ui);
    font-size: 0.78rem;
}

.yard-view .chat-item .chat-gang-tag {
    color: rgba(10, 7, 8, 0.48);
}

.yard-view .chat-item .chat-display-name__user {
    color: #0a0708;
}

/* ── Sidebar desktop : ajuster la largeur ── */
.yard-layout {
    grid-template-columns: minmax(0, 1fr) 108px;
}

.yard-nav__button {
    min-height: 90px;
}

/* ══════════════════════════════════════════════
   YARD — BD CHAT REDESIGN
   ══════════════════════════════════════════════ */

/* Hide the global HUD (HP bar, gold, account) on yard view */
.yard-view .global-hud-shell,
.yard-view .global-hud-backdrop {
    display: none !important;
}

/* Prevent body/html scroll on yard — only internal chat scroll area scrolls */
html:has(body.yard-view) {
    overflow: hidden;
    height: 100%;
    overscroll-behavior: none;
}

body.yard-view {
    overflow: hidden;
    height: 100%;
    overscroll-behavior: none;
}

/* Full-height fixed layout — only the chat scroll area scrolls */
.yard-view .site-shell {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    width: min(520px, 100%) !important;
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}

.yard-view .page-auto-topbar {
    flex-shrink: 0;
    padding: 10px 14px 0;
    margin-bottom: 0;
}

.yard-view .yard-layout {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
}

/* ─── Online users strip ─── */
.yard-online-strip {
    display: flex;
    gap: 10px;
    padding: 10px 14px 8px;
    overflow-x: auto;
    border-bottom: 2px solid rgba(244, 234, 213, 0.18);
    flex-shrink: 0;
    scrollbar-width: none;
}

.yard-online-strip::-webkit-scrollbar { display: none; }

.yard-online-pill {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.yard-online-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid #0a0708;
    box-shadow: 2px 2px 0 #0a0708;
    display: grid;
    place-items: center;
    font-family: "Bowlby One", var(--font-ui);
    font-size: 17px;
    color: #0a0708;
    cursor: pointer;
    position: relative;
    background: none;
    line-height: 1;
}

.yard-online-avatar__dot {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #3aa05c;
    border: 2px solid #0a0708;
}

.yard-online-avatar__name {
    font-family: "Special Elite", monospace;
    font-size: 0.5rem;
    color: rgba(244, 234, 213, 0.65);
    letter-spacing: 0.04em;
    max-width: 44px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

.yard-online-empty {
    font-family: "Special Elite", monospace;
    font-size: 0.68rem;
    color: rgba(244, 234, 213, 0.45);
    margin: 0;
    align-self: center;
}

/* ─── Action strip (Règles / Connectés / Population + status) ─── */
.yard-action-strip {
    display: flex;
    gap: 6px;
    padding: 6px 14px;
    border-bottom: 2px solid rgba(244, 234, 213, 0.12);
    flex-shrink: 0;
    align-items: center;
    flex-wrap: wrap;
}

.yard-strip-btn {
    font-family: "Bowlby One", var(--font-ui);
    font-size: 0.62rem;
    padding: 6px 11px;
    background: rgba(244, 234, 213, 0.1);
    color: #f4ead5;
    border: 2px solid rgba(244, 234, 213, 0.5);
    box-shadow: 2px 2px 0 rgba(10, 7, 8, 0.55);
    cursor: pointer;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    transition: background 0.12s, box-shadow 0.12s, transform 0.12s;
}

.yard-strip-btn:hover {
    background: rgba(244, 234, 213, 0.2);
    border-color: rgba(244, 234, 213, 0.75);
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 rgba(10, 7, 8, 0.55);
}

.yard-status-chip {
    margin-left: auto;
    font-family: "Special Elite", monospace;
    font-size: 0.56rem;
    padding: 3px 6px;
    border: 1.5px solid rgba(244, 234, 213, 0.3);
    color: rgba(244, 234, 213, 0.6);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ─── Scrollable chat list ─── */
.yard-chat-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 160px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* ─── BD message items ─── */
.yard-msg {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.yard-msg--system {
    justify-content: center;
}

.yard-msg__avatar {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 3px solid #0a0708;
    box-shadow: 2px 2px 0 #0a0708;
    overflow: hidden;
    cursor: pointer;
    background: #3a8fc4;
    display: block;
    padding: 0;
}

button.yard-msg__avatar { cursor: pointer; }

.yard-msg__avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.yard-msg__body {
    flex: 1;
    min-width: 0;
}

.yard-msg__bubble {
    position: relative;
    background-color: #f4ead5;
    background-image: radial-gradient(circle, rgba(10, 7, 8, 0.07) 1px, transparent 1px);
    background-size: 5px 5px;
    color: #0a0708;
    border: 3px solid #0a0708;
    box-shadow: 3px 3px 0 #0a0708;
    padding: 5px 9px;
    overflow: visible;
}

/* Speech bubble left tail */
.yard-msg__bubble::before {
    content: "";
    position: absolute;
    left: -11px;
    top: 7px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 11px solid #0a0708;
    pointer-events: none;
}

.yard-msg__bubble::after {
    content: "";
    position: absolute;
    left: -6px;
    top: 10px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 7px solid #f4ead5;
    pointer-events: none;
}

.yard-msg__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 6px;
    position: relative;
    margin-bottom: 1px;
}

.yard-msg__name {
    font-family: "Bowlby One", var(--font-ui);
    font-size: 0.68rem;
    text-transform: uppercase;
    color: #0a0708;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.yard-msg__time {
    font-family: "JetBrains Mono", monospace;
    font-size: 0.48rem;
    opacity: 0.5;
    color: #0a0708;
    flex-shrink: 0;
    white-space: nowrap;
}

.yard-msg__text {
    font-family: "Special Elite", monospace;
    font-size: 0.82rem;
    margin: 0;
    color: #0a0708;
    line-height: 1.4;
    word-break: break-word;
}

.yard-msg__actions {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}

/* BAGARRE! button */
.yard-bagarre-btn {
    font-family: "Bowlby One", var(--font-ui);
    font-size: 0.6rem;
    padding: 3px 10px;
    background: #d22b2b;
    color: #fff;
    border: 2px solid #0a0708;
    cursor: pointer;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.3;
}

.yard-bagarre-btn:disabled {
    background: rgba(10, 7, 8, 0.45);
    cursor: not-allowed;
    opacity: 0.65;
    color: rgba(244, 234, 213, 0.7);
}

/* Message bubble color variants */
/* Own messages → blue */
.yard-msg--self .yard-msg__bubble {
    background-color: #b8ddf0;
}
.yard-msg--self .yard-msg__bubble::after {
    border-right-color: #b8ddf0;
}
/* Others → beige/cream */
.yard-msg--other .yard-msg__bubble {
    background-color: #f4ead5;
}
.yard-msg--other .yard-msg__bubble::after {
    border-right-color: #f4ead5;
}
/* NPC/bot → light red */
.yard-msg--npc .yard-msg__bubble {
    background-color: #fcd8d8;
}
.yard-msg--npc .yard-msg__bubble::after {
    border-right-color: #fcd8d8;
}

/* Slight alternating rotation on bubbles */
.yard-msg:nth-child(odd) .yard-msg__bubble  { transform: rotate(-0.4deg); }
.yard-msg:nth-child(even) .yard-msg__bubble { transform: rotate(0.4deg); }

/* NPC action buttons */
.yard-npc-actions {
    display: flex;
    gap: 4px;
    margin-top: 4px;
    align-items: center;
}

.yard-npc-btn {
    font-family: "Bowlby One", var(--font-ui);
    font-size: 0.6rem;
    padding: 3px 10px;
    background: #3a8fc4;
    color: #fff;
    border: 2px solid #0a0708;
    cursor: pointer;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.3;
}

.yard-npc-btn:disabled {
    background: rgba(10, 7, 8, 0.45);
    cursor: not-allowed;
    opacity: 0.65;
    color: rgba(244, 234, 213, 0.7);
}

.yard-npc-progress-chip {
    font-family: "JetBrains Mono", monospace;
    font-size: 0.6rem;
    color: rgba(244, 234, 213, 0.65);
    border: 1.5px solid rgba(244, 234, 213, 0.28);
    padding: 2px 6px;
}

/* System event line */
.yard-sys-event {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    justify-content: center;
    font-family: "Special Elite", monospace;
    font-size: 0.65rem;
    color: rgba(244, 234, 213, 0.55);
    padding: 4px 10px;
    border: 1.5px solid rgba(244, 234, 213, 0.18);
    background: rgba(10, 7, 8, 0.25);
    max-width: 100%;
    text-align: center;
}

/* Combat event card */
.yard-msg--combat-event {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 2px 0;
}

.yard-combat-event {
    width: 100%;
    max-width: 360px;
    border: 3px solid #d22b2b;
    box-shadow: 3px 3px 0 #d22b2b;
    background: rgba(10, 7, 8, 0.75);
    position: relative;
    overflow: hidden;
}

.yard-combat-event::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(210, 43, 43, 0.12) 1px, transparent 1px);
    background-size: 5px 5px;
    pointer-events: none;
}

.yard-combat-event__header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 5px 10px 4px;
    border-bottom: 2px solid rgba(210, 43, 43, 0.5);
    background: rgba(210, 43, 43, 0.18);
}

.yard-combat-event__label {
    font-family: "Anton", var(--font-ui);
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #d22b2b;
}

.yard-combat-event__icon {
    font-size: 0.9rem;
    line-height: 1;
}

.yard-combat-event__fighters {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 12px;
}

.yard-combat-event__vs {
    font-family: "Bowlby One", var(--font-ui);
    font-size: 0.9rem;
    color: #d22b2b;
    flex-shrink: 0;
}

.yard-combat-event__result {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 12px 6px;
    border-top: 2px solid rgba(232, 185, 35, 0.4);
    background: rgba(232, 185, 35, 0.08);
}

.yard-combat-event__winner-label {
    font-family: "Special Elite", monospace;
    font-size: 0.55rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #e8b923;
    flex-shrink: 0;
}

.yard-msg-empty {
    text-align: center;
    color: rgba(244, 234, 213, 0.4);
    font-family: "Special Elite", monospace;
    font-size: 0.78rem;
    margin: auto 0;
}

.yard-msg-empty p { margin: 0; }

/* ─── Input area ─── */
.yard-input-wrap {
    padding: 8px 14px calc(12px + env(safe-area-inset-bottom));
    border-top: 3px solid #0a0708;
    background: rgba(0, 0, 0, 0.35);
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
}

.yard-input-form {
    display: flex;
    gap: 6px;
    width: 100%;
}

.yard-input-field {
    flex: 1;
    height: 40px;
    background: #f4ead5;
    color: #0a0708;
    border: 3px solid #0a0708;
    box-shadow: 3px 3px 0 #0a0708;
    padding: 0 12px;
    font-family: "Special Elite", monospace;
    font-size: 16px; /* prevent iOS auto-zoom on focus */
    outline: none;
    min-width: 0;
}

.yard-input-field::placeholder {
    color: rgba(10, 7, 8, 0.42);
}

.yard-input-submit {
    width: 56px;
    height: 40px;
    flex-shrink: 0;
    background: #d22b2b;
    color: #fff;
    border: 3px solid #0a0708;
    box-shadow: 3px 3px 0 #0a0708;
    font-family: "Bowlby One", var(--font-ui);
    font-size: 0.85rem;
    cursor: pointer;
    letter-spacing: 0.04em;
}

/* Feedback */
.yard-view .yard-feedback {
    padding: 4px 14px;
    font-family: "Special Elite", monospace;
    font-size: 0.72rem;
    color: #d22b2b;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════
   END YARD BD REDESIGN
   ══════════════════════════════════════════════ */

/* ── Modal règles de la cour : style comic BD ── */
/* modal__dialog--challenge removed — base modal__dialog used directly */

/* yard-view modal styles now unified in base modal__dialog */

/* Padding for yard-challenge content inside modal */
.modal__dialog .yard-challenge {
    padding: 16px 20px 20px;
    position: relative;
    z-index: 1;
}

/* Padding for directory toolbar/list inside modal */
.modal__dialog .directory-toolbar,
.modal__dialog .directory-list {
    position: relative;
    z-index: 1;
}

.modal__dialog .directory-toolbar {
    padding: 12px 16px 4px;
}

.modal__dialog .directory-list {
    padding: 6px 16px 16px;
}

.yard-view .modal__dialog--wide .directory-card__meta {
    display: none;
}

.yard-view .modal__dialog--wide .player-trigger__text strong {
    color: #2a2326;
    font-family: "Bowlby One", var(--font-ui);
    font-size: 0.95rem;
}

.yard-view .modal__dialog--wide .player-trigger__text span {
    color: rgba(10, 7, 8, 0.55);
    font-size: 0.78rem;
    font-family: "Special Elite", var(--font-ui);
}

.yard-view .modal__dialog--wide .directory-card__body {
    border: none;
    border-bottom: 1px solid rgba(10, 7, 8, 0.18);
    color: #2a2326;
    padding: 8px 12px;
}

.yard-view .modal__dialog--list .directory-card__body {
    border: 2px solid #0a0708;
    border-radius: 4px;
    background: rgba(10, 7, 8, 0.05);
    color: #0a0708;
    box-shadow: 2px 2px 0 #0a0708;
    position: relative;
    z-index: 1;
}

.yard-view .modal__dialog--list .directory-card__meta {
    color: rgba(10, 7, 8, 0.55);
}

.yard-view .modal__dialog--list .player-trigger__text strong {
    color: #0a0708;
    font-family: "Bowlby One", var(--font-ui);
    font-size: 1rem;
}

.yard-view .modal__dialog--list .player-trigger__text span {
    color: rgba(10, 7, 8, 0.58);
    font-size: 0.78rem;
    font-family: "Special Elite", var(--font-ui);
}

.yard-view .modal__dialog--list .directory-search {
    border: 2px solid #0a0708;
    border-radius: 4px;
    background: rgba(10, 7, 8, 0.06);
    color: #0a0708;
    position: relative;
    z-index: 1;
}

.yard-view .modal__dialog--list .directory-search::placeholder {
    color: rgba(10, 7, 8, 0.4);
}

.yard-view .modal__dialog--list .directory-toolbar {
    position: relative;
    z-index: 1;
}

.yard-view .modal__dialog--list .directory-toolbar__count {
    color: rgba(10, 7, 8, 0.6);
}

.yard-view .modal__dialog--list .directory-list {
    position: relative;
    z-index: 1;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: thin;
    padding-bottom: 12px;
}

.yard-view .modal__dialog--challenge {
    background: #f4ead5;
    border: 4px solid #0a0708;
    box-shadow: 7px 7px 0 #0a0708;
    border-radius: 6px;
    color: #0a0708;
    position: relative;
    overflow: hidden;
}

.yard-view .modal__dialog--challenge::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 2px 2px, rgba(10, 7, 8, 0.08) 0 0.9px, transparent 0.9px);
    background-size: 6px 6px;
    opacity: 1;
    pointer-events: none;
}

.yard-view .modal__dialog--challenge .modal__header {
    border-bottom: 2px solid rgba(10, 7, 8, 0.18);
    position: relative;
}

.yard-view .modal__dialog--challenge .modal__header h2 {
    font-family: "Bowlby One", var(--font-ui);
    color: #0a0708;
    font-size: 1.3rem;
    letter-spacing: 0.04em;
}

.yard-view .modal__dialog--challenge .icon-button {
    color: #0a0708;
    border: 2px solid rgba(10, 7, 8, 0.3);
    border-radius: 4px;
}

.yard-challenge {
    display: grid;
    gap: 12px;
    text-align: center;
    padding: 8px 4px 12px;
    position: relative;
}

.yard-challenge__name {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    color: #0a0708;
}

.yard-challenge__text,
.yard-challenge__time {
    margin: 0;
    color: rgba(10, 7, 8, 0.65);
}

.yard-challenge__note {
    margin: -2px 0 0;
    color: #b5580a;
    font-size: 0.92rem;
}

.yard-rules {
    text-align: left;
    gap: 10px;
    position: relative;
}

.yard-rules p {
    margin: 0;
    color: rgba(10, 7, 8, 0.78);
    line-height: 1.45;
    font-family: "Special Elite", var(--font-ui);
}

.yard-rules__list {
    margin: 0;
    padding-left: 18px;
    color: rgba(10, 7, 8, 0.78);
    display: grid;
    gap: 8px;
    font-family: "Special Elite", var(--font-ui);
    font-size: 0.93rem;
    line-height: 1.45;
}

.yard-rules__list li::marker {
    color: #d22b2b;
}

.level-up-rewards {
    display: grid;
    gap: 10px;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    padding: 0;
    color: rgba(10, 7, 8, 0.75);
    list-style: none;
}

.level-up-reward {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: center;
}

.level-up-modal {
    gap: 14px;
    padding: 6px 4px 10px;
}

.level-up-modal__eyebrow {
    margin: 0;
    color: var(--accent);
    font-size: 0.76rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.level-up-modal__gain {
    margin: -2px 0 4px;
    color: #b5580a;
    font-size: 1.05rem;
    font-weight: 700;
}

.level-up-modal__note {
    margin: -2px 0 4px;
    color: rgba(10, 7, 8, 0.55);
    font-size: 0.92rem;
}

.skill-choice-body {
    padding: 16px 20px 20px;
}

.skill-choice-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(10, 7, 8, 0.45);
    margin: 0 0 4px;
}

.skill-choice-prompt {
    font-family: "Bowlby One", var(--font-ui);
    font-size: 1.05rem;
    color: var(--comic-ink);
    margin: 0 0 14px;
}

.skill-choice-row {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.skill-choice-form {
    flex: 1;
    margin: 0;
    display: flex;
}

.skill-choice-ou {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    font-family: "Bowlby One", var(--font-ui);
    font-size: 0.95rem;
    color: rgba(10, 7, 8, 0.4);
    flex-shrink: 0;
}

.skill-choice-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 14px 12px;
    border: 3px solid var(--comic-ink);
    border-radius: 6px;
    background: #f4ead5;
    color: var(--comic-ink);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    box-shadow: 3px 3px 0 var(--comic-ink);
    transition: transform 0.1s, box-shadow 0.1s, background 0.1s;
}

.skill-choice-btn:hover {
    background: #e8b923;
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--comic-ink);
}

.skill-choice-btn:active {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 var(--comic-ink);
}

.skill-choice-btn strong {
    font-family: "Bowlby One", var(--font-ui);
    font-size: 0.88rem;
    line-height: 1.2;
}

.skill-choice-btn small {
    font-family: "Special Elite", monospace;
    font-size: 0.75rem;
    color: rgba(10, 7, 8, 0.65);
    line-height: 1.35;
    font-weight: normal;
}

.player-trigger {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

.player-trigger__text {
    display: grid;
    gap: 3px;
}

.player-trigger__text strong {
    font-size: 1.16rem;
    line-height: 1;
}

.player-trigger--chat .player-trigger__text strong {
    font-size: 1.32rem;
}

.player-trigger--directory .player-trigger__text strong {
    font-size: 1.06rem;
}

.chat-display-name {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
}

.chat-gang-tag {
    color: var(--text-dim);
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.chat-display-name__user {
    font-size: 1.08em;
}

.director-balance__table-head--compact {
    margin-bottom: 14px;
}

.chat-display-name__user--guard {
    color: #e45f5f !important;
}

.chat-display-name__user--founder {
    color: #9d73ff !important;
}

.player-trigger__text strong .chat-display-name__user--guard {
    color: #e45f5f !important;
}

.player-trigger__text strong .chat-display-name__user--founder {
    color: #9d73ff !important;
}

.player-trigger--chat .chat-display-name__user--guard,
.player-trigger--directory .player-name--guard,
.player-trigger--inline .chat-display-name__user--guard {
    color: #e45f5f !important;
}

.player-trigger--chat .chat-display-name__user--founder,
.player-trigger--directory .player-name--founder,
.player-trigger--inline .chat-display-name__user--founder {
    color: #9d73ff !important;
}

.player-name {
    color: inherit;
    font-weight: inherit;
}

.player-name--guard {
    color: #e45f5f !important;
}

.player-name--founder {
    color: #9d73ff !important;
}

.player-trigger__text span {
    color: var(--text-soft);
    font-size: 0.84rem;
}

.player-avatar {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    object-fit: cover;
    border: 1px solid var(--stroke-strong);
    background: rgba(255, 255, 255, 0.03);
}

.player-avatar--md {
    width: 52px;
    height: 52px;
}

.player-avatar--xs {
    width: 28px;
    height: 28px;
    border-radius: 10px;
}

.player-trigger--inline {
    gap: 8px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
}

.player-trigger--inline .player-trigger__text {
    display: block;
}

.player-trigger--inline .player-trigger__text strong {
    font-size: 0.92rem;
    line-height: 1;
}

.directory-list {
    display: grid;
    gap: 12px;
}

.directory-card {
    display: block;
}

.directory-card__body {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid var(--stroke);
    background: rgba(255, 255, 255, 0.03);
}

.directory-card__meta {
    color: var(--text-dim);
    font-size: 0.82rem;
    white-space: nowrap;
}

.directory-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.directory-toolbar--stack {
    display: grid;
    gap: 12px;
}

.directory-toolbar__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.directory-toolbar__count {
    color: var(--text-soft);
    font-size: 0.9rem;
}

.directory-search {
    width: 100%;
    min-height: 46px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid var(--stroke);
    background: rgba(8, 11, 16, 0.82);
    color: var(--text);
}

.directory-search:focus {
    outline: 1px solid rgba(208, 169, 95, 0.45);
    border-color: rgba(208, 169, 95, 0.35);
}

.directory-pagination {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.directory-page-button {
    min-width: 34px;
    min-height: 34px;
    border-radius: 999px;
    border: 1px solid var(--stroke);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    cursor: pointer;
}

.directory-page-button:disabled {
    opacity: 0.45;
    cursor: default;
}

.directory-page-label {
    color: var(--text-soft);
    font-size: 0.84rem;
    white-space: nowrap;
}

@media (max-width: 1080px) {
    .split-layout,
    .fight-layout,
    .account-grid,
    .cantine-layout,
    .yard-layout {
        grid-template-columns: 1fr;
    }

    .card-grid,
    .card-grid--combat-select,
    .card-grid--three,
    .roster-list--wide,
    .uniform-grid {
        grid-template-columns: 1fr;
    }

    .uniform-grid--compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        justify-content: stretch;
    }

    .uniform-grid--duo {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cantine-pane--work {
        width: 100%;
        min-width: 0;
        justify-self: stretch;
    }

    .dish-grid--eat {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dish-grid--work {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .training-overview,
    .training-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .duel-view {
        grid-template-columns: 1fr;
    }

    .combat-skill-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .yard-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .directory-card {
        align-items: start;
        flex-direction: column;
    }

    .hub-scene {
        grid-auto-rows: minmax(150px, auto);
        min-height: auto;
        padding: 110px 14px 16px;
    }
}

@media (max-width: 760px) {
    html,
    body {
        background:
            radial-gradient(ellipse at 30% 0%, #2a1c14, #0e0807 82%),
            linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 24%);
        background-color: #0e0807;
    }

    .site-shell {
        width: min(100% - 20px, 100%);
        padding-top: 88px;
    }

    .account-trigger {
        top: 14px;
        right: 14px;
        width: 36px;
        height: 36px;
        padding: 0;
        min-width: 36px;
        gap: 0;
    }

    .account-trigger::before {
        display: none;
    }

    .account-trigger > span:last-child {
        display: none;
    }

    .has-global-hud:not(.hub-view) .site-shell {
        padding-top: 90px;
    }

    .combat-columns,
    .stats-grid,
    .fight-meta,
    .dossier__header,
    .dossier__stats {
        grid-template-columns: 1fr;
    }

    .pve-timeline {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        padding: 14px 12px;
        justify-content: flex-start;
    }

    .pve-timeline__line {
        display: none;
    }

    .pve-choice-grid {
        grid-template-columns: 1fr;
    }

    .object-card--fixed,
    .enemy-select-card--fixed {
        width: 100%;
    }

    .combat-feed {
        grid-column: auto;
    }

    .combat-controls {
        grid-column: 1 / -1;
        width: 100%;
        justify-items: center;
    }

    .combat-controls form {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .combat-skill-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .object-card__head {
        flex-direction: column;
        align-items: flex-start;
    }

    .global-hud-shell {
        top: 14px;
        left: 10px;
        right: 10px;
        width: auto;
        transform: none;
        justify-items: stretch;
        row-gap: 7px;
    }

    .global-hud,
    .hub-hud {
        gap: 7px;
        grid-template-columns: max-content minmax(0, 1fr) max-content;
    }

    .hud-boosts {
        right: 6px;
        left: auto;
        top: 82px;
        gap: 5px;
    }

    .hud-steaks {
        gap: 5px;
        padding: 3px 7px;
    }

    .hud-steak {
        width: 17px;
        height: 13px;
    }

    .global-hud .hud-card strong,
    .hub-view .hud-card strong {
        font-size: 0.9rem;
    }

    .global-hud .hud-card--hp,
    .hub-view .hud-card--hp {
        width: 100%;
        min-width: 0;
    }

    .hub-scene {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: minmax(144px, auto);
        gap: 10px;
        min-height: auto;
        padding: 97px 12px 16px;
        border-width: 3px;
        border-radius: 18px;
    }

    .scene-zone {
        min-height: 0;
        padding: 10px;
        border-width: 3px;
        border-radius: 10px;
        box-shadow: 4px 4px 0 #0a0708;
    }

    .scene-zone:hover,
    .scene-zone:focus-visible {
        box-shadow: 2px 2px 0 #0a0708;
    }

    .scene-zone__icon {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        border-width: 2px;
        box-shadow: 1px 1px 0 #0a0708;
    }

    .scene-zone__icon svg {
        width: 24px;
        height: 24px;
    }

    .scene-zone__chip {
        min-height: 20px;
        padding: 0 6px;
        font-size: 0.57rem;
        border-width: 2px;
    }

    .scene-zone__label {
        max-width: 11ch;
        font-size: clamp(1.02rem, 4.7vw, 1.46rem);
    }

    .scene-zone__sub {
        font-size: 0.58rem;
        letter-spacing: 0.08em;
    }

    .scene-zone--pve {
        min-height: 156px;
        padding-bottom: 24px;
    }

    .scene-zone__badge-bagarre {
        right: 10px;
        bottom: -13px;
        min-height: 52px;
        padding: 4px 20px 2px;
        border-width: 3px;
        font-size: 1.4rem;
    }

    .scene-zone__character {
        height: 88px;
        right: 4px;
        bottom: -5px;
    }

    .scene-zone--pve .scene-zone__character {
        height: 124px;
        right: 14px;
        bottom: -7px;
    }

    .scene-zone--yard .scene-zone__character {
        height: 106px;
        right: 4px;
        transform: none;
    }

    .gangs-layout {
        grid-template-columns: 1fr;
    }

    .gang-page-layout,
    .gang-hero {
        grid-template-columns: 1fr;
    }

    .gang-image-picker {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .gang-preview-simple__head {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .gang-summary-item,
    .gang-member {
        flex-wrap: wrap;
    }

    .gang-member__role {
        margin-left: 0;
    }

    .gang-inline-actions {
        grid-auto-flow: row;
    }

    .gang-hero__cover,
    .gang-modal__head {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .gang-hero--centered,
    .gang-modal__head--centered {
        justify-items: center;
    }

    .gang-action-row {
        justify-content: stretch;
    }

    .gang-action-row .button,
    .gang-action-row form,
    .gang-action-row a {
        width: 100%;
    }

    .metric-line,
    .status-strip,
    .reward-line,
    .stats-inline,
    .modal__footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .dossier-criminel__close-row {
        flex-direction: row;
        align-items: center;
    }

    .dish-grid--eat,
    .dish-grid--work {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .canteen-menu-item__link {
        grid-template-columns: 56px minmax(0, 1fr) max-content;
        min-height: 84px;
        gap: 10px;
        padding: 10px 12px;
    }

    .canteen-menu-item__icon {
        width: 56px;
        height: 56px;
    }

    .canteen-menu-item__icon svg {
        width: 24px;
        height: 24px;
    }

    .canteen-menu-item__name {
        font-size: clamp(1.18rem, 4.1vw, 1.46rem);
    }

    .canteen-cook {
        min-height: 0;
        gap: 14px;
    }

    .canteen-cook__pot {
        width: 112px;
        height: 112px;
    }

    .canteen-cook__progress,
    .canteen-cook__progress-copy,
    .canteen-cook__action {
        width: min(100%, 360px);
    }

    .cantine-stage {
        grid-template-columns: 1fr;
    }

    .cantine-pane {
        padding: 18px;
    }

    .cantine-pane--work {
        width: 100%;
        min-width: 0;
        justify-self: stretch;
    }

    .cantine-stage,
    .cantine-layout,
    .cantine-column {
        gap: 16px;
    }

    .dish-card {
        min-height: 172px;
        padding: 12px 10px 10px;
    }

    .dish-card__image {
        width: 98px;
        height: 74px;
    }

    .dish-card--work .dish-card__image {
        width: 92px;
        height: 92px;
    }

    .kitchen-active {
        min-height: 0;
        padding: 6px 2px 0;
    }

    .kitchen-active__image {
        width: 110px;
        height: 110px;
    }

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

    .training-card {
        min-height: 216px;
        padding: 14px 10px 10px;
    }

    .training-card__image {
        width: 90px;
        height: 90px;
    }

    .training-card__stat {
        padding: 8px 10px;
    }

    .yard-chat {
        order: 1;
        padding: 20px;
    }

    .yard-mobile-bar {
        order: 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        width: 100%;
        align-self: stretch;
        margin: 0 0 4px;
    }

    .yard-view .site-shell > .page-back-link:not(.page-back-link--yard-mobile) {
        display: none;
    }

    .page-back-link--yard-mobile {
        display: none;
    }

    .yard-chat__header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
    }

    .yard-chat__header h2 {
        font-size: 1.38rem;
    }

    .chat-composer__submit {
        justify-self: stretch;
        width: 100%;
        min-width: 0;
    }

    .chat-item {
        padding: 14px;
        gap: 10px;
    }

    .player-trigger--chat {
        min-width: 0;
        flex: 1 1 auto;
    }

    .chat-item__identity {
        width: 100%;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .chat-item__head-right {
        width: auto;
        margin-left: auto;
        align-items: flex-end;
        flex-direction: column;
        text-align: right;
    }

    .chat-item__actions {
        justify-content: flex-end;
    }

    .chat-item__message-actions {
        gap: 6px;
    }

    .chat-system-event {
        gap: 6px;
    }

    .yard-layout {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .yard-nav {
        order: 2;
        display: flex;
        justify-content: flex-end;
        align-self: flex-end;
        width: auto;
        padding: 0;
        margin: 0 0 10px auto;
        background: transparent;
        border: 0;
        box-shadow: none;
        backdrop-filter: none;
    }

    .yard-nav--mobile {
        order: 0;
        display: flex;
        margin-left: auto;
        justify-content: flex-end;
        align-self: auto;
        margin-top: 0;
        margin-bottom: 0;
    }

    .yard-nav--desktop {
        display: none;
    }

    .yard-nav__button {
        min-height: 0;
        min-width: 92px;
        padding: 10px 12px;
        border-radius: 14px;
        gap: 6px;
    }

    .duel-shell {
        padding: 16px;
    }

    .duel-view {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .combat-entity {
        width: 100%;
        gap: 8px;
    }

    .combat-avatar {
        width: 88px;
        height: 88px;
        border-radius: 16px;
    }

    .combat-name {
        font-size: 0.96rem;
    }

    .combat-entity .progress--hp {
        width: 88%;
    }

    .combat-popup {
        max-width: 220px;
        min-height: 36px;
        padding: 8px 10px;
        font-size: 0.82rem;
    }

    .combat-skill-button {
        min-height: 78px;
        padding: 8px 10px 20px;
    }

    .directory-card__body,
    .directory-toolbar,
    .directory-toolbar__row {
        flex-direction: column;
        align-items: flex-start;
    }

    .yard-nav {
        grid-template-columns: none;
    }

    .guardian-history {
        max-height: none;
    }

    .modal__dialog {
        padding: 20px;
        max-height: calc(100vh - 24px);
    }

    .modal__dialog--list,
    .modal__dialog--profile,
    .modal__dialog--job {
        margin: 0;
    }

    .dossier__avatar {
        width: 104px;
        height: 104px;
        border-radius: 22px;
    }

    .dossier {
        gap: 16px;
    }

    .dossier__header {
        gap: 16px;
    }

    .dossier__identity h2 {
        font-size: 1.48rem;
    }

    .dossier__meta {
        margin-top: 12px;
        gap: 8px;
    }

    .dossier__panel {
        padding: 18px;
    }

    .dossier__stats {
        gap: 12px;
        margin-top: 14px;
    }

    .dossier__stat {
        padding: 14px;
    }

    .dossier__stat strong {
        font-size: 1.02rem;
    }

    .object-card--fixed,
    .enemy-select-card--fixed {
        min-height: 0;
        padding: 18px 14px;
    }

    .object-card--fixed .object-card__head h3,
    .enemy-select-card--fixed h2 {
        font-size: 1.25rem;
    }

    .cantine-layout,
    .cantine-column {
        gap: 18px;
    }

    .cantine-mobile-switch {
        order: -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-bottom: 8px;
    }

    .job-bonus-grid {
        grid-template-columns: 1fr;
    }

    .dish-grid--eat,
    .dish-grid--work,
    .training-grid {
        gap: 12px;
    }

    .fight-result-card {
        gap: 14px;
    }

    .fight-result-card__actions {
        flex-direction: column;
    }

    .fight-result-card__actions .button {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .site-shell {
        width: calc(100% - 14px);
        padding-top: 96px;
        padding-bottom: 28px;
    }

    .has-global-hud:not(.hub-view) .site-shell {
        padding-top: 82px;
    }

    .panel,
    .cantine-pane,
    .zone-card,
    .modal__dialog {
        padding: 16px;
        border-radius: 18px;
    }

    .kitchen-game-view--stability .site-shell {
        width: calc(100vw - 6px);
    }

    .kitchen-game-view--stability .kitchen-minigame__board {
        min-height: calc(100vh - 215px);
        padding: 10px;
    }

    .kitchen-game-view--stability .kitchen-stability {
        min-height: calc(100vh - 285px);
        border-radius: 18px;
    }

    .page-auto-topbar {
        gap: 8px;
        margin-bottom: 7px;
    }

    .page-auto-topbar h1 {
        font-size: clamp(1.06rem, 6vw, 1.26rem);
    }

    .page-back-link--auto {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
        flex: 0 0 48px;
        padding: 0 0 2px;
        font-size: 28px;
        border-width: 3px;
        box-shadow: 3px 3px 0 var(--comic-ink);
    }

    .button,
    .chat-action-button {
        min-height: 42px;
        font-size: 0.94rem;
    }

    .chat-composer__input {
        min-height: 90px;
        padding: 14px;
    }

    .player-avatar {
        width: 48px;
        height: 48px;
        border-radius: 14px;
    }

    .player-avatar--md {
        width: 44px;
        height: 44px;
    }

    .player-avatar--xs {
        width: 24px;
        height: 24px;
        border-radius: 8px;
    }

    .global-hud-shell {
        top: 12px;
        left: 8px;
        right: 8px;
        width: auto;
        transform: none;
        gap: 5px;
        row-gap: 5px;
    }

    .global-hud,
    .hub-hud {
        gap: 6px;
        grid-template-columns: max-content minmax(0, 1fr) max-content;
    }

    .hud-boosts {
        right: 4px;
        left: auto;
        top: 76px;
        gap: 4px;
    }

    .hud-steaks {
        gap: 4px;
        padding: 3px 6px;
    }

    .hud-steak {
        width: 15px;
        height: 12px;
    }

    .hud-boost {
        font-size: 0.68rem;
        padding: 5px 8px;
    }

    .infirmary-hero {
        gap: 12px;
        margin-bottom: 14px;
    }

    .infirmary-hero__badge {
        width: 54px;
        height: 54px;
        font-size: 1.7rem;
    }

    .infirmary-card__stats {
        grid-template-columns: 1fr;
    }

    .global-hud .hud-card--hp,
    .hub-view .hud-card--hp {
        width: 100%;
        min-width: 0;
    }

    .hud-bar {
        height: 26px;
    }

    .hub-scene {
        grid-auto-rows: minmax(132px, auto);
        gap: 8px;
        min-height: auto;
        padding: 85px 10px 12px;
        border-radius: 16px;
    }

    .pve-timeline {
        gap: 8px;
        padding: 12px 10px;
    }

    .pve-gang-node {
        width: 46px;
        height: 46px;
        border-radius: 13px;
    }

    .pve-gang-panel__header {
        gap: 10px;
        align-items: stretch;
        flex-direction: column;
    }

    .scene-zone {
        min-height: 0;
        padding: 9px;
        border-radius: 9px;
        box-shadow: 3px 3px 0 #0a0708;
    }

    .scene-zone__icon {
        width: 36px;
        height: 36px;
        border-radius: 7px;
    }

    .scene-zone__icon svg {
        width: 22px;
        height: 22px;
        stroke-width: 4.2;
    }

    .scene-zone__chip {
        min-height: 18px;
        padding: 0 5px;
        font-size: 0.53rem;
    }

    .scene-zone__label {
        max-width: 12ch;
        font-size: clamp(0.94rem, 5vw, 1.28rem);
        letter-spacing: 0.02em;
    }

    .scene-zone__sub {
        margin-top: 4px;
        font-size: 0.54rem;
        letter-spacing: 0.07em;
    }

    .scene-zone--pve {
        min-height: 144px;
        padding-bottom: 22px;
    }

    .scene-zone__badge-bagarre {
        right: 9px;
        bottom: -12px;
        min-height: 45px;
        padding: 2px 14px 0;
        border-width: 3px;
        font-size: 1.02rem;
        box-shadow: 3px 3px 0 #0a0708;
    }

    .scene-zone__character {
        height: 74px;
        right: 3px;
        bottom: -4px;
    }

    .scene-zone--pve .scene-zone__character {
        height: 102px;
        right: 10px;
        bottom: -6px;
    }

    .scene-zone--yard .scene-zone__character {
        height: 84px;
        right: 3px;
        transform: none;
    }

    .yard-view .modal__dialog--challenge {
        width: calc(100% - 24px);
        box-shadow: 4px 4px 0 #0a0708;
    }

    .yard-view .modal__dialog--list {
        box-shadow: 4px 4px 0 #0a0708;
    }

    .scene-zone--gangs .scene-zone__label {
        font-size: clamp(0.8rem, 4.5vw, 1rem);
    }

    .yard-nav {
        gap: 8px;
        padding: 0;
        border-radius: 0;
    }

    .yard-nav__button {
        min-width: 72px;
        min-height: 0;
        padding: 8px 9px;
        gap: 4px;
        font-size: 0.76rem;
    }

    .yard-nav__icon {
        width: 32px;
        height: 32px;
        border-radius: 10px;
    }

    .account-trigger {
        top: 13px;
        right: 10px;
        width: 34px;
        height: 34px;
        min-width: 34px;
        padding: 0;
    }

    .directory-search {
        min-height: 42px;
    }

    .directory-page-label,
    .directory-card__meta,
    .chat-item__time,
    .player-trigger__text span {
        font-size: 0.78rem;
    }

    .chat-item {
        padding: 12px;
    }

    .chat-item__head {
        align-items: flex-start;
    }

    .chat-item__head-right {
        gap: 5px;
    }

    .chat-item__actions {
        gap: 6px;
    }

    .chat-item__message-actions {
        gap: 6px;
        margin-top: 8px;
    }

    .chat-action-button {
        min-height: 28px;
        padding: 0 8px;
        font-size: 0.72rem;
    }

    .chat-action-button__icon {
        width: 12px;
        height: 12px;
        flex-basis: 12px;
    }

    .chat-npc-progress {
        min-height: 28px;
        padding: 0 8px;
        font-size: 0.72rem;
    }

    .modal__dialog--list {
        width: calc(100% - 16px);
        max-height: calc(100dvh - 24px);
    }

    .modal__dialog--profile {
        width: calc(100% - 16px);
        padding: 0;
        height: min(680px, calc(100dvh - 110px));
        max-height: calc(100dvh - 110px);
    }

    .dish-grid--eat,
    .dish-grid--work,
    .training-grid,
    .uniform-grid--duo,
    .combat-skill-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kitchen-view--comic .page-auto-topbar,
    .kitchen-game-view--comic .page-auto-topbar,
    .kitchen-result-view .page-auto-topbar {
        margin-bottom: 5px;
    }

    .kitchen-view--comic .page-auto-topbar h1,
    .kitchen-game-view--comic .page-auto-topbar h1,
    .kitchen-result-view .page-auto-topbar h1 {
        font-size: clamp(1.4rem, 8vw, 1.72rem);
    }

    .canteen-menu {
        gap: 8px;
    }

    .canteen-menu-item {
        border-width: 3px;
    }

    .canteen-menu-item__link {
        grid-template-columns: 46px minmax(0, 1fr) max-content;
        min-height: 76px;
        gap: 8px;
        padding: 8px 9px;
    }

    .canteen-menu-item__icon {
        width: 46px;
        height: 46px;
        border-width: 2px;
    }

    .canteen-menu-item__icon svg {
        width: 20px;
        height: 20px;
    }

    .canteen-menu-item__consume {
        min-width: 44px;
        padding: 4px 6px;
    }

    .canteen-menu-item__consume-icon {
        width: 22px;
        height: 22px;
    }

    .canteen-menu-item__name {
        font-size: clamp(1.04rem, 5.6vw, 1.28rem);
    }

    .canteen-menu-item__meta {
        gap: 4px;
        margin-top: 3px;
    }

    .canteen-menu-item__meta span {
        min-height: 16px;
        padding: 0 5px;
        border-width: 2px;
        font-size: 0.5rem;
    }

    .canteen-menu-item__reward {
        font-size: clamp(1.08rem, 5vw, 1.24rem);
    }

    .canteen-menu-item__lock {
        top: 4px;
        right: 5px;
        min-height: 16px;
        padding: 1px 6px;
        border-width: 2px;
        font-size: 0.5rem;
    }

    .canteen-cook {
        min-height: 0;
        gap: 12px;
    }

    .canteen-cook__center {
        gap: 10px;
    }

    .canteen-cook__pot {
        width: 98px;
        height: 98px;
    }

    .canteen-cook__name {
        min-height: 36px;
        padding: 4px 10px;
        font-size: clamp(0.92rem, 5vw, 1.08rem);
    }

    .canteen-cook__progress,
    .canteen-cook__progress-copy,
    .canteen-cook__action {
        width: min(100%, 330px);
    }

    .canteen-cook__action {
        min-height: 58px;
        border-width: 3px;
        font-size: clamp(1rem, 5vw, 1.2rem);
    }

    .canteen-served {
        min-height: calc(100vh - 170px);
    }

    .canteen-served__content h1 {
        font-size: clamp(2.5rem, 18vw, 3.4rem);
    }

    .combat-skill-card__drag {
        top: 6px;
        right: 6px;
        padding: 5px;
    }

    .dish-card {
        min-height: 160px;
    }

    .uniform-grid--compact .dish-card {
        min-height: 178px;
        padding: 12px 10px 10px;
    }

    .dish-card__image {
        width: 86px;
        height: 64px;
    }

    .dish-card--work .dish-card__image {
        width: 82px;
        height: 82px;
    }

    .uniform-grid--compact .dish-card__image {
        width: 78px;
        height: 58px;
    }

    .uniform-grid--duo .dish-card__image {
        width: 76px;
        height: 56px;
    }

    .uniform-grid--duo .dish-card--work .dish-card__image {
        width: 78px;
        height: 78px;
    }

    .dish-card__title,
    .training-card__title {
        font-size: 0.92rem;
    }

    .item-card__effect {
        min-height: 46px;
        font-size: 0.76rem;
    }

    .training-card {
        min-height: 188px;
    }

    .training-card__image {
        width: 78px;
        height: 78px;
    }

    .training-card__stat-head span,
    .training-card__stat-foot span,
    .training-card__stat-head strong {
        font-size: 0.74rem;
    }

    .dossier {
        gap: 14px;
    }

    .dossier__header {
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 12px;
    }

    .dossier__avatar {
        width: 88px;
        height: 88px;
        border-radius: 18px;
    }

    .dossier__identity h2 {
        font-size: 1.04rem;
    }

    .dossier__meta {
        margin-top: 8px;
        gap: 8px;
        font-size: 0.72rem;
    }

    .dossier__panel {
        padding: 12px;
    }

    .dossier__stats {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-top: 12px;
    }

    .dossier__stat {
        gap: 5px;
        padding: 10px 12px;
        border-radius: 12px;
    }

    .dossier__stat span {
        font-size: 0.68rem;
    }

    .dossier__stat strong {
        font-size: 0.82rem;
    }

    .duel-shell {
        padding: 14px;
    }

    .duel-view {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .combat-entity {
        gap: 6px;
    }

    .combat-avatar {
        width: 74px;
        height: 74px;
    }

    .combat-name {
        font-size: 0.88rem;
    }

    .combat-entity .progress--hp {
        width: 84%;
    }

    .combat-popup {
        max-width: 180px;
        min-height: 32px;
        font-size: 0.76rem;
    }

    .combat-skill-button {
        min-height: 72px;
        padding: 8px 8px 20px;
    }

    .item-card__info-button {
        width: 26px;
        height: 26px;
        font-size: 0.88rem;
    }
}

/* ─── CELL PAGE ─── */
.cell-view .site-shell {
    max-width: 480px;
}

.cell-layout {
    display: grid;
    gap: 18px;
}

.cell-quick-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.cell-rest-form {
    margin: 0;
}

.cell-quick-button {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    min-height: 88px;
    padding: 12px 12px;
    border: 4px solid #0a0708;
    border-radius: 14px;
    box-shadow: 5px 5px 0 #0a0708;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
    font-family: "Bowlby One", "Archivo Black", var(--font-ui);
    font-size: 0.96rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
}

.cell-quick-button:hover:not(:disabled),
.cell-quick-button:focus-visible:not(:disabled) {
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 #0a0708;
}

.cell-quick-button:disabled {
    cursor: not-allowed;
    opacity: 0.62;
    box-shadow: 2px 2px 0 #0a0708;
}

.cell-quick-button--messages {
    background: linear-gradient(180deg, #f7eedf, #e0d0aa);
    color: #0a0708;
}

.cell-quick-button--rest {
    background: linear-gradient(180deg, #3d4e66, #26334a);
    color: #f4ead5;
}

.cell-quick-button--rest.is-active {
    background: linear-gradient(180deg, #516485, #354f72);
    box-shadow: 5px 5px 0 #0a0708, 0 0 0 2px #7a9bc4 inset;
}

.cell-quick-button__label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.96rem;
}

.cell-quick-button__sub {
    font-family: "Special Elite", var(--font-ui);
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    opacity: 0.7;
    text-transform: uppercase;
}

.cell-quick-button__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    padding: 0 7px;
    border: 2px solid #0a0708;
    border-radius: 999px;
    box-shadow: 1px 1px 0 #0a0708;
    font-family: "Bowlby One", "Archivo Black", var(--font-ui);
    font-size: 0.54rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
    background: #d22b2b;
    color: #fff;
}

.cell-inventory-panel {
    position: relative;
    overflow: hidden;
    padding: 20px;
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 28%),
        linear-gradient(180deg, #f3e8d4, #d7c19a);
    color: #0a0708;
}

.cell-inventory-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 2px 2px, rgba(10, 7, 8, 0.12) 0 0.9px, transparent 0.9px);
    background-size: 6px 6px;
    opacity: 0.24;
    pointer-events: none;
}

.cell-inventory-panel > * {
    position: relative;
    z-index: 1;
}

.cell-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.cell-inventory-menu {
    margin-top: 12px;
}

.cell-inventory-menu .canteen-menu-item,
.cell-inventory-menu .canteen-menu-item:hover,
.cell-inventory-menu .canteen-menu-item:focus-within {
    transform: none;
}

.cell-section-head h2 {
    margin: 4px 0 0;
    font-family: "Bowlby One", "Archivo Black", var(--font-ui);
    font-size: 1.28rem;
    line-height: 0.95;
    text-transform: uppercase;
}

.cell-section-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    border: 2px solid #0a0708;
    border-radius: 999px;
    background: #0a0708;
    color: #f4ead5;
    font-family: "JetBrains Mono", var(--font-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cell-view .dish-card {
    border: 3px solid #0a0708;
    border-radius: 16px;
    background: linear-gradient(180deg, #fff6e5, #e6d4b1);
    color: #0a0708;
    box-shadow: 4px 4px 0 #0a0708;
}

.cell-view .dish-card__qty,
.cell-view .dish-card__gain {
    border: 2px solid #0a0708;
    border-radius: 999px;
    box-shadow: 2px 2px 0 #0a0708;
}

.cell-view .dish-card__qty {
    background: #0a0708;
    color: #f4ead5;
}

.cell-view .dish-card__gain {
    background: #efc33d;
    color: #0a0708;
}

.cell-view .dish-card__image {
    border: 2px solid rgba(10, 7, 8, 0.16);
    background: rgba(255, 255, 255, 0.4);
}

.cell-view .dish-card__title {
    font-family: "Bowlby One", "Archivo Black", var(--font-ui);
    font-size: 0.94rem;
    text-transform: uppercase;
    line-height: 1;
}

.cell-view .item-card__effect {
    text-align: center;
    color: rgba(10, 7, 8, 0.72);
    font-size: 0.76rem;
}

.cell-view .dish-card .button {
    min-height: 42px;
    border: 3px solid #0a0708;
    border-radius: 12px;
    background: linear-gradient(180deg, #d22b2b, #a31f1f);
    color: #f4ead5;
    box-shadow: 3px 3px 0 #0a0708;
    font-family: "Bowlby One", "Archivo Black", var(--font-ui);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cell-view .dish-card .button:disabled {
    box-shadow: none;
}

.cell-view .inventory-empty {
    margin: 0;
}

.cell-empty-card {
    display: grid;
    gap: 8px;
    padding: 18px;
    border: 2px dashed rgba(10, 7, 8, 0.24);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.26);
    text-align: center;
    color: rgba(10, 7, 8, 0.72);
}

.cell-empty-card strong {
    font-family: "Bowlby One", "Archivo Black", var(--font-ui);
    font-size: 0.92rem;
    text-transform: uppercase;
    color: #0a0708;
}

/* ─── MESSAGES MODAL ─── */
/* modal__dialog--messages: structural only — visual from base modal__dialog */
.modal__dialog--messages {
    width: min(720px, calc(100vw - 20px));
    height: min(82vh, 680px);
    max-height: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.msg-modal-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.msg-compose-modal {
    width: min(520px, calc(100vw - 20px));
    height: auto;
    max-height: min(82vh, 560px);
    overflow-y: auto;
}

.msg-modal-body--compose {
    display: block;
    padding: 0;
}

.msg-thread--compose {
    min-height: 360px;
}

.msg-thread-messages--compose {
    min-height: 160px;
}

.msg-conv-list {
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 14px;
    overflow-x: auto;
    overflow-y: hidden;
    background: rgba(10, 7, 8, 0.06);
    border-bottom: 3px solid rgba(10, 7, 8, 0.16);
    scrollbar-width: thin;
    min-height: 96px;
    overflow-y: visible;
}

.msg-conv-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    width: 62px;
    text-decoration: none;
    color: #0a0708;
    transition: transform 0.12s ease;
}

.msg-conv-item:hover,
.msg-conv-item--active {
    transform: translateY(-2px);
}

.msg-conv-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.msg-conv-avatar {
    width: 52px;
    height: 52px;
    border-radius: 999px;
    border: 3px solid #0a0708;
    box-shadow: 3px 3px 0 #0a0708;
    object-fit: cover;
    display: block;
}

.msg-conv-item--active .msg-conv-avatar {
    border-color: #d22b2b;
    box-shadow: 0 0 0 2px #0a0708, 0 0 0 4px #f0c34a;
}

.msg-conv-item:hover .msg-conv-avatar {
    border-color: #d22b2b;
}

.msg-conv-name {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: #0a0708;
    text-align: center;
    word-break: break-word;
    max-width: 64px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-top: -8px;
    position: relative;
    z-index: 1;
    background: rgba(244, 234, 213, 0.96);
    border: 1.5px solid rgba(10, 7, 8, 0.2);
    border-radius: 4px;
    padding: 2px 4px;
}

.msg-conv-item--active .msg-conv-name {
    color: #d22b2b;
}

.msg-conv-unread {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #d22b2b;
    color: #fff;
    border: 2px solid #0a0708;
    box-shadow: 2px 2px 0 #0a0708;
    font-family: "Bowlby One", "Archivo Black", var(--font-ui);
    font-size: 0.58rem;
    padding: 0 4px;
    border-radius: 999px;
    flex-shrink: 0;
    z-index: 1;
}

.msg-thread-header__avatar-btn {
    flex-shrink: 0;
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    border-radius: 14px;
    transition: transform 0.12s ease;
}

.msg-thread-header__avatar-btn:hover {
    transform: scale(1.06);
}

.msg-thread-delete-form {
    margin: 0;
    margin-left: auto;
    flex-shrink: 0;
}

.msg-thread-delete-btn {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 2px solid rgba(10, 7, 8, 0.28);
    border-radius: 10px;
    background: transparent;
    color: rgba(10, 7, 8, 0.45);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.msg-thread-delete-btn:hover {
    background: #d22b2b;
    color: #fff;
    border-color: #d22b2b;
}

.msg-bubble-avatar-btn {
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    border-radius: 12px;
    transition: transform 0.12s ease;
}

.msg-bubble-avatar-btn:hover {
    transform: scale(1.1);
}

.msg-thread {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    min-height: 0;
    position: relative;
    background: linear-gradient(180deg, #f8f1df, #eadbbf);
    border-top: 4px solid rgba(10, 7, 8, 0.16);
}

.msg-thread::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 2px 2px, rgba(10, 7, 8, 0.12) 0 0.9px, transparent 0.9px);
    background-size: 6px 6px;
    opacity: 0.22;
    pointer-events: none;
}

.msg-thread > * {
    position: relative;
    z-index: 1;
}

.msg-thread-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 3px solid rgba(10, 7, 8, 0.2);
    background: linear-gradient(180deg, rgba(10, 7, 8, 0.06), transparent);
    flex-shrink: 0;
}

.msg-thread-header__avatar {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 3px solid #0a0708;
    box-shadow: 2px 2px 0 #0a0708;
    object-fit: cover;
}

.msg-thread-header__text {
    display: grid;
    gap: 2px;
}

.msg-thread-header__text strong {
    font-family: "Bowlby One", "Archivo Black", var(--font-ui);
    font-size: 0.92rem;
    line-height: 0.96;
    text-transform: uppercase;
}

.msg-thread-header__text span {
    font-family: "Special Elite", var(--font-ui);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(10, 7, 8, 0.62);
}

.msg-thread-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.msg-bubble-wrap {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

.msg-bubble-wrap--self {
    flex-direction: row-reverse;
}

.msg-bubble-avatar {
    width: 32px;
    height: 32px;
    border-radius: 12px;
    border: 3px solid #0a0708;
    box-shadow: 2px 2px 0 #0a0708;
    object-fit: cover;
    flex-shrink: 0;
}

.msg-bubble {
    max-width: 78%;
    padding: 10px 12px 8px;
    border: 3px solid #0a0708;
    border-radius: 16px;
    box-shadow: 4px 4px 0 rgba(10, 7, 8, 0.82);
    font-family: "Space Grotesk", var(--font-ui);
    font-size: 0.86rem;
    font-weight: 500;
    line-height: 1.4;
    word-break: break-word;
    background: linear-gradient(180deg, #fff7e6, #ebd8af);
}

.msg-bubble--self {
    background: linear-gradient(180deg, #dbe7ff, #acc3ed);
    border-radius: 16px 16px 4px 16px;
}

.msg-bubble--other {
    border-radius: 16px 16px 16px 4px;
}

.msg-bubble__time {
    font-size: 0.58rem;
    color: rgba(10, 7, 8, 0.52);
    margin-top: 6px;
    font-family: "JetBrains Mono", monospace;
}

.msg-thread-form {
    display: flex;
    gap: 8px;
    padding: 12px 14px 14px;
    border-top: 3px solid rgba(10, 7, 8, 0.18);
    background: rgba(10, 7, 8, 0.05);
    flex-shrink: 0;
}

.msg-thread-input {
    flex: 1;
    height: 44px;
    border: 3px solid #0a0708;
    border-radius: 12px;
    padding: 0 12px;
    font-family: "Space Grotesk", var(--font-ui);
    font-size: 0.92rem;
    background: rgba(255, 255, 255, 0.72);
    color: #0a0708;
    box-shadow: inset 2px 2px 0 rgba(10, 7, 8, 0.08);
    outline: none;
}

.msg-thread-input:focus {
    border-color: #d22b2b;
}

.msg-thread-submit {
    min-width: 112px;
    height: 44px;
    background: linear-gradient(180deg, #d22b2b, #a41f1f);
    color: #fff;
    border: 3px solid #0a0708;
    border-radius: 12px;
    box-shadow: 3px 3px 0 #0a0708;
    font-family: "Bowlby One", "Archivo Black", var(--font-ui);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
}

.msg-thread-submit:hover {
    transform: translate(-1px, -1px);
}

.msg-empty-state {
    min-height: 100%;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 10px;
    padding: 20px;
    text-align: center;
}

.msg-empty-state__icon {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border: 3px solid #0a0708;
    border-radius: 18px;
    background: #f4ead5;
    box-shadow: 4px 4px 0 #0a0708;
    color: #0a0708;
}

.msg-empty-state__icon svg {
    width: 32px;
    height: 32px;
}

.msg-empty-state__title {
    margin: 0;
    font-family: "Bowlby One", "Archivo Black", var(--font-ui);
    font-size: 0.96rem;
    line-height: 0.96;
    text-transform: uppercase;
}

.msg-empty-state__text {
    margin: 0;
    max-width: 26ch;
    font-family: "Special Elite", var(--font-ui);
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    color: rgba(10, 7, 8, 0.66);
}

.msg-empty-state--list {
    min-height: 58px;
    min-width: 100%;
    padding: 6px 0;
    color: #f4ead5;
}

.msg-empty-state--list .msg-empty-state__icon,
.msg-empty-state--list .msg-empty-state__text {
    display: none;
}

@media (max-width: 720px) {
    .modal__dialog--messages {
        width: calc(100vw - 12px);
        height: min(88dvh, 760px);
    }
}

@media (max-width: 520px) {
    .cell-quick-button {
        min-height: 72px;
        padding: 10px 10px;
        font-size: 0.76rem;
    }

    .msg-conv-list {
        min-height: 84px;
        padding: 10px 12px 12px;
        gap: 10px;
    }

    .msg-conv-item,
    .msg-conv-avatar {
        width: 50px;
        min-width: 50px;
        height: 50px;
    }

    .msg-bubble {
        max-width: 84%;
        font-size: 0.82rem;
    }

    .msg-thread-form {
        flex-wrap: wrap;
    }

    .msg-thread-submit {
        width: 100%;
        min-width: 0;
    }
}

/* ══════════════════════════════════════════════════════════════
   GANG ANNUAIRE – pagination
══════════════════════════════════════════════════════════════ */

.bd-dir-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 16px 4px;
    border-top: 1px solid var(--stroke);
    margin-top: 4px;
}

.bd-dir-pager__btn {
    background: var(--bg-3);
    color: var(--text);
    border: 1px solid var(--stroke-strong);
    border-radius: var(--radius-sm);
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s;
}

.bd-dir-pager__btn:hover:not(:disabled) {
    background: var(--bg-1);
}

.bd-dir-pager__btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.bd-dir-pager__info {
    font-size: 0.75rem;
    color: var(--text-dim);
    font-family: var(--font-mono);
}

/* ══════════════════════════════════════════════════════════════
   TERRITOIRE – page & map
══════════════════════════════════════════════════════════════ */

.territory-view .site-shell {
    padding-top: 0;
}

.territory-page {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Map */
.territory-map-wrap {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--stroke-strong);
    box-shadow: var(--shadow);
    background: #0e1218;
}

.territory-map {
    display: block;
    width: 100%;
    height: auto;
    touch-action: manipulation;
}

/* Zone polygons */
.tz-zone {
    cursor: pointer;
    outline: none;
}

.tz-zone__poly {
    transition: fill-opacity 0.15s, stroke 0.15s;
}

.tz-zone:hover .tz-zone__poly,
.tz-zone:focus .tz-zone__poly {
    fill-opacity: 0.78 !important;
    stroke: rgba(255,255,255,0.6) !important;
}

.tz-zone__initial {
    font-family: "Bowlby One", "Anton", var(--font-ui);
    font-size: 13px;
    fill: rgba(255,255,255,0.95);
    pointer-events: none;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    paint-order: stroke;
    stroke: rgba(0,0,0,0.5);
    stroke-width: 3px;
}

.tz-zone__bloc-label {
    font-family: var(--font-mono);
    font-size: 11px;
    fill: rgba(255,255,255,0.65);
    pointer-events: none;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.tz-zone__pct {
    font-family: var(--font-mono);
    font-size: 11px;
    fill: rgba(255,255,255,0.9);
    pointer-events: none;
    font-weight: bold;
}

.tz-zone__empty {
    font-family: var(--font-mono);
    font-size: 9px;
    fill: rgba(255,255,255,0.25);
    pointer-events: none;
}

/* Zone modal */
.tz-modal__name {
    font-family: "Bowlby One", "Anton", var(--font-ui);
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: 0.05em;
}

.tz-modal__body {
    padding: 0 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tz-modal__bloc {
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-dim);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.tz-modal__no-owners {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-dim);
    text-align: center;
    padding: 12px 0;
}

.tz-modal__gold-rate {
    margin: 8px 0 4px;
    font-size: 0.79rem;
    font-family: var(--font-mono);
    color: #d0a95f;
    text-align: center;
    min-height: 1.2em;
}

.tz-owner-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tz-owner-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 8px;
    background: var(--bg-1);
    border: 1px solid var(--stroke);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
}

.tz-owner-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tz-owner-pct {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--text-dim);
    white-space: nowrap;
}

.tz-owner-earn {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 700;
    color: #d0a95f;
    white-space: nowrap;
    text-align: right;
    min-width: 52px;
}

.tz-modal__fight-btn {
    margin-top: 4px;
}

/* Territory fight result */
.territory-result-changes {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}

.territory-change {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    background: var(--bg-1);
    border: 1px solid var(--stroke);
}

.territory-change__name {
    font-weight: 700;
    color: var(--text);
}

.territory-change__delta {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.85rem;
}

.territory-change--gain .territory-change__delta {
    color: var(--success);
}

.territory-change--loss .territory-change__delta {
    color: var(--danger);
}

/* Responsive: cap map width on wider screens */
@media (min-width: 640px) {
    .territory-map-wrap {
        max-width: min(400px, 55vw);
        margin: 0 auto;
    }
}

/* ═══════════════════════════════════════════════════════════
   MARKET — Redesigned card system
   ═══════════════════════════════════════════════════════════ */

.market-shop {
    display: grid;
    gap: 22px;
}

.market-shop__section {
    display: grid;
    gap: 10px;
}

.market-shop__label {
    font-family: "JetBrains Mono", var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(244, 234, 213, 0.42);
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(244, 234, 213, 0.1);
}

.market-shop__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

/* ── Card base ── */
.market-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #181e2c;
    border: 3px solid #0a0708;
    border-radius: 5px;
    box-shadow: 4px 4px 0 #0a0708;
    overflow: hidden;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.market-card:hover,
.market-card:focus-within {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 #0a0708;
}

.market-card.is-disabled {
    opacity: 0.52;
}

/* Category accent bar (top) */
.market-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--market-accent, #e8b923);
    z-index: 2;
}

/* Subtle dot-pattern texture overlay */
.market-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 2px 2px, rgba(244, 234, 213, 0.06) 0 1px, transparent 1px);
    background-size: 6px 6px;
    pointer-events: none;
    z-index: 0;
}

.market-card--booster { --market-accent: #f59e0b; }
.market-card--energy  { --market-accent: #22c55e; }
.market-card--combat  { --market-accent: #ef4444; }
.market-card--ticket  { --market-accent: #a78bfa; }

/* ── Button reset ── */
.market-card__btn {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    width: 100%;
    padding: 18px 10px 0;
    background: none;
    border: none;
    font: inherit;
    color: #f4ead5;
    cursor: pointer;
    text-align: center;
    gap: 8px;
}

.market-card__btn:disabled {
    cursor: not-allowed;
}

/* ── Icon zone ── */
.market-card__icon {
    width: 76px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.market-card__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}

/* ── Name + effect ── */
.market-card__body {
    flex: 1;
    width: 100%;
    padding: 0 4px;
}

.market-card__name {
    display: block;
    font-family: "Anton", "Archivo Black", var(--font-ui);
    font-size: clamp(0.96rem, 3.2vw, 1.2rem);
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #f4ead5;
}

.market-card__effect {
    display: block;
    margin-top: 5px;
    font-family: "JetBrains Mono", var(--font-mono);
    font-size: 0.6rem;
    line-height: 1.35;
    color: rgba(244, 234, 213, 0.48);
    min-height: 2.6em;
}

/* ── Buy strip at bottom ── */
.market-card__buy {
    position: relative;
    z-index: 1;
    align-self: stretch;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 8px 10px;
    background: #0a0708;
    border-top: 2px solid rgba(244, 234, 213, 0.1);
    width: 100%;
}

.market-card__buy-label {
    font-family: "JetBrains Mono", var(--font-mono);
    font-size: 0.46rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(244, 234, 213, 0.4);
}

.market-card__buy-price {
    font-family: "Anton", "Archivo Black", var(--font-ui);
    font-size: 1.22rem;
    line-height: 1;
    letter-spacing: 0.02em;
    color: #f4ead5;
}

/* ── Accent color on buy strip when hovered ── */
.market-card:hover .market-card__buy-price {
    color: var(--market-accent, #f4ead5);
}

/* ── Responsive ── */
@media (max-width: 400px) {
    .market-shop__grid {
        gap: 8px;
    }

    .market-card__icon {
        width: 58px;
        height: 58px;
    }

    .market-card__name {
        font-size: 0.88rem;
    }
}

/* ═══════════════════════════════════════════════════════════
   AI PANEL CHAT
   ═══════════════════════════════════════════════════════════ */

.ai-prompts-view .site-shell {
    max-width: 1160px;
}

.ai-chat-page {
    display: grid;
    gap: 18px;
}

.ai-chat-page .ai-panel-card {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(218, 172, 70, 0.08), transparent 28%),
        linear-gradient(180deg, rgba(30, 35, 48, 0.96), rgba(20, 24, 34, 0.98));
    border: 3px solid #0d0a09;
    border-radius: 16px;
    box-shadow: 5px 5px 0 #0d0a09;
    padding: 22px;
}

.ai-chat-page .ai-panel-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 26%),
        radial-gradient(circle at 1px 1px, rgba(244, 234, 213, 0.045) 0 1px, transparent 1px);
    background-size: auto, 8px 8px;
    opacity: 0.65;
}

.ai-chat-page .ai-panel-card > * {
    position: relative;
    z-index: 1;
}

.ai-chat-composer,
.ai-chat-thread {
    display: grid;
    gap: 16px;
}

.ai-chat-composer__head,
.ai-chat-thread__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.ai-chat-composer__head h2,
.ai-chat-thread__head h3 {
    margin: 0;
    font-family: "Anton", "Archivo Black", var(--font-ui);
    font-size: clamp(1.5rem, 4vw, 2.4rem);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #f5eddc;
}

.ai-chat-thread__head h3 {
    font-size: clamp(1.25rem, 3vw, 1.8rem);
}

.ai-panel-eyebrow {
    margin: 0 0 6px;
    font-family: "JetBrains Mono", var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(244, 234, 213, 0.52);
}

.ai-chat-composer__text,
.ai-panel-history__meta {
    margin: 0;
    color: rgba(232, 238, 245, 0.72);
    font-size: 0.9rem;
    line-height: 1.5;
}

.ai-panel-recovery {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.ai-worker-pill,
.ai-chat-status,
.ai-chat-provider {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-family: "JetBrains Mono", var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ai-worker-recover.button {
    min-height: 46px;
    padding: 0 18px;
    border: 1px solid rgba(208, 169, 95, 0.32);
    background:
        linear-gradient(180deg, rgba(208, 169, 95, 0.18), rgba(132, 76, 33, 0.14)),
        rgba(10, 12, 18, 0.76);
    color: #f5eddc;
    font-family: "JetBrains Mono", var(--font-mono);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.ai-worker-recover.button:hover:not(:disabled) {
    border-color: rgba(224, 185, 106, 0.54);
    background:
        linear-gradient(180deg, rgba(224, 185, 106, 0.22), rgba(150, 82, 32, 0.18)),
        rgba(10, 12, 18, 0.82);
}

.ai-worker-recover.button.is-busy {
    border-color: rgba(224, 185, 106, 0.34);
    color: rgba(245, 237, 220, 0.74);
}

.ai-chat-composer__status {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ai-worker-pill {
    padding: 9px 14px;
    border: 1px solid rgba(244, 234, 213, 0.14);
    background: rgba(9, 12, 18, 0.74);
    color: #cfd7e3;
}

.ai-worker-pill--online {
    color: #92d0a5;
    box-shadow: inset 0 0 0 1px rgba(64, 139, 81, 0.24);
}

.ai-worker-pill--offline {
    color: #e08a8a;
    box-shadow: inset 0 0 0 1px rgba(186, 86, 86, 0.22);
}

.ai-panel-live {
    min-height: 1.4em;
    color: rgba(232, 238, 245, 0.7);
    font-size: 0.86rem;
}

.ai-panel-live[hidden] {
    display: none;
}

.ai-panel-live[data-state="loading"] {
    color: #e0b96a;
}

.ai-panel-live[data-state="ok"] {
    color: #9fd7af;
}

.ai-panel-live[data-state="error"] {
    color: #ee8d8d;
}

.ai-chat-form {
    display: grid;
    gap: 14px;
}

.ai-provider-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ai-provider-switch__button {
    appearance: none;
    border: 2px solid #0d0a09;
    border-radius: 12px;
    padding: 10px 14px;
    background: #141925;
    color: rgba(244, 234, 213, 0.76);
    font-family: "JetBrains Mono", var(--font-mono);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    box-shadow: 3px 3px 0 #0d0a09;
    transition: transform 0.1s ease, box-shadow 0.1s ease, color 0.1s ease;
}

.ai-provider-switch__button:hover:not(:disabled),
.ai-provider-switch__button.is-active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 #0d0a09;
    color: #fff6e4;
}

.ai-provider-switch__button.is-active[data-provider="codex"] {
    background: linear-gradient(180deg, #20344d, #152335);
}

.ai-provider-switch__button.is-active[data-provider="claude"] {
    background: linear-gradient(180deg, #4f2c18, #361d12);
}

.ai-provider-switch__button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ai-panel-form__label {
    font-family: "JetBrains Mono", var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(244, 234, 213, 0.68);
}

.ai-chat-form__textarea {
    min-height: 168px;
    width: 100%;
    resize: vertical;
    border: 2px solid #0d0a09;
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(9, 12, 18, 0.96), rgba(16, 19, 28, 0.98));
    color: #f4ead5;
    padding: 16px 18px;
    font-family: "JetBrains Mono", var(--font-mono);
    font-size: 0.92rem;
    line-height: 1.6;
    box-shadow: inset 0 0 0 1px rgba(244, 234, 213, 0.04);
}

.ai-chat-form__textarea:focus {
    outline: none;
    border-color: #d2a84f;
    box-shadow:
        inset 0 0 0 1px rgba(244, 234, 213, 0.08),
        0 0 0 3px rgba(210, 168, 79, 0.18);
}

.ai-chat-form__textarea:disabled {
    opacity: 0.68;
}

.ai-chat-form__tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.ai-upload-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 2px solid #0d0a09;
    border-radius: 12px;
    padding: 10px 14px;
    background: #171d2a;
    color: #f4ead5;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 3px 3px 0 #0d0a09;
}

.ai-upload-button input {
    display: none;
}

.ai-upload-button.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ai-chat-form__hint {
    margin: 0;
    font-size: 0.84rem;
    color: rgba(232, 238, 245, 0.66);
}

.ai-selected-images {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}

.ai-selected-image {
    margin: 0;
    overflow: hidden;
    border: 2px solid rgba(244, 234, 213, 0.08);
    border-radius: 14px;
    background: rgba(11, 15, 22, 0.8);
}

.ai-selected-image img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.ai-selected-image figcaption {
    display: grid;
    gap: 3px;
    padding: 10px;
}

.ai-selected-image strong,
.ai-selected-image span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-selected-image strong {
    font-size: 0.78rem;
    color: #f4ead5;
}

.ai-selected-image span {
    font-size: 0.72rem;
    color: rgba(232, 238, 245, 0.62);
}

.ai-chat-form__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.ai-panel-refresh.button,
.ai-panel-submit.button--primary {
    min-width: 160px;
    justify-content: center;
}

.ai-chat-messages {
    display: grid;
    gap: 14px;
    max-height: 72vh;
    overflow-y: auto;
    padding-right: 4px;
}

.ai-chat-empty {
    border: 2px dashed rgba(244, 234, 213, 0.14);
    border-radius: 16px;
    padding: 22px;
    text-align: center;
    background: rgba(8, 11, 17, 0.48);
    color: rgba(232, 238, 245, 0.72);
}

.ai-chat-empty strong {
    display: block;
    margin-bottom: 6px;
    color: #f4ead5;
}

.ai-chat-turn {
    display: grid;
    gap: 10px;
}

.ai-chat-bubble {
    max-width: min(92%, 860px);
    padding: 14px 16px;
    border-radius: 18px;
    border: 2px solid rgba(13, 10, 9, 0.9);
    box-shadow: 3px 3px 0 rgba(13, 10, 9, 0.95);
}

.ai-chat-bubble--user {
    justify-self: end;
    background: linear-gradient(180deg, #2d3444, #242a37);
}

.ai-chat-bubble--assistant {
    justify-self: start;
    background: linear-gradient(180deg, #203040, #192733);
}

.ai-chat-bubble--assistant.ai-chat-bubble--failed {
    background: linear-gradient(180deg, #442a2e, #301d22);
}

.ai-chat-bubble--assistant.ai-chat-bubble--done {
    background: linear-gradient(180deg, #223346, #172635);
}

.ai-chat-bubble--system {
    justify-self: start;
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(180deg, #1a212d, #121823);
}

.ai-chat-bubble__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.ai-chat-bubble__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: rgba(232, 238, 245, 0.72);
    font-size: 0.8rem;
}

.ai-chat-bubble__meta strong {
    color: #f5eddc;
}

.ai-chat-provider {
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.06);
}

.ai-chat-provider--codex {
    color: #9fc8ff;
}

.ai-chat-provider--claude {
    color: #ffbd8c;
}

.ai-chat-status {
    padding: 7px 12px;
    background: rgba(0, 0, 0, 0.18);
}

.ai-chat-status--waiting {
    color: #ddb567;
}

.ai-chat-status--running {
    color: #88bbff;
}

.ai-chat-status--done {
    color: #9fd7af;
}

.ai-chat-status--failed {
    color: #f2a0a0;
}

.ai-chat-bubble__body {
    white-space: pre-wrap;
    word-break: break-word;
    color: #f4ead5;
    line-height: 1.65;
}

.ai-chat-bubble__body--response {
    font-family: "JetBrains Mono", var(--font-mono);
    font-size: 0.84rem;
    color: #dce7f3;
}

.ai-chat-attachments {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.ai-chat-attachment {
    display: grid;
    gap: 8px;
    padding: 8px;
    border-radius: 14px;
    text-decoration: none;
    background: rgba(8, 11, 17, 0.38);
    border: 1px solid rgba(244, 234, 213, 0.08);
    color: #f4ead5;
}

.ai-chat-attachment img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 10px;
}

.ai-chat-attachment span {
    font-size: 0.76rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-chat-loader {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 3px solid rgba(255, 255, 255, 0.12);
    border-top-color: #d8ad55;
    animation: ai-spin 0.8s linear infinite;
    flex-shrink: 0;
}

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

@media (max-width: 760px) {
    .ai-chat-page .ai-panel-card {
        padding: 16px;
        border-radius: 14px;
        box-shadow: 4px 4px 0 #0d0a09;
    }

    .ai-chat-composer__head h2,
    .ai-chat-thread__head h3 {
        font-size: 1.35rem;
    }

    .ai-chat-form__actions,
    .ai-chat-form__tools {
        align-items: stretch;
    }

    .ai-panel-refresh.button,
    .ai-panel-submit.button--primary,
    .ai-upload-button {
        width: 100%;
    }

    .ai-chat-bubble {
        max-width: 100%;
    }

    .ai-chat-messages {
        max-height: none;
    }
}