/* ==========================================================================
   AFTER THE FLOOD — design system
   Vanilla CSS. No build step. Mobile-first, 9:19.5 canonical viewport.
   ========================================================================== */

:root {
    /* base surfaces */
    --bg: #07090a;
    --bg-2: #0b0e10;
    --bg-3: #101416;
    --surface: rgba(15, 19, 20, .92);
    --surface-2: rgba(20, 24, 25, .88);
    --surface-solid: #0f1314;

    /* type */
    --text: #e8e8e3;
    --muted: #a3a7a3;
    --dim: #686d6a;

    /* semantic */
    --health: #d83b3b;
    --energy: #67c94b;
    --danger: #d74736;
    --warning: #d9a62e;
    --info: #3f91b9;

    /* rarity */
    --r-common: #8b918c;
    --r-uncommon: #67c94b;
    --r-rare: #3f91b9;
    --r-epic: #8b5cc7;
    --r-legendary: #d9a62e;
    --r-mythical: #d74736;

    /* lines */
    --line: rgba(255, 255, 255, .07);
    --line-2: rgba(255, 255, 255, .12);
    --line-strong: rgba(255, 255, 255, .2);

    --radius: 4px;
    --radius-lg: 8px;

    /* layout */
    --hud-h: 52px;
    --nav-h: 60px;
    --safe-t: env(safe-area-inset-top, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);

    /* motion */
    --t-fast: 110ms;
    --t-mid: 220ms;
    --t-slow: 320ms;
    --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;              /* definite height chain so min-height:100% is reliable on iOS */
    background: var(--bg);
    color: var(--text);
    touch-action: manipulation;      /* no double-tap zoom */
    -webkit-text-size-adjust: 100%;  /* iOS: don't rescale text */
}

html { background: var(--bg); }

body {
    font-family: "Oswald", "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overscroll-behavior: none;
    -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4 {
    margin: 0;
    font-weight: 600;
    letter-spacing: .02em;
}

button, input, select, textarea {
    font: inherit;
    color: inherit;
}

button { cursor: pointer; }

img { display: block; max-width: 100%; }

::-webkit-scrollbar { width: 0; height: 0; }
* { scrollbar-width: none; }

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

/* ------------------------------------------------------------------ shell */

#app {
    position: relative;
    width: 100%;
    min-height: 100%;          /* fallback: fills the viewport on every browser (incl. older iOS Safari) */
    min-height: 100dvh;        /* modern: tracks the dynamic viewport where supported */
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* Desktop: centre a phone-shaped viewport over atmospheric art. */
@media (min-width: 780px) {
    body {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100dvh;
        background:
            radial-gradient(ellipse at 50% 0%, rgba(63, 145, 185, .06), transparent 60%),
            var(--bg);
    }
    body::before {
        content: "";
        position: fixed;
        inset: 0;
        background: url("/assets/ui/login_bg.webp") center/cover no-repeat;
        opacity: .12;
        filter: blur(3px) saturate(.5);
        pointer-events: none;
    }
    #app {
        width: 430px;
        height: min(932px, 100dvh - 32px);
        min-height: 0;
        border: 1px solid var(--line-2);
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 40px 120px rgba(0, 0, 0, .8);
        z-index: 1;
    }
}

/* The game shell fills the app frame once auth completes. */
#game {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
#game.hidden { display: none !important; }

/* Grain + vignette shared by all panels and scenes. */
.grain::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
}

/* -------------------------------------------------------------- top HUD */

.hud {
    position: relative;
    z-index: 30;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    height: calc(var(--hud-h) + var(--safe-t));
    padding: var(--safe-t) 10px 0;
    background: linear-gradient(to bottom, #0b0e10, rgba(11, 14, 16, .96));
    border-bottom: 1px solid var(--line);
}

.hud-brand {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--danger);
    line-height: 1;
    margin-right: 2px;
    white-space: nowrap;
}
.hud-brand span {
    display: block;
    font-size: 8px;
    letter-spacing: .22em;
    color: var(--dim);
    font-weight: 400;
    margin-top: 2px;
}

.resource-counter {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    min-width: 0;
}
.resource-counter .game-icon { flex: 0 0 auto; }
.resource-counter b { font-weight: 600; }
.resource-counter.energy .game-icon { color: var(--energy); }
.resource-counter.coins  .game-icon { color: var(--warning); }
.resource-counter.weight .game-icon { color: var(--muted); }
.resource-counter.warn { border-color: rgba(215, 71, 54, .5); }

.hud-spacer { flex: 1 1 auto; }

/* --------------------------------------------------------- screen stack */

#screens {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.screen {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* Kill the Android stretch / iOS rubber-band overscroll so pulling past the
       last item doesn't reveal an empty gap below the content. */
    overscroll-behavior: none;
    padding-bottom: 16px;
}
.screen.active {
    display: flex;
    animation: screen-in var(--t-mid) var(--ease);
}
@keyframes screen-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* Full-bleed screens hide the shell chrome (combat, map, case, profile). */
.screen.fullbleed { padding-bottom: 0; }
#game.chromeless > .hud,
#game.chromeless > .bottom-nav { display: none; }

.screen-header {
    position: sticky;
    top: 0;
    z-index: 20;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    padding: 0 10px;
    background: rgba(7, 9, 10, .92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
}
.screen-header h2 {
    flex: 1 1 auto;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.screen-header .hdr-meta {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--muted);
    letter-spacing: .06em;
}

.icon-btn {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin: 0 -4px;
    background: transparent;
    border: 0;
    color: var(--muted);
    transition: color var(--t-fast);
}
.icon-btn:hover { color: var(--text); }

.screen-body {
    flex: 1 1 auto;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* -------------------------------------------------------- bottom nav */

.bottom-nav {
    position: relative;
    z-index: 30;
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
    height: calc(var(--nav-h) + var(--safe-b));
    padding-bottom: var(--safe-b);
    background: linear-gradient(to top, #0b0e10, rgba(11, 14, 16, .97));
    border-top: 1px solid var(--line);
}

.nav-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 44px;
    background: none;
    border: 0;
    color: var(--dim);
    font-size: 10px;
    letter-spacing: .04em;
    position: relative;
    transition: color var(--t-fast);
}
.nav-item .game-icon { transition: transform var(--t-fast); }
.nav-item.active { color: var(--danger); }
.nav-item.active .game-icon { transform: translateY(-1px); }
.nav-item.active::before {
    content: "";
    position: absolute;
    top: 0;
    width: 22px;
    height: 2px;
    background: var(--danger);
    box-shadow: 0 0 8px rgba(215, 71, 54, .7);
}
.nav-item:disabled { opacity: .35; }

.nav-badge {
    position: absolute;
    top: 6px;
    right: calc(50% - 18px);
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    display: grid;
    place-items: center;
    background: var(--danger);
    color: #fff;
    border-radius: 8px;
    font-size: 9px;
    font-weight: 700;
}

/* ------------------------------------------------------------- icons */

.game-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    background-color: currentColor;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}
.game-icon.i-14 { width: 14px; height: 14px; }
.game-icon.i-16 { width: 16px; height: 16px; }
.game-icon.i-24 { width: 24px; height: 24px; }
.game-icon.i-28 { width: 28px; height: 28px; }
.game-icon.i-32 { width: 32px; height: 32px; }

/* ------------------------------------------------------------ panels */

.game-panel {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}
.game-panel.pad { padding: 12px; }
.game-panel.raised {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .028), transparent 40%),
        var(--surface);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.panel-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dim);
    margin-bottom: 9px;
}
.panel-title .game-icon { color: var(--dim); }
.panel-title .spacer { flex: 1 1 auto; }

/* Key/value rows used by profile, item details, clan overview. */
.kv {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
}
.kv:last-child { border-bottom: 0; }
.kv dt, .kv .k { color: var(--muted); }
.kv dd, .kv .v {
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}
.kv .v.good { color: var(--energy); }
.kv .v.bad { color: var(--danger); }
.kv .v.warn { color: var(--warning); }

/* ------------------------------------------------------------ buttons */

.game-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 46px;
    padding: 11px 14px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(0, 0, 0, .18)),
        var(--surface-2);
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    transition: transform var(--t-fast), border-color var(--t-fast),
                background-color var(--t-fast), opacity var(--t-fast);
}
.game-button:active { transform: translateY(1px) scale(.995); }
.game-button:disabled {
    opacity: .42;
    pointer-events: none;
}
.game-button .game-icon { color: inherit; }

.game-button-primary {
    background:
        linear-gradient(180deg, rgba(217, 166, 46, .2), rgba(217, 166, 46, .06)),
        var(--surface-2);
    border-color: rgba(217, 166, 46, .5);
    color: #f2d795;
}
.game-button-primary:hover { border-color: rgba(217, 166, 46, .75); }

.game-button-danger {
    background:
        linear-gradient(180deg, rgba(215, 71, 54, .22), rgba(215, 71, 54, .06)),
        var(--surface-2);
    border-color: rgba(215, 71, 54, .5);
    color: #f0a79c;
}

.game-button-success {
    background:
        linear-gradient(180deg, rgba(103, 201, 75, .18), rgba(103, 201, 75, .05)),
        var(--surface-2);
    border-color: rgba(103, 201, 75, .45);
    color: #b3e5a0;
}

.game-button-ghost {
    background: transparent;
    border-color: var(--line);
    color: var(--muted);
    font-weight: 500;
}

.game-button.sm {
    min-height: 36px;
    padding: 8px 11px;
    font-size: 11px;
}
.game-button.wide-row { flex: 1 1 0; width: auto; }

.btn-cost {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 600;
    color: var(--energy);
    letter-spacing: 0;
}
.btn-cost .game-icon { color: var(--energy); }
.btn-cost.coins { color: var(--warning); }
.btn-cost.coins .game-icon { color: var(--warning); }

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

