/* ============================================================

   SELF-HOSTED FONT DECLARATIONS

   These register the woff2 files that _header.php only preloads.

   Without them the icon/display fonts never load and Material

   Symbols ligatures render as literal text (military_tech, bolt…).

   ============================================================ */



@font-face {

    font-family: 'Material Symbols Outlined';

    font-style: normal;

    font-weight: 100 700;

    font-display: block;

    src: url('/assets/fonts/MaterialSymbolsOutlined.woff2') format('woff2');

}



@font-face {

    font-family: 'Space Grotesk';

    font-style: normal;

    font-weight: 300 700;

    font-display: swap;

    src: url('/assets/fonts/SpaceGrotesk-Bold.woff2') format('woff2');

}











:root {



    --primary:            #b33a46;

    --on-primary:         #fff3dc;

    --secondary:          #e8dcc4;

    --on-secondary:       #17110b;

    --tertiary:           #a65a4e;



    --surface:            #100e0d;

    --surface-lowest:     #0b0908;

    --surface-low:        #171310;

    --surface-container:  #211b16;

    --surface-high:       #2b231c;

    --surface-highest:    #382d23;



    --on-surface:         #eee3cf;

    --on-surface-variant: #ad9c82;

    --outline:            #9f8b6d;

    --outline-variant:    #4d3d31;



    --error:              #d96b61;

    --success:            #86efac;

    --warning:            #f1c40f;

    --info:               #7dd3fc;





    --gold:        #c4a35a;

    --gold-bright: #dfc47c;

    --gold-d:      #9c7f3f;

    --mafia-gold:  #c4a35a;

    --brand:       #b33a46;

    --accent:      #c4a35a;



    --wine:        #8b1e2d;

    --red:         #ef4444;

    --red-l:       #d96b61;

    --red-neon:    #e0475a;

    --pink-hot:    #d9578a;

    --green:       #4ade80;

    --green-palm:  #5bbf7a;

    --cyan:        #22d3ee;

    --danger:      #d96b61;

    --warning:     #f1c40f;

    --success:     #86efac;



    --bg:          #100e0d;

    --text-main:   #eee3cf;

    --text-muted:  #ad9c82;

    --muted:       #9f8b6d;

    --border:      #4d3d31;





    --vc-purple:   #8b5cf6;

    --vc-pink:     #d9578a;

    --vc-cyan:     #22d3ee;



    --font-mono:   'JetBrains Mono', ui-monospace, monospace;





    --font-display: 'Space Grotesk', Georgia, serif;

    --font-body:    'Space Mono', ui-monospace, monospace;

    --font-label:   'JetBrains Mono', ui-monospace, monospace;





    --r-sm: 4px;

    --r:    8px;

    --r-lg: 14px;



    --shadow-panel: 0 1px 0 rgba(255, 255, 255, .03) inset,

                    0 18px 40px -24px rgba(0, 0, 0, .9);

    --shadow-lift:  0 24px 48px -28px rgba(0, 0, 0, .95);





    --topbar-h: 64px;

    --strip-h:  48px;

    --bottom-h: 88px;

    --side-w:   256px;

}







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



html {



    height: auto;

    min-height: 100%;

    scroll-behavior: smooth;

    -webkit-text-size-adjust: 100%;

}



body {

    height: auto;

    min-height: 100vh;

    margin: 0;

    overflow-x: hidden;

    overflow-y: auto;



    background:

        radial-gradient(1100px 600px at 78% -8%, rgba(179, 58, 70, .10), transparent 60%),

        radial-gradient(900px 520px at 4% 100%, rgba(196, 163, 90, .06), transparent 62%),

        var(--surface);

    background-attachment: fixed;



    color: var(--on-surface);

    font-family: var(--font-body);

    font-size: 14px;

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;

}



h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-display); font-weight: 700; line-height: 1.15; }

p  { margin: 0 0 .75rem; }

ul, ol { margin: 0; padding: 0; }

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

hr { border: 0; border-top: 1px solid var(--outline-variant); margin: 1.25rem 0; }



a { color: var(--gold-bright); text-decoration: none; transition: color .15s ease; }

a:hover { color: var(--secondary); }





:focus-visible {

    outline: 2px solid var(--gold);

    outline-offset: 2px;

    border-radius: var(--r-sm);

}



::selection { background: rgba(179, 58, 70, .45); color: #fff; }





* { scrollbar-width: thin; scrollbar-color: var(--outline-variant) transparent; }

::-webkit-scrollbar { width: 10px; height: 10px; }

::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb {

    background: var(--outline-variant);

    border: 3px solid transparent;

    background-clip: content-box;

    border-radius: 999px;

}

::-webkit-scrollbar-thumb:hover { background: var(--outline); background-clip: content-box; }



@media (prefers-reduced-motion: reduce) {

    *, *::before, *::after {

        animation-duration: .001ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: .001ms !important;

        scroll-behavior: auto !important;

    }

}









.gm-main > *:first-child { margin-top: 0; }





.gm-strip {

    overflow-x: auto;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;

}

.gm-strip::-webkit-scrollbar { display: none; }





.gm-nav-link { transition: background .15s ease, color .15s ease; }



.material-symbols-outlined {

    font-family: 'Material Symbols Outlined';

    font-weight: normal;

    font-style: normal;

    line-height: 1;

    letter-spacing: normal;

    text-transform: none;

    white-space: nowrap;

    word-wrap: normal;

    direction: ltr;

    font-feature-settings: 'liga';

    -webkit-font-feature-settings: 'liga';

    -webkit-font-smoothing: antialiased;

    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;

    vertical-align: middle;

    user-select: none;

}







.kicker,

.bf-eyebrow {

    font-family: var(--font-label);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .28em;

    text-transform: uppercase;

    color: var(--outline);

}



.page-header {

    display: flex;

    flex-wrap: wrap;

    align-items: flex-end;

    justify-content: space-between;

    gap: 1rem;

    padding-bottom: 1rem;

    margin-bottom: 1.5rem;

    border-bottom: 1px solid var(--outline-variant);

}

.page-header h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); letter-spacing: -.02em; }

.page-header h1 span { color: var(--primary); }



.gold-text  { color: var(--gold-bright); }

.hazard-text { color: var(--error); }



.header-sub,

.market-note,

.op-note,

.bf-note {

    color: var(--on-surface-variant);

    font-size: .82rem;

    line-height: 1.65;

}









.glass-panel,

.panel {

    position: relative;

    background:

        linear-gradient(180deg, rgba(255, 255, 255, .028), rgba(255, 255, 255, 0) 55%),

        rgba(23, 19, 16, .82);

    border: 1px solid var(--outline-variant);

    border-radius: var(--r-lg);

    box-shadow: var(--shadow-panel);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    overflow: hidden;

}





.glass-panel::before,

.panel::before {

    content: '';

    position: absolute;

    inset: 0 0 auto 0;

    height: 1px;

    background: linear-gradient(90deg,

        transparent,

        rgba(196, 163, 90, .55) 22%,

        rgba(196, 163, 90, .18) 50%,

        transparent);

    opacity: .5;

    transition: opacity .25s ease;

    pointer-events: none;

}

.glass-panel:hover::before { opacity: 1; }



.panel-mafia {

    border-color: rgba(196, 163, 90, .32);

    background:

        linear-gradient(180deg, rgba(196, 163, 90, .05), rgba(255, 255, 255, 0) 40%),

        rgba(23, 19, 16, .9);

}



.panel-title {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: .75rem;

    padding: 0 0 .75rem;

    margin-bottom: 1rem;

    border-bottom: 1px solid var(--outline-variant);

}

.panel-title h2 {

    font-family: var(--font-label);

    font-size: .75rem;

    font-weight: 700;

    letter-spacing: .22em;

    text-transform: uppercase;

    color: var(--secondary);

}

.panel-title span {

    font-family: var(--font-label);

    font-size: .68rem;

    color: var(--outline);

}



.panel-title.panel {

    background: none;

    border: 0;

    border-bottom: 1px solid var(--outline-variant);

    border-radius: 0;

    box-shadow: none;

    backdrop-filter: none;

    padding: 0 0 .75rem;

}

