/* ═══ Версия 2: меню с разделителями, работа, профиль, город, окна. Подключается самым последним. ═══ */

/* заголовки разделов: плотнее и жирнее */
.h { font-size: 13.5px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: #b9c0bb; margin: 20px 4px 10px; }

/* меню: тонкие разделители между вкладками — только для вида */
#nav button + button::after { content: ""; display: block; position: absolute; left: 0; top: 30%; height: 40%; width: 1px; background: rgba(255,255,255,.13); pointer-events: none; }
#nav button.on::after, #nav button.on + button::after { display: none; }

/* поиск */
.search { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px; margin: 0 0 10px; border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05)); border: 1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); transition: border-color .2s; }
.search:focus-within { border-color: rgba(127,216,173,.6); }
.search svg { width: 18px; height: 18px; color: var(--mute); }
.search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: none; color: #fff; font: inherit; font-size: 15px; font-weight: 500; }
.search input::placeholder { color: var(--faint); }
.chev { width: 15px; height: 15px; transform: rotate(180deg); color: var(--faint); flex: none; }
#pFound { margin-bottom: 4px; }
#pFound .line { animation: page .2s ease-out; }

/* ─── работа ─── */
.wstat, .wstat.glass { background: none; border: 0; box-shadow: none; padding: 2px 4px 12px; margin-bottom: 0; }
.whero { margin: 0 -14px 12px; border-radius: 0; border-left: 0; border-right: 0; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 20px 18px 18px; min-height: 0;
  background: radial-gradient(80% 130% at 100% 20%, color-mix(in srgb, var(--c) 30%, transparent), transparent 64%), radial-gradient(60% 110% at 0% 100%, rgba(79,174,132,.2), transparent 70%), linear-gradient(180deg, #151a18, #0f1211); }
.whero .wart { right: 6px; top: 6px; width: 168px; height: 168px; transform: rotate(8deg); }
.whero .wtxt { max-width: 58%; }
.whero .wn { font-size: 25px; margin-top: 12px; }
.whero .wpay { font-size: 22px; margin-top: 14px; }
.whero .btn, .gbanner .btn { margin-top: 18px; color: #fff; border: 1px solid rgba(255,255,255,.3);
  background: linear-gradient(180deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,.10) 50%, rgba(255,255,255,.06) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -10px 18px rgba(255,255,255,.04), 0 10px 24px rgba(0,0,0,.3); }
.whow { gap: 7px; margin: 0 0 4px; }
.whow > div { padding: 10px 4px 9px; border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255,255,255,.22); display: flex; flex-direction: column; justify-content: center; min-height: 62px; }
.whow b { font-size: 16px; line-height: 1; }
.whow small { font-size: 10.5px; line-height: 1.25; margin-top: 4px; padding: 0 2px; }
.wcard .wart, .whero .wart { opacity: 1; }
.wcard .wart svg, .whero .wart svg { stroke-width: 2.8; }

/* игры на кнопках: таблица чисел и сборка слова */
.sch { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; max-width: 340px; }
.sch button { aspect-ratio: 1; border-radius: 16px; font-size: 21px; font-weight: 750; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); transition: transform .1s, opacity .2s, background .2s; }
.sch button:active { transform: scale(.92); }
.sch button.done { opacity: .16; transform: scale(.9); }
.sch button.no, .wkeys button.no { background: rgba(200,80,100,.55); border-color: rgba(230,160,172,.6); }
.wslots { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; }
.wslots i { width: 38px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-style: normal; font-size: 22px; font-weight: 800; border: 1.5px dashed rgba(255,255,255,.26); }
.wslots i.on { border: 1.5px solid rgba(140,210,178,.6); background: rgba(79,174,132,.4); animation: pop .25s; }
.wkeys { display: flex; gap: 9px; flex-wrap: wrap; justify-content: center; max-width: 340px; }
.wkeys button { width: 54px; height: 58px; border-radius: 16px; font-size: 23px; font-weight: 800; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); box-shadow: 0 4px 0 rgba(0,0,0,.35); transition: transform .1s, opacity .2s; }
.wkeys button:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.35); }
.wkeys button.done { opacity: .14; pointer-events: none; }

/* ─── профиль ─── */
.qgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 2px 0 10px; }
.qbtn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 11px 2px 9px; border-radius: 20px; font-size: 11.5px; font-weight: 600; color: var(--ink);
  background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.035)); border: 1px solid rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.16); transition: transform .14s; }
.qbtn:active { transform: scale(.93); }
.qbtn span { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--c); background: rgba(255,255,255,.06); background: color-mix(in srgb, var(--c) 18%, transparent); }
.qbtn svg, .qbtn .mk { width: 19px; height: 19px; }
.gmini { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; margin-bottom: 10px; border-radius: 22px; transition: transform .14s;
  background: radial-gradient(80% 160% at 0% 50%, rgba(255,122,192,.2), transparent 62%), var(--card); border-color: rgba(255,122,192,.24); }
.gmini:active { transform: scale(.98); }
.gm-art { position: relative; width: 62px; height: 48px; flex: none; }
.gm-art img { position: absolute; width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,.4)); }
.gm-art img:first-child { left: 0; top: 4px; transform: rotate(-10deg); }
.gm-art img:last-child { right: 0; top: 0; transform: rotate(10deg); }
.gmini b { font-size: 15px; } .gmini .mut { font-size: 12px; }

/* ─── город ─── */
.gbanner { position: relative; overflow: hidden; margin: 0 -14px 12px; padding: 20px 18px 18px; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08);
  background: radial-gradient(80% 130% at 100% 10%, rgba(255,122,192,.3), transparent 62%), radial-gradient(60% 110% at 0% 100%, rgba(143,131,201,.24), transparent 70%), linear-gradient(180deg, #171519, #0f1011); }
.gbanner:active .gb-art { transform: scale(1.04); }
.gb-art { position: absolute; right: 2px; top: 8px; width: 176px; height: 150px; pointer-events: none; transition: transform .2s; }
.gb-art img { position: absolute; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0,0,0,.45)); }
.gb-art img:nth-child(1) { width: 78px; height: 78px; left: 0; top: 46px; transform: rotate(-16deg); }
.gb-art img:nth-child(2) { width: 106px; height: 106px; left: 44px; top: 4px; transform: rotate(4deg); z-index: 2; }
.gb-art img:nth-child(3) { width: 76px; height: 76px; right: 0; top: 60px; transform: rotate(14deg); }
.gb-txt { position: relative; max-width: 56%; }
.gb-t { font-size: 24px; font-weight: 800; letter-spacing: -.015em; line-height: 1.12; margin-top: 12px; }
.gb-s { font-size: 12.5px; color: var(--mute); margin-top: 6px; line-height: 1.35; }
.gbanner .btn { position: relative; width: 100%; }
.sgroup { padding: 4px 0; border-radius: 24px; overflow: hidden; }
.srow { display: flex; align-items: center; gap: 13px; padding: 12px 14px; position: relative; transition: background .15s; }
.srow:active { background: rgba(255,255,255,.06); }
.srow + .srow::before { content: ""; position: absolute; left: 68px; right: 14px; top: 0; height: 1px; background: rgba(255,255,255,.07); }
.srow .si { position: relative; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; flex: none; color: var(--c); background: rgba(255,255,255,.06); background: color-mix(in srgb, var(--c) 17%, transparent); }
.srow .si svg, .srow .si .mk { width: 21px; height: 21px; }
.srow .si .dot { position: absolute; right: -3px; top: -3px; width: 11px; height: 11px; border-radius: 50%; background: var(--acc); border: 2px solid #131615; animation: pulseG 1.6s infinite; }
.srow .grow { min-width: 0; }
.srow b { display: block; font-size: 15.5px; font-weight: 700; }
.srow small { display: block; font-size: 12px; color: var(--mute); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srow .sv { flex: none; font-size: 12.5px; font-weight: 650; color: var(--c); padding: 4px 10px; border-radius: 11px; background: rgba(255,255,255,.06); max-width: 34%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gim { object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0,0,0,.4)); }
.gift .ge { height: 88px; display: grid; place-items: center; }
.gift { background: radial-gradient(90% 70% at 50% 0%, rgba(255,122,192,.18), transparent 65%), var(--card); border-radius: 24px; }
.gift small { font-size: 11.5px; }

/* ─── казино: баланс в шапке игры — отдельная стеклянная плашка ─── */
.cbal { height: 38px; padding: 0 13px 0 10px; border-radius: 19px; gap: 7px; max-width: 46%;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05)); border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.22); }
.cbal .mk { width: 20px; height: 20px; }
.cbal b { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ─── окна-шторки ─── */
.sheet-body { left: 8px; right: 8px; bottom: 8px; padding: 12px 20px calc(20px + var(--safe-b)); border-radius: 34px;
  background: linear-gradient(180deg, #1e2422 0%, #131716 46%, #0f1211 100%); border: 1px solid rgba(255,255,255,.11);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 -12px 50px rgba(0,0,0,.6); transition: transform .46s cubic-bezier(.2,.95,.25,1); }
.sheet-body::before { display: block; content: ""; position: absolute; left: 0; right: 0; top: 0; height: 130px; border-radius: 34px 34px 0 0; pointer-events: none;
  background: radial-gradient(70% 100% at 50% 0%, rgba(79,174,132,.18), transparent 72%); }
#sheetIn { position: relative; }
.grip { width: 38px; height: 4px; border-radius: 4px; margin: 0 auto 18px; background: rgba(255,255,255,.22); position: relative; }
.sheet h3 { font-size: 22px; font-weight: 800; letter-spacing: -.015em; line-height: 1.15; margin: 0 46px 4px 0; }
.sheet h3 + .mut { font-size: 13.5px; }
.sheet .sx { right: 10px; top: 12px; }
.sheet .opt { padding: 14px; border-radius: 20px; margin-top: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07); }
.sheet .opt .ico { border-radius: 14px; }
.sheet .field { height: 52px; border-radius: 18px; margin-top: 12px; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.1); font-size: 16px; }
.sheet .field:focus { border-color: rgba(127,216,173,.6); }
.sheet .h { margin: 18px 2px 4px; }
.sprice { margin-top: 18px; padding: 16px 18px; border-radius: 22px; }
.sprice .sp { font-size: 28px; }
.sheet .presets button { padding: 9px 14px; border-radius: 14px; font-size: 13.5px; }
.sheet-bg { background: rgba(3,5,4,.66); }

/* ═══ Баннеры без линий: мягкое размытое свечение, края растворяются в фоне ═══ */
.whero, .gbanner { border: 0 !important; background: none !important; overflow: visible; padding-top: 22px; padding-bottom: 20px; }
.whero::before, .gbanner::before { content: ""; display: block !important; position: absolute; left: 0; right: 0; top: -26px; bottom: -26px; width: auto; height: auto; border-radius: 0; z-index: 0; pointer-events: none;
  filter: blur(22px); opacity: .95;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26%, #000 74%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 26%, #000 74%, transparent 100%); }
.whero::before { background: radial-gradient(60% 80% at 92% 30%, color-mix(in srgb, var(--c) 50%, transparent), transparent 70%), radial-gradient(60% 80% at 4% 80%, rgba(79,174,132,.4), transparent 70%); box-shadow: none; }
.gbanner::before { background: radial-gradient(60% 80% at 92% 30%, rgba(255,122,192,.5), transparent 70%), radial-gradient(60% 80% at 4% 80%, rgba(143,131,201,.42), transparent 70%); }
.whero > *, .gbanner > * { z-index: 1; }
.whero .wart { filter: drop-shadow(0 10px 24px color-mix(in srgb, var(--c) 55%, transparent)); }

/* рисунки профессий: крупнее и чётче */
.wcard .wart { width: 112px; height: 112px; right: -14px; bottom: -16px; }
.wcard .wart svg, .whero .wart svg { stroke-width: 2.4; }
.wcard.lock .wart { opacity: .55; }

/* ═══ Разделы города: шапка с рисунком, строки и карточки в цвете раздела ═══ */
.shead { position: relative; display: flex; align-items: center; gap: 14px; padding: 6px 4px 18px; margin-bottom: 2px; }
.shead::before { content: ""; position: absolute; left: -14px; right: -14px; top: -40px; bottom: -6px; pointer-events: none; filter: blur(24px);
  background: radial-gradient(50% 90% at 12% 60%, color-mix(in srgb, var(--c) 42%, transparent), transparent 72%), radial-gradient(40% 80% at 96% 30%, color-mix(in srgb, var(--c) 22%, transparent), transparent 72%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); }
.shead > * { position: relative; }
.sh-i { width: 58px; height: 58px; border-radius: 20px; display: grid; place-items: center; flex: none; color: var(--c);
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 34%, transparent), color-mix(in srgb, var(--c) 10%, transparent)); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 24px color-mix(in srgb, var(--c) 30%, transparent); }
.sh-i svg, .sh-i .mk { width: 28px; height: 28px; stroke-width: 1.8; }
.sh-g { position: absolute !important; right: -6px; top: -22px; width: 120px; height: 120px; color: var(--c); opacity: .13; transform: rotate(-14deg); pointer-events: none; }
.sh-g svg, .sh-g .mk { width: 100%; height: 100%; stroke-width: 1.1; }
.shead b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.015em; line-height: 1.1; }
.shead small { display: block; font-size: 12.5px; color: var(--mute); margin-top: 4px; line-height: 1.3; }
.back { margin-bottom: 6px; }

