/* ======================================================================
   Pixel Life - Tervezési rendszer (tokens.css)

   Ez a fájl azért létezik, mert az index.html-ben 200 darab inline `style`
   attribútum volt, hét különböző betűmérettel, terv nélkül. Ugyanaz a piros
   hol `var(--red-btn)`, hol `#a83232` néven szerepelt, pedig a kettő azonos.
   Ezért nézett ki minden panel egy kicsit másképp.

   Itt egy skála van, és minden ahhoz igazodik.
   ====================================================================== */

:root {
    /* ── Nyers paletta ────────────────────────────────────────────
       Korábban a retro_rpg.css :root blokkjában volt. A nevek maradtak,
       hogy a régi szabályok változatlanul működjenek; új szabály a lenti
       szemantikus --c-* neveket használja. */
    --bg-dark: #1d1612;
    --parchment-light: #f7f1e1;
    --parchment-mid: #ebdcb9;
    --parchment-dark: #d5be93;

    --wood-dark: #3a2215;
    --wood-mid: #5c3c26;
    --wood-light: #8b5a2b;
    --wood-highlight: #b97a45;

    --gold-primary: #f4b41a;
    --gold-shadow: #b37e07;

    --green-btn: #4a7c59;
    --green-btn-hover: #5d9b6f;
    --green-btn-dark: #2d4f37;

    --red-btn: #a83232;
    --red-btn-hover: #c94444;
    --red-btn-dark: #6e1e1e;

    --blue-btn: #3264a8;
    --blue-btn-hover: #457bc9;
    --blue-btn-dark: #1e3d6e;

    --felt-green: #1d5932;
    --felt-dark: #123b20;

    --text-dark: #2e1d0c;
    --text-muted: #6e5740;
    --text-gold: #ffdf79;

    --font-pixel: 'Press Start 2P', monospace;
    --font-retro: 'VT323', monospace;

    /* ── Betűméret skála ──────────────────────────────────────────
       Öt lépcső. Ami nem fér bele, az valószínűleg rossz helyen van. */
    --fs-xs:   11px;   /* apró címke, metaadat */
    --fs-sm:   13px;   /* másodlagos szöveg */
    --fs-md:   15px;   /* alapszöveg */
    --fs-lg:   19px;   /* kiemelt érték */
    --fs-xl:   26px;   /* nagy szám, eredmény */
    --fs-icon: 44px;   /* díszítő emoji, nem szöveg */

    /* Pixeles címsorok. A Press Start 2P nagyon széles, ezért kisebb. */
    --fs-pixel-sm: 10px;
    --fs-pixel-md: 12px;
    --fs-pixel-lg: 15px;

    /* ── Térköz skála ─────────────────────────────────────────── */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 18px;
    --sp-5: 28px;
    --sp-6: 42px;

    /* ── Keretvastagság ───────────────────────────────────────── */
    --bw-thin:  2px;
    --bw-base:  3px;
    --bw-thick: 4px;

    /* ── Rétegsorrend ─────────────────────────────────────────── */
    --z-base:      1;
    --z-sticky:   50;
    --z-overlay: 100;
    --z-modal:   200;
    --z-toast:   300;
    --z-crt:     400;

    /* ── Mozgás ───────────────────────────────────────────────── */
    --t-fast:   120ms;
    --t-base:   200ms;
    --t-slow:   360ms;
    --ease:     cubic-bezier(0.2, 0.7, 0.3, 1);

    /* ── Szemantikus színek ───────────────────────────────────────
       A nyers hex értékek fent, a palettában laknak. Itt nevet kapnak,
       hogy a jelentés és a szín külön válhasson. */
    --c-surface:        var(--parchment-light);
    --c-surface-sunk:   var(--parchment-mid);
    --c-surface-raised: var(--parchment-dark);
    --c-ink:            var(--text-dark);
    --c-ink-soft:       var(--text-muted);
    --c-ink-inverse:    #f5eeda;

    --c-accent:         var(--gold-primary);
    --c-accent-deep:    var(--gold-shadow);

    --c-positive:       #2f7a44;
    --c-positive-soft:  #dff0e2;
    --c-negative:       #a83232;
    --c-negative-soft:  #f7dede;
    --c-warning:        #b3730a;
    --c-warning-soft:   #faedd2;
    --c-info:           #2f5d92;
    --c-info-soft:      #dde8f5;

    /* Drágakő (prémium bolt) és a sötét hátterű panelek világos tintája. */
    --c-gem:            #ff55ff;
    --c-gem-deep:       #a8328c;
    --c-gem-soft:       #fff2fd;
    --c-surface-dark:   #261b17;
    --c-ink-light:      #ffffff;
    --c-ink-light-soft: #cccccc;
    /* Sötét háttéren (tőzsde, börtön) a --c-positive/negative túl tompa. */
    --c-positive-lit:   #38ef7d;
    --c-negative-lit:   #ff6b6b;
    --c-warning-lit:    #e8a432;

    /* Fókuszgyűrű. Vastag és szögletes, hogy illjen a pixeles stílushoz. */
    --focus-ring: 0 0 0 3px #15100c, 0 0 0 6px var(--gold-primary);
}