.panel-title.panel::before { display: none; }







.btn,

.bf-btn,

.travel-btn,

.ntf-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: .5rem;



    padding: .7rem 1.25rem;

    border: 1px solid var(--outline-variant);

    border-radius: var(--r);

    background: var(--surface-high);

    color: var(--on-surface);



    font-family: var(--font-label);

    font-size: .72rem;

    font-weight: 700;

    letter-spacing: .16em;

    text-transform: uppercase;

    text-decoration: none;

    white-space: nowrap;



    cursor: pointer;

    transition: transform .12s ease, background .18s ease,

                border-color .18s ease, box-shadow .18s ease;

}



.btn:hover,

.bf-btn:hover,

.travel-btn:hover,

.ntf-btn:hover {

    border-color: var(--gold);

    background: var(--surface-highest);

    color: var(--secondary);

}



.btn:active { transform: translateY(1px); }



.btn:disabled,

.btn[disabled],

.bf-btn:disabled,

.btn-locked {

    opacity: .38;

    cursor: not-allowed;

    transform: none;

    background: var(--surface-container);

    border-color: var(--outline-variant);

    color: var(--on-surface-variant);

}

.btn-locked:hover { border-color: var(--outline-variant); background: var(--surface-container); }





.btn-primary,

.bf-btn-primary,