/* Big textured menu entries on the home screen. */
.menu-button {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 13px;
    background:
        linear-gradient(90deg, rgba(215, 71, 54, .07), transparent 55%),
        var(--surface);
    border: 1px solid var(--line);
    border-left: 2px solid rgba(215, 71, 54, .5);
    border-radius: var(--radius);
    text-align: left;
    color: var(--text);
    overflow: hidden;
    transition: transform var(--t-fast), border-color var(--t-fast),
                background-color var(--t-fast);
}
.menu-button:active { transform: translateY(1px); }
.menu-button:hover { border-left-color: var(--danger); }
.menu-button .mb-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    background: rgba(215, 71, 54, .09);
    border: 1px solid rgba(215, 71, 54, .25);
    border-radius: var(--radius);
    color: var(--danger);
}
.menu-button .mb-text { flex: 1 1 auto; min-width: 0; }
.menu-button .mb-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1.2;
}
.menu-button .mb-sub {
    font-size: 11px;
    color: var(--dim);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.menu-button .mb-flag {
    flex: 0 0 auto;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    padding: 2px 5px;
    border-radius: 2px;
    background: rgba(217, 166, 46, .15);
    border: 1px solid rgba(217, 166, 46, .4);
    color: var(--warning);
}

/* --------------------------------------------------------------- bars */

.stat-bar {
    position: relative;
    height: 5px;
    background: rgba(0, 0, 0, .55);
    border-radius: 3px;
    overflow: hidden;
}
.stat-bar > i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 3px;
    background: var(--muted);
    transition: width var(--t-slow) var(--ease);
}
.stat-bar.hp > i {
    background: linear-gradient(90deg, #8f2222, var(--health));
}
.stat-bar.energy > i {
    background: linear-gradient(90deg, #3f8f2c, var(--energy));
}
.stat-bar.xp > i {
    background: linear-gradient(90deg, #2f6f8f, var(--info));
}
.stat-bar.weight > i {
    background: linear-gradient(90deg, #6d5a1f, var(--warning));
}
.stat-bar.tall { height: 8px; }

.bar-row { display: flex; flex-direction: column; gap: 4px; }
.bar-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.bar-label .game-icon { margin-right: 4px; vertical-align: -3px; }
.bar-label b { color: var(--text); font-weight: 600; }

/* ------------------------------------------------------------ chips */

.chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 7px;
    background: rgba(0, 0, 0, .45);
    border: 1px solid var(--line);
    border-radius: 2px;
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
}
.chip.danger { color: #eba79e; border-color: rgba(215, 71, 54, .4); background: rgba(215, 71, 54, .1); }
.chip.warn { color: #e8c675; border-color: rgba(217, 166, 46, .4); background: rgba(217, 166, 46, .1); }
.chip.good { color: #a9dd97; border-color: rgba(103, 201, 75, .35); background: rgba(103, 201, 75, .09); }
.chip.info { color: #94c6dd; border-color: rgba(63, 145, 185, .4); background: rgba(63, 145, 185, .1); }

.chip-row { display: flex; flex-wrap: wrap; gap: 5px; }

/* --------------------------------------------------------- home scene */

/* Atmospheric location scene with the survivor standing in it. */
.world-scene {
    position: relative;
    flex: 0 0 auto;
    height: 210px;
    overflow: hidden;
    background: var(--bg-2);
    border-bottom: 1px solid var(--line);
}
.world-scene .scene-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 55%;
}
/* Sky-to-ground fade so UI text stays readable over any art. */
.world-scene::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 80% at 50% 25%, transparent, rgba(7, 9, 10, .5) 70%),
        linear-gradient(to bottom, rgba(7, 9, 10, .55) 0%, transparent 30%,
                        rgba(7, 9, 10, .35) 62%, var(--bg) 100%);
    pointer-events: none;
}
.world-scene .scene-hero {
    position: absolute;
    right: 12px;
    bottom: -2px;
    height: 178px;
    width: auto;
    z-index: 2;
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .85)) brightness(.88) contrast(1.05);
    pointer-events: none;
    animation: hero-breathe 7s ease-in-out infinite;
}
@keyframes hero-breathe {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}
.scene-meta {
    position: absolute;
    left: 12px;
    bottom: 10px;
    z-index: 3;
    max-width: 62%;
}
.scene-loc {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    line-height: 1.1;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .95);
}
.scene-sub {
    font-size: 11px;
    color: var(--muted);
    margin-top: 3px;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .9);
}
.scene-badges {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    z-index: 3;
    display: flex;
    align-items: flex-start;
    gap: 5px;
    flex-wrap: wrap;
}

/* Weather / condition overlays driven by location state. */
.fx { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.fx-rain {
    background-image:
        repeating-linear-gradient(76deg, transparent 0 7px,
            rgba(190, 214, 224, .16) 7px 8px, transparent 8px 15px);
    background-size: 100% 220px;
    animation: rain 620ms linear infinite;
    opacity: .5;
}
@keyframes rain { to { background-position: -70px 220px; } }

.fx-fog {
    background:
        radial-gradient(70% 45% at 25% 78%, rgba(150, 170, 175, .16), transparent 70%),
        radial-gradient(60% 40% at 78% 85%, rgba(150, 170, 175, .12), transparent 70%);
    animation: fog 15s ease-in-out infinite alternate;
}
@keyframes fog {
    from { transform: translateX(-4%); opacity: .75; }
    to   { transform: translateX(4%); opacity: 1; }
}

.fx-flicker { background: rgba(217, 166, 46, .05); animation: flicker 4.5s steps(1) infinite; }
@keyframes flicker {
    0%, 42%, 47%, 61%, 100% { opacity: 0; }
    44%, 58% { opacity: 1; }
    45% { opacity: .3; }
}

.fx-night { background: rgba(7, 12, 22, .42); }
.fx-dark  { background: rgba(4, 6, 8, .58); }
.fx-evening { background: linear-gradient(to top, rgba(60, 30, 12, .22), rgba(10, 14, 30, .3)); }
.fx-morning { background: linear-gradient(to top, rgba(120, 110, 80, .1), rgba(90, 110, 130, .12)); }

/* Standing water shimmer at the bottom of a scene. */
.fx-water {
    top: auto;
    height: 34%;
    background: linear-gradient(to bottom, transparent, rgba(30, 52, 58, .3));
    backdrop-filter: blur(.6px);
}

/* -------------------------------------------------------- player card */

.player-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
}
.player-portrait {
    position: relative;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-3);
}
.player-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 12%;
}
.player-id { flex: 1 1 auto; min-width: 0; }
.player-name {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .03em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.player-sub {
    font-size: 10px;
    color: var(--dim);
    letter-spacing: .06em;
    font-variant-numeric: tabular-nums;
}
.level-pill {
    flex: 0 0 auto;
    text-align: center;
    padding: 4px 9px;
    background: rgba(217, 166, 46, .1);
    border: 1px solid rgba(217, 166, 46, .35);
    border-radius: var(--radius);
}
.level-pill b {
    display: block;
    font-size: 15px;
    line-height: 1;
    color: var(--warning);
}
.level-pill span {
    font-size: 8px;
    letter-spacing: .14em;
    color: var(--dim);
    text-transform: uppercase;
}

/* 4-up stat readout under the bars. */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--line);
}
.stat-cell {
    padding: 9px 4px;
    text-align: center;
    border-right: 1px solid var(--line);
}
.stat-cell:last-child { border-right: 0; }
.stat-cell .sc-label {
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--dim);
}
.stat-cell .sc-value {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 16px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}
.stat-cell.coins .sc-value { color: var(--warning); }

/* ------------------------------------------------------- rarity system */

.rarity-common    { --rc: var(--r-common); }
.rarity-uncommon  { --rc: var(--r-uncommon); }
.rarity-rare      { --rc: var(--r-rare); }
.rarity-epic      { --rc: var(--r-epic); }
.rarity-legendary { --rc: var(--r-legendary); }
.rarity-mythical  { --rc: var(--r-mythical); }

.rarity-text { color: var(--rc, var(--muted)); }

/* --------------------------------------------------------- item grid */

.inventory-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
}
@media (min-width: 520px) { .inventory-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 780px) { .inventory-grid { grid-template-columns: repeat(3, 1fr); } }

.item-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    text-align: center;
    color: var(--text);
    transition: transform var(--t-fast), border-color var(--t-fast);
}
.item-card:active { transform: scale(.975); }
.item-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-top: 2px solid var(--rc, transparent);
    pointer-events: none;
    opacity: .85;
}
.item-card.rarity-legendary,
.item-card.rarity-mythical { border-color: color-mix(in srgb, var(--rc) 40%, transparent); }
.item-card.rarity-legendary { box-shadow: inset 0 0 22px rgba(217, 166, 46, .1); }

.item-thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    background:
        radial-gradient(70% 60% at 50% 45%,
            color-mix(in srgb, var(--rc, #555) 14%, transparent), transparent 72%),
        var(--bg-3);
    display: grid;
    place-items: center;
    overflow: hidden;
}
.item-thumb img {
    width: 82%;
    height: 82%;
    object-fit: contain;
    filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .7));
}
.item-qty {
    position: absolute;
    top: 3px;
    right: 4px;
    min-width: 17px;
    padding: 1px 4px;
    background: rgba(0, 0, 0, .8);
    border: 1px solid var(--line-2);
    border-radius: 2px;
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
/* Equipped state highlights the whole card (this class is applied to the
   .item-card itself, not a badge — the "надето" label lives on the thumb). */
.item-equipped {
    border-color: rgba(103, 201, 75, .55);
    box-shadow: inset 0 0 0 1px rgba(103, 201, 75, .35);
}
.item-thumb .slot-tag {
    position: absolute;
    top: 3px;
    left: 3px;
    padding: 1px 5px;
    font-size: 8.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: rgba(103, 201, 75, .85);
    color: #0c0f11;
    border-radius: 3px;
    font-weight: 700;
}
.item-meta { padding: 5px 4px 7px; }
.item-name {
    font-size: 10.5px;
    line-height: 1.25;
    height: 2.5em;
    overflow: hidden;
    color: var(--text);
}
.item-weight {
    font-size: 9px;
    color: var(--dim);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

.slot-empty {
    aspect-ratio: 1 / 1;
    background: rgba(255, 255, 255, .012);
    border: 1px dashed var(--line);
    border-radius: var(--radius);
}

/* --------------------------------------------------- character profile */

/* Layered equipment canvas. All layers share one coordinate space. */
.character {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 3;
    max-height: 46vh;
    margin: 0 auto;
}
.character > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
}
.character-base      { z-index: 1; }
.character-clothing  { z-index: 2; }
.character-armor     { z-index: 3; }
.character-boots     { z-index: 4; }
.character-backpack  { z-index: 5; }
.character-headgear  { z-index: 6; }
.character-mask      { z-index: 7; }
.character-weapon    { z-index: 8; }

.profile-stage {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 6px;
    padding: 10px;
    background:
        radial-gradient(75% 55% at 50% 42%, rgba(63, 145, 185, .07), transparent 70%),
        linear-gradient(to bottom, var(--bg-3), var(--bg));
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}
.profile-stage .stage-art {
    position: absolute;
    inset: 0;
    background: url("/assets/locations/zaozerny.webp") center/cover no-repeat;
    opacity: .16;
    filter: saturate(.4) blur(1px);
}
.slot-col {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
    flex: 0 0 auto;
}

.equip-slot {
    position: relative;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    background: var(--surface-2);
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    color: var(--dim);
    padding: 0;
    transition: border-color var(--t-fast), transform var(--t-fast);
}
.equip-slot:active { transform: scale(.95); }
.equip-slot.filled {
    border-color: color-mix(in srgb, var(--rc, var(--line-strong)) 55%, transparent);
    background:
        radial-gradient(70% 70% at 50% 45%,
            color-mix(in srgb, var(--rc, #666) 16%, transparent), transparent),
        var(--surface-2);
}
.equip-slot img {
    width: 80%;
    height: 80%;
    object-fit: contain;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .8));
}
.equip-slot .slot-tag {
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    font-size: 7px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--dim);
    background: rgba(0, 0, 0, .7);
    line-height: 1.5;
}
.equip-slot .dur-pip {
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    height: 2px;
    background: rgba(0, 0, 0, .6);
    border-radius: 2px;
    overflow: hidden;
}
.equip-slot .dur-pip i {
    display: block;
    height: 100%;
    background: var(--energy);
}
.equip-slot .dur-pip i.low { background: var(--warning); }
.equip-slot .dur-pip i.crit { background: var(--danger); }

.character-wrap { flex: 1 1 auto; position: relative; z-index: 2; min-width: 0; }

/* ---------------------------------------------------------- explore */

.location-plate {
    position: relative;
    height: 180px;
    overflow: hidden;
    border-radius: var(--radius);
    border: 1px solid var(--line);
}
.location-plate img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.location-plate::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(7, 9, 10, .95) 4%, transparent 62%);
}
.location-plate .lp-text {
    position: absolute;
    left: 11px;
    right: 11px;
    bottom: 9px;
    z-index: 2;
}
.location-plate .lp-name {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    line-height: 1.1;
}
.location-plate .lp-sub {
    font-size: 11.5px;
    color: var(--muted);
    margin-top: 3px;
    line-height: 1.35;
}
.location-plate .lp-badges {
    position: absolute;
    top: 9px;
    left: 9px;
    right: 9px;
    z-index: 2;
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.danger-skulls { display: inline-flex; gap: 2px; vertical-align: -2px; }
.danger-skulls .game-icon { color: var(--danger); width: 12px; height: 12px; }
.danger-skulls .game-icon.off { color: var(--line-2); }

/* Condition readout: time of day / water / light / noise. */
.condition-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--line);
}
.condition-cell {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 10px;
    background: var(--surface-solid);
}
.condition-cell .game-icon { color: var(--dim); }
.condition-cell .cc-text { min-width: 0; }
.condition-cell .cc-label {
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--dim);
}
.condition-cell .cc-value {
    font-size: 12px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* District list rows on explore + map. */
.district-row {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 10px 11px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
    text-align: left;
    transition: border-color var(--t-fast), transform var(--t-fast);
}
.district-row:active { transform: translateY(1px); }
.district-row.current {
    border-color: rgba(217, 166, 46, .5);
    background: linear-gradient(90deg, rgba(217, 166, 46, .09), transparent 60%), var(--surface);
}
.district-row.locked { opacity: .5; }
.district-row .dr-text { flex: 1 1 auto; min-width: 0; }
.district-row .dr-name {
    font-size: 13px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.district-row .dr-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: var(--dim);
    margin-top: 2px;
}

/* ----------------------------------------------------------- events */

/* Cinematic event art + narrative + choices. */
.event-art {
    position: relative;
    height: 165px;
    overflow: hidden;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    flex: 0 0 auto;
}
.event-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.event-art::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(7, 9, 10, .92), transparent 55%);
}
.event-art .ea-title {
    position: absolute;
    left: 11px;
    right: 11px;
    bottom: 9px;
    z-index: 2;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    line-height: 1.15;
}