.sectpage .line { border-radius: 20px; padding: 12px 14px; background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.08); }
.sectpage .line .ico { color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); filter: none; border-radius: 14px; }
.sectpage .line .r { font-size: 14px; }
.sectpage .line.off { opacity: .5; }
.sectpage .card { border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.08); }
.sectpage .card[data-c] { transition: transform .14s; }
.sectpage .card[data-c]:active { transform: scale(.98); }
.sectpage .meter { height: 7px; border-radius: 7px; background: rgba(255,255,255,.08); }
.sectpage .meter i { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 60%, #2f7d5c), var(--c)); border-radius: 7px; }
.sectpage .tabs button { border-radius: 16px; padding: 9px 15px; }
.sectpage .tabs button.on { background: color-mix(in srgb, var(--c) 26%, transparent); border-color: color-mix(in srgb, var(--c) 50%, transparent); color: #fff; }
.sectpage .bar i { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 60%, #2f7d5c), var(--c)); }
.sectpage .h { color: color-mix(in srgb, var(--c) 55%, #cfd5d1); }
.sectpage .spark { margin: 6px 0 2px; }
.sectpage .empty { padding: 30px 12px; border-radius: 22px; background: rgba(255,255,255,.03); }
.sectpage .wheelbox canvas { box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 40%, transparent), 0 18px 44px rgba(0,0,0,.55); }
.sectpage .bonus { background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)); border-color: color-mix(in srgb, var(--c) 28%, transparent); }
.sectpage .bonus .ico, .sectpage .card .ico { color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); filter: none; }

/* ═══ Чистые рисунки профессий: ровно, без наклона, тень только от самого рисунка ═══ */
.wcard .wart { width: 92px; height: 92px; right: 6px; bottom: 30px; transform: none; opacity: 1; filter: drop-shadow(0 8px 14px rgba(0,0,0,.4)); }
.wcard:active .wart { transform: scale(1.06); }
.wcard { height: 176px; padding: 14px; }
.wcard .wtxt { max-width: 100%; }
.wcard .wn { -webkit-line-clamp: 1; font-size: 15px; }
.wcard .wfoot { left: 14px; right: 14px; bottom: 12px; }
.wcard.lock .wart { color: #7d8581; opacity: .7; filter: none; }
.whero .wart { width: 150px; height: 150px; right: 14px; top: 20px; transform: none; filter: drop-shadow(0 14px 26px rgba(0,0,0,.45)); }
.wcard .wart svg, .whero .wart svg { stroke-width: 2.4; overflow: visible; }
.shead { padding-bottom: 14px; }

/* ═══ Шапка раздела: крупный значок без квадрата, он же — призраком на фоне ═══ */
.shead { gap: 16px; padding: 10px 4px 18px; min-height: 84px; overflow: visible; }
.sh-i { width: 68px; height: 68px; border-radius: 0; background: none !important; border: 0 !important; box-shadow: none !important; color: var(--c);
  filter: drop-shadow(0 8px 18px color-mix(in srgb, var(--c) 55%, transparent)); }
.sh-i svg, .sh-i .mk, .sh-i img { width: 62px; height: 62px; stroke-width: 1.35; }
.sh-g { position: absolute !important; right: -4px; top: -26px; width: 150px; height: 150px; color: var(--c); opacity: .1; transform: rotate(-12deg); pointer-events: none; display: block; }
.sh-g svg, .sh-g .mk, .sh-g img { width: 100%; height: 100%; stroke-width: .9; }
.sh-g img { opacity: .8; filter: saturate(.7); }
.shead b { font-size: 26px; }

/* общие мелочи разделов */
.count { font-size: 12px; color: var(--mute); padding: 2px 4px 10px; }
.price { display: inline-block; padding: 5px 11px; border-radius: 12px; font-weight: 750; font-size: 13.5px; color: var(--gold); background: rgba(227,200,120,.12); white-space: nowrap; }
.price.no { color: #b9a98a; background: rgba(255,255,255,.05); }
.pbar { height: 5px; border-radius: 5px; background: rgba(255,255,255,.08); overflow: hidden; margin: 6px 0 4px; }
.pbar i { display: block; height: 100%; border-radius: 5px; background: var(--c); }
.pbar.big { height: 8px; border-radius: 8px; margin: 8px 0 6px; } .pbar.big i { border-radius: 8px; }
.place { width: 22px; flex: none; text-align: center; font-weight: 800; font-size: 15px; color: var(--mute); }
.sectpage .tabs button { display: inline-flex; align-items: center; gap: 7px; }
.sectpage .tabs button svg { width: 16px; height: 16px; flex: none; opacity: .85; }
.sectpage .tabs.thin button { padding: 7px 13px; font-size: 13px; }
.sectpage .line.worn { border-color: color-mix(in srgb, var(--green) 35%, transparent); }
.sectpage .line.worn .ico { color: var(--green); background: color-mix(in srgb, var(--green) 16%, transparent); }
.sectpage .line .ico { width: 46px; height: 46px; }
.sectpage .line .ico svg { width: 24px; height: 24px; }

/* шапка окна-шторки: значок, название, пояснение */
.isheet { text-align: center; padding: 2px 0 14px; }
.isheet .is-i { display: grid; place-items: center; width: 84px; height: 84px; margin: 0 auto 10px; border-radius: 28px; color: var(--c, #7fd8ad);
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--c, #7fd8ad) 30%, transparent), color-mix(in srgb, var(--c, #7fd8ad) 8%, transparent)); }
.isheet .is-i svg, .isheet .is-i .mk { width: 44px; height: 44px; stroke-width: 1.5; }
.isheet h3 { margin: 0 0 4px; font-size: 21px; } .isheet .mut { line-height: 1.35; }
.gift-s .gs-i { height: 150px; display: grid; place-items: center; margin-bottom: 6px; filter: drop-shadow(0 16px 26px rgba(255,122,192,.35)); }

/* ═══ Банда ═══ */
.gfl { display: inline-grid; place-items: center; flex: none; filter: drop-shadow(0 3px 8px color-mix(in srgb, currentColor 45%, transparent)); }
.gfl .mk { width: var(--s); height: var(--s); }
.ghero { position: relative; overflow: hidden; padding: 18px 16px 16px; border-radius: 26px; margin-bottom: 4px;
  background: radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--g) 34%, transparent), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)) !important;
  border: 1px solid color-mix(in srgb, var(--g) 34%, transparent) !important; }
.gh-top { display: flex; align-items: center; gap: 14px; }
.gh-em { width: 60px; height: 60px; flex: none; display: grid; place-items: center; color: var(--g); filter: drop-shadow(0 8px 16px color-mix(in srgb, var(--g) 60%, transparent)); }
.gh-em .mk { width: 56px; height: 56px; }
.gh-tag { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: color-mix(in srgb, var(--g) 60%, #fff); }
.gh-n { font-size: 23px; font-weight: 800; letter-spacing: -.015em; line-height: 1.12; }
.gh-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 16px; }
.gh-stats > div { padding: 10px 4px 9px; border-radius: 16px; text-align: center; background: rgba(0,0,0,.26); }
.gh-stats small { display: block; font-size: 10.5px; color: var(--mute); } .gh-stats b { display: block; font-size: 15.5px; margin-top: 2px; white-space: nowrap; }
.gh-cap { display: flex; justify-content: space-between; margin-top: 14px; font-size: 12.5px; color: var(--mute); } .gh-cap b { color: #fff; }
.gh-d { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.gh-d span { padding: 5px 10px; border-radius: 11px; font-size: 12px; font-weight: 650; background: color-mix(in srgb, var(--g) 20%, transparent); color: color-mix(in srgb, var(--g) 45%, #fff); }
.perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 16px; }
.perks > div { padding: 12px 6px 10px; border-radius: 16px; text-align: center; background: rgba(0,0,0,.26); }
.perks svg, .perks .mk { width: 22px; height: 22px; color: var(--g); } .perks b { display: block; font-size: 13.5px; margin-top: 4px; } .perks small { display: block; font-size: 10.5px; line-height: 1.25; color: var(--mute); margin-top: 2px; }

.war { padding: 14px; border-radius: 22px; margin-bottom: 8px; border: 1px solid rgba(224,102,122,.3) !important; background: radial-gradient(80% 90% at 50% 0%, rgba(224,102,122,.16), transparent 70%), rgba(255,255,255,.04) !important; }
.war-t { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .war-t b { font-size: 16px; }
.war-s { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin: 12px 0 10px; }
.war-s small { display: block; font-size: 10.5px; color: var(--mute); } .war-s b { font-size: 14.5px; } .war-s > div:last-child { text-align: right; }
.war-s > i { font-style: normal; font-weight: 800; font-size: 12px; color: #e0667a; padding: 4px 8px; border-radius: 10px; background: rgba(224,102,122,.14); }
.war-b { height: 9px; border-radius: 9px; overflow: hidden; background: #5d8fd6; } .war-b i { display: block; height: 100%; background: #e0667a; border-right: 2px solid #0b0d0c; }
.war-n { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--mute); margin-top: 5px; }

.ctrl { padding: 14px; border-radius: 22px; }
.ctrl-b { display: flex; gap: 3px; height: 14px; border-radius: 8px; overflow: hidden; } .ctrl-b i { min-width: 6px; }
.ctrl-l { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 11px; font-size: 12px; color: var(--mute); }
.ctrl-l span { display: inline-flex; align-items: center; gap: 6px; } .ctrl-l i { width: 9px; height: 9px; border-radius: 3px; } .ctrl-l b { color: #fff; }

.dgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dcard { position: relative; padding: 13px 13px 12px; border-radius: 20px; overflow: hidden; transition: transform .14s;
  background: radial-gradient(90% 80% at 0% 0%, color-mix(in srgb, var(--g) 22%, transparent), transparent 70%), rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.08) !important; }
.dcard[data-w]:active { transform: scale(.97); }
.dcard.mine { border-color: color-mix(in srgb, var(--g) 50%, transparent) !important; }
.dc-t { display: flex; align-items: center; justify-content: space-between; min-height: 26px; margin-bottom: 8px; } .dc-t .chip { font-size: 10.5px; padding: 2px 8px; }
.dcard b { display: block; font-size: 14.5px; line-height: 1.2; } .dcard small { display: block; font-size: 11px; line-height: 1.3; color: var(--mute); margin-top: 3px; min-height: 28px; }
.dc-o { margin-top: 8px; font-size: 11.5px; font-weight: 700; color: color-mix(in srgb, var(--g) 55%, #fff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grow-card.me { border-color: color-mix(in srgb, var(--c) 50%, transparent) !important; background: color-mix(in srgb, var(--c) 10%, transparent) !important; }

/* ═══ Подарки ═══ */
.gsteps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 12px; }
.gsteps > div { display: flex; align-items: center; gap: 8px; padding: 9px 9px; border-radius: 16px; background: rgba(255,255,255,.045); }
.gsteps b { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: 12px; color: #1a0d14; background: var(--c); }
.gsteps small { font-size: 10.5px; line-height: 1.2; color: #d5d9d6; }
.gift { padding: 14px 12px 14px; border-radius: 26px !important; overflow: hidden; border: 1px solid rgba(255,255,255,.08);
  background: radial-gradient(80% 55% at 50% 22%, rgba(255,122,192,.26), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)) !important; }
.gift.off { opacity: 1; } .gift.off .ge { filter: saturate(.75) brightness(.85); }
.gift.ok { border-color: rgba(255,122,192,.4); }
.gift .ge { height: 104px; filter: drop-shadow(0 12px 16px rgba(0,0,0,.45)); }
.gift b { font-size: 16px; margin-top: 8px; }
.gift .gp { margin-top: 8px; font-size: 14.5px; padding: 6px 14px; }
.gift small { margin-top: 6px; } .gift .gok { color: #8fe0b8; }
.gift .pbar { margin: 10px 8px 0; } .gift .pbar i { background: linear-gradient(90deg, #8f83c9, #ff7ac0); }
.gstar { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px 3px 6px; border-radius: 10px; font-size: 11.5px; font-weight: 750; color: #f5c654; background: rgba(0,0,0,.4); }
.gstar svg { width: 12px; height: 12px; fill: currentColor; stroke: none; }
.gorder { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 22px; margin-bottom: 8px; background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)) !important; border: 1px solid rgba(255,255,255,.08) !important; }
.go-i { width: 58px; height: 58px; flex: none; display: grid; place-items: center; border-radius: 18px; background: radial-gradient(circle at 50% 35%, rgba(255,122,192,.28), rgba(255,122,192,.06)); }
.gorder b { display: block; font-size: 15px; } .gorder small { display: block; font-size: 12.5px; color: var(--gold); margin-top: 2px; }

/* ═══ Титулы ═══ */
.thero { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 26px;
  background: radial-gradient(90% 90% at 0% 0%, rgba(245,198,84,.26), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)) !important; border: 1px solid rgba(245,198,84,.3) !important; }
.th-i { width: 62px; height: 62px; flex: none; display: grid; place-items: center; color: #f5c654; filter: drop-shadow(0 8px 16px rgba(245,198,84,.5)); } .th-i svg { width: 54px; height: 54px; stroke-width: 1.4; }
.thero small { display: block; font-size: 11.5px; color: var(--mute); } .thero b { display: block; font-size: 20px; font-weight: 800; line-height: 1.15; }
.tgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tcard { padding: 13px 12px 12px; border-radius: 20px; text-align: center; transition: transform .14s; background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)) !important; border: 1px solid rgba(255,255,255,.08) !important; }
.tcard[data-t]:active, .tcard[data-b]:active { transform: scale(.96); }
.tc-i { display: grid; place-items: center; width: 42px; height: 42px; margin: 0 auto 8px; border-radius: 50%; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); } .tc-i svg { width: 21px; height: 21px; }
.tcard b { display: block; font-size: 14px; line-height: 1.2; } .tcard small { display: block; font-size: 11px; line-height: 1.3; color: var(--mute); margin-top: 5px; }
.tcard small i { display: block; font-style: normal; margin-top: 4px; } .tcard .price { font-size: 12px; padding: 3px 9px; }
.tcard.worn { border-color: rgba(245,198,84,.55) !important; background: radial-gradient(90% 80% at 50% 0%, rgba(245,198,84,.22), transparent 70%), rgba(255,255,255,.04) !important; } .tcard.worn small { color: #f5c654; }
.tcard.lock .tc-i { color: #8a918d; background: rgba(255,255,255,.06); } .tcard.lock b { color: #b9beba; }

/* ═══ Рюкзак: ячейки надетого ═══ */
.eqgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.slot { padding: 12px 8px 11px; border-radius: 20px; text-align: center; background: rgba(255,255,255,.03); border: 1px dashed rgba(255,255,255,.14); }
.slot .sl-i { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 7px; border-radius: 15px; color: #7d8581; background: rgba(255,255,255,.05); } .slot .sl-i svg { width: 23px; height: 23px; }
.slot small { display: block; font-size: 10.5px; color: var(--mute); } .slot b { display: block; font-size: 12.5px; line-height: 1.2; margin-top: 2px; color: #8a918d; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 30px; }
.slot.on { border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); background: radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--c) 20%, transparent), transparent 70%), rgba(255,255,255,.04); }
.slot.on .sl-i { color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); } .slot.on b { color: #fff; }

/* ═══ Работа как казино: рисунок крупно в правом нижнем углу, с наклоном, чуть за краем ═══ */
.wcard { height: 150px; padding: 13px 14px; }
.wcard .wtxt { max-width: 64%; }
.wcard .wn { -webkit-line-clamp: 2; font-size: 14.5px; }
.wcard .wart { width: 108px; height: 108px; right: -12px; bottom: -14px; transform: rotate(-14deg); transform-origin: 60% 60%; opacity: 1; filter: drop-shadow(0 10px 16px rgba(0,0,0,.5)); }
.wcard:active .wart { transform: rotate(-14deg) scale(1.07); }
.wcard .wfoot { left: 13px; right: auto; bottom: 12px; }
.wcard.lock .wart { color: #7d8581; opacity: .6; filter: none; }
.whero { min-height: 210px; }
.whero .wart { width: 172px; height: 172px; right: -6px; top: auto; bottom: 72px; transform: rotate(-12deg); filter: drop-shadow(0 18px 30px rgba(0,0,0,.5)) drop-shadow(0 0 34px color-mix(in srgb, var(--c) 35%, transparent)); }
.whero .wtxt { max-width: 56%; }

/* ═══ Шапка: кнопка меню, показатели мельче ═══ */
.menubtn { width: 38px; height: 38px; flex: none; border: 0; border-radius: 13px; display: grid; place-content: center; gap: 4.5px; background: rgba(255,255,255,.07); margin-right: 2px; transition: transform .14s; }
.menubtn:active { transform: scale(.92); }
.menubtn i { display: block; width: 17px; height: 2px; border-radius: 2px; background: #e8ecea; } .menubtn i:nth-child(2) { width: 12px; }
#hCash { font-size: 13.5px; gap: 5px; } #hCash .mk { width: 17px; height: 17px; }
.tleft { gap: 1px; } .tmini { gap: 8px; } .tmini .tstat { font-size: 10.5px; gap: 3px; opacity: .8; } .tmini .tstat svg { width: 10px; height: 10px; }
.who .name { font-size: 14px; } .who .sub { font-size: 10.5px; } .who .ava { width: 38px; height: 38px; }
.admbtn { width: 30px; height: 30px; }

/* ═══ Боковое меню ═══ */
#side { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
#side .side-bg { position: absolute; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity .25s; }
#side .side-in { position: absolute; left: 0; top: 0; bottom: 0; width: 56%; min-width: 228px; max-width: 300px; padding: calc(16px + env(safe-area-inset-top)) 12px 20px; overflow-y: auto; scrollbar-width: none;
  background: linear-gradient(180deg, rgba(30,36,33,.9), rgba(14,17,16,.94)); backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border-radius: 0 28px 28px 0; box-shadow: 24px 0 60px rgba(0,0,0,.55), inset -1px 0 0 rgba(255,255,255,.1); transform: translateX(-104%); transition: transform .3s cubic-bezier(.2,.9,.3,1); }
#side .side-in::-webkit-scrollbar { display: none; }
#side.on { pointer-events: auto; } #side.on .side-bg { opacity: 1; } #side.on .side-in { transform: none; }
.side-me { display: flex; align-items: center; gap: 11px; padding: 4px 4px 12px; }
.side-me b { display: block; font-size: 16px; font-weight: 800; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .side-me small { display: block; font-size: 11.5px; color: var(--mute); margin-top: 2px; }
.side-me .grow { min-width: 0; }
.side-bal { display: grid; grid-template-columns: 1.3fr 1fr; gap: 6px; margin-bottom: 6px; }
.side-bal > div { display: flex; align-items: center; gap: 6px; padding: 9px 10px; border-radius: 14px; background: rgba(255,255,255,.06); font-size: 13px; white-space: nowrap; }
.side-bal .mk { width: 17px; height: 17px; color: var(--gold); } .side-bal svg { width: 14px; height: 14px; color: #8fe0b8; }
.side-h { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--mute); padding: 14px 6px 6px; }
.side-list button { display: flex; align-items: center; gap: 11px; width: 100%; padding: 7px 8px; border: 0; background: none; color: #eef1ef; font: inherit; font-size: 14.5px; font-weight: 650; text-align: left; border-radius: 14px; transition: background .15s, transform .14s; }
.side-list button:active { background: rgba(255,255,255,.08); transform: scale(.97); }
.side-list button span { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 12px; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); }
.side-list button span svg { width: 19px; height: 19px; }

/* ═══ Работа: рисунок своей профессии; текст сверху, рисунок снизу — друг другу не мешают ═══ */
.wcard { height: 168px; padding: 13px 14px; }
.wcard .wtxt { max-width: 100%; }
.wcard .wn { -webkit-line-clamp: 2; font-size: 14.5px; line-height: 1.18; }
.wcard .wart { width: 104px; height: 104px; right: -6px; bottom: -8px; transform: rotate(-8deg); transform-origin: 60% 60%; filter: drop-shadow(0 10px 16px rgba(0,0,0,.5)); }
.wcard:active .wart { transform: rotate(-8deg) scale(1.07); }
.wcard .wfoot { left: 12px; bottom: 11px; max-width: 46%; }
.wcard .wfoot .wpay { font-size: 11.5px; padding: 4px 8px; background: rgba(10,12,11,.72); }
.wcard.lock .wart { color: var(--c); opacity: .38; filter: grayscale(.85); }
.wlock { position: absolute; right: 10px; top: 10px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: rgba(0,0,0,.45); color: #c9cfcc; z-index: 2; } .wlock svg { width: 13px; height: 13px; }
.wcard.lock .wn { padding-right: 30px; }
.whero .wart { width: 176px; height: 176px; right: -4px; bottom: 70px; transform: rotate(-8deg); }

/* ═══ Банда: один стиль у всех блоков, свечение вместо линий ═══ */
.gangpage .ghero { border: 0 !important; background: none !important; overflow: visible; padding: 8px 4px 6px; margin-bottom: 10px; }
.gangpage .ghero::before { content: ""; position: absolute; left: -14px; right: -14px; top: -30px; bottom: -14px; pointer-events: none; filter: blur(26px); z-index: 0;
  background: radial-gradient(60% 70% at 88% 12%, color-mix(in srgb, var(--g) 52%, transparent), transparent 70%), radial-gradient(55% 70% at 6% 90%, color-mix(in srgb, var(--g) 24%, transparent), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); }
.gangpage .ghero > * { position: relative; z-index: 1; }
.gh-n { font-size: 25px; overflow-wrap: anywhere; }
.gchips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.gchips span { padding: 3px 9px; border-radius: 9px; font-size: 11.5px; font-weight: 700; white-space: nowrap; background: rgba(255,255,255,.09); color: #dfe4e1; }
.gchips span.on { background: color-mix(in srgb, var(--g, #7fd8ad) 30%, transparent); color: #fff; }
.gview .gchips { justify-content: center; margin: -6px 0 2px; }
.gh-stats > div { background: rgba(255,255,255,.06); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.07); }
.gacts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 4px; }
.gact { position: relative; overflow: hidden; display: block; padding: 12px 6px 11px; border-radius: 20px; text-align: center; color: #fff; font: inherit; transition: transform .14s;
  border: 1px solid rgba(255,255,255,.14); background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 8px 18px rgba(0,0,0,.3); }
.gact:active { transform: scale(.94); }
.gact span { display: grid; place-items: center; height: 26px; color: #e8ecea; } .gact span svg, .gact span .mk { width: 23px; height: 23px; }
.gact b { display: block; font-size: 13.5px; margin-top: 5px; } .gact small { display: block; font-size: 10.5px; color: var(--mute); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gact.main { border-color: rgba(127,216,173,.4); background: linear-gradient(180deg, rgba(79,174,132,.5), rgba(47,125,92,.28)); } .gact.main span { color: #fff; } .gact.main small { color: #cfeede; }
.gact.red { border-color: rgba(224,102,122,.4); background: linear-gradient(180deg, rgba(224,102,122,.4), rgba(224,102,122,.14)); } .gact.red span { color: #ffd3da; } .gact.red small { color: #f1c4cb; }
.gangpage .line.glass, .gangpage .ctrl, .gangpage .dcard, .gangpage .war, .gangpage .empty, .gview .line.glass {
  background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.03)) !important; border: 1px solid rgba(255,255,255,.07) !important; border-radius: 20px; box-shadow: none; }
.gangpage .dcard { background: radial-gradient(90% 80% at 0% 0%, color-mix(in srgb, var(--g) 24%, transparent), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.03)) !important; transition: transform .14s; }
.gangpage .dcard:active, .gangpage .line[data-v]:active, .gangpage .line[data-k]:active { transform: scale(.98); }
.gangpage .dcard.mine { border-color: color-mix(in srgb, var(--g) 55%, transparent) !important; }
.gangpage .war { background: radial-gradient(80% 90% at 50% 0%, rgba(224,102,122,.2), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.03)) !important; padding: 14px; margin-bottom: 8px; }
.gangpage .ctrl { padding: 14px; }
.gangpage .line.me { border-color: color-mix(in srgb, var(--c) 55%, transparent) !important; background: color-mix(in srgb, var(--c) 12%, transparent) !important; }
.gangpage .line .r { text-align: right; } .gangpage .line .chev { width: 14px; height: 14px; display: block; margin: 4px 0 0 auto; transform: rotate(180deg); opacity: .4; }
.gangpage .h { margin-top: 20px; scroll-margin-top: 76px; }
.gleave { display: block; margin: 22px auto 0; padding: 10px 18px; border: 0; background: none; color: #e0667a; font: inherit; font-size: 13.5px; font-weight: 650; opacity: .85; }
.gv-list { max-height: 38vh; overflow-y: auto; margin: 0 -4px; padding: 0 4px; scrollbar-width: none; } .gv-list::-webkit-scrollbar { display: none; }
.gv-list .line { margin-bottom: 6px; padding: 9px 12px; }
.gview .gh-stats { margin-top: 12px; } .gview .gh-d { justify-content: center; } .gview .h { margin: 16px 2px 8px; }

/* ═══ Кнопка меню без подложки, панель — аккуратнее ═══ */
.menubtn { width: 34px; height: 38px; background: none; border-radius: 0; gap: 5px; justify-items: start; margin: 0 2px 0 0; }
.menubtn i { width: 22px; height: 2.4px; border-radius: 3px; background: #f1f4f2; } .menubtn i:nth-child(2) { width: 15px; } .menubtn i:nth-child(3) { width: 19px; }
#side .side-in { width: 58%; min-width: 236px; padding: calc(18px + env(safe-area-inset-top)) 14px 24px; border-radius: 0 32px 32px 0;
  background: radial-gradient(120% 40% at 0% 0%, rgba(79,174,132,.3), transparent 70%), radial-gradient(90% 30% at 100% 100%, rgba(143,131,201,.2), transparent 70%), linear-gradient(180deg, rgba(26,31,29,.9), rgba(11,13,12,.95)); }
.side-x { position: absolute; right: 12px; top: calc(14px + env(safe-area-inset-top)); width: 30px; height: 30px; border: 0; background: none; color: #aab1ad; display: grid; place-items: center; } .side-x svg { width: 20px; height: 20px; }
.side-me { padding: 2px 34px 14px 2px; gap: 12px; }
.side-me .ava { box-shadow: 0 0 0 2px #0e1110, 0 0 0 4px rgba(127,216,173,.65), 0 8px 20px rgba(79,174,132,.35); }
.side-me b { font-size: 18px; font-weight: 800; letter-spacing: -.03em; } .side-me small { font-size: 12px; letter-spacing: -.01em; }
.side-bal { gap: 0; margin: 0 0 4px; padding: 10px 4px; border-radius: 0; position: relative; }
.side-bal::before, .side-bal::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.16) 20%, rgba(255,255,255,.16) 80%, transparent); } .side-bal::before { top: 0; } .side-bal::after { bottom: 0; }
.side-bal > div { background: none; padding: 2px 4px; font-size: 14.5px; font-weight: 800; letter-spacing: -.03em; border-radius: 0; }
.side-bal > div + div { border-left: 1px solid rgba(255,255,255,.1); padding-left: 12px; }
.side-h { font-size: 10.5px; font-weight: 800; letter-spacing: .09em; padding: 18px 4px 6px; color: #7f8884; }
.side-list button { gap: 13px; padding: 9px 6px 9px 4px; font-size: 16px; font-weight: 800; letter-spacing: -.035em; border-radius: 14px; color: #f3f5f4; }
.side-list button span { width: 26px; height: 26px; border-radius: 0; background: none; color: var(--c); filter: drop-shadow(0 3px 8px color-mix(in srgb, var(--c) 55%, transparent)); }
.side-list button span svg { width: 23px; height: 23px; stroke-width: 1.9; }
.side-list button .chev { width: 13px; height: 13px; margin-left: auto; transform: rotate(180deg); opacity: .28; flex: none; }
.side-list button.on { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 22%, transparent), transparent); }
.side-list button:active { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 26%, transparent), transparent); }

/* ═══ Шапка раздела отделена мягкой линией; карточка отдела — стекло со свечением ═══ */
.shead { margin-bottom: 14px; }
.shead::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c) 60%, transparent) 18%, rgba(255,255,255,.14) 60%, transparent); }
.gangpage .ghero { padding: 16px 14px 16px; margin-bottom: 12px; border-radius: 28px; overflow: hidden;
  background: linear-gradient(160deg, color-mix(in srgb, var(--g) 22%, rgba(255,255,255,.05)), rgba(255,255,255,.03) 55%) !important;
  border: 1px solid color-mix(in srgb, var(--g) 30%, rgba(255,255,255,.08)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 18px 40px rgba(0,0,0,.35); }
.gangpage .ghero::before { left: auto; right: -40px; top: -50px; bottom: auto; width: 220px; height: 220px; border-radius: 50%; filter: blur(34px); -webkit-mask-image: none; mask-image: none; opacity: .8;
  background: radial-gradient(circle, color-mix(in srgb, var(--g) 60%, transparent), transparent 70%); }
.gangpage .ghero::after { content: ""; position: absolute; right: -18px; bottom: -26px; width: 150px; height: 150px; background: var(--g); opacity: .08; transform: rotate(-14deg); pointer-events: none; z-index: 0;
  -webkit-mask: url(/static/img/m_banda.png) center/contain no-repeat; mask: url(/static/img/m_banda.png) center/contain no-repeat; }
.gh-top { padding-bottom: 14px; margin-bottom: 2px; position: relative; }
.gh-top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--g) 70%, transparent), rgba(255,255,255,.1) 55%, transparent); }
.gangpage .gh-stats { margin-top: 14px; }
.gh-stats > div { background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.06); }
.gh-n { letter-spacing: -.03em; }

/* ═══ Город: карточки с рисунками, как в «Работе» и казино ═══ */
.scgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.scard { position: relative; overflow: hidden; height: 148px; padding: 13px 14px; border-radius: 24px; transition: transform .15s;
  background: radial-gradient(95% 85% at 100% 100%, color-mix(in srgb, var(--c) 26%, transparent), transparent 66%), linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)); border: 1px solid rgba(255,255,255,.07); }
.scard:active { transform: scale(.97); }
.scard b { position: relative; z-index: 2; display: block; font-size: 16px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.scard small { position: relative; z-index: 2; display: block; max-width: 70%; font-size: 11.5px; line-height: 1.3; color: var(--mute); margin-top: 3px; }
.sc-art { position: absolute; right: -10px; bottom: -12px; width: 108px; height: 108px; color: var(--c); transform: rotate(-8deg); pointer-events: none; filter: drop-shadow(0 10px 16px rgba(0,0,0,.5)); transition: transform .2s; }
.scard:active .sc-art { transform: rotate(-8deg) scale(1.07); }
.sc-art svg { width: 100%; height: 100%; overflow: visible; }
.sc-flag { display: grid; place-items: center; width: 100%; height: 100%; filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--c) 60%, transparent)); } .sc-flag .mk { width: 82px; height: 82px; }
.sc-tag { position: absolute; left: 12px; bottom: 11px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; max-width: 46%; padding: 4px 9px; border-radius: 10px; font-size: 11.5px; font-weight: 700; color: var(--c); background: rgba(10,12,11,.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; animation: pulseG 1.6s infinite; }

/* бонус дня: баннер с сундуком, без рамки, с размытым светом */
.dbanner { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 4px 16px; margin-bottom: 6px; }
.dbanner::before { content: ""; position: absolute; left: -14px; right: -14px; top: -16px; bottom: -10px; pointer-events: none; filter: blur(24px);
  background: radial-gradient(45% 90% at 12% 50%, rgba(245,198,84,.42), transparent 70%), radial-gradient(40% 80% at 96% 50%, rgba(79,174,132,.3), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 28%, #000 72%, transparent); mask-image: linear-gradient(180deg, transparent, #000 28%, #000 72%, transparent); }
.dbanner > * { position: relative; }
.db-art { width: 84px; height: 84px; flex: none; color: #f5c654; filter: drop-shadow(0 10px 18px rgba(0,0,0,.5)); } .db-art svg { width: 100%; height: 100%; overflow: visible; }
.db-txt { flex: 1; min-width: 0; } .db-txt b { display: block; font-size: 18px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; } .db-txt small { display: block; font-size: 12px; color: var(--mute); margin-top: 3px; }
.db-s { display: inline-block; margin-top: 6px; padding: 3px 9px; border-radius: 9px; font-size: 11px; font-weight: 700; color: #f5c654; background: rgba(245,198,84,.14); }
.dbanner .btn { flex: none; width: auto; padding-left: 18px; padding-right: 18px; }

/* ═══ Профиль: плитки с рисунками, карточки со свечением ═══ */
.qgrid { gap: 8px; }
.qbtn { padding: 8px 2px 9px; gap: 3px; border-radius: 22px; font-size: 12px; font-weight: 750; letter-spacing: -.02em;
  background: radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--c) 24%, transparent), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)); border: 1px solid rgba(255,255,255,.07); }
.qbtn span { width: 54px; height: 54px; border-radius: 0; background: none; filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); }
.qbtn span svg, .qbtn span img { width: 54px; height: 54px; overflow: visible; }
.gmini { border: 0 !important; position: relative; overflow: visible; background: none !important; box-shadow: none !important; padding: 12px 8px 12px 6px; }
.gmini::before { content: ""; position: absolute; inset: -6px -14px; pointer-events: none; filter: blur(20px); background: radial-gradient(50% 90% at 14% 50%, rgba(255,122,192,.4), transparent 70%), radial-gradient(40% 80% at 92% 50%, rgba(143,131,201,.28), transparent 70%); }
.gmini > * { position: relative; }
.bizc { position: relative; overflow: hidden; border: 1px solid rgba(92,200,255,.16) !important;
  background: radial-gradient(70% 90% at 0% 0%, rgba(92,200,255,.2), transparent 70%), radial-gradient(60% 80% at 100% 100%, rgba(79,174,132,.2), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)) !important; }