/* ======================================================================
   SZÖVEGKIJELÖLÉS

   A régi szabály `* { user-select: none; }` volt, mindenre. Emiatt a saját
   Discord azonosítódat sem tudtad kimásolni, pedig az admin panel pont azt
   kérte, hogy írd be. Hibaüzenetet sem lehetett kimásolni.

   Most csak ott tiltjuk, ahol a kijelölés véletlen és zavaró: gombokon,
   fejléceken, a térképen.
   ====================================================================== */

button,
.pixel-btn,
.nav-tab,
.icon-btn,
.need-bar-container,
.hud-controls,
canvas,
.building-card,
.travel-mode-card {
    user-select: none;
    -webkit-user-select: none;
}

/* A tartalom kijelölhető. */
p, span, h1, h2, h3, h4, li, td, th, code, pre, input, textarea,
.selectable, .stat-value, .mono {
    user-select: text;
    -webkit-user-select: text;
}

/* Azonosítók, összegek: dupla kattintásra egészben jelölődnek ki. */
.mono, code, .copyable {
    font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
    user-select: all;
    -webkit-user-select: all;
}

/* ======================================================================
   BILLENTYŰZET ÉS FÓKUSZ

   A régi stíluslapban a `:focus` szó egyszer sem fordult elő 25 kilobájtban.
   Semmi nem volt használható egér nélkül, és képernyőolvasóval láthatatlan
   volt az egész felület.
   ====================================================================== */

:focus {
    outline: none;
}

:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    position: relative;
    z-index: var(--z-sticky);
}

/* Az egérrel kattintás ne villantson fókuszgyűrűt, a Tab igen. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    box-shadow: var(--focus-ring);
}

/* Ugrás a tartalomra, képernyőolvasóknak és billentyűzetnek. */
.skip-link {
    position: absolute;
    left: var(--sp-2);
    top: -999px;
    z-index: var(--z-toast);
    background: var(--gold-primary);
    color: #201409;
    padding: var(--sp-2) var(--sp-4);
    font-family: var(--font-pixel);
    font-size: var(--fs-pixel-sm);
    border: var(--bw-base) solid #201409;
}
.skip-link:focus {
    top: var(--sp-2);
}

/* Csak képernyőolvasónak szánt szöveg. */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ======================================================================
   MOZGÁSCSÖKKENTÉS

   Volt kilenc átmenet, egy villogó crash számláló és egy állandó
   pásztázó vonal réteg, mindezt `prefers-reduced-motion` figyelembevétele
   nélkül. Ez egyeseknek szédülést okoz.
   ====================================================================== */

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

/* ======================================================================
   CRT RÉTEG

   Korábban alapból bekapcsolva, 0.65 átlátszatlansággal, teljes képernyőn.
   A játékot azelőtt szürkítette le, hogy egyszer is tisztán láttad volna.
   Most alapból ki van kapcsolva, és ha bekapcsolod, finomabb.
   ====================================================================== */

.crt-overlay {
    display: none;
}
body.crt-on .crt-overlay {
    display: block;
    opacity: 0.28;
}

/* ======================================================================
   HIÁNYZÓ OSZTÁLYOK

   Ezeket használta a HTML, de nem volt hozzájuk szabály sehol.
   A kaszinó "filcasztala" egy stílus nélküli div volt.
   ====================================================================== */