.btn-buy {

    background: linear-gradient(180deg, var(--primary), #8f2c36);

    border-color: rgba(255, 243, 220, .22);

    color: var(--on-primary);

}

.btn-primary:hover,

.bf-btn-primary:hover,

.btn-buy:hover {

    background: linear-gradient(180deg, #c74450, #a03340);

    border-color: var(--on-primary);

    color: var(--on-primary);

    box-shadow: 0 10px 26px -14px rgba(179, 58, 70, .9);

}





.btn-collect {

    background: rgba(74, 222, 128, .1);

    border-color: rgba(74, 222, 128, .42);

    color: var(--success);

}

.btn-collect:hover {

    background: rgba(74, 222, 128, .18);

    border-color: var(--success);

    color: var(--success);

}



.btn-gold {

    background: linear-gradient(180deg, var(--gold-bright), var(--gold));

    border-color: var(--gold-bright);

    color: var(--on-secondary);

}

.btn-gold:hover {

    background: linear-gradient(180deg, #efd898, var(--gold-bright));

    color: var(--on-secondary);

    box-shadow: 0 10px 26px -14px rgba(196, 163, 90, .8);

}



.btn-danger,

.bf-btn-danger {

    background: rgba(217, 107, 97, .1);

    border-color: rgba(217, 107, 97, .5);

    color: var(--error);

}

.btn-danger:hover,

.bf-btn-danger:hover {

    background: rgba(217, 107, 97, .2);

    border-color: var(--error);

    color: var(--error);

}



.btn-sell,

.bf-btn-secondary,

.btn-manage {

    background: transparent;

    border-color: var(--outline-variant);

    color: var(--on-surface-variant);

}

.btn-sell:hover,

.bf-btn-secondary:hover,

.btn-manage:hover {

    border-color: var(--outline);

    color: var(--on-surface);

}



.btn-act-small {

    padding: .4rem .7rem;

    font-size: .62rem;

    letter-spacing: .1em;

}



.btn-action-group,

.actions {

    display: flex;

    flex-direction: column;

    gap: .5rem;

    margin-top: .9rem;

}

.actions.row,

.btn-action-group.row { flex-direction: row; }

.actions.row > .btn { flex: 1; }



.actions > .btn { width: 100%; }

.actions.row > .btn { width: auto; }









.field,

.form-group,

.bf-form-group {

    display: flex;

    flex-direction: column;

    gap: .4rem;

    margin-bottom: 1rem;

}



.field > label,

.form-group > label,

.bf-form-group > label,

.field__label {

    font-family: var(--font-label);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .2em;

    text-transform: uppercase;

    color: var(--outline);

}





.control {

    position: relative;

    display: flex;

    align-items: center;

    width: 100%;



    background: var(--surface-lowest);

    border: 1px solid var(--outline-variant);

    border-radius: var(--r);

    transition: border-color .18s ease, box-shadow .18s ease;

}

.control:focus-within {

    border-color: var(--gold);

    box-shadow: 0 0 0 3px rgba(196, 163, 90, .14);

}



.control input,

.control select,

.control textarea {

    flex: 1;

    min-width: 0;

    padding: .8rem .9rem;

    border: 0;

    background: transparent;

    color: var(--on-surface);

    font-family: var(--font-body);

    font-size: .9rem;

}

.control input:focus,

.control select:focus,

.control textarea:focus { outline: none; box-shadow: none; }





input:-webkit-autofill,

input:-webkit-autofill:hover,

input:-webkit-autofill:focus,

input:-webkit-autofill:active,

textarea:-webkit-autofill,

textarea:-webkit-autofill:hover,

textarea:-webkit-autofill:focus,

select:-webkit-autofill,

select:-webkit-autofill:hover,

select:-webkit-autofill:focus {

    -webkit-text-fill-color: var(--on-surface) !important;

    -webkit-box-shadow: 0 0 0 1000px var(--surface-lowest) inset !important;

    box-shadow: 0 0 0 1000px var(--surface-lowest) inset !important;

    caret-color: var(--on-surface);



    transition: background-color 100000s ease-in-out 0s !important;

}



input:autofill,

textarea:autofill,

select:autofill {

    background-color: var(--surface-lowest) !important;

    color: var(--on-surface) !important;

}



.control__icon {

    display: grid;

    place-items: center;

    width: 42px;

    flex: 0 0 42px;

    color: var(--outline);

    font-size: 1rem;

}

.control:focus-within .control__icon { color: var(--gold); }



.control__suffix {

    flex: 0 0 auto;

    padding: 0 .9rem;

    font-family: var(--font-label);

    font-size: .7rem;

    letter-spacing: .1em;

    text-transform: uppercase;

    color: var(--outline);

    cursor: pointer;

    background: none;

    border: 0;

}

.control__suffix:hover { color: var(--gold-bright); }





.form-input,

.bf-input,

.revoke-reason-input {

    width: 100%;

    padding: .75rem .9rem;

    background: var(--surface-lowest);

    border: 1px solid var(--outline-variant);

    border-radius: var(--r);

    color: var(--on-surface);

    font-family: var(--font-body);

    font-size: .88rem;

    transition: border-color .18s ease, box-shadow .18s ease;

}

.form-input:focus,

.bf-input:focus,

.revoke-reason-input:focus {

    outline: none;

    border-color: var(--gold);

    box-shadow: 0 0 0 3px rgba(196, 163, 90, .14);

}



.form-input::placeholder,

.bf-input::placeholder,

.control input::placeholder { color: var(--outline-variant); }



.bf-input-grp { display: flex; gap: .5rem; align-items: stretch; }

.bf-input-grp .bf-input { flex: 1; min-width: 0; }





.form-row {

    display: flex;

    flex-wrap: wrap;

    align-items: flex-end;

    gap: .75rem;

}

.form-row > .field,

.form-row > .form-group { margin-bottom: 0; }



.form-row select,

.form-row .form-input[type="search"],

.form-row .form-input[type="text"] { width: auto; min-width: 10rem; }

.form-row > .field:first-child,

.form-row > .form-group:first-child { flex: 1 1 14rem; }



.form-box {

    padding: 1.25rem;

    background: rgba(23, 19, 16, .7);

    border: 1px solid var(--outline-variant);

    border-radius: var(--r-lg);

    margin-bottom: 1.5rem;

}



.glass-form {

    padding: 1.25rem;

    background: rgba(11, 9, 8, .55);

    border: 1px solid var(--outline-variant);

    border-radius: var(--r-lg);

}





.control select,

.form-input select,

select.form-input,

select.bf-input {

    appearance: none;

    -webkit-appearance: none;

    padding-right: 2.2rem;

    background-image: linear-gradient(45deg, transparent 50%, var(--outline) 50%),

                      linear-gradient(135deg, var(--outline) 50%, transparent 50%);

    background-position: calc(100% - 18px) center, calc(100% - 12px) center;

    background-size: 6px 6px, 6px 6px;

    background-repeat: no-repeat;

    cursor: pointer;

}

.control select { background-color: transparent; }





.checkbox {

    display: flex;

    align-items: flex-start;

    gap: .6rem;

    font-size: .8rem;

    line-height: 1.5;

    color: var(--on-surface-variant);

    cursor: pointer;

}

.checkbox input[type="checkbox"] {

    appearance: none;

    -webkit-appearance: none;

    flex: 0 0 18px;

    width: 18px;

    height: 18px;

    margin-top: 2px;

    background: var(--surface-lowest);

    border: 1px solid var(--outline);

    border-radius: var(--r-sm);

    cursor: pointer;

    transition: background .15s ease, border-color .15s ease;

}

.checkbox input[type="checkbox"]:checked {

    background: var(--gold);

    border-color: var(--gold-bright);

}

.checkbox input[type="checkbox"]:checked::after {

    content: '';

    display: block;

    width: 4px;

    height: 9px;

    margin: 1px auto 0;

    border: solid var(--on-secondary);

    border-width: 0 2px 2px 0;

    transform: rotate(45deg);

}





.checkbox--oath {

    padding: .9rem 1rem;

    background: rgba(196, 163, 90, .05);

    border: 1px solid rgba(196, 163, 90, .25);

    border-left: 3px solid var(--gold);

    border-radius: var(--r);

    font-family: var(--font-label);

    font-size: .74rem;

    color: var(--secondary);

}



.toggle-password {

    background: none;

    border: 0;

    color: var(--outline);

    cursor: pointer;

    padding: 0 .9rem;

    font-size: .95rem;

}

.toggle-password:hover { color: var(--gold-bright); }





.pw-strength-bar {

    height: 4px;

    background: var(--surface-highest);

    border-radius: 999px;

    overflow: hidden;

    margin-top: .4rem;

}

.pw-fill {

    height: 100%;

    width: 0;

    background: var(--error);

    border-radius: 999px;

    transition: width .3s ease, background .3s ease;

}

.pw-text {

    margin-top: .3rem;

    font-family: var(--font-label);

    font-size: 10px;

    letter-spacing: .12em;

    text-transform: uppercase;

    color: var(--outline);

}







.stats,

.bf-stats,

.metrics,

.portfolio {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

    gap: .75rem;

}



.stat,

.metric,

.bf-stat {

    padding: .9rem 1rem;

    background: rgba(11, 9, 8, .5);

    border: 1px solid var(--outline-variant);

    border-radius: var(--r);

    min-width: 0;

}



.stat-label,

.metric small,

.bf-stat-lbl,

.district small,

.stat > small {

    display: block;

    font-family: var(--font-label);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .2em;

    text-transform: uppercase;

    color: var(--outline);

    margin-bottom: .3rem;

}



.stat-value,

.metric b,

.bf-stat-val,

.district b,

.stat > b {

    display: block;

    font-family: var(--font-label);

    font-size: 1.05rem;

    font-weight: 700;

    color: var(--on-surface);



    font-variant-numeric: tabular-nums;

    letter-spacing: -.01em;

    word-break: break-word;

}



.bf-val-green { color: var(--success); }

.bf-val-red   { color: var(--error); }





.stat-row { display: flex; align-items: center; gap: .6rem; margin-bottom: .35rem; }

.stat-bar-bg {

    flex: 1;

    height: 6px;

    background: rgba(255, 255, 255, .07);

    border-radius: 999px;

    overflow: hidden;

}

.stat-bar-fill {

    height: 100%;

    background: linear-gradient(90deg, var(--gold), var(--gold-bright));

    border-radius: 999px;

    transition: width .6s cubic-bezier(.2, .8, .2, 1);

}

.stat-val { min-width: 2.2rem; text-align: right; font-family: var(--font-label); font-size: .72rem; }







.badge,

.user-badge,

.status-badge,

.vc-badge,

.op-chip {

    display: inline-flex;

    align-items: center;

    gap: .35rem;

    padding: .22rem .55rem;

    border: 1px solid var(--outline-variant);

    border-radius: 999px;

    background: var(--surface-high);

    color: var(--on-surface-variant);

    font-family: var(--font-label);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .14em;

    text-transform: uppercase;

    white-space: nowrap;

}



.badge-active,

.status-owned {

    background: rgba(74, 222, 128, .12);

    border-color: rgba(74, 222, 128, .4);

    color: var(--success);

}



.badge-banned,

.status-taken {

    background: rgba(217, 107, 97, .12);

    border-color: rgba(217, 107, 97, .4);

    color: var(--error);

}



.status-badge {

    position: absolute;

    top: .6rem;

    right: .6rem;

    z-index: 2;

}





.dot {

    display: inline-block;

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: var(--outline-variant);

    flex: 0 0 8px;

}

.dot.online,

.dot.is-online {

    background: var(--green);

    box-shadow: 0 0 0 0 rgba(74, 222, 128, .5);

    animation: gm-pulse 2.4s infinite;

}

@keyframes gm-pulse {

    70%  { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); }

    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }

}





.wanted-stars { display: inline-flex; gap: 3px; }

.wanted-stars i { color: var(--outline-variant); font-size: .8rem; }

.wanted-stars i.active { color: var(--error); text-shadow: 0 0 10px rgba(217, 107, 97, .6); }







.alert-ok,

.alert-err,

.vc-flash,

.bf-msg {

    display: flex;

    align-items: flex-start;

    gap: .6rem;

    padding: .85rem 1rem;

    margin-bottom: 1.25rem;

    border-radius: var(--r);

    border: 1px solid;

    border-left-width: 3px;

    font-size: .84rem;

    line-height: 1.55;

}



.alert-ok,

.vc-flash.success,

.bf-msg.success {

    background: rgba(74, 222, 128, .07);

    border-color: rgba(74, 222, 128, .35);

    color: var(--success);

}



.alert-err,

.vc-flash.error,

.bf-msg.error {

    background: rgba(217, 107, 97, .07);

    border-color: rgba(217, 107, 97, .4);

    color: var(--error);

}



.vc-flash.warning,

.bf-msg.warning {

    background: rgba(241, 196, 15, .07);

    border-color: rgba(241, 196, 15, .35);

    color: var(--warning);

}





.empty,

.ntf-empty {

    grid-column: 1 / -1;

    padding: 3rem 1.5rem;

    text-align: center;

    color: var(--outline);

    font-family: var(--font-label);

    font-size: .78rem;

    letter-spacing: .12em;

    text-transform: uppercase;

    border: 1px dashed var(--outline-variant);

    border-radius: var(--r-lg);

}







.result-table {

    width: 100%;

    border-collapse: collapse;

    font-size: .84rem;

}

.result-table th {

    padding: .7rem .85rem;

    text-align: left;

    font-family: var(--font-label);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .2em;

    text-transform: uppercase;

    color: var(--outline);

    border-bottom: 1px solid var(--outline-variant);

    white-space: nowrap;

}

.result-table td {

    padding: .75rem .85rem;

    border-bottom: 1px solid rgba(77, 61, 49, .4);

    vertical-align: middle;

}

.result-table tbody tr { transition: background .12s ease; }

.result-table tbody tr:hover { background: rgba(255, 255, 255, .025); }

.result-table tbody tr:last-child td { border-bottom: 0; }

.result-table td:last-child,

.result-table th:last-child { text-align: right; }





@media (max-width: 640px) {

    .result-table { display: block; overflow-x: auto; white-space: nowrap; }

}









.glow-cyan {

    color: var(--info);

    text-shadow: 0 0 18px rgba(125, 211, 252, .35);

}





.scanline-anim { position: relative; overflow: hidden; }

.scanline-anim::after {

    content: '';

    position: absolute;

    inset: 0 0 auto 0;

    height: 2px;

    background: linear-gradient(90deg, transparent, rgba(196, 163, 90, .5), transparent);

    animation: gm-scan 4.5s linear infinite;

    pointer-events: none;

}

@keyframes gm-scan {

    0%   { transform: translateY(0); opacity: 0; }

    12%  { opacity: 1; }

    88%  { opacity: 1; }

    100% { transform: translateY(320px); opacity: 0; }

}





.timer-big,

.jail-timer,

.ext-timer,

.bf-price-tag {

    font-family: var(--font-label);

    font-variant-numeric: tabular-nums;

    font-weight: 700;

    letter-spacing: .06em;

    color: var(--gold-bright);

}

.timer-big,

.jail-timer { font-size: clamp(1.8rem, 6vw, 3rem); }







.page-shell {

    position: relative;

    z-index: 1;

    max-width: 1120px;

    margin: 0 auto;

    padding: 3rem 1.25rem 4rem;

}





.side-motto {

    position: fixed;

    left: 2rem;

    top: 50%;

    transform: translateY(-50%) rotate(180deg);

    writing-mode: vertical-rl;



    font-family: var(--font-display);

    font-size: clamp(2.5rem, 5vw, 4.5rem);

    font-weight: 700;

    font-style: italic;

    line-height: .95;

    letter-spacing: -.03em;



    color: transparent;

    -webkit-text-stroke: 1px rgba(196, 163, 90, .12);

    user-select: none;

    pointer-events: none;

    z-index: 0;

}

@media (max-width: 1280px) { .side-motto { display: none; } }



.brand { text-align: center; margin-bottom: 2.5rem; }

.brand__title {

    font-size: clamp(2.2rem, 6vw, 3.4rem);

    font-style: italic;

    letter-spacing: -.04em;

    color: var(--secondary);

}

.brand__title span { color: var(--primary); }

.brand__tagline {

    margin-top: .5rem;

    font-family: var(--font-label);

    font-size: 10px;

    letter-spacing: .4em;

    text-transform: uppercase;

    color: var(--outline);

}



.crest {

    display: block;

    width: 64px;

    margin: 0 auto 1rem;

    opacity: .8;

}



.login-layout,

.register-layout {

    display: grid;

    grid-template-columns: 1fr;

    gap: 2rem;

    align-items: center;

}

@media (min-width: 900px) {

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

    .register-layout { grid-template-columns: 1fr 1.15fr; align-items: start; }

}



.login-hero { display: none; }

@media (min-width: 900px) { .login-hero { display: block; } }



.character {

    aspect-ratio: 3 / 4;

    background: url('../img/character.webp') center / contain no-repeat;

    filter: grayscale(.35) contrast(1.05);



    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);

            mask-image: linear-gradient(180deg, #000 55%, transparent 100%);

}



.card {

    padding: 2rem;

    background: rgba(23, 19, 16, .9);

    border: 1px solid var(--outline-variant);

    border-radius: var(--r-lg);

    box-shadow: var(--shadow-lift);

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

}

.card--wide { max-width: none; }



.card__title {

    font-size: 1.35rem;

    text-align: center;

    color: var(--secondary);

}





.card__divider {

    display: flex;

    align-items: center;

    gap: .75rem;

    margin: 1rem 0 1.5rem;

    color: var(--gold);

}

.card__divider::before,

.card__divider::after {

    content: '';

    flex: 1;

    height: 1px;

    background: linear-gradient(90deg, transparent, var(--outline-variant), transparent);

}

.card__divider span { font-size: .8rem; opacity: .8; }



.features {

    display: grid;

    gap: 1rem;

    margin-top: 2rem;

}

.feature {

    display: flex;

    align-items: flex-start;

    gap: .9rem;

    padding: .9rem;

    border: 1px solid var(--outline-variant);

    border-radius: var(--r);

    background: rgba(11, 9, 8, .45);

}

.feature__art {

    flex: 0 0 40px;

    display: grid;

    place-items: center;

    width: 40px;

    height: 40px;

    border-radius: var(--r-sm);

    background: rgba(196, 163, 90, .1);

    color: var(--gold-bright);

}

.feature__body { font-size: .8rem; color: var(--on-surface-variant); line-height: 1.55; }

.feature__body strong { display: block; color: var(--on-surface); font-family: var(--font-label); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .2rem; }





.path-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: .5rem;

}