.event-text {
    font-size: 13.5px;
    line-height: 1.6;
    color: #d5d7d2;
    white-space: pre-line;
}

.choice-list { display: flex; flex-direction: column; gap: 7px; }

.choice {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .022), transparent),
        var(--surface-2);
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    color: var(--text);
    text-align: left;
    transition: transform var(--t-fast), border-color var(--t-fast);
}
.choice:active { transform: translateY(1px); }
.choice:hover { border-color: var(--line-strong); }
.choice:disabled { opacity: .4; pointer-events: none; }
.choice .ch-body { flex: 1 1 auto; min-width: 0; }
.choice .ch-label { font-size: 13px; line-height: 1.3; }
.choice .ch-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}
.choice .ch-cost {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    font-weight: 600;
    color: var(--energy);
    font-variant-numeric: tabular-nums;
}
.choice .ch-cost .game-icon { color: var(--energy); }
.choice.leave { border-style: dashed; }
.choice.leave .ch-label { color: var(--muted); }

/* ----------------------------------------------------------- combat */

.combat-screen {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--bg);
}
.combat-arena {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 4px;
}
.combat-arena .arena-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.6) saturate(.75);
}
.combat-arena::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(80% 60% at 50% 55%, transparent, rgba(7, 9, 10, .78)),
        linear-gradient(to bottom, rgba(7, 9, 10, .6), transparent 35%, rgba(7, 9, 10, .85));
}
.fighter {
    position: relative;
    z-index: 2;
    width: 54%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    transition: transform var(--t-mid) var(--ease);
}
.fighter img {
    max-height: 96%;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 12px 26px rgba(0, 0, 0, .9));
    animation: fighter-idle 3.4s ease-in-out infinite;
}
.fighter.enemy img { transform: scaleX(-1); animation: fighter-idle-foe 3.8s ease-in-out infinite; }
@keyframes fighter-idle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
@keyframes fighter-idle-foe {
    0%, 100% { transform: scaleX(-1) translateY(0); }
    50% { transform: scaleX(-1) translateY(-5px); }
}
/* glowing contact shadow under each fighter */
.fighter::after {
    content: "";
    position: absolute;
    bottom: 6px;
    width: 62%;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(0,0,0,.75), transparent);
    z-index: -1;
}
.fighter.enemy::after { background: radial-gradient(closest-side, rgba(180,40,32,.35), transparent); }
.fighter.hit { animation: hit-shake 260ms var(--ease); }
@keyframes hit-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-7px) rotate(-1.2deg); }
    60% { transform: translateX(5px) rotate(.8deg); }
}
.fighter.striking img { animation: none; }
.fighter.striking { transform: translateY(-7px) scale(1.05); }

/* central VS emblem fills the empty sky between fighters */
.arena-vs {
    position: absolute;
    top: 16%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    pointer-events: none;
}
.arena-vs .vs-mark {
    font: 800 30px/1 'Oswald', sans-serif;
    letter-spacing: .04em;
    color: #e7e2d4;
    text-shadow: 0 0 18px rgba(200,40,32,.7), 0 3px 8px #000;
    animation: vs-pulse 2.4s ease-in-out infinite;
}
.arena-vs .vs-round {
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
    background: rgba(0,0,0,.55);
    border: 1px solid var(--line-2);
    padding: 2px 10px;
    border-radius: 999px;
}
@keyframes vs-pulse {
    0%, 100% { transform: translateX(-50%) scale(1); opacity: .92; }
    50% { transform: translateX(-50%) scale(1.08); opacity: 1; }
}
/* Fade the idle VS emblem out while a combat shout owns the center. */
.combat-arena.has-callout .arena-vs { opacity: 0; transition: opacity .12s; }

/* ---- Mortal-Kombat-style combat shouts -------------------------------- */
.arena-callout {
    position: absolute;
    top: 15%;
    left: 50%;
    z-index: 6;
    pointer-events: none;
    white-space: nowrap;
    font: 800 40px/1 'Oswald', sans-serif;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #f2ead2;
    text-shadow: 0 0 22px rgba(215,71,54,.85), 0 4px 10px #000, 0 0 3px #000;
    transform: translate(-50%, -50%) scale(.4) rotate(-6deg);
    animation: callout-in .22s cubic-bezier(.2,1.4,.4,1) forwards;
}
.arena-callout.out { animation: callout-out .3s ease-in forwards; }

/* crit — hot gold/red, biggest punch */
.arena-callout.crit {
    color: #ffd76a;
    font-size: 46px;
    text-shadow: 0 0 26px rgba(255,150,40,.95), 0 0 14px rgba(215,71,54,.9), 0 4px 10px #000;
}
/* heavy hit — ember orange */
.arena-callout.heavy { color: #ffb066; font-size: 36px; }
/* block — cool steel blue */
.arena-callout.block {
    color: #bfe0f0; font-size: 34px;
    text-shadow: 0 0 20px rgba(63,145,185,.8), 0 4px 10px #000;
}
/* heal — green */
.arena-callout.heal {
    color: #b0ec74; font-size: 34px;
    text-shadow: 0 0 20px rgba(103,201,75,.8), 0 4px 10px #000;
}
/* K.O. — huge blood-red finisher */
.arena-callout.ko {
    color: #ffdf7a; font-size: 58px; letter-spacing: .06em;
    text-shadow: 0 0 34px rgba(255,60,40,1), 0 0 16px rgba(215,71,54,1), 0 5px 12px #000;
    animation: callout-in .26s cubic-bezier(.2,1.5,.35,1) forwards, ko-throb .5s ease-in-out .26s 2;
}
.arena-callout.ko.lose { color: #ff8a7a; }

@keyframes callout-in {
    0%   { opacity: 0; transform: translate(-50%,-50%) scale(.4) rotate(-6deg); }
    60%  { opacity: 1; transform: translate(-50%,-50%) scale(1.15) rotate(-2deg); }
    100% { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(-2deg); }
}
@keyframes callout-out {
    0%   { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(-2deg); }
    100% { opacity: 0; transform: translate(-50%,-58%) scale(1.25) rotate(-2deg); }
}
@keyframes ko-throb {
    0%, 100% { transform: translate(-50%,-50%) scale(1) rotate(-2deg); }
    50%      { transform: translate(-50%,-50%) scale(1.12) rotate(-2deg); }
}
@media (prefers-reduced-motion: reduce) {
    .arena-callout { animation: none; opacity: 1; transform: translate(-50%,-50%) scale(1); }
}

.combat-hud {
    position: relative;
    z-index: 3;
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    padding: 9px 10px;
    background: linear-gradient(to bottom, rgba(7, 9, 10, .96), rgba(7, 9, 10, .78));
    border-bottom: 1px solid var(--line);
}
.fighter-plate { flex: 1 1 0; min-width: 0; }
.fighter-plate .fp-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 4px;
}
.fighter-plate .fp-name {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fighter-plate .fp-hp {
    font-size: 11px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
}
.fighter-plate.right { text-align: right; }
.fighter-plate.right .fp-top { flex-direction: row-reverse; }

.combat-log {
    position: relative;
    z-index: 3;
    flex: 0 0 auto;
    height: 52px;
    overflow-y: auto;
    padding: 6px 12px;
    background: rgba(7, 9, 10, .8);
    border-top: 1px solid var(--line);
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--muted);
}
.combat-log p { margin: 0 0 2px; }
.combat-log .you { color: #c8d8bd; }
.combat-log .foe { color: #e0b0a8; }

.combat-actions {
    position: relative;
    z-index: 3;
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    padding: 9px 10px calc(9px + var(--safe-b));
    background: var(--bg-2);
    border-top: 1px solid var(--line);
}
.combat-actions .game-button { min-height: 52px; flex-direction: column; gap: 2px; }
.combat-actions .ca-sub {
    font-size: 9.5px;
    font-weight: 400;
    letter-spacing: .04em;
    text-transform: none;
    color: var(--dim);
}
.combat-actions .game-button-danger .ca-sub { color: rgba(240, 167, 156, .75); }
.combat-actions .game-button-success .ca-sub { color: rgba(179, 229, 160, .75); }

/* Floating damage numbers. */
.dmg-float {
    position: absolute;
    z-index: 6;
    font-size: 26px;
    font-weight: 700;
    color: var(--health);
    text-shadow: 0 2px 10px rgba(0, 0, 0, .95);
    pointer-events: none;
    animation: dmg-rise 900ms var(--ease) forwards;
}
.dmg-float.heal { color: var(--energy); }
.dmg-float.block { color: var(--info); font-size: 19px; }
@keyframes dmg-rise {
    0%   { opacity: 0; transform: translate(-50%, 6px) scale(.85); }
    18%  { opacity: 1; transform: translate(-50%, -6px) scale(1.1); }
    100% { opacity: 0; transform: translate(-50%, -46px) scale(1); }
}

.screen-flash {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: rgba(215, 71, 54, .2);
    pointer-events: none;
    animation: flash-out 260ms ease-out forwards;
}
@keyframes flash-out { from { opacity: 1; } to { opacity: 0; } }

/* ------------------------------------------------------- loot result */

.loot-line {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
    animation: loot-in var(--t-slow) var(--ease) backwards;
}
.loot-line:last-child { border-bottom: 0; }
@keyframes loot-in {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: none; }
}
.loot-line .ll-thumb {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    background:
        radial-gradient(70% 70% at 50% 45%,
            color-mix(in srgb, var(--rc, #555) 18%, transparent), transparent),
        var(--bg-3);
    border: 1px solid color-mix(in srgb, var(--rc, var(--line)) 45%, transparent);
    border-radius: var(--radius);
}
.loot-line .ll-thumb img { width: 80%; height: 80%; object-fit: contain; }
.loot-line .ll-text { flex: 1 1 auto; min-width: 0; }
.loot-line .ll-name { font-size: 13px; }
.loot-line .ll-sub { font-size: 10px; color: var(--dim); }
.loot-line .ll-qty {
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.result-hero {
    text-align: center;
    padding: 18px 12px 14px;
}
.result-hero .rh-kicker {
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--dim);
}
.result-hero .rh-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-top: 4px;
}
.result-hero .rh-title.win  { color: var(--energy); }
.result-hero .rh-title.lose { color: var(--danger); }
.result-hero .rh-xp {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    padding: 4px 11px;
    background: rgba(63, 145, 185, .1);
    border: 1px solid rgba(63, 145, 185, .35);
    border-radius: 2px;
    font-size: 13px;
    font-weight: 600;
    color: #94c6dd;
}

/* ------------------------------------------------------------- case */

/* Case card text block — centred title, description, loot label. */
.case-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 2px 16px 16px;
    text-align: center;
}
.case-title {
    position: relative;
    font: 700 20px/1.15 'Oswald', sans-serif;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text);
    padding-bottom: 8px;
}
.case-title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 46px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--warning), transparent);
}
.case-desc {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--muted);
    max-width: 330px;
}
.case-loot-label {
    margin-top: 2px;
    font-size: 9.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dim);
}
.case-chips { justify-content: center; }
.case-body .game-button { width: 100%; margin-top: 8px; }

