/* قلم Peyda از دارایی‌های خود اپ؛ هیچ قلمی از شبکهٔ بیرونی بارگذاری نمی‌شود */
@font-face { font-family: Peyda; src: url(/assets/peyda-regular-f18b64cb58.ttf) format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: Peyda; src: url(/assets/peyda-bold-5bf9e17e59.ttf) format('truetype'); font-weight: 700; font-display: swap; }

:root {
  --brand: #ff8a00;
  --brand-2: #ff6900;
  --gold: #ffc247;
  --ink: #0e121a;
  --glass: rgba(14, 18, 26, 0.66);
  --glass-2: rgba(14, 18, 26, 0.88);
  --line: rgba(255, 255, 255, 0.12);
  --line-2: rgba(255, 255, 255, 0.22);
  --text: #f5f6f8;
  --muted: #aab2c0;
  --ok: #37d67a;
  --wait: #ffc14d;
  --off: #ff6b5e;
  --r: 18px;
  --st: env(safe-area-inset-top, 0px);
  --sb: env(safe-area-inset-bottom, 0px);
  --sl: env(safe-area-inset-left, 0px);
  --sr: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--ink); color: var(--text); font-family: Peyda, Tahoma, sans-serif; }
body { touch-action: none; user-select: none; -webkit-user-select: none; }
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
#scene { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; outline: none; }
[hidden] { display: none !important; }

.ic { width: 20px; height: 20px; flex: none; }
.glass { background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 10px 30px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .06); }
.icon-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: var(--text); text-decoration: none; transition: transform .12s, background .2s; }
.icon-btn:hover { background: rgba(255, 255, 255, .1); }
.icon-btn:active { transform: scale(.94); }
kbd { font: 600 10px/1 ui-monospace, Menlo, monospace; padding: 3px 5px; border-radius: 5px; background: rgba(255, 255, 255, .12); color: var(--muted); direction: ltr; }
.mini { padding: 6px 12px; border-radius: 10px; background: rgba(255, 255, 255, .12); font-size: 12px; font-weight: 700; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; background: rgba(0, 0, 0, .35); }
.pill:empty { display: none; }
.pill.ok { color: var(--ok); } .pill.wait { color: var(--wait); } .pill.off { color: var(--off); }
.pill.ok::before, .pill.wait::before, .pill.off::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }

/* ---------- چیدمان رابط: چهار ناحیهٔ ثابت ----------
   ستون راست (وضعیت تو، داستان، مأموریت‌ها)، ستون چپ (نقشه و شبکه)، بالا وسط (محله و اعلان‌ها) و پایین (منو و کنترل‌ها).
   هر ناحیه ستون فلکس است؛ کارتی که بلند شود بقیه را جابه‌جا می‌کند و فاصلهٔ ثابت عددی لازم نیست. */