.path-option {

    position: relative;

    display: block;

    padding: .7rem .4rem;

    border: 1px solid var(--outline-variant);

    border-radius: var(--r);

    background: rgba(11, 9, 8, .5);

    cursor: pointer;

    text-align: center;

    font-size: .82rem;

    transition: border-color .18s ease, background .18s ease, transform .12s ease;

}

.path-option:hover { border-color: var(--outline); transform: translateY(-2px); }

.path-option input { position: absolute; opacity: 0; pointer-events: none; }

.path-option input:checked ~ * { color: var(--gold-bright); }

.path-option:has(input:checked) {

    border-color: var(--gold);

    background: rgba(196, 163, 90, .09);

}



.story {

    font-size: .82rem;

    line-height: 1.7;

    color: var(--on-surface-variant);

    border-left: 2px solid var(--outline-variant);

    padding-left: 1rem;

}



.page-shell .footer,

.page-shell footer {

    margin-top: 3rem;

    text-align: center;

    font-family: var(--font-label);

    font-size: 10px;

    letter-spacing: .2em;

    text-transform: uppercase;

    color: var(--outline-variant);

}







.estate-app {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;



    max-width: 1280px;

    margin: 0 auto;

    width: 100%;

}



.estate-app > .header {

    display: flex;

    flex-wrap: wrap;

    align-items: flex-end;

    justify-content: space-between;

    gap: 1rem;

}

.estate-app > .header h1 {

    font-size: clamp(1.8rem, 5vw, 2.6rem);

    letter-spacing: -.03em;

}

.estate-app > .header h1 span { color: var(--primary); }



.location-pill {

    padding: .5rem .9rem;

    border: 1px solid rgba(196, 163, 90, .3);

    border-radius: 999px;

    background: rgba(196, 163, 90, .07);

    font-family: var(--font-label);

    font-size: .7rem;

    letter-spacing: .12em;

    text-transform: uppercase;

    color: var(--outline);

}

.location-pill strong { color: var(--gold-bright); margin-left: .35rem; }



.portfolio .stat { background: rgba(23, 19, 16, .8); }

.portfolio .stat-value { font-size: 1.25rem; }



.city-switch {

    display: flex;

    flex-wrap: wrap;

    gap: .4rem;

    padding-bottom: .75rem;

    border-bottom: 1px solid var(--outline-variant);

}

.city-link {

    padding: .45rem .85rem;

    border: 1px solid transparent;

    border-radius: var(--r);

    font-family: var(--font-label);

    font-size: .72rem;

    letter-spacing: .1em;

    text-transform: uppercase;

    color: var(--on-surface-variant);

    transition: all .15s ease;

}

.city-link:hover { color: var(--on-surface); background: rgba(255, 255, 255, .04); }

.city-link.active {

    color: var(--gold-bright);

    border-color: rgba(196, 163, 90, .4);

    background: rgba(196, 163, 90, .1);

}



.city-overview {

    display: grid;

    grid-template-columns: 1fr;

    gap: 1rem;

}

@media (min-width: 900px) { .city-overview { grid-template-columns: 320px 1fr; } }





.map-card {

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 1.5rem;

    border: 1px solid var(--outline-variant);

    border-radius: var(--r-lg);

    background:

        repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 2px, transparent 2px 6px),

        rgba(11, 9, 8, .7);

}

.city-code {

    font-family: var(--font-display);

    font-size: clamp(3rem, 9vw, 4.5rem);

    font-weight: 700;

    line-height: 1;

    letter-spacing: -.04em;

    color: transparent;

    -webkit-text-stroke: 1.5px rgba(196, 163, 90, .55);

}

.city-caption {

    margin-top: .5rem;

    font-family: var(--font-label);

    font-size: .7rem;

    letter-spacing: .18em;

    text-transform: uppercase;

    color: var(--outline);

}



.district-line {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: .5rem;

    margin-top: 1.25rem;

    padding-top: 1rem;

    border-top: 1px solid var(--outline-variant);

}

.district { min-width: 0; }



.market-panel { padding: 1.5rem; }



.properties-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

    gap: 1rem;

}



.property-card {

    position: relative;

    display: flex;

    flex-direction: column;

    border: 1px solid var(--outline-variant);

    border-radius: var(--r-lg);

    background: rgba(23, 19, 16, .85);

    overflow: hidden;

    transition: border-color .2s ease, transform .15s ease, box-shadow .2s ease;

}

