@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Rajdhani:wght@500;600;700&display=swap');

:root {
    --bg: #09090c;
    --surface: #121217;
    --surface-2: #19191f;
    --border: #292931;
    --text: #f4f1ed;
    --muted: #96949d;
    --red: #d83a42;
    --red-dark: #8f2028;
    --gold: #d6ad62;
    --green: #65b88a;
    --blue: #78a9d8;
    --shadow: 0 18px 50px rgba(0,0,0,.28);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
    margin: 0;
    color: var(--text);
    background:
        radial-gradient(ellipse at 15% 0%, rgba(146, 28, 37, .13), transparent 36rem),
        radial-gradient(ellipse at 90% 20%, rgba(194, 145, 66, .07), transparent 30rem),
        var(--bg);
    font-family: 'DM Sans', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.55;
}
a { color: var(--gold); text-decoration: none; }
a:hover { color: #f0cc87; }
button, input { font: inherit; }
button:disabled { opacity: .42; cursor: not-allowed; }
.app-shell { width: min(1180px, calc(100% - 36px)); margin: 0 auto; }
.topbar {
    min-height: 82px; display: flex; align-items: center; justify-content: space-between;
    gap: 24px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.brand { display: flex; align-items: center; gap: 11px; color: var(--text); font: 700 21px 'Rajdhani', sans-serif; letter-spacing: 2px; }
.brand small { display: block; color: var(--muted); font: 600 8px 'DM Sans', sans-serif; letter-spacing: 1.25px; margin-top: -3px; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #e64b51, #741820); border: 1px solid rgba(255,255,255,.18); border-radius: 10px 3px 10px 3px; font: 700 26px 'Rajdhani', sans-serif; box-shadow: 0 5px 22px rgba(216,58,66,.2); }
.main-nav { display: flex; align-items: center; justify-content: center; gap: 19px; flex-wrap: wrap; }
.main-nav a { color: #c3c0c5; font-size: 12px; font-weight: 600; }
.main-nav a:hover { color: var(--gold); }
.top-user { display: flex; align-items: center; gap: 12px; }
.top-user form { margin: 0; }
.top-username { color: var(--gold); font-weight: 700; }
.main-content { min-height: calc(100vh - 150px); padding: 34px 0 54px; }
.footer { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid rgba(255,255,255,.08); padding: 20px 0 28px; font-size: 11px; }
.muted { color: var(--muted); }
.small { font-size: 11px; }
.accent { color: var(--gold); }
.eyebrow { margin: 0 0 8px; color: var(--red); font-size: 10px; font-weight: 700; letter-spacing: 1.8px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: 'Rajdhani', sans-serif; letter-spacing: .2px; }
h1 { margin-bottom: 8px; font-size: clamp(32px, 5vw, 48px); line-height: 1.05; }
h2 { margin-bottom: 9px; font-size: 25px; }
.hero-panel { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 30px 34px; border: 1px solid rgba(214,173,98,.22); border-radius: 18px; background: linear-gradient(110deg, rgba(104,24,31,.27), rgba(18,18,23,.94) 48%, rgba(214,173,98,.06)); box-shadow: var(--shadow); }
.hero-copy { max-width: 590px; margin-bottom: 0; color: var(--muted); }
.rank-seal { min-width: 150px; padding: 17px 22px; text-align: center; border: 1px solid rgba(214,173,98,.35); border-radius: 12px; background: rgba(0,0,0,.2); }
.rank-seal span, .rank-seal small { display: block; color: var(--muted); font-size: 9px; letter-spacing: 1.2px; }
.rank-seal strong { display: block; margin: 2px 0; color: var(--gold); font: 700 30px 'Rajdhani', sans-serif; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin: 18px 0; }
.stat-card, .panel, .player-card, .job-row, .empty-state { border: 1px solid var(--border); border-radius: 14px; background: linear-gradient(145deg, rgba(25,25,31,.96), rgba(15,15,19,.98)); box-shadow: 0 8px 28px rgba(0,0,0,.12); }
.stat-card { padding: 17px 19px; }
.stat-card span { display: block; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: 1.4px; }
.stat-card strong { display: block; margin: 3px 0 0; color: var(--text); font: 700 27px 'Rajdhani', sans-serif; }
.stat-card small { color: var(--muted); font-size: 10px; }
.content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.panel { padding: 23px; }
.panel-heading, .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-heading h2, .section-heading h2 { margin-bottom: 0; }
.detail-list { margin: 18px 0; border-top: 1px solid var(--border); }
.detail-list > div { display: flex; justify-content: space-between; gap: 15px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.055); }
.detail-list span { color: var(--muted); }
.detail-list strong { text-align: right; }
.action-row { display: flex; gap: 9px; flex-wrap: wrap; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 10px 16px; border: 1px solid transparent; border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 700; transition: .18s ease; }
.button:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.1); }
.button-primary { color: #fff; background: linear-gradient(135deg, #d83a42, #96242c); box-shadow: 0 7px 20px rgba(216,58,66,.16); }
.button-danger { color: #fff; background: linear-gradient(135deg, #a82b34, #671820); border-color: rgba(255,100,100,.25); }
.button-secondary { color: var(--text); background: #25252d; border-color: #393943; }
.button-quiet { min-height: 30px; padding: 5px 10px; color: var(--muted); background: transparent; border-color: var(--border); }
.button-small { min-height: 33px; padding: 7px 11px; font-size: 11px; }
.button-wide { width: 100%; }
.notice { margin: 0 0 17px; padding: 12px 15px; border: 1px solid var(--border); border-radius: 9px; font-size: 12px; }
.notice-success { color: #a6e1bd; background: rgba(48,120,78,.13); border-color: rgba(101,184,138,.3); }
.notice-error { color: #ffb0b3; background: rgba(145,34,42,.16); border-color: rgba(216,58,66,.35); }
.notice-warning { color: #f0d39a; background: rgba(170,120,40,.12); border-color: rgba(214,173,98,.3); }
.notice-info { color: #b6d5f2; background: rgba(65,115,165,.13); border-color: rgba(120,169,216,.3); }
.mission-box { padding: 15px; margin-top: 12px; border: 1px solid rgba(214,173,98,.18); border-radius: 10px; background: rgba(214,173,98,.045); }
.mission-box strong { display: block; font-size: 14px; }
.mission-box p { margin: 5px 0 8px; color: var(--muted); font-size: 11px; }
.mission-box-muted { border-color: var(--border); background: rgba(255,255,255,.02); }
.mini-label { display: block; margin-bottom: 5px; color: var(--gold); font-size: 9px; font-weight: 700; letter-spacing: 1.3px; }
.text-link { font-size: 11px; font-weight: 700; }
.page-heading { margin: 4px 0 24px; max-width: 760px; }
.page-heading p:last-child { margin-bottom: 0; color: var(--muted); }
.shelter-panel, .hospital-panel { display: flex; align-items: center; gap: 24px; padding: 30px; }
.shelter-icon, .hospital-symbol, .workshop-symbol { flex: 0 0 78px; width: 78px; height: 78px; display: grid; place-items: center; border-radius: 16px; color: var(--gold); background: rgba(214,173,98,.09); border: 1px solid rgba(214,173,98,.25); font: 700 42px 'Rajdhani', sans-serif; }
.shelter-panel h2, .hospital-panel h2 { margin: 13px 0 5px; }
.shelter-panel p { max-width: 650px; }
.status-pill { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 999px; font-size: 9px; font-weight: 700; letter-spacing: .8px; border: 1px solid var(--border); }
.status-shelter { color: var(--green); background: rgba(101,184,138,.09); border-color: rgba(101,184,138,.25); }
.status-street { color: #f0c47b; background: rgba(214,173,98,.09); border-color: rgba(214,173,98,.25); }
.status-hospital { color: #a9c9ed; background: rgba(120,169,216,.1); border-color: rgba(120,169,216,.25); }
.street-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; margin-bottom: 23px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.section-heading { margin: 24px 0 13px; }
.player-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.player-card { padding: 16px; }
.player-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: linear-gradient(145deg, #b52f38, #48141a); font: 700 22px 'Rajdhani', sans-serif; }
.player-card-top strong, .player-card-top span { display: block; }
.player-card-top span { color: var(--muted); font-size: 10px; }
.player-meta { display: flex; justify-content: space-between; padding: 6px 0; color: var(--muted); font-size: 11px; border-top: 1px solid rgba(255,255,255,.05); }
.player-meta strong { color: var(--text); }
.attack-form { margin-top: 12px; }
.attack-form label, .form-stack label { display: block; color: var(--muted); font-size: 11px; font-weight: 600; }
.attack-form input, .form-stack input { display: block; width: 100%; margin: 6px 0 10px; padding: 11px 12px; color: var(--text); background: #0d0d11; border: 1px solid #35353f; border-radius: 8px; outline: none; }
.attack-form input:focus, .form-stack input:focus { border-color: var(--gold); }
.attack-form .button { margin-top: 2px; }
.empty-state { padding: 28px; color: var(--muted); text-align: center; }
.street-entry { padding: 30px; }
.active-mission { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px 24px; margin-bottom: 23px; border-color: rgba(214,173,98,.3); }
.timer-block { min-width: 115px; padding: 12px; text-align: center; border-radius: 10px; background: rgba(214,173,98,.08); }
.timer-block span, .workshop-balance span { display: block; color: var(--muted); font-size: 9px; letter-spacing: 1px; }
.timer-block strong { color: var(--gold); font: 700 25px 'Rajdhani', sans-serif; }
.reward-line { display: flex; gap: 20px; color: var(--muted); font-size: 11px; }
.reward-line strong { color: var(--text); }
.job-list { display: grid; gap: 8px; }
.job-row { display: grid; grid-template-columns: 35px minmax(160px, 1fr) 60px 105px auto; align-items: center; gap: 12px; padding: 12px 14px; }
.job-number { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: var(--gold); background: rgba(214,173,98,.08); font: 700 17px 'Rajdhani', sans-serif; }
.job-main strong { display: block; }
.job-main p { margin: 2px 0 0; color: var(--muted); font-size: 10px; }
.job-time { color: var(--muted); font-size: 11px; }
.job-reward strong, .job-reward span { display: block; font-size: 11px; }
.job-reward span { color: var(--muted); }
.workshop-hero { display: flex; align-items: center; gap: 22px; margin-bottom: 16px; }
.workshop-main { flex: 1; }
.workshop-main h2 { margin: 9px 0 0; color: var(--gold); font-size: 34px; }
.workshop-main h2 small { color: var(--muted); font: 500 12px 'DM Sans', sans-serif; }
.workshop-main p { margin-bottom: 9px; }
.workshop-balance { min-width: 140px; text-align: right; }
.workshop-balance strong { display: block; font: 700 26px 'Rajdhani', sans-serif; }
.progress-track { height: 6px; overflow: hidden; border-radius: 10px; background: #303039; }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--red), var(--gold)); }
.hospital-panel { display: block; text-align: center; padding: 38px 20px; }
.hospital-panel .hospital-symbol { margin: 0 auto 16px; color: #a9c9ed; background: rgba(120,169,216,.08); border-color: rgba(120,169,216,.25); }
.hospital-timer { margin: 16px 0; color: #a9c9ed; font: 700 clamp(38px, 8vw, 62px) 'Rajdhani', sans-serif; letter-spacing: 3px; }
.auth-body { min-height: 100vh; display: grid; place-items: center; padding: 25px; }
.auth-wrap { width: min(430px, 100%); }
.auth-brand { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 24px; }
.auth-brand h1 { margin: 0; font: 700 34px 'Rajdhani', sans-serif; letter-spacing: 4px; }
.auth-brand p { margin: -3px 0 0; color: var(--muted); font-size: 8px; letter-spacing: 1.3px; }
.brand-mark-large { width: 54px; height: 54px; font-size: 36px; }
.auth-card { padding: 28px; border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(145deg, #18181e, #101014); box-shadow: var(--shadow); }
.auth-card h2 { font-size: 30px; }
.auth-card > p:not(.eyebrow) { color: var(--muted); font-size: 12px; }
.form-stack { display: grid; gap: 12px; margin-top: 20px; }
.form-stack input { margin-bottom: 0; }
.auth-switch { margin: 18px 0 0 !important; text-align: center; }
.auth-switch a { font-weight: 700; }
.auth-foot { margin: 18px 0 0; color: #66636b; text-align: center; font-size: 8px; letter-spacing: 1.3px; }
@media (max-width: 900px) {
    .topbar { align-items: flex-start; flex-wrap: wrap; padding: 17px 0; }
    .main-nav { order: 3; width: 100%; justify-content: flex-start; gap: 13px; }
    .top-user { margin-left: auto; }
    .player-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 650px) {
    .app-shell { width: min(100% - 22px, 1180px); }
    .main-content { padding-top: 22px; }
    .hero-panel { align-items: flex-start; flex-direction: column; padding: 23px; }
    .rank-seal { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; }
    .rank-seal strong { margin: 0; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 9px; }
    .stat-card { padding: 13px; }
    .stat-card strong { font-size: 23px; }
    .content-grid { grid-template-columns: 1fr; }
    .panel { padding: 18px; }
    .shelter-panel { align-items: flex-start; flex-direction: column; }
    .player-grid { grid-template-columns: 1fr; }
    .job-row { grid-template-columns: 30px 1fr auto; gap: 8px; }
    .job-time { display: none; }
    .job-reward { grid-column: 2; }
    .job-row form, .job-row > button { grid-column: 3; grid-row: 1 / span 2; }
    .active-mission { grid-template-columns: 1fr; }
    .timer-block { width: 100%; }
    .workshop-hero { align-items: flex-start; flex-wrap: wrap; }
    .workshop-balance { width: 100%; text-align: left; }
    .footer { flex-direction: column; }
}

/* Güncellenen oyun modülleri */
.status-muted { color: var(--muted); background: rgba(255,255,255,.035); border-color: var(--border); }
.protection-grid, .catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.protection-card, .catalog-card { padding: 18px; }
.catalog-card h2, .protection-card h2 { margin: 7px 0 6px; }
.catalog-card p, .protection-card p { min-height: 38px; }
.card-kicker { color: var(--gold); font-size: 9px; font-weight: 700; letter-spacing: 1.4px; }
.catalog-card-owned { border-color: rgba(101,184,138,.32); }
.detail-list.compact { margin: 12px 0; }
.detail-list.compact > div { padding: 8px 0; font-size: 11px; }
.protection-actions { margin-top: 12px; }
.protection-actions form { flex: 1; }
.protection-actions .button { width: 100%; }
.ammo-test-layout { align-items: stretch; }
.formula-display { margin: 18px 0; padding: 18px 12px; text-align: center; color: var(--gold); border: 1px solid rgba(214,173,98,.25); border-radius: 10px; background: rgba(214,173,98,.06); font: 700 clamp(18px, 3vw, 26px) 'Rajdhani', sans-serif; }
.formula-display sup { font-size: .58em; }
.result-message { margin-top: 18px; }
.simulation-result { margin-top: 18px; }
.test-stats { margin-bottom: 16px; }
.simulation-alert { display: flex; flex-direction: column; gap: 3px; margin: 14px 0; padding: 16px 18px; border: 1px solid; border-radius: 10px; }
.simulation-alert strong { font-size: 16px; }
.simulation-alert span { font-size: 12px; }
.simulation-alert-success { color: #a6e1bd; background: rgba(48,120,78,.13); border-color: rgba(101,184,138,.35); }
.simulation-alert-error { color: #ffb0b3; background: rgba(145,34,42,.16); border-color: rgba(216,58,66,.38); }
.venue-bid-form { gap: 8px; margin-top: 12px; }
.venue-bid-form input, .chat-composer textarea { display: block; width: 100%; margin-top: 6px; padding: 11px 12px; color: var(--text); background: #0d0d11; border: 1px solid #35353f; border-radius: 8px; outline: none; resize: vertical; }
.venue-bid-form input:focus, .chat-composer textarea:focus { border-color: var(--gold); }
.chat-panel { padding: 22px; }
.chat-feed { display: flex; flex-direction: column; gap: 8px; max-height: 560px; min-height: 180px; overflow-y: auto; padding: 14px 2px; margin: 14px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.chat-message { padding: 11px 13px; border: 1px solid rgba(255,255,255,.06); border-radius: 9px; background: rgba(255,255,255,.025); }
.chat-message-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.chat-message-head strong { color: var(--gold); font-size: 12px; }
.chat-message-head time { color: var(--muted); font-size: 10px; }
.chat-message p { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.chat-composer label { color: var(--muted); font-size: 11px; font-weight: 700; }
.chat-composer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.newspaper-list { display: grid; gap: 11px; }
.news-item { display: grid; grid-template-columns: 46px 1fr; gap: 15px; padding: 18px; }
.news-index { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 9px; color: var(--gold); background: rgba(214,173,98,.08); font: 700 20px 'Rajdhani', sans-serif; }
.news-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.news-meta time { color: var(--muted); font-size: 10px; }
.news-body h2 { margin-bottom: 4px; }
.news-body p { color: var(--muted); margin-bottom: 10px; }
.news-loot { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--muted); font-size: 10px; }
.news-loot strong { color: var(--text); }
@media (max-width: 900px) {
    .protection-grid, .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
    .protection-grid, .catalog-grid { grid-template-columns: 1fr; }
    .chat-composer-bottom { align-items: flex-start; flex-direction: column; }
    .news-item { grid-template-columns: 34px 1fr; gap: 10px; padding: 13px; }
    .news-index { width: 32px; height: 32px; font-size: 15px; }
    .news-meta { align-items: flex-start; flex-direction: column; }
    .news-body h2 { font-size: 20px; }
}
.venue-map-panel { margin: 18px 0; }
.venue-map { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(76px, auto)); gap: 8px; margin-top: 16px; padding: 12px; border: 1px solid rgba(214,173,98,.18); border-radius: 12px; background: radial-gradient(ellipse at center, rgba(214,173,98,.07), transparent 70%), #0d0d11; }
.venue-map-point { display: flex; min-width: 0; flex-direction: column; justify-content: center; align-items: center; gap: 3px; padding: 8px 5px; text-align: center; border: 1px solid var(--border); border-radius: 8px; background: rgba(255,255,255,.025); }
.venue-map-point strong { max-width: 100%; color: var(--text); font-size: 10px; line-height: 1.2; overflow-wrap: anywhere; }
.venue-map-point small { color: var(--muted); font-size: 9px; }
.venue-map-dot, .legend-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.venue-map-free { border-color: rgba(120,169,216,.25); }
.venue-map-free .venue-map-dot, .legend-free { background: var(--blue); }
.venue-map-taken { border-color: rgba(216,58,66,.32); }
.venue-map-taken .venue-map-dot, .legend-taken { background: var(--red); }
.venue-map-mine { border-color: rgba(101,184,138,.38); background: rgba(101,184,138,.07); }
.venue-map-mine .venue-map-dot, .legend-mine { background: var(--green); }
.venue-map-legend { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 11px; color: var(--muted); font-size: 10px; }
.venue-map-legend span { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 650px) {
    .venue-map { grid-template-rows: repeat(4, minmax(64px, auto)); gap: 5px; padding: 7px; }
    .venue-map-point { padding: 5px 2px; }
    .venue-map-point strong { font-size: 8px; }
    .venue-map-point small { font-size: 8px; }
}

/* ============================================================
   YERALTI CINEMATIC REDESIGN · v2
   Existing game logic and page forms remain unchanged.
   ============================================================ */
:root {
    --bg: #08090b;
    --surface: #101114;
    --surface-2: #17181c;
    --border: rgba(207, 159, 84, .22);
    --text: #f5f0e7;
    --muted: #99969a;
    --red: #d52c32;
    --red-dark: #79161e;
    --gold: #d8ad63;
    --green: #6dc18c;
    --shadow: 0 18px 50px rgba(0,0,0,.42);
}
body.game-body {
    min-height: 100vh;
    background:
        radial-gradient(ellipse at 0% 0%, rgba(121, 14, 22, .18), transparent 34rem),
        radial-gradient(ellipse at 100% 25%, rgba(173, 111, 34, .08), transparent 28rem),
        linear-gradient(180deg, #090a0c, #060608 70%);
}
.app-shell { width: min(1580px, calc(100% - 30px)); }
.game-topbar {
    position: relative;
    z-index: 5;
    min-height: 78px;
    display: grid;
    grid-template-columns: 235px minmax(300px, 1fr) auto;
    align-items: center;
    gap: 20px;
    border-bottom: 1px solid rgba(216,173,99,.24);
    background: linear-gradient(180deg, rgba(16,16,19,.98), rgba(8,8,10,.92));
}
.game-topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(215,44,50,.75), rgba(216,173,99,.65), transparent); }
.brand { gap: 12px; font-size: 25px; letter-spacing: 2.7px; text-shadow: 0 2px 12px rgba(0,0,0,.8); }
.brand-mark { width: 43px; height: 43px; border-radius: 5px 13px 5px 13px; border: 1px solid rgba(255,220,160,.4); background: linear-gradient(145deg, #d3a04f, #6e1119 58%, #1a080a); box-shadow: 0 0 24px rgba(188,35,42,.25), inset 0 0 12px rgba(0,0,0,.5); }
.brand small { color: #b5a28b; font-size: 8px; letter-spacing: 1.6px; }
.resource-hud { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; }
.resource-pill { min-width: 130px; display: flex; align-items: center; gap: 10px; padding: 8px 13px; border: 1px solid rgba(210,166,91,.24); border-radius: 8px; background: linear-gradient(135deg, rgba(36,31,25,.78), rgba(11,12,14,.96)); box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 5px 18px rgba(0,0,0,.22); }
.resource-pill > span:last-child { min-width: 0; }
.resource-pill small, .resource-pill strong { display: block; white-space: nowrap; }
.resource-pill small { color: #9f9688; font-size: 8px; font-weight: 800; letter-spacing: 1.5px; }
.resource-pill strong { color: #f4e7d0; font: 700 18px 'Rajdhani', sans-serif; }
.resource-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; color: var(--gold); background: rgba(216,173,99,.09); font: 700 20px 'Rajdhani', sans-serif; }
.ammo-icon { color: #d8c8a7; }
.exp-icon { color: #f1c66f; }
.top-user { justify-content: flex-end; gap: 10px; }
.top-username { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #e5c17f; font-size: 12px; }
.game-layout { display: grid; grid-template-columns: 225px minmax(0, 1fr); align-items: start; gap: 22px; }
.sidebar { position: sticky; top: 12px; min-width: 0; max-height: calc(100vh - 94px); overflow-y: auto; padding: 17px 0 22px; border-right: 1px solid rgba(216,173,99,.16); scrollbar-width: thin; scrollbar-color: #49352b transparent; }
.sidebar-profile { display: grid; grid-template-columns: 46px minmax(0,1fr); align-items: center; gap: 2px 11px; margin: 0 13px 18px 0; padding: 13px 12px; border: 1px solid rgba(216,173,99,.25); border-radius: 10px; background: linear-gradient(135deg, rgba(65,25,25,.7), rgba(13,14,17,.98) 65%); box-shadow: 0 8px 24px rgba(0,0,0,.22); }
.profile-avatar { grid-row: span 2; width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(244,202,129,.5); border-radius: 50%; color: #f8e4bd; background: radial-gradient(circle at 35% 25%, #7b3730, #1a0d0f 70%); font: 700 26px 'Rajdhani', sans-serif; box-shadow: 0 0 18px rgba(204,45,49,.22); }
.profile-details strong, .profile-details span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-details strong { color: #f5e7d1; font-size: 13px; }
.profile-details span { color: var(--gold); font-size: 10px; font-weight: 700; }
.profile-exp { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; color: #aaa09a; font-size: 9px; }
.rank-progress { height: 6px; overflow: hidden; border: 1px solid rgba(216,173,99,.2); border-radius: 20px; background: #242124; }
.rank-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #971a22, #ef4b40, #e0ad59); box-shadow: 0 0 12px rgba(220,49,52,.55); }
.sidebar-profile .rank-progress { grid-column: 1 / -1; }
.sidebar-caption { margin: 0 0 8px; padding: 0 13px; color: #76685b; font-size: 8px; font-weight: 800; letter-spacing: 2px; }
.sidebar-nav { display: grid; gap: 3px; padding-right: 11px; }
.sidebar-link { position: relative; display: flex; align-items: center; gap: 11px; min-height: 41px; padding: 8px 11px; border: 1px solid transparent; border-radius: 7px; color: #c8c2ba; font-size: 11px; font-weight: 700; transition: .18s ease; }
.sidebar-link:hover { color: #fff0d1; border-color: rgba(216,173,99,.18); background: rgba(216,173,99,.06); }
.sidebar-link.is-active { color: #fff; border-color: rgba(231,67,61,.45); background: linear-gradient(90deg, rgba(153,24,31,.88), rgba(89,16,21,.48) 68%, rgba(18,14,15,.2)); box-shadow: inset 3px 0 #e34b43, 0 4px 16px rgba(0,0,0,.2); }
.sidebar-icon { width: 23px; flex: 0 0 23px; color: #d9b26d; text-align: center; font-size: 18px; line-height: 1; text-shadow: 0 0 10px rgba(216,173,99,.24); }
.sidebar-link.is-active .sidebar-icon { color: #fff0c9; }
.nav-tag { margin-left: auto; padding: 2px 5px; border: 1px solid rgba(216,173,99,.25); border-radius: 4px; color: #e9c27d; font-size: 7px; letter-spacing: .8px; }
.sidebar-motto { margin: 20px 12px 0 0; padding: 16px 13px; border: 1px solid rgba(216,173,99,.17); border-radius: 8px; background: linear-gradient(145deg, rgba(68,19,24,.34), rgba(15,15,18,.8)); }
.motto-mark { display: block; margin-bottom: 5px; color: #d9aa5e; font-size: 17px; }
.sidebar-motto strong { display: block; color: #e8d4b2; font: 700 16px/1.05 'Rajdhani', sans-serif; letter-spacing: .5px; }
.sidebar-motto small { display: block; margin-top: 9px; color: #80756a; font-size: 7px; letter-spacing: 1.3px; }
.game-main { min-width: 0; }
.main-content { min-height: calc(100vh - 145px); padding: 24px 0 38px; }
.footer { align-items: center; border-top-color: rgba(216,173,99,.16); color: #a99d8c; }
.footer strong { color: #d8ad63; letter-spacing: 1.4px; }

/* Dashboard hero and command tiles */
.city-hero { position: relative; isolation: isolate; min-height: 255px; display: flex; align-items: center; overflow: hidden; padding: 30px 34px; border: 1px solid rgba(216,173,99,.35); border-radius: 13px; background: #101115 url('../images/underworld-city.webp') center 48% / cover no-repeat; box-shadow: var(--shadow); }
.city-hero::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(5,6,8,.96) 0%, rgba(8,8,10,.82) 36%, rgba(7,7,9,.18) 78%, rgba(7,7,9,.38)), linear-gradient(0deg, rgba(5,5,7,.5), transparent 60%); }
.city-hero-overlay { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 12% 50%, rgba(153,25,32,.22), transparent 40%); }
.city-hero-content { position: relative; z-index: 1; max-width: 590px; }
.city-hero .eyebrow { color: #e1b46b; }
.city-hero h1 { max-width: 560px; margin-bottom: 10px; color: #fff5e7; font-size: clamp(31px, 4vw, 49px); text-shadow: 0 4px 18px rgba(0,0,0,.75); }
.city-hero h1 span { color: #e6b76a; }
.city-hero-content > p:not(.eyebrow) { max-width: 470px; margin-bottom: 17px; color: #d0c8bd; font-size: 12px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.city-hero-stamp { position: absolute; right: 22px; bottom: 18px; display: grid; justify-items: end; color: rgba(248,218,172,.76); text-shadow: 0 2px 10px #000; }
.city-hero-stamp span { font: 700 19px 'Rajdhani', sans-serif; letter-spacing: 4px; }
.city-hero-stamp small { font-size: 7px; letter-spacing: 2px; }
.button-glass { color: #f5e7cf; border-color: rgba(229,191,129,.45); background: rgba(10,11,13,.66); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.button-glass:hover { background: rgba(85,30,31,.78); }
.dashboard-stats { margin: 13px 0 18px; grid-template-columns: repeat(4, minmax(0,1fr)); }
.stat-card { position: relative; overflow: hidden; padding: 14px 17px; border-color: rgba(216,173,99,.2); border-radius: 9px; background: linear-gradient(135deg, rgba(31,27,24,.96), rgba(13,14,17,.98) 70%); box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 8px 25px rgba(0,0,0,.18); }
.stat-card::after { content: ""; position: absolute; right: -20px; bottom: -29px; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, rgba(216,173,99,.11), transparent 68%); pointer-events: none; }
.stat-card span { color: #a99a84; }
.stat-card strong { color: #f1e5d2; font-size: 25px; }
.stat-card small { color: #8f8982; }
.dashboard-layout { display: grid; grid-template-columns: minmax(0,1fr) 285px; align-items: start; gap: 15px; }
.dashboard-main-column, .dashboard-side-column { display: grid; align-content: start; gap: 14px; min-width: 0; }
.feature-heading { margin: 2px 0 11px; }
.feature-heading h2 { color: #f4e7d2; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.feature-card { position: relative; isolation: isolate; min-height: 151px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 12px 13px; border: 1px solid rgba(216,173,99,.31); border-radius: 9px; color: #fff; background: #151518; box-shadow: 0 8px 20px rgba(0,0,0,.28); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.feature-card::before { content: ""; position: absolute; z-index: -2; inset: 0; background-position: center; background-size: cover; filter: saturate(.9); transition: transform .35s ease, filter .25s ease; }
.feature-card::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(4,5,7,.1), rgba(4,5,7,.28) 28%, rgba(4,5,7,.96) 100%); }
.feature-card:hover { transform: translateY(-3px); border-color: rgba(255,202,117,.72); box-shadow: 0 13px 28px rgba(0,0,0,.42), 0 0 18px rgba(191,49,40,.12); color: #fff; }
.feature-card:hover::before { transform: scale(1.06); filter: saturate(1.15) brightness(1.08); }
.art-street::before { background-image: url('../images/feature-street.webp'); }
.art-ammo-test::before { background-image: url('../images/feature-ammo-test.webp'); }
.art-protection::before { background-image: url('../images/feature-protection.webp'); }
.art-crimes::before { background-image: url('../images/feature-crimes.webp'); }
.art-workshop::before { background-image: url('../images/feature-workshop.webp'); }
.art-businesses::before { background-image: url('../images/feature-businesses.webp'); }
.art-venues::before { background-image: url('../images/feature-venues.webp'); }
.art-newspaper::before { background-image: url('../images/feature-newspaper.webp'); }
.art-chat::before { background-image: url('../images/feature-chat.webp'); }
.feature-kicker { align-self: flex-start; padding: 3px 6px; border: 1px solid rgba(228,187,112,.3); border-radius: 3px; color: #eac37e; background: rgba(0,0,0,.5); font-size: 7px; font-weight: 800; letter-spacing: 1.25px; }
.feature-card-copy { max-width: calc(100% - 15px); }
.feature-card h3 { margin: 0 0 3px; color: #fff0d5; font: 700 21px/1.05 'Rajdhani', sans-serif; text-shadow: 0 2px 8px #000; }
.feature-card p { margin: 0; color: #d3c8b8; font-size: 9px; line-height: 1.35; text-shadow: 0 2px 7px #000; }
.feature-arrow { position: absolute; right: 11px; bottom: 13px; color: #ef574b; font-size: 19px; font-weight: 700; text-shadow: 0 0 10px rgba(225,49,45,.5); }
.panel { border-color: rgba(216,173,99,.2); border-radius: 10px; background: linear-gradient(145deg, rgba(25,24,24,.98), rgba(11,12,15,.99)); box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 9px 26px rgba(0,0,0,.2); }
.panel-heading h2, .section-heading h2 { color: #f1e4d1; }
.panel-heading .eyebrow { margin-bottom: 4px; }
.rank-panel, .status-panel, .headlines-panel { padding: 16px; }
.rank-crown { color: #d7ad62; font-size: 23px; }
.rank-display { display: flex; align-items: center; gap: 11px; margin: 15px 0 12px; }
.rank-emblem { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(221,179,100,.45); border-radius: 50%; color: #f0c77c; background: radial-gradient(circle, rgba(201,149,62,.2), rgba(31,23,18,.95)); font-size: 26px; box-shadow: 0 0 17px rgba(216,173,99,.12); }
.rank-display strong, .rank-display small { display: block; }
.rank-display strong { color: #f2d49b; font: 700 25px 'Rajdhani', sans-serif; }
.rank-display small { color: #9f9689; font-size: 10px; }
.rank-progress-large { height: 9px; }
.rank-progress-meta { display: flex; justify-content: space-between; margin-top: 6px; color: #92877a; font-size: 9px; }
.rank-progress-meta strong { color: #e6bd78; }
.rank-next { margin: 11px 0 0; color: #9c9388; font-size: 10px; }
.rank-next strong { color: #e6c17e; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 11px currentColor; }
.status-line { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.055); color: #99918a; font-size: 10px; }
.status-line strong { color: #e8ddce; text-align: right; }
.status-panel .button { margin-top: 13px; }
.headline-list { display: grid; gap: 10px; margin-top: 14px; }
.headline-item { display: grid; grid-template-columns: 23px minmax(0,1fr); gap: 8px; padding-bottom: 9px; border-bottom: 1px solid rgba(255,255,255,.06); }
.headline-item:last-child { padding-bottom: 0; border-bottom: 0; }
.headline-mark { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: #e5bd77; background: rgba(216,173,99,.09); font-size: 12px; }
.headline-success { color: #e9bd73; }
.headline-failed { color: #df6d65; }
.headline-item p { margin: 0 0 3px; color: #d6cec3; font-size: 10px; line-height: 1.4; }
.headline-item small { color: #827c75; font-size: 8px; }
.economy-strip { display: flex; align-items: center; gap: 13px; padding: 14px 16px; border: 1px solid rgba(216,173,99,.25); border-radius: 9px; background: linear-gradient(105deg, rgba(79,45,20,.28), rgba(15,15,17,.98) 55%); }
.economy-icon { width: 39px; height: 39px; flex: 0 0 39px; display: grid; place-items: center; border: 1px solid rgba(216,173,99,.4); border-radius: 8px; color: #e8c27d; background: rgba(216,173,99,.08); font: 700 23px 'Rajdhani', sans-serif; }
.economy-copy { min-width: 0; flex: 1; }
.economy-copy > span { display: block; color: #9d8d76; font-size: 8px; font-weight: 800; letter-spacing: 1.3px; }
.economy-copy > strong { display: block; color: #f0d49e; font: 700 21px 'Rajdhani', sans-serif; }
.economy-copy > strong small { color: #a69a89; font: 500 10px 'DM Sans', sans-serif; }
.economy-copy p { margin: 0; color: #89837b; font-size: 9px; }
.economy-split { min-width: 88px; padding-left: 12px; border-left: 1px solid rgba(216,173,99,.17); }
.economy-split span, .economy-split strong { display: block; }
.economy-split span { color: #8c8275; font-size: 8px; }
.economy-split strong { color: #e4d4bd; font: 700 13px 'Rajdhani', sans-serif; }
.economy-strip > .text-link { white-space: nowrap; }
.dashboard-activity, .chat-preview-panel { padding: 17px; }
.mission-box { border-color: rgba(216,173,99,.22); background: linear-gradient(135deg, rgba(80,48,20,.16), rgba(255,255,255,.018)); }
.mission-box-featured { margin-top: 12px; }
.chat-preview-list { display: grid; gap: 0; margin-top: 9px; }
.chat-preview-item { position: relative; display: grid; grid-template-columns: 90px minmax(0,1fr) 38px; gap: 8px; align-items: center; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.055); }
.chat-preview-item:last-child { border-bottom: 0; }
.chat-preview-item strong { color: #e0b86e; font-size: 10px; }
.chat-preview-item p { margin: 0; overflow: hidden; color: #c7c0b7; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.chat-preview-item time { color: #7e7871; font-size: 8px; text-align: right; }

/* Existing game pages: unified premium visual language */
.page-heading { max-width: 900px; margin: 3px 0 20px; padding: 0 0 14px; border-bottom: 1px solid rgba(216,173,99,.17); }
.page-heading h1 { color: #f4e8d7; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.page-heading p:last-child { color: #a8a099; font-size: 12px; }
.eyebrow { color: #d66b51; }
.button-primary { background: linear-gradient(135deg, #d7443e, #851820); border: 1px solid rgba(255,190,130,.2); box-shadow: 0 6px 20px rgba(168,28,34,.25), inset 0 1px 0 rgba(255,255,255,.13); }
.button-secondary { background: linear-gradient(135deg, #29251f, #17181b); border-color: rgba(216,173,99,.24); }
.button-quiet { border-color: rgba(216,173,99,.2); color: #b4a48f; }
.notice { border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.16); }
.detail-list { border-top-color: rgba(216,173,99,.14); }
.detail-list > div { border-bottom-color: rgba(255,255,255,.06); }
.attack-form input, .form-stack input, .venue-bid-form input, .chat-composer textarea, .form-stack select, .form-stack textarea { color: #f4eadb; background: #0a0b0d; border-color: rgba(216,173,99,.24); }
.attack-form input:focus, .form-stack input:focus, .venue-bid-form input:focus, .chat-composer textarea:focus { border-color: #d5a65e; box-shadow: 0 0 0 2px rgba(216,173,99,.08); }
.venue-map { position: relative; overflow: hidden; border-color: rgba(216,173,99,.25); background: repeating-linear-gradient(0deg, transparent 0 47px, rgba(216,173,99,.07) 48px 50px), repeating-linear-gradient(90deg, transparent 0 47px, rgba(216,173,99,.07) 48px 50px), radial-gradient(ellipse at 50% 45%, rgba(115,26,29,.22), transparent 65%), #0b0d10; }
.venue-map-point { min-height: 75px; border-color: rgba(216,173,99,.2); background: linear-gradient(145deg, rgba(28,27,26,.92), rgba(9,10,12,.96)); box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 4px 12px rgba(0,0,0,.22); }
.venue-map-point:hover { border-color: rgba(236,187,103,.65); background: linear-gradient(145deg, rgba(67,37,28,.94), rgba(15,12,13,.98)); }
.protection-card, .catalog-card, .player-card, .job-row { border-color: rgba(216,173,99,.2); background: linear-gradient(145deg, rgba(28,26,25,.98), rgba(12,13,15,.99)); }
.protection-card h2, .catalog-card h2 { color: #f0e0c9; }
.player-card-top .avatar { border: 1px solid rgba(216,173,99,.3); background: linear-gradient(145deg, #b23936, #341116); }
.chat-message { border-color: rgba(216,173,99,.12); background: rgba(255,255,255,.025); }
.chat-message-head strong { color: #e2b66b; }
.news-index { border: 1px solid rgba(216,173,99,.2); color: #e8bf79; background: rgba(216,173,99,.08); }
.formula-display { border-color: rgba(216,173,99,.3); background: linear-gradient(135deg, rgba(84,50,20,.24), rgba(12,12,14,.9)); }
.simulation-alert-success { box-shadow: 0 0 18px rgba(70,166,107,.06); }
.simulation-alert-error { box-shadow: 0 0 18px rgba(216,58,66,.06); }

@media (max-width: 1120px) {
    .game-topbar { grid-template-columns: 190px minmax(0,1fr) auto; gap: 10px; }
    .resource-pill { min-width: 105px; padding: 7px 9px; }
    .resource-pill strong { font-size: 16px; }
    .game-layout { grid-template-columns: 195px minmax(0,1fr); gap: 16px; }
    .dashboard-layout { grid-template-columns: minmax(0,1fr) 255px; }
    .feature-card { min-height: 140px; }
}
@media (max-width: 850px) {
    .game-topbar { grid-template-columns: 1fr auto; padding: 11px 0; }
    .resource-hud { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; overflow-x: auto; padding-bottom: 2px; }
    .resource-pill { min-width: 120px; }
    .game-layout { grid-template-columns: 1fr; gap: 0; }
    .sidebar { position: relative; top: auto; max-height: none; overflow: visible; padding: 10px 0 8px; border-right: 0; border-bottom: 1px solid rgba(216,173,99,.2); }
    .sidebar-profile { display: none; }
    .sidebar-caption, .sidebar-motto { display: none; }
    .sidebar-nav { display: flex; gap: 6px; padding: 0 0 5px; overflow-x: auto; scrollbar-width: thin; }
    .sidebar-link { flex: 0 0 auto; min-height: 36px; padding: 7px 10px; border: 1px solid rgba(216,173,99,.14); background: rgba(255,255,255,.025); font-size: 10px; }
    .sidebar-icon { width: auto; flex-basis: auto; font-size: 15px; }
    .game-main { width: 100%; }
    .main-content { padding-top: 18px; }
    .dashboard-layout { grid-template-columns: 1fr; }
    .dashboard-side-column { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .headlines-panel { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
    .app-shell { width: calc(100% - 18px); }
    .game-topbar { min-height: auto; }
    .brand { font-size: 21px; }
    .brand-mark { width: 37px; height: 37px; font-size: 24px; }
    .top-username { display: none; }
    .resource-pill { min-width: 104px; }
    .resource-pill strong { font-size: 14px; }
    .resource-icon { width: 24px; height: 24px; }
    .city-hero { min-height: 245px; padding: 22px 17px; background-position: 48% center; }
    .city-hero::before { background: linear-gradient(90deg, rgba(5,6,8,.93), rgba(7,7,9,.67) 66%, rgba(7,7,9,.35)), linear-gradient(0deg, rgba(5,5,7,.48), transparent 60%); }
    .city-hero h1 { font-size: 34px; }
    .city-hero-content > p:not(.eyebrow) { max-width: 310px; font-size: 11px; }
    .city-hero-stamp { right: 12px; bottom: 9px; opacity: .65; }
    .city-hero-stamp span { font-size: 14px; }
    .dashboard-stats { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
    .stat-card { padding: 12px; }
    .stat-card strong { font-size: 21px; }
    .feature-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
    .feature-card { min-height: 136px; padding: 9px; }
    .feature-card h3 { font-size: 18px; }
    .feature-card p { font-size: 8px; }
    .feature-kicker { font-size: 6px; }
    .dashboard-side-column { grid-template-columns: 1fr; }
    .headlines-panel { grid-column: auto; }
    .economy-strip { flex-wrap: wrap; gap: 9px; }
    .economy-copy { flex-basis: calc(100% - 55px); }
    .economy-split { flex: 1; min-width: 40%; margin-top: 5px; }
    .economy-strip > .text-link { margin-left: auto; }
    .chat-preview-item { grid-template-columns: 74px minmax(0,1fr) 32px; gap: 5px; }
    .page-heading h1 { font-size: 34px; }
    .panel { padding: 16px; }
    .footer { flex-direction: column; align-items: flex-start; }
}
.auth-body {
    position: relative;
    isolation: isolate;
    background: linear-gradient(90deg, rgba(5,6,8,.94), rgba(7,7,9,.72)), url('../images/underworld-city.webp') center / cover fixed;
}
.auth-body::before { content: ""; position: fixed; z-index: -1; inset: 0; background: radial-gradient(ellipse at 15% 50%, rgba(142,24,31,.2), transparent 42%); }
.auth-card { border-color: rgba(216,173,99,.3); border-radius: 10px; background: linear-gradient(145deg, rgba(26,23,22,.97), rgba(8,9,11,.98)); box-shadow: 0 24px 80px rgba(0,0,0,.55); }
.auth-brand h1 { color: #f0dfc6; text-shadow: 0 3px 20px rgba(0,0,0,.8); }
.auth-brand p { color: #b99a6b; }
.profile-avatar { color: transparent; background-image: linear-gradient(180deg, rgba(8,8,10,.08), rgba(8,8,10,.42)), url('../images/profile-boss.webp'); background-size: cover; background-position: center 28%; }


/* YERALTI Premium membership */
.premium-name { color: #f4ca72 !important; text-shadow: 0 0 10px rgba(236,184,86,.24); }
.premium-hero { display: flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 245px; padding: 28px; border-color: rgba(239,190,96,.42); background: radial-gradient(circle at 82% 40%, rgba(191,133,43,.18), transparent 35%), linear-gradient(130deg, rgba(65,35,20,.8), rgba(10,10,13,.98) 62%); }
.premium-hero h1 { margin: 5px 0 8px; color: #f4d28d; font-size: clamp(34px,5vw,54px); letter-spacing: .06em; }
.premium-hero h1 span { color: #f5c45d; }
.premium-hero-copy > p:not(.eyebrow) { max-width: 620px; color: #c5b8a8; }
.premium-price { display: flex; align-items: baseline; gap: 8px; margin: 16px 0 10px; }
.premium-price strong { color: #ffe0a0; font: 700 38px 'Rajdhani',sans-serif; }
.premium-price span { color: #a99b88; }
.premium-crest { display: grid; place-items: center; flex: 0 0 140px; width: 140px; height: 140px; border: 1px solid rgba(240,194,104,.55); border-radius: 50%; color: #f3c86d; background: radial-gradient(circle, rgba(197,143,53,.2), rgba(14,12,10,.9) 70%); box-shadow: 0 0 45px rgba(193,133,39,.16), inset 0 0 20px rgba(239,194,103,.08); font-size: 64px; text-align: center; }
.premium-crest small { display: block; margin-top: -28px; color: #d9bc81; font: 700 8px 'Rajdhani',sans-serif; letter-spacing: .18em; line-height: 1.5; }
.premium-active-label,.premium-inactive-label { display: inline-block; padding: 6px 10px; border-radius: 20px; font: 700 10px 'Rajdhani',sans-serif; letter-spacing: .1em; }
.premium-active-label { color: #f8d68e; border: 1px solid rgba(232,187,99,.45); background: rgba(177,126,38,.15); }
.premium-inactive-label { color: #b9a99a; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); }
.premium-expiry { margin-top: 9px; color: #b9aa96; font-size: 11px; }
.premium-feature-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.premium-feature { min-height: 145px; border-color: rgba(220,173,87,.22); background: linear-gradient(145deg, rgba(31,27,22,.98), rgba(11,12,14,.99)); }
.premium-feature > span { display: inline-grid; place-items: center; width: 31px; height: 31px; margin-bottom: 8px; border: 1px solid rgba(235,191,105,.35); border-radius: 8px; color: #f2c873; background: rgba(196,139,47,.1); font-size: 17px; }
.premium-feature h3 { margin-bottom: 5px; color: #f1d59e; font-size: 19px; }
.premium-feature p { margin: 0; color: #aaa096; font-size: 11px; line-height: 1.6; }
.premium-feature .text-link { display: inline-block; margin-top: 9px; }
.premium-feature-wide { grid-column: 1 / -1; }
.notice-premium { margin: 14px 0; padding: 12px 14px; border: 1px solid rgba(237,190,96,.3); border-radius: 8px; color: #f2d59b; background: rgba(185,131,42,.09); font-size: 11px; }
.profile-avatar { overflow: hidden; }
.profile-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.profile-avatar-premium { border: 1px solid rgba(244,201,112,.8); box-shadow: 0 0 16px rgba(231,180,83,.18); }
.profile-customize-panel { display: flex; align-items: center; gap: 22px; }
.profile-customize-avatar { flex: 0 0 150px; width: 150px; height: 150px; overflow: hidden; border: 2px solid rgba(235,190,104,.55); border-radius: 14px; background: #15120f; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.profile-customize-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-customize-copy { flex: 1; min-width: 0; }
.profile-customize-copy h2 { margin: 4px 0 8px; }
.profile-customize-copy .form-stack { max-width: 430px; margin-top: 14px; }
.profile-customize-copy input[type=file] { width: 100%; padding: 10px; color: #d5c8b6; border: 1px solid rgba(216,173,99,.24); border-radius: 7px; background: #0a0b0d; }
.art-premium { background-image: linear-gradient(90deg,rgba(8,8,10,.9),rgba(8,8,10,.22)),url('../images/profile-boss.webp'); background-position: center 28%; background-size: cover; border-color: rgba(231,182,84,.42); }
.art-premium h3 { color: #f3cf82; }
@media (max-width: 620px) {
    .premium-hero { align-items: flex-start; padding: 18px; }
    .premium-crest { flex-basis: 78px; width: 78px; height: 78px; font-size: 36px; }
    .premium-crest small { margin-top: -15px; font-size: 6px; }
    .premium-feature-grid { grid-template-columns: 1fr; }
    .premium-feature-wide { grid-column: auto; }
    .profile-customize-panel { align-items: flex-start; flex-direction: column; }
    .profile-customize-avatar { width: 116px; height: 116px; flex-basis: 116px; }
}

.chat-avatar { width: 26px; height: 26px; flex: 0 0 26px; object-fit: cover; border: 1px solid rgba(240,194,104,.55); border-radius: 50%; }
.chat-avatar-small { width: 20px; height: 20px; vertical-align: middle; margin-right: 4px; }
.player-card-top .avatar { overflow: hidden; }
.player-card-top .avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }


/* YERALTI - Mobile readability improvements (desktop unchanged) */
@media (max-width: 650px) {
  body { font-size: 16px; line-height: 1.6; }
  .muted, .small, .hero-copy, .page-heading p:last-child,
  .city-hero-content > p:not(.eyebrow), .feature-card p,
  .news-body p, .headline-item p, .chat-message p,
  .mission-box p, .job-main p, .premium-feature p,
  .economy-copy p { font-size: 14px; line-height: 1.5; }
  .eyebrow, .mini-label, .card-kicker, .feature-kicker,
  .stat-card span, .resource-pill small, .economy-copy > span,
  .sidebar-caption { font-size: 12px; letter-spacing: .7px; }
  .button, .button-small, .sidebar-link, .main-nav a,
  .text-link { font-size: 16px; min-height: 44px; }
  .sidebar-link { padding: 9px 13px; }
  .status-pill, .nav-tag, .premium-active-label,
  .premium-inactive-label { font-size: 12px; }
  .notice, .notice-premium, .simulation-alert span { font-size: 14px; }
  .player-card-top strong, .player-meta, .player-card-top span,
  .attack-form label, .form-stack label, .chat-composer label,
  .detail-list.compact > div { font-size: 15px; }
  .attack-form input, .form-stack input, .form-stack select,
  .form-stack textarea, .venue-bid-form input,
  .chat-composer textarea { font-size: 16px; min-height: 44px; }
  .feature-card h3 { font-size: 21px; }
  .feature-card { min-height: 160px; }
  .panel-heading h2, .section-heading h2, h2 { font-size: 23px; }
  .chat-message-head strong, .chat-preview-item strong,
  .chat-preview-item p, .job-reward strong, .job-reward span,
  .job-time, .news-loot, .status-line, .headline-item small,
  .chat-message-head time, .news-meta time, .stat-card small,
  .rank-next, .rank-display small, .economy-split span,
  .economy-copy > strong small { font-size: 13px; }
  .footer, .premium-expiry, .profile-details span { font-size: 13px; }
  .venue-map-point strong, .venue-map-point small { font-size: 11px; }
  .resource-pill strong { font-size: 17px; }
  .feature-grid, .stats-grid { min-width: 0; }
  .feature-card, .stat-card, .panel { min-width: 0; }
}