.bz-art { width: 62px; height: 62px; flex: none; color: #5cc8ff; filter: drop-shadow(0 8px 14px rgba(0,0,0,.45)); } .bz-art svg { width: 100%; height: 100%; overflow: visible; }

/* ═══ Подарки: вместо рамки — размытое свечение, кнопка обмена на каждой ═══ */
.giftgrid { gap: 14px 12px; }
.gift, .gift.ok { border: 0 !important; background: none !important; overflow: visible; padding: 10px 8px 4px; box-shadow: none !important; }
.gift::before { content: ""; position: absolute; inset: -4px; border-radius: 30px; pointer-events: none; filter: blur(16px); background: radial-gradient(70% 55% at 50% 30%, rgba(255,122,192,.42), transparent 72%), radial-gradient(80% 50% at 50% 100%, rgba(143,131,201,.2), transparent 70%); }
.gift.off::before { background: radial-gradient(70% 55% at 50% 30%, rgba(255,255,255,.12), transparent 72%); }
.gift > * { position: relative; }
.gift .ge { height: 112px; } .gift .gim { width: 108px !important; height: 108px !important; }
.gift .gp { background: none; padding: 0; font-size: 16px; margin-top: 2px; display: block; }
.gift .gbuy { margin-top: 9px; width: 100%; } .gift .gbuy:not(.gold) { opacity: .75; font-size: 12.5px; }
.gstar { left: 4px; top: 4px; }

/* рисунки на карточках работы — крупнее, чтобы детали читались */
.wcard { height: 176px; }
.wcard .wart { width: 118px; height: 118px; right: -8px; bottom: -10px; }

/* ═══ Страница не ездит влево-вправо ═══ */
html, body { overflow-x: hidden; overscroll-behavior-x: none; max-width: 100vw; }
#view { overflow-x: hidden; overscroll-behavior-x: none; touch-action: pan-y; }
#view.full { touch-action: none; }
#view .tabs, #view .gv-list { touch-action: pan-x pan-y; }

/* крестик окна — в правом верхнем углу */
.sheet .sx { right: -12px; top: -27px; z-index: 5; }

/* ═══ Банда: карточка отдела во всю ширину экрана ═══ */
.gangpage .ghero { margin: 0 -14px 14px; border-radius: 0; padding: 18px 18px 18px; border-left: 0 !important; border-right: 0 !important; border-top: 0 !important; border-bottom: 0 !important; box-shadow: none;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--g) 16%, transparent) 30%, color-mix(in srgb, var(--g) 10%, transparent) 70%, transparent) !important; }
.gangpage .shead { margin-bottom: 4px; } .gangpage .shead::after { display: none; }

