/* ============================================================================
   GOVEE MAFIA — global-mafia.css
   ----------------------------------------------------------------------------
   Rescris de la zero. Inlocuieste global-mafia.css + theme_v3.css.

   REGULI DE AUR (de ce era stricat inainte):

   1. NU punem `overflow: hidden` pe html/body. Asta taia paginile lungi
      (home, drugs, missions) la prima fereastra.

   2. NU punem `width: 100%` pe `input`/`select` ca selector de element.
      De aici veneau casetele uriase din Family Registry: fiecare <select>
      lua latime totala si sarea pe rand propriu. Latimea se da pe clasa
      (.control, .form-input) sau prin Tailwind, niciodata global.

   3. Specificitate mica. Tailwind ruleaza din CDN si trebuie sa poata bate
      componentele astea cand o pagina cere explicit `w-full`, `text-xs` etc.
      Un `!important` aici e un bug maine.

   Ordinea sectiunilor:
      01 tokens · 02 reset · 03 shell · 04 tipografie · 05 panouri
      06 butoane · 07 formulare · 08 statistici · 09 badge-uri · 10 alerte
      11 tabele · 12 efecte · 13 pagini publice · 14 proprietati
      15 uzina de munitie · 16 setari · 17 motors · 18 inchisoare
      19 diverse · 20 compat theme_v3 (.vc-*, .msg-*, .hb-*)
   ============================================================================ */

/* ══ 01 · TOKENS ══════════════════════════════════════════════════════════ */

:root {
    /* Paleta — identica cu tailwind.config din _header.php. Daca schimbi una,
       schimb-o in ambele locuri sau shell-ul si paginile se despart. */
    --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;

    /* ── ALIASURI LEGACY ──────────────────────────────────────────────────
       Paginile au `style="color: var(--text-muted)"` scris direct in markup,
       in 200+ de locuri. Variabilele traiau in theme_v3.css. Fara ele, fiecare
       declaratie e invalida si proprietatea cade pe initial — text alb pe alb,
       borduri disparute, butoane fara culoare.

       Le mapam pe paleta noua. Asa nu trebuie sa umblu prin toate paginile
       acum, iar cand o pagina e rescrisa isi pierde singura aliasurile. */
    --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;

    /* Vice-city, ramase din tema veche. Le tinem calde, nu neon. */
    --vc-purple: #8b5cf6;
    --vc-pink: #d9578a;
    --vc-cyan: #22d3ee;

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

    /* Tipografie */
    --font-display: 'Space Grotesk', Georgia, serif;
    --font-body: 'Space Mono', ui-monospace, monospace;
    --font-label: 'JetBrains Mono', ui-monospace, monospace;

    /* Ritm */
    --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);

    /* Inaltimile shell-ului. .gm-main din _header.php le foloseste. */
    --topbar-h: 64px;
    --strip-h: 48px;
    --bottom-h: 88px;
    --side-w: 256px;
}

/* ══ 02 · RESET ═══════════════════════════════════════════════════════════ */

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

html {
    /* Inaltime auto, scroll pe body. Fara asta paginile lungi se taie. */
    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 vizibil pentru tastatura — nu-l stergem, il facem sa arate bine. */
: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. Firefox intai, apoi WebKit. */
* {
    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;
    }
}

/* ══ 03 · SHELL ═══════════════════════════════════════════════════════════ */
/* .gm-main, .gm-side, .gm-badge, .gm-backdrop stau in <style> din _header.php.
   Aici doar completam ce lipsea. */

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

/* Bara de statistici de sub top bar: pe telefon se scroll-uieste orizontal,
   fara scrollbar vizibil. */
.gm-strip {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

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

/* Meniul lateral: linkul activ marcat cu bara aurie (definit si in _header.php,
   repetat aici pentru paginile care nu incarca shell-ul). */
.gm-nav-link {
    transition: background .15s ease, color .15s ease;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
    user-select: none;
}

/* ══ 04 · TIPOGRAFIE ══════════════════════════════════════════════════════ */

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

/* ══ 05 · PANOURI ═════════════════════════════════════════════════════════ */

/* .glass-panel e clasa cea mai folosita din joc (107 aparitii). Ea da
   identitatea vizuala: sticla afumata peste lemn inchis, cu o linie aurie
   subtire sus care se aprinde la hover. */
.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;
}

/* Filamentul auriu. Un singur accent, discret, in loc de borduri stralucitoare
   peste tot. */
.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 e uneori pus PE .panel (properties.php). Nu-l lasam sa creeze
   un panou in interiorul panoului. */