.casino-felt {
    background:
        radial-gradient(ellipse at 50% 30%, rgba(60,140,88,0.35) 0%, transparent 60%),
        var(--felt-green);
    background-color: var(--felt-green);
    border: var(--bw-thick) solid var(--wood-dark);
    box-shadow:
        inset 0 0 40px rgba(0, 0, 0, 0.45),
        inset 0 3px 0 rgba(255, 255, 255, 0.06);
    padding: var(--sp-4);
    position: relative;
}
.casino-felt::before {
    content: '';
    position: absolute;
    inset: var(--sp-2);
    border: 1px dashed rgba(255, 223, 121, 0.22);
    pointer-events: none;
}

.speech-bubble {
    position: relative;
    background: var(--parchment-light);
    color: var(--text-dark);
    border: var(--bw-base) solid var(--wood-dark);
    padding: var(--sp-3);
    font-size: var(--fs-md);
    line-height: 1.5;
}
.speech-bubble::after {
    content: '';
    position: absolute;
    left: var(--sp-4);
    bottom: calc(var(--bw-base) * -1 - 10px);
    border: 10px solid transparent;
    border-top-color: var(--wood-dark);
}

/* ======================================================================
   BETÖLTÉS, ÜRES ÁLLAPOT, HIBA

   Korábban minden panel egy statikus "Betöltés..." szöveggel indult, ami
   soha nem változott, ha a kérés elhasalt. Az üres listák egyszerűen
   semmit nem rajzoltak.
   ====================================================================== */

.state-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-5) var(--sp-4);
    text-align: center;
    color: var(--c-ink-soft);
    font-size: var(--fs-md);
}
.state-block .state-icon {
    font-size: 30px;
    opacity: 0.8;
}
.state-block .state-title {
    font-family: var(--font-pixel);
    font-size: var(--fs-pixel-sm);
    color: var(--c-ink);
}
.state-block.is-error .state-title { color: var(--c-negative); }

/* Csontváz betöltés: jelzi, hogy jön valami, nem fagyott le. */
.skeleton {
    background: linear-gradient(90deg,
        var(--parchment-mid) 25%,
        var(--parchment-dark) 50%,
        var(--parchment-mid) 75%);
    background-size: 200% 100%;
    animation: skeleton-sweep 1.4s linear infinite;
    border-radius: 2px;
    min-height: 14px;
}
@keyframes skeleton-sweep {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}
.skeleton-row { height: 18px; margin-bottom: var(--sp-2); }
.skeleton-row:nth-child(2) { width: 82%; }
.skeleton-row:nth-child(3) { width: 64%; }

/* ======================================================================
   SEGÉDOSZTÁLYOK
   Ezek váltják ki az inline stílusokat.
   ====================================================================== */

.row        { display: flex; align-items: center; gap: var(--sp-2); }
.row-between{ display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.row-wrap   { flex-wrap: wrap; }
.col        { display: flex; flex-direction: column; gap: var(--sp-2); }
.grid-auto  { display: grid; gap: var(--sp-3);
              grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-2     { display: grid; gap: var(--sp-3); grid-template-columns: 1fr 1fr; }

.justify-center { justify-content: center; }
.justify-end    { justify-content: flex-end; }
.justify-around { justify-content: space-around; }
.grow   { flex: 1; min-width: 0; }
.w-full { width: 100%; }
.w-sm   { width: 80px; }   /* rövid számmező (darabszám) */
.w-md   { width: 120px; }  /* összegmező */
.measure { max-width: 480px; margin-left: auto; margin-right: auto; }

.gap-1 { gap: var(--sp-1); } .gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); }
.mt-1 { margin-top: var(--sp-1); } .mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); } .mt-4 { margin-top: var(--sp-4); }
.mb-1 { margin-bottom: var(--sp-1); } .mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); } .mb-4 { margin-bottom: var(--sp-4); }
.my-1 { margin-top: var(--sp-1); margin-bottom: var(--sp-1); }
.my-3 { margin-top: var(--sp-3); margin-bottom: var(--sp-3); }