:root { --edge: 14px; --gap: 10px; --rail: 300px; --map: 148px; --bottom-reserve: 104px; --lapis: #3aa7e0; }
#rail-right, #corner-tl, #top-center { position: fixed; z-index: 2; display: flex; flex-direction: column; gap: var(--gap); pointer-events: none; }
#rail-right > *, #corner-tl > *, #top-center > * { pointer-events: auto; flex: none; }
#rail-right { top: calc(var(--edge) + var(--st)); right: calc(var(--edge) + var(--sr)); width: var(--rail); max-height: calc(100dvh - var(--edge) - var(--st) - var(--bottom-reserve) - var(--sb)); overflow: hidden; }
#corner-tl { top: calc(var(--edge) + var(--st)); left: calc(var(--edge) + var(--sl)); align-items: flex-start; }
/* وسط‌چینی با margin، نه transform؛ transform برای فرزند fixed (اعلان‌های گوشی) قاب تازه می‌سازد */
#top-center { top: calc(var(--edge) + var(--st)); left: 0; right: 0; margin-inline: auto; align-items: center; width: clamp(160px, calc(100vw - 2 * var(--rail) - 4 * var(--edge)), 460px); }
body.driving { --bottom-reserve: 270px; }

/* ---------- کارت بازیکن: ستارهٔ هشت‌پر سطح، نام، چهار شمارنده ---------- */
#player-card { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "lvl who" "chips chips"; align-items: center; gap: 10px 12px; padding: 12px; border-radius: 20px; }
#player-card .lvl { grid-area: lvl; position: relative; width: 54px; height: 54px; }
#player-card .lvl svg { width: 100%; height: 100%; overflow: visible; }
#player-card .lvl path { stroke-width: 2.6; stroke-linejoin: round; }
#player-card .lvl .track { fill: rgba(8, 11, 18, .55); stroke: rgba(255, 255, 255, .16); }
#player-card .lvl .fill { fill: none; stroke: var(--brand); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .6s ease; filter: drop-shadow(0 0 4px rgba(255, 138, 0, .65)); }
#player-card .lvl b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 18px; font-variant-numeric: tabular-nums; }
#player-card .who { grid-area: who; display: grid; gap: 2px; min-width: 0; }
#player-card .who b { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#player-card .who small { font-size: 12px; color: var(--gold); }
#player-card .chips { grid-area: chips; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
#player-card .chip { justify-content: center; gap: 5px; min-width: 0; padding: 6px 4px; border-radius: 12px; background: rgba(255, 255, 255, .05); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
#player-card button.chip:hover { background: rgba(255, 255, 255, .11); }
#player-card button.chip:focus-visible, #hotbar button:focus-visible, .q-head:focus-visible, .icon-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.chips { display: flex; flex-direction: column; gap: 4px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 999px; background: rgba(0, 0, 0, .35); border: 1px solid var(--line); font-size: 13px; min-width: 76px; justify-content: space-between; }
.chip .ic { width: 16px; height: 16px; }
.chip.coin .ic { color: var(--gold); } .chip.star .ic { color: #8fd3ff; }
.chip.coin { transition: background .2s; } .chip.coin:hover { background: rgba(255, 194, 71, .18); }
.chip.bump { animation: bump .5s ease; }
@keyframes bump { 40% { transform: scale(1.18); background: rgba(255, 194, 71, .35); } }

/* ---------- ستون چپ: خروج، نقشه، شبکه ---------- */
.map-row { display: flex; align-items: flex-start; gap: 8px; }
.map-wrap { position: relative; width: var(--map); height: var(--map); border-radius: 50%; padding: 5px; }
#minimap { width: 100%; height: 100%; border-radius: 50%; display: block; }
.map-wrap .north { position: absolute; top: -2px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 8px; background: var(--brand); }
#net { display: flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 12px; font-size: 12px; direction: ltr; font-variant-numeric: tabular-nums; }
#net .ic { width: 15px; height: 15px; color: var(--muted); }
#net .sep { width: 1px; height: 14px; background: var(--line-2); }
.bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.bars i { width: 3px; border-radius: 1px; background: rgba(255, 255, 255, .2); }
.bars i:nth-child(1) { height: 4px; } .bars i:nth-child(2) { height: 7px; } .bars i:nth-child(3) { height: 10px; } .bars i:nth-child(4) { height: 14px; }
.bars.q4 i, .bars.q3 i:nth-child(-n+3) { background: var(--ok); }
.bars.q2 i:nth-child(-n+2) { background: var(--wait); }
.bars.q1 i:nth-child(1) { background: var(--off); }
#ping.good { color: var(--ok); } #ping.mid { color: var(--wait); } #ping.bad { color: var(--off); }
#offline { width: calc(var(--map) + 52px); display: grid; gap: 8px; padding: 10px 12px; border-radius: 14px; font-size: 12px; line-height: 1.8; border-color: rgba(255, 107, 94, .45); }
#offline .mini { justify-self: start; }
/* پس از چند ثانیه پیام بلند جمع می‌شود؛ نشان «حالت تنها» بالای صفحه می‌ماند */
#offline.quiet { width: auto; padding: 4px; border-radius: 12px; }
#offline.quiet #offline-text { display: none; }

/* ---------- بالا وسط: محله، وضعیت، مسابقه، اعلان‌ها ---------- */
#top-center > #banner, #top-center > #feed { pointer-events: none; }
#banner { display: grid; justify-items: center; gap: 6px; max-width: 100%; }
#zone { max-width: 100%; padding: 9px 20px; border-radius: 16px; font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#zone::before { content: ''; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--zone-color, var(--brand)); box-shadow: 0 0 10px var(--zone-color, var(--brand)); }
#banner .sub { display: flex; gap: 6px; }
#race-hud { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-radius: 16px; border-color: rgba(255, 138, 0, .5); }
#race-hud .ic { color: var(--brand); }
#race-time { font-size: 22px; font-variant-numeric: tabular-nums; min-width: 92px; text-align: center; }
#race-cp { font-size: 13px; color: var(--muted); }
#feed { display: grid; gap: 6px; justify-items: center; width: 100%; }
.feed-item { pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 14px; background: var(--glass-2); border: 1px solid var(--line); font-size: 13px; line-height: 1.7; animation: feed-in .3s ease; box-shadow: 0 8px 22px rgba(0, 0, 0, .3); }
.feed-item.quest, .feed-item.bonus { border-color: rgba(143, 211, 255, .5); }
.feed-item.coin { border-color: rgba(255, 194, 71, .55); }
.feed-item.out { opacity: 0; transform: translateY(-6px); transition: all .35s; }
.feed-item .mini { background: var(--brand); color: #fff; }
@keyframes feed-in { from { opacity: 0; transform: translateY(-8px) scale(.97); } }

/* ---------- داستان و مأموریت‌ها (ستون راست) ---------- */
#story-card { border-radius: 18px; padding: 11px 14px 12px; display: grid; gap: 4px; border-color: rgba(255, 176, 32, .4); }
#story-card header { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--gold); min-width: 0; }
#story-card header .ic { width: 18px; height: 18px; }
#story-card .st-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#story-card .st-dist { margin-inline-start: auto; flex: none; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
#story-card .st-text { margin: 0; font-size: 13px; line-height: 1.8; font-weight: 700; }
#story-card .st-hint { font-size: 11px; line-height: 1.7; color: var(--muted); }
#story-card .st-hint:empty { display: none; }
/* در حالت تنها داستان از سرور نمی‌رسد؛ قاب خالی نشان داده نشود */
#story-card:has(.st-text:empty) { display: none; }
#quests:not(:has(#q-list li)) { display: none; }
#quests { border-radius: 18px; padding: 5px 6px 10px; }
.q-head { width: 100%; display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 12px; font-size: 13px; text-align: start; }
.q-head:hover { background: rgba(255, 255, 255, .06); }
.q-head .ic { color: var(--brand); width: 18px; height: 18px; }
#q-count { margin-inline-start: auto; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.q-head .chev { width: 7px; height: 7px; margin: 0 4px 3px 2px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s; }
#quests.collapsed .chev { transform: rotate(-135deg); margin-bottom: -3px; }
#q-list { list-style: none; margin: 0; padding: 4px 8px 0; display: grid; gap: 8px; }
#q-list li { display: grid; gap: 5px; font-size: 12px; line-height: 1.7; color: var(--text); }
#q-list li.done { color: var(--muted); text-decoration: line-through; }
#q-list .qbar { height: 5px; border-radius: 4px; background: rgba(255, 255, 255, .12); overflow: hidden; }
#q-list .qbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #8fd3ff, var(--lapis)); border-radius: 4px; transition: width .4s; }
#q-list li.done .qbar i { background: var(--ok); }
#quests.collapsed #q-list li:not(.next), body.driving #q-list li:not(.next) { display: none; }
#quests.collapsed #q-list:not(:has(li.next)) { display: none; }
#quests.collapsed { padding-bottom: 8px; }

/* ---------- نوار پایین و کنترل‌ها ---------- */
#hotbar { position: fixed; z-index: 2; bottom: calc(var(--edge) + var(--sb)); left: 50%; transform: translateX(-50%); display: flex; gap: 2px; padding: 6px; border-radius: 20px; }
#hotbar button { position: relative; display: grid; justify-items: center; gap: 3px; min-width: 72px; padding: 8px 8px 7px; border-radius: 14px; font-size: 11px; font-weight: 700; color: var(--muted); transition: background .2s, color .2s, transform .1s; }
#hotbar button .ic { width: 24px; height: 24px; color: var(--text); }
#hotbar button:hover, #hotbar button.on { background: rgba(255, 138, 0, .14); color: var(--text); }
#hotbar button.on .ic { color: var(--brand); }
#hotbar button.on::after { content: ''; position: absolute; bottom: 2px; left: 50%; width: 18px; height: 3px; margin-left: -9px; border-radius: 2px; background: var(--brand); }
#hotbar button:active { transform: scale(.95); }
#hotbar kbd { position: absolute; top: 4px; left: 6px; }
#hotbar .dot { position: absolute; top: 6px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--off); box-shadow: 0 0 8px var(--off); }

#actions { position: fixed; z-index: 2; right: calc(24px + var(--sr)); bottom: calc(24px + var(--sb)); display: grid; gap: 12px; justify-items: end; }
body.touch #actions { bottom: calc(26px + var(--sb)); }
.primary-action { display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 18px; font-size: 16px; font-weight: 700; color: #fff; background: linear-gradient(180deg, var(--brand), var(--brand-2)); box-shadow: 0 10px 26px rgba(255, 105, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .3); animation: pulse 1.8s ease-in-out infinite; }
.primary-action kbd { background: rgba(0, 0, 0, .25); color: #fff; }
@keyframes pulse { 50% { box-shadow: 0 10px 34px rgba(255, 105, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .3); } }
.round-btn { width: 72px; height: 72px; border-radius: 50%; place-items: center; background: var(--glass); border: 1px solid var(--line-2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.round-btn .ic { width: 30px; height: 30px; }
.round-btn:active { transform: scale(.94); background: rgba(255, 138, 0, .3); }

#emote-wheel { position: fixed; z-index: 3; bottom: calc(100px + var(--sb)); left: 50%; transform: translateX(-50%); display: flex; gap: 10px; padding: 10px; border-radius: 22px; background: var(--glass-2); border: 1px solid var(--line); animation: feed-in .2s; }
#emote-wheel button { display: grid; justify-items: center; gap: 2px; width: 74px; padding: 10px 4px; border-radius: 16px; font-size: 12px; font-weight: 700; background: rgba(255, 255, 255, .06); }
#emote-wheel button span { font-size: 26px; }
#emote-wheel button:hover { background: rgba(255, 138, 0, .2); }

/* کنترل لمسی فقط روی صفحهٔ لمسی؛ :not([hidden]) تا پد رانندگی هنگام پیاده‌روی پنهان بماند */
.touch-only { display: none !important; }
body.touch .touch-only:not([hidden]) { display: grid !important; }
#joystick { position: fixed; z-index: 2; left: calc(26px + var(--sl)); bottom: calc(26px + var(--sb)); width: 132px; height: 132px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .06), rgba(14, 18, 26, .45)); border: 1px solid var(--line-2); touch-action: none; }
#joystick .knob { position: absolute; left: calc(50% - 27px); top: calc(50% - 27px); width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(180deg, #fff, #dfe3ea); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); pointer-events: none; }
body.touch #joystick { display: block !important; }

#toast { position: fixed; z-index: 4; bottom: calc(96px + var(--sb)); left: 50%; transform: translate(-50%, 8px); padding: 10px 18px; border-radius: 14px; background: var(--glass-2); font-size: 14px; opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; max-width: calc(100vw - 32px); text-align: center; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- کارت پروفایل بازیکن ---------- */
#profile-card { position: fixed; left: 50%; bottom: calc(100px + var(--sb)); transform: translateX(-50%); width: min(380px, calc(100vw - 24px)); border-radius: 22px; padding: 16px; display: grid; gap: 12px; animation: feed-in .2s; z-index: 5; }
.pc-head { display: flex; align-items: center; gap: 12px; }
.pc-badge { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; font-size: 22px; font-weight: 700; background: linear-gradient(160deg, var(--brand), var(--brand-2)); }
.pc-head .meta { display: grid; gap: 2px; flex: 1; }
.pc-head .meta b { font-size: 17px; }
.pc-head .meta small { color: var(--gold); font-size: 12px; }
.pc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pc-stats div { padding: 8px; border-radius: 12px; background: rgba(255, 255, 255, .06); text-align: center; font-size: 11px; color: var(--muted); }
.pc-stats b { display: block; color: var(--text); font-size: 15px; }
.pc-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pc-actions button, .btn { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 8px; border-radius: 12px; background: rgba(255, 255, 255, .08); border: 1px solid var(--line); font-size: 12px; font-weight: 700; transition: background .2s, transform .1s; }
.pc-actions button:hover, .btn:hover { background: rgba(255, 255, 255, .14); }
.pc-actions button:active, .btn:active { transform: scale(.97); }
.pc-actions .ic { width: 17px; height: 17px; }
.btn.primary, .pc-actions .primary { background: linear-gradient(180deg, var(--brand), var(--brand-2)); border-color: transparent; color: #fff; }
.btn.danger, .pc-actions .danger { color: #ffb4ab; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- پنجره‌ها ---------- */
#modal { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(5, 8, 12, .5); z-index: 10; animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
.sheet { width: min(900px, calc(100vw - 24px)); max-height: min(86vh, 760px); border-radius: 24px; padding: 18px; display: grid; grid-template-rows: auto 1fr; gap: 12px; background: var(--glass-2); }
.sheet header { display: flex; align-items: center; justify-content: space-between; }
.sheet h2 { margin: 0; font-size: 20px; }
#modal-body { overflow: auto; min-height: 0; }
.floating { position: fixed; top: calc(80px + var(--st)); right: calc(12px + var(--sr)); width: min(360px, calc(100vw - 24px)); display: grid; grid-template-rows: none; gap: 12px; z-index: 9; }
#settings label { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; }
#settings label.check { justify-content: flex-start; }
#settings select { background: rgba(255, 255, 255, .08); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; }
#settings select option { background: #1b2130; }
#settings input[type=range] { accent-color: var(--brand); width: 140px; }
.hint { margin: 0; font-size: 12px; line-height: 1.9; color: var(--muted); }

/* فروشگاه */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.tabs button { display: flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 12px; background: rgba(255, 255, 255, .06); font-size: 14px; font-weight: 700; color: var(--muted); }
.tabs button.on { background: rgba(255, 138, 0, .2); color: var(--text); box-shadow: inset 0 0 0 1px rgba(255, 138, 0, .55); }
.wallet-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .05); font-size: 13px; }
.wallet-bar .chip { min-width: 0; }
.wallet-bar .note { color: var(--muted); font-size: 12px; margin-inline-start: auto; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.item { position: relative; display: grid; gap: 8px; padding: 10px; border-radius: 18px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); transition: transform .15s, border-color .2s; }
.item:hover { transform: translateY(-2px); border-color: var(--line-2); }
.item.owned { border-color: rgba(55, 214, 122, .45); }
.item .thumb { aspect-ratio: 4 / 3; border-radius: 12px; background: radial-gradient(120% 90% at 50% 20%, #34405a, #161b26); display: grid; place-items: center; overflow: hidden; }
.item .thumb img { width: 100%; height: 100%; object-fit: cover; }
.item .thumb .ic { width: 42px; height: 42px; color: rgba(255, 255, 255, .5); }
.item b { font-size: 14px; }
.item p { margin: 0; font-size: 11px; color: var(--muted); line-height: 1.7; min-height: 2.6em; }
.item .price { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 700; color: var(--gold); }
.item .price .ic { width: 16px; height: 16px; }
.item .tag { position: absolute; top: 14px; right: 14px; padding: 3px 8px; border-radius: 8px; font-size: 10px; font-weight: 700; background: rgba(0, 0, 0, .55); }
.item .tag.lock { color: #8fd3ff; } .item .tag.own { color: var(--ok); }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px; }
.swatches button { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; }
.swatches button.on { border-color: #fff; box-shadow: 0 0 0 2px var(--brand); }

/* فهرست بازیکنان و پیام‌ها */
.list { display: grid; gap: 8px; }
.row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .05); font-size: 14px; }
.row .grow { flex: 1; display: grid; gap: 2px; }
.row small { color: var(--muted); font-size: 11px; }
.row .online { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.row .online.no { background: #59606b; }
.phrases { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.phrases button { padding: 14px 12px; border-radius: 14px; background: rgba(255, 255, 255, .07); border: 1px solid var(--line); font-size: 15px; font-weight: 700; }
.phrases button:hover { background: rgba(255, 138, 0, .2); }
.empty { padding: 26px; text-align: center; color: var(--muted); font-size: 13px; line-height: 2; }

#debug { display: none; position: fixed; left: 50%; transform: translateX(-50%); margin: 0; padding: 4px 10px; border-radius: 8px; background: rgba(0, 0, 0, .55); color: #9fe; font: 11px/1.4 ui-monospace, Menlo, monospace; direction: ltr; pointer-events: none; }
body.debug #debug { display: block; bottom: calc(96px + var(--sb)); }

#loading { position: fixed; inset: 0; z-index: 20; display: grid; place-content: center; justify-items: center; gap: 10px; background: radial-gradient(120% 90% at 50% 30%, #2a2018 0%, #0e121a 60%); transition: opacity .6s ease; }
#loading.done { opacity: 0; pointer-events: none; }
#loading .brand { font-size: 56px; font-weight: 700; color: var(--brand); letter-spacing: -1px; }
#loading .sub { font-size: 16px; color: var(--muted); margin-top: -6px; }
#loading .bar { width: min(260px, 70vw); height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .1); overflow: hidden; margin-top: 18px; }
#progress { height: 100%; width: 0; background: linear-gradient(90deg, var(--brand-2), var(--brand)); transition: width .3s ease; }
#loading-text { font-size: 13px; color: var(--muted); min-height: 1.6em; text-align: center; padding: 0 24px; line-height: 1.8; }
#loading.error #loading-text { color: var(--off); }

.chip.citizen .ic { color: var(--ok); }
.chip.citizen.warn .ic, .chip.citizen.warn b { color: var(--off); }

#dialog { position: fixed; left: 50%; bottom: calc(108px + var(--sb)); transform: translateX(-50%); width: min(720px, calc(100vw - 24px)); display: flex; align-items: flex-end; gap: 14px; padding: 16px 18px; border-radius: 22px; z-index: 8; border-color: rgba(255, 176, 32, .45); animation: feed-in .25s; }
#dialog .dlg-body { flex: 1; display: grid; gap: 2px; min-height: 92px; }
#dialog .dlg-body b { font-size: 16px; color: var(--gold); }
#dialog .dlg-body small { font-size: 11px; color: var(--muted); }
#dialog p { margin: 6px 0 0; font-size: 16px; line-height: 2; min-height: 3.6em; }
#dialog .btn { min-width: 96px; }
#letterbox { position: fixed; inset: 0; pointer-events: none; z-index: 6; }
#letterbox i { position: absolute; left: 0; right: 0; height: 9vh; background: #000; animation: lb .5s ease; }
#letterbox i:first-child { top: 0; } #letterbox i:last-child { bottom: 0; }
@keyframes lb { from { height: 0; } }
body.cinema #hud { opacity: 0; pointer-events: none; transition: opacity .4s; }
#hud { transition: opacity .4s; }
#cine-title { position: fixed; left: 50%; bottom: 16vh; transform: translateX(-50%); text-align: center; z-index: 7; pointer-events: none; display: grid; gap: 6px; text-shadow: 0 4px 30px rgba(0, 0, 0, .7); }
#cine-title small { font-size: 16px; color: var(--gold); }
#cine-title b { font-size: clamp(26px, 5vw, 48px); }
#cine-title.show { animation: cine 1.2s ease; }
@keyframes cine { from { opacity: 0; transform: translate(-50%, 12px); letter-spacing: 2px; } }
#skip-intro { position: fixed; bottom: calc(12vh + 14px); right: 24px; z-index: 7; background: rgba(255, 255, 255, .18); color: #fff; }
#chapter-banner { position: fixed; top: 28%; left: 50%; transform: translateX(-50%); z-index: 7; display: grid; justify-items: center; gap: 8px; padding: 22px 36px; border-radius: 26px; background: radial-gradient(120% 140% at 50% 0%, rgba(255, 176, 32, .35), rgba(14, 18, 26, .92)); border: 1px solid rgba(255, 176, 32, .6); box-shadow: 0 20px 60px rgba(0, 0, 0, .45), 0 0 60px rgba(255, 176, 32, .25); text-align: center; pointer-events: none; }
#chapter-banner .ic { width: 42px; height: 42px; color: var(--gold); }
#chapter-banner b { font-size: 24px; } #chapter-banner small { font-size: 14px; color: var(--muted); }
#chapter-banner.show { animation: banner 5.2s ease forwards; }
@keyframes banner { 0% { opacity: 0; transform: translate(-50%, 20px) scale(.9); } 10% { opacity: 1; transform: translate(-50%, 0) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- سرعت‌سنج ---------- */
#speedo { position: fixed; z-index: 2; right: calc(24px + var(--sr)); bottom: calc(96px + var(--sb)); width: 150px; height: 150px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, rgba(14, 18, 26, .85) 55%, rgba(14, 18, 26, .5)); border: 1px solid var(--line-2); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
#speedo svg { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); }
#speedo .arc { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 7; stroke-linecap: round; }
#speedo .arc.fill { stroke: var(--brand); stroke-dasharray: 245; stroke-dashoffset: 245; transition: stroke-dashoffset .1s linear; }
#speedo.over .arc.fill { stroke: var(--off); }
#speed-num { font-size: 34px; line-height: 1; margin-top: -10px; font-variant-numeric: tabular-nums; }
#speedo small { position: absolute; top: 92px; font-size: 10px; color: var(--muted); direction: ltr; }
#speedo .limit { position: absolute; top: -10px; left: -10px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #111; font-weight: 700; font-size: 15px; border: 5px solid #d62828; box-shadow: 0 4px 12px rgba(0, 0, 0, .4); }
#gear { position: absolute; bottom: 14px; font-size: 13px; font-weight: 700; color: var(--gold); direction: ltr; }
#drive-warn { position: absolute; top: -34px; right: 0; white-space: nowrap; font-size: 13px; font-weight: 700; color: var(--off); text-shadow: 0 2px 10px rgba(0, 0, 0, .7); }
#license { position: fixed; top: 34%; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 16px; border-color: rgba(255, 107, 94, .6); font-size: 14px; font-weight: 700; z-index: 4; }
#license .ic { color: var(--off); }
.feed-item.ticket { border-color: rgba(255, 107, 94, .65); background: linear-gradient(90deg, rgba(120, 20, 20, .7), var(--glass-2)); }
#drive-pad { position: fixed; z-index: 2; right: calc(var(--edge) + var(--sr)); bottom: calc(var(--edge) + var(--sb)); display: grid; grid-template-columns: repeat(2, 76px); gap: 10px; }
#drive-pad button { height: 76px; border-radius: 20px; background: var(--glass-2); border: 1px solid var(--line-2); font-weight: 700; font-size: 14px; }
#drive-pad #pad-gas { background: linear-gradient(180deg, #2fa36b, #1f7a4f); }
#drive-pad #pad-brake { background: linear-gradient(180deg, #c0392b, #8e2a20); }
#drive-pad button.on { transform: scale(.94); filter: brightness(1.25); }
body.driving.touch #hotbar, body.driving.touch #jump { display: none !important; }
body.driving.touch #speedo { right: calc(var(--edge) + 20px + var(--sr)); bottom: calc(var(--edge) + 186px + var(--sb)); }
body.driving.touch #joystick { bottom: calc(var(--edge) + 12px + var(--sb)); }
@media (max-width: 760px) {
  #speedo { width: 112px; height: 112px; bottom: calc(150px + var(--sb)); }
  #speed-num { font-size: 26px; }
  #speedo small { top: 70px; }
  #dialog { flex-wrap: wrap; }
  #dialog p { font-size: 14px; }
}

body.lite .glass, body.lite .round-btn, body.lite .sheet { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(14, 18, 26, .9); }
body.lite .primary-action { animation: none; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- کارت طبقهٔ کتابخانه (جای مأموریت‌ها داخل کتابخانه) ---------- */
body.in-library #quests { display: none; }
#lib-card { --tier: #d08a4a; border-radius: 18px; padding: 12px 14px; display: grid; gap: 7px; border-color: color-mix(in srgb, var(--tier) 55%, transparent); box-shadow: 0 10px 30px rgba(0, 0, 0, .35), 0 0 24px color-mix(in srgb, var(--tier) 25%, transparent); }
#lib-card[hidden] { display: none; }
#lib-card header { display: flex; align-items: center; gap: 8px; font-size: 14px; }
#lib-card header b { color: var(--tier); }
#lib-card header span:last-child { margin-inline-start: auto; color: var(--muted); font-size: 11px; }
#lib-card .tier-dot { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--tier) 55%); box-shadow: 0 0 10px var(--tier); }
#lib-card .lib-bar { height: 7px; border-radius: 5px; background: rgba(255, 255, 255, .12); overflow: hidden; }
#lib-card .lib-bar i { display: block; height: 100%; width: 0; border-radius: 5px; background: linear-gradient(90deg, color-mix(in srgb, var(--tier) 60%, #fff), var(--tier)); transition: width .5s; }
#lib-card small { font-size: 12px; color: var(--muted); }
#lib-card p { margin: 0; font-size: 12px; line-height: 1.8; }
#lib-card .mini { justify-self: start; display: inline-flex; align-items: center; gap: 6px; background: color-mix(in srgb, var(--tier) 30%, rgba(255, 255, 255, .08)); }
#lib-card .mini .ic { width: 15px; height: 15px; }
.league { --tier: #d08a4a; margin-top: 12px; border: 1px solid color-mix(in srgb, var(--tier) 40%, transparent); border-radius: 16px; padding: 10px 12px; background: color-mix(in srgb, var(--tier) 7%, transparent); }
.league header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.league header b { color: var(--tier); }
.league header small { color: var(--muted); font-size: 12px; }
.league header .pill { margin-inline-start: auto; background: var(--tier); color: #111; }
.league .row.me { outline: 1px solid var(--brand); background: rgba(255, 138, 0, .12); }
#chapter-banner.tiered { border-color: var(--tier); box-shadow: 0 20px 60px rgba(0, 0, 0, .45), 0 0 70px color-mix(in srgb, var(--tier) 45%, transparent); }
#chapter-banner.tiered b { color: var(--tier); }
#lib-card.t0, .league.t0, #chapter-banner.t0 { --tier: #d08a4a; }
#lib-card.t1, .league.t1, #chapter-banner.t1 { --tier: #c9d3e0; }
#lib-card.t2, .league.t2, #chapter-banner.t2 { --tier: #f2c14e; }
#lib-card.t3, .league.t3, #chapter-banner.t3 { --tier: #7fe3ff; }

/* ---------- کیفیت زندگی ---------- */
.chip.life { cursor: pointer; color: inherit; font: inherit; }
.chip.life .ic { color: #e85d75; }
.chip.life.l1 { border-color: rgba(124, 196, 127, .6); } .chip.life.l1 .ic { color: #7cc47f; }
.chip.life.l2 { border-color: rgba(79, 179, 217, .6); } .chip.life.l2 .ic { color: #4fb3d9; }
.chip.life.l3 { border-color: rgba(179, 136, 235, .65); } .chip.life.l3 .ic { color: #b388eb; }
.chip.life.l4 { border-color: rgba(242, 193, 78, .75); box-shadow: 0 0 14px rgba(242, 193, 78, .35); } .chip.life.l4 .ic { color: #f2c14e; }
.lf-head { --lc: #9aa4b2; display: flex; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--lc) 50%, transparent); background: color-mix(in srgb, var(--lc) 10%, transparent); margin-bottom: 10px; }
.lf-head.l1 { --lc: #7cc47f; } .lf-head.l2 { --lc: #4fb3d9; } .lf-head.l3 { --lc: #b388eb; } .lf-head.l4 { --lc: #f2c14e; }
.lf-score { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; border: 4px solid var(--lc); flex: none; }
.lf-score b { font-size: 26px; line-height: 1; } .lf-score small { font-size: 11px; color: var(--muted); }
.lf-name { color: var(--lc); font-size: 17px; }
.lf-head p { margin: 4px 0 0; font-size: 13px; line-height: 1.9; }
.lf-part { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; margin: 8px 0; font-size: 13px; }
.lf-part .lf-bar { grid-column: 1 / -1; height: 7px; border-radius: 5px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.lf-part .lf-bar i { display: block; height: 100%; width: 0; border-radius: 5px; background: linear-gradient(90deg, #7cc47f, #f2c14e); transition: width .5s; }
.lf-part small { grid-column: 1 / -1; color: var(--muted); font-size: 11px; }
.lf-levels { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 12px 0 6px; }
.lf-level { --lc: #9aa4b2; padding: 9px 11px; border-radius: 14px; border: 1px solid var(--line); opacity: .62; }
.lf-level.on { opacity: 1; border-color: color-mix(in srgb, var(--lc) 60%, transparent); background: color-mix(in srgb, var(--lc) 9%, transparent); }
.lf-level.l1 { --lc: #7cc47f; } .lf-level.l2 { --lc: #4fb3d9; } .lf-level.l3 { --lc: #b388eb; } .lf-level.l4 { --lc: #f2c14e; }
.lf-level header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.lf-level header b { color: var(--lc); } .lf-level header small { color: var(--muted); font-size: 11px; }
.lf-level header .pill { margin-inline-start: auto; background: var(--lc); color: #111; }
.lf-level p { margin: 2px 0; font-size: 12px; line-height: 1.8; }
#chapter-banner.life { --tier: #e85d75; }
@media (max-width: 760px) { .lf-levels { grid-template-columns: 1fr; } }

/* ---------- گوشی عمودی: منو نوار پایین، کنترل‌ها روی آن، ستون راست فشرده ---------- */
@media (max-width: 760px) and (min-height: 501px) {
  :root { --edge: 10px; --gap: 8px; --rail: min(214px, 54vw); --map: 92px; --card: 124px; --hotbar-h: 60px; --controls: calc(var(--hotbar-h) + 2 * var(--edge) + var(--sb)); --bottom-reserve: 236px; }
  #rail-right { align-items: flex-start; }
  #player-card { width: var(--card); grid-template-columns: 1fr; grid-template-areas: "lvl" "chips"; justify-items: center; gap: 6px; padding: 8px; border-radius: 18px; }
  #player-card .who { display: none; }
  #player-card .lvl { width: 44px; height: 44px; }
  #player-card .lvl b { font-size: 16px; }
  #player-card .chips { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  #player-card .chip { gap: 3px; padding: 4px 2px; border-radius: 10px; font-size: 12px; }
  #player-card .chip .ic { width: 14px; height: 14px; }
  #story-card, #quests, #lib-card { width: 100%; }
  #story-card { padding: 9px 11px 10px; }
  #story-card .st-text { font-size: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  #story-card .st-hint, #lib-card p { display: none; }
  .q-head { padding: 6px; font-size: 12px; }
  body.racing #story-card, body.racing #quests { display: none; }
  .map-row { flex-direction: column-reverse; }
  #back { width: 40px; height: 40px; border-radius: 12px; }
  #net { padding: 4px 8px; font-size: 11px; }
  #offline { width: calc(var(--map) + 56px); padding: 8px 10px; font-size: 11px; }
  #top-center { width: calc(100vw - 2 * var(--edge) - 2 * max(var(--map), var(--card)) - 2 * var(--gap)); }
  #zone { padding: 6px 12px; font-size: 13px; }
  #weather-pill { display: none; }
  #race-hud { position: fixed; top: calc(var(--edge) + var(--st) + 112px); left: 0; right: 0; width: max-content; margin-inline: auto; }
  #feed { position: fixed; left: var(--edge); right: var(--edge); width: auto; bottom: calc(var(--controls) + 140px); }
  #hotbar { left: var(--edge); right: var(--edge); transform: none; height: var(--hotbar-h); padding: 4px; gap: 0; border-radius: 18px; }
  #hotbar button { flex: 1; min-width: 0; gap: 2px; padding: 6px 0 5px; font-size: 10px; }
  #hotbar button .ic { width: 22px; height: 22px; }
  #hotbar kbd { display: none; }
  #joystick { left: calc(var(--edge) + 6px + var(--sl)); bottom: var(--controls); width: 124px; height: 124px; }
  #actions, body.touch #actions { right: calc(var(--edge) + 6px + var(--sr)); bottom: var(--controls); }
  .round-btn { width: 66px; height: 66px; }
  .primary-action { padding: 12px 18px; font-size: 15px; }
  .primary-action kbd { display: none; }
  #toast { bottom: calc(var(--controls) + 140px); }
  #emote-wheel { bottom: var(--controls); gap: 6px; padding: 8px; }
  #emote-wheel button { width: 64px; }
  #profile-card, #dialog { bottom: var(--controls); }
  .sheet { padding: 14px; border-radius: 20px; max-height: 90vh; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .item p { display: none; }
}

/* ---------- گوشی افقی و صفحه‌های کوتاه: همه‌چیز فشرده، منو فقط آیکون ---------- */
@media (max-height: 500px) {
  :root { --edge: 8px; --gap: 6px; --rail: min(248px, 32vw); --map: 76px; --bottom-reserve: 76px; }
  body.driving { --bottom-reserve: 76px; }
  #player-card { grid-template-areas: "lvl chips"; gap: 8px; padding: 6px 8px; border-radius: 16px; }
  #player-card .who { display: none; }
  #player-card .lvl { width: 40px; height: 40px; }
  #player-card .lvl b { font-size: 15px; }
  #player-card .chip { gap: 3px; padding: 4px 2px; border-radius: 10px; font-size: 12px; }
  #player-card .chip .ic { width: 14px; height: 14px; }
  #story-card { padding: 7px 10px 8px; }
  #story-card .st-text { font-size: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  #story-card .st-hint, #lib-card p { display: none; }
  .q-head { padding: 5px 6px; font-size: 12px; }
  body.driving #story-card, body.racing #story-card { display: none; }
  #back { width: 36px; height: 36px; border-radius: 12px; }
  #net { padding: 3px 8px; font-size: 11px; }
  #offline { width: calc(var(--map) + 80px); padding: 6px 10px; font-size: 11px; line-height: 1.6; }
  #zone { padding: 5px 14px; font-size: 13px; }
  #hotbar { padding: 4px; }
  #hotbar button { min-width: 46px; padding: 8px 4px; }
  #hotbar button span, #hotbar kbd { display: none; }
  #hotbar button.on::after { bottom: 1px; }
  #joystick { left: calc(var(--edge) + 8px + var(--sl)); bottom: calc(var(--edge) + 8px + var(--sb)); width: 108px; height: 108px; }
  #joystick .knob { width: 46px; height: 46px; left: calc(50% - 23px); top: calc(50% - 23px); }
  #actions, body.touch #actions { right: calc(var(--edge) + 8px + var(--sr)); bottom: calc(var(--edge) + 8px + var(--sb)); grid-auto-flow: column; align-items: center; direction: ltr; }
  body.in-library #story-card { display: none; }
  .round-btn { width: 60px; height: 60px; }
  .primary-action { padding: 10px 16px; font-size: 14px; }
  .primary-action kbd { display: none; }
  #toast, #emote-wheel { bottom: calc(68px + var(--sb)); }
  #speedo { width: 104px; height: 104px; }
  body.driving.touch #speedo { bottom: calc(var(--edge) + 4px + var(--sb)); right: calc(var(--edge) + 180px + var(--sr)); }
  #drive-pad { grid-template-columns: repeat(2, 64px); gap: 8px; }
  #drive-pad button { height: 60px; border-radius: 16px; }
  #profile-card, #dialog { bottom: calc(68px + var(--sb)); }
  .sheet { max-height: 92vh; padding: 12px; }
}


/* رانندگی لمسی: پد رانندگی گوشهٔ پایین راست؛ دکمهٔ پیاده‌شدن کنار آن و سرعت‌سنج جایی که منو خالی کرده */
body.driving.touch #actions { right: calc(var(--edge) + 180px + var(--sr)); }
@media (max-width: 760px) and (min-height: 501px) {
  body.driving.touch #speedo { left: calc(var(--edge) + 12px + var(--sl)); right: auto; bottom: calc(var(--edge) + 150px + var(--sb)); }
  body.driving.touch #actions { right: calc(var(--edge) + 6px + var(--sr)); bottom: calc(var(--edge) + 176px + var(--sb)); }
  body.driving.touch #drive-warn { right: auto; left: 0; }
}
@media (max-height: 500px) {
  body.driving.touch #speedo { left: 0; right: 0; margin-inline: auto; bottom: calc(var(--edge) + var(--sb)); }
  body.driving.touch #actions { right: calc(var(--edge) + 8px + var(--sr)); bottom: calc(var(--edge) + 144px + var(--sb)); }
}