.property-card:hover {

    border-color: rgba(196, 163, 90, .45);

    transform: translateY(-3px);

    box-shadow: var(--shadow-lift);

}



.property-image {

    position: relative;

    display: grid;

    place-items: center;

    height: 120px;

    background:

        radial-gradient(circle at 50% 120%, rgba(179, 58, 70, .18), transparent 65%),

        var(--surface-lowest);

    border-bottom: 1px solid var(--outline-variant);

}

.property-icon { font-size: 2.2rem; color: var(--outline); opacity: .55; }

.property-tag {

    position: absolute;

    bottom: .5rem;

    left: .6rem;

    font-family: var(--font-label);

    font-size: 9px;

    letter-spacing: .18em;

    text-transform: uppercase;

    color: var(--outline);

}



.property-body { display: flex; flex-direction: column; flex: 1; padding: 1rem; }

.property-type {

    font-family: var(--font-label);

    font-size: 9px;

    letter-spacing: .2em;

    text-transform: uppercase;

    color: var(--outline);

}

.property-name {

    font-family: var(--font-display);

    font-size: 1.05rem;

    font-weight: 700;

    color: var(--secondary);

    margin-top: .15rem;

}

.property-desc {

    font-size: .74rem;

    color: var(--on-surface-variant);

    margin-top: .3rem;

    line-height: 1.5;

}

.property-body .metrics {

    grid-template-columns: repeat(2, 1fr);

    gap: .5rem;

    margin: .9rem 0;

}

.property-body .metric { padding: .55rem .65rem; }

.property-body .metric b { font-size: .82rem; }



.owner-line {

    padding-top: .7rem;

    border-top: 1px solid var(--outline-variant);

    font-family: var(--font-label);

    font-size: 9px;

    letter-spacing: .14em;

    text-transform: uppercase;

    color: var(--outline);

}

.owner-line strong { color: var(--on-surface); margin-left: .3rem; }



.property-body .actions { margin-top: auto; padding-top: .5rem; }







.bf-app {

    display: flex;

    flex-direction: column;

    gap: 1.25rem;

    max-width: 1280px;

    margin: 0 auto;

    width: 100%;

}



.bf-header {

    display: flex;

    flex-wrap: wrap;

    align-items: flex-end;

    justify-content: space-between;

    gap: 1rem;

    padding-bottom: 1rem;

    border-bottom: 1px solid var(--outline-variant);

}

.bf-header-left h1 { font-size: clamp(1.6rem, 4.5vw, 2.4rem); letter-spacing: -.03em; }



.bf-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }

@media (min-width: 1024px) { .bf-grid { grid-template-columns: 1.6fr 1fr; } }

.bf-col-main, .bf-col-side { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }



.bf-panel {

    padding: 1.25rem;

    background: rgba(23, 19, 16, .82);

    border: 1px solid var(--outline-variant);

    border-radius: var(--r-lg);

    box-shadow: var(--shadow-panel);

}

.bf-panel-gold   { border-color: rgba(196, 163, 90, .35); background: rgba(196, 163, 90, .04); }

.bf-panel-hazard { border-color: rgba(217, 107, 97, .35); background: rgba(217, 107, 97, .04); }



.bf-panel-title {

    display: flex;

    align-items: center;

    gap: .5rem;

    padding-bottom: .75rem;

    margin-bottom: 1rem;

    border-bottom: 1px solid var(--outline-variant);

    font-family: var(--font-label);

    font-size: .72rem;

    font-weight: 700;

    letter-spacing: .2em;

    text-transform: uppercase;

    color: var(--secondary);

}



.bf-rate-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1rem;

    padding: .6rem 0;

    border-bottom: 1px dashed rgba(77, 61, 49, .5);

    font-size: .82rem;

}

.bf-rate-row:last-child { border-bottom: 0; }



.bf-cost-display,

.bf-vault-display {

    display: flex;

    align-items: baseline;

    justify-content: space-between;

    gap: 1rem;

    padding: .9rem 1rem;

    background: var(--surface-lowest);

    border: 1px solid var(--outline-variant);

    border-radius: var(--r);

    margin: .75rem 0;

}

.bf-cost-display .bf-price-tag,

.bf-vault-val {

    font-size: 1.4rem;

    font-variant-numeric: tabular-nums;

}

.bf-vault-lbl {

    font-family: var(--font-label);

    font-size: 9px;

    letter-spacing: .2em;

    text-transform: uppercase;

    color: var(--outline);

}



.bf-admin-form {

    display: flex;

    flex-wrap: wrap;

    align-items: flex-end;

    gap: .75rem;

}

.bf-admin-form .bf-form-group { margin-bottom: 0; flex: 1 1 10rem; }







.settings-container { max-width: 1100px; margin: 0 auto; }



.settings-grid {

    display: grid;

    grid-template-columns: 1fr;

    gap: 1.5rem;

    align-items: start;

}

@media (min-width: 900px) { .settings-grid { grid-template-columns: 260px 1fr; } }



.settings-sidebar { display: flex; flex-direction: column; gap: 1rem; }

.settings-main    { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }



.avatar-card {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: .75rem;

    padding: 1.5rem;

    text-align: center;

    background: rgba(23, 19, 16, .85);

    border: 1px solid var(--outline-variant);

    border-radius: var(--r-lg);

}

.avatar-card img {

    width: 96px;

    height: 96px;

    border-radius: 50%;

    object-fit: cover;

    border: 2px solid var(--gold);

    box-shadow: 0 0 0 4px rgba(196, 163, 90, .1);

}



.card-header {

    display: flex;

    align-items: center;

    gap: .75rem;

    padding-bottom: .9rem;

    margin-bottom: 1.25rem;

    border-bottom: 1px solid var(--outline-variant);

}

.card-header h2,

.card-header h3 {

    font-family: var(--font-label);

    font-size: .78rem;

    letter-spacing: .2em;

    text-transform: uppercase;

    color: var(--secondary);

}

.card-icon {

    display: grid;

    place-items: center;

    width: 36px;

    height: 36px;

    flex: 0 0 36px;

    border-radius: var(--r-sm);

    background: rgba(179, 58, 70, .14);

    color: var(--primary);

}





.id-card {

    position: relative;

    padding: 1.5rem;

    overflow: hidden;



    background:

        repeating-linear-gradient(0deg, rgba(0,0,0,.02) 0 1px, transparent 1px 4px),

        #ece0c0;

    border: 1px solid #b9a878;

    border-radius: var(--r);

    box-shadow: inset 0 0 30px rgba(0, 0, 0, .09), var(--shadow-lift);



    color: #2b2b2b;

    font-family: var(--font-label);

}





.id-card::before {

    content: 'APPROVED';

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%) rotate(-24deg);

    padding: .5rem 1rem;



    font-family: var(--font-display);

    font-size: clamp(2rem, 8vw, 3.5rem);

    font-weight: 900;

    letter-spacing: .12em;



    color: rgba(163, 34, 45, .13);

    border: 5px solid rgba(163, 34, 45, .13);

    border-radius: var(--r);

    pointer-events: none;

}



.id-header {

    padding-bottom: .75rem;

    margin-bottom: 1rem;

    text-align: center;

    border-bottom: 2px solid #2b2b2b;

}

.id-header h2 {

    font-family: var(--font-display);

    font-size: 1.4rem;

    letter-spacing: .14em;

    color: #17110b;

}

.id-header p {

    margin: .2rem 0 0;

    font-size: .68rem;

    letter-spacing: .16em;

    text-transform: uppercase;

    color: #6b6154;

}



.id-row {

    display: flex;

    align-items: baseline;

    justify-content: space-between;

    gap: 1rem;

    padding: .55rem 0;

    border-bottom: 1px dotted #a89b80;

}

.id-row:last-of-type { border-bottom: 0; }



.id-label {

    font-size: .68rem;

    font-weight: 700;

    letter-spacing: .14em;

    text-transform: uppercase;

    color: #6b6154;

}

.id-val {

    font-weight: 700;

    color: #17110b;

    word-break: break-all;

    text-align: right;

}