.case-stage {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 16px 12px;
    overflow: hidden;
}
.case-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 45% at 50% 42%, rgba(217, 166, 46, .1), transparent 72%);
}
.case-art {
    position: relative;
    width: min(82%, 260px);
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
}
/* The case webp ships with a baked black background — `lighten` drops it onto
   the dark panel so only the crate shows, no rasteriser needed. */
.case-art img {
    width: 100%; height: 100%; object-fit: contain;
}
.case-art.shaking { animation: case-shake 520ms ease-in-out; }
@keyframes case-shake {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(-3deg) scale(1.02); }
    45% { transform: rotate(3deg) scale(1.03); }
    70% { transform: rotate(-2deg) scale(1.02); }
}

/* Horizontal spinning reel with a fixed centre marker. */
.reel-window {
    position: relative;
    width: 100%;
    height: 96px;
    overflow: hidden;
    border-top: 1px solid var(--line-2);
    border-bottom: 1px solid var(--line-2);
    background: rgba(0, 0, 0, .45);
}
.reel-window::before,
.reel-window::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 58px;
    z-index: 3;
    pointer-events: none;
}
.reel-window::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
.reel-window::after { right: 0; background: linear-gradient(to left, var(--bg), transparent); }

.reel-track {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    will-change: transform;
}
.reel-cell {
    width: 84px;
    height: 84px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    background:
        radial-gradient(70% 70% at 50% 45%,
            color-mix(in srgb, var(--rc, #555) 20%, transparent), transparent),
        var(--surface-2);
    border: 1px solid color-mix(in srgb, var(--rc, var(--line)) 50%, transparent);
    border-radius: var(--radius);
}
.reel-cell img { width: 76%; height: 76%; object-fit: contain; }

.reel-marker {
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    background: var(--warning);
    box-shadow: 0 0 12px rgba(217, 166, 46, .9);
    z-index: 4;
}

/* Reward reveal. */
.prize {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    animation: prize-in 420ms var(--ease);
}
@keyframes prize-in {
    from { opacity: 0; transform: scale(.9); }
    to   { opacity: 1; transform: none; }
}
.prize-art {
    position: relative;
    width: 152px;
    height: 152px;
    display: grid;
    place-items: center;
    background:
        radial-gradient(60% 60% at 50% 50%,
            color-mix(in srgb, var(--rc, #888) 22%, transparent), transparent 72%);
    border: 1px solid color-mix(in srgb, var(--rc, var(--line)) 60%, transparent);
    border-radius: var(--radius);
}
.prize-art::after {
    content: "";
    position: absolute;
    inset: -1px;
    border: 1px solid var(--rc, transparent);
    border-radius: var(--radius);
    opacity: .35;
    animation: prize-pulse 2.4s ease-in-out infinite;
}
@keyframes prize-pulse {
    0%, 100% { opacity: .18; transform: scale(1); }
    50%      { opacity: .5; transform: scale(1.025); }
}
.prize-art img {
    width: 78%;
    height: 78%;
    object-fit: contain;
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .8));
}
.prize-congrats {
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--warning);
}
.prize-name {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.15;
}

/* ------------------------------------------------------- tactical map */

.map-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 340px;
    overflow: hidden;
    background: var(--bg-2);
}
.map-stage .map-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .55;
    filter: saturate(.55) contrast(1.05);
}
.map-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(75% 65% at 50% 45%, transparent, rgba(7, 9, 10, .75));
    pointer-events: none;
}
.map-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.map-link {
    stroke: rgba(163, 167, 163, .28);
    stroke-width: 1.4;
    stroke-dasharray: 3 3;
    fill: none;
}
.map-link.active {
    stroke: rgba(217, 166, 46, .65);
    stroke-dasharray: none;
    stroke-width: 1.8;
}

/* Location cards on the travel map — a vertical list of image tiles. */
.map-node {
    position: relative;
    display: block;
    width: 100%;
    min-height: 96px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface-2);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: transform var(--t-fast), border-color var(--t-fast);
}
.map-node:active { transform: scale(.985); }
.map-node .mn-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .55;
}
.map-node::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(9, 11, 13, .92) 0%, rgba(9, 11, 13, .62) 55%, rgba(9, 11, 13, .35) 100%);
    pointer-events: none;
}
.map-node .mn-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 96px;
    padding: 12px 13px;
}
.map-node .mn-text { min-width: 0; }
.map-node .mn-name {
    font: 600 16px/1.15 'Oswald', sans-serif;
    letter-spacing: .01em;
    color: var(--text);
}
.map-node .mn-sub {
    margin: 3px 0 7px;
    font-size: 12px;
    line-height: 1.3;
    color: var(--muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.map-node.current {
    border-color: var(--warning);
    box-shadow: inset 0 0 0 1px rgba(217, 166, 46, .35), 0 0 18px rgba(217, 166, 46, .12);
}
.map-node.current .mn-bg { opacity: .7; }
.map-node.locked { opacity: .6; cursor: default; }
.map-node.locked .mn-bg { filter: grayscale(.7); }

.map-legend {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 9px 11px;
    background: var(--surface);
    border-top: 1px solid var(--line);
}
.map-legend .lg-row {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    color: var(--muted);
}
.map-legend .lg-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 auto;
}

/* --------------------------------------------------------- battle pass */

.bp-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 12px;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
}
.bp-header .bp-art {
    position: absolute;
    inset: 0;
    background: url("/assets/ui/bp_banner.webp") center/cover no-repeat;
    opacity: .22;
    filter: saturate(.6);
}
.bp-header::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(7, 9, 10, .9), rgba(7, 9, 10, .55));
}
.bp-badge {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    width: 62px;
    height: 68px;
    display: grid;
    place-items: center;
    background: rgba(217, 166, 46, .1);
    border: 1px solid rgba(217, 166, 46, .5);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.bp-badge b {
    font-size: 26px;
    font-weight: 700;
    color: var(--warning);
    line-height: 1;
}
.bp-head-text { position: relative; z-index: 2; flex: 1 1 auto; min-width: 0; }
.bp-season {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .04em;
}
.bp-ends { font-size: 11px; color: var(--muted); margin-top: 2px; }

.tabs {
    display: flex;
    gap: 6px;
    padding: 9px 10px 0;
}
.tab {
    flex: 1 1 0;
    min-height: 38px;
    padding: 9px 8px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    transition: color var(--t-fast), border-color var(--t-fast);
}
.tab.active {
    color: var(--warning);
    border-color: rgba(217, 166, 46, .5);
    background: rgba(217, 166, 46, .08);
}

/* Horizontal reward track. */
.bp-track {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 10px 10px;
    scroll-snap-type: x proximity;
}
.bp-tier {
    flex: 0 0 auto;
    width: 82px;
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.bp-tier .bt-num {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bg-3);
    border: 1px solid var(--line-2);
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.bp-tier.reached .bt-num {
    background: rgba(103, 201, 75, .14);
    border-color: rgba(103, 201, 75, .6);
    color: var(--energy);
}
.bp-tier.current .bt-num {
    background: rgba(217, 166, 46, .16);
    border-color: var(--warning);
    color: var(--warning);
    box-shadow: 0 0 12px rgba(217, 166, 46, .4);
}
.bp-reward {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    padding: 6px;
    background:
        radial-gradient(70% 70% at 50% 45%,
            color-mix(in srgb, var(--rc, #555) 16%, transparent), transparent),
        var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.bp-reward.claimed { opacity: .45; }
.bp-reward.claimable {
    border-color: rgba(217, 166, 46, .65);
    box-shadow: 0 0 14px rgba(217, 166, 46, .2);
}
.bp-reward img { width: 74%; height: 74%; object-fit: contain; }
.bp-reward .br-amount {
    position: absolute;
    bottom: 2px;
    right: 4px;
    font-size: 10px;
    font-weight: 700;
    color: var(--warning);
}
.bp-reward .br-check {
    position: absolute;
    top: 3px;
    right: 3px;
    color: var(--energy);
}
.bp-reward .br-premium {
    position: absolute;
    top: 3px;
    left: 3px;
    color: var(--warning);
}
.bp-tier .bt-name {
    font-size: 9px;
    line-height: 1.2;
    color: var(--dim);
    text-align: center;
    height: 2.4em;
    overflow: hidden;
}

/* ---------------------------------------------------------- quests */

.quest-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}
.quest-row:last-child { border-bottom: 0; }
.quest-row .qr-text { flex: 1 1 auto; min-width: 0; }
.quest-row .qr-name { font-size: 12.5px; }
.quest-row .qr-bar { margin-top: 5px; }
.quest-row .qr-xp {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    color: var(--info);
}
.quest-row.done .qr-name { color: var(--dim); text-decoration: line-through; }

/* --------------------------------------------------------- perk tree */

.perk-branch { margin-bottom: 14px; }
.perk-branch-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--line);
}
.perk-list { display: flex; flex-direction: column; gap: 7px; }

.perk-node {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 10px 11px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-align: left;
    color: var(--text);
    transition: border-color var(--t-fast);
}
.perk-node .pn-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    background: var(--bg-3);
    border: 1px solid var(--line-2);
    border-radius: 50%;
    color: var(--dim);
}
.perk-node .pn-body { flex: 1 1 auto; min-width: 0; }
.perk-node .pn-name { font-size: 13px; font-weight: 600; }
.perk-node .pn-desc {
    font-size: 11px;
    color: var(--dim);
    line-height: 1.4;
    margin-top: 2px;
}
.perk-node .pn-effect { font-size: 11px; color: var(--info); margin-top: 3px; }
.perk-node.unlocked {
    border-color: rgba(103, 201, 75, .45);
    background: linear-gradient(90deg, rgba(103, 201, 75, .06), transparent 60%), var(--surface);
}
.perk-node.unlocked .pn-icon {
    color: var(--energy);
    border-color: rgba(103, 201, 75, .5);
    background: rgba(103, 201, 75, .1);
}
.perk-node.available { border-color: rgba(217, 166, 46, .4); }
.perk-node.available .pn-icon { color: var(--warning); border-color: rgba(217, 166, 46, .45); }
.perk-node.unavailable { opacity: .5; }
.perk-node .pn-cost {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    color: var(--warning);
}

/* --------------------------------------------------- skill tree (P4) */

.skill-branch { margin-bottom: 12px; }
.skill-branch > .skill-branch-head {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    list-style: none;
    padding: 2px 0;
}
.skill-branch > .skill-branch-head::-webkit-details-marker { display: none; }
.skill-branch .sk-branch-icon {
    width: 34px; height: 34px; flex: 0 0 auto;
    border-radius: 8px;
    border: 1px solid var(--line-2);
    background: var(--bg-3);
    object-fit: cover;
}
.skill-branch .sk-branch-name { font-size: 14px; font-weight: 700; }
.skill-branch .sk-branch-meta { font-size: 11px; }
.skill-branch[open] .skill-branch-head { margin-bottom: 10px; }
.skill-branch .perk-node .pn-icon .sk-icon,
.skill-branch .sk-icon {
    width: 30px; height: 30px; border-radius: 6px; object-fit: cover;
}

/* ------------------------------------------------------ achievements */

.ach-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}
.ach-row:last-child { border-bottom: 0; }
.ach-row .ar-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    background: var(--bg-3);
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    color: var(--dim);
}
.ach-row.done .ar-icon {
    color: var(--warning);
    border-color: rgba(217, 166, 46, .5);
    background: rgba(217, 166, 46, .1);
}
.ach-row .ar-body { flex: 1 1 auto; min-width: 0; }
.ach-row .ar-name { font-size: 13px; font-weight: 500; }
.ach-row .ar-desc { font-size: 11px; color: var(--dim); }
.ach-row .ar-prog {
    font-size: 10px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    margin-top: 4px;
}