.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;
}

/* ══ 06 · BUTOANE ═════════════════════════════════════════════════════════ */

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

/* Actiunea principala. Rosu-vin, plin — una singura pe ecran. */
.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);
}

/* Bani incasati. Verde, dar spalacit — nu neon. */
.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;
}

/* ══ 07 · FORMULARE ═══════════════════════════════════════════════════════ */
/* Fara `input { width: 100% }`. Latimea vine din clasa sau din Tailwind. */

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
select,
textarea {
    background-color: var(--surface-lowest);
    color: var(--on-surface);
}

.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 = un input intr-o carcasa, cu loc pentru iconita la stanga si o
   unitate/actiune la dreapta. */
.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;
}

/* Autofill: browserul forta un fundal alb/galben peste inputurile completate
   automat (email/username salvat). Il pastram intunecat PESTE TOT. Trucul e un
   box-shadow inset gros in culoarea temei, care acopera fundalul browserului.
   Se aplica la ORICE input, in .control sau nu — toate au acelasi fundal
   (--surface-lowest), deci o singura culoare le prinde pe toate. */
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);
    /* Intarzie tranzitia de fundal cu ani, ca sa nu apuce sa "clipeasca" alb. */
    transition: background-color 100000s ease-in-out 0s !important;
}

/* Firefox foloseste alta proprietate pentru fundalul de autofill. */
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);
}

/* Inputuri „goale”, fara carcasa. */
.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 = campuri pe acelasi rand, care se rup frumos pe telefon.
   AICI era bug-ul din Family Registry: selecturile primeau 100% latime si
   sareau fiecare pe randul lui. Acum se dimensioneaza dupa continut. */
.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);
}

/* Select-uri: sageata proprie, ca cea nativa e alba si urata pe fundal negru. */
.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 — patrat, nu rotund. Bifa e o mica pana aurie. */
.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);
}

/* Juramantul de la inregistrare. Il tratam ca pe un document, nu ca pe un
   checkbox de newsletter. */
.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);
}

/* Taria parolei. */
.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);
}

/* ══ 08 · STATISTICI ══════════════════════════════════════════════════════ */

.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);
    /* Cifre monospatiate: coloanele nu mai danseaza cand se schimba suma. */
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
    word-break: break-word;
}

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

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

/* Bara de progres reutilizabila (motors, profil). */
.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;
}

/* ══ 09 · BADGE-URI ═══════════════════════════════════════════════════════ */

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

/* Punctul de prezenta. Verde = online, si pulseaza. */
.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);
    }
}

/* Stelele de urmarire. Rosii cand esti cautat, stinse cand nu. */
.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);
}

/* ══ 10 · ALERTE ══════════════════════════════════════════════════════════ */

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

/* Starea goala: o invitatie sa faci ceva, nu un cimitir. */
.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);
}

/* ══ 11 · TABELE ══════════════════════════════════════════════════════════ */

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

/* Pe telefon tabelul se scroll-uieste orizontal in loc sa sparga layoutul. */
@media (max-width: 640px) {
    .result-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* ══ 12 · EFECTE ══════════════════════════════════════════════════════════ */

/* Un accent rece, folosit rar (finante, bursa, familie) — contrapunct la aur. */
.glow-cyan {
    color: var(--info);
    text-shadow: 0 0 18px rgba(125, 211, 252, .35);
}

/* Linia de scanare peste panourile „live” (spital, home). Ambient, nu decor:
   marcheaza ecranele care se actualizeaza singure. */
.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;
    }
}

/* Numaratoare inversa. Cifre mari, monospatiate, care nu tresar. */
.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);
}

/* ══ 13 · PAGINI PUBLICE (login / signup) ═════════════════════════════════ */

.page-shell {
    position: relative;
    z-index: 1;
    max-width: 1120px;
    margin: 0 auto;
    padding: 3rem 1.25rem 4rem;
}

/* Motto-ul vertical pe marginea din stanga. Semnatura paginii de login:
   text urias, rotit, aproape topit in fundal. */
.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);
    /* Se stinge spre baza, ca sa nu para o poza lipita pe fundal. */
    -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);
}

/* Despartitorul cu simbolul de carte de joc. */
.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;
}

/* Alegerea drumului la inregistrare — carduri, nu radio-uri. */
.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);
}

/* ══ 14 · PROPRIETATI ═════════════════════════════════════════════════════ */

.estate-app {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* Fara asta, pagina se intindea de la un capat la altul al ecranului pe
       monitoare late si cardurile pareau imprastiate. O centram, ca restul jocului. */
    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;
    }
}

