:root {
  --bg: #0a0d10;
  --glass: rgba(18, 23, 28, 0.72);
  --glass2: rgba(30, 37, 44, 0.75);
  --line: rgba(255, 255, 255, 0.08);
  --line2: rgba(255, 255, 255, 0.14);
  --text: #eef2f5;
  --muted: #8e99a3;
  --acc: #ff8a1f;
  --acc2: #ffb35c;
  --accg: linear-gradient(135deg, #ffb057, #ff7a12 55%, #e85d00);
  --red: #ff5a48;
  --blue: #4aa3ff;
  --good: #5fe08a;
  --gold: #ffd25e;
  --font: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  --disp: 'Teko', 'Rajdhani', 'Segoe UI', sans-serif;
  --r: 12px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; user-select: none; }
.hidden { display: none !important; }
button { font-family: inherit; }
input, select { font-family: inherit; font-size: 16px; color: var(--text); background: rgba(5, 8, 10, 0.6); border: 1px solid var(--line2); border-radius: 8px; padding: 10px 12px; outline: none; width: 100%; margin-top: 4px; transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus { border-color: var(--acc); box-shadow: 0 0 0 3px rgba(255, 138, 31, .18); }
input[type=range] { padding: 0; accent-color: var(--acc); background: none; border: 0; }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--acc); margin: 0; }
label { display: block; margin: 10px 0; font-weight: 600; color: #cfd6db; }
label.chk { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.err { color: var(--red); min-height: 20px; font-weight: 600; }
.row { display: flex; gap: 8px; align-items: center; }
.row input { margin-top: 0; }
.glass { background: var(--glass); border: 1px solid var(--line); border-radius: var(--r); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

#game-canvas, #bg-canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#bg-canvas { z-index: 0; }
#game-canvas { z-index: 1; }

.btn { cursor: pointer; border: 1px solid var(--line2); background: rgba(255, 255, 255, 0.06); color: var(--text); padding: 10px 16px; border-radius: 9px; font-weight: 700; font-size: 15px; letter-spacing: .6px; transition: all .15s; text-transform: uppercase; white-space: nowrap; }
.btn:hover { border-color: var(--acc); background: rgba(255, 138, 31, 0.12); color: #fff; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.primary { background: var(--accg); border-color: rgba(255, 200, 140, 0.6); color: #1d1004; box-shadow: 0 6px 24px rgba(255, 122, 18, 0.35); }
.btn.primary:hover { filter: brightness(1.1); box-shadow: 0 8px 30px rgba(255, 122, 18, 0.5); }
.btn.big { padding: 13px 22px; font-size: 17px; }
.btn.huge { padding: 18px 26px; font-size: 26px; font-family: var(--disp); letter-spacing: 2px; font-weight: 500; }
.btn.small { padding: 5px 10px; font-size: 12px; }
.btn.wide { width: 100%; }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { border-color: var(--line2); }
.btn.danger:hover { border-color: var(--red); color: var(--red); background: rgba(255, 90, 72, .1); }
.btn.wa { background: linear-gradient(135deg, #3ddc72, #1faa53); border-color: #6ff19b; color: #04210f; }
.btn:disabled { opacity: 0.4; cursor: default; transform: none; filter: none; }

.screen { position: fixed; inset: 0; z-index: 5; }
.logo { font-family: var(--disp); font-size: 64px; letter-spacing: 3px; line-height: 1; display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 500; }
.logo b { color: var(--acc); font-weight: 500; }
.logo.xl { font-size: 96px; }
.logo.sm { font-size: 32px; }
.logo-icon { width: 0.8em; height: 0.8em; background: var(--accg); clip-path: polygon(12% 88%, 31% 12%, 47% 41%, 53% 41%, 69% 12%, 88% 88%, 50% 69%); display: inline-block; filter: drop-shadow(0 0 10px rgba(255, 138, 31, .7)); }
.tag { font-size: 11px; padding: 2px 6px; border-radius: 4px; background: rgba(255, 138, 31, .2); color: var(--acc2); margin-left: 6px; letter-spacing: 1px; vertical-align: middle; }

/* ---------- giriş ---------- */
#screen-login { display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 30% 50%, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7)); }
.login-wrap { display: flex; gap: 60px; align-items: center; padding: 20px; }
.login-hero .tagline { color: #cdb59a; font-size: 22px; margin: 10px 0 24px; }
.feat { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.feat li { color: #c4ccd2; font-size: 18px; padding-left: 26px; position: relative; }
.feat li::before { content: ''; position: absolute; left: 0; top: 7px; width: 12px; height: 12px; background: var(--accg); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.feat b { color: #fff; }
.login-box { width: min(420px, 92vw); padding: 26px; }
.invite-banner { background: linear-gradient(135deg, rgba(255, 138, 31, .25), rgba(255, 138, 31, .08)); border: 1px solid rgba(255, 138, 31, .5); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; font-weight: 600; }
.invite-banner b { color: var(--acc2); }
/* davet penceresi */
#modal-invite { z-index: 80; }
/* davet önizlemesi: oda ekranı arkada canlı görünür, eylemler kapalı */
body.room-preview #modal-invite { background: rgba(0, 0, 0, .38); backdrop-filter: blur(2px); }
body.room-preview #screen-room { pointer-events: none; user-select: none; }
body.room-preview #rm-inv, body.room-preview #rm-shop, body.room-preview #rm-invite, body.room-preview #rm-leave,
body.room-preview #rm-team, body.room-preview #rm-ready, body.room-preview #rm-start, body.room-preview .rm-in, body.room-preview .rm-slot .j { display: none !important; }
body.room-preview .rm-actions { justify-content: center; }
@media (min-width: 1100px) { body.room-preview #modal-invite { justify-content: flex-end; padding-right: 4vw; } }
.inv-box { width: min(440px, 94vw); padding: 26px 26px 18px; border: 1px solid rgba(255, 138, 31, .45); box-shadow: 0 20px 60px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 138, 31, .12) inset; animation: invIn .25s ease-out; }
@keyframes invIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.inv-tag { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 2px; color: #111; background: var(--acc); border-radius: 4px; padding: 3px 8px; margin-bottom: 8px; }
.inv-box h2 { font-size: 34px; margin-bottom: 12px; }
.inv-room { background: linear-gradient(135deg, rgba(255, 138, 31, .16), rgba(255, 138, 31, .04)); border: 1px solid rgba(255, 138, 31, .35); border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; }
.inv-name { font-size: 20px; font-weight: 800; }
.inv-host { color: var(--muted); margin: 2px 0 10px; font-size: 14px; }
.inv-host b { color: var(--acc2); }
.inv-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.inv-meta span { background: rgba(255, 255, 255, .07); border-radius: 999px; padding: 4px 10px; font-size: 13px; font-weight: 600; }
.inv-meta .inv-st.live { background: rgba(60, 200, 90, .18); color: #7ee08f; }
.inv-meta .inv-st.wait { background: rgba(255, 200, 60, .15); color: #ffd36b; }
.inv-warn { margin-top: 10px; font-size: 13px; color: #ffcf70; }
.inv-gone b { display: block; font-size: 17px; margin-bottom: 4px; }
.inv-gone span, .inv-load { color: var(--muted); font-size: 14px; }
.inv-lbl { display: block; margin-bottom: 8px; }
.inv-note { text-align: center; color: var(--muted); font-size: 12px; margin-top: 6px; }
#inv-form label { display: block; margin-bottom: 8px; }
.inv-close { margin-top: 6px; color: var(--muted); }
.guest-box .lbl { font-weight: 700; color: var(--acc2); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 1px; font-size: 13px; }
.or { text-align: center; color: var(--muted); margin: 16px 0 8px; position: relative; font-size: 13px; }
.or::before, .or::after { content: ''; position: absolute; top: 50%; width: 32%; height: 1px; background: var(--line2); }
.or::before { left: 0; } .or::after { right: 0; }
.conn { text-align: center; color: var(--muted); font-size: 13px; margin-top: 12px; }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.tab { flex: 1; background: transparent; border: 0; color: var(--muted); padding: 10px; cursor: pointer; font-weight: 700; font-size: 15px; border-bottom: 2px solid transparent; text-transform: uppercase; }
.tab.active { color: var(--acc); border-bottom-color: var(--acc); }
.tab:hover { color: #fff; }

/* ---------- lobi ---------- */
#screen-lobby { display: grid; grid-template-columns: 230px 1fr; background: linear-gradient(90deg, rgba(5, 7, 9, 0.85), rgba(5, 7, 9, 0.5)); }
.sidenav { display: flex; flex-direction: column; padding: 22px 14px; border-right: 1px solid var(--line); background: rgba(6, 8, 10, 0.75); backdrop-filter: blur(10px); }
.sidenav .logo { margin: 0 6px 28px; }
#nav { display: flex; flex-direction: column; gap: 4px; }
#nav button { display: flex; align-items: center; gap: 12px; background: transparent; border: 1px solid transparent; color: #b8c2ca; font-size: 18px; font-weight: 700; padding: 11px 14px; border-radius: 10px; cursor: pointer; text-align: left; text-transform: uppercase; letter-spacing: .5px; transition: all .15s; }
#nav button i { font-style: normal; width: 24px; text-align: center; font-size: 16px; opacity: .85; }
#nav button:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
#nav button.active { background: linear-gradient(90deg, rgba(255, 138, 31, 0.22), rgba(255, 138, 31, 0.03)); border-color: rgba(255, 138, 31, 0.35); color: #fff; box-shadow: inset 3px 0 0 var(--acc); }
.nav-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 4px; }
.nav-bottom .btn { text-align: left; }
.lobby-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 18px 26px 22px; overflow: hidden; }
.lobby-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.page-title { font-family: var(--disp); font-size: 46px; line-height: .9; letter-spacing: 1px; font-weight: 500; }
.top-chips { display: flex; gap: 10px; align-items: center; }
.chip { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--glass); border: 1px solid var(--line); border-radius: 12px; backdrop-filter: blur(10px); }
.gold-chip { font-size: 22px; font-family: var(--disp); }
.gold-chip b { font-weight: 500; color: var(--gold); letter-spacing: 1px; }
.coin { color: var(--gold); text-shadow: 0 0 10px rgba(255, 210, 94, .6); }
.profile-chip { min-width: 250px; }
.pc-name { font-weight: 700; font-size: 18px; }
.pc-rank { color: var(--acc2); font-size: 13px; font-weight: 700; }
.xpbar { height: 9px; background: rgba(0, 0, 0, .5); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin-top: 6px; }
.xpbar.slim { height: 5px; margin-top: 3px; }
.xpbar > div { height: 100%; background: var(--accg); box-shadow: 0 0 10px rgba(255, 138, 31, .6); transition: width .6s; }
.guest-warn { background: rgba(255, 138, 31, .12); border: 1px solid rgba(255, 138, 31, .35); border-radius: 10px; padding: 8px 14px; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 600; }
.page { flex: 1; min-height: 0; animation: pageIn .25s ease-out; }
@keyframes pageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.panel { padding: 16px; min-height: 0; overflow-y: auto; }
.panel h3 { margin: 0; font-size: 15px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--acc2); }
.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.seg { display: inline-flex; background: rgba(0, 0, 0, .35); border: 1px solid var(--line); border-radius: 9px; padding: 3px; gap: 2px; }
.seg button { background: transparent; border: 0; color: var(--muted); padding: 5px 12px; border-radius: 7px; font-weight: 700; cursor: pointer; font-size: 13px; text-transform: uppercase; }
.seg button.active { background: rgba(255, 138, 31, .2); color: #fff; }
.seg.big { display: flex; margin-bottom: 12px; }
.seg.big button { flex: 1; padding: 9px; font-size: 15px; }

.play-grid { display: grid; grid-template-columns: 1fr 420px; gap: 16px; height: 100%; min-height: 0; }
.hero { position: relative; overflow: hidden; min-height: 0; background: radial-gradient(ellipse at 50% 70%, rgba(255, 138, 31, .14), transparent 60%), var(--glass); }
.hero-stage { position: absolute; inset: 0; }
.preview-canvas { width: 100%; height: 100%; display: block; cursor: grab; }
.preview-canvas:active { cursor: grabbing; }
.hero-overlay { position: absolute; left: 0; right: 0; bottom: 64px; padding: 22px; display: flex; justify-content: space-between; align-items: flex-end; pointer-events: none; }
.hero-overlay > * { pointer-events: auto; }
.hero-actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.hero-loadout { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.hero-loadout div { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.hero-loadout img { height: 22px; }
.code-join { display: flex; gap: 6px; }
.code-join input { width: 120px; margin: 0; text-transform: uppercase; letter-spacing: 3px; font-weight: 700; text-align: center; }
.stats-strip { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--line); background: rgba(0, 0, 0, .35); }
.stat { padding: 10px; text-align: center; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat b { display: block; font-size: 22px; font-family: var(--disp); font-weight: 500; line-height: 1; }
.stat span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.side-col { display: grid; grid-template-rows: 1.3fr auto 0.8fr; gap: 14px; min-height: 0; }
.room-list, .online-list { display: flex; flex-direction: column; gap: 6px; }
.room { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center; padding: 8px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); border-radius: 10px; transition: all .15s; }
.room:hover { border-color: rgba(255, 138, 31, .5); background: rgba(255, 138, 31, .05); }
.room img { width: 64px; height: 46px; border-radius: 6px; display: block; object-fit: cover; }
.room .rn { font-weight: 700; font-size: 16px; }
.room .rm { font-size: 12px; color: var(--muted); }
.room .ra { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.room .rp { font-weight: 700; font-size: 13px; }
.room .rb { display: flex; gap: 4px; }
.empty { color: var(--muted); text-align: center; padding: 24px; }
.on-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: rgba(255, 255, 255, .03); }
.on-row .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 6px var(--good); }
.on-row .dot.ingame { background: var(--acc); box-shadow: 0 0 6px var(--acc); }
.on-row .nm { flex: 1; font-weight: 700; }
.on-row .st { font-size: 12px; color: var(--muted); }

/* envanter & market */
.inv-grid { display: grid; grid-template-columns: 1fr 440px; gap: 16px; height: 100%; min-height: 0; }
.inv-grid > .panel { display: flex; flex-direction: column; }
.item-grid { flex: 1 1 auto; min-height: 0; grid-auto-rows: max-content; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; overflow-y: auto; padding: 2px; align-content: start; }
.item { position: relative; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .01)); cursor: pointer; transition: all .15s; overflow: hidden; }
.item:hover { border-color: rgba(255, 138, 31, .55); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, .4); }
.item.sel { border-color: var(--acc); box-shadow: 0 0 0 2px rgba(255, 138, 31, .35); }
.item .thumb { height: 104px; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 80%, rgba(255, 138, 31, .14), transparent 70%); }
.item .thumb img { max-width: 92%; max-height: 100px; }
.item .info { padding: 8px 10px 10px; }
.item .n { font-weight: 700; font-size: 15px; line-height: 1.1; }
.item .d { font-size: 12px; color: var(--muted); }
.item .p { margin-top: 4px; font-family: var(--disp); font-size: 20px; color: var(--gold); line-height: 1; }
.item .p.free { color: var(--good); }
.item .badge { position: absolute; top: 8px; right: 8px; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 5px; background: rgba(0, 0, 0, .6); letter-spacing: .5px; }
.item .badge.owned { color: var(--good); }
.item .badge.eq { color: #1a0e04; background: var(--acc); }
.item.locked .thumb img { filter: grayscale(1) brightness(.5); }
.item .lock { position: absolute; top: 8px; left: 8px; font-size: 11px; background: rgba(0, 0, 0, .7); padding: 2px 6px; border-radius: 5px; color: #ffb3a8; display: flex; align-items: center; gap: 3px; }
.rarity-0 { border-bottom: 3px solid #8e99a3; } .rarity-1 { border-bottom: 3px solid #4fc56a; } .rarity-2 { border-bottom: 3px solid #4aa3ff; } .rarity-3 { border-bottom: 3px solid #b06cff; } .rarity-4 { border-bottom: 3px solid #ffb34a; }
.camo-sw { width: 100%; height: 100%; }
.detail { display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.detail-stage { height: 52%; min-height: 220px; position: relative; background: radial-gradient(ellipse at 50% 75%, rgba(255, 138, 31, .16), transparent 65%); border-bottom: 1px solid var(--line); }
.detail-body { padding: 16px 18px; overflow-y: auto; flex: 1; }
.detail-body h2 { margin: 0; font-family: var(--disp); font-size: 38px; font-weight: 500; line-height: 1; }
.detail-body .type { color: var(--acc2); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 13px; }
.detail-body .desc { color: #c3cbd1; margin: 8px 0 12px; }
.detail-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.statbars { display: grid; gap: 6px; margin-top: 8px; }
.statbars .sb { display: grid; grid-template-columns: 70px 1fr 40px; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.statbars .sb i { height: 6px; background: rgba(0, 0, 0, .5); border-radius: 3px; overflow: hidden; }
.statbars .sb i b { display: block; height: 100%; background: var(--accg); }
.statbars .sb span:last-child { text-align: right; color: #fff; font-weight: 700; }
.loadout-bar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 12px; }
.lslot { border: 1px dashed var(--line2); border-radius: 10px; padding: 6px 8px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; min-height: 58px; }
.lslot b { display: block; color: #fff; font-size: 14px; letter-spacing: 0; text-transform: none; }
.lslot img { height: 20px; display: block; margin-top: 2px; }
.camo-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.camo-btn { width: 46px; height: 46px; border-radius: 8px; border: 2px solid var(--line2); cursor: pointer; background-size: cover; position: relative; }
.camo-btn.sel { border-color: var(--acc); box-shadow: 0 0 0 2px rgba(255, 138, 31, .4); }
.camo-btn.locked { opacity: .3; cursor: not-allowed; }
.price-big { font-family: var(--disp); font-size: 34px; color: var(--gold); line-height: 1; }
.req { font-size: 14px; margin-top: 6px; display: flex; align-items: center; gap: 6px; }
.req.bad { color: #ff9b8e; } .req.ok { color: var(--good); }

.rank-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.rk { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); }
.rk.me { border-color: var(--acc); background: rgba(255, 138, 31, .12); }
.rk.done { opacity: .55; }
.rk .x { margin-left: auto; color: var(--acc2); font-weight: 700; font-size: 14px; }
.lb-row { display: grid; grid-template-columns: 40px 34px 1fr auto auto; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.lb-row.me { background: rgba(255, 138, 31, .12); border-radius: 8px; }
.lb-row .pos { color: var(--muted); font-weight: 700; font-family: var(--disp); font-size: 24px; }
.lb-row.top1 .pos { color: #ffd25e; } .lb-row.top2 .pos { color: #d7dee5; } .lb-row.top3 .pos { color: #e09a5b; }
.lb-row .xp { color: var(--acc2); font-weight: 700; }
.help { max-width: 900px; }
.help h3 { margin: 18px 0 8px; }
.help p { color: #c3cbd1; line-height: 1.5; margin: 0; }
.keys-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; }
kbd { display: inline-block; min-width: 24px; padding: 2px 7px; margin-right: 4px; border: 1px solid var(--line2); border-bottom-width: 3px; border-radius: 6px; background: rgba(255, 255, 255, .05); font-family: var(--font); font-weight: 700; font-size: 13px; text-align: center; }
img.ins { vertical-align: middle; margin-right: 4px; }

/* modallar */
.modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 60; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); animation: fade .15s; }
@keyframes fade { from { opacity: 0; } }
.modal-box { width: min(460px, 94vw); max-height: 92vh; overflow-y: auto; padding: 24px; background: rgba(20, 25, 30, 0.92); }
.modal-box.wide { width: min(860px, 96vw); }
.modal-box h2 { margin: 0 0 8px; font-family: var(--disp); font-size: 40px; letter-spacing: 1px; font-weight: 500; }
.modal-box h3 { margin: 16px 0 8px; font-size: 14px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--acc2); }
.form-row { display: flex; gap: 12px; align-items: flex-end; }
.form-row > label { flex: 1; }
.form-row.chks { flex-wrap: wrap; gap: 4px 22px; }
.form-row.chks > label { flex: none; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.lo-label { font-size: 13px; color: var(--muted); margin: 10px 0 6px; text-transform: uppercase; letter-spacing: 1px; }
.map-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.map-card { border: 2px solid var(--line); border-radius: 10px; padding: 6px; cursor: pointer; background: rgba(255, 255, 255, .03); transition: all .15s; }
.map-card:hover { border-color: rgba(255, 138, 31, .5); }
.map-card.sel { border-color: var(--acc); background: rgba(255, 138, 31, .1); }
.map-card .mn { font-weight: 700; margin-top: 4px; }
.map-card .md { font-size: 11px; color: var(--muted); line-height: 1.2; }
.share-code { font-size: 20px; margin: 10px 0; }
.share-code b { font-family: var(--disp); font-size: 36px; letter-spacing: 6px; color: var(--acc2); font-weight: 500; vertical-align: middle; }
.share-btns { margin-top: 10px; }
.share-btns .btn { flex: 1; }

#toast { position: fixed; left: 50%; top: 20px; transform: translate(-50%, -10px); background: rgba(42, 20, 16, .95); border: 1px solid var(--red); color: #ffd0c8; padding: 11px 20px; border-radius: 10px; z-index: 100; opacity: 0; pointer-events: none; transition: all .25s; font-weight: 600; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.ok { background: rgba(19, 36, 15, .95); border-color: var(--good); color: #d8ffd0; }
#invites { position: fixed; right: 20px; bottom: 20px; z-index: 90; display: flex; flex-direction: column; gap: 10px; }
.invite-card { width: 320px; padding: 14px; animation: slideIn .3s ease-out; border-color: rgba(255, 138, 31, .5); }
@keyframes slideIn { from { opacity: 0; transform: translateX(40px); } }
.invite-card .t { font-weight: 700; font-size: 17px; }
.invite-card .t b { color: var(--acc2); }
.invite-card .row { margin-top: 10px; }
.invite-card .btn { flex: 1; }
.gold { color: var(--gold); }

/* ============ HUD ============ */
#hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; font-family: var(--font); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); }
#vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 45%, rgba(170, 0, 0, 0.75) 100%); opacity: 0; }
#hud.wolf-mode #vignette { opacity: 0.25 !important; background: radial-gradient(ellipse at center, transparent 50%, rgba(120, 30, 0, 0.8) 100%); }
#crosshair { position: absolute; left: 50%; top: 50%; --gap: 10px; transition: opacity .1s; }
#crosshair, #crosshair-demo { --len: 9px; --th: 2px; --col: #fff; }
#crosshair i, #crosshair-demo i { position: absolute; background: var(--col); box-shadow: 0 0 2px #000; }
#crosshair .t, #crosshair .b, #crosshair-demo .t, #crosshair-demo .b { width: var(--th); height: var(--len); left: calc(var(--th) / -2); }
#crosshair .l, #crosshair .r, #crosshair-demo .l, #crosshair-demo .r { height: var(--th); width: var(--len); top: calc(var(--th) / -2); }
#crosshair .t, #crosshair-demo .t { top: calc(-1 * var(--gap) - var(--len)); }
#crosshair .b, #crosshair-demo .b { top: var(--gap); }
#crosshair .l, #crosshair-demo .l { left: calc(-1 * var(--gap) - var(--len)); }
#crosshair .r, #crosshair-demo .r { left: var(--gap); }
#crosshair .dot, #crosshair-demo .dot { width: var(--th); height: var(--th); left: calc(var(--th) / -2); top: calc(var(--th) / -2); }
#crosshair.nodot .dot, #crosshair-demo.nodot .dot { display: none; }
#hud.wolf-mode #crosshair i { background: #ffb35c; }
#hitmarker { position: absolute; left: 50%; top: 50%; opacity: 0; }
#hitmarker i { position: absolute; width: 12px; height: 2px; background: #fff; }
#hitmarker i:nth-child(1) { transform: translate(5px, 5px) rotate(45deg); }
#hitmarker i:nth-child(2) { transform: translate(-17px, 5px) rotate(-45deg); }
#hitmarker i:nth-child(3) { transform: translate(5px, -7px) rotate(-45deg); }
#hitmarker i:nth-child(4) { transform: translate(-17px, -7px) rotate(45deg); }
#hitmarker.head i { background: #ff3b30; }
.dmg-num { position: absolute; color: #fff; font-weight: 700; font-size: 20px; animation: dmgUp .9s ease-out forwards; }
.dmg-num.head { color: #ff4b3a; font-size: 26px; }
@keyframes dmgUp { from { transform: translate(-50%, 0); opacity: 1; } to { transform: translate(-50%, -50px); opacity: 0; } }
#dmg-dirs { position: absolute; left: 50%; top: 50%; }
.dmg-ind { position: absolute; left: -60px; top: -60px; width: 120px; height: 120px; }
.dmg-ind::before { content: ''; position: absolute; left: 40px; top: -40px; width: 40px; height: 18px; background: radial-gradient(ellipse at bottom, rgba(255, 40, 20, 0.95), transparent 70%); border-radius: 50% 50% 0 0; }
#center-msg { position: absolute; left: 0; right: 0; top: 30%; text-align: center; font-family: var(--disp); font-size: 40px; letter-spacing: 2px; opacity: 0; transition: opacity .3s; }
#center-msg.kill { color: #fff; }
#out-warn { position: absolute; left: 0; right: 0; top: 16%; text-align: center; font-family: var(--disp); font-size: 30px; letter-spacing: 2px; color: #ffcc33; text-shadow: 0 2px 8px #000; pointer-events: none; line-height: 1.1; }
#out-warn b { display: block; font-size: 72px; }
#out-warn small { display: block; font-size: 18px; letter-spacing: 1px; color: #eee; }
#out-warn.crit { color: #ff3b30; animation: owPulse .5s ease-in-out infinite alternate; }
@keyframes owPulse { from { opacity: 1; } to { opacity: .55; } }
#center-msg.streak { color: var(--acc); font-size: 56px; }
#center-msg.wolf { color: #ff7a2a; font-size: 64px; }
#center-msg.info { font-size: 28px; color: #ddd; }
#xp-pops { position: absolute; left: 50%; top: 38%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.xp-pop { color: var(--acc2); font-weight: 700; font-size: 22px; animation: xpUp 2.2s ease-out forwards; white-space: nowrap; }
@keyframes xpUp { 0% { opacity: 0; transform: translateY(12px) scale(0.8); } 15% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-20px); } }
#reload-txt { position: absolute; left: 50%; top: 58%; transform: translateX(-50%); font-weight: 700; letter-spacing: 2px; color: #fff; padding: 2px 10px; --p: 0%; background: linear-gradient(90deg, rgba(255, 138, 31, 0.55) var(--p), rgba(0, 0, 0, 0.4) var(--p)); border-radius: 3px; font-size: 14px; }
#spawnprot { position: absolute; left: 50%; top: 62%; transform: translateX(-50%); color: #9fe0ff; font-weight: 700; letter-spacing: 2px; font-size: 14px; }
#scorebar { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); display: flex; align-items: stretch; gap: 4px; }
.sb-side { display: flex; align-items: center; gap: 10px; padding: 4px 14px; font-weight: 700; font-size: 15px; min-width: 190px; }
.sb-side b { font-family: var(--disp); font-size: 38px; line-height: 1; font-weight: 500; }
.sb-side.r { background: linear-gradient(90deg, transparent, rgba(180, 40, 30, 0.75)); justify-content: flex-end; border-radius: 8px 0 0 8px; }
.sb-side.b { background: linear-gradient(270deg, transparent, rgba(30, 90, 180, 0.75)); border-radius: 0 8px 8px 0; }
#hud[data-mode=ffa] .sb-side.r { background: linear-gradient(90deg, transparent, rgba(255, 138, 31, 0.6)); }
#hud[data-mode=ffa] .sb-side.b { background: linear-gradient(270deg, transparent, rgba(120, 120, 120, 0.6)); }
.sb-mid { background: rgba(0, 0, 0, 0.65); padding: 2px 16px; text-align: center; }
#timer { font-family: var(--disp); font-size: 34px; line-height: 1.1; }
#score-limit { font-size: 11px; color: var(--muted); text-transform: uppercase; }
#map-name { position: absolute; top: 64px; left: 50%; transform: translateX(-50%); font-size: 12px; color: var(--muted); letter-spacing: 2px; text-transform: uppercase; }
#mm-wrap { position: absolute; left: 16px; top: 16px; }
#minimap { display: block; }
#fps { font-size: 12px; color: var(--muted); text-align: center; margin-top: 2px; }
#killfeed { position: absolute; right: 16px; top: 16px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.feed-item { background: rgba(0, 0, 0, 0.5); padding: 4px 10px; border-radius: 6px; font-weight: 700; font-size: 15px; transition: opacity 1s; display: flex; align-items: center; }
.feed-item > div { display: flex; align-items: center; gap: 4px; }
.feed-item:has(.mine) { border: 1px solid rgba(255, 138, 31, 0.8); }
.feed-item.fade { opacity: 0; }
.kf-w { color: #ddd; font-size: 12px; background: rgba(255, 255, 255, 0.12); padding: 1px 5px; border-radius: 3px; margin: 0 4px; }
.kf-icon { height: 22px; margin: 0 6px; }
.kf-h { color: #ff4b3a; margin-right: 4px; font-size: 18px; }
#chat-wrap { position: absolute; left: 16px; bottom: 150px; width: 420px; }
.chat-line { font-size: 15px; padding: 1px 0; transition: opacity 1.5s; }
.chat-line.fade { opacity: 0; }
.chat-line .sys { color: #ffd27a; }
#chat-input { pointer-events: auto; background: rgba(0, 0, 0, 0.7); margin-top: 4px; }
#hp-box { position: absolute; left: 16px; bottom: 16px; width: 300px; background: linear-gradient(90deg, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.1)); padding: 10px 14px; border-left: 3px solid var(--acc); border-radius: 0 8px 8px 0; }
.hp-row { display: flex; align-items: center; gap: 10px; }
.hp-ic { color: var(--good); font-size: 26px; }
#hp-val { font-family: var(--disp); font-size: 46px; line-height: 1; }
.bar { height: 7px; background: rgba(255, 255, 255, 0.12); border-radius: 3px; overflow: hidden; margin-top: 4px; }
#hp-bar { height: 100%; background: linear-gradient(90deg, #4fbf4f, #9cf09c); transition: width .15s; }
#hp-bar.low { background: linear-gradient(90deg, #c22, #f55); }
#wolf-box { margin-top: 8px; }
.bar.wolf { height: 6px; }
#wolf-bar { height: 100%; background: linear-gradient(90deg, #7a2f0c, #ff8a1f); }
#wolf-txt { font-size: 13px; font-weight: 700; color: #ffb27a; margin-top: 2px; letter-spacing: 1px; }
#wolf-box.ready #wolf-txt { color: #fff; animation: pulse 0.8s infinite alternate; }
#wolf-box.ready #wolf-bar { box-shadow: 0 0 12px #ff8a1f; }
@keyframes pulse { from { opacity: 0.6; } to { opacity: 1; text-shadow: 0 0 10px #ff8a1f; } }
#ammo-box { position: absolute; right: 16px; bottom: 16px; text-align: right; background: linear-gradient(270deg, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.1)); padding: 10px 14px; border-right: 3px solid var(--acc); min-width: 260px; border-radius: 8px 0 0 8px; }
#weapon-name { font-weight: 700; color: var(--acc2); letter-spacing: 1px; }
.ammo { font-family: var(--disp); line-height: 1; }
#ammo-mag { font-size: 52px; }
#ammo-mag.low { color: var(--red); }
#ammo-res { font-size: 26px; color: var(--muted); margin-left: 6px; }
#slots { display: flex; gap: 4px; justify-content: flex-end; margin-top: 4px; }
#slots .slot.empty { opacity: .35; }
#slots .slot.empty .sn { filter: grayscale(1); }
.slot { font-size: 12px; padding: 2px 8px; background: rgba(255, 255, 255, 0.08); border-radius: 4px; color: var(--muted); font-weight: 700; display: flex; align-items: center; opacity: .6; }
.slot img { height: 18px; display: block; }
.slot .k { color: var(--acc2); margin-right: 6px; }
.slot.active { background: rgba(255, 138, 31, 0.35); color: #fff; opacity: 1; }
#death-screen { position: absolute; left: 0; right: 0; top: 60%; text-align: center; background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.7), transparent); padding: 14px; }
.ds-title { font-family: var(--disp); font-size: 54px; color: var(--red); line-height: 1; letter-spacing: 3px; }
#death-by { font-size: 20px; font-weight: 600; margin-top: 6px; }
#death-timer { color: var(--muted); margin-top: 6px; }
#scoreboard { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(900px, 94vw); background: rgba(10, 12, 14, 0.92); border: 1px solid var(--line); border-top: 3px solid var(--acc); border-radius: 10px; padding: 16px; display: flex; flex-wrap: wrap; gap: 14px; }
.sb-title { width: 100%; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.sb-team { flex: 1; min-width: 300px; }
.sb-th { font-family: var(--disp); font-size: 28px; padding: 2px 8px; display: flex; justify-content: space-between; border-radius: 6px; }
.sb-r .sb-th { background: rgba(180, 40, 30, 0.5); }
.sb-b .sb-th { background: rgba(30, 90, 180, 0.5); }
#scoreboard table, #end-table { width: 100%; border-collapse: collapse; font-size: 15px; }
#scoreboard th, #end-table th { text-align: left; color: var(--muted); font-size: 12px; padding: 4px; text-transform: uppercase; }
#scoreboard td, #end-table td { padding: 3px 4px; border-bottom: 1px solid var(--line); }
#scoreboard tr.me, #end-table tr.me { background: rgba(255, 138, 31, 0.18); }
#scoreboard tr.dead { opacity: 0.5; }
#scoreboard td.nm { font-weight: 700; }
#rankup { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); text-align: center; }
#rankup.show { animation: ruIn 4s ease-out forwards; }
.ru-t { font-family: var(--disp); font-size: 64px; color: var(--acc); letter-spacing: 6px; line-height: 1; text-shadow: 0 0 20px rgba(255, 138, 31, .8); }
.ru-img { filter: drop-shadow(0 0 16px rgba(255, 200, 80, .8)); }
.ru-n { font-size: 30px; font-weight: 700; }
@keyframes ruIn { 0% { opacity: 0; transform: translateX(-50%) scale(2); } 10% { opacity: 1; transform: translateX(-50%) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; } }

#pause { position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(3px); }
#pause-overlay-click { position: absolute; inset: 0; cursor: pointer; }
.pause-box { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px; min-width: 340px; text-align: center; }
.pause-box .logo { justify-content: center; margin-bottom: 4px; }
#end-screen { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.end-box { width: min(780px, 94vw); max-height: 90vh; overflow-y: auto; padding: 22px; text-align: center; }
#end-title { font-family: var(--disp); font-size: 84px; line-height: 1; letter-spacing: 6px; }
#end-title.win { color: var(--acc); text-shadow: 0 0 30px rgba(255, 138, 31, .6); }
#end-title.lose { color: #aab; }
#end-score { font-size: 24px; font-weight: 700; margin: 6px 0 14px; }
#end-table { text-align: left; }
#end-xp { margin-top: 16px; font-size: 18px; }
#end-xp .xpline { margin-top: 6px; font-size: 15px; }
#end-next { margin-top: 12px; color: var(--muted); }

@media (max-width: 1250px) {
  .play-grid, .inv-grid { grid-template-columns: 1fr; overflow-y: auto; }
  .hero { min-height: 520px; }
  .side-col { grid-template-rows: auto auto; }
  .login-hero { display: none; }
}

/* öldürme işareti, dönüşüm parlaması */
#hitmarker.kill i { background: #ff2a1a; width: 16px; height: 3px; box-shadow: 0 0 6px #ff2a1a; }
#killmark { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; color: #fff; opacity: 0; pointer-events: none; filter: drop-shadow(0 0 6px rgba(0,0,0,.8)); }
#killmark.head { color: #ff3b2a; filter: drop-shadow(0 0 10px rgba(255,40,20,.9)); }
#killmark.show { animation: killIn .9s ease-out forwards; }
@keyframes killIn { 0% { opacity: 0; transform: scale(2.2); } 12% { opacity: 1; transform: scale(1); } 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.85) translateY(-14px); } }
#flash { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(255,220,180,.9), rgba(255,90,20,.6) 60%, rgba(120,0,0,.5)); opacity: 0; pointer-events: none; }
#flash.go { animation: flashGo .7s ease-out forwards; }
@keyframes flashGo { 0% { opacity: .95; } 100% { opacity: 0; } }
#flashbang { position: absolute; inset: 0; background: radial-gradient(ellipse at center, #fff 0%, #fdfdf8 55%, #eceee6 100%); opacity: 0; pointer-events: none; }
#hud.wolf-mode::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(90,20,0,.35)); mix-blend-mode: multiply; }
/* dürbün tipleri */
.slot img { height: 16px; }
/* envanter: yuvalar ve eklentiler */
.lslot { cursor: pointer; transition: all .15s; overflow: hidden; }
.lslot:hover { border-color: rgba(255,138,31,.6); }
.lslot.on { border-style: solid; border-color: var(--acc); background: rgba(255,138,31,.1); }
.lslot b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.seg.cats { grid-column: 1 / -1; display: flex; flex-wrap: wrap; }
.seg.cats button { flex: 1; }
.att-wrap { display: grid; gap: 8px; margin-top: 14px; }
.att-row { display: grid; grid-template-columns: 78px 1fr; gap: 8px; align-items: start; }
.att-l { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; padding-top: 6px; font-weight: 700; }
.att-opts { display: flex; flex-wrap: wrap; gap: 5px; }
.att { font-family: inherit; font-size: 13px; font-weight: 700; padding: 5px 9px; border-radius: 7px; border: 1px solid var(--line2); background: rgba(255,255,255,.04); color: #d4dbe0; cursor: pointer; transition: all .12s; }
.att:hover { border-color: var(--acc); color: #fff; }
.att.sel { background: rgba(255,138,31,.25); border-color: var(--acc); color: #fff; box-shadow: 0 0 0 1px rgba(255,138,31,.4); }
.att.buy { border-style: dashed; color: var(--muted); }
.att.locked { opacity: .45; }
.statbars em { font-style: normal; font-size: 10px; margin-left: 3px; }
.statbars em.up { color: var(--good); }
.statbars em.down { color: #ff8a7a; }
.statbars .sb { grid-template-columns: 74px 1fr 64px; }
.hero-loadout div { font-size: 14px; }
.hero-loadout .hk { display: inline-block; width: 18px; height: 18px; line-height: 18px; text-align: center; border-radius: 4px; background: rgba(255,138,31,.25); color: var(--acc2); font-size: 12px; }
.hero-loadout img { height: 18px; }
#nades { display: flex; gap: 8px; justify-content: flex-end; margin-top: 2px; font-weight: 700; font-size: 14px; }
#nades .nd kbd { font-size: 10px; padding: 0 4px; min-width: 0; margin-right: 3px; }
#nades .nd.off { opacity: .35; }

/* görevler, ödüller, nişangâh önizleme */
.missions-panel { padding-bottom: 10px; }
.mis { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 7px 9px; border-radius: 9px; background: rgba(255,255,255,.03); border: 1px solid var(--line); margin-bottom: 6px; }
.mis .mt { font-weight: 700; font-size: 14px; }
.mis .mr { font-size: 12px; color: var(--gold); font-weight: 700; text-align: right; }
.mis .mb { grid-column: 1 / 3; height: 5px; border-radius: 3px; background: rgba(0,0,0,.5); overflow: hidden; }
.mis .mb b { display: block; height: 100%; background: var(--accg); }
.mis.done { border-color: rgba(95,224,138,.5); background: rgba(95,224,138,.08); }
.mis.done .mb b { background: var(--good); }
#end-awards { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 4px 0 14px; }
.award { min-width: 140px; padding: 10px 12px; border-radius: 12px; background: linear-gradient(180deg, rgba(255,138,31,.18), rgba(255,138,31,.04)); border: 1px solid rgba(255,138,31,.4); }
.award .ai { font-size: 28px; line-height: 1; }
.award .at { font-family: var(--disp); font-size: 22px; color: var(--acc2); line-height: 1.1; }
.award .an { font-weight: 700; }
.award .av { font-size: 12px; color: var(--muted); }
.award.me { border-color: var(--gold); box-shadow: 0 0 20px rgba(255,210,94,.3); }
.ch-row { align-items: center; }
.ch-prev { width: 80px; height: 64px; border-radius: 8px; background: linear-gradient(135deg, #556070, #2a3038); position: relative; flex: none; }
#crosshair-demo { position: absolute; left: 50%; top: 50%; --gap: 6px; }
#zone-status { position: absolute; top: 84px; left: 50%; transform: translateX(-50%); padding: 4px 14px; border-radius: 6px; background: rgba(0,0,0,.55); font-weight: 700; letter-spacing: 2px; font-size: 14px; border: 1px solid rgba(255,255,255,.2); }
#zone-status.ours { color: #8fd0ff; border-color: rgba(74,163,255,.7); }
#zone-status.theirs { color: #ff9a8a; border-color: rgba(255,90,72,.7); }
#zone-status.contested { color: #ffd27a; border-color: #ffc84a; animation: pulse .5s infinite alternate; }

/* profil */
.prof-grid { display: grid; grid-template-columns: 1fr 380px; gap: 16px; height: 100%; min-height: 0; }
.prof-head { display: flex; gap: 16px; align-items: center; }
.pf-name { font-family: var(--disp); font-size: 44px; line-height: 1; }
.pf-rank { color: var(--acc2); font-weight: 700; font-size: 18px; }
.pf-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.pf-stats .stat { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 10px; }
.hist-row { display: grid; grid-template-columns: 70px 1fr 110px 80px 90px 90px; gap: 8px; align-items: center; padding: 7px 10px; border-bottom: 1px solid var(--line); font-size: 14px; }
.hist-row .res { font-weight: 700; }
.hist-row .res.w { color: var(--good); } .hist-row .res.l { color: #ff8a7a; }
.fr-row { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 8px; background: rgba(255,255,255,.03); }
.fr-row .nm { flex: 1; font-weight: 700; }
.fr-row .st { font-size: 12px; color: var(--muted); }
.fr-row .x { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 16px; }
.fr-row .x:hover { color: var(--red); }
.fr-row .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 6px var(--good); }
.fr-row .dot.ingame { background: var(--acc); box-shadow: 0 0 6px var(--acc); }

#use-bar { position: absolute; left: 50%; top: 64%; transform: translateX(-50%); width: 320px; text-align: center; font-weight: 700; letter-spacing: 2px; }
#use-bar .ub { height: 10px; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.3); border-radius: 5px; overflow: hidden; margin-top: 4px; }
#use-bar-f { height: 100%; width: 0; background: linear-gradient(90deg, #ff6a1a, #ffd27a); }
#bomb-carry { position: absolute; left: 16px; bottom: 132px; padding: 4px 10px; border-radius: 6px; background: rgba(255,90,20,.35); border: 1px solid #ff8a1f; font-weight: 700; font-size: 14px; animation: pulse .8s infinite alternate; }
#hos-hint { position: absolute; left: 50%; transform: translateX(-50%); bottom: 150px; padding: 5px 14px; border-radius: 6px; background: rgba(20,120,60,.45); border: 1px solid #35e07a; font-weight: 700; font-size: 15px; text-align: center; pointer-events: none; }
#timer.bomb { color: #ff3b2a; animation: pulse .4s infinite alternate; }

/* ================= WOLFTEAM TARZI LOBİ ================= */
#screen-lobby { background: linear-gradient(180deg, rgba(40,6,6,.85), rgba(8,6,6,.92)); }
.sidenav { background: linear-gradient(180deg, rgba(70,10,10,.92), rgba(16,6,6,.95)); border-right-color: rgba(255,60,40,.18); }
.lobby-top { background: linear-gradient(90deg, rgba(120,14,10,.55), rgba(40,6,6,.2)); margin: -18px -26px 12px; padding: 10px 26px; border-bottom: 1px solid rgba(255,80,60,.25); }
.btn.red { background: linear-gradient(180deg, #c8231a, #7c0d08); border-color: #ff5a48; color: #fff; text-shadow: 0 1px 2px #000; }
.btn.red:hover { filter: brightness(1.15); }
.clan-chain { font-family: var(--disp); font-size: 20px; letter-spacing: 1px; padding: 6px 14px; line-height: 1; }
.wt-grid { display: grid; grid-template-columns: 1fr 430px; grid-template-rows: minmax(0, 1fr) 232px; gap: 12px; height: 100%; min-height: 0; }
.wt-rooms { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.wt-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.2)); border-bottom: 1px solid var(--line); }
.wt-head.small { padding: 6px 10px; }
.wt-title { font-family: var(--disp); font-size: 24px; letter-spacing: 2px; line-height: 1; color: #fff; }
.wt-head.small .wt-title { font-size: 18px; }
.wt-table-wrap { flex: 1; overflow-y: auto; min-height: 0; }
.wt-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.wt-table thead th { position: sticky; top: 0; background: linear-gradient(180deg, #3a3d40, #232527); color: #dfe3e6; font-weight: 700; letter-spacing: 1px; padding: 7px 8px; text-align: left; font-size: 13px; border-right: 1px solid rgba(0,0,0,.4); z-index: 1; }
.wt-table td { padding: 7px 8px; border-bottom: 1px solid rgba(255,255,255,.05); color: #6fd06a; cursor: pointer; white-space: nowrap; }
.wt-table td.rn { color: #8cf08a; font-weight: 700; white-space: normal; }
.wt-table tr:nth-child(even) td { background: rgba(255,255,255,.02); }
.wt-table tr:hover td { background: rgba(255,138,31,.08); }
.wt-table tr.sel td { background: rgba(255,60,40,.22); color: #fff; }
.wt-table tr.full td, .wt-table tr.wait td { color: #7b8a7a; }
.wt-table tr.full td.rn, .wt-table tr.wait td.rn { color: #9aa79a; }
.wt-table td.empty { color: var(--muted); text-align: center; padding: 40px; cursor: default; }
.wt-actions { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--line); background: rgba(0,0,0,.25); flex-wrap: wrap; }
.wt-actions .spacer, .detail-actions .spacer { flex: 1; }
.wt-actions .code-join input { width: 110px; }
.wt-side { display: flex; flex-direction: column; gap: 12px; min-height: 0; grid-row: 1 / 2; overflow-y: auto; }
.wt-banner { position: relative; height: 230px; flex: none; overflow: hidden; }
.bn-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity .8s; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px 18px 46px; }
.bn-slide.on { opacity: 1; }
.bn-t { font-family: var(--disp); font-size: 34px; line-height: 1; color: #ffb35c; text-shadow: 0 2px 8px #000; letter-spacing: 1px; }
.bn-s { color: #f2e6d8; font-weight: 600; text-shadow: 0 1px 4px #000; }
.bn-dots { position: absolute; top: 0; right: 0; display: flex; }
.bn-dots button { background: rgba(0,0,0,.6); color: #bbb; border: 0; border-left: 1px solid rgba(255,255,255,.1); padding: 5px 12px; font-weight: 700; cursor: pointer; font-family: inherit; }
.bn-dots button.on { background: linear-gradient(180deg, #c8231a, #7c0d08); color: #fff; }
.wt-feat { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex: none; }
.feat-card { position: relative; background: linear-gradient(180deg, #1a1d20, #0d0f10); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 8px; cursor: pointer; transition: all .15s; overflow: hidden; }
.feat-card:hover { border-color: #ff5a48; transform: translateY(-2px); }
.feat-card img { width: 100%; height: 86px; object-fit: contain; display: block; }
.feat-card .best { position: absolute; top: 6px; right: 6px; font-size: 11px; font-weight: 700; color: #4ab8ff; letter-spacing: 1px; }
.fc-n { font-weight: 700; font-size: 14px; }
.fc-p { color: var(--gold); font-family: var(--disp); font-size: 20px; line-height: 1; }
.feat-card .btn { position: absolute; right: 8px; bottom: 8px; }
.wt-chat { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.wt-chat-tabs { display: flex; gap: 2px; padding: 6px 8px 0; border-bottom: 1px solid var(--line); }
.wt-chat-tabs button { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-bottom: 0; color: var(--muted); padding: 5px 16px; font-weight: 700; cursor: pointer; border-radius: 6px 6px 0 0; font-family: inherit; letter-spacing: 1px; }
.wt-chat-tabs button.active { color: #ffd27a; background: rgba(255,200,80,.1); }
.wt-chat-log { flex: 1; overflow-y: auto; padding: 6px 10px; font-size: 14px; min-height: 0; background: rgba(0,0,0,.25); }
.lc { padding: 2px 0; }
.lc .lt { color: #6a737a; font-size: 12px; }
.lc.shout { background: rgba(255,120,30,.1); border-left: 3px solid #ff8a1f; padding-left: 6px; }
.lc.clan { color: #b8f0b0; }
.lc.sys { color: #ffd27a; }
.shout { color: #ff9a3a; } .clanm { color: #7ae07a; }
.ctag { color: #ffb35c; font-weight: 700; margin-right: 3px; }
.wt-chat-in { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--line); }
.wt-chat-in input { margin: 0; }
.wt-users { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.wt-users .online-list { flex: 1; overflow-y: auto; padding: 6px; }
.on-row .btn.small { padding: 2px 6px; }
/* klan */
.clan-grid { display: grid; grid-template-columns: 1fr 400px; gap: 16px; height: 100%; min-height: 0; }
.clan-badge { display: flex; align-items: center; justify-content: center; font-family: var(--disp); color: #fff; border-radius: 12px; flex: none; background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--cc) 80%, #fff), var(--cc) 45%, color-mix(in srgb, var(--cc) 40%, #000)); border: 2px solid rgba(255,255,255,.35); box-shadow: 0 4px 14px rgba(0,0,0,.5), inset 0 -4px 10px rgba(0,0,0,.35); text-shadow: 0 2px 4px rgba(0,0,0,.7); letter-spacing: 1px; }
.clan-head { display: flex; gap: 16px; align-items: center; }
.clan-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-bottom: 1px solid var(--line); }
.clan-row.me { background: rgba(255,138,31,.12); border-radius: 8px; }
.clan-row .cr-n { flex: 1; }
.clan-row .pos { font-family: var(--disp); font-size: 22px; color: var(--muted); width: 26px; }
.clan-row .xp { color: var(--acc2); font-weight: 700; }
.clan-members { display: grid; gap: 4px; }
.role-l { color: var(--gold) !important; font-weight: 700; } .role-o { color: #8fd0ff !important; }
.wt-rooms { grid-column: 1; grid-row: 1; } .wt-side { grid-column: 2; grid-row: 1; } .wt-chat { grid-column: 1; grid-row: 2; } .wt-users { grid-column: 2; grid-row: 2; }
.wt-side > * { flex: none; }
.wt-side .missions-panel { overflow: visible; }

/* ---------- doğuş silah seçimi ---------- */
#pick { position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); z-index: 30; text-align: center; pointer-events: auto; animation: pkIn .25s ease-out; }
@keyframes pkIn { from { opacity: 0; transform: translate(-50%, 18px); } to { opacity: 1; transform: translate(-50%, 0); } }
.pk-title { font: 700 22px Rajdhani, sans-serif; letter-spacing: 4px; color: #ffcf6e; text-shadow: 0 2px 8px #000; margin-bottom: 10px; }
.pk-row { display: flex; gap: 12px; justify-content: center; }
.pk-card { position: relative; width: 210px; padding: 10px 12px 12px; background: linear-gradient(180deg, rgba(22,28,34,.92), rgba(10,13,16,.92)); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; cursor: pointer; transition: transform .12s, border-color .12s, box-shadow .12s; }
.pk-card:hover { transform: translateY(-3px); border-color: rgba(255,207,110,.6); }
.pk-card.sel { border-color: #ffb547; box-shadow: 0 0 0 1px #ffb547, 0 0 22px rgba(255,170,60,.35); }
.pk-card img { width: 100%; height: 66px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0,0,0,.6)); }
.pk-k { position: absolute; left: 8px; top: 8px; width: 22px; height: 22px; border-radius: 4px; background: #ffb547; color: #111; font: 700 14px/22px Rajdhani, sans-serif; }
.pk-cat { font: 700 12px Rajdhani, sans-serif; letter-spacing: 2px; color: #9fb0bf; }
.pk-nm { font: 700 17px Rajdhani, sans-serif; color: #fff; margin: 2px 0 6px; }
.pk-stats { display: grid; grid-template-columns: 52px 1fr; gap: 3px 6px; align-items: center; font: 600 11px Rajdhani, sans-serif; color: #aab; text-align: left; }
.pk-st { height: 5px; background: rgba(255,255,255,.1); border-radius: 3px; overflow: hidden; }
.pk-st i { display: block; height: 100%; background: linear-gradient(90deg, #ff9d2e, #ffd36e); }
.pk-hint { margin-top: 10px; font: 600 13px Rajdhani, sans-serif; color: #dde; text-shadow: 0 1px 4px #000; }
.pk-hint kbd { background: #222a; border: 1px solid #fff4; border-radius: 3px; padding: 0 5px; }
.pk-time { width: 360px; height: 3px; margin: 8px auto 0; background: rgba(255,255,255,.12); border-radius: 2px; overflow: hidden; }
.pk-time i { display: block; height: 100%; width: 100%; background: #ffb547; }
@media (max-width: 900px) { .pk-card { width: 150px; } .pk-stats { display: none; } }
/* ---------- sunucu seçimi ---------- */
#screen-servers { display: flex; align-items: center; justify-content: center; padding: 24px 16px; overflow-y: auto; }
#screen-servers.hidden { display: none; }
.srv-wrap { width: min(1180px, 100%); }
.srv-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; gap: 12px; flex-wrap: wrap; }
.srv-me { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: rgba(10,14,18,.7); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; }
.srv-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; }
@media (max-width: 900px) { .srv-grid { grid-template-columns: 1fr; } }
.srv-box { padding: 14px 16px; border-radius: 10px; }
.srv-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.08); padding-bottom: 8px; }
.srv-table, .cw-table { width: 100%; border-collapse: collapse; }
.srv-table th, .cw-table th { font: 700 11px Rajdhani, sans-serif; letter-spacing: 1.5px; color: #8a97a5; text-align: left; padding: 6px 8px; }
.srv-table td { padding: 12px 8px; border-top: 1px solid rgba(255,255,255,.06); vertical-align: middle; }
.srv-row { cursor: pointer; transition: background .12s; }
.srv-row:hover { background: rgba(255,170,60,.07); }
.srv-row.clan td.sn b { color: #ffb35c; }
.srv-row.locked { opacity: .6; }
.srv-table td.sn { display: flex; align-items: center; gap: 12px; }
.srv-table .si { width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; font-size: 20px; background: linear-gradient(180deg, #23303c, #141b22); border: 1px solid rgba(255,255,255,.1); }
.srv-row.clan .si { background: linear-gradient(180deg, #4a2a14, #24140b); border-color: rgba(255,170,60,.4); }
.srv-table td.sn b { font: 700 18px Rajdhani, sans-serif; }
.srv-table td.load { min-width: 190px; }
.lbar { display: inline-block; width: 90px; height: 8px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; vertical-align: middle; margin-right: 6px; }
.lbar i { display: block; height: 100%; border-radius: 4px; }
.lbar.low i { background: #4fd37a; } .lbar.mid i { background: #e6d36a; } .lbar.high i { background: #ff9a3c; } .lbar.full i { background: #ff4b3e; }
.lt { font: 700 12px Rajdhani, sans-serif; letter-spacing: 1px; }
.lt.low { color: #4fd37a; } .lt.mid { color: #e6d36a; } .lt.high { color: #ff9a3c; } .lt.full { color: #ff4b3e; }
.srv-foot { display: flex; gap: 8px; margin-top: 12px; }
.srv-foot .spacer { flex: 1; }
.cw-table td { padding: 6px 8px; border-top: 1px solid rgba(255,255,255,.05); font: 600 14px Rajdhani, sans-serif; }
.cw-table td:nth-child(2) { display: flex; align-items: center; gap: 8px; }
.cw-table tr.me td { background: rgba(255,170,60,.1); }
.cw-table .pos { font-weight: 700; color: #8a97a5; width: 26px; }
.cw-table .pos.p1 { color: #ffd76a; } .cw-table .pos.p2 { color: #d6dde4; } .cw-table .pos.p3 { color: #d99a5c; }
.cw-table .pts { color: #ffb35c; font-weight: 700; }
.cw-table .w { color: #4fd37a; } .cw-table .l { color: #ff6a5c; }
.cw-note { margin-top: 10px; line-height: 1.4; }
.srv-chip { display: flex; align-items: center; gap: 6px; }
body.cw-srv .srv-chip { border-color: rgba(255,170,60,.6); color: #ffb35c; }
.cw-vs { font: 700 12px Rajdhani, sans-serif; color: #ffb35c; margin-left: 4px; }
.end-cw { font: 700 16px Rajdhani, sans-serif; color: #ffb35c; margin-bottom: 8px; padding: 6px 10px; border: 1px solid rgba(255,170,60,.35); border-radius: 6px; background: rgba(255,140,40,.08); }

/* ---------- bayrak kapmaca HUD ---------- */
#ctf-status { position: absolute; top: 84px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; pointer-events: none; }
#ctf-status.hidden { display: none; }
#ctf-status .cf { display: flex; align-items: center; gap: 7px; padding: 4px 12px; border-radius: 6px; background: rgba(0,0,0,.55); font: 700 13px Rajdhani, sans-serif; letter-spacing: 1.5px; border: 1px solid rgba(255,255,255,.18); color: #eee; }
#ctf-status .cf i { width: 10px; height: 14px; clip-path: polygon(0 0, 100% 30%, 0 60%); }
#ctf-status .cf-r i { background: #ff4a3a; } #ctf-status .cf-b i { background: #3a9aff; }
#ctf-status .cf-r { border-color: rgba(255,74,58,.6); } #ctf-status .cf-b { border-color: rgba(58,154,255,.6); }
#ctf-status .cf.st1 { animation: pulse .45s infinite alternate; color: #ffd27a; }
#ctf-status .cf.st2 { color: #ffb35c; }
#ctf-status .cf em { font-style: normal; color: #9aa; font-weight: 600; }
#center-msg.bad { color: #ff6a5c; text-shadow: 0 0 18px rgba(255,60,40,.6), 0 2px 6px #000; }
#hud.carrying::after { content: 'BAYRAK SENDE — ÜSSÜNE GÖTÜR!'; position: absolute; left: 50%; top: 116px; transform: translateX(-50%); font: 700 15px Rajdhani, sans-serif; letter-spacing: 3px; color: #ffd27a; text-shadow: 0 0 10px rgba(255,180,60,.7); animation: pulse .6s infinite alternate; }
#hud.carrying { box-shadow: inset 0 0 120px rgba(255,180,60,.25); }
/* ---------- yeniden bağlanma ---------- */
#reconnect { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; align-items: center; gap: 10px; padding: 9px 18px; border-radius: 8px; background: rgba(12,16,20,.92); border: 1px solid rgba(255,180,70,.5); color: #ffd27a; font: 700 15px Rajdhani, sans-serif; letter-spacing: 1px; box-shadow: 0 6px 24px rgba(0,0,0,.5); pointer-events: none; }
#reconnect.hidden { display: none; }
.rc-spin { width: 16px; height: 16px; border-radius: 50%; border: 3px solid rgba(255,210,122,.25); border-top-color: #ffd27a; animation: rcspin .8s linear infinite; }
@keyframes rcspin { to { transform: rotate(360deg); } }

#ads-dot { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: #ff3b2a; box-shadow: 0 0 6px #ff3b2a, 0 0 0 1px rgba(0,0,0,.6); opacity: 0; transition: opacity .08s; pointer-events: none; }

/* ---------- araç HUD ---------- */
#veh-hud { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); width: min(520px, 92vw); padding: 10px 14px; background: linear-gradient(180deg, rgba(14,18,16,.82), rgba(8,10,9,.9)); border: 1px solid rgba(160,200,140,.35); border-radius: 8px; font: 600 13px Rajdhani, sans-serif; color: #dfe8d6; pointer-events: none; }
#veh-hud.hidden { display: none; }
#veh-hud .vh-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 16px; letter-spacing: 1.5px; }
#veh-hud .vh-top b { color: #b8e08a; }
#veh-hud .vh-bar { position: relative; height: 12px; margin: 6px 0; background: rgba(255,255,255,.1); border-radius: 3px; overflow: hidden; }
#veh-hud .vh-bar i { display: block; height: 100%; background: linear-gradient(90deg, #6fcf5a, #b8e08a); transition: width .2s; }
#veh-hud .vh-bar.low i { background: linear-gradient(90deg, #ff4a3a, #ff9a5a); }
#veh-hud .vh-bar span { position: absolute; right: 6px; top: -2px; font-size: 12px; color: #fff; text-shadow: 0 1px 2px #000; }
#veh-hud .vh-stats { display: flex; gap: 16px; font-size: 15px; color: #fff; letter-spacing: 1px; }
#veh-hud .vh-heat { position: relative; margin-top: 6px; height: 16px; background: rgba(255,255,255,.08); border-radius: 3px; overflow: hidden; }
#veh-hud .vh-heat i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #ffb547, #ff4a2a); }
#veh-hud .vh-heat span { position: relative; z-index: 1; padding-left: 6px; font-size: 12px; }
#veh-hud .vh-heat.over { animation: pulse .3s infinite alternate; }
#veh-hud .vh-seats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px 8px; margin-top: 8px; font-size: 11.5px; color: #9aa596; }
#veh-hud .vh-seats .occ { color: #d5dccd; } #veh-hud .vh-seats .me { color: #ffd27a; }
#veh-hud .vh-seats kbd, #veh-prompt kbd { background: #222a; border: 1px solid #fff4; border-radius: 3px; padding: 0 4px; margin-right: 4px; font-size: 11px; }
#veh-hud .vh-keys { margin-top: 6px; font-size: 11.5px; color: #8f9a8a; }
#veh-prompt { position: absolute; left: 50%; top: 62%; transform: translateX(-50%); padding: 6px 14px; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.2); border-radius: 6px; font: 700 15px Rajdhani, sans-serif; color: #fff; letter-spacing: 1px; pointer-events: none; }
#veh-prompt.hidden { display: none; }
#hud.in-veh #ammo-box, #hud.in-veh #slots { display: none; }

#veh-hud .vh-heli { display: flex; gap: 12px; align-items: center; margin-top: 8px; }
#veh-hud .vh-ai { position: relative; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(220,230,210,.6); box-shadow: inset 0 0 8px #000; flex: none; }
#veh-hud .vh-hz { position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; background: linear-gradient(180deg, #3d7fc4 0 50%, #7a5a32 50% 100%); }
#veh-hud .vh-hz::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: #fff; }
#veh-hud .vh-ai i { position: absolute; left: 50%; top: 50%; width: 34px; height: 3px; margin: -1px 0 0 -17px; background: #ffd27a; box-shadow: 0 0 0 1px #000; }
#veh-hud .vh-col { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10px; color: #9aa596; }
#veh-hud .vh-col b { position: relative; width: 14px; height: 52px; border: 1px solid rgba(255,255,255,.4); border-radius: 2px; }
#veh-hud .vh-col i { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(0deg, #6fcf5a, #ffd27a); }
#veh-hud .vh-warn { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: #ffd27a; }
#veh-hud .vh-warn em { font-style: normal; color: #ff5a48; font-weight: 700; animation: pulse .35s infinite alternate; }

/* ================= GİRİŞ PORTALI ================= */
#screen-login.lp { display: block; overflow-y: auto; overflow-x: hidden; padding: 0; align-items: stretch; justify-content: flex-start; }
#screen-login.lp.hidden { display: none; }
.lp-head { position: sticky; top: 0; z-index: 20; background: linear-gradient(180deg, rgba(10,12,14,.96), rgba(10,12,14,.86)); border-bottom: 1px solid rgba(255,140,40,.25); backdrop-filter: blur(6px); }
.lp-head-in { max-width: 1320px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 22px; }
.lp-nav { display: flex; gap: 4px; flex: 1; }
.lp-nav a { padding: 8px 14px; border-radius: 6px; color: #c9cfd6; text-decoration: none; font: 700 15px var(--disp, Rajdhani), sans-serif; letter-spacing: 1px; text-transform: uppercase; transition: background .15s, color .15s; }
.lp-nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.lp-nav a.on { color: #ffb547; box-shadow: inset 0 -2px 0 #ff8a1f; }
.lp-status { display: flex; align-items: center; gap: 7px; font: 600 14px Rajdhani, sans-serif; color: #b9c2ca; white-space: nowrap; }
.lp-status b { color: #fff; font-size: 16px; }
.lp-dot { width: 9px; height: 9px; border-radius: 50%; background: #4fd37a; box-shadow: 0 0 8px #4fd37a; animation: pulse 1.2s infinite alternate; }
.lp-cta { white-space: nowrap; }
.lp-wrap { max-width: 1320px; margin: 0 auto; padding: 18px 20px 30px; }
.lp-ranks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px; }
.lp-card, .lp-box { background: linear-gradient(180deg, rgba(22,26,30,.9), rgba(12,14,17,.92)); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 12px 14px; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.lp-ct { display: flex; align-items: baseline; justify-content: space-between; font: 700 15px Rajdhani, sans-serif; letter-spacing: 1.5px; color: #ffb547; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.07); }
.lp-ct span { font-size: 11px; color: #7f8a95; letter-spacing: 1px; }
.lp-list { display: flex; flex-direction: column; gap: 3px; max-height: 248px; overflow-y: auto; }
.lp-row { display: flex; align-items: center; gap: 9px; padding: 4px 6px; border-radius: 6px; font: 600 13.5px Rajdhani, sans-serif; }
.lp-row:hover { background: rgba(255,255,255,.04); }
.lp-row .pos { width: 20px; text-align: center; color: #8a97a5; font-weight: 700; }
.lp-row.top1 .pos { color: #ffd76a; } .lp-row.top2 .pos { color: #d6dde4; } .lp-row.top3 .pos { color: #d99a5c; }
.lp-row.top1 { background: linear-gradient(90deg, rgba(255,215,106,.12), transparent); }
.lp-row .nm { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.1; }
.lp-row .nm b { color: #eef2f5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-row .nm small { color: #7f8a95; font-size: 11px; }
.lp-row .val { color: #ffb547; font-weight: 700; white-space: nowrap; }
.lp-grid { display: grid; grid-template-columns: 1fr 360px; gap: 16px; align-items: start; }
.lp-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.lp-hero { position: relative; height: 300px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.lp-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity .8s; display: flex; align-items: center; padding: 0 38px; }
.lp-slide.on { opacity: 1; }
.lp-slide h2 { margin: 0; font: 700 52px Rajdhani, sans-serif; letter-spacing: 3px; color: #fff; text-shadow: 0 4px 18px rgba(0,0,0,.7); }
.lp-slide p { margin: 6px 0 16px; max-width: 460px; font: 600 17px Rajdhani, sans-serif; color: #e6e9ec; text-shadow: 0 2px 8px #000; }
.lp-dots { position: absolute; right: 18px; bottom: 14px; display: flex; gap: 7px; }
.lp-dots i, .mk-h-dots i { width: 26px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.3); cursor: pointer; }
.lp-dots i.on, .mk-h-dots i.on { background: #ff8a1f; }
.lp-news, .lp-guide { background: linear-gradient(180deg, rgba(22,26,30,.9), rgba(12,14,17,.92)); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 14px 16px; }
.lp-sec-t { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; font: 700 18px Rajdhani, sans-serif; letter-spacing: 2px; color: #fff; }
.lp-n { display: flex; gap: 14px; padding: 12px 4px; border-top: 1px solid rgba(255,255,255,.06); }
.lp-n:first-child { border-top: none; }
.lp-n img { width: 160px; height: 94px; object-fit: cover; border-radius: 8px; flex: none; border: 1px solid rgba(255,255,255,.1); }
.lp-n-m { display: flex; gap: 10px; align-items: center; font: 600 12px Rajdhani, sans-serif; color: #7f8a95; }
.lp-tag { padding: 1px 8px; border-radius: 4px; font-weight: 700; letter-spacing: 1px; color: #111; }
.lp-tag.t-u { background: #ffb547; } .lp-tag.t-e { background: #5fd38a; } .lp-tag.t-d { background: #6fb2ff; }
.lp-n h3 { margin: 4px 0 3px; font: 700 18px Rajdhani, sans-serif; color: #fff; }
.lp-n p { margin: 0; font: 500 14px/1.4 Rajdhani, sans-serif; color: #b6bec6; }
.lp-guide-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.lp-guide-grid div { padding: 10px; border-radius: 8px; background: rgba(255,255,255,.04); display: flex; flex-direction: column; gap: 3px; font: 500 13px Rajdhani, sans-serif; color: #b6bec6; }
.lp-guide-grid b { color: #ffb547; font-size: 15px; }
.lp-keys { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; font: 600 13px Rajdhani, sans-serif; color: #b6bec6; }
.lp-keys kbd { background: #222a; border: 1px solid #fff4; border-radius: 4px; padding: 0 6px; color: #fff; }
.lp-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 70px; }
.lp-side .login-box { width: auto; max-width: none; padding: 18px; }
.lp-srv { display: grid; grid-template-columns: 1fr 90px 54px; align-items: center; gap: 8px; padding: 5px 0; font: 600 13.5px Rajdhani, sans-serif; color: #dfe4e8; }
.lp-srv i { height: 7px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
.lp-srv i b { display: block; height: 100%; background: linear-gradient(90deg, #4fd37a, #e6d36a); }
.lp-srv em { font-style: normal; color: #8a97a5; text-align: right; }
.lp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lp-stats div { padding: 8px; border-radius: 8px; background: rgba(255,255,255,.04); text-align: center; display: flex; flex-direction: column; }
.lp-stats b { font: 700 22px Rajdhani, sans-serif; color: #ffb547; }
.lp-stats span { font: 600 11px Rajdhani, sans-serif; color: #8a97a5; letter-spacing: 1px; text-transform: uppercase; }
.lp-foot { margin-top: 22px; text-align: center; font: 500 12px Rajdhani, sans-serif; color: #6b757f; }
@media (max-width: 1100px) { .lp-ranks { grid-template-columns: 1fr 1fr; } .lp-grid { grid-template-columns: 1fr; } .lp-side { position: static; order: -1; } .lp-guide-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .lp-ranks { grid-template-columns: 1fr; } .lp-nav { display: none; } .lp-slide h2 { font-size: 34px; } .lp-n img { display: none; } .lp-head-in { gap: 10px; } }

/* ================= MARKET ================= */
.mk { display: flex; flex-direction: column; gap: 12px; height: 100%; min-height: 0; }
.mk-hero { flex: none; }
.mk-h { position: relative; display: flex; align-items: center; justify-content: space-between; height: 150px; padding: 0 28px; border-radius: 12px; overflow: hidden;
  background: radial-gradient(ellipse at 75% 50%, color-mix(in srgb, var(--rc) 35%, transparent), transparent 60%), linear-gradient(110deg, rgba(14,16,19,.96) 40%, rgba(30,24,16,.9));
  border: 1px solid color-mix(in srgb, var(--rc) 55%, transparent); box-shadow: 0 0 30px color-mix(in srgb, var(--rc) 25%, transparent), inset 0 0 60px rgba(0,0,0,.4); }
.mk-h-txt { z-index: 1; max-width: 55%; }
.mk-tag { font: 700 12px Rajdhani, sans-serif; letter-spacing: 2px; color: var(--rc); }
.mk-h h2 { margin: 2px 0; font: 700 30px Rajdhani, sans-serif; color: #fff; letter-spacing: 1px; }
.mk-h p { margin: 0 0 8px; font: 500 13px Rajdhani, sans-serif; color: #b6bec6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-h-p { display: inline-flex; align-items: center; gap: 6px; margin-right: 14px; font: 700 26px Rajdhani, sans-serif; color: var(--gold, #ffcf5a); }
.mk-h-p small { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #8a97a5; margin-left: 8px; }
.mk-h img { height: 140px; max-width: 42%; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0,0,0,.7)); transform: rotate(-4deg); }
.mk-h-dots { position: absolute; left: 28px; bottom: 10px; display: flex; gap: 6px; }
.mk-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border-radius: 10px; flex: none; }
.mk-bar #shop-tabs { flex: none; }
#mk-search { flex: 1; min-width: 150px; padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.35); color: #fff; font: 600 14px Rajdhani, sans-serif; }
#mk-search:focus { outline: none; border-color: #ff8a1f; }
#mk-sort { padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,.12); background: #15181b; color: #fff; font: 600 14px Rajdhani, sans-serif; }
.mk-chk { display: flex; align-items: center; gap: 5px; font: 600 13px Rajdhani, sans-serif; color: #b6bec6; white-space: nowrap; cursor: pointer; }
.mk-wallet { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; background: rgba(255,200,80,.1); border: 1px solid rgba(255,200,80,.35); font: 700 18px Rajdhani, sans-serif; color: #ffcf5a; }
.mk-grid { flex: 1; min-height: 0; }
.mk-count { font: 600 12px Rajdhani, sans-serif; color: #7f8a95; letter-spacing: 1px; margin: 0 0 8px 2px; text-transform: uppercase; }
#page-shop .item { overflow: hidden; }
#page-shop .item::before { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: .0; transition: opacity .2s; }
#page-shop .item.rarity-3 .thumb { background: radial-gradient(ellipse at 50% 80%, rgba(180,107,255,.28), transparent 70%); }
#page-shop .item.rarity-4 .thumb { background: radial-gradient(ellipse at 50% 80%, rgba(255,181,71,.32), transparent 70%); }
#page-shop .item.rarity-4 { box-shadow: 0 0 0 1px rgba(255,181,71,.35), 0 6px 22px rgba(255,150,40,.12); }
#page-shop .item.rarity-3 { box-shadow: 0 0 0 1px rgba(180,107,255,.3); }
#page-shop .item.sel { outline: 2px solid #ff8a1f; outline-offset: -2px; }
.rar-chip { position: absolute; left: 8px; bottom: calc(100% - 118px); font: 700 10px Rajdhani, sans-serif; letter-spacing: 1.5px; padding: 1px 7px; border-radius: 4px; color: #111; background: var(--rc); box-shadow: 0 0 10px color-mix(in srgb, var(--rc) 50%, transparent); }
.item .badge.new { color: #111; background: #5fd38a; }
.mk-rar { position: absolute; top: 12px; left: 12px; z-index: 2; font: 700 12px Rajdhani, sans-serif; letter-spacing: 2px; padding: 3px 10px; border-radius: 5px; color: #111; background: var(--rc, #8e99a3); }
.mk-cmp { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.04); }
.mk-cmp-t { font: 600 12px Rajdhani, sans-serif; color: #8a97a5; margin-bottom: 4px; }
.mk-cmp-t b { color: #dfe4e8; }
.mk-cr { display: grid; grid-template-columns: 1fr 60px 80px; gap: 6px; font: 600 13px Rajdhani, sans-serif; color: #b6bec6; padding: 1px 0; }
.mk-cr b { color: #fff; text-align: right; }
.mk-cr em { font-style: normal; text-align: right; color: #8a97a5; }
.mk-cr em.up { color: #4fd37a; } .mk-cr em.down { color: #ff6a5c; }
.mk-buy { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.07); }
.mk-buybtn { font-size: 18px !important; letter-spacing: 2px; padding: 12px 28px !important; }
@media (max-width: 1100px) { .mk-h img { display: none; } .mk-h-txt { max-width: 100%; } }

/* market düzen düzeltmeleri */
#page-shop { overflow-y: auto; }
#page-shop .mk { height: auto; min-height: 100%; }
.mk-h { height: auto; min-height: 150px; padding: 16px 28px 22px; }
.mk-h-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mk-h-dots { bottom: 8px; left: auto; right: 22px; }
.mk-bar { display: grid; grid-template-columns: auto 1fr auto auto auto auto; }
.mk-bar #shop-tabs button { white-space: nowrap; }
#mk-sort { width: auto; min-width: 140px; }
.mk-grid { height: 620px; flex: none; }
.rar-chip { top: 82px; bottom: auto; left: 8px; }
@media (max-width: 1250px) { .mk-bar { grid-template-columns: 1fr 1fr; } .mk-bar #shop-tabs { grid-column: 1 / -1; overflow-x: auto; } }
@media (max-width: 720px) { .lp-status { display: none; } .lp-cta { padding: 8px 12px !important; font-size: 13px !important; } }
.lp-slide { background-size: cover, cover, cover; }
.lp-n img.art { object-fit: cover; }

.mk-bar .mk-wallet { display: none; }
.mk-bar { grid-template-columns: auto minmax(140px, 1fr) auto auto auto; }

/* ================= BEKLEME ODASI ================= */
#screen-room { display: flex; align-items: stretch; justify-content: center; overflow-y: auto; padding: 18px; background: radial-gradient(ellipse at 50% 0%, rgba(120,40,20,.35), rgba(0,0,0,.6)); }
#screen-room.hidden { display: none; }
.rm-wrap { width: min(1320px, 100%); display: flex; flex-direction: column; gap: 12px; }
.rm-head { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-radius: 10px; }
.rm-no { font: 700 28px Rajdhani, sans-serif; color: #ff8a1f; letter-spacing: 1px; }
.rm-title { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.rm-title b { font: 700 24px Rajdhani, sans-serif; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-title span { font: 600 14px Rajdhani, sans-serif; color: #9aa5b0; }
.rm-code { font: 600 12px Rajdhani, sans-serif; color: #8a97a5; letter-spacing: 2px; text-align: center; }
.rm-code b { display: block; font-size: 22px; color: #ffd27a; letter-spacing: 4px; }
.rm-grid { display: grid; grid-template-columns: 1fr 380px; gap: 12px; flex: 1; min-height: 0; }
.rm-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; }
.rm-team { border-radius: 10px; padding: 10px; background: linear-gradient(180deg, rgba(20,24,28,.92), rgba(10,12,15,.92)); border: 1px solid rgba(255,255,255,.08); }
.rm-team.wide { grid-column: 1 / -1; }
.rm-team.t-r { border-top: 3px solid #e2483a; } .rm-team.t-b { border-top: 3px solid #3a8ae2; } .rm-team.t-f { border-top: 3px solid #ffb547; }
.rm-th { display: flex; justify-content: space-between; align-items: center; font: 700 17px Rajdhani, sans-serif; letter-spacing: 2px; margin-bottom: 8px; color: #fff; }
.rm-team.t-r .rm-th { color: #ff7a6a; } .rm-team.t-b .rm-th { color: #6fb2ff; }
.rm-th span { font-size: 13px; color: #8a97a5; }
.rm-ffa { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.rm-slot { position: relative; display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 5px 10px; margin-bottom: 6px; border-radius: 7px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); font: 600 15px Rajdhani, sans-serif; color: #e8ecef; }
.rm-slot .n { width: 18px; color: #6b757f; font-size: 13px; text-align: center; }
.rm-slot .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-slot .nm small { color: #ffb547; font-size: 10px; }
.rm-slot .ctag { color: #ffb35c; margin-right: 3px; }
.rm-slot.empty { color: #5d6670; border-style: dashed; cursor: default; }
.rm-slot.empty .j { margin-left: auto; font-size: 11px; color: #ffb547; letter-spacing: 1px; }
.rm-slot.empty[data-team]:hover .j { text-decoration: underline; cursor: pointer; }
.rm-slot.ready { background: linear-gradient(90deg, rgba(79,211,122,.14), rgba(255,255,255,.03)); border-color: rgba(79,211,122,.35); }
.rm-slot.me { box-shadow: inset 3px 0 0 #ffb547; }
.rm-slot .hb { font-size: 12px; color: #ffd27a; font-weight: 700; }
.rm-slot .rb { font-size: 12px; color: #4fd37a; font-weight: 700; letter-spacing: 1px; }
.rm-slot .wb { font-size: 12px; color: #8a97a5; letter-spacing: 1px; }
.rm-slot .kick { margin-left: 6px; width: 22px; height: 22px; border-radius: 4px; border: 1px solid rgba(255,90,72,.5); background: rgba(255,90,72,.12); color: #ff7a6a; cursor: pointer; font-weight: 700; }
.rm-side { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.rm-map { position: relative; border-radius: 10px; overflow: hidden; padding: 0; }
.rm-map img { display: block; width: 100%; height: 150px; object-fit: cover; }
.rm-mapinfo { padding: 8px 12px; display: flex; flex-direction: column; font: 600 13px Rajdhani, sans-serif; color: #9aa5b0; }
.rm-mapinfo b { font-size: 18px; color: #fff; }
.rm-set, .rm-chat { border-radius: 10px; padding: 10px 12px; }
.rm-st { font: 700 14px Rajdhani, sans-serif; letter-spacing: 2px; color: #ffb547; margin-bottom: 8px; }
.rm-st span { font-size: 11px; color: #7f8a95; letter-spacing: 0; }
#rm-set { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#rm-set label { display: flex; flex-direction: column; gap: 3px; font: 600 12px Rajdhani, sans-serif; color: #8a97a5; }
#rm-set select { padding: 6px 8px; border-radius: 6px; background: #14171a; color: #fff; border: 1px solid rgba(255,255,255,.12); font: 600 14px Rajdhani, sans-serif; }
#rm-set select:disabled { opacity: .75; }
.rm-chat { flex: 1; display: flex; flex-direction: column; min-height: 170px; }
#rm-log { flex: 1; min-height: 100px; max-height: 240px; overflow-y: auto; font: 500 14px Rajdhani, sans-serif; color: #dfe4e8; display: flex; flex-direction: column; gap: 2px; }
#rm-log i { color: #8a97a5; }
.rm-in { display: flex; gap: 6px; margin-top: 6px; }
.rm-in input { flex: 1; padding: 7px 10px; border-radius: 6px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.12); color: #fff; font: 600 14px Rajdhani, sans-serif; }
.rm-actions { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 10px; }
.rm-status { flex: 1; text-align: center; font: 600 15px Rajdhani, sans-serif; color: #b6bec6; }
.rm-status b { color: #fff; } .rm-status .ok { color: #4fd37a; }
#rm-ready.on { background: linear-gradient(180deg, #3fae5c, #2c8a46); color: #fff; border-color: #4fd37a; }
#rm-start:disabled { opacity: .55; filter: grayscale(.4); cursor: not-allowed; }
.st-wait { color: #ffd27a; } .st-play { color: #4fd37a; }
@media (max-width: 1000px) { .rm-grid { grid-template-columns: 1fr; } .rm-teams { grid-template-columns: 1fr; } .rm-head { flex-wrap: wrap; } }

.rm-grid { flex: none; }
.rm-chat { flex: none; }
#rm-log { height: 170px; flex: none; }
.rm-map img { object-fit: contain; background: #0d100c; }

#breath { position: absolute; left: 50%; top: calc(50% + 120px); transform: translateX(-50%); width: 160px; text-align: center; pointer-events: none; }
#breath.hidden { display: none; }
#breath i { display: block; height: 4px; border-radius: 2px; background: linear-gradient(90deg, #6fcf5a, #ffd27a); box-shadow: 0 0 6px rgba(0,0,0,.6); }
#breath span { display: block; margin-top: 4px; font: 700 11px Rajdhani, sans-serif; letter-spacing: 2px; color: rgba(255,255,255,.75); text-shadow: 0 1px 3px #000; }

/* ölüm özeti */
#death-recap { margin-top: 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
#death-recap .rc-row { display: flex; align-items: center; gap: 12px; padding: 6px 14px; border-radius: 8px; background: rgba(0,0,0,.45); }
#death-recap .rc-row img { height: 36px; }
#death-recap .rc-row b { display: block; font: 700 17px Rajdhani, sans-serif; color: #fff; }
#death-recap .rc-row span { font: 600 13px Rajdhani, sans-serif; color: #b6bec6; }
#death-recap .rc-stats { display: flex; gap: 8px; }
#death-recap .rc-stats div { min-width: 74px; padding: 6px 8px; border-radius: 6px; background: rgba(0,0,0,.45); text-align: center; display: flex; flex-direction: column; }
#death-recap .rc-stats b { font: 700 22px Rajdhani, sans-serif; color: #ffb547; }
#death-recap .rc-stats span { font: 600 11px Rajdhani, sans-serif; color: #9aa5b0; letter-spacing: 1px; text-transform: uppercase; }
#death-recap .rc-assist { font: 600 13px Rajdhani, sans-serif; color: #b6bec6; }
/* yükleme ekranı */
#loader { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 40%, #2a1a10, #07080a 75%); }
#loader.hidden { display: none; }
.ld-in { width: min(560px, 90vw); display: flex; flex-direction: column; align-items: center; gap: 18px; }
.ld-map { display: flex; gap: 14px; align-items: center; width: 100%; padding: 12px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.ld-map img { width: 180px; height: 104px; object-fit: contain; border-radius: 6px; background: #0d100c; }
.ld-map b { display: block; font: 700 22px Rajdhani, sans-serif; color: #fff; }
.ld-map span { font: 500 14px Rajdhani, sans-serif; color: #9aa5b0; }
.ld-bar { width: 100%; height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.ld-bar i { display: block; height: 100%; width: 15%; background: linear-gradient(90deg, #ff8a1f, #ffd27a); transition: width .4s; }
.ld-tip { font: 600 15px Rajdhani, sans-serif; color: #dfe4e8; text-align: center; }
/* ilk oyun tanıtımı */
#onboard { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.65); }
#onboard.hidden { display: none; }
.ob-box { width: min(760px, 92vw); padding: 24px 28px; border-radius: 12px; background: linear-gradient(180deg, rgba(24,28,32,.98), rgba(12,14,17,.98)); border: 1px solid rgba(255,140,40,.4); text-align: center; }
.ob-box h2 { margin: 0 0 14px; font: 700 30px Rajdhani, sans-serif; letter-spacing: 2px; color: #ffb547; }
.ob-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; text-align: left; }
.ob-grid div { padding: 10px 12px; border-radius: 8px; background: rgba(255,255,255,.04); font: 600 15px Rajdhani, sans-serif; color: #dfe4e8; }
.ob-grid kbd { background: #222a; border: 1px solid #fff4; border-radius: 4px; padding: 0 6px; color: #fff; }

/* baskı altında: kenarlar kararır, görüş daralır */
#suppress { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, transparent 38%, rgba(10,10,12,.55) 75%, rgba(0,0,0,.85) 100%); backdrop-filter: saturate(.55); -webkit-backdrop-filter: saturate(.55); }

/* Silah Yarışı */
#gg-status { position: absolute; right: 16px; top: 190px; width: 230px; padding: 10px 12px; border-radius: 8px; background: linear-gradient(180deg, rgba(14,16,20,.82), rgba(14,16,20,.6)); border: 1px solid rgba(255,160,60,.35); font-family: Rajdhani, sans-serif; color: #e8ecef; pointer-events: none; }
#gg-status.hidden { display: none; }
#gg-status .gg-h { font-weight: 700; letter-spacing: 1.5px; font-size: 14px; color: #ffb547; }
#gg-status .gg-h b { float: right; color: #fff; font-size: 16px; }
#gg-status .gg-bar { display: flex; gap: 2px; margin: 6px 0; }
#gg-status .gg-bar i { flex: 1; height: 5px; border-radius: 2px; background: rgba(255,255,255,.12); }
#gg-status .gg-bar i.d { background: #ff9b30; }
#gg-status .gg-bar i.c { background: #fff; box-shadow: 0 0 6px #ffb547; }
#gg-status .gg-w { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
#gg-status .gg-w img { height: 30px; }
#gg-status .gg-n { font-size: 13px; color: #aeb7bf; margin-top: 3px; }

/* harita / mod oylaması */
#vote-box { position: fixed; left: 16px; top: 214px; z-index: 45; width: 300px; padding: 10px 12px; border-radius: 10px; background: rgba(12, 16, 20, .9); border: 1px solid rgba(255, 138, 31, .45); box-shadow: 0 8px 26px rgba(0, 0, 0, .5); font-family: var(--font); color: #e8ecef; pointer-events: auto; animation: fade .2s; }
#vote-box.hidden { display: none; }
#vote-box.vb-pass { border-color: var(--good); }
#vote-box.vb-fail, #vote-box.vb-cancel { border-color: rgba(255, 90, 72, .6); opacity: .92; }
#vote-box .vb-h { display: flex; justify-content: space-between; font: 700 15px Rajdhani, sans-serif; letter-spacing: 1.5px; color: var(--acc); }
#vote-box .vb-h .ok { color: var(--good); } #vote-box .vb-h .bad { color: #ff8a7a; }
#vote-box #vb-t { color: #fff; }
#vote-box .vb-what { display: flex; gap: 10px; align-items: center; margin: 8px 0; }
#vote-box .vb-what img { width: 84px; height: 50px; object-fit: cover; border-radius: 6px; flex: none; }
#vote-box .vb-what b { display: block; font-size: 16px; }
#vote-box .vb-what span { display: block; font-size: 13px; color: #ffd27a; }
#vote-box .vb-what small { display: block; font-size: 11px; color: var(--muted); }
#vote-box .vb-bar { position: relative; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .1); overflow: hidden; display: flex; }
#vote-box .vb-bar i { display: block; height: 100%; transition: width .2s; }
#vote-box .vb-bar i.y { background: var(--good); } #vote-box .vb-bar i.n { background: #e0503f; margin-left: auto; }
#vote-box .vb-bar em { position: absolute; top: -2px; bottom: -2px; width: 2px; background: #fff; }
#vote-box .vb-cnt { display: flex; justify-content: space-between; font-size: 11px; margin-top: 4px; color: var(--muted); }
#vote-box .vb-cnt .y { color: var(--good); font-weight: 700; } #vote-box .vb-cnt .n { color: #ff8a7a; font-weight: 700; }
#vote-box .vb-act { display: flex; gap: 8px; margin-top: 8px; }
#vote-box .vb-act .btn { flex: 1; padding: 6px 8px; font-size: 13px; }
#vote-box .vb-act kbd { font-size: 10px; padding: 0 4px; margin-right: 4px; }
#vote-box .vb-note { font-size: 12px; margin-top: 8px; color: #cfe9c8; }
.vote-modes { display: flex; flex-wrap: wrap; gap: 6px; }
.vote-modes .btn { padding: 6px 10px; font-size: 13px; }
.vote-modes .btn small { opacity: .7; font-size: 10px; }
.hist-row .res.n { color: #ffd27a; }
@media (max-height: 640px) { #vote-box { top: auto; bottom: 16px; left: 50%; transform: translateX(-50%); } }

/* ROCKSTAR etkinliği */
#rs-bars i { position: fixed; left: 0; right: 0; height: 0; background: #000; z-index: 24; transition: height .9s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
#rs-bars i:first-child { top: 0; } #rs-bars i:last-child { bottom: 0; }
body.rs-cine #rs-bars i { height: 11vh; }
body.rs-cine #hud { opacity: 0; transition: opacity .6s; }
#hud { transition: opacity .6s; }
#rs-flash { position: fixed; inset: 0; background: #fff; opacity: 0; z-index: 26; pointer-events: none; }
#rs-flash.go { animation: rsFlash 1.1s ease-out; }
@keyframes rsFlash { 0% { opacity: 0; } 6% { opacity: 1; } 100% { opacity: 0; } }
#rs-caption { position: fixed; top: 3.6vh; left: 0; right: 0; text-align: center; z-index: 25; color: #e9e3ff; font: 700 clamp(14px, 2vw, 22px) Rajdhani, sans-serif; letter-spacing: 6px; opacity: 0; transition: opacity .8s; pointer-events: none; text-shadow: 0 0 12px rgba(181, 123, 255, .8); }
#rs-caption.show { opacity: 1; }
#rs-title { position: fixed; left: 0; right: 0; bottom: 15vh; text-align: center; z-index: 25; opacity: 0; pointer-events: none; font-family: var(--disp); }
#rs-title small { display: block; font: 700 clamp(12px, 1.4vw, 16px) Rajdhani, sans-serif; letter-spacing: 8px; color: #d9c6ff; }
#rs-title b { display: block; font-size: clamp(56px, 11vw, 150px); line-height: .95; letter-spacing: .12em; font-weight: 500; background: linear-gradient(180deg, #fff6d8 0%, #ffcf4a 45%, #ff8a1f 70%, #b57bff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 22px rgba(255, 170, 60, .55)) drop-shadow(0 6px 0 rgba(0, 0, 0, .55)); }
#rs-title span { display: block; margin-top: 6px; font: 700 clamp(13px, 1.6vw, 19px) Rajdhani, sans-serif; letter-spacing: 3px; color: #fff; text-shadow: 0 2px 6px #000; }
#rs-title span i { font-style: normal; }
#rs-title.show { animation: rsTitle 3.6s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes rsTitle { 0% { opacity: 0; transform: scale(1.35); letter-spacing: .6em; filter: blur(8px); } 18% { opacity: 1; transform: scale(1); filter: blur(0); } 82% { opacity: 1; } 100% { opacity: 0; transform: scale(.98); } }
#rs-offer { position: fixed; top: 92px; left: 50%; transform: translateX(-50%); z-index: 27; min-width: 300px; padding: 12px 22px 10px; text-align: center; border-radius: 12px; background: radial-gradient(ellipse at 50% 0%, rgba(120, 60, 200, .55), rgba(10, 8, 20, .92)); border: 2px solid #ffcf4a; box-shadow: 0 0 28px rgba(255, 190, 60, .55), inset 0 0 18px rgba(181, 123, 255, .35); color: #fff; font-family: var(--font); pointer-events: none; animation: rsPulse 1s ease-in-out infinite; }
#rs-offer.hidden { display: none; }
#rs-offer .rso-t { font: 700 22px Rajdhani, sans-serif; letter-spacing: 3px; color: #ffd76a; text-shadow: 0 0 10px rgba(255, 200, 80, .8); }
#rs-offer .rso-k { margin: 6px 0 8px; font-size: 16px; font-weight: 700; }
#rs-offer .rso-k kbd { font-size: 20px; min-width: 34px; color: #111; background: #ffd76a; border-color: #b8860b; }
#rs-offer .rso-bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .15); overflow: hidden; }
#rs-offer .rso-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #b57bff, #ffcf4a); }
#rs-offer .rso-s { margin-top: 4px; font-size: 12px; color: #d9c6ff; }
@keyframes rsPulse { 0%, 100% { box-shadow: 0 0 22px rgba(255, 190, 60, .45), inset 0 0 18px rgba(181, 123, 255, .3); } 50% { box-shadow: 0 0 40px rgba(255, 190, 60, .85), inset 0 0 24px rgba(181, 123, 255, .5); } }
.kf-w.kf-rs { color: #ffcf4a; text-shadow: 0 0 6px rgba(255, 170, 60, .8); }
#rs-warn { position: fixed; top: 86px; left: 50%; transform: translateX(-50%); z-index: 27; min-width: 340px; padding: 10px 26px 12px; text-align: center; border-radius: 14px; background: radial-gradient(ellipse at 50% 0%, rgba(150, 40, 40, .55), rgba(12, 6, 18, .9)); border: 2px solid #ff5a3a; box-shadow: 0 0 30px rgba(255, 80, 50, .5); color: #fff; pointer-events: none; font-family: var(--font); animation: rsWarnIn .45s cubic-bezier(.2, .9, .3, 1.3); }
#rs-warn.hidden { display: none; }
/* KAPUNKİ sürüsü duyurusu, sayaç ve GM görünmezlik rozeti */
#kap-banner { position: fixed; top: 86px; left: 50%; transform: translateX(-50%); z-index: 27; min-width: 340px; padding: 10px 26px 12px; text-align: center; border-radius: 14px; background: radial-gradient(ellipse at 50% 0%, rgba(70, 120, 40, .6), rgba(10, 14, 8, .92)); border: 2px solid #9be15a; box-shadow: 0 0 30px rgba(140, 230, 80, .45); color: #fff; pointer-events: none; font-family: var(--font); animation: rsWarnIn .45s cubic-bezier(.2, .9, .3, 1.3); }
#kap-banner.hidden, #kap-chip.hidden, #gm-invis.hidden { display: none; }
#kap-banner small { display: block; font: 700 13px Rajdhani, sans-serif; letter-spacing: 6px; color: #cdf5a8; }
#kap-banner b { display: block; font-family: var(--disp); font-weight: 500; font-size: clamp(30px, 4.2vw, 50px); line-height: 1; letter-spacing: 2px; background: linear-gradient(180deg, #f4ffd9, #b6f06a 55%, #5fbf2a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 12px rgba(150, 240, 90, .55)); }
#kap-banner span { display: block; margin-top: 6px; font: 600 14px Rajdhani, sans-serif; color: #dfe8d6; }
#kap-chip { position: fixed; top: 118px; left: 50%; transform: translateX(-50%); z-index: 26; display: flex; align-items: center; gap: 8px; padding: 4px 14px; border-radius: 999px; background: rgba(10, 14, 8, .78); border: 1px solid var(--kc, #9be15a); box-shadow: 0 0 14px rgba(140, 230, 80, .3); color: #fff; pointer-events: none; font: 700 15px Rajdhani, sans-serif; letter-spacing: 1px; }
#kap-chip i { font-style: normal; }
#kap-chip span { color: #b9c4ae; font-weight: 600; }
#gm-invis { position: fixed; bottom: 150px; left: 50%; transform: translateX(-50%); z-index: 26; padding: 6px 16px; border-radius: 8px; background: rgba(20, 24, 40, .82); border: 1px solid #8fb4ff; box-shadow: 0 0 16px rgba(120, 160, 255, .35); color: #dfe8ff; pointer-events: none; font: 700 15px Rajdhani, sans-serif; letter-spacing: 2px; }
#gm-invis small { margin-left: 8px; font-weight: 600; letter-spacing: 0; color: #9aa6c4; }
#rs-warn small { display: block; font: 700 13px Rajdhani, sans-serif; letter-spacing: 6px; color: #ffb199; }
#rs-warn b { display: block; font-family: var(--disp); font-weight: 500; font-size: clamp(30px, 4.2vw, 50px); line-height: 1; letter-spacing: 2px; background: linear-gradient(180deg, #fff3cf, #ffcf4a 55%, #ff7a2a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 12px rgba(255, 150, 60, .6)); }
#rs-warn .rsw-n { font-family: var(--disp); font-size: clamp(52px, 7vw, 84px); line-height: .95; color: #fff; text-shadow: 0 0 22px rgba(255, 120, 60, .9), 0 3px 0 rgba(0, 0, 0, .6); }
#rs-warn .rsw-n.tick { animation: rsTick .9s ease-out; }
#rs-warn.last { border-color: #ff2a1a; animation: rsWarnLast .5s ease-in-out infinite alternate; }
#rs-warn.last .rsw-n { color: #ff6a50; }
#rs-warn span { display: block; font-size: 13px; font-weight: 700; letter-spacing: 1px; color: #e9e3ff; }
#rs-warn span i { font-style: normal; }
@keyframes rsWarnIn { 0% { opacity: 0; transform: translateX(-50%) scale(.6); } 100% { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes rsTick { 0% { transform: scale(1.6); opacity: .3; } 25% { transform: scale(1); opacity: 1; } 100% { transform: scale(.94); } }
@keyframes rsWarnLast { 0% { box-shadow: 0 0 22px rgba(255, 50, 30, .45); } 100% { box-shadow: 0 0 46px rgba(255, 50, 30, .95); } }

/* açılış ekranı */
#boot { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 40%, #2a1a10, #07080a 75%); color: #e8ecef; font-family: var(--font); transition: opacity .5s; }
#boot.out { opacity: 0; pointer-events: none; }
#boot .boot-in { width: min(520px, 88vw); display: flex; flex-direction: column; align-items: center; gap: 16px; }
#boot .boot-t { font: 700 15px Rajdhani, sans-serif; letter-spacing: 5px; color: #ffd27a; text-align: center; }
#boot .boot-bar { width: 100%; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
#boot .boot-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ff8a1f, #ffd27a); box-shadow: 0 0 12px rgba(255, 160, 50, .6); }
#boot .boot-row { width: 100%; display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: #b9c0c6; }
#boot .boot-row b { color: #fff; font-variant-numeric: tabular-nums; }
#boot #boot-err.hidden { display: none; }
#boot.bad .boot-bar i { background: linear-gradient(90deg, #e0503f, #ff8a7a); }
#boot.bad #boot-status { color: #ff9a8a; }

/* kurt türleri */
.wt-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 14px; }
.wt-card { border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 12px; background: rgba(255,255,255,.04); cursor: pointer; transition: border-color .15s, transform .15s, background .15s; display: flex; flex-direction: column; gap: 6px; }
.wt-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.3); }
.wt-card.on { border-color: var(--wc, #ff8a1f); background: rgba(255,138,31,.08); box-shadow: 0 0 0 1px var(--wc, #ff8a1f) inset; }
.wt-card .wt-ic { height: 96px; border-radius: 8px; background: radial-gradient(circle at 50% 60%, var(--wc, #888) 0%, rgba(0,0,0,0) 70%), #11161b; display: flex; align-items: center; justify-content: center; font-size: 46px; overflow: hidden; }
.wt-card .wt-n { font-family: var(--disp); font-size: 22px; letter-spacing: .5px; color: var(--wc, #fff); }
.wt-card .wt-d { font-size: 12.5px; line-height: 1.4; color: #c9d1d9; }
.wt-card .wt-hp { font-size: 12px; color: #9aa7b3; }
@media (max-width: 720px) { .wt-cards { grid-template-columns: repeat(2, 1fr); } }
#frost-ov, #burn-ov { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s; }
#frost-ov { background: radial-gradient(ellipse at center, rgba(160,220,255,0) 45%, rgba(160,220,255,.35) 75%, rgba(220,245,255,.75) 100%); box-shadow: inset 0 0 120px rgba(190,235,255,.6); }
#burn-ov { background: radial-gradient(ellipse at center, rgba(255,120,20,0) 50%, rgba(255,90,10,.28) 80%, rgba(255,60,0,.55) 100%); transition: opacity .08s; }

.kf-w.kf-ice { color: #9fe0ff; } .kf-w.kf-fire { color: #ffae5a; }

.ctag.gm, .rm-slot .ctag.gm { color: #ffd34d; text-shadow: 0 0 6px rgba(255, 60, 0, .7); letter-spacing: .5px; }
/* lisans sayfası */
body.credits-page { overflow: auto; user-select: text; }
.credits { max-width: 760px; margin: 0 auto; padding: 32px 16px 48px; line-height: 1.6; }
.credits h1 { font-size: 26px; margin: 0 0 14px; }
.credits a { color: #ffb35c; }
.credits li { margin: 6px 0; }
.lp-foot a { color: inherit; text-decoration: underline; }

/* ================= ODA İÇİ ENVANTER / MARKET ================= */
#btn-back-room { display: none; }
body.room-over #screen-lobby { z-index: 8; background: linear-gradient(180deg, rgba(30,5,5,.97), rgba(8,6,6,.98)); animation: roomOverIn .18s ease-out; }
body.room-over #btn-back-room { display: inline-flex; align-items: center; gap: 6px; }
body.room-over #nav button:not([data-page="inv"]):not([data-page="shop"]),
body.room-over .nav-bottom, body.room-over #btn-srv, body.room-over #btn-clanchain, body.room-over #guest-warn { display: none; }
body.room-over .sidenav::after { content: 'ODADASIN · maç başlayınca bu ekran kapanır'; margin-top: auto; padding: 10px 8px 0; font-size: 12px; color: #c9a99f; border-top: 1px solid rgba(255,80,60,.2); line-height: 1.4; }
@keyframes roomOverIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.rm-head #rm-inv, .rm-head #rm-shop { border-color: rgba(255,170,90,.45); }

/* ================= ENVANTER + MARKET: premium görünüm ================= */
#page-inv .item, #page-shop .item { --rc: #8e99a3; border: 1px solid color-mix(in srgb, var(--rc) 35%, rgba(255,255,255,.06)); border-bottom: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 10%, rgba(20,24,28,.9)), rgba(12,14,17,.95) 70%); border-radius: 10px; }
#page-inv .item::after, #page-shop .item::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--rc), transparent); opacity: .9; }
#page-inv .item:hover, #page-shop .item:hover { border-color: var(--rc); transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.5), 0 0 18px color-mix(in srgb, var(--rc) 25%, transparent); }
#page-inv .item.sel, #page-shop .item.sel { outline: 0; border-color: var(--rc); box-shadow: 0 0 0 2px var(--rc), 0 0 26px color-mix(in srgb, var(--rc) 35%, transparent); }
#page-inv .item .thumb, #page-shop .item .thumb { height: 112px; background: radial-gradient(ellipse at 50% 85%, color-mix(in srgb, var(--rc) 30%, transparent), transparent 70%); }
#page-inv .item .thumb img, #page-shop .item .thumb img { filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); transition: transform .2s; }
#page-inv .item:hover .thumb img, #page-shop .item:hover .thumb img { transform: scale(1.06) rotate(-2deg); }
.item .rar-l { position: absolute; left: 10px; top: 96px; font: 700 10px Rajdhani, sans-serif; letter-spacing: 1.8px; color: var(--rc); text-shadow: 0 0 8px color-mix(in srgb, var(--rc) 60%, transparent); }
.item .info .n { font: 700 16px Rajdhani, sans-serif; letter-spacing: .3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .info .d { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .p { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 2px 8px; border-radius: 999px; background: rgba(255,200,80,.1); border: 1px solid rgba(255,200,80,.28); font: 700 15px Rajdhani, sans-serif; }
.item .p.free { background: rgba(80,200,120,.1); border-color: rgba(80,200,120,.3); }
.item.dim { opacity: .55; } .item.dim:hover { opacity: .9; }
.item.locked .thumb::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(0,0,0,.25) 0 6px, transparent 6px 12px); pointer-events: none; }
.item.locked .thumb { position: relative; }
.item.rarity-4::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 1 !important;
  background: linear-gradient(115deg, transparent 30%, rgba(255,220,140,.16) 45%, transparent 60%); background-size: 250% 100%; animation: rarShine 4.5s linear infinite; }
@keyframes rarShine { from { background-position: 150% 0; } to { background-position: -100% 0; } }
.rar-chip { display: none; }
.goshop-card { border-style: dashed !important; background: rgba(255,255,255,.02) !important; }
.goshop-card::after { display: none; }
.goshop-card .thumb .ic { width: 34px; height: 34px; color: var(--acc); }
/* panel başlığı */
.pn-head { display: flex; align-items: baseline; justify-content: space-between; margin: 2px 2px 10px; }
.pn-t { font: 700 13px Rajdhani, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: #cfd6db; }
.pn-t b { color: var(--acc2); }
.pn-c { font: 700 12px Rajdhani, sans-serif; letter-spacing: 1px; color: var(--muted); padding: 2px 9px; border-radius: 999px; background: rgba(255,255,255,.05); }
/* yuva çubuğu (yalnızca silahlar) */
.loadout-bar { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.lslot { position: relative; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 8px 10px 6px; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.25)); min-height: 74px; }
.lslot .lk { position: absolute; top: 6px; right: 8px; font: 700 11px Rajdhani, sans-serif; color: #111; background: rgba(255,255,255,.55); border-radius: 4px; padding: 0 5px; }
.lslot .lc { display: block; font: 700 11px Rajdhani, sans-serif; letter-spacing: 1.5px; color: var(--muted); }
.lslot img { height: 26px; margin-top: 4px; opacity: .85; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.lslot.on { border-color: var(--acc); background: linear-gradient(180deg, rgba(255,138,31,.18), rgba(255,138,31,.04)); box-shadow: 0 0 0 1px rgba(255,138,31,.35) inset; }
.lslot.on .lk { background: var(--acc); }
/* detay paneli: seçili ürünün nadirlik rengi */
#page-inv .detail, #page-shop .detail { --rc: #8e99a3; border-color: color-mix(in srgb, var(--rc) 40%, transparent); transition: border-color .3s; }
#page-inv .detail-stage, #page-shop .detail-stage { background: radial-gradient(ellipse at 50% 78%, color-mix(in srgb, var(--rc) 32%, transparent), transparent 62%), linear-gradient(180deg, rgba(0,0,0,.25), transparent); transition: background .3s; }
#page-inv .detail-stage::after, #page-shop .detail-stage::after { content: ''; position: absolute; left: 10%; right: 10%; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--rc), transparent); }
#page-shop .detail-body .type, #page-inv .detail-body .type { color: var(--rc) !important; letter-spacing: 2px; }
.detail-body h2 { letter-spacing: 1px; }
.mk-buy { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.06); }
.mk-buybtn { width: 100%; padding: 14px !important; font-size: 18px !important; letter-spacing: 2px; color: #1b1203 !important; border: 0 !important;
  background: linear-gradient(180deg, #ffd56b, #f0a82c) !important; box-shadow: 0 6px 20px rgba(240,168,44,.35); }
.mk-buybtn:hover:not(:disabled) { filter: brightness(1.08); box-shadow: 0 8px 26px rgba(240,168,44,.5); }
.mk-buybtn:disabled { background: rgba(255,255,255,.08) !important; color: var(--muted) !important; box-shadow: none; }
.detail-actions .btn { flex: 1 1 auto; }
.mk-bar { gap: 12px; padding: 10px 12px; }
.mk-wallet { margin-left: auto; padding: 7px 14px; font-size: 20px; box-shadow: 0 0 18px rgba(255,200,80,.12) inset; }

/* yeni harita rozeti */
.map-card { position: relative; }
.map-new { position: absolute; top: 14px; right: 14px; font: 800 10px Rajdhani, sans-serif; letter-spacing: 1.5px; color: #111; background: linear-gradient(180deg, #7dffa0, #3ccf6a); padding: 2px 7px; border-radius: 4px; box-shadow: 0 0 12px rgba(80,230,130,.55); animation: newPulse 1.8s ease-in-out infinite; }
@keyframes newPulse { 50% { box-shadow: 0 0 20px rgba(80,230,130,.9); } }

/* dürbün: tuval üzerine çizilir (game.js drawScope) */
#scope { position: absolute; inset: 0; pointer-events: none; }
#scope-c { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ================= MARKET · CS2 düzeni ================= */
#page-shop .mk.cs { --cs-bg: #15171b; --cs-panel: rgba(18,20,24,.92); --cs-line: rgba(255,255,255,.07); --cs-txt: #d6dbe0; --cs-mut: #7d8792; --cs-buy: #5ba32b;
  display: flex; flex-direction: column; gap: 0; height: auto; min-height: 100%; border-radius: 12px; overflow: hidden; background: linear-gradient(180deg, rgba(14,16,19,.94), rgba(10,11,13,.96)); border: 1px solid var(--cs-line); }
.cs-top { display: flex; align-items: stretch; gap: 22px; padding: 0 18px; min-height: 58px; background: linear-gradient(180deg, rgba(36,40,46,.95), rgba(22,25,29,.95)); border-bottom: 1px solid rgba(0,0,0,.6); box-shadow: 0 1px 0 rgba(255,255,255,.04); }
.cs-title { display: flex; flex-direction: column; justify-content: center; line-height: 1; padding-right: 22px; border-right: 1px solid var(--cs-line); }
.cs-title b { font: 700 26px Rajdhani, sans-serif; letter-spacing: 4px; color: #fff; }
.cs-title small { font: 600 10px Rajdhani, sans-serif; letter-spacing: 2.4px; color: var(--cs-mut); margin-top: 3px; }
.cs-tabs { display: flex; align-items: stretch; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1; }
.cs-tabs::-webkit-scrollbar { display: none; }
.cs-tabs button { position: relative; background: none; border: 0; padding: 0 14px; color: var(--cs-mut); font: 700 14px Rajdhani, sans-serif; letter-spacing: 1.6px; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: color .15s, background .15s; }
.cs-tabs button:hover { color: #fff; background: rgba(255,255,255,.04); }
.cs-tabs button.active { color: #fff; background: linear-gradient(180deg, transparent, rgba(255,255,255,.06)); }
.cs-tabs button.active::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: #e8eaec; box-shadow: 0 0 12px rgba(255,255,255,.4); }
.cs-wallet { display: flex; align-items: center; gap: 8px; margin: 11px 0; padding: 0 16px; border-radius: 6px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,200,80,.25); font: 700 20px Rajdhani, sans-serif; color: #ffd36a; white-space: nowrap; }
.cs-wallet .coin, .cs-card .coin, .cs-ft .coin { font-style: normal; color: #ffc847; margin-right: 3px; }
.cs-body { display: grid; grid-template-columns: 230px minmax(0, 1fr) 400px; height: min(80vh, 820px); min-height: 520px; }
/* sol filtre */
.cs-side { padding: 14px 12px; overflow-y: auto; background: rgba(0,0,0,.22); border-right: 1px solid var(--cs-line); display: flex; flex-direction: column; gap: 16px; }
.cs-search { display: flex; align-items: center; gap: 8px; padding: 0 10px; border-radius: 6px; background: rgba(0,0,0,.45); border: 1px solid var(--cs-line); }
.cs-search:focus-within { border-color: rgba(255,255,255,.3); }
.cs-search svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--cs-mut); stroke-width: 2; }
#page-shop #mk-search { flex: 1; min-width: 0; padding: 9px 0; border: 0; background: none; color: #fff; font: 600 14px Rajdhani, sans-serif; }
#page-shop #mk-search:focus { outline: none; }
.cs-sec:empty { display: none; }
.cs-sh { font: 700 11px Rajdhani, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: var(--cs-mut); margin: 0 0 6px 2px; }
.cs-sub, .cs-rar { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; margin-bottom: 2px; border: 0; border-radius: 5px; background: none; color: var(--cs-txt); font: 600 14px Rajdhani, sans-serif; text-align: left; cursor: pointer; transition: background .12s; }
.cs-sub span, .cs-rar span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-sub em, .cs-rar em { font-style: normal; font-size: 12px; color: var(--cs-mut); }
.cs-sub:hover, .cs-rar:hover { background: rgba(255,255,255,.05); }
.cs-sub.on { background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 3px 0 0 #e8eaec; }
.cs-rar i { width: 10px; height: 10px; border-radius: 2px; background: var(--rc); box-shadow: 0 0 6px color-mix(in srgb, var(--rc) 60%, transparent); flex: none; }
.cs-rar span { color: color-mix(in srgb, var(--rc) 70%, #fff); }
.cs-rar.on { background: color-mix(in srgb, var(--rc) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 50%, transparent); }
#page-shop #mk-sort { width: 100%; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--cs-line); background: #0f1114; color: #fff; font: 600 14px Rajdhani, sans-serif; }
.cs-chk { display: flex; align-items: center; gap: 9px; padding: 5px 2px; font: 600 14px Rajdhani, sans-serif; color: var(--cs-txt); cursor: pointer; user-select: none; }
.cs-chk input { display: none; }
.cs-chk i { width: 16px; height: 16px; border-radius: 3px; border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.4); flex: none; display: grid; place-items: center; }
.cs-chk input:checked + i { background: #e8eaec; border-color: #e8eaec; }
.cs-chk input:checked + i::after { content: ''; width: 8px; height: 4px; border: 2px solid #111; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
/* orta: vitrin + ızgara */
.cs-main { overflow-y: auto; padding: 14px 16px 18px; min-width: 0; }
.cs-feat { margin-bottom: 16px; }
.cs-fh, .cs-gh { display: flex; align-items: baseline; justify-content: space-between; font: 700 13px Rajdhani, sans-serif; letter-spacing: 2.4px; color: #cfd5da; margin: 0 2px 8px; text-transform: uppercase; }
.cs-gc { font: 600 12px Rajdhani, sans-serif; letter-spacing: 1px; color: var(--cs-mut); text-transform: none; }
.cs-gc b { color: #8fd16a; }
.cs-fg { display: grid; grid-template-columns: 1.7fr 1fr; gap: 10px; height: 250px; }
.cs-fs { display: grid; grid-template-rows: repeat(3, 1fr); gap: 10px; min-height: 0; }
.cs-ft { position: relative; overflow: hidden; border-radius: 6px; cursor: pointer; min-height: 0;
  background: radial-gradient(ellipse at 70% 55%, color-mix(in srgb, var(--rc) 34%, transparent), transparent 62%), linear-gradient(135deg, #2a2e35, #17191d 70%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); transition: box-shadow .15s, transform .15s; }
.cs-ft::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--rc); }
.cs-ft:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 70%, transparent), 0 8px 24px rgba(0,0,0,.45); }
.cs-ft img { position: absolute; right: 4%; top: 50%; transform: translateY(-50%) rotate(-6deg); max-width: 62%; max-height: 82%; object-fit: contain; filter: drop-shadow(0 12px 16px rgba(0,0,0,.65)); transition: transform .25s; }
.cs-ft:hover img { transform: translateY(-52%) rotate(-4deg) scale(1.05); }
.cs-ft-t { position: absolute; left: 18px; top: 16px; bottom: 16px; display: flex; flex-direction: column; max-width: 52%; z-index: 1; }
.cs-ft-r { font: 700 11px Rajdhani, sans-serif; letter-spacing: 1.8px; text-transform: uppercase; color: var(--rc); }
.cs-ft-t b { font: 700 30px Rajdhani, sans-serif; color: #fff; line-height: 1.02; margin-top: 2px; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.cs-ft-t p { margin: 6px 0 0; font: 500 13px Rajdhani, sans-serif; color: #aab3bb; }
.cs-ft-p { margin-top: auto; display: flex; align-items: center; gap: 2px; flex-wrap: wrap; font: 700 22px Rajdhani, sans-serif; color: #fff; }
.cs-ft-p small { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; font-size: 12px; color: #ff9d8f; }
.cs-ft.sm img { max-width: 50%; right: 3%; }
.cs-ft.sm .cs-ft-t { left: 12px; top: 8px; bottom: 9px; max-width: 58%; }
.cs-ft.sm .cs-ft-t b { font-size: 17px; }
.cs-ft.sm .cs-ft-p { font-size: 16px; }
.cs-dots { position: absolute; right: 14px; bottom: 12px; display: flex; gap: 5px; z-index: 2; }
.cs-dots i { width: 18px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.28); cursor: pointer; }
.cs-dots i.on { background: #fff; }
.cs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 8px; }
.cs-grid .empty { grid-column: 1 / -1; padding: 40px; text-align: center; color: var(--cs-mut); }
.cs-card { position: relative; display: flex; flex-direction: column; border-radius: 4px; overflow: hidden; cursor: pointer;
  background: linear-gradient(180deg, #31353c 0%, #24272d 62%, #1d1f24 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); transition: transform .12s, box-shadow .12s, filter .12s; }
.cs-card:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 8px 18px rgba(0,0,0,.5); }
.cs-card.sel { box-shadow: inset 0 0 0 2px #e8eaec, 0 0 18px color-mix(in srgb, var(--rc) 40%, transparent); }
.cs-img { position: relative; height: 112px; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--rc) 30%, transparent), transparent 70%); }
.cs-img img { max-width: 88%; max-height: 96px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0,0,0,.6)); transition: transform .2s; }
.cs-card:hover .cs-img img { transform: scale(1.06); }
.cs-card.hi .cs-img::before { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, color-mix(in srgb, var(--rc) 22%, transparent) 48%, transparent 60%); background-size: 260% 100%; animation: rarShine 5s linear infinite; pointer-events: none; }
.cs-meta { position: relative; padding: 8px 10px 8px; background: rgba(0,0,0,.28); border-top: 4px solid var(--rc); }
.cs-n { font: 700 15px Rajdhani, sans-serif; color: #eef1f3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-s { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 1px; font: 600 12px Rajdhani, sans-serif; color: var(--cs-mut); }
.cs-s span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: color-mix(in srgb, var(--rc) 55%, #8a949e); }
.cs-s b { font: 700 15px Rajdhani, sans-serif; color: #fff; white-space: nowrap; }
.cs-s b.no { color: #c7746a; }
.cs-flag { position: absolute; top: 6px; left: 6px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 3px; font: 700 10px Rajdhani, sans-serif; letter-spacing: 1px; background: rgba(0,0,0,.65); }
.cs-flag.ok { color: #9be07a; }
.cs-flag.lk { color: #ffb0a4; }
.cs-card.own { filter: saturate(.55) brightness(.82); }
.cs-card.own:hover, .cs-card.own.sel { filter: none; }
.cs-card.locked .cs-img img { filter: grayscale(.85) brightness(.55) drop-shadow(0 6px 8px rgba(0,0,0,.6)); }
/* sağ: inceleme paneli */
#page-shop .cs-detail { display: flex; flex-direction: column; min-height: 0; overflow: hidden; border: 0; border-left: 1px solid var(--cs-line); border-radius: 0; background: rgba(0,0,0,.25); }
#page-shop .cs-detail .detail-stage { flex: none; height: 46%; min-height: 220px; border-bottom: 0;
  background: radial-gradient(ellipse at 50% 70%, color-mix(in srgb, var(--rc) 36%, transparent), transparent 62%), linear-gradient(180deg, #24282e, #16181c); }
#page-shop .cs-detail .detail-stage::after { left: 0; right: 0; height: 4px; background: var(--rc); }
#page-shop .cs-detail .detail-body { padding: 14px 18px 18px; }
#page-shop .cs-detail .detail-body h2 { font: 700 34px Rajdhani, sans-serif; letter-spacing: .5px; }
#page-shop .cs-detail .detail-body .type { font-size: 12px; }
#page-shop .mk-rar { border-radius: 3px; letter-spacing: 1.6px; text-transform: uppercase; }
#page-shop .mk-buy { background: rgba(0,0,0,.35); border-radius: 6px; }
#page-shop .mk-buybtn { border-radius: 4px !important; color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,.4);
  background: linear-gradient(180deg, #78c043, #4a8f22) !important; box-shadow: 0 4px 16px rgba(91,163,43,.35), inset 0 1px 0 rgba(255,255,255,.25); }
#page-shop .mk-buybtn:hover:not(:disabled) { box-shadow: 0 6px 22px rgba(91,163,43,.55), inset 0 1px 0 rgba(255,255,255,.25); }
#page-shop .mk-buybtn:disabled { color: var(--cs-mut) !important; text-shadow: none; }
/* envanterdeki üst nadirlik parıltısı yeni basamaklara */
.item.rarity-5::before, .item.rarity-6::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, color-mix(in srgb, var(--rc) 20%, transparent) 45%, transparent 60%); background-size: 250% 100%; animation: rarShine 4.5s linear infinite; }
@media (max-width: 1400px) { .cs-body { grid-template-columns: 200px minmax(0, 1fr) 350px; } .cs-ft-t b { font-size: 24px; } }
@media (max-width: 1100px) {
  .cs-body { grid-template-columns: 1fr; height: auto; }
  .cs-side { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--cs-line); gap: 10px; }
  .cs-side .cs-sec, .cs-search { flex: 1 1 200px; }
  .cs-main { overflow: visible; }
  #page-shop .cs-detail { border-left: 0; border-top: 1px solid var(--cs-line); }
  #page-shop .cs-detail .detail-stage { height: 300px; }
  .cs-fg { grid-template-columns: 1fr; height: auto; } .cs-ft.big { height: 210px; } .cs-fs { grid-template-rows: none; grid-template-columns: repeat(3, 1fr); } .cs-ft.sm { height: 110px; }
}
@media (max-width: 720px) {
  .cs-top { flex-wrap: wrap; gap: 8px; padding: 8px 12px 0; } .cs-title { border: 0; padding: 0; } .cs-wallet { margin: 0 0 0 auto; padding: 6px 12px; } .cs-tabs { flex-basis: 100%; min-height: 42px; }
  .cs-fs { grid-template-columns: 1fr; } .cs-ft.sm img { max-width: 40%; }
  .cs-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
/* market: tür bölümleri + kart üstü mini özellikler */
#shop-items.grouped { display: block; }
.cs-grp { margin-bottom: 18px; }
.cs-grp-h { display: flex; align-items: center; gap: 10px; margin: 4px 2px 9px; }
.cs-grp-h img { height: 18px; width: 56px; object-fit: contain; opacity: .8; filter: brightness(1.6) drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.cs-grp-h b { font: 700 15px Rajdhani, sans-serif; letter-spacing: 2.4px; text-transform: uppercase; color: #e9ecef; }
.cs-grp-h em { font: 700 11px Rajdhani, sans-serif; font-style: normal; color: #9aa4ad; padding: 1px 8px; border-radius: 999px; background: rgba(255,255,255,.07); }
.cs-grp-h i { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.16), transparent); }
.cs-sub img { width: 40px; height: 13px; object-fit: contain; opacity: .55; flex: none; filter: brightness(1.5); }
.cs-sub.on img { opacity: 1; }
.cs-st { position: absolute; left: 8px; right: 8px; bottom: 6px; display: grid; gap: 3px; padding: 6px 7px; border-radius: 4px; background: rgba(8,9,11,.82); backdrop-filter: blur(4px); opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; pointer-events: none; }
.cs-card:hover .cs-st, .cs-card.sel .cs-st { opacity: 1; transform: none; }
.cs-st div { display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 6px; }
.cs-st span { font: 700 9px Rajdhani, sans-serif; letter-spacing: 1.2px; color: #9aa4ad; }
.cs-st i { height: 4px; border-radius: 2px; background: rgba(255,255,255,.1); overflow: hidden; }
.cs-st i b { display: block; height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--rc) 60%, #fff), var(--rc)); }
@media (hover: none) { .cs-card:not(.sel) .cs-st { display: none; } }
/* ================= ENVANTER · CS2 donanım düzeni ================= */
#page-inv { overflow-y: auto; }
#page-inv .mk.cs { height: auto; }
#page-inv .mk.cs .cs-body { grid-template-columns: 270px minmax(0, 1fr) 420px; }
.cs-coll { display: flex; align-items: baseline; gap: 6px; margin: auto 0; padding: 6px 14px; border-radius: 6px; background: rgba(0,0,0,.35); border: 1px solid var(--cs-line); white-space: nowrap; }
.cs-coll span { font: 700 10px Rajdhani, sans-serif; letter-spacing: 2px; color: var(--cs-mut); margin-right: 4px; }
.cs-coll b { font: 700 20px Rajdhani, sans-serif; color: #fff; }
.cs-coll em { font: 600 13px Rajdhani, sans-serif; font-style: normal; color: var(--cs-mut); }
.cs-lo { display: flex; flex-direction: column; gap: 6px; }
.cs-slot { position: relative; display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 10px; min-height: 58px; padding: 6px 10px 6px 6px; border-radius: 4px; cursor: pointer; overflow: hidden;
  background: linear-gradient(90deg, color-mix(in srgb, var(--rc) 14%, #2a2e35), #1e2126 70%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), inset 3px 0 0 var(--rc); transition: box-shadow .12s, transform .12s, background .12s; }
.cs-slot:hover { transform: translateX(2px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), inset 3px 0 0 var(--rc); }
.cs-slot.on { background: linear-gradient(90deg, color-mix(in srgb, var(--rc) 26%, #30353d), #23272d 75%); box-shadow: inset 0 0 0 2px #e8eaec, inset 3px 0 0 var(--rc), 0 0 16px color-mix(in srgb, var(--rc) 30%, transparent); }
.cs-slot-k { position: absolute; top: 4px; left: 6px; font: 700 10px Rajdhani, sans-serif; color: #111; background: rgba(255,255,255,.7); border-radius: 3px; padding: 0 4px; z-index: 1; }
.cs-slot-img { height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 3px; background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--rc) 35%, transparent), transparent 75%), rgba(0,0,0,.25); }
.cs-slot-img img { max-width: 88px; max-height: 40px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0,0,0,.6)); }
.cs-slot-img.wt { font-size: 26px; }
.cs-slot-t { min-width: 0; display: flex; flex-direction: column; line-height: 1.1; }
.cs-slot-t small { font: 700 10px Rajdhani, sans-serif; letter-spacing: 1.8px; text-transform: uppercase; color: color-mix(in srgb, var(--rc) 60%, #8a949e); }
.cs-slot-t b { font: 700 15px Rajdhani, sans-serif; color: #eef1f3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-flag.eq { color: #111; background: #e8eaec; }
.cs-rn { font: 700 10px Rajdhani, sans-serif; font-style: normal; letter-spacing: .8px; color: var(--rc); white-space: nowrap; }
.cs-more { background: rgba(255,255,255,.02) !important; box-shadow: inset 0 0 0 1px dashed rgba(255,255,255,.15); border: 1px dashed rgba(255,255,255,.18); }
.cs-more .cs-img .ic { width: 34px; height: 34px; color: #cfd5da; opacity: .7; }
.cs-more .cs-meta { border-top-color: rgba(255,255,255,.15); }
#page-inv .cs-detail { display: flex; flex-direction: column; min-height: 0; overflow: hidden; border: 0; border-left: 1px solid var(--cs-line); border-radius: 0; background: rgba(0,0,0,.25); }
#page-inv .cs-detail .detail-stage { flex: none; height: 44%; min-height: 220px; border-bottom: 0;
  background: radial-gradient(ellipse at 50% 70%, color-mix(in srgb, var(--rc) 36%, transparent), transparent 62%), linear-gradient(180deg, #24282e, #16181c); }
#page-inv .cs-detail .detail-stage::after { left: 0; right: 0; height: 4px; background: var(--rc); }
#page-inv .cs-detail .detail-body { padding: 14px 18px 18px; }
#page-inv .cs-detail .detail-body h2 { font: 700 32px Rajdhani, sans-serif; letter-spacing: .5px; }
#page-inv .wt-cards { grid-column: 1 / -1; }
@media (max-width: 1400px) { #page-inv .mk.cs .cs-body { grid-template-columns: 230px minmax(0, 1fr) 360px; } .cs-slot { grid-template-columns: 70px 1fr; } .cs-slot-img img { max-width: 68px; } }
@media (max-width: 1100px) {
  #page-inv .mk.cs .cs-body { grid-template-columns: 1fr; }
  #page-inv .cs-lo { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  #page-inv .cs-slot { flex: 0 0 200px; }
  #page-inv .cs-detail { border-left: 0; border-top: 1px solid var(--cs-line); }
  #page-inv .cs-detail .detail-stage { height: 300px; }
}
/* ================= OYUN İÇİ · CS2 silah seçimi ================= */
#wsel { position: absolute; right: 22px; top: 50%; transform: translate(14px, -46%); display: flex; flex-direction: column; gap: 4px; width: 250px; z-index: 12; pointer-events: none; opacity: 0; transition: opacity .25s, transform .25s; }
#wsel.show { opacity: 1; transform: translate(0, -46%); transition: opacity .08s, transform .12s; }
#hud.air #wsel, #hud.in-veh #wsel { display: none; }
.ws-row { position: relative; display: grid; grid-template-columns: 1fr; padding: 6px 12px 7px; border-radius: 3px; background: linear-gradient(270deg, rgba(10,12,15,.72), rgba(10,12,15,.28)); opacity: .5; text-align: right; }
.ws-row::after { content: ''; position: absolute; right: 0; top: 4px; bottom: 4px; width: 3px; border-radius: 2px; background: var(--rc); opacity: .6; }
.ws-row.on { opacity: 1; background: linear-gradient(270deg, rgba(30,34,40,.92), rgba(30,34,40,.45)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.ws-row.on::after { opacity: 1; box-shadow: 0 0 10px var(--rc); }
.ws-row.off { opacity: .25; }
.ws-t { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.ws-t small { font: 700 10px Rajdhani, sans-serif; letter-spacing: 1.8px; color: #9aa4ad; }
.ws-k { font: 700 11px Rajdhani, sans-serif; color: #111; background: rgba(255,255,255,.75); border-radius: 3px; padding: 0 5px; }
.ws-row.on .ws-k { background: #fff; }
.ws-a { display: flex; justify-content: flex-end; align-items: center; height: 40px; }
.ws-a img { max-height: 38px; max-width: 200px; object-fit: contain; filter: brightness(1.15) drop-shadow(0 2px 3px rgba(0,0,0,.7)); }
.ws-row:not(.on) .ws-a img { filter: grayscale(.6) brightness(1.4) drop-shadow(0 2px 3px rgba(0,0,0,.7)); }
.ws-ic svg { width: 66px; height: 22px; }
.ws-nades { display: flex; gap: 8px; }
.ws-nd { position: relative; display: flex; flex-direction: column; align-items: center; width: 40px; }
.ws-nd i { font-style: normal; font-size: 20px; line-height: 26px; height: 26px; color: #fff; }
.ws-nd i svg { width: 60px; height: 20px; margin: 3px -10px 0; }
.ws-nd.flash i { color: #fff7c8; text-shadow: 0 0 8px rgba(255,240,170,.8); }
.ws-nd em { font: 700 9px Rajdhani, sans-serif; font-style: normal; color: #9aa4ad; }
.ws-nd small { position: absolute; top: -2px; right: 0; font: 700 10px Rajdhani, sans-serif; color: #ffd36a; }
.ws-nd.off { opacity: .3; }
.ws-row b { font: 700 14px Rajdhani, sans-serif; color: #eef1f3; letter-spacing: .4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 3px #000; }
/* doğuş seçimi: CS2 satın alma menüsü görünümü */
#pick { bottom: auto; top: 50%; transform: translate(-50%, -50%); padding: 16px 18px 14px; border-radius: 8px; background: linear-gradient(180deg, rgba(22,25,30,.94), rgba(12,14,17,.94)); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 20px 60px rgba(0,0,0,.6); backdrop-filter: blur(6px); }
#pick .pk-title { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; margin: 0 2px 12px; font: 700 22px Rajdhani, sans-serif; letter-spacing: 3px; color: #fff; text-shadow: none; text-align: left; }
#pick .pk-title span { font-size: 11px; letter-spacing: 2.6px; color: #8a949e; }
#pick .pk-row { gap: 8px; }
#pick .pk-card { width: 220px; padding: 10px 12px 12px; border: 0; border-radius: 4px; text-align: left; overflow: hidden;
  background: radial-gradient(ellipse at 50% 60%, color-mix(in srgb, var(--rc) 22%, transparent), transparent 70%), linear-gradient(180deg, #31353c, #1f2227); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
#pick .pk-card::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--rc); }
#pick .pk-card:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
#pick .pk-card.sel { box-shadow: inset 0 0 0 2px #e8eaec, 0 0 22px color-mix(in srgb, var(--rc) 40%, transparent); }
#pick .pk-k { left: auto; right: 8px; top: 8px; width: 20px; height: 20px; border-radius: 3px; background: rgba(255,255,255,.8); font: 700 13px/20px Rajdhani, sans-serif; text-align: center; }
#pick .pk-cat { color: #9aa4ad; font-size: 11px; letter-spacing: 2px; }
#pick .pk-rar { font: 700 10px Rajdhani, sans-serif; letter-spacing: 1.4px; color: var(--rc); text-transform: uppercase; margin-top: 1px; }
#pick .pk-card img { height: 70px; margin: 4px 0 2px; }
#pick .pk-nm { font-size: 17px; }
#pick .pk-st i { background: linear-gradient(90deg, color-mix(in srgb, var(--rc) 55%, #fff), var(--rc)); }
#pick .pk-hint { text-align: left; margin: 10px 2px 0; color: #9aa4ad; text-shadow: none; }
#pick .pk-time { width: auto; margin: 8px 2px 0; }
#pick .pk-time i { background: #e8eaec; }
@media (max-width: 900px) { #pick { padding: 10px; } #pick .pk-card { width: 150px; } #wsel { display: none; } }
#pick { animation: pkIn2 .2s ease-out; }
@keyframes pkIn2 { from { opacity: 0; transform: translate(-50%, -46%); } to { opacity: 1; transform: translate(-50%, -50%); } }
/* ================= B · CS2 satın alma menüsü ================= */
#buy { position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, rgba(0,0,0,.35), rgba(0,0,0,.7)); pointer-events: auto; animation: byIn .16s ease-out; }
#buy.hidden { display: none; }
@keyframes byIn { from { opacity: 0; } to { opacity: 1; } }
.by-panel { width: min(1180px, 96vw); height: min(680px, 90vh); display: flex; flex-direction: column; border-radius: 8px; overflow: hidden;
  background: linear-gradient(180deg, rgba(26,29,34,.97), rgba(14,16,19,.97)); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 30px 80px rgba(0,0,0,.7); animation: byPan .2s ease-out; }
@keyframes byPan { from { transform: scale(.97); } to { transform: none; } }
.by-top { display: flex; align-items: center; gap: 18px; padding: 10px 18px; background: linear-gradient(180deg, rgba(42,46,53,.95), rgba(26,29,34,.95)); border-bottom: 1px solid rgba(0,0,0,.6); }
.by-title { display: flex; flex-direction: column; line-height: 1; }
.by-title small { font: 700 10px Rajdhani, sans-serif; letter-spacing: 2.6px; color: #8a949e; }
.by-title b { font: 700 26px Rajdhani, sans-serif; letter-spacing: 4px; color: #fff; }
.by-time { margin-left: auto; font: 700 13px Rajdhani, sans-serif; letter-spacing: 1px; color: #9be07a; padding: 4px 10px; border-radius: 4px; background: rgba(120,200,90,.1); border: 1px solid rgba(120,200,90,.3); }
.by-time.late { color: #ffcf6e; background: rgba(255,200,90,.08); border-color: rgba(255,200,90,.3); }
.by-gold { display: flex; align-items: center; gap: 6px; font: 700 22px Rajdhani, sans-serif; color: #ffd36a; padding: 2px 12px; border-radius: 4px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,200,80,.25); }
.by-gold span { color: #ffc847; }
.by-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 250px 1fr; }
.by-cats { display: flex; flex-direction: column; gap: 4px; padding: 12px 10px; background: rgba(0,0,0,.25); border-right: 1px solid rgba(255,255,255,.06); }
.by-cat { position: relative; display: grid; grid-template-columns: 22px 64px 1fr; align-items: center; gap: 8px; padding: 10px 10px; border: 0; border-radius: 4px; background: rgba(255,255,255,.03); color: #d6dbe0; text-align: left; cursor: pointer; transition: background .12s, box-shadow .12s; }
.by-cat:hover { background: rgba(255,255,255,.08); }
.by-cat.on { background: linear-gradient(90deg, rgba(255,255,255,.16), rgba(255,255,255,.05)); box-shadow: inset 3px 0 0 #e8eaec; color: #fff; }
.by-cat img { width: 64px; height: 20px; object-fit: contain; filter: brightness(1.5) drop-shadow(0 1px 2px #000); opacity: .75; }
.by-cat.on img { opacity: 1; }
.by-gi { font-size: 18px; text-align: center; color: #fff7c8; }
.by-cat b { display: block; font: 700 14px Rajdhani, sans-serif; letter-spacing: 1.6px; }
.by-cat small { font: 600 11px Rajdhani, sans-serif; color: #8a949e; }
.by-k { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 3px; background: rgba(255,255,255,.18); color: #fff; font: 700 12px Rajdhani, sans-serif; }
.step-cat .by-cat .by-k { background: #e8eaec; color: #111; box-shadow: 0 0 8px rgba(255,255,255,.35); }
.step-item .by-it .by-k { background: #e8eaec; color: #111; }
.by-main { display: flex; flex-direction: column; min-height: 0; padding: 12px 14px; }
.by-h { display: flex; align-items: baseline; gap: 10px; margin: 0 2px 10px; }
.by-h b { font: 700 16px Rajdhani, sans-serif; letter-spacing: 2.6px; color: #fff; }
.by-h small { font: 600 12px Rajdhani, sans-serif; color: #8a949e; }
.by-items { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 8px; align-content: start; padding: 2px; }
.by-it { position: relative; display: flex; flex-direction: column; padding: 8px 10px 12px; border-radius: 4px; cursor: pointer; overflow: hidden;
  background: radial-gradient(ellipse at 50% 38%, color-mix(in srgb, var(--rc, #8e99a3) 20%, transparent), transparent 70%), linear-gradient(180deg, #31353c, #1f2227); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); transition: transform .1s, box-shadow .1s, filter .1s; }
.by-it::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--rc, #8e99a3); }
.by-it:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), 0 8px 18px rgba(0,0,0,.45); }
.by-it.held { box-shadow: inset 0 0 0 2px #e8eaec, 0 0 18px color-mix(in srgb, var(--rc) 35%, transparent); }
.by-it.no-own { filter: saturate(.5); }
.by-it.no-own:hover { filter: none; }
.by-it.lock { filter: grayscale(.9) brightness(.7); cursor: not-allowed; }
.by-it .by-k { position: absolute; top: 7px; left: 8px; z-index: 1; }
.by-fl { position: absolute; top: 7px; right: 8px; z-index: 1; display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 3px; font: 700 10px Rajdhani, sans-serif; letter-spacing: 1px; background: rgba(0,0,0,.6); }
.by-fl.held { background: #e8eaec; color: #111; }
.by-fl.eq { color: #9be07a; }
.by-fl.lk { color: #ffb0a4; }
.by-fl.pr { color: #ffd36a; font-size: 12px; }
.by-fl.pr.no { color: #c7746a; }
.by-img { height: 74px; display: flex; align-items: center; justify-content: center; margin: 14px 0 4px; }
.by-img img { max-width: 92%; max-height: 72px; object-fit: contain; filter: drop-shadow(0 5px 7px rgba(0,0,0,.65)); transition: transform .15s; }
.by-it:hover .by-img img { transform: scale(1.05); }
.by-it > b { font: 700 15px Rajdhani, sans-serif; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.by-it > small { font: 600 11px Rajdhani, sans-serif; color: color-mix(in srgb, var(--rc, #8e99a3) 55%, #8a949e); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px; }
.by-st { display: grid; grid-template-columns: 50px 1fr; gap: 3px 6px; align-items: center; }
.by-st span { font: 700 9px Rajdhani, sans-serif; letter-spacing: 1.2px; color: #8a949e; }
.by-st i { height: 4px; border-radius: 2px; background: rgba(255,255,255,.1); overflow: hidden; }
.by-st i b { display: block; height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--rc) 55%, #fff), var(--rc)); }
.by-conf { position: absolute; inset: auto 0 4px 0; padding: 8px 6px; text-align: center; font: 700 14px Rajdhani, sans-serif; letter-spacing: 1.5px; color: #fff; background: linear-gradient(180deg, #78c043, #4a8f22); animation: byConf .9s ease-in-out infinite alternate; }
.by-conf em { display: block; font: 600 10px Rajdhani, sans-serif; font-style: normal; letter-spacing: .5px; opacity: .85; }
@keyframes byConf { to { filter: brightness(1.15); } }
.by-it.gear { cursor: default; align-items: center; text-align: center; padding-top: 20px; }
.by-it.gear::after { background: #c9ccd0; }
.by-it.gear.none { opacity: .45; }
.by-gear-ic { height: 60px; display: grid; place-items: center; font-size: 40px; color: #fff; }
.by-gear-ic svg { width: 120px; height: 40px; }
.by-cnt { margin-top: 6px; font: 700 22px Rajdhani, sans-serif; color: #ffd36a; }
.by-note { grid-column: 1 / -1; padding: 10px 4px; font: 600 13px Rajdhani, sans-serif; color: #8a949e; }
.by-foot { display: flex; gap: 22px; flex-wrap: wrap; padding: 8px 18px; border-top: 1px solid rgba(255,255,255,.06); background: rgba(0,0,0,.3); font: 600 12px Rajdhani, sans-serif; color: #8a949e; }
.by-foot kbd { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 3px; padding: 0 5px; color: #fff; font: 700 11px Rajdhani, sans-serif; }
@media (max-width: 800px) { .by-body { grid-template-columns: 1fr; } .by-cats { flex-direction: row; overflow-x: auto; } .by-cat { grid-template-columns: 20px 1fr; flex: 0 0 auto; } .by-cat img, .by-gi { display: none; } .by-foot { display: none; } .by-items { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
/* satın alma: sanal imleç, bölge göstergesi, süre çubuğu */
#buy-cur { position: fixed; left: 0; top: 0; z-index: 60; width: 18px; height: 22px; margin: -1px 0 0 -1px; pointer-events: none;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 22'%3E%3Cpath d='M1 1l15 11.5-6.6.9 3.9 7.4-2.6 1.3-3.9-7.5L1 19z' fill='%23fff' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E"); filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
#buy-cur.hidden { display: none; }
.by-it.hov { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 8px 18px rgba(0,0,0,.45); filter: none; }
.by-cat.hov { background: rgba(255,255,255,.1); }
.by-x { width: 32px; height: 32px; border: 0; border-radius: 4px; background: rgba(255,255,255,.06); color: #cfd5da; font-size: 16px; cursor: pointer; }
.by-x:hover, .by-x.hov { background: rgba(255,90,70,.25); color: #fff; }
.by-time { position: relative; overflow: hidden; min-width: 210px; }
.by-time i { position: absolute; left: 0; bottom: 0; height: 2px; background: currentColor; transition: width .2s linear; }
.by-time.late { color: #ff8a6e; background: rgba(255,110,80,.1); border-color: rgba(255,110,80,.35); }
#buyzone { position: absolute; left: 22px; bottom: 150px; z-index: 11; display: flex; align-items: center; gap: 10px; padding: 8px 14px 10px 10px; border-radius: 4px; overflow: hidden;
  background: linear-gradient(90deg, rgba(20,24,28,.82), rgba(20,24,28,.35)); box-shadow: inset 3px 0 0 #9be07a; pointer-events: none; animation: bzIn .25s ease-out; }
#buyzone.hidden { display: none; }
@keyframes bzIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
#buyzone svg { width: 26px; height: 26px; fill: none; stroke: #9be07a; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#buyzone svg circle { fill: #9be07a; stroke: none; }
#buyzone span { display: block; font: 700 13px Rajdhani, sans-serif; letter-spacing: 1.6px; color: #fff; }
#buyzone span kbd { background: #e8eaec; color: #111; border-radius: 3px; padding: 0 5px; margin-right: 4px; font: 700 12px Rajdhani, sans-serif; }
#buyzone b { font: 700 12px Rajdhani, sans-serif; color: #9be07a; }
#buyzone em { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.1); }
#buyzone em i { display: block; height: 100%; background: #9be07a; transition: width .2s linear; }
#hud.air #buyzone, #hud.in-veh #buyzone { display: none; }
@media (max-width: 900px) { #buyzone { bottom: auto; top: 90px; } }
/* ================= ENVANTER · silah inceleme + modifikasyon ================= */
#page-inv .cs-detail .detail-stage { height: 46%; min-height: 250px;
  background:
    radial-gradient(ellipse at 50% 62%, color-mix(in srgb, var(--rc) 34%, transparent), transparent 60%),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 100% 28px,
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 28px 100%,
    linear-gradient(180deg, #262a31, #15171b); }
#page-inv .cs-detail .detail-stage::before { content: 'SÜRÜKLE · DÖNDÜR'; position: absolute; right: 12px; bottom: 10px; z-index: 2; font: 700 9px Rajdhani, sans-serif; letter-spacing: 2px; color: rgba(255,255,255,.35); pointer-events: none; }
#page-inv .detail-body { display: flex; flex-direction: column; gap: 12px; }
#page-inv .detail-body .type { margin-bottom: -6px; }
.iv-eq .btn { width: 100%; padding: 10px !important; font-size: 15px !important; letter-spacing: 1.5px; }
.iv-eq .btn:disabled { background: rgba(155,224,122,.1) !important; color: #9be07a !important; border: 1px solid rgba(155,224,122,.3) !important; opacity: 1; }
.iv-sec { display: flex; flex-direction: column; gap: 8px; }
.iv-sh { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 5px; border-bottom: 1px solid rgba(255,255,255,.07); }
.iv-sh b { font: 700 12px Rajdhani, sans-serif; letter-spacing: 2.4px; color: #e9ecef; }
.iv-sh span { font: 600 11px Rajdhani, sans-serif; color: #8a949e; }
.mod-slot { display: flex; flex-direction: column; gap: 5px; }
.mod-h { display: flex; align-items: baseline; gap: 8px; }
.mod-h b { font: 700 11px Rajdhani, sans-serif; letter-spacing: 1.8px; text-transform: uppercase; color: #9aa4ad; }
.mod-h span { font: 600 12px Rajdhani, sans-serif; color: #dfe4e8; }
.mod-row { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 4px; scrollbar-width: thin; }
.mod { position: relative; flex: 0 0 96px; display: flex; flex-direction: column; align-items: stretch; gap: 1px; padding: 5px 6px 7px; border: 0; border-radius: 4px; cursor: pointer; text-align: left; color: #dfe4e8;
  background: linear-gradient(180deg, #30343b, #202328); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); transition: transform .1s, box-shadow .1s, filter .1s; }
.mod:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
.mod-img { height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 3px; background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,.08), transparent 70%); }
.mod-img img { max-width: 84px; max-height: 38px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.mod-none { font-size: 18px; color: #6f7a85; }
.mod b { font: 700 12px Rajdhani, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mod small { font: 700 10px Rajdhani, sans-serif; letter-spacing: .6px; color: #8a949e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mod.on { box-shadow: inset 0 0 0 2px #9be07a; background: linear-gradient(180deg, rgba(155,224,122,.16), #202328); }
.mod.on small { color: #9be07a; }
.mod.buy small { color: #ffd36a; }
.mod.buy { filter: saturate(.7); }
.mod.buy:hover { filter: none; }
.mod.lock { filter: grayscale(.9) brightness(.7); }
.mod.lock small { color: #ffb0a4; }
.mod.try { box-shadow: inset 0 0 0 2px #6fb6ff, 0 0 14px rgba(111,182,255,.35); filter: none; animation: modTry 1.2s ease-in-out infinite alternate; }
.mod.try small { color: #6fb6ff; }
@keyframes modTry { to { box-shadow: inset 0 0 0 2px #a9d4ff, 0 0 20px rgba(111,182,255,.55); } }
.mod-try { position: sticky; bottom: -18px; z-index: 3; display: flex; align-items: center; gap: 8px; margin: 0 -18px -18px; padding: 10px 18px 12px;
  background: linear-gradient(180deg, rgba(18,26,36,.96), rgba(12,18,26,.98)); border-top: 1px solid rgba(111,182,255,.4); box-shadow: 0 -10px 24px rgba(0,0,0,.45); }
.mod-try-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.mod-try-t small { font: 700 10px Rajdhani, sans-serif; letter-spacing: 1.8px; color: #6fb6ff; }
.mod-try-t b { font: 700 16px Rajdhani, sans-serif; color: #fff; }
.mod-try-t span { font: 500 12px Rajdhani, sans-serif; color: #9aa4ad; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mod-buy { flex: none; padding: 9px 14px !important; border: 0 !important; border-radius: 4px !important; color: #fff !important; font: 700 14px Rajdhani, sans-serif !important; letter-spacing: 1px;
  background: linear-gradient(180deg, #78c043, #4a8f22) !important; box-shadow: 0 4px 14px rgba(91,163,43,.35); }
.mod-buy:disabled { background: rgba(255,255,255,.08) !important; color: #9aa4ad !important; box-shadow: none; }
.mod-x { flex: none; width: 34px; padding: 8px 0 !important; }
#page-inv .statbars .sb em.up { color: #4fd37a; } #page-inv .statbars .sb em.down { color: #ff6a5c; }
/* market: silaha özel eklenti satırları */
.mk-aws { margin-top: 12px; gap: 5px; }
.mk-aw { display: grid; grid-template-columns: 78px 1fr auto; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 4px; cursor: pointer;
  background: linear-gradient(90deg, color-mix(in srgb, var(--rc) 12%, #2a2e35), #1e2126 75%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), inset 3px 0 0 var(--rc); transition: box-shadow .12s; }
.mk-aw:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), inset 3px 0 0 var(--rc); }
.mk-aw.sel { box-shadow: inset 0 0 0 2px #6fb6ff, inset 3px 0 0 var(--rc); }
.mk-aw img { width: 78px; height: 24px; object-fit: contain; filter: brightness(1.4) drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.mk-aw b { display: block; font: 700 14px Rajdhani, sans-serif; color: #eef1f3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-aw small { font: 600 11px Rajdhani, sans-serif; color: #8a949e; }
.mk-aw em.ok { font: 700 11px Rajdhani, sans-serif; font-style: normal; letter-spacing: 1px; color: #9be07a; padding: 0 6px; }
.mk-aw-b { padding: 5px 12px !important; font: 700 13px Rajdhani, sans-serif !important; border-radius: 4px !important; }
.mk-aw-b.buy { color: #fff !important; border: 0 !important; background: linear-gradient(180deg, #78c043, #4a8f22) !important; }
.mk-aw-b.buy:disabled { background: rgba(255,255,255,.08) !important; color: #8a949e !important; }
#spawnprot { text-align: center; padding: 6px 16px 7px; border-radius: 4px; background: linear-gradient(90deg, transparent, rgba(20,40,60,.6), transparent); text-shadow: 0 1px 4px #000; }
#spawnprot small { display: block; font: 600 11px Rajdhani, sans-serif; letter-spacing: 1px; color: #b9d6e6; margin-top: 1px; }
/* ================= B · CS2 satın alma çarkı ================= */
.bw { position: relative; width: min(600px, 88vmin); aspect-ratio: 1; animation: bwIn .18s ease-out; }
@keyframes bwIn { from { opacity: 0; transform: scale(.94) rotate(-4deg); } to { opacity: 1; transform: none; } }
.bw-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 18px 40px rgba(0,0,0,.6)); }
.bw-sl { fill: url(#bwg); stroke: rgba(255,255,255,.07); stroke-width: 1.2; cursor: pointer; transition: fill .12s, stroke .12s, transform .12s; transform-origin: 300px 300px; }
.bw-sl.cur { stroke: rgba(155,224,122,.45); }
.bw-sl:hover, .bw-sl.hov { fill: rgba(78,86,98,.96); stroke: rgba(255,255,255,.55); stroke-width: 2; transform: scale(1.03); }
.bw-ring { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 1; }
.bw-lb { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; width: 26%; text-align: center; pointer-events: none; transition: transform .12s; }
.bw-lb.hov { transform: translate(-50%, -50%) scale(1.08); }
.bw-lb img { width: 100%; max-height: 46px; object-fit: contain; filter: brightness(1.35) drop-shadow(0 3px 5px rgba(0,0,0,.7)); }
.bw-gi svg { width: 110px; height: 36px; }
.bw-lb b { font: 700 15px Rajdhani, sans-serif; letter-spacing: 1.8px; color: #fff; text-shadow: 0 2px 4px #000; white-space: nowrap; }
.bw-lb small { font: 700 11px Rajdhani, sans-serif; letter-spacing: 1px; color: #9aa4ad; }
.bw-lb.hov b { color: #fff; } .bw-lb.hov small { color: #dfe4e8; }
.bw-k { font: 700 11px Rajdhani, sans-serif; color: #111; background: #e8eaec; border-radius: 3px; padding: 0 6px; margin-bottom: 2px; box-shadow: 0 0 8px rgba(255,255,255,.3); }
.bw-c { position: absolute; left: 50%; top: 50%; width: 34%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; pointer-events: none;
  background: radial-gradient(circle, rgba(30,34,40,.97), rgba(14,16,19,.97)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 0 30px rgba(0,0,0,.6); }
.bw-c > small { font: 700 9px Rajdhani, sans-serif; letter-spacing: 2.6px; color: #8a949e; }
.bw-c > b { font: 700 20px Rajdhani, sans-serif; letter-spacing: 3px; color: #fff; line-height: 1; }
.bw-name { min-height: 30px; font: 600 11px Rajdhani, sans-serif; color: #9aa4ad; display: flex; flex-direction: column; justify-content: center; }
.bw-name b { font: 700 13px Rajdhani, sans-serif; letter-spacing: 1.4px; color: #9be07a; }
.bw-name em { font-style: normal; font-size: 10px; color: #8a949e; }
.bw-gold { font: 700 16px Rajdhani, sans-serif; color: #ffd36a; }
.bw-c .by-time { min-width: 0; width: 82%; margin: 3px 0 0; padding: 2px 6px; font-size: 10px; text-align: center; }
.bw-x { position: absolute; right: 2%; top: 2%; z-index: 2; }
.bw-foot { position: absolute; left: 50%; bottom: -46px; transform: translateX(-50%); display: flex; gap: 18px; white-space: nowrap; font: 600 12px Rajdhani, sans-serif; color: #b9c2ca; text-shadow: 0 1px 3px #000; }
.bw-foot kbd { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); border-radius: 3px; padding: 0 5px; color: #fff; font: 700 11px Rajdhani, sans-serif; }
.by-back { border: 0; padding: 7px 12px; border-radius: 4px; background: rgba(255,255,255,.08); color: #dfe4e8; font: 700 12px Rajdhani, sans-serif; letter-spacing: 1.4px; cursor: pointer; }
.by-back:hover, .by-back.hov { background: rgba(255,255,255,.18); color: #fff; }
@media (max-width: 700px) { .bw-lb b { font-size: 12px; } .bw-lb small { display: none; } .bw-foot { display: none; } .bw-c > b { font-size: 15px; } }
body.no-wolves .wolf-only { display: none !important; }

/* Portal Silahı nişangâhı: sol yarım halka mavi, sağ yarım turuncu; açık portal varsa dolu */
#portal-ch { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; transform: translate(-50%, -50%); pointer-events: none; }
#portal-ch i { position: absolute; top: 0; width: 15px; height: 34px; box-sizing: border-box; border: 3px solid; filter: drop-shadow(0 0 3px rgba(0,0,0,.7)); opacity: .55; transition: opacity .15s, background .15s; }
#portal-ch .pb { left: 0; border-color: #2a9dff; border-right: 0; border-radius: 17px 0 0 17px; }
#portal-ch .po { right: 0; border-color: #ff8a1a; border-left: 0; border-radius: 0 17px 17px 0; }
#portal-ch.b .pb { opacity: 1; background: rgba(42,157,255,.35); }
#portal-ch.o .po { opacity: 1; background: rgba(255,138,26,.35); }
#portal-ch::after { content: ''; position: absolute; left: 15px; top: 15px; width: 4px; height: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 3px #000; }
#portal-tip { position: absolute; top: 46px; left: 50%; transform: translateX(-50%); white-space: nowrap; font: 600 13px Rajdhani, 'Segoe UI', sans-serif; color: #e8eef4; text-shadow: 0 1px 3px #000; letter-spacing: .5px; }

/* ===== FIRESTORM: uçak gemisi sinematiği ve hava saldırısı ===== */
#fs-bars i { position: fixed; left: 0; right: 0; height: 0; background: #000; z-index: 24; transition: height .7s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
#fs-bars i:first-child { top: 0; } #fs-bars i:last-child { bottom: 0; }
body.fs-cine #fs-bars i { height: 12vh; }
body.fs-cine #hud, body.fs-cine #rs-ui, body.fs-cine #death-screen { opacity: 0; transition: opacity .4s; }
#fs-vig { position: fixed; inset: 0; z-index: 23; pointer-events: none; opacity: 0; transition: opacity .8s; background: radial-gradient(ellipse at 50% 50%, transparent 52%, rgba(0, 0, 0, .55) 100%); }
body.fs-cine #fs-vig { opacity: 1; }
#fs-fade { position: fixed; inset: 0; z-index: 26; pointer-events: none; opacity: 0; background: #000; }
#fs-heat { position: fixed; inset: 0; z-index: 22; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 50% 60%, rgba(255, 200, 120, .18) 0%, rgba(255, 110, 30, .35) 55%, rgba(120, 20, 0, .6) 100%); mix-blend-mode: screen; }
#fs-stamp { position: fixed; left: 5vw; bottom: calc(12vh + 20px); z-index: 25; pointer-events: none; white-space: pre; font: 600 clamp(12px, 1.3vw, 17px)/1.55 Rajdhani, monospace; letter-spacing: 4px; color: #eef2f6; text-shadow: 0 1px 4px #000; }
#fs-stamp b { color: #ffb347; font-weight: 700; }
#fs-cap { position: fixed; top: calc(12vh + 22px); left: 0; right: 0; text-align: center; z-index: 25; pointer-events: none; opacity: 0; transition: opacity .5s; font: 700 clamp(13px, 1.6vw, 20px) Rajdhani, sans-serif; letter-spacing: 8px; color: #fff; text-shadow: 0 0 14px rgba(255, 140, 40, .65), 0 2px 4px #000; }
#fs-cap.show { opacity: 1; }
#fs-title { position: fixed; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; z-index: 28; opacity: 0; pointer-events: none; font-family: var(--disp); }
#fs-title small { display: block; font: 700 clamp(12px, 1.4vw, 17px) Rajdhani, sans-serif; letter-spacing: 10px; color: #ffcf9a; text-shadow: 0 2px 6px #000; }
#fs-title b { display: block; font-size: clamp(64px, 13vw, 184px); line-height: .9; letter-spacing: .14em; font-weight: 500; background: linear-gradient(180deg, #fff8e2 0%, #ffd36a 30%, #ff7a1a 62%, #b8180a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 28px rgba(255, 110, 30, .75)) drop-shadow(0 6px 0 rgba(0, 0, 0, .6)); }
#fs-title span { display: block; margin-top: 8px; font: 700 clamp(13px, 1.6vw, 19px) Rajdhani, sans-serif; letter-spacing: 3px; color: #fff; text-shadow: 0 2px 6px #000; }
#fs-title span i { font-style: normal; }
#fs-title.show { animation: fsTitle 2.7s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes fsTitle { 0% { opacity: 0; transform: translateY(-50%) scale(1.7); filter: blur(12px); } 11% { opacity: 1; transform: translateY(-50%) scale(1); filter: blur(0); } 84% { opacity: 1; } 100% { opacity: 0; transform: translateY(-50%) scale(1.05); } }
#fs-warn { position: fixed; top: 86px; left: 50%; transform: translateX(-50%); z-index: 27; min-width: 360px; padding: 10px 26px 12px; text-align: center; border-radius: 6px; pointer-events: none; color: #fff; font-family: var(--font);
  background: repeating-linear-gradient(-45deg, rgba(255, 170, 0, .1) 0 12px, transparent 12px 24px), radial-gradient(ellipse at 50% 0%, rgba(170, 60, 10, .6), rgba(10, 8, 6, .92));
  border: 2px solid #ff8a1f; box-shadow: 0 0 30px rgba(255, 110, 30, .5); animation: rsWarnIn .45s cubic-bezier(.2, .9, .3, 1.3); }
#fs-warn.hidden { display: none; }
#fs-warn small { display: block; font: 700 13px Rajdhani, sans-serif; letter-spacing: 5px; color: #ffc27a; }
#fs-warn b { display: block; font-family: var(--disp); font-weight: 500; font-size: clamp(32px, 4.4vw, 54px); line-height: 1; letter-spacing: 4px; background: linear-gradient(180deg, #fff3cf, #ffb347 55%, #ff4a1a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 12px rgba(255, 120, 40, .6)); }
#fs-warn .fsw-n { font-family: var(--disp); font-size: clamp(52px, 7vw, 84px); line-height: .95; color: #fff; text-shadow: 0 0 22px rgba(255, 120, 40, .9), 0 3px 0 rgba(0, 0, 0, .6); }
#fs-warn .fsw-n.tick { animation: rsTick .9s ease-out; }
#fs-warn.last { border-color: #ff3a1a; animation: rsWarnLast .5s ease-in-out infinite alternate; }
#fs-warn.last .fsw-n { color: #ff7a50; }
#fs-warn span { display: block; font-size: 13px; font-weight: 700; letter-spacing: 1px; color: #f3e6d8; }
#fs-warn span i { font-style: normal; }
#fs-banner { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 21; padding: 5px 18px; border-radius: 4px; pointer-events: none; font: 700 14px Rajdhani, sans-serif; letter-spacing: 3px; color: #fff; white-space: nowrap; background: rgba(12, 8, 6, .78); border: 1px solid #ff8a1f; }
#fs-banner.hidden { display: none; }
#fs-banner.enemy { border-color: #ff3a1a; color: #ffd0c0; animation: fsBlink 1s ease-in-out infinite alternate; }
#fs-banner.ally { border-color: #5ad17a; color: #d8ffe2; }
#fs-banner b { color: #ffb347; }
@keyframes fsBlink { 0% { box-shadow: 0 0 6px rgba(255, 50, 20, .3); } 100% { box-shadow: 0 0 22px rgba(255, 50, 20, .85); } }
.kf-w.kf-fs { color: #ff9a3a; text-shadow: 0 0 8px rgba(255, 120, 30, .7); }

/* ---------- VIP oyuncu adı (lobi): akan altın parıltı + ışıma ---------- */
.vip-name { display: inline-flex; align-items: center; gap: .22em; vertical-align: baseline; position: relative; white-space: nowrap; }
.vip-name .vip-t {
  position: relative; font-weight: 800; letter-spacing: .02em;
  background: linear-gradient(100deg, #b8741a 0%, #ffd56a 18%, #fff6cf 30%, #ffc23a 42%, #ff8a3d 58%, #ffd56a 74%, #b8741a 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: vipShine 3.2s linear infinite;
  filter: drop-shadow(0 0 4px rgba(255, 170, 40, .55)) drop-shadow(0 1px 0 rgba(0, 0, 0, .55));
}
/* gezinen ışık süzmesi */
.vip-name .vip-t::after {
  content: attr(data-t); position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 0%, transparent 40%, rgba(255, 255, 255, .95) 50%, transparent 60%, transparent 100%);
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: vipSweep 2.8s ease-in-out infinite;
}
.lb-row .vip-name .vip-t, .pf-name .vip-name .vip-t, #p-name .vip-name .vip-t { font-size: 1.04em; }
@keyframes vipShine { to { background-position: -250% 0; } }
@keyframes vipSweep { 0%, 35% { background-position: 150% 0; } 75%, 100% { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) { .vip-name .vip-t, .vip-name .vip-t::after { animation: none; } }
/* ===== FIRESTORM pilot kurası (pasta dilimli çark) ===== */
#fs-draw { position: fixed; top: 74px; left: 50%; transform: translateX(-50%); z-index: 27; width: min(380px, 86vw); padding: 12px 16px 14px; text-align: center; pointer-events: none; color: #fff; border-radius: 10px;
  background: radial-gradient(ellipse at 50% 0%, rgba(150, 55, 10, .62), rgba(10, 8, 6, .9)); border: 2px solid #ff8a1f; box-shadow: 0 0 36px rgba(255, 110, 30, .45); animation: rsWarnIn .5s cubic-bezier(.2, .9, .3, 1.3); transition: opacity .45s, transform .45s; }
#fs-draw.hidden { display: none; }
#fs-draw.out { opacity: 0; transform: translateX(-50%) scale(.92); }
#fs-draw .fd-head small { display: block; font: 700 12px Rajdhani, sans-serif; letter-spacing: 5px; color: #ffc27a; }
#fs-draw .fd-head b { display: block; font-family: var(--disp); font-weight: 500; font-size: clamp(28px, 3.6vw, 40px); line-height: 1.05; letter-spacing: 4px; background: linear-gradient(180deg, #fff3cf, #ffb347 55%, #ff4a1a); -webkit-background-clip: text; background-clip: text; color: transparent; }
#fs-draw .fd-head span { display: block; margin-top: 2px; font: 700 13px Rajdhani, sans-serif; letter-spacing: 1px; color: #f3e6d8; }
#fs-draw .fd-head span .t-r { font-style: normal; color: #ff7a66; } #fs-draw .fd-head span .t-b { font-style: normal; color: #6fb6ff; }
#fs-draw .fd-wheel { position: relative; width: min(280px, 64vw); aspect-ratio: 1; margin: 10px auto 8px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .6)); }
#fs-draw canvas { width: 100%; height: 100%; display: block; }
#fs-draw .fd-ptr { position: absolute; left: 50%; top: -10px; width: 0; height: 0; transform: translateX(-50%); border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 30px solid #fff1cf; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .8)) drop-shadow(0 0 8px rgba(255, 150, 40, .9)); }
#fs-draw .fd-hub { position: absolute; left: 50%; top: 50%; width: 21%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; font-size: clamp(18px, 3vw, 26px);
  background: radial-gradient(circle at 35% 30%, #3a2c22, #0d0907); border: 3px solid #ffb347; box-shadow: 0 0 14px rgba(255, 140, 40, .7), inset 0 0 8px rgba(0, 0, 0, .8); color: #ffd28a; }
#fs-draw .fd-res { display: flex; gap: 8px; }
#fs-draw .fd-slot { flex: 1; padding: 5px 4px; border-radius: 6px; background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 170, 70, .35); transition: background .3s, border-color .3s, box-shadow .3s; }
#fs-draw .fd-slot small { display: block; font: 700 11px Rajdhani, sans-serif; letter-spacing: 3px; color: #ffc27a; }
#fs-draw .fd-slot b { display: block; font: 700 17px Rajdhani, sans-serif; letter-spacing: 1px; color: #8a7a6a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#fs-draw .fd-slot.on { background: rgba(255, 150, 40, .22); border-color: #ffb347; box-shadow: 0 0 14px rgba(255, 150, 40, .5); animation: rsTick .7s ease-out; }
#fs-draw .fd-slot.on b { color: #fff; }
#fs-draw .fd-slot.me { border-color: #7dffa8; box-shadow: 0 0 16px rgba(90, 255, 140, .55); }
#fs-draw .fd-slot.me b { color: #b4ffcb; }
#fs-warn .fsw-p { display: block; margin-top: 4px; font: 700 13px Rajdhani, sans-serif; font-style: normal; letter-spacing: 2px; color: #ffd9a8; }
#fs-warn .fsw-p b { display: inline; font: inherit; color: #fff; background: none; filter: none; letter-spacing: 1px; }
#fs-warn .fsw-p b.me { color: #7dffa8; }
/* ===== FIRESTORM pilot görünümü ===== */
#fs-phud { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 12; pointer-events: none; }
#fs-phud.hidden { display: none; }
body.fs-pilot #crosshair, body.fs-pilot #scope, body.fs-pilot #hp-box, body.fs-pilot #wolf-box, body.fs-pilot #ammo-box, body.fs-pilot #slots, body.fs-pilot #wsel, body.fs-pilot #nades,
body.fs-pilot #mm-wrap, body.fs-pilot #reload-txt, body.fs-pilot #spawnprot, body.fs-pilot #ads-dot, body.fs-pilot #breath, body.fs-pilot #veh-hud, body.fs-pilot #out-warn, body.fs-pilot #veh-prompt,
body.fs-pilot #dmg-dirs, body.fs-pilot #hitmarker, body.fs-pilot #vignette, body.fs-pilot #fs-banner { display: none !important; }
body.fs-tgp #game-canvas { filter: grayscale(1) contrast(1.45) brightness(1.08); }
body.fs-tgp #fs-phud { background: radial-gradient(ellipse at 50% 50%, transparent 58%, rgba(0, 0, 0, .55) 100%); }
#fs-phelp { position: fixed; left: 18px; top: 50%; transform: translateY(-50%); z-index: 13; pointer-events: none; padding: 10px 14px; border-radius: 6px; background: rgba(6, 14, 10, .72); border: 1px solid rgba(125, 255, 168, .45);
  font: 600 14px/1.75 Rajdhani, sans-serif; color: #d8ffe4; text-shadow: 0 1px 2px #000; }
#fs-phelp.hidden { display: none; }
#fs-phelp b { display: block; font-size: 13px; letter-spacing: 3px; color: #7dffa8; margin-bottom: 2px; }
#fs-phelp kbd { display: inline-block; min-width: 18px; padding: 0 5px; margin-right: 3px; border-radius: 3px; text-align: center; font: 700 12px/18px Rajdhani, sans-serif; color: #0b1a10; background: #a8f5c2; }