.t-xs { font-size: var(--fs-xs); }  .t-sm { font-size: var(--fs-sm); }
.t-md { font-size: var(--fs-md); }  .t-lg { font-size: var(--fs-lg); }
.t-xl { font-size: var(--fs-xl); }
.t-icon { font-size: var(--fs-icon); line-height: 1; }
.t-pixel    { font-family: var(--font-pixel); font-size: var(--fs-pixel-md); }
.t-pixel-sm { font-family: var(--font-pixel); font-size: var(--fs-pixel-sm); }
.t-pixel-lg { font-family: var(--font-pixel); font-size: var(--fs-pixel-lg); }
.t-soft     { color: var(--c-ink-soft); }
.t-positive { color: var(--c-positive); }
.t-negative { color: var(--c-negative); }
.t-warning  { color: var(--c-warning); }
.t-info     { color: var(--c-info); }
.t-accent   { color: var(--c-accent-deep); }
.t-gold     { color: var(--text-gold); }      /* cím sötét fejlécen */
.t-gem      { color: var(--c-gem); }
.t-gem-deep { color: var(--c-gem-deep); }
.t-light      { color: var(--c-ink-light); }
.t-light-soft { color: var(--c-ink-light-soft); }
.t-positive-lit { color: var(--c-positive-lit); }
.t-negative-lit { color: var(--c-negative-lit); }
.t-warning-lit  { color: var(--c-warning-lit); }
.t-center   { text-align: center; }
.t-right    { text-align: right; }
.rule-below { padding-bottom: var(--sp-1); border-bottom: var(--bw-thin) solid var(--wood-mid); }

.card-sunk {
    background: var(--c-surface-sunk);
    border: var(--bw-base) solid var(--wood-mid);
    padding: var(--sp-3);
}
.card-raised {
    background: var(--c-surface);
    border: var(--bw-base) solid var(--wood-dark);
    padding: var(--sp-3);
}
.card-dark {
    background: var(--c-surface-dark);
    color: var(--c-ink-light);
    border: var(--bw-thick) solid var(--wood-dark);
    padding: var(--sp-4);
}
.card-dark.danger { border-color: var(--red-btn-dark); }
.card-gem { background: var(--c-gem-soft); border-color: var(--c-accent-deep); }

/* ======================================================================
   MOBIL — TÖRÉSPONT-SKÁLA

   A média lekérdezés nem tud var()-t olvasni, ezért a skála itt, kommentben
   a forrás; minden CSS fájl ebből a háromból választ, mást nem vezet be:

     sm  560px  keskeny telefon: egyoszlopos rács, kisebb pixel-betű
     md  760px  telefon / álló tablet: két oszlop → egy, tömörebb térköz
     lg  900px  fekvő tablet: a széles kétpaneles nézetek (karakter,
                tőzsde) egyoszloposra

   Korábban öt érték volt (560/640/700/760/900), és ugyanaz a panel más
   szélességnél tört, mint a mellette lévő.
   ====================================================================== */

@media (max-width: 760px) {
    :root {
        --fs-md: 14px;
        --fs-lg: 17px;
        --fs-xl: 22px;
        --fs-pixel-md: 11px;
        --fs-pixel-lg: 12px;
        --sp-4: 14px;
        --sp-5: 20px;
    }
    .grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    :root {
        --fs-pixel-sm: 9px;
        --fs-pixel-md: 10px;
        --sp-3: 10px;
        --sp-4: 12px;
    }
    .grid-auto { grid-template-columns: 1fr; }
    .row-between { flex-wrap: wrap; }
}