/* ------------------------------------------------------ market/craft */

.market-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.market-row .mr-thumb {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    background:
        radial-gradient(70% 70% at 50% 45%,
            color-mix(in srgb, var(--rc, #555) 16%, transparent), transparent),
        var(--bg-3);
    border: 1px solid color-mix(in srgb, var(--rc, var(--line)) 40%, transparent);
    border-radius: var(--radius);
}
.market-row .mr-thumb img { width: 78%; height: 78%; object-fit: contain; }
.market-row .mr-body { flex: 1 1 auto; min-width: 0; }
.market-row .mr-name {
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.market-row .mr-sub { font-size: 10px; color: var(--dim); margin-top: 2px; }
.market-row .mr-act { flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.market-row .mr-price {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 13px;
    font-weight: 700;
    color: var(--warning);
    font-variant-numeric: tabular-nums;
}

.recipe-card {
    display: flex;
    align-items: center;          /* every child (incl. the Создать button) stays centred, never stretches */
    gap: 10px;
    padding: 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.recipe-card .rc-thumb {
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    background:
        radial-gradient(70% 70% at 50% 45%,
            color-mix(in srgb, var(--rc, #555) 18%, transparent), transparent),
        var(--bg-3);
    border: 1px solid color-mix(in srgb, var(--rc, var(--line)) 45%, transparent);
    border-radius: var(--radius);
}
.recipe-card .rc-thumb img { width: 78%; height: 78%; object-fit: contain; }
.recipe-card .rc-body { flex: 1 1 auto; min-width: 0; }
.recipe-card .rc-name { font-size: 13px; font-weight: 600; }
.recipe-card .rc-mats {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}
.mat-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    background: rgba(0, 0, 0, .4);
    border: 1px solid var(--line);
    border-radius: 2px;
    font-size: 10px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.mat-chip.ok { color: #a9dd97; border-color: rgba(103, 201, 75, .3); }
.mat-chip.missing { color: #eba79e; border-color: rgba(215, 71, 54, .35); }

/* ------------------------------------------------------------ story */

.story-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-align: left;
    color: var(--text);
    width: 100%;
    padding: 0;
}
.story-card .sc-art {
    position: relative;
    height: 108px;
    overflow: hidden;
}
.story-card .sc-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.story-card .sc-art::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--surface-solid), transparent 70%);
}
.story-card .sc-chapter {
    position: absolute;
    top: 8px;
    left: 9px;
    z-index: 2;
    font-size: 9px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--warning);
    text-shadow: 0 1px 6px #000;
}
.story-card .sc-state {
    position: absolute;
    top: 7px;
    right: 8px;
    z-index: 2;
}
.story-card .sc-body { padding: 9px 11px 11px; }
.story-card .sc-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.15;
}
.story-card .sc-desc {
    font-size: 11.5px;
    color: var(--muted);
    line-height: 1.45;
    margin-top: 4px;
}
.story-card .sc-obj {
    font-size: 11px;
    color: var(--info);
    margin-top: 6px;
}
.story-card.locked { opacity: .55; }
.story-card.completed .sc-art img { filter: grayscale(.7) brightness(.7); }

/* -------------------------------------------------------- pvp / coop */

.opponent-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.opponent-row .or-av {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-3);
}
.opponent-row .or-av img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 15%;
}
.opponent-row .or-body { flex: 1 1 auto; min-width: 0; }
.opponent-row .or-name { font-size: 13px; font-weight: 500; }
.opponent-row .or-meta {
    display: flex;
    gap: 8px;
    font-size: 10px;
    color: var(--dim);
    margin-top: 3px;
    font-variant-numeric: tabular-nums;
}

.lobby-card { display: flex; flex-direction: column; gap: 9px; padding: 11px; }
.lobby-slots { display: flex; gap: 6px; }
.lobby-slot {
    flex: 1 1 0;
    padding: 8px 4px;
    text-align: center;
    background: var(--bg-3);
    border: 1px dashed var(--line-2);
    border-radius: var(--radius);
    font-size: 10px;
    color: var(--dim);
}
.lobby-slot.filled {
    border-style: solid;
    border-color: rgba(103, 201, 75, .4);
    color: var(--text);
    background: rgba(103, 201, 75, .06);
}
.lobby-slot.leader { border-color: rgba(217, 166, 46, .5); }

/* ----------------------------------------------------- bottom sheet */

.sheet-backdrop {
    position: absolute;
    inset: 0;
    z-index: 60;
    background: rgba(3, 5, 6, .74);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-mid);
}
.sheet-backdrop.open { opacity: 1; pointer-events: auto; }

.bottom-sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 61;
    max-height: 86%;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #14181a, #0c0f11);
    border-top: 1px solid var(--line-2);
    border-radius: 12px 12px 0 0;
    /* Fully off-screen when closed: 100% of its own height + the safe-area
       gesture bar + a buffer, so the grip/"—" title never peeks under the nav
       on phones with a bottom inset. */
    transform: translateY(calc(100% + var(--safe-b, 0px) + 48px));
    visibility: hidden;
    transition: transform var(--t-slow) var(--ease), visibility 0s linear var(--t-slow);
    padding-bottom: var(--safe-b);
    box-shadow: 0 -20px 60px rgba(0, 0, 0, .8);
}
.bottom-sheet.open { transform: none; visibility: visible; transition: transform var(--t-slow) var(--ease); }
.sheet-grip {
    flex: 0 0 auto;
    width: 38px;
    height: 4px;
    margin: 8px auto 2px;
    background: var(--line-strong);
    border-radius: 3px;
}
.sheet-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px 10px;
    border-bottom: 1px solid var(--line);
}
.sheet-head h3 {
    flex: 1 1 auto;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    min-width: 0;
}
.sheet-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sheet-foot {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 10px 14px 14px;
    border-top: 1px solid var(--line);
}

/* Item detail hero inside the sheet. */
.item-hero {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.item-hero .ih-art {
    width: 96px;
    height: 96px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    background:
        radial-gradient(65% 65% at 50% 45%,
            color-mix(in srgb, var(--rc, #666) 22%, transparent), transparent 72%),
        var(--bg-3);
    border: 1px solid color-mix(in srgb, var(--rc, var(--line)) 55%, transparent);
    border-radius: var(--radius);
}
.item-hero .ih-art img { width: 80%; height: 80%; object-fit: contain; }
.item-hero .ih-body { flex: 1 1 auto; min-width: 0; }
.item-hero .ih-desc {
    font-size: 11.5px;
    color: var(--muted);
    line-height: 1.5;
    margin-top: 6px;
}

/* --------------------------------------------------------- overlays */

.overlay {
    position: absolute;
    inset: 0;
    z-index: 70;
    display: none;
    flex-direction: column;
    background: var(--bg);
}
.overlay.open { display: flex; animation: screen-in var(--t-mid) var(--ease); }

/* ----------------------------------------------------------- toasts */

.toast-stack {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: calc(var(--nav-h) + var(--safe-b) + 12px);
    z-index: 80;
    display: flex;
    flex-direction: column;
    gap: 6px;
    pointer-events: none;
}
.toast {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    background: rgba(18, 22, 24, .97);
    border: 1px solid var(--line-2);
    border-left: 2px solid var(--muted);
    border-radius: var(--radius);
    font-size: 12.5px;
    box-shadow: 0 8px 26px rgba(0, 0, 0, .6);
    animation: toast-in var(--t-mid) var(--ease);
}
.toast.out { animation: toast-out var(--t-mid) var(--ease) forwards; }
@keyframes toast-in {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to   { opacity: 1; transform: none; }
}
@keyframes toast-out {
    to { opacity: 0; transform: translateY(-6px); }
}
.toast.good { border-left-color: var(--energy); }
.toast.bad  { border-left-color: var(--danger); }
.toast.warn { border-left-color: var(--warning); }
.toast.info { border-left-color: var(--info); }
.toast .game-icon { color: inherit; }
.toast.good .game-icon { color: var(--energy); }
.toast.bad .game-icon  { color: var(--danger); }
.toast.warn .game-icon { color: var(--warning); }
.toast.info .game-icon { color: var(--info); }

/* --------------------------------------------------- loading / empty */

.skeleton {
    background: linear-gradient(90deg,
        rgba(255, 255, 255, .03) 25%,
        rgba(255, 255, 255, .07) 37%,
        rgba(255, 255, 255, .03) 63%);
    background-size: 400% 100%;
    animation: shimmer 1.3s ease-in-out infinite;
    border-radius: var(--radius);
}
@keyframes shimmer {
    from { background-position: 100% 0; }
    to   { background-position: 0 0; }
}
.skel-line { height: 12px; margin-bottom: 8px; }
.skel-block { height: 76px; }

.spinner {
    width: 17px;
    height: 17px;
    border: 2px solid rgba(255, 255, 255, .16);
    border-top-color: var(--text);
    border-radius: 50%;
    animation: spin 700ms linear infinite;
    flex: 0 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }
.game-button.loading { pointer-events: none; opacity: .75; }

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 34px 20px;
    text-align: center;
    color: var(--dim);
}
.empty-state .game-icon { color: var(--line-strong); }
.empty-state p { margin: 0; font-size: 12.5px; line-height: 1.5; }

.error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 26px 18px;
    text-align: center;
}
.error-state .es-icon { color: var(--danger); }
.error-state .es-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text);
}
.error-state .es-text { font-size: 12.5px; color: var(--muted); line-height: 1.5; max-width: 34ch; }

/* ------------------------------------------------------------- auth */

.auth-screen {
    position: relative;
    display: none;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 100%;
    min-height: 100dvh;
    padding: 20px 18px calc(28px + var(--safe-b));
    overflow: hidden;
}
.auth-screen.active { display: flex; }
.auth-screen .auth-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.auth-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(90% 60% at 50% 18%, rgba(7, 9, 10, .35), transparent 70%),
        linear-gradient(to bottom, rgba(7, 9, 10, .72) 0%, rgba(7, 9, 10, .5) 35%, var(--bg) 88%);
}
.auth-inner { position: relative; z-index: 2; }