.id-val.is-active { color: #2e7d32; }



.id-foot {

    margin-top: 1.25rem;

    text-align: center;

    font-size: .6rem;

    letter-spacing: .18em;

    text-transform: uppercase;

    color: #8a7f6c;

    line-height: 1.8;

}





.stamp-overlay {

    position: absolute;

    top: 50%;

    left: 50%;

    z-index: 2;

    transform: translate(-50%, -50%) rotate(-14deg);



    padding: .4rem 1.2rem;

    border: 4px solid currentColor;

    border-radius: var(--r-sm);



    font-family: var(--font-display);

    font-size: clamp(1.2rem, 5vw, 2rem);

    font-weight: 900;

    letter-spacing: .18em;



    background: rgba(11, 9, 8, .55);

    pointer-events: none;

}

.breathing-glow { animation: gm-breathe 2.8s ease-in-out infinite; }

@keyframes gm-breathe {

    0%, 100% { opacity: .82; }

    50%      { opacity: 1; }

}







.pf-file {

    position: relative;

    padding: 1.5rem;

    margin-bottom: 1.5rem;

    overflow: hidden;



    background: rgba(11, 9, 8, .55);

    border: 1px solid var(--outline-variant);

    border-left: 4px solid var(--gold);

    border-radius: var(--r-lg);

}



.pf-file::after {

    content: '\f2c2';

    font-family: 'Font Awesome 6 Free';

    font-weight: 900;

    position: absolute;

    top: -.5rem;

    right: 1rem;

    font-size: 6rem;

    color: var(--on-surface);

    opacity: .04;

    pointer-events: none;

}



.pf-file-head {

    position: relative;

    z-index: 1;

    display: flex;

    flex-wrap: wrap;

    align-items: flex-start;

    justify-content: space-between;

    gap: 1rem;

}

.pf-dossier {

    font-family: var(--font-label);

    font-size: .68rem;

    letter-spacing: .2em;

    text-transform: uppercase;

    color: var(--outline);

}

.pf-dossier b { color: var(--gold-bright); font-weight: 700; }



.pf-name {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: .75rem;

    margin: .35rem 0 .6rem;

    font-size: clamp(1.7rem, 5vw, 2.4rem);

    letter-spacing: -.02em;

    color: var(--secondary);

}



.pf-facts {

    display: flex;

    flex-wrap: wrap;

    gap: .4rem 1rem;

    font-family: var(--font-label);

    font-size: .76rem;

    color: var(--on-surface-variant);

}

.pf-facts i { color: var(--gold); margin-right: .3rem; }



.pf-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }

@media (min-width: 900px) { .pf-grid { grid-template-columns: 300px 1fr; align-items: start; } }



.pf-col { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }



.pf-avatar {

    position: relative;

    margin-bottom: 1rem;

    border: 1px solid var(--outline-variant);

    border-radius: var(--r);

    overflow: hidden;

    background: #000;

}

.pf-avatar img {

    width: 100%;

    display: block;

    filter: grayscale(.25) contrast(1.08);

}

.pf-avatar-cap {

    position: absolute;

    inset: auto 0 0 0;

    padding: 1.5rem .9rem .7rem;

    background: linear-gradient(transparent, rgba(11, 9, 8, .95));

}

.pf-avatar-cap h2 { font-size: 1.25rem; color: #fff; }

.pf-avatar-cap span {

    font-family: var(--font-label);

    font-size: .7rem;

    letter-spacing: .14em;

    text-transform: uppercase;

    color: var(--gold-bright);

}



.pf-vitality { margin-bottom: 1rem; }

.pf-vitality .stat-row { margin-bottom: 0; }



.pf-stats {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: .5rem;

}

.pf-stats .stat { text-align: center; padding: .8rem .5rem; }





.pf-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1rem;

    padding: .65rem .8rem;

    background: rgba(0, 0, 0, .25);

    border-left: 2px solid var(--outline-variant);

    border-radius: 0 var(--r-sm) var(--r-sm) 0;

}

.pf-row + .pf-row { margin-top: .5rem; }

.pf-row > span:first-child {

    font-family: var(--font-label);

    font-size: .72rem;

    letter-spacing: .12em;

    text-transform: uppercase;

    color: var(--outline);

}

.pf-row strong, .pf-row > span:last-child { color: var(--on-surface); text-align: right; }



.pf-row.is-gold   { border-left-color: var(--gold); }

.pf-row.is-danger { border-left-color: var(--error); }

.pf-row.is-safe   { border-left-color: var(--green); }

.pf-row.is-accent { border-left-color: var(--tertiary); }



.pf-power { display: flex; align-items: center; gap: .75rem; flex: 1; justify-content: flex-end; }

.pf-power .stat-bar-bg { max-width: 160px; }



.pf-statement {

    padding: 1.25rem;

    background: rgba(0, 0, 0, .3);

    border: 1px dashed var(--outline-variant);

    border-radius: var(--r);

    font-style: italic;

    line-height: 1.75;

    color: var(--on-surface);

}

.pf-statement.is-empty { text-align: center; font-style: normal; color: var(--outline-variant); }





.pf-panel-admin { border-color: rgba(217, 107, 97, .45); }

.pf-panel-staff { border-color: rgba(91, 191, 122, .45); }



.pf-panel-admin > h3 { color: var(--error); }

.pf-panel-staff > h3 { color: var(--green-palm); }



.pf-title {

    display: flex;

    align-items: center;

    gap: .5rem;

    padding-bottom: .75rem;

    margin-bottom: 1rem;

    border-bottom: 1px solid var(--outline-variant);

    font-family: var(--font-label);

    font-size: .78rem;

    font-weight: 700;

    letter-spacing: .18em;

    text-transform: uppercase;

    color: var(--gold-bright);

}



.pf-intel-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));

    gap: .6rem;

    margin-bottom: 1.25rem;

}

.pf-intel {

    padding: .6rem .75rem;

    background: rgba(0, 0, 0, .45);

    border-left: 2px solid var(--outline-variant);

}

.pf-panel-admin .pf-intel { border-left-color: var(--error); }

.pf-panel-staff .pf-intel { border-left-color: var(--green-palm); }

.pf-intel small {

    display: block;

    font-family: var(--font-label);

    font-size: .64rem;

    letter-spacing: .16em;

    text-transform: uppercase;

    color: var(--outline);

}

.pf-intel div {

    font-family: var(--font-label);

    color: var(--on-surface);

    font-variant-numeric: tabular-nums;

    word-break: break-all;

}



.pf-actions { display: flex; flex-wrap: wrap; gap: .6rem; }

.pf-actions > * { flex: 1 1 10rem; justify-content: center; }





.story ul { list-style: none; margin: 1rem 0 0; padding: 0; }

.story li {

    display: flex;

    align-items: center;

    gap: .6rem;

    padding: .35rem 0;

    font-family: var(--font-label);

    font-size: .76rem;

    letter-spacing: .06em;

    color: var(--on-surface-variant);

}

.story li span { color: var(--gold); }



.crest {

    display: grid;

    place-items: center;

    width: 56px;

    height: 56px;

    margin-bottom: 1rem;

    border: 1px solid var(--gold);

    border-radius: 50%;

    font-family: var(--font-display);

    font-size: .72rem;

    font-weight: 700;

    letter-spacing: .1em;

    color: var(--gold-bright);

    background: rgba(196, 163, 90, .07);

}







.gta-hud {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: space-between;

    gap: 1rem;

    padding: 1rem 1.25rem;

    margin-bottom: 1.25rem;

    background: rgba(11, 9, 8, .7);

    border: 1px solid var(--outline-variant);

    border-radius: var(--r-lg);

}

.hud-left, .hud-right { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }



.tabs {

    display: flex;

    flex-wrap: wrap;

    gap: .35rem;

    margin-bottom: 1.25rem;

    border-bottom: 1px solid var(--outline-variant);

}

.tabs a {

    padding: .65rem 1rem;

    margin-bottom: -1px;

    border-bottom: 2px solid transparent;

    font-family: var(--font-label);

    font-size: .72rem;

    letter-spacing: .14em;

    text-transform: uppercase;

    color: var(--on-surface-variant);

    transition: color .15s ease, border-color .15s ease;

}