/* кнопки действий: свой цвет, значок со свечением и большой силуэт в углу */
.gacts { gap: 9px; }
.gact, .gact.main, .gact.red { position: relative; overflow: hidden; text-align: left; padding: 12px 12px 11px; border-radius: 22px; border: 1px solid color-mix(in srgb, var(--c) 30%, rgba(255,255,255,.08));
  background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--c) 34%, transparent), transparent 62%), linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.03));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 10px 22px rgba(0,0,0,.32); }
.gact span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 13px; color: var(--c) !important; background: color-mix(in srgb, var(--c) 18%, rgba(0,0,0,.25)); box-shadow: 0 6px 14px color-mix(in srgb, var(--c) 30%, transparent); }
.gact span svg, .gact span .mk { width: 21px; height: 21px; stroke-width: 1.9; }
.gact b { font-size: 14.5px; font-weight: 800; letter-spacing: -.025em; margin-top: 9px; } .gact small, .gact.main small, .gact.red small { color: var(--mute); font-size: 10.5px; }
.gact .ga-g { position: absolute; right: -14px; bottom: -16px; width: 74px; height: 74px; color: var(--c); opacity: .13; transform: rotate(-14deg); pointer-events: none; }
.gact .ga-g svg, .gact .ga-g .mk { width: 100%; height: 100%; stroke-width: 1.2; }
.gact .chev { position: absolute; right: 9px; top: 11px; width: 12px; height: 12px; transform: rotate(180deg); opacity: .35; }