.auth-brand {
    text-align: center;
    margin-bottom: 22px;
}
.auth-brand .ab-title {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: .1em;
    line-height: 1;
    color: var(--text);
    text-shadow: 0 3px 22px rgba(0, 0, 0, .95);
}
.auth-brand .ab-title em {
    display: block;
    font-style: normal;
    color: var(--danger);
}
.auth-brand .ab-sub {
    margin-top: 8px;
    font-size: 10px;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--dim);
}

.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 11px; }
.field label {
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
}
.field input {
    width: 100%;
    min-height: 46px;
    padding: 11px 12px;
    background: rgba(6, 8, 9, .85);
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 15px;
    transition: border-color var(--t-fast);
}
.field input:focus {
    outline: none;
    border-color: rgba(63, 145, 185, .6);
}
.field input::placeholder { color: var(--dim); }
.field .hint { font-size: 10px; color: var(--dim); }

.auth-switch {
    margin-top: 12px;
    text-align: center;
    font-size: 12px;
    color: var(--muted);
}
.auth-switch button {
    background: none;
    border: 0;
    color: var(--info);
    font-size: 12px;
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: 8px 4px;
}

.form-error {
    display: none;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    padding: 9px 11px;
    background: rgba(215, 71, 54, .1);
    border: 1px solid rgba(215, 71, 54, .4);
    border-radius: var(--radius);
    font-size: 12px;
    color: #eba79e;
}
.form-error.show { display: flex; }

/* ------------------------------------------------------- boot splash */

#boot {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    background: var(--bg);
    transition: opacity var(--t-slow);
}
#boot.hide { opacity: 0; pointer-events: none; }
#boot .boot-inner { text-align: center; }
#boot .boot-title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .3em;
    color: var(--muted);
}
#boot .boot-bar {
    width: 128px;
    height: 2px;
    margin: 14px auto 0;
    background: rgba(255, 255, 255, .08);
    overflow: hidden;
}
#boot .boot-bar i {
    display: block;
    width: 40%;
    height: 100%;
    background: var(--danger);
    animation: boot-slide 1.1s ease-in-out infinite;
}
@keyframes boot-slide {
    from { transform: translateX(-100%); }
    to   { transform: translateX(350%); }
}

/* ------------------------------------------------------------ utils */

.stack { display: flex; flex-direction: column; }
.stack.g6 { gap: 6px; }
.stack.g8 { gap: 8px; }
.stack.g10 { gap: 10px; }
.stack.g12 { gap: 12px; }
.row { display: flex; align-items: center; }
.row.g6 { gap: 6px; }
.row.g8 { gap: 8px; }
.row.between { justify-content: space-between; }
.grow { flex: 1 1 auto; min-width: 0; }
.center { text-align: center; }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.small { font-size: 11px; }
.tiny { font-size: 10px; }
.nowrap { white-space: nowrap; }
.tnum { font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }
.section-label {
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dim);
    margin: 4px 0 2px;
}

/* ==================================================== expedition screen */

/* --- pre-run briefing ------------------------------------------------- */

.brief-facts {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}

.brief-fact {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 13px;
}
.brief-fact .game-icon { color: var(--dim); }
.bf-label { color: var(--muted); }
.bf-value {
    margin-left: auto;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* --- event art + copy -------------------------------------------------- */

.event-art {
    position: relative;
    flex: 0 0 auto;
    height: 190px;
    overflow: hidden;
    background: var(--bg-2);
    border-bottom: 1px solid var(--line);
}
.event-art .scene-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.event-art::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(7, 9, 10, .5) 0%,
                transparent 35%, rgba(7, 9, 10, .4) 70%, var(--bg) 100%);
    pointer-events: none;
}
.event-art > .chip {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 3;
    background: rgba(7, 9, 10, .85);
}

.event-title {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 600;
}
.event-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--muted);
}

/* --- choices ----------------------------------------------------------- */

.choice {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 12px;
    text-align: left;
    background: var(--surface-2);
    border: 1px solid var(--line-2);
    border-left: 2px solid var(--line-strong);
    border-radius: var(--radius);
    color: var(--text);
    transition: transform var(--t-fast), border-color var(--t-fast),
                background-color var(--t-fast);
}
.choice:hover:not(:disabled) {
    background: var(--bg-3);
    border-left-color: var(--warning);
}
.choice:active:not(:disabled) { transform: translateY(1px); }
.choice:disabled,
.choice.is-locked {
    opacity: .45;
    pointer-events: none;
    border-left-color: var(--line);
}

.choice-main {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1 1 auto;
    min-width: 0;
}
.choice-label { font-size: 14px; line-height: 1.4; }
.choice-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.choice-hint { font-size: 12px; line-height: 1.4; color: var(--dim); }
.choice-arrow { flex: 0 0 auto; color: var(--dim); display: flex; }

.chip.tiny { padding: 2px 6px; font-size: 10px; }
.chip.risk-medium { color: #e8c675; border-color: rgba(217, 166, 46, .4); }
.chip.risk-high { color: #eba79e; border-color: rgba(215, 71, 54, .45); }
.chip.tag-missing { color: #eba79e; border-color: rgba(215, 71, 54, .45); }

/* --- outcome ----------------------------------------------------------- */

.result-badge {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin: 2px auto 10px;
    border-radius: 50%;
    background: var(--bg-3);
    border: 1px solid var(--line-2);
    color: var(--muted);
}
.result-badge.kind-loot { color: var(--r-uncommon); border-color: rgba(103, 201, 75, .4); }
.result-badge.kind-combat { color: var(--danger); border-color: rgba(215, 71, 54, .4); }
.result-badge.kind-damage { color: var(--health); border-color: rgba(216, 59, 59, .4); }

.result-text {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.55;
}

.game-panel.center { text-align: center; }
.game-panel.center .stack { text-align: left; }

/* --- loot + delta rows ------------------------------------------------- */

.loot-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 9px;
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.loot-row.is-dim { opacity: .55; }

.resident-list { display: flex; flex-direction: column; gap: 8px; }
.resident-row {
    display: flex; align-items: center; gap: 10px;
    width: 100%; text-align: left;
    padding: 8px 10px;
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
    transition: border-color .15s, background .15s;
}
.resident-row:hover { background: var(--bg-2); border-color: var(--line-2); }
.resident-row:active { transform: translateY(1px); }
.resident-portrait {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--line-2);
    background: var(--bg-2);
}
.resident-img { width: 100%; height: 100%; object-fit: cover; }
.resident-text { flex: 1 1 auto; min-width: 0; }
.resident-name {
    font-size: 13.5px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.resident-role { font-size: 11.5px; color: var(--dim); }
.resident-go { flex: 0 0 auto; color: var(--dim); }

.loot-art {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    overflow: hidden;
    color: var(--dim);
}
.loot-art img { width: 100%; height: 100%; object-fit: contain; }
.loot-art.r-uncommon  { border-color: rgba(103, 201, 75, .45); }
.loot-art.r-rare      { border-color: rgba(63, 145, 185, .5); }
.loot-art.r-epic      { border-color: rgba(139, 92, 199, .5); }
.loot-art.r-legendary { border-color: rgba(217, 166, 46, .55); }
.loot-art.r-mythical  { border-color: rgba(215, 71, 54, .55); }

.loot-text { flex: 1 1 auto; min-width: 0; }
.loot-name {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.loot-meta { font-size: 11px; color: var(--dim); }
.loot-qty {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.delta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 13px;
}
.dr-icon { display: flex; color: var(--dim); }
.dr-label { color: var(--muted); }
.dr-value {
    margin-left: auto;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.dr-value.good { color: var(--energy); }
.dr-value.bad  { color: var(--health); }

/* --- run summary ------------------------------------------------------- */

.summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-top: 10px;
}

.stat-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 10px 4px;
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.st-icon { display: flex; color: var(--dim); }
.st-value {
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.st-label {
    font-size: 9px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--dim);
    text-align: center;
}

.run-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 9px 10px;
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    background: var(--bg-3);
    font-size: 13px;
    line-height: 1.45;
}
.run-banner .game-icon { flex: 0 0 auto; }
.run-banner.good {
    color: #e8c675;
    border-color: rgba(217, 166, 46, .4);
    background: rgba(217, 166, 46, .08);
}
.run-banner.bad {
    color: #eba79e;
    border-color: rgba(215, 71, 54, .4);
    background: rgba(215, 71, 54, .08);
}

.hint {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--dim);
    text-align: center;
}

/* -------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .fx-rain, .fx-fog, .fx-flicker, .scene-hero { animation: none !important; }
    .fx-rain { opacity: .25; }
}

/* --- explore: clan-control notice + condition polish ------------------- */
.clan-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    padding: 9px 11px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.4;
    color: #e8ddc4;
    background: linear-gradient(180deg, rgba(217,71,54,.16), rgba(217,71,54,.06));
    border: 1px solid rgba(217,71,54,.35);
}
.clan-notice .game-icon { color: var(--danger); flex: 0 0 auto; margin-top: 1px; }
.clan-notice.friendly { color: #d7e8c4; background: linear-gradient(180deg, rgba(103,201,75,.14), rgba(103,201,75,.05)); border-color: rgba(103,201,75,.35); }
.clan-notice.friendly .game-icon { color: var(--energy); }

/* ===================================================================
   CS:GO-style case opening reel
   =================================================================== */
.case-reel-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 14px;
    padding: 16px 0;
    background:
        radial-gradient(120% 100% at 50% 0%, rgba(240,160,32,.10), transparent 60%),
        linear-gradient(180deg, rgba(10,14,22,.9), rgba(6,9,14,.95));
    border: 1px solid rgba(255,255,255,.07);
    box-shadow: inset 0 0 40px rgba(0,0,0,.6);
}
/* soft edge fades so tiles emerge from the dark */
.case-reel-wrap::before,
.case-reel-wrap::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 64px; z-index: 2; pointer-events: none;
}
.case-reel-wrap::before { left: 0;  background: linear-gradient(90deg, rgba(6,9,14,.98), transparent); }
.case-reel-wrap::after  { right: 0; background: linear-gradient(270deg, rgba(6,9,14,.98), transparent); }