.tabs a:hover { color: var(--on-surface); }

.tabs a.active {

    color: var(--gold-bright);

    border-bottom-color: var(--gold);

}



.districts-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

    gap: 1rem;

}





.district-card {

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    min-height: 200px;

    padding: 1.25rem;

    border: 1px solid var(--outline-variant);

    border-radius: var(--r-lg);

    overflow: hidden;

    isolation: isolate;

    transition: border-color .2s ease, transform .15s ease;

}

.district-card:hover { border-color: var(--gold); transform: translateY(-3px); }



.district-bg {

    position: absolute;

    inset: 0;

    z-index: -1;

    background-size: cover;

    background-position: center;

    filter: grayscale(.6) brightness(.32);

    transition: filter .35s ease, transform .5s ease;

}

.district-card:hover .district-bg { filter: grayscale(.15) brightness(.5); transform: scale(1.04); }



.district-card::after {

    content: '';

    position: absolute;

    inset: 0;

    z-index: -1;

    background: linear-gradient(180deg, transparent 25%, rgba(11, 9, 8, .92));

}



.district-content { position: relative; }

.district-content h3 { font-size: 1.15rem; color: var(--secondary); }

.district-content p  { font-size: .76rem; color: var(--on-surface-variant); margin: .25rem 0 .75rem; }



.cooldown-btn {

    opacity: .5;

    cursor: not-allowed;

    pointer-events: none;

}



.garage-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

    gap: 1rem;

}

.car-info { display: flex; flex-direction: column; gap: .2rem; }

.car-price {

    font-family: var(--font-label);

    font-variant-numeric: tabular-nums;

    color: var(--gold-bright);

    font-weight: 700;

}







.jail-card {

    position: relative;

    max-width: 520px;

    margin: 3rem auto;

    padding: 2.5rem 2rem;

    text-align: center;

    background: rgba(11, 9, 8, .9);

    border: 1px solid var(--outline-variant);

    border-radius: var(--r-lg);

    overflow: hidden;

}





.jail-bars {

    position: absolute;

    inset: 0;

    background: repeating-linear-gradient(90deg,

        transparent 0 26px,

        rgba(0, 0, 0, .55) 26px 34px);

    pointer-events: none;

    z-index: 2;

}

.jail-card > *:not(.jail-bars) { position: relative; z-index: 1; }









.report-card,

.appeal-card,

.fine-card {

    padding: 1.1rem 1.25rem;

    margin-bottom: 1rem;

    background: rgba(23, 19, 16, .8);

    border: 1px solid var(--outline-variant);

    border-left: 3px solid var(--outline);

    border-radius: var(--r);

}

.report-card { border-left-color: var(--error); }

.appeal-card { border-left-color: var(--warning); }

.fine-card   { border-left-color: var(--gold); }



.report-meta,

.appeal-meta,

.fine-meta {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: .75rem;

    margin-bottom: .6rem;

    font-family: var(--font-label);

    font-size: 10px;

    letter-spacing: .12em;

    text-transform: uppercase;

    color: var(--outline);

}

.report-meta strong,

.appeal-meta strong,

.fine-meta strong { color: var(--gold-bright); }



.report-reason,

.appeal-msg {

    padding: .8rem .9rem;

    background: var(--surface-lowest);

    border-radius: var(--r-sm);

    font-size: .84rem;

    line-height: 1.6;

    color: var(--on-surface-variant);

    white-space: pre-wrap;

    word-break: break-word;

}





.op-chip {

    padding: .4rem .75rem;

    font-size: 10px;

    background: rgba(11, 9, 8, .6);

    transition: border-color .15s ease, color .15s ease;

}

.op-chip:hover { border-color: var(--gold); color: var(--secondary); }

.op-chip .dot { margin-right: .1rem; }



.travel-btn { width: 100%; }



.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }









.vc-container {

    max-width: 1280px;

    margin: 0 auto;

    width: 100%;

}



.vc-panel {

    padding: 1.25rem;

    background: rgba(23, 19, 16, .82);

    border: 1px solid var(--outline-variant);

    border-radius: var(--r-lg);

    box-shadow: var(--shadow-panel);

    margin-bottom: 1.25rem;

}



.vc-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: .5rem;

    padding: .7rem 1.25rem;

    background: linear-gradient(180deg, var(--primary), #8f2c36);

    border: 1px solid rgba(255, 243, 220, .22);

    border-radius: var(--r);

    color: var(--on-primary);

    font-family: var(--font-label);

    font-size: .72rem;

    font-weight: 700;

    letter-spacing: .16em;

    text-transform: uppercase;

    cursor: pointer;

    transition: background .18s ease, box-shadow .18s ease, transform .12s ease;

}

.vc-btn:hover {

    background: linear-gradient(180deg, #c74450, #a03340);

    color: var(--on-primary);

    box-shadow: 0 10px 26px -14px rgba(179, 58, 70, .9);

}

.vc-btn:active { transform: translateY(1px); }

.vc-btn:disabled { opacity: .4; cursor: not-allowed; }



.vc-btn-outline {

    background: transparent;

    border-color: var(--outline-variant);

    color: var(--on-surface-variant);

}

.vc-btn-outline:hover {

    background: rgba(255, 255, 255, .04);

    border-color: var(--gold);

    color: var(--secondary);

    box-shadow: none;

}





.msg-list { display: flex; flex-direction: column; gap: .5rem; }

.msg-item {

    display: flex;

    align-items: center;

    gap: .75rem;

    padding: .85rem 1rem;

    background: rgba(23, 19, 16, .7);

    border: 1px solid var(--outline-variant);

    border-radius: var(--r);

    transition: border-color .15s ease, background .15s ease;

}

.msg-item:hover { border-color: var(--outline); background: rgba(255, 255, 255, .03); }

.msg-item.unread { border-left: 3px solid var(--primary); background: rgba(179, 58, 70, .06); }

.msg-sender { font-family: var(--font-label); font-size: .74rem; color: var(--gold-bright); }

.msg-subject { font-size: .86rem; color: var(--on-surface); }

.msg-time { margin-left: auto; font-family: var(--font-label); font-size: 10px; color: var(--outline); }

.msg-body {

    padding: 1.25rem;

    background: var(--surface-lowest);

    border: 1px solid var(--outline-variant);

    border-radius: var(--r);

    line-height: 1.75;

    white-space: pre-wrap;

    word-break: break-word;

}



.hb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }

.hb-card {

    padding: 1.1rem;

    background: rgba(23, 19, 16, .8);

    border: 1px solid var(--outline-variant);

    border-radius: var(--r-lg);

}

.hb-label {

    font-family: var(--font-label);

    font-size: 9px;

    letter-spacing: .2em;

    text-transform: uppercase;

    color: var(--outline);

}

.hb-value {

    font-family: var(--font-label);

    font-size: 1.3rem;

    font-weight: 700;

    font-variant-numeric: tabular-nums;

    color: var(--on-surface);

}







.vip-app { display: flex; flex-direction: column; gap: 1.5rem; }



.vip-header { max-width: 46rem; }

.vip-header h1 {

    margin-top: .35rem;

    font-size: clamp(1.8rem, 5vw, 2.6rem);

    letter-spacing: -.03em;

}

.vip-header h1 span { color: var(--primary); }

.vip-header p { margin-top: .5rem; }



.vip-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));

    gap: 1rem;

}





.vip-card {

    --tier: var(--outline);



    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;



    padding: 1.5rem 1.25rem 1.25rem;

    border: 1px solid var(--outline-variant);

    border-top: 3px solid var(--tier);

    border-radius: var(--r-lg);

    overflow: hidden;



    background:

        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--tier) 12%, transparent), transparent 65%),

        rgba(23, 19, 16, .85);



    transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;

}

.vip-card:hover {

    transform: translateY(-3px);

    box-shadow: 0 22px 44px -28px color-mix(in srgb, var(--tier) 70%, black);

}



.vip-card.is-common    { --tier: var(--outline); }