/* районы: крупный бонус, владелец с точкой, силуэт флага */
.gangpage .dcard { padding: 13px 13px 12px; border-radius: 22px; min-height: 128px; position: relative; overflow: hidden; }
.gangpage .dcard::after { content: ""; position: absolute; right: -14px; bottom: -18px; width: 86px; height: 86px; background: var(--g); opacity: .14; transform: rotate(-14deg); pointer-events: none;
  -webkit-mask: url(/static/img/m_banda.png) center/contain no-repeat; mask: url(/static/img/m_banda.png) center/contain no-repeat; }
.gangpage .dcard.own::after { opacity: .3; }
.dc-t { margin-bottom: 6px; min-height: 0; gap: 6px; align-items: flex-start; } .dc-t b { font-size: 14.5px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.dc-p { font-size: 26px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: #fff; margin-top: 8px; background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--g) 60%, #fff)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.dcard small { min-height: 0; margin-top: 3px; position: relative; z-index: 1; }
.dc-o { display: flex; align-items: center; gap: 6px; margin-top: 10px; position: relative; z-index: 1; color: #cfd5d1; } .dc-o i { width: 7px; height: 7px; border-radius: 50%; background: var(--g); flex: none; }
.dcard.own .dc-o { color: color-mix(in srgb, var(--g) 55%, #fff); }

/* рейтинг отделов: строки без коробок, тонкие разделители */
.rate { padding: 2px 0; }
.rrow { position: relative; display: flex; align-items: center; gap: 12px; padding: 13px 4px; transition: background .15s; border-radius: 16px; }
.rrow + .rrow::before { content: ""; position: absolute; left: 44px; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.12), transparent); }
.rrow:active { background: rgba(255,255,255,.05); }
.rrow.me { background: linear-gradient(90deg, color-mix(in srgb, var(--g) 20%, transparent), transparent 80%); } .rrow.me::after { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: var(--g); }
.rr-p { width: 26px; flex: none; text-align: center; font-size: 22px; font-weight: 800; letter-spacing: -.04em; color: #6f7773; }
.rr-n { font-size: 16px; font-weight: 800; letter-spacing: -.025em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rr-n span { font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--mute); margin-left: 4px; }
.rrow .pbar { height: 3px; margin: 7px 0 5px; } .rr-s { font-size: 11px; color: var(--mute); }
.rr-v { flex: none; text-align: right; } .rr-v b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.03em; } .rr-v small { display: block; font-size: 10px; color: var(--mute); }
.rrow .grow { min-width: 0; }

/* ═══ Игры: шкала оплаты под таймером, отклик на очки ═══ */
.gtier { display: flex; align-items: center; gap: 4px; margin-top: 7px; }
.gtier i { width: 22px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.16); transition: background .25s, box-shadow .25s; }
.gtier i.on { background: #f5c654; box-shadow: 0 0 10px rgba(245,198,84,.7); } .gtier i.on:nth-child(4) { background: #47dc94; box-shadow: 0 0 10px rgba(71,220,148,.8); }
.gtier span { margin-left: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: -.01em; color: rgba(255,255,255,.75); text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.gtier.up span { animation: tierUp .5s ease; }
@keyframes tierUp { 0% { transform: scale(1); color: #fff; } 40% { transform: scale(1.18); color: #f5c654; } 100% { transform: scale(1); } }
#gScore.pop, #gTime.pop { animation: numPop .22s ease; display: inline-block; }
@keyframes numPop { 0% { transform: scale(1); } 45% { transform: scale(1.28); } 100% { transform: scale(1); } }

/* ═══ Картинки разделов города ═══ */
.cpic { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.sc-art { width: 112px; height: 104px; right: -4px; bottom: -4px; transform: none; filter: drop-shadow(0 10px 16px rgba(0,0,0,.55)) drop-shadow(0 0 18px color-mix(in srgb, var(--c) 22%, transparent)); }
.scard:active .sc-art { transform: scale(1.07); }
.scard[data-s="top"] .sc-art, .scard[data-s="players"] .sc-art, .scard[data-s="gangtab"] .sc-art { width: 124px; right: -8px; }
.scard[data-s="titles"] .sc-art { width: 92px; height: 112px; right: 2px; bottom: -10px; }
.scard small { max-width: 62%; }
.db-art { width: 96px; height: 96px; margin: -8px 0 -8px -6px; filter: drop-shadow(0 10px 18px rgba(0,0,0,.5)) drop-shadow(0 0 22px rgba(245,198,84,.35)); }
.qbtn span { width: 56px; height: 52px; } .qbtn span img.cpic { width: 56px; height: 52px; }

/* ═══ Банда: кнопки как карточки казино, компактнее ═══ */
.gacts { grid-template-columns: 1fr 1fr; gap: 9px; }
.gact, .gact.main, .gact.red { height: 92px; padding: 12px 13px; border-radius: 22px; text-align: left; }
.gact b { margin-top: 0; font-size: 15.5px; position: relative; z-index: 2; } .gact small { position: relative; z-index: 2; max-width: 58%; white-space: normal; line-height: 1.25; margin-top: 3px; font-size: 11px; }
.gact .ga-a { position: absolute; right: -6px; bottom: -8px; width: 86px; height: 78px; display: block; border-radius: 0; background: none !important; box-shadow: none; transform: rotate(-6deg); filter: drop-shadow(0 8px 12px rgba(0,0,0,.5)); transition: transform .2s; }
.gact:active .ga-a { transform: rotate(-6deg) scale(1.08); }
.gact .ga-a.ic { display: grid; place-items: center; right: 2px; bottom: 0; width: 70px; height: 70px; color: var(--c) !important; filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--c) 55%, transparent)); }
.gact .ga-a.ic svg, .gact .ga-a.ic .mk { width: 52px; height: 52px; stroke-width: 1.4; }

/* ═══ Картинки в углу под наклоном, как на карточках казино ═══ */
.sc-art, .scard[data-s="top"] .sc-art, .scard[data-s="players"] .sc-art, .scard[data-s="gangtab"] .sc-art, .scard[data-s="titles"] .sc-art {
  right: -18px; bottom: -22px; width: 66%; height: 74%; transform: rotate(-38deg); transform-origin: 60% 60%; }
.scard:active .sc-art { transform: rotate(-38deg) scale(1.07); }
.scard small { max-width: 60%; }
.gact .ga-a:not(.ic) { right: -14px; bottom: -18px; width: 56%; height: 92%; transform: rotate(-38deg); transform-origin: 60% 60%; }
.gact:active .ga-a:not(.ic) { transform: rotate(-38deg) scale(1.08); }
.gact .ga-a.ic { right: -6px; bottom: -10px; transform: rotate(-38deg); }
.gact:active .ga-a.ic { transform: rotate(-38deg) scale(1.08); }

/* картинки в углу: видны целиком, лёгкий наклон */
.sc-art, .scard[data-s="top"] .sc-art, .scard[data-s="players"] .sc-art, .scard[data-s="gangtab"] .sc-art, .scard[data-s="titles"] .sc-art {
  right: 2px; bottom: 2px; width: 58%; height: 62%; transform: rotate(-12deg); transform-origin: center; }
.scard:active .sc-art { transform: rotate(-12deg) scale(1.07); }
.sc-art .cpic { object-position: right bottom; }
.scard[data-s="titles"] .sc-art { width: 46%; height: 68%; right: 8px; }
.scard small { max-width: 58%; }
.gact .ga-a:not(.ic) { right: 4px; bottom: 3px; width: 44%; height: 82%; transform: rotate(-10deg); transform-origin: center; }
.gact:active .ga-a:not(.ic) { transform: rotate(-10deg) scale(1.08); }
.gact .ga-a.ic { right: 6px; bottom: 4px; width: 62px; height: 62px; transform: rotate(-10deg); }
.gact .ga-a.ic svg, .gact .ga-a.ic .mk { width: 46px; height: 46px; }
.gact:active .ga-a.ic { transform: rotate(-10deg) scale(1.08); }

/* картинки крупнее, прижаты к углу */
.scard { height: 158px; }
.sc-art, .scard[data-s="top"] .sc-art, .scard[data-s="players"] .sc-art, .scard[data-s="gangtab"] .sc-art {
  right: -8px; bottom: -8px; width: 72%; height: 76%; transform: rotate(-12deg); transform-origin: 70% 70%; }
.scard[data-s="titles"] .sc-art { width: 56%; height: 82%; right: -2px; bottom: -10px; }
.scard small { max-width: 54%; }
.gact, .gact.main, .gact.red { height: 100px; }
.gact .ga-a:not(.ic) { right: -6px; bottom: -6px; width: 54%; height: 100%; transform-origin: 70% 70%; }
.gact .ga-a.ic { right: 0; bottom: -2px; width: 76px; height: 76px; }
.gact .ga-a.ic svg, .gact .ga-a.ic .mk { width: 60px; height: 60px; }
.gact small { max-width: 50%; }

/* картинки чуть меньше */
.sc-art, .scard[data-s="top"] .sc-art, .scard[data-s="players"] .sc-art, .scard[data-s="gangtab"] .sc-art { right: -4px; bottom: -4px; width: 65%; height: 69%; }
.scard[data-s="titles"] .sc-art { width: 51%; height: 75%; right: 2px; bottom: -6px; }
.gact .ga-a:not(.ic) { right: -2px; bottom: -2px; width: 49%; height: 91%; }
.gact .ga-a.ic { width: 70px; height: 70px; } .gact .ga-a.ic svg, .gact .ga-a.ic .mk { width: 54px; height: 54px; }

/* ═══ Работа: фото профессий — в углу, целиком, лёгкий наклон ═══ */
.jpic { display: block; width: 100%; height: 100%; object-fit: contain; object-position: right bottom; }
.wcard .wart.pic { right: 2px; bottom: 2px; width: 62%; height: 60%; transform: rotate(-10deg); transform-origin: 70% 70%; filter: drop-shadow(0 10px 14px rgba(0,0,0,.55)) drop-shadow(0 0 16px color-mix(in srgb, var(--c) 20%, transparent)); }
.wcard:active .wart.pic { transform: rotate(-10deg) scale(1.07); }
.wcard.lock .wart.pic { opacity: .45; filter: grayscale(.9); }
.wart.duo { display: flex; align-items: flex-end; justify-content: flex-end; gap: 6px; transform: none !important; }
.wcard .wart.duo { width: 70%; height: 44%; right: 8px; bottom: 10px; }
.wart.duo .jpic { width: 46%; height: 100%; flex: none; object-position: center bottom; } .wart.duo .jpic:first-child { transform: rotate(-8deg); } .wart.duo .jpic:last-child { width: 50%; transform: rotate(6deg); }
.whero .wart.pic { width: 46%; height: 150px; right: 8px; bottom: 78px; transform: rotate(-8deg); }
.whero .wart.duo { width: 50%; height: 90px; bottom: 110px; }
.wcard .wfoot { max-width: 44%; }

/* стример: логотипы друг над другом в правом углу, не задевают зарплату */
.wcard .wart.duo { flex-direction: column; align-items: flex-end; justify-content: flex-end; gap: 7px; width: 44%; height: 58%; right: 10px; bottom: 12px; }
.wart.duo .jpic, .wart.duo .jpic:last-child { width: 100%; height: 44%; object-position: right center; }
.wart.duo .jpic:first-child { width: 62%; transform: rotate(-6deg); } .wart.duo .jpic:last-child { transform: rotate(4deg); filter: drop-shadow(0 0 6px rgba(190,160,255,.75)) brightness(1.5); }
.whero .wart.duo { flex-direction: column; align-items: flex-end; width: 40%; height: 130px; bottom: 86px; right: 14px; }

/* ═══ Карточка работы: текст и зарплата сверху, картинка снизу на всю ширину — ничего не пересекается ═══ */
.wcard { height: 190px; padding: 13px 14px; display: block; }
.wcard .wtxt { max-width: 100%; position: relative; z-index: 2; }
.wcard .wn { -webkit-line-clamp: 2; padding-right: 0; } .wcard.lock .wn { padding-right: 30px; }
.wcard .wfoot, .wfoot { position: relative; left: auto; right: auto; bottom: auto; z-index: 2; max-width: 100%; margin-top: 8px; flex-direction: row; align-items: center; gap: 7px; }
.wcard .wfoot .wpay { background: rgba(255,255,255,.07); font-size: 12px; padding: 4px 9px; } .wfoot .wxp { padding: 0; white-space: nowrap; }
.wcard .wart, .wcard .wart.pic { left: 12px; right: 8px; bottom: 8px; top: auto; width: auto; height: 86px; transform: none; transform-origin: center; display: flex; justify-content: flex-end; align-items: flex-end; }
.wcard:active .wart, .wcard:active .wart.pic { transform: scale(1.05); transform-origin: right bottom; }
.wcard .wart svg { width: 92px; height: 92px; flex: none; margin: 0 -2px -4px 0; }
.wcard .wart .jpic { width: 100%; height: 100%; object-fit: contain; object-position: right bottom; }
.wcard .wart.duo { flex-direction: row; align-items: center; justify-content: flex-end; gap: 10px; left: 12px; right: 10px; width: auto; height: 64px; bottom: 14px; }
.wcard .wart.duo .jpic, .wcard .wart.duo .jpic:last-child { width: auto; height: 100%; max-width: 54%; object-position: center; transform: none; }
.wcard .wart.duo .jpic:first-child { height: 78%; max-width: 38%; }
.wcard { height: 198px; } .wcard .wart, .wcard .wart.pic { height: 84px; }

/* ═══ Работа: картинка в правом нижнем углу, у каждой свой угол наклона и размер; зарплата слева снизу ═══ */
.wcard { height: 178px; }
.wcard .wtxt { max-width: 100%; }
.wcard .wfoot, .wfoot { position: absolute; left: 12px; right: auto; bottom: 11px; margin-top: 0; max-width: 44%; flex-direction: column; align-items: flex-start; gap: 3px; z-index: 2; }
.wcard .wfoot .wpay { background: rgba(10,12,11,.72); font-size: 11.5px; padding: 4px 8px; } .wfoot .wxp { padding-left: 2px; }
.wcard .wart { left: auto; right: -6px; bottom: -8px; width: 108px; height: 108px; display: block; transform: rotate(-8deg); transform-origin: 60% 60%; }
.wcard .wart svg { width: 100%; height: 100%; margin: 0; }
.wcard:active .wart { transform: rotate(-8deg) scale(1.06); }
.wcard .wart.pic { left: auto; right: 4px; bottom: 4px; width: var(--w, 52%); height: var(--h, 56%); display: block; transform: rotate(var(--a, -8deg)); transform-origin: 65% 65%; }
.wcard:active .wart.pic { transform: rotate(var(--a, -8deg)) scale(1.06); }
.wcard .wart .jpic { width: 100%; height: 100%; object-fit: contain; object-position: right bottom; }
.wcard .wart.duo { display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; gap: 7px; left: auto; width: 44%; height: 56%; right: 10px; bottom: 12px; transform: none; }
.wcard:active .wart.duo { transform: scale(1.06); }
.wcard .wart.duo .jpic, .wcard .wart.duo .jpic:last-child { width: 100%; height: 44%; max-width: none; object-position: right center; }
.wcard .wart.duo .jpic:first-child { width: 62%; height: 44%; max-width: none; transform: rotate(-6deg); } .wcard .wart.duo .jpic:last-child { transform: rotate(4deg); }
.wcard[data-key="guard"] .wart.pic { --a: -8deg; --w: 50%; --h: 58%; }
.wcard[data-key="teamlead"] .wart.pic { --a: -8deg; --w: 50%; --h: 58%; }
.wcard[data-key="architect"] .wart.pic { --a: -8deg; --w: 56%; --h: 56%; }
.wcard[data-key="jurist"] .wart.pic { --a: 0deg; --w: 40%; --h: 68%; }
.wcard[data-key="doctor"] .wart.pic { --a: -10deg; --w: 50%; --h: 58%; }
.wcard[data-key="realtor"] .wart.pic { --a: 0deg; --w: 38%; --h: 66%; }
.wcard[data-key="engineer"] .wart.pic { --a: -8deg; --w: 54%; --h: 56%; }
.wcard[data-key="coder"] .wart.pic { --a: -8deg; --w: 55%; --h: 50%; }
.wcard[data-key="vet"] .wart.pic { --a: -10deg; --w: 46%; --h: 56%; }
.wcard[data-key="sysadmin"] .wart.pic { --a: -6deg; --w: 54%; --h: 50%; }
.wcard[data-key="mechanic"] .wart.pic { --a: -8deg; --w: 54%; --h: 52%; }
.wcard[data-key="dj"] .wart.pic { --a: -8deg; --w: 56%; --h: 40%; }
.wcard[data-key="electrician"] .wart.pic { --a: 0deg; --w: 34%; --h: 62%; }
.wcard[data-key="marketer"] .wart.pic { --a: -8deg; --w: 52%; --h: 56%; }
.wcard[data-key="welder"] .wart.pic { --a: -6deg; --w: 46%; --h: 62%; }
.wcard[data-key="bartender"] .wart.pic { --a: 6deg; --w: 28%; --h: 66%; }
.wcard[data-key="hr"] .wart.pic { --a: -6deg; --w: 56%; --h: 50%; }
.wcard[data-key="pilot"] .wart.pic { --a: -10deg; --w: 56%; --h: 38%; }
.wcard[data-key="cfo"] .wart.pic { --a: -8deg; --w: 54%; --h: 52%; }
.wcard[data-key="captain"] .wart.pic { --a: 8deg; --w: 40%; --h: 64%; }
.wcard[data-key="lawyer"] .wart.pic { --a: -4deg; --w: 56%; --h: 52%; }
.wcard[data-key="ceo"] .wart.pic { --a: -10deg; --w: 54%; --h: 52%; }
.wcard[data-key="broker"] .wart.pic { --a: -6deg; --w: 52%; --h: 56%; }
.wcard[data-key="pilot"] .wart.pic { --w: 52%; --h: 40%; bottom: 46px; right: 8px; }
.wcard[data-key="cfo"] .wart.pic, .wcard[data-key="lawyer"] .wart.pic, .wcard[data-key="ceo"] .wart.pic { --w: 50%; bottom: 6px; }
.wcard[data-key="hr"] .wart.pic, .wcard[data-key="coder"] .wart.pic, .wcard[data-key="sysadmin"] .wart.pic { --w: 52%; }
.wcard[data-key="dj"] .wart.pic { --w: 54%; --h: 44%; bottom: 8px; }

/* ═══ Работа, итог: зарплата под названием, картинка в правом нижнем углу — не пересекаются на любом экране ═══ */
.wcard { height: 204px; }
.wcard .wfoot, .wfoot { position: relative; left: auto; bottom: auto; max-width: 100%; margin-top: 8px; flex-direction: column; align-items: flex-start; gap: 3px; }
.wcard .wfoot .wpay { background: rgba(255,255,255,.07); }
.wcard .wart { right: -4px; bottom: -6px; width: 96px; height: 96px; }
.wcard .wart.pic, .wcard[data-key] .wart.pic { right: 6px; bottom: 6px; width: var(--w, 60%); height: var(--hp, 84px); transform: rotate(var(--a, -8deg)); transform-origin: 80% 80%; }
.wcard .wart.duo { width: 50%; height: 84px; right: 8px; bottom: 10px; }
.wcard[data-key="jurist"] .wart.pic, .wcard[data-key="realtor"] .wart.pic, .wcard[data-key="electrician"] .wart.pic, .wcard[data-key="bartender"] .wart.pic, .wcard[data-key="captain"] .wart.pic, .wcard[data-key="welder"] .wart.pic { --w: 46%; --hp: 92px; }
.wcard[data-key="dj"] .wart.pic, .wcard[data-key="pilot"] .wart.pic, .wcard[data-key="sysadmin"] .wart.pic, .wcard[data-key="coder"] .wart.pic, .wcard[data-key="mechanic"] .wart.pic, .wcard[data-key="hr"] .wart.pic { --w: 70%; --hp: 74px; }
.wcard[data-key="pilot"] .wart.pic { bottom: 14px; }
.wcard[data-key="guard"] .wart.pic, .wcard[data-key="teamlead"] .wart.pic, .wcard[data-key="vet"] .wart.pic, .wcard[data-key="doctor"] .wart.pic { --w: 56%; --hp: 86px; }

/* ═══ Работа: картинки прижаты к правому нижнему углу (как в «Городе»), угол наклона — свой у каждой ═══ */
.wcard .wart.pic, .wcard[data-key] .wart.pic { right: -5px; bottom: -5px; width: var(--w, 66%); height: var(--hp, 100px); transform: rotate(var(--a, -12deg)); transform-origin: 72% 72%; }
.wcard[data-key] .wart.pic { --a: -12deg; --w: 66%; --hp: 100px; }
.wcard[data-key="jurist"] .wart.pic, .wcard[data-key="realtor"] .wart.pic { --a: -6deg; --w: 50%; --hp: 108px; }
.wcard[data-key="electrician"] .wart.pic, .wcard[data-key="bartender"] .wart.pic, .wcard[data-key="captain"] .wart.pic { --a: 10deg; --w: 46%; --hp: 106px; right: 2px; }
.wcard[data-key="welder"] .wart.pic { --a: -8deg; --w: 52%; --hp: 106px; }
.wcard[data-key="dj"] .wart.pic, .wcard[data-key="sysadmin"] .wart.pic, .wcard[data-key="coder"] .wart.pic, .wcard[data-key="mechanic"] .wart.pic, .wcard[data-key="hr"] .wart.pic, .wcard[data-key="cfo"] .wart.pic, .wcard[data-key="lawyer"] .wart.pic, .wcard[data-key="ceo"] .wart.pic { --a: -8deg; --w: 78%; --hp: 86px; right: -2px; bottom: -2px; }
.wcard[data-key="pilot"] .wart.pic { --a: -14deg; --w: 80%; --hp: 70px; right: 0; bottom: 8px; }
.wcard .wart.duo { width: 54%; height: 92px; right: 6px; bottom: 8px; }
.wcard .wart { right: -6px; bottom: -8px; width: 104px; height: 104px; }
.wcard[data-key="streamer"] .wart.pic.duo { right: 8px; bottom: 10px; width: 58%; height: 92px; transform: none; }

/* ═══ Работа: картинки по диагонали в углу, как на карточках казино (наклон −38°) ═══ */
.wcard .wart.pic, .wcard[data-key] .wart.pic { --a: -38deg; --w: 62%; --hp: 98px; right: -8px; bottom: -8px; left: auto; width: var(--w); height: var(--hp); transform: rotate(-38deg); transform-origin: 60% 60%; }
.wcard:active .wart.pic, .wcard[data-key]:active .wart.pic { transform: rotate(-38deg) scale(1.07); }
.wcard .wart .jpic { object-position: center; }
.wcard[data-key="jurist"] .wart.pic, .wcard[data-key="realtor"] .wart.pic, .wcard[data-key="electrician"] .wart.pic, .wcard[data-key="bartender"] .wart.pic, .wcard[data-key="captain"] .wart.pic, .wcard[data-key="welder"] .wart.pic { --w: 54%; --hp: 104px; right: -6px; bottom: -10px; }
.wcard[data-key="dj"] .wart.pic, .wcard[data-key="pilot"] .wart.pic, .wcard[data-key="sysadmin"] .wart.pic, .wcard[data-key="coder"] .wart.pic, .wcard[data-key="mechanic"] .wart.pic, .wcard[data-key="hr"] .wart.pic, .wcard[data-key="cfo"] .wart.pic, .wcard[data-key="lawyer"] .wart.pic, .wcard[data-key="ceo"] .wart.pic { --w: 72%; --hp: 84px; right: -14px; bottom: 4px; }
.wcard[data-key="streamer"] .wart.pic.duo { flex-direction: row; align-items: center; justify-content: center; gap: 8px; right: -10px; bottom: 14px; width: 74%; height: 56px; transform: rotate(-38deg); transform-origin: 60% 60%; }
.wcard[data-key="streamer"] .wart.duo .jpic, .wcard[data-key="streamer"] .wart.duo .jpic:last-child { width: auto; max-width: 56%; height: 100%; transform: none; object-position: center; }
.wcard[data-key="streamer"] .wart.duo .jpic:first-child { height: 80%; max-width: 36%; width: auto; transform: none; }
.wcard .wart { transform: rotate(-38deg); transform-origin: 60% 60%; right: -10px; bottom: -12px; width: 104px; height: 104px; }
.wcard:active .wart { transform: rotate(-38deg) scale(1.07); }
.wcard[data-key="streamer"] .wart.pic.duo { transform: rotate(-38deg) !important; right: -4px; bottom: 22px; width: 78%; height: 50px; }
.wcard[data-key="streamer"]:active .wart.pic.duo { transform: rotate(-38deg) scale(1.07) !important; }
.wcard[data-key="streamer"] .wart.pic.duo { bottom: 40px; right: 2px; }

/* рисунки профессий: в правом нижнем углу, лёгкий наклон */
.wcard .wart { transform: rotate(-8deg); transform-origin: 60% 60%; right: -6px; bottom: -8px; width: 112px; height: 112px; }
.wcard:active .wart { transform: rotate(-8deg) scale(1.07); }
.whero .wart { width: min(176px, 42vw); height: min(176px, 42vw); right: -2px; bottom: 74px; }
.whero .wtxt { max-width: 58%; } .whero .wpay { white-space: nowrap; font-size: min(22px, 5.4vw); } .whero .wn { font-size: min(25px, 6.2vw); }

/* ═══ Верхняя панель: матовое стекло, скруглённый низ и тонкая ровная кромка ═══ */
#top { background: rgba(15,18,17,.66); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); padding-bottom: 11px;
  border-radius: 0 0 24px 24px; border-bottom: 1px solid rgba(255,255,255,.09); box-shadow: 0 12px 28px rgba(0,0,0,.3), inset 0 -1px 0 rgba(255,255,255,.03); }
#top::after { display: none; }
body.onmap #top { display: none; }

#top { border-radius: 0; }

/* ═══ Боковое меню: квадратнее углы, стеклянная линия под заголовком группы, аккуратная активная кнопка ═══ */
#side .side-in { border-radius: 0 14px 14px 0; }
.side-h { position: relative; padding: 18px 4px 9px; margin-bottom: 6px; }
.side-h::after { content: ""; position: absolute; left: 2px; right: 2px; bottom: 0; height: 1.5px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,.32), rgba(255,255,255,.1) 55%, rgba(255,255,255,0)); box-shadow: 0 1px 6px rgba(255,255,255,.12); }
.side-list button { position: relative; border-radius: 10px; border: 1px solid transparent; margin: 2px 0; padding: 9px 8px 9px 12px; transition: background .18s, border-color .18s, transform .14s; }
.side-list button.on { color: #fff; border-color: color-mix(in srgb, var(--c) 38%, rgba(255,255,255,.06));
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 26%, rgba(255,255,255,.04)), rgba(255,255,255,.05));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 6px 16px color-mix(in srgb, var(--c) 18%, transparent); }
.side-list button.on::after { content: ""; position: absolute; left: -1px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--c); box-shadow: 0 0 10px var(--c); }
.side-list button.on span { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--c) 85%, transparent)); }
.side-list button.on .chev { opacity: .9; color: var(--c); }
.side-list button:active { border-radius: 10px; }

/* активная кнопка меню: полоска на всю высоту, свечение слабее */
.side-list button.on { overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 3px 8px color-mix(in srgb, var(--c) 8%, transparent); }
.side-list button.on::after { left: 0; top: 0; bottom: 0; width: 4px; border-radius: 0; box-shadow: 0 0 5px color-mix(in srgb, var(--c) 55%, transparent); }
.side-list button.on span { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--c) 50%, transparent)); }

/* кнопки бокового меню: углы чуть круглее */
.side-list button, .side-list button.on, .side-list button:active { border-radius: 15px; }

/* полоска активной кнопки: с отступом от края, короче, скруглённая */
.side-list button.on::after { left: 6px; top: 50%; bottom: auto; width: 3.5px; height: 46%; transform: translateY(-50%); border-radius: 4px; }
.side-list button.on { padding-left: 16px; }

/* значки бокового меню — картинки-силуэты одного размера, в цвет раздела */
.side-list button span { width: 28px; height: 28px; display: grid; place-items: center; }
.side-list button span .mk { width: 26px; height: 26px; background: var(--c); }
.side-list button { gap: 13px; }

/* значки бокового меню поменьше */
.side-list button span { width: 24px; height: 24px; }
.side-list button span .mk { width: 20px; height: 20px; }