/* Érintőképernyőn minden kattintható elem legyen legalább 44 pixel. */
@media (pointer: coarse) {
    button,
    .pixel-btn,
    .nav-tab,
    .icon-btn,
    a.action {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ======================================================================
   BELÉPŐKÉPERNYŐ

   Korábban nem volt ilyen. Aki megnyitotta az oldalt, azonnal és némán
   bekerült a 123456789-es közös demó fiókba, ami ráadásul admin jogú volt.
   ====================================================================== */

.login-screen {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: grid;
    place-items: center;
    padding: var(--sp-4);
    background:
        radial-gradient(ellipse at 50% 30%, rgba(60, 40, 20, 0.6), transparent 70%),
        #120d09;
}

.login-card {
    width: min(460px, 100%);
    background: var(--parchment-light);
    border: var(--bw-thick) solid var(--wood-dark);
    box-shadow:
        inset 3px 3px 0 var(--wood-highlight),
        inset -3px -3px 0 var(--wood-mid),
        0 12px 0 rgba(0, 0, 0, 0.55);
    padding: var(--sp-5) var(--sp-4);
    text-align: center;
}

.login-title {
    font-family: var(--font-pixel);
    font-size: var(--fs-pixel-lg);
    color: var(--c-accent-deep);
    margin-bottom: var(--sp-2);
    line-height: 1.6;
}
.login-lead {
    font-size: var(--fs-md);
    color: var(--c-ink-soft);
    margin-bottom: var(--sp-5);
}
.login-actions {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}
.login-primary { font-size: var(--fs-pixel-md); padding: var(--sp-3); }
.login-note {
    font-size: var(--fs-sm);
    color: var(--c-ink-soft);
    line-height: 1.6;
    text-align: left;
    background: var(--parchment-mid);
    border-left: var(--bw-base) solid var(--wood-mid);
    padding: var(--sp-3);
}

/* ======================================================================
   ÉRTESÍTÉSEK
   ====================================================================== */

.toast-container {
    position: fixed;
    right: var(--sp-3);
    bottom: var(--sp-3);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    max-width: min(380px, calc(100vw - var(--sp-4) * 2));
}

.retro-toast {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    background: var(--parchment-light);
    border: var(--bw-base) solid var(--wood-dark);
    border-left-width: 6px;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5);
    padding: var(--sp-3);
    font-size: var(--fs-md);
    color: var(--c-ink);
    line-height: 1.45;
    animation: toast-in var(--t-base) var(--ease);
}
@keyframes toast-in {
    from { opacity: 0; transform: translateX(18px); }
    to   { opacity: 1; transform: none; }
}
.retro-toast.toast-leaving {
    opacity: 0;
    transform: translateX(18px);
    transition: opacity var(--t-base), transform var(--t-base);
}
.retro-toast-success { border-left-color: var(--c-positive); }
.retro-toast-error   { border-left-color: var(--c-negative); }
.retro-toast-info    { border-left-color: var(--c-info); }

.toast-text { flex: 1; }

.toast-close {
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    color: var(--c-ink-soft);
    cursor: pointer;
    padding: 0 var(--sp-1);
}
.toast-close:hover { color: var(--c-ink); }

/* ======================================================================
   RANGLISTA SOROK ÉS ÉPÜLETKÁRTYÁK
   ====================================================================== */

.leaderboard-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) 0;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.15);
}
.leaderboard-row:last-child { border-bottom: none; }
.leaderboard-rank { min-width: 34px; font-size: var(--fs-lg); }
.leaderboard-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.buildings-street-grid {
    display: grid;
    gap: var(--sp-3);
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.building-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-3);
    background: var(--parchment-light);
    border: var(--bw-base) solid var(--wood-dark);
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.4);
    cursor: pointer;
    text-align: center;
    color: var(--c-ink);
    font: inherit;
    transition: transform var(--t-fast) var(--ease),
                box-shadow var(--t-fast) var(--ease);
}
.building-card:hover:not(:disabled) {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.45);
}
.building-card:active:not(:disabled) {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
}
.building-card:disabled { opacity: 0.5; cursor: not-allowed; }

.building-icon { font-size: 34px; }
.building-name {
    font-family: var(--font-pixel);
    font-size: var(--fs-pixel-sm);
    line-height: 1.5;
}
.building-desc { font-size: var(--fs-sm); color: var(--c-ink-soft); }
.building-action {
    margin-top: auto;
    font-family: var(--font-pixel);
    font-size: var(--fs-pixel-sm);
    color: var(--c-accent-deep);
    padding-top: var(--sp-2);
}

/* Kerületgombok a térkép alatt: a vászon egérrel megy, ez billentyűvel. */
.map-zone-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding: var(--sp-2);
    background: rgba(0, 0, 0, 0.25);
}
.map-zone-btn {
    font-family: var(--font-pixel);
    font-size: var(--fs-pixel-sm);
    padding: var(--sp-2) var(--sp-3);
    background: var(--parchment-mid);
    border: var(--bw-thin) solid var(--wood-dark);
    color: var(--c-ink);
    cursor: pointer;
}
.map-zone-btn[aria-current="true"] {
    background: var(--gold-primary);
    border-color: var(--gold-shadow);
}

.btn-compact { font-size: var(--fs-pixel-sm); padding: var(--sp-2) var(--sp-3); }

.shift-history-box summary {
    cursor: pointer;
    padding: var(--sp-2) 0;
    color: var(--c-accent-deep);
}

/* Bejelentés sáv: az admin ide ír, és a Discordon is megjelenik. */
.announcement-banner {
    margin: 0;
    padding: var(--sp-2) var(--sp-4);
    background: var(--c-warning-soft);
    border-top: var(--bw-thin) solid var(--c-warning);
    border-bottom: var(--bw-thin) solid var(--c-warning);
    color: #4a3208;
    font-size: var(--fs-md);
    text-align: center;
}