.vip-card.is-rare      { --tier: #5b8fd9; }

.vip-card.is-epic      { --tier: #9a6bd0; }

.vip-card.is-legendary { --tier: var(--gold); }



.vip-tag {

    position: absolute;

    top: .7rem;

    right: .7rem;



    padding: .2rem .5rem;

    border: 1px solid var(--tier);

    border-radius: 999px;



    font-family: var(--font-label);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .14em;

    text-transform: uppercase;

    color: var(--tier);

    background: rgba(11, 9, 8, .7);

}

.vip-tag.is-vip {

    border-color: var(--gold-bright);

    color: var(--on-secondary);

    background: var(--gold);

}



.vip-icon {

    font-size: 2rem;

    color: var(--tier);

    margin-bottom: .75rem;

}



.vip-rarity {

    font-family: var(--font-label);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .22em;

    text-transform: uppercase;

    color: var(--tier);

}



.vip-name {

    margin-top: .2rem;

    font-size: 1.05rem;

    color: var(--secondary);

}



.vip-desc {

    margin: .35rem 0 0;

    font-size: .74rem;

    line-height: 1.5;

    color: var(--on-surface-variant);

    min-height: 2.2em;

}





.vip-credits {

    margin-top: 1rem;

    font-family: var(--font-label);

    font-size: 1.7rem;

    font-weight: 700;

    font-variant-numeric: tabular-nums;

    letter-spacing: -.02em;

    color: var(--on-surface);

}

.vip-credits span {

    display: block;

    margin-top: .1rem;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .2em;

    text-transform: uppercase;

    color: var(--outline);

}



.vip-price {

    margin: .5rem 0 1rem;

    padding-top: .6rem;

    width: 100%;

    border-top: 1px dashed var(--outline-variant);



    font-family: var(--font-label);

    font-size: .95rem;

    font-variant-numeric: tabular-nums;

    color: var(--gold-bright);

}



.vip-form { width: 100%; margin-top: auto; }

.vip-form .btn { width: 100%; }



.vip-info { padding: 1.25rem; }





.vip-redirect {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: .75rem;

    max-width: 30rem;

    margin: 3rem auto;

    padding: 2.5rem 2rem;

    text-align: center;

}

.vip-redirect > i { font-size: 2.5rem; color: var(--outline); }

.vip-redirect h2  { font-size: 1.3rem; color: var(--secondary); }



.vip-invoice {

    padding: .35rem .75rem;

    border: 1px dashed var(--outline-variant);

    border-radius: var(--r-sm);

    font-family: var(--font-label);

    font-size: .72rem;

    letter-spacing: .1em;

    color: var(--gold-bright);

}



.vip-redirect .btn { width: 100%; max-width: 18rem; }







@media print {

    .gm-side, .gm-backdrop, nav, .tabs, .actions, .btn { display: none !important; }

    .gm-main { padding: 0 !important; }

    body { background: #fff; color: #000; }

}





.container {

    width: 100%;

    max-width: 1200px;

    margin-left: auto;

    margin-right: auto;

    padding-left: 1rem;

    padding-right: 1rem;

}





.lp-header {

    position: sticky;

    top: 0;

    z-index: 40;

    background: rgba(16, 14, 13, .82);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    border-bottom: 1px solid var(--outline-variant);

}

.lp-header-inner {

    max-width: 1180px;

    margin: 0 auto;

    padding: .9rem 1.25rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1rem;

}

.lp-logo {

    font-family: var(--font-display);

    font-size: 1.5rem;

    font-weight: 700;

    font-style: italic;

    letter-spacing: -.02em;

    color: var(--secondary);

}

.lp-logo span { color: var(--primary); }

.lp-nav { display: flex; align-items: center; gap: 1rem; }

.lp-nav > a:not(.btn) {

    font-family: var(--font-label);

    font-size: .72rem;

    font-weight: 700;

    letter-spacing: .14em;

    text-transform: uppercase;

    color: var(--on-surface-variant);

}

.lp-nav > a:not(.btn):hover { color: var(--secondary); }





.lp-hero {

    position: relative;

    overflow: hidden;

    padding: clamp(3rem, 8vw, 6rem) 1.25rem clamp(3.5rem, 9vw, 6.5rem);

    background:

        radial-gradient(1200px 600px at 70% -10%, rgba(179, 58, 70, .18), transparent 60%),

        radial-gradient(900px 500px at 10% 110%, rgba(196, 163, 90, .08), transparent 60%),

        var(--surface-lowest);

    border-bottom: 1px solid var(--outline-variant);

}

.lp-hero-overlay {

    position: absolute;

    inset: 0;

    background: repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 2px, transparent 2px 7px);

    pointer-events: none;

}

.lp-hero-inner {

    position: relative;

    max-width: 720px;

    margin: 0 auto;

    text-align: center;

}

.lp-hero-title {

    font-size: clamp(2.2rem, 7vw, 4rem);

    font-style: italic;

    letter-spacing: -.03em;

    color: var(--secondary);

    line-height: 1.02;

    text-shadow: 0 2px 20px rgba(0, 0, 0, .8);

}

.lp-hero-sub {

    margin: .75rem 0 2rem;

    font-family: var(--font-label);

    font-size: .8rem;

    letter-spacing: .18em;

    text-transform: uppercase;

    color: var(--on-surface-variant);

    text-shadow: 0 1px 12px rgba(0, 0, 0, .85);

}



.lp-access {

    max-width: 460px;

    margin: 0 auto;

    text-align: left;

}





.lp-band { padding: clamp(3rem, 7vw, 5rem) 1.25rem; }

.lp-band-dark { background: var(--surface-lowest); border-top: 1px solid var(--outline-variant); border-bottom: 1px solid var(--outline-variant); }



.lp-trio {

    max-width: 1080px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr;

    gap: 2rem;

    text-align: center;

}

@media (min-width: 780px) { .lp-trio { grid-template-columns: repeat(3, 1fr); } }

.lp-trio-ico { font-size: 2.4rem; color: var(--gold-bright); }

.lp-trio-item h3 {

    margin: .6rem 0 .4rem;

    font-size: 1.1rem;

    color: var(--secondary);

}

.lp-trio-item p { color: var(--on-surface-variant); font-size: .86rem; line-height: 1.6; }





.lp-stats-band {

    background: var(--surface-lowest);

    border-top: 1px solid var(--outline-variant);

    border-bottom: 1px solid var(--outline-variant);

    padding: 2.5rem 1.25rem;

}

.lp-stats {

    max-width: 1080px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 1.5rem;

    text-align: center;

}

@media (min-width: 780px) { .lp-stats { grid-template-columns: repeat(4, 1fr); } }

.lp-stat b {

    display: block;

    font-family: var(--font-display);

    font-size: clamp(1.8rem, 5vw, 2.6rem);

    font-weight: 700;

    color: var(--secondary);

    font-variant-numeric: tabular-nums;

}

.lp-stat small {

    display: block;

    margin-top: .3rem;

    font-family: var(--font-label);

    font-size: .68rem;

    letter-spacing: .16em;

    text-transform: uppercase;

    color: var(--outline);

}





.lp-lore {

    max-width: 760px;

    margin: 0 auto;

    text-align: center;

}

.lp-lore p { color: var(--on-surface-variant); line-height: 1.85; margin-bottom: 1.1rem; }





.lp-two {

    max-width: 1080px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr;

    gap: 2rem;

    align-items: center;

}

@media (min-width: 860px) { .lp-two { grid-template-columns: 1fr 1fr; } }

.lp-cta h2 {

    font-size: clamp(1.6rem, 4vw, 2.2rem);

    color: var(--secondary);

    margin-bottom: 1.25rem;

    line-height: 1.15;

}

.lp-board {

    padding: 1.5rem;

    background: rgba(23, 19, 16, .82);

    border: 1px solid var(--outline-variant);

    border-radius: var(--r-lg);

}

.lp-board h3 { color: var(--secondary); font-size: 1.05rem; }





.lp-footer {

    padding: 2.5rem 1.25rem;

    text-align: center;

    background: var(--surface-lowest);

    border-top: 1px solid var(--outline-variant);

    color: var(--outline);

    font-family: var(--font-label);

    font-size: .74rem;

    letter-spacing: .12em;

}