.case-reel-marker {
    position: absolute; left: 50%; top: 6px; bottom: 6px; width: 3px; z-index: 4;
    transform: translateX(-50%);
    background: linear-gradient(180deg, var(--gold, #f0a020), #ffd97a, var(--gold, #f0a020));
    border-radius: 2px;
    box-shadow: 0 0 14px 2px rgba(240,160,32,.75);
}
.case-reel-marker::before,
.case-reel-marker::after {
    content: ''; position: absolute; left: 50%; transform: translateX(-50%);
    border-left: 7px solid transparent; border-right: 7px solid transparent;
}
.case-reel-marker::before { top: -6px;    border-top: 8px solid var(--gold, #f0a020); }
.case-reel-marker::after  { bottom: -6px; border-bottom: 8px solid var(--gold, #f0a020); }

.case-reel {
    display: flex; gap: 8px;
    will-change: transform;
    transform: translateX(0);
}
.reel-tile {
    flex: 0 0 96px; width: 96px; height: 118px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    border-radius: 12px; padding: 8px 4px;
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.25));
    border: 2px solid color-mix(in srgb, var(--rc, #7a8290) 55%, transparent);
    box-shadow: inset 0 -22px 26px -18px color-mix(in srgb, var(--rc, #7a8290) 80%, transparent);
}
.reel-tile .rt-art { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; }
.reel-tile .rt-art img { width: 100%; height: 100%; object-fit: contain; }
.reel-tile .rt-name {
    font-size: 10px; line-height: 1.1; text-align: center; color: var(--muted, #9aa4b2);
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.reel-tile.win {
    border-color: var(--rc, #f0a020);
    box-shadow: 0 0 18px 2px color-mix(in srgb, var(--rc, #f0a020) 70%, transparent),
                inset 0 0 24px color-mix(in srgb, var(--rc, #f0a020) 30%, transparent);
    animation: reelWinPulse 1.1s ease-in-out infinite;
}
@keyframes reelWinPulse {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}

.reel-result { text-align: center; margin-top: 14px; opacity: 0; transform: translateY(8px); }
.reel-result.show { opacity: 1; transform: none; transition: opacity .35s ease, transform .35s ease; }
.reel-result .reel-grats {
    font-size: 12px; letter-spacing: 3px; color: var(--muted, #9aa4b2); text-transform: uppercase;
}
.reel-result .reel-won-name {
    font-size: 20px; font-weight: 800; margin-top: 4px;
    color: var(--rc, #fff);
    text-shadow: 0 0 16px color-mix(in srgb, var(--rc, #fff) 55%, transparent);
}
.reel-result .reel-won-rar {
    font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; margin-top: 2px;
    color: color-mix(in srgb, var(--rc, #9aa4b2) 85%, #fff);
}
.reel-result .reel-won-stats { justify-content: center; margin-top: 8px; }

/* ===================================================================
   Admin panel
   =================================================================== */
.district-row.admin-row {
    border-color: rgba(240,160,32,.5);
    background: linear-gradient(180deg, rgba(240,160,32,.14), rgba(240,160,32,.04));
}
.district-row.admin-row .dr-name { color: var(--gold, #f0a020); }

.admin-tabs {
    display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 8px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.admin-tabs::-webkit-scrollbar { display: none; }
.admin-tab {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
    padding: 8px 12px; border-radius: 10px; font-size: 13px; font-weight: 600;
    color: var(--muted, #9aa4b2);
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
}
.admin-tab.active {
    color: #10141c; background: linear-gradient(180deg, #f4b942, var(--gold, #f0a020));
    border-color: var(--gold, #f0a020);
}

.admin-hero { text-align: center; background: linear-gradient(180deg, rgba(240,160,32,.12), rgba(0,0,0,.2)); }
.admin-hero-role { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; letter-spacing: 2px; color: var(--gold, #f0a020); }
.admin-boss-mark { display: inline-flex; align-items: center; color: var(--gold, #f0a020); vertical-align: -2px; }
.admin-hero-name { font-size: 22px; font-weight: 800; margin: 2px 0; }

.admin-search { margin-bottom: 2px; }
.admin-search .game-input { width: 100%; }

.admin-prow {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    padding: 8px; border-radius: 10px; background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
}
.admin-prow-av {
    flex: 0 0 auto; width: 36px; height: 36px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center; font-weight: 800;
    background: linear-gradient(180deg, rgba(240,160,32,.3), rgba(240,160,32,.1));
    color: var(--gold, #f0a020);
}
.admin-prow-txt { min-width: 0; flex: 1 1 auto; }
.admin-prow-name { font-weight: 700; display: flex; align-items: center; gap: 6px; }
.admin-prow-sub { font-size: 12px; }
.admin-badge {
    font-size: 9px; font-weight: 800; letter-spacing: .5px; padding: 1px 5px; border-radius: 5px;
    background: rgba(240,160,32,.2); color: var(--gold, #f0a020); border: 1px solid rgba(240,160,32,.4);
}
.admin-badge.ban { background: rgba(224,80,80,.2); color: #ff8a8a; border-color: rgba(224,80,80,.4); }

/* ---- player card (sheet) ---- */
.admin-card-head { display: flex; align-items: center; }
.admin-card-name { font-size: 19px; font-weight: 800; display: flex; align-items: center; gap: 6px; }
.admin-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.admin-act .admin-btnrow { margin-top: 8px; }
.admin-btnrow { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-btnrow .game-button { flex: 1 1 auto; min-width: 90px; padding: 8px 10px; font-size: 13px; }
.admin-field { display: flex; flex-direction: column; gap: 3px; }
.admin-field-lbl { font-size: 11px; }
.admin-field .game-input { width: 100%; }
.admin-act .game-input { margin-top: 4px; }
.admin-in2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.admin-inv { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.admin-inv-cell {
    border: 1px solid var(--border, rgba(255,255,255,.08)); border-left-width: 3px;
    border-radius: 8px; padding: 6px 8px; background: rgba(255,255,255,.02);
}
.admin-inv-name { font-size: 13px; font-weight: 600; }
.admin-inv-sub { font-size: 11px; }
.admin-inv-cell.rarity-common { border-left-color: #9aa; }
.admin-inv-cell.rarity-uncommon { border-left-color: #4caf50; }
.admin-inv-cell.rarity-rare { border-left-color: #4a90d9; }
.admin-inv-cell.rarity-epic { border-left-color: #a05fd0; }
.admin-inv-cell.rarity-legendary { border-left-color: #f0a020; }
.admin-inv-cell.rarity-mythical { border-left-color: #e05050; }

/* inventory interactive (phase 2) */
.admin-inv-head { display: flex; align-items: center; justify-content: space-between; }
.admin-inv-cell { cursor: pointer; }
.admin-inv-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-items: center; }
.admin-inv-tools .game-button { flex: 1 1 auto; min-width: 80px; padding: 6px 8px; font-size: 12px; }
.admin-inv-qty { width: 56px; flex: 0 0 auto; padding: 6px; text-align: center; }
.admin-picker {
    margin-top: 8px; padding: 8px; border-radius: 8px;
    background: rgba(255,255,255,.03); border: 1px solid var(--border, rgba(255,255,255,.08));
}
.admin-pick-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; max-height: 320px; overflow-y: auto; }
.admin-pick-row {
    display: flex; align-items: center; gap: 8px; text-align: left; width: 100%;
    border: 1px solid var(--border, rgba(255,255,255,.08)); border-left-width: 3px;
    border-radius: 8px; padding: 6px 8px; background: rgba(255,255,255,.02); color: inherit; cursor: pointer;
}
.admin-pick-row:active { background: rgba(255,255,255,.06); }
.admin-pick-row.rarity-common { border-left-color: #9aa; }
.admin-pick-row.rarity-uncommon { border-left-color: #4caf50; }
.admin-pick-row.rarity-rare { border-left-color: #4a90d9; }
.admin-pick-row.rarity-epic { border-left-color: #a05fd0; }
.admin-pick-row.rarity-legendary { border-left-color: #f0a020; }
.admin-pick-row.rarity-mythical { border-left-color: #e05050; }
.admin-pick-info { flex: 1 1 auto; min-width: 0; }
.admin-pick-name { font-size: 13px; font-weight: 600; }
.admin-pick-sub { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-pick-give {
    flex: 0 0 auto; width: 26px; height: 26px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent, #4a90d9); color: #fff; font-size: 18px; font-weight: 700;
}

/* catalog / items (phase 4) */
.admin-item-list { display: flex; flex-direction: column; gap: 4px; }
.admin-more { margin-top: 8px; }
.admin-more .game-button { width: 100%; }

/* cases (phase 5) */
.admin-pool-row {
    display: flex; align-items: center; gap: 6px; width: 100%;
    border: 1px solid var(--border, rgba(255,255,255,.08)); border-left-width: 3px;
    border-radius: 8px; padding: 6px 8px; background: rgba(255,255,255,.02); margin-bottom: 4px;
}
.admin-pool-row.rarity-common { border-left-color: #9aa; }
.admin-pool-row.rarity-uncommon { border-left-color: #4caf50; }
.admin-pool-row.rarity-rare { border-left-color: #4a90d9; }
.admin-pool-row.rarity-epic { border-left-color: #a05fd0; }
.admin-pool-row.rarity-legendary { border-left-color: #f0a020; }
.admin-pool-row.rarity-mythical { border-left-color: #e05050; }
.admin-pool-w { flex: 0 0 60px; width: 60px; text-align: center; padding: 4px; }
.admin-pool-b { flex: 0 0 auto; width: 34px; padding: 4px 0; display: inline-flex; align-items: center; justify-content: center; }

/* location loot table (phase 6) */
.admin-loot-row {
    display: flex; flex-direction: column; gap: 6px; width: 100%;
    border: 1px solid var(--border, rgba(255,255,255,.08)); border-left-width: 3px;
    border-radius: 8px; padding: 6px 8px; background: rgba(255,255,255,.02); margin-bottom: 4px;
}
.admin-loot-row.rarity-common { border-left-color: #9aa; }
.admin-loot-row.rarity-uncommon { border-left-color: #4caf50; }
.admin-loot-row.rarity-rare { border-left-color: #4a90d9; }
.admin-loot-row.rarity-epic { border-left-color: #a05fd0; }
.admin-loot-row.rarity-legendary { border-left-color: #f0a020; }
.admin-loot-row.rarity-mythical { border-left-color: #e05050; }
.admin-loot-ctrls { display: flex; align-items: center; gap: 6px; }
.admin-loot-in { flex: 1 1 0; min-width: 0; width: 100%; text-align: center; padding: 4px; }
.admin-loot-add { display: grid; grid-template-columns: 1fr; gap: 6px; }
.admin-loot-add > input[type=search] { grid-column: 1 / -1; }
.admin-loot-add > .admin-loot-in { display: inline-block; }
.admin-loot-add { grid-template-columns: 2fr 1fr 1fr 1fr; }

/* progression: achievements / battle pass / story (phase 9) */
.admin-act .admin-prog { margin-top: 10px; display: flex; flex-direction: column; gap: 12px; }
.admin-prog-sec {
    padding-top: 10px;
    border-top: 1px solid var(--border, rgba(255,255,255,.08));
}
.admin-prog-sec:first-child { padding-top: 0; border-top: none; }
.admin-prog-h { font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.admin-prog-flag {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; margin: 6px 0; cursor: pointer;
}
.admin-prog-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.admin-prog-row {
    display: flex; align-items: center; gap: 8px;
    border: 1px solid var(--border, rgba(255,255,255,.08));
    border-radius: 8px; padding: 6px 8px; background: rgba(255,255,255,.02);
}
.admin-prog-info { flex: 1 1 auto; min-width: 0; }
.admin-prog-name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-prog-sub { font-size: 11px; }
.admin-prog-row .game-button { flex: 0 0 auto; padding: 6px 10px; font-size: 12px; }

/* moderation / admins (phase 3) */
.admin-subsec {
    margin-top: 10px; padding-top: 10px;
    border-top: 1px solid var(--border, rgba(255,255,255,.08));
}
.admin-subsec .admin-btnrow { margin-top: 8px; }
.admin-act .admin-field + .admin-field { margin-top: 8px; }
.admin-flag-row {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 8px 0;
    border-top: 1px solid var(--border, rgba(255,255,255,.06));
    cursor: pointer;
}
.admin-flag-row:first-of-type { border-top: 0; }
.admin-flag-row input[type=checkbox] { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; }
.admin-flag-txt { display: flex; flex-direction: column; gap: 2px; }
.admin-flag-lbl { font-size: 13px; font-weight: 600; }
.admin-flag-desc { line-height: 1.3; }
.admin-ban-note {
    font-size: 12px; font-weight: 600; color: #e05050;
    padding: 6px 8px; border-radius: 6px; background: rgba(224,80,80,.08);
}
.admin-arow {
    display: flex; align-items: center; gap: 8px;
    border: 1px solid var(--border, rgba(255,255,255,.08));
    border-radius: 8px; padding: 6px 8px; background: rgba(255,255,255,.02);
}
.admin-arow .admin-prow-txt { flex: 1 1 auto; min-width: 0; }
.admin-arow .admin-prow-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-arow .game-button { flex: 0 0 auto; padding: 6px 10px; font-size: 12px; min-width: 0; white-space: nowrap; }

/* ---- logs tab (Phase 8) ---- */
.admin-log-seg { display: flex; gap: 6px; }
.admin-log-seg .admin-tab { flex: 1 1 0; justify-content: center; }
.admin-log-feed { max-height: none; }
.admin-log-row {
    padding: 7px 8px; border-radius: 8px; background: rgba(255,255,255,.02);
    border: 1px solid rgba(255,255,255,.06);
}
.admin-log-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.admin-log-action {
    font-weight: 700; font-size: 13px; color: var(--gold, #f0a020);
    letter-spacing: .2px;
}
.admin-log-target { font-size: 12px; }
.admin-log-meta { margin-top: 1px; }
.admin-log-detail { margin-top: 3px; line-height: 1.35; color: var(--muted, #9aa4b2); }
.admin-log-foot {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    margin-top: 8px; text-align: center;
}
.admin-log-foot .game-button { min-width: 160px; }

/* --------------------------------------------------- battle pass admin (P9) */
.admin-rewards-list { display: flex; flex-direction: column; gap: 4px; max-height: 400px; overflow-y: auto; }
.admin-reward-row {
    display: flex; align-items: center; gap: 8px; padding: 6px 8px;
    background: var(--surface-alt, rgba(255,255,255,.04)); border-radius: 8px;
}
.admin-rw-lvl { font-weight: 700; font-size: 13px; min-width: 48px; }
.admin-rw-free, .admin-rw-prem { flex: 1 1 0; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-quest-row {
    display: flex; align-items: center; gap: 8px; padding: 8px;
    background: var(--surface-alt, rgba(255,255,255,.04)); border-radius: 8px; margin-bottom: 4px;
}
.admin-quest-info { flex: 1 1 auto; min-width: 0; }
.admin-quest-info > div:first-child { font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.admin-icon-btn {
    background: none; border: none; cursor: pointer; font-size: 16px; padding: 4px;
    border-radius: 6px; opacity: .6; transition: opacity .15s;
}
.admin-icon-btn:hover { opacity: 1; }
.mb10 { margin-bottom: 10px; }
.mt10 { margin-top: 10px; }

/* --------------------------------------------------- character selector */
.char-change-hint {
    position: absolute; right: 10px; bottom: 10px;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px; font-size: 12px; letter-spacing: .04em;
    color: var(--text); background: rgba(0, 0, 0, .55);
    border: 1px solid var(--line-2); border-radius: var(--radius);
    backdrop-filter: blur(3px);
}
.char-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.char-card {
    display: flex; flex-direction: column; align-items: stretch; gap: 6px;
    padding: 8px; text-align: center;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); cursor: pointer;
    transition: border-color var(--t-fast), transform var(--t-fast);
}
.char-card:hover { border-color: var(--line-2); }
.char-card.selected { border-color: var(--gold, #f0a020); box-shadow: 0 0 0 1px var(--gold, #f0a020) inset; }
.char-card.locked { opacity: .55; cursor: not-allowed; }
.char-art {
    position: relative; width: 100%; aspect-ratio: 3 / 4; overflow: hidden;
    border-radius: calc(var(--radius) - 2px);
    background: radial-gradient(120% 80% at 50% 20%, var(--bg-3), var(--bg));
}
.char-art img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: contain; object-position: center bottom;
}
.char-name { font-weight: 700; font-size: 14px; }
.char-desc { font-size: 11px; line-height: 1.3; min-height: 28px; }
.char-card .chip-row { justify-content: center; }

/* ---------------------------------------------------- crafting tabs */
.craft-tabs {
    display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.craft-tabs::-webkit-scrollbar { display: none; }
.craft-tab {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; font-size: 13px; letter-spacing: .03em; white-space: nowrap;
    color: var(--muted); background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); cursor: pointer;
    transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.craft-tab:hover { color: var(--text); border-color: var(--line-2); }
.craft-tab.active {
    color: #10141c; font-weight: 700;
    background: linear-gradient(180deg, #f4b942, var(--gold, #f0a020));
    border-color: var(--gold, #f0a020);
}

/* crafting: keep the Создать button compact + identical across recipe cards
   (the card is a flex row, so without this the button stretches to the card
   height and varies with the number of ingredient chips). */
.recipe-card > .game-button {
    align-self: center; flex: 0 0 auto;
    width: 124px; min-height: 0; padding: 9px 12px;
}
.recipe-card > .chip { align-self: center; flex: 0 0 auto; }

/* =====================================================================
   Unified input styling — every .game-input reads as part of the game
   (dark inset field, gold focus glow) instead of a default OS control.
   ===================================================================== */
.game-input {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    background: rgba(6, 8, 9, .85);
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 14px;
    letter-spacing: .02em;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color var(--t-fast), box-shadow var(--t-fast),
                background-color var(--t-fast);
}
.game-input::placeholder { color: var(--dim); }
.game-input:focus,
.field input:focus {
    outline: none;
    border-color: rgba(240, 160, 32, .55);
    box-shadow: 0 0 0 3px rgba(240, 160, 32, .12);
    background: rgba(10, 13, 15, .95);
}
.game-input:disabled { opacity: .5; cursor: not-allowed; }
.game-input:read-only { opacity: .8; }
/* strip native number spinners + search decorations for a clean field */
.game-input[type=number] { -moz-appearance: textfield; }
.game-input[type=number]::-webkit-inner-spin-button,
.game-input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.game-input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ------------------------------------------------------- story acts */
.story-lead {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; letter-spacing: .04em; color: var(--muted);
    padding: 2px 2px 2px;
}
.story-act {
    display: flex; align-items: center; gap: 12px;
    margin: 6px 2px 2px;
}
.story-act-line { flex: 1 1 auto; height: 1px; background: var(--line-2); }
.story-act-name {
    flex: 0 0 auto; font-size: 12px; font-weight: 700; letter-spacing: .12em;
    color: var(--gold, #f0a020); text-transform: uppercase; white-space: nowrap;
}

/* ===================================================================
   Visual-novel dialogue overlay
   =================================================================== */
.vn-overlay {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: flex-end; justify-content: center;
    opacity: 0; transition: opacity .25s ease;
    overflow: hidden;
}
.vn-overlay.show { opacity: 1; }
.vn-bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    background-color: #05070a;
    transform: scale(1.06); filter: saturate(.85) brightness(.6);
}
.vn-scrim {
    position: absolute; inset: 0;
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(0,0,0,.25), transparent 60%),
        linear-gradient(180deg, rgba(5,7,10,.35) 0%, rgba(5,7,10,.55) 45%, rgba(5,7,10,.96) 100%);
}
.vn-portrait {
    position: absolute; left: 50%; bottom: 150px;
    max-height: 74vh; max-width: 96vw; width: auto;
    object-fit: contain; object-position: center bottom;
    transform: translateX(-50%) translateY(14px);
    opacity: 0; transition: opacity .3s ease, transform .3s ease;
    filter: drop-shadow(0 12px 30px rgba(0,0,0,.6));
    pointer-events: none;
}
.vn-portrait.in { opacity: 1; transform: translateX(-50%) translateY(0); }
.vn-box {
    position: relative; z-index: 2;
    width: 100%; max-width: 720px; margin: 0 12px 16px;
    padding: 16px 18px 14px;
    background: linear-gradient(180deg, rgba(12,15,18,.86), rgba(8,10,13,.96));
    border: 1px solid var(--line-2);
    border-radius: 14px;
    box-shadow: 0 -10px 40px rgba(0,0,0,.5);
    backdrop-filter: blur(4px);
}
.vn-name {
    font-size: 13px; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; margin-bottom: 6px;
}
.vn-text {
    font-size: 15.5px; line-height: 1.5; color: var(--text);
    min-height: 4.5em;
}
.vn-choices { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.vn-choices:empty { display: none; }
.vn-choice {
    text-align: left; width: 100%;
    padding: 11px 14px;
    background: linear-gradient(180deg, rgba(28,34,40,.92), rgba(18,22,27,.96));
    border: 1px solid var(--line-2); border-left: 3px solid var(--warning);
    border-radius: 10px; color: var(--text);
    font-size: 14.5px; line-height: 1.35;
    transition: border-color .15s, transform .08s, background .15s;
}
.vn-choice:hover { border-left-color: var(--energy); background: linear-gradient(180deg, rgba(38,46,54,.95), rgba(24,30,36,.98)); }
.vn-choice:active { transform: translateY(1px); }
.vn-hint {
    display: flex; align-items: center; gap: 5px; justify-content: flex-end;
    margin-top: 8px; font-size: 11px; color: var(--dim); letter-spacing: .03em;
}
.vn-hint .game-icon { animation: vn-nudge 1.4s ease-in-out infinite; }
@keyframes vn-nudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
.vn-skip {
    position: absolute; z-index: 3; top: 14px; right: 14px;
    width: 40px; height: 40px; display: grid; place-items: center;
    background: rgba(0,0,0,.5); border: 1px solid var(--line-2);
    border-radius: 10px; color: var(--muted); backdrop-filter: blur(3px);
}
.vn-skip:hover { color: var(--text); border-color: var(--line-strong); }

/* ---------------------------------------------------- battle pass banner */
.bp-banner {
    padding: 16px 16px 14px;
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(240,160,32,.14), transparent 55%),
        linear-gradient(180deg, rgba(20,17,10,.6), var(--surface));
    border: 1px solid rgba(240,160,32,.28);
}
.bp-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bp-season {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 800; letter-spacing: .14em;
    color: var(--gold, #f0a020);
}
.bp-premium-tag {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 800; letter-spacing: .1em;
    color: #10141c; background: linear-gradient(180deg, #f4b942, var(--gold, #f0a020));
    padding: 3px 9px; border-radius: 999px;
}
.bp-title { font-size: 24px; font-weight: 800; letter-spacing: .01em; margin-top: 6px; }
.bp-desc { font-size: 12.5px; line-height: 1.4; color: var(--muted); margin-top: 4px; }
.bp-row { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.bp-badge {
    flex: 0 0 auto; display: grid; place-items: center; gap: 0;
    width: 64px; height: 64px; border-radius: 14px;
    background: radial-gradient(circle at 50% 30%, rgba(240,160,32,.22), rgba(0,0,0,.25));
    border: 1px solid rgba(240,160,32,.4);
}
.bp-badge b { font-size: 26px; line-height: 1; color: var(--gold, #f0a020); }
.bp-badge span { font-size: 9px; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
.bp-prog { flex: 1 1 auto; min-width: 0; }
.bp-prog-meta { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; }

/* ---------------------------------------------------- co-op lobby extras */
.lobby-top { display: flex; align-items: center; justify-content: space-between; }
.lobby-roster { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 2px; }
.lobby-slot.ready { color: var(--gold, #f0a020); border-color: rgba(240,160,32,.5); }

/* ------------------------------------------ character rarity (hero picker) */
.char-card[class*="rarity-"] { border-color: color-mix(in srgb, var(--rc, var(--line-2)) 55%, transparent); }
.char-card[class*="rarity-"] .char-name { color: color-mix(in srgb, var(--rc, var(--text)) 65%, var(--text)); }
.char-card.rarity-epic, .char-card.rarity-legendary {
    box-shadow: inset 0 0 22px color-mix(in srgb, var(--rc) 16%, transparent);
}
.char-rar {
    position: absolute; left: 6px; top: 6px; z-index: 2;
    font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    padding: 2px 7px; border-radius: 999px;
    color: #0c0f12; background: var(--rc, #888);
    box-shadow: 0 1px 4px rgba(0,0,0,.5);
}