/* Cartonasul orasului: codul din trei litere, cat mai mare, ca pe o placa de
   inmatriculare. */
.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;
}

/* ══ 15 · UZINA DE MUNITIE ════════════════════════════════════════════════ */

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

/* ══ 16 · SETARI ══════════════════════════════════════════════════════════ */

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

/* ── Legitimatia de sindicat ──────────────────────────────────────────────
   Semnatura paginii de setari. Singura suprafata deschisa la culoare din tot
   jocul: un act pe hartie, tiparit la masina de scris, cu stampila de aprobare
   peste el. Contrastul cu restul interfetei e intentionat — un document e un
   obiect, nu un panou. */
.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);
}

/* Stampila. Rotita, semi-transparenta, sub text. */
.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;
}

/* ── Stampila de status peste avatar (K.I.A. / BANNED) ────────────────── */
.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;
    }
}

/* ── Profil ───────────────────────────────────────────────────────────── */

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

/* Filigranul de dosar. Doar atat — nu are nevoie de mai mult. */
.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;
}

/* Randurile de intel: bara colorata din stanga codifica sursa informatiei. */
.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);
}

/* Panourile de staff. Chenarul spune de la ce nivel esti privit. */
.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;
}

/* ── Lista din panoul de poveste (signup) ─────────────────────────────── */
.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);
}

/* ══ 17 · MOTORS ══════════════════════════════════════════════════════════ */

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

/* Zona de furt: fotografia zonei, intunecata, cu textul deasupra. Se lumineaza
   la hover — singurul loc din joc unde imaginea „raspunde”. */
.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;
}

/* ══ 18 · INCHISOARE ══════════════════════════════════════════════════════ */

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

/* Gratiile. Trebuie sa fie deasupra continutului — de asta esti inauntru. */
.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;
}

/* ══ 19 · DIVERSE ═════════════════════════════════════════════════════════ */

/* Carduri de moderare (rapoarte, contestatii, amenzi) — aceeasi anatomie,
   accent diferit dupa gravitate. */
.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;
}

/* Nodurile de operatiuni de pe home. */
.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;
}

/* ══ 20 · COMPAT theme_v3 (.vc-*) ═════════════════════════════════════════ */
/* Folosite inca de: drugs, motors, profile, stock, messages.
   Le tinem aici ca sa dispara al doilea stylesheet. Cand ultima clasa .vc-*
   e convertita la .glass-panel / .btn, sectiunea asta se sterge. */

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

/* Mesaje (.msg-*) si home base (.hb-*) — scheletul minim, ca paginile
   neconvertite sa nu arate ca un document Word. */
.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);
}

/* ══ 20 · MAGAZINUL PREMIUM ═══════════════════════════════════════════════ */

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

/* Pachetul e un plic. Raritatea vine dintr-o singura variabila — --tier — pe
   care fiecare .is-* o seteaza. Fara sase seturi de reguli aproape identice. */
.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;
}

/* Numarul de credite e eroul cartonasului. Pretul e nota de subsol — asa si
   trebuie: jucatorul cumpara credite, nu cheltuieste euro. */
.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;
}

/* Ecranul de trecere spre PayPal. Linistit — omul e pe cale sa dea bani. */
.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;
}

/* ══ PRINT ════════════════════════════════════════════════════════════════ */

@media print {

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

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

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

/* ══ 22 · CONTAINER (pagini admin/staff) ══════════════════════════════════════
   appeals, restrictions, fines, reports, economy, donations folosesc
   class="container". Nu era definita nicaieri, iar `.container` din Tailwind CDN
   nu centreaza — asa ca paginile stateau lipite in stanga pe desktop. O centram
   si o limitam. Un max-width inline pe pagina (ex. 1000px) bate valoarea asta,
   deci fiecare pagina isi pastreaza latimea proprie, dar toate sunt centrate. */
.container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* ══ 21 · LANDING PUBLIC (login in stil Zapoco) ═══════════════════════════════
   Antet + hero cu formular + benzi de prezentare. Toate .lp-* traiesc doar pe
   pagina publica de login. Nu ating shell-ul de joc. */
.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);
}

/* HERO */
.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);
}

/* Cardul de acces din hero: mai lat, centrat. */
.lp-access {
    max-width: 460px;
    margin: 0 auto;
    text-align: left;
}

/* BENZI */
.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;
}

/* STATISTICI */
.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);
}

/* POVESTE */
.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;
}

/* TOP PLAYERI + CTA */
.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;
}

/* FOOTER */
.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;
}