@font-face { font-family: 'Rajdhani'; font-weight: 500; font-display: swap; src: url(vendor/fonts/rajdhani-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'Rajdhani'; font-weight: 500; font-display: swap; src: url(vendor/fonts/rajdhani-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-0130, U+0132-02BA, U+1E00-1EFF; }
@font-face { font-family: 'Rajdhani'; font-weight: 600; font-display: swap; src: url(vendor/fonts/rajdhani-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'Rajdhani'; font-weight: 600; font-display: swap; src: url(vendor/fonts/rajdhani-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-0130, U+0132-02BA, U+1E00-1EFF; }
@font-face { font-family: 'Rajdhani'; font-weight: 700; font-display: swap; src: url(vendor/fonts/rajdhani-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'Rajdhani'; font-weight: 700; font-display: swap; src: url(vendor/fonts/rajdhani-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-0130, U+0132-02BA, U+1E00-1EFF; }

:root {
  /* Rajdhani yalnız Latin: Kiril, Japonca, Korece, Arapça sistem yazı tiplerine düşer (kutucuk/tofu olmasın) */
  --font: 'Rajdhani', system-ui, "Hiragino Sans", "Noto Sans JP", "Apple SD Gothic Neo", "Noto Sans KR", "Noto Sans Arabic", sans-serif;
  --bg: #0b0e12;
  --panel: rgba(12, 16, 21, 0.78);
  --line: rgba(255, 255, 255, 0.09);
  --text: #e9edf0;
  --muted: #8e99a3;
  --accent: #f3a712;
  --t2: #4aa3ff;
  --t3: #b67cff;
  --t4: #ffc53d;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --car-h: calc(104px + var(--sab));
  --top-h: calc(52px + var(--sat));
  --gl: max(16px, env(safe-area-inset-left));
  --gr: max(16px, env(safe-area-inset-right));
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text);
  font-family: var(--font); font-weight: 500;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
button { font: inherit; color: inherit; cursor: pointer; }

#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#ui { position: fixed; inset: 0; pointer-events: none; }
#ui .info, #ui .actions, #ui .carousel, #ui .toast { pointer-events: auto; }

/* Üst bar */
.top {
  position: absolute; top: 0; left: 0; right: 0; height: var(--top-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sat) var(--gr) 0 var(--gl);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), transparent);
}
.brand .logo { font-weight: 700; font-size: 22px; letter-spacing: 0.14em; }
.brand .sub { margin-inline-start: 10px; font-size: 13px; letter-spacing: 0.32em; color: var(--accent); font-weight: 600; }
.wallet, .wl-res, .wl-act { display: flex; gap: 8px; align-items: center; }
.coin {
  display: inline-flex; align-items: center; gap: 7px; padding: 3px 12px 3px 7px;
  background: rgba(0, 0, 0, 0.5); border: 1px solid var(--line); border-radius: 999px;
  font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums;
}
.coin i { width: 13px; height: 13px; border-radius: 50%; }
/* Altın simgesi: her yerde aynı sikke (üst bar, pazar, modüller, ödüller) */
.gc { display: inline-block; width: 0.82em; height: 0.82em; border-radius: 50%; vertical-align: -0.08em; font-style: normal;
  background: radial-gradient(circle at 35% 35%, #ffe38a, #d99a0b); box-shadow: inset 0 0 0 1px rgba(120, 70, 0, 0.35); }
.coin.gold i, .coin.gold i.gc { width: 13px; height: 13px; vertical-align: 0; }
.dlgIcon .gc { width: 34px; height: 34px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.coin.silver i { background: radial-gradient(circle at 35% 35%, #ffffff, #8c98a3); }

/* Bilgi paneli */
.info {
  position: absolute; left: var(--gl); top: calc(var(--top-h) + 6px); bottom: calc(var(--car-h) + 14px);
  width: clamp(236px, 30vw, 340px); overflow-y: auto; scrollbar-width: none;
  padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.info::-webkit-scrollbar { display: none; }
.head { display: flex; gap: 12px; align-items: center; }
.tier {
  flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center;
  font-weight: 700; font-size: 18px; border-radius: 8px; border: 1px solid currentColor;
  background: color-mix(in srgb, currentColor 14%, transparent);
}
.t2 { color: var(--t2); } .t3 { color: var(--t3); } .t4 { color: var(--t4); }
h1 { margin: 0; font-size: clamp(22px, 3vw, 32px); line-height: 1; font-weight: 700; letter-spacing: 0.04em; color: var(--text); }
.meta { margin-top: 4px; font-size: 14px; color: var(--muted); font-weight: 600; }
.desc { margin: 10px 0 12px; font-size: 14px; line-height: 1.3; color: #c2cad1; }

/* Etiket sütunu en uzun etikete göre (ru/hu/de uzun sözcükler çubuğun üstüne taşmasın); satırlar subgrid ile hizalı */
.stats { display: grid; gap: 7px 8px; grid-template-columns: minmax(92px, max-content) 1fr 52px; }
.row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; gap: 8px; align-items: center; font-size: 13px; font-weight: 600; }
.row .k { color: var(--muted); letter-spacing: 0.06em; }
.row .v { text-align: right; font-variant-numeric: tabular-nums; }
.bar { height: 6px; background: rgba(255, 255, 255, 0.08); border-radius: 3px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, #c77d05, var(--accent)); transition: width 0.45s cubic-bezier(.2, .8, .2, 1); }

.specs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 14px 0 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.specs div { display: flex; flex-direction: column; }
.specs b { font-size: 12px; letter-spacing: 0.1em; color: var(--muted); font-weight: 600; }
.specs span { font-size: 15px; font-weight: 700; }

.camo .lbl { font-size: 12px; letter-spacing: 0.12em; color: var(--muted); font-weight: 600; margin-bottom: 7px; }
.camo .lbl b { color: var(--text); margin-left: 6px; letter-spacing: 0.04em; font-size: 13px; }
.swatches { display: flex; flex-wrap: wrap; gap: 7px; }
.sw { width: 24px; height: 24px; border-radius: 50%; padding: 0; border: 2px solid rgba(255, 255, 255, 0.15); }
.sw.on { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(243, 167, 18, 0.3); }

/* Aksiyon butonları */
.actions { position: absolute; right: var(--gr); bottom: calc(var(--car-h) + 14px); display: flex; gap: 10px; align-items: flex-end; }
.ghost {
  height: 46px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--line);
  background: rgba(10, 14, 18, 0.72); font-weight: 700; letter-spacing: 0.1em; font-size: 15px;
}
.ghost.on { border-color: var(--accent); color: var(--accent); }
.fire { --p: 100%; min-width: 128px; background: linear-gradient(90deg, rgba(243, 167, 18, 0.28) var(--p), rgba(10, 14, 18, 0.72) var(--p)); }
.fire.busy { color: var(--muted); }
.battle {
  height: 58px; padding: 0 38px; border: 0; font-size: 26px; font-weight: 700; letter-spacing: 0.16em; color: #1a1204;
  background: linear-gradient(180deg, #ffd25a, #f09a0a);
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
.battle:active, .ghost:active { transform: translateY(1px); filter: brightness(1.1); }

/* Tank seçim şeridi */
.carousel {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--car-h);
  display: flex; gap: 8px; padding: 8px var(--gr) calc(10px + var(--sab)) var(--gl);
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.7), transparent);
}
.carousel::-webkit-scrollbar { display: none; }
.card {
  position: relative; flex: 0 0 142px; height: 100%; padding: 0; overflow: hidden;
  border-radius: 10px; border: 1px solid var(--line); background: rgba(22, 28, 34, 0.9);
}
.card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card .nm { position: absolute; left: 8px; right: 6px; bottom: 5px; color: var(--text); text-align: left; font-weight: 700; font-size: 13px; letter-spacing: 0.03em; text-shadow: 0 1px 3px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .tr { position: absolute; top: 4px; left: 8px; font-weight: 700; font-size: 12px; }
.card .fl { position: absolute; top: 3px; right: 7px; font-size: 13px; }
.card::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: currentColor; opacity: 0.8; }
.card.sel { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), 0 0 16px rgba(243, 167, 18, 0.25); }

.toast {
  position: absolute; left: 50%; bottom: calc(var(--car-h) + 84px); transform: translate(-50%, 10px);
  padding: 10px 16px; border-radius: 10px; background: rgba(0, 0, 0, 0.82); border: 1px solid var(--line);
  font-weight: 600; font-size: 15px; opacity: 0; transition: opacity 0.25s, transform 0.25s; pointer-events: none;
  width: max-content; max-width: min(520px, calc(100vw - 24px)); text-align: center; z-index: 3;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Yükleme */
#loading {
  position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: var(--bg); transition: opacity 0.5s; z-index: 10;
}
#loading.done { opacity: 0; pointer-events: none; }
#loading .lg { font-weight: 700; font-size: 34px; letter-spacing: 0.2em; }
#loading .bar { width: 220px; height: 4px; }
#loading .bar i { background: var(--accent); transition: width 0.2s; }
#loading span { color: var(--muted); font-weight: 600; letter-spacing: 0.05em; }

/* Kısa yatay ekranlar (telefon) */
@media (max-height: 470px) {
  :root { --car-h: calc(84px + var(--sab)); --top-h: calc(44px + var(--sat)); }
  .brand .logo { font-size: 19px; }
  .info { padding: 10px 12px; width: clamp(220px, 29vw, 300px); }
  .tier { width: 34px; height: 34px; font-size: 16px; }
  h1 { font-size: 22px; }
  .desc { display: none; }
  .head { margin-bottom: 10px; }
  .stats { gap: 5px; }
  .stats { grid-template-columns: minmax(84px, max-content) 1fr 48px; }
  .row { font-size: 12px; }
  .specs { margin: 10px 0 8px; padding-top: 8px; gap: 4px 10px; }
  .specs span { font-size: 13px; }
  .sw { width: 20px; height: 20px; }
  .card { flex-basis: 120px; }
  .ghost { height: 40px; font-size: 13px; padding: 0 12px; }
  .fire { min-width: 112px; }
  .battle { height: 48px; font-size: 21px; padding: 0 28px; }
}

/* Dikey ekran (telefon dik tutuluyor): garaj, kayıt ve menüler dikeyde de kullanılır; yalnız savaş yatay ister */
@media (max-aspect-ratio: 1/1) {
  .info { left: var(--gl); right: var(--gr); width: auto; bottom: auto; max-height: 34vh; padding: 10px 12px; }
  .desc { display: none; }
  .wallet .silver { display: none; }
  .actions { right: var(--gr); left: var(--gl); justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
  #rotBtn, #fireBtn { display: none; }
  .playBtns { flex: 1 1 100%; }
  .playBtns .battle { flex: 1 1 0; min-width: 0; padding: 0 8px; font-size: 19px; letter-spacing: 0.08em; height: 54px; }
  .playBtns #battleBtn { flex-grow: 1.6; }
  .buyBox { flex: 1 1 100%; align-items: stretch; }
  .buyBox .battle.buy { width: 100%; }
}

/* ================= SAVAŞ ARAYÜZÜ ================= */
#battle { position: fixed; inset: 0; z-index: 5; touch-action: none; overflow: hidden; }
/* Sinematik kenar karartması: gözü merkeze toplar (tek sabit katman; düşük kalitede yok) */
#battle::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 78% 72% at 50% 46%, transparent 52%, rgba(6, 8, 12, 0.3) 100%); }
#battle.lq::before { display: none; }
#battle button { pointer-events: auto; }
#bMap { position: absolute; top: 10px; left: var(--gl); width: 128px; height: 128px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.28); background: rgba(0, 0, 0, 0.3); pointer-events: none; }
.bScore { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; pointer-events: none; }
.bScore .tm { display: flex; align-items: center; gap: 8px; }
.bScore .tm b { font-size: 26px; font-weight: 700; text-shadow: 0 1px 3px #000; }
.bScore .blue b { color: #6db6ff; } .bScore .red b { color: #ff6b6b; }
.bScore .tm span { display: flex; gap: 3px; }
.bScore .tm span i { width: 10px; height: 14px; border-radius: 2px; background: currentColor; }
.bScore .blue span { color: #4aa3ff; } .bScore .red span { color: #ff4d4d; }
.bScore .tm span i.x { background: rgba(0, 0, 0, 0.45); outline: 1px solid rgba(255, 255, 255, 0.25); }
#bTime { padding: 3px 12px; border-radius: 8px; background: rgba(0, 0, 0, 0.55); font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; }
.bIcon { width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.5); font-weight: 700; font-size: 16px; }
#bPause { position: absolute; top: 10px; right: var(--gr); }
#bFeed { position: absolute; top: 60px; right: var(--gr); display: flex; flex-direction: column; gap: 4px; align-items: flex-end; pointer-events: none; font-size: 14px; font-weight: 700; }
#bFeed div { padding: 3px 10px; border-radius: 6px; background: rgba(0, 0, 0, 0.5); }
#bFeed .blue { color: #6db6ff; } #bFeed .red { color: #ff6b6b; }

#bLabels { position: absolute; inset: 0; pointer-events: none; }
.blbl { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; font-weight: 700; text-shadow: 0 1px 2px #000; white-space: nowrap; will-change: transform; }
.blbl i { display: block; width: 64px; height: 5px; background: rgba(0, 0, 0, 0.55); border-radius: 3px; overflow: hidden; }
.blbl b { display: block; height: 100%; }
.blbl.red span { color: #ffb3b3; } .blbl.red b { background: #ff4d4d; }
.blbl.blue span { color: #b5dbff; } .blbl.blue b { background: #4aa3ff; }
.bfloat { position: absolute; transform: translate(-50%, -50%); font-weight: 700; text-shadow: 0 2px 4px #000; animation: bfloat 1s ease-out forwards; }
.bfloat.dmg { font-size: 24px; color: #fff; }
.bfloat.kill { font-size: 30px; color: #ffd25a; letter-spacing: 0.1em; }
@keyframes bfloat { from { opacity: 1; margin-top: 0; } to { opacity: 0; margin-top: -60px; } }

#bReticle { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%); pointer-events: none; }
#bSpread { position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%); border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.4); box-shadow: 0 0 2px rgba(0, 0, 0, 0.6); pointer-events: none; transition: width 0.1s linear, height 0.1s linear; }
#battle.dead #bSpread, #battle.heli #bSpread { display: none; }
#bHpBar { position: absolute; left: -20px; right: -20px; top: 44px; height: 5px; background: rgba(0, 0, 0, 0.55); border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); }
#bHpBar i { display: block; height: 100%; width: 100%; background: #4cd964; transition: width 0.2s; }
#bHpBar.mid i { background: #f3b52a; } #bHpBar.low i { background: #ff4d4d; }
#bHpNum { position: absolute; left: calc(100% + 26px); top: 39px; font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 2px #000; white-space: nowrap; }
.bMe { display: none !important; }
#bReticle > i { position: absolute; background: rgba(255, 255, 255, 0.9); box-shadow: 0 0 2px #000; }
#bReticle .h { left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; clip-path: polygon(0 0, 38% 0, 38% 100%, 0 100%, 0 0, 62% 0, 100% 0, 100% 100%, 62% 100%); }
#bReticle .v { top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; clip-path: polygon(0 0, 100% 0, 100% 38%, 0 38%, 0 62%, 100% 62%, 100% 100%, 0 100%); }
#bReticle.hit > i { background: #ff4d4d; animation: bhit 0.35s; }
@keyframes bhit { from { transform: scale(1.6); } to { transform: scale(1); } }
#bReload { position: absolute; left: -20px; right: -20px; top: 52px; height: 3px; background: rgba(0, 0, 0, 0.5); border-radius: 2px; overflow: hidden; }
#bReload i { display: block; height: 100%; width: 0; background: var(--accent); }
#bGun { position: absolute; left: 0; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.5); pointer-events: none; }
#bGun.on { border-color: var(--accent); }
#bLock { position: absolute; left: 0; top: 0; display: none; pointer-events: none; border: 2px solid #ff4d4d; border-radius: 6px; box-shadow: 0 0 12px rgba(255, 77, 77, 0.55), inset 0 0 12px rgba(255, 77, 77, 0.3); }
#bWarn { position: absolute; top: calc(50% + 64px); left: 50%; transform: translateX(-50%); padding: 5px 14px; border-radius: 8px; background: rgba(180, 20, 20, 0.85); font-weight: 700; letter-spacing: 0.12em; display: none; pointer-events: none; white-space: nowrap; }
#bWarn.l2 { animation: bblink 0.25s infinite alternate; }
#bWarn.l1 { background: rgba(200, 120, 10, 0.85); }
#bWarn.show { display: block; }
@keyframes bblink { to { opacity: 0.45; } }
#bVig { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, transparent 50%, rgba(220, 20, 20, 0.6)); }
#bVig.on { animation: bvig 0.7s ease-out; }
@keyframes bvig { from { opacity: 1; } to { opacity: 0; } }
#bCenter { position: absolute; left: 50%; top: 32%; transform: translate(-50%, -50%) scale(0.9); font-size: 64px; font-weight: 700; letter-spacing: 0.12em; text-shadow: 0 3px 12px #000; opacity: 0; transition: opacity 0.2s, transform 0.2s; pointer-events: none; white-space: nowrap; }
#bCenter.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.bMe { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); width: min(320px, 36vw); pointer-events: none; }
.bMe .nm { font-weight: 700; font-size: 14px; letter-spacing: 0.08em; margin-bottom: 3px; text-shadow: 0 1px 2px #000; }
.bMe .hp { position: relative; height: 14px; background: rgba(0, 0, 0, 0.55); border-radius: 4px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.15); }
.bMe .hp i { display: block; height: 100%; background: linear-gradient(90deg, #3fae5a, #7ad36b); transition: width 0.2s; }
.bMe .hp i.low { background: linear-gradient(90deg, #c0392b, #ff6b4d); }
.bMe .hp span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; font-weight: 700; text-shadow: 0 1px 2px #000; }

#bJoy { position: absolute; left: 0; top: 0; width: 130px; height: 130px; margin: -65px 0 0 -65px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.3); background: rgba(0, 0, 0, 0.18); pointer-events: none; opacity: 0.35; transform: translate(calc(var(--gl) + 90px), calc(100vh - 110px)); }
#bJoy.on { opacity: 1; }
#bJoy .knob { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); border: 2px solid rgba(255, 255, 255, 0.6); transform: translate(-50%, -50%); }
@media (pointer: fine) { #bJoy { display: none; } }

.bBtns { position: absolute; right: var(--gr); bottom: 16px; width: 230px; height: 210px; pointer-events: none; }
.rb { position: absolute; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.25); color: #fff; font-weight: 700; letter-spacing: 0.08em;
  background: conic-gradient(rgba(243, 167, 18, 0.5) var(--p, 100%), rgba(10, 14, 18, 0.65) 0); display: grid; place-items: center; }
.rb.ready { border-color: var(--accent); box-shadow: 0 0 16px rgba(243, 167, 18, 0.45); }
.rb:active { filter: brightness(1.2); }
.rb.lg { right: 0; bottom: 0; width: 104px; height: 104px; font-size: 20px; }
.rb.md { right: 116px; bottom: 6px; width: 76px; height: 76px; font-size: 14px; }
.rb.sm { right: 22px; bottom: 124px; width: 58px; height: 58px; font-size: 12px; background: rgba(10, 14, 18, 0.65); }
.rb.sm.on { border-color: var(--accent); color: var(--accent); }
.rb em { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; border-radius: 11px; background: #c0392b; font-style: normal; font-size: 13px; display: grid; place-items: center; }
#bSpec { position: absolute; top: 96px; left: 50%; transform: translateX(-50%); display: none; align-items: center; gap: 10px; padding: 4px 6px 4px 14px; border-radius: 10px; background: rgba(0, 0, 0, 0.55); font-weight: 700; letter-spacing: 0.12em; }
#bSpec.show { display: flex; }
#battle.dead #bReticle, #battle.dead #bGun, #battle.dead .bBtns, #battle.dead #bJoy, #battle.dead .bMe { display: none; }
#bHint { position: absolute; left: 50%; bottom: 60px; transform: translateX(-50%); text-align: center; padding: 8px 16px; border-radius: 10px; background: rgba(0, 0, 0, 0.55); font-weight: 600; font-size: 15px; pointer-events: none; transition: opacity 0.6s; }
#bHint small { color: var(--muted); font-size: 12px; }
#bHint.gone { opacity: 0; }
@media (pointer: coarse) { #bHint small { display: none; } }
#bScope { position: absolute; inset: 0; display: none; pointer-events: none;
  background: radial-gradient(circle at center, transparent 34vh, rgba(0, 0, 0, 0.85) 36vh),
    linear-gradient(transparent calc(50% - 0.5px), rgba(0, 0, 0, 0.7) calc(50% - 0.5px), rgba(0, 0, 0, 0.7) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(0, 0, 0, 0.7) calc(50% - 0.5px), rgba(0, 0, 0, 0.7) calc(50% + 0.5px), transparent calc(50% + 0.5px)); }
#battle.zoomed #bScope { display: block; }
.bOverlay { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.62); z-index: 3; }
.bOverlay.show { display: flex; }
.bOverlay .box { min-width: 300px; padding: 22px 26px; border-radius: 16px; background: rgba(14, 18, 23, 0.95); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; align-items: stretch; text-align: center; }
.bOverlay h2 { margin: 0 0 4px; font-size: 40px; letter-spacing: 0.16em; }
.bOverlay h2.win { color: var(--accent); } .bOverlay h2.lose { color: #ff6b6b; }
#bResStats { display: grid; gap: 6px; margin-bottom: 6px; }
#bResStats div { display: flex; justify-content: space-between; gap: 30px; font-size: 16px; }
#bResStats span { color: var(--muted); }
.row2 { display: flex; gap: 10px; justify-content: center; }
@media (max-height: 470px) {
  #bMap { width: 104px; height: 104px; }
  .bBtns { transform: scale(0.85); transform-origin: bottom right; }
  #bCenter { font-size: 48px; }
  .bOverlay .box { padding: 14px 20px; gap: 8px; }
  .bOverlay h2 { font-size: 30px; }
}
.blbl.far span { display: none; }
#bFps { position: absolute; top: 146px; left: var(--gl); width: 128px; text-align: center; font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, 0.7); text-shadow: 0 1px 2px #000; pointer-events: none; }
#bClick { position: absolute; left: 50%; top: 96px; transform: translateX(-50%); padding: 8px 16px; border-radius: 10px; background: rgba(0, 0, 0, 0.6); border: 1px solid var(--accent); color: var(--accent); font-weight: 700; letter-spacing: 0.1em; display: none; pointer-events: none; }
#battle.needlock #bClick { display: block; }
#battle.needlock .bOverlay.show ~ #bClick, #battle.dead #bClick { display: none; }
@media (max-height: 470px) { #bFps { top: 118px; width: 104px; } }

/* Silah seçimi (masaüstü) ve füze güdüm modu */
.bWeap { position: absolute; right: var(--gr); bottom: 16px; display: none; gap: 8px; }
.bWeap .slot { position: relative; width: 150px; padding: 8px 10px 10px 34px; text-align: left; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(8, 11, 14, 0.7); display: flex; flex-direction: column; gap: 1px; }
.bWeap .slot kbd { position: absolute; left: 8px; top: 8px; width: 18px; height: 18px; border-radius: 4px; background: rgba(255, 255, 255, 0.14); font: 700 12px/18px inherit; text-align: center; }
.bWeap .slot b { font-size: 16px; letter-spacing: 0.08em; }
.bWeap .slot b em { font-style: normal; color: var(--accent); margin-left: 4px; }
.bWeap .slot span { font-size: 11px; color: var(--muted); font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; }
.bWeap .slot .bar { display: block; height: 4px; margin-top: 5px; background: rgba(255, 255, 255, 0.1); border-radius: 2px; overflow: hidden; }
.bWeap .slot .bar i { display: block; height: 100%; width: 0; background: var(--accent); }
.bWeap .slot.on { border-color: var(--accent); box-shadow: 0 0 14px rgba(243, 167, 18, 0.35); background: rgba(40, 30, 8, 0.75); }
.bWeap .slot.on kbd { background: var(--accent); color: #1a1204; }
.bWeap .slot.empty { opacity: 0.45; }
#wMis.on #wMode { color: #7fd6ff; }
@media (pointer: fine) { .bWeap { display: flex; } .bBtns { display: none; } }
.rb.chip { right: 122px; bottom: 90px; width: 64px; height: 26px; border-radius: 13px; font-size: 11px; background: rgba(10, 14, 18, 0.75); color: #7fd6ff; border-color: rgba(127, 214, 255, 0.6); }
.rb.chip.lock { color: #ff9a9a; border-color: rgba(255, 110, 110, 0.6); }
#bGuide { position: absolute; left: 50%; top: calc(50% + 40px); transform: translateX(-50%); padding: 3px 10px; border-radius: 6px; background: rgba(0, 40, 60, 0.7); color: #7fd6ff; font-weight: 700; font-size: 13px; letter-spacing: 0.08em; display: none; pointer-events: none; }
#bGuide.show { display: block; }
#battle.guiding #bReticle > i { background: #7fd6ff; }
#battle.dead .bWeap { display: none; }
.bOverlay, .bOverlay * { cursor: default; }
.bOverlay button { cursor: pointer; }

/* ================= MOBİL CİLA ================= */
.topbtn { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.5); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; pointer-events: auto; }
.topbtn[hidden] { display: none !important; } /* .topbtn.ic { display: grid } bunu ezmesin (tam ekran düğmesi masaüstünde görünüyordu) */
.wallet { align-items: center; }

/* Ayarlar */
#settingsPanel { position: fixed; z-index: 60; }
.sbox { width: min(460px, 92vw); max-height: 92vh; overflow-y: auto; }
.sbox h2 { font-size: 28px !important; }
.srow { display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: 10px; text-align: left; font-weight: 600; min-height: 40px; }
.srow > span { color: var(--muted); }
.srow b { min-width: 44px; text-align: right; }
.srow input[type=range] { width: 100%; accent-color: var(--accent); height: 28px; }
.seg { grid-column: 2 / 4; display: flex; gap: 4px; flex-wrap: wrap; }
.seg button { flex: 1; min-height: 38px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.05); font-weight: 700; font-size: 13px; }
.seg button.on { border-color: var(--accent); color: var(--accent); background: rgba(243, 167, 18, 0.12); }

/* Telefonu yan çevir */
#rotate { position: fixed; inset: 0; z-index: 80; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: var(--bg); text-align: center; }
#rotate b { font-size: 24px; letter-spacing: 0.08em; }
#rotate span { color: var(--muted); font-weight: 600; }
#rotate .phone { width: 44px; height: 76px; border: 3px solid var(--accent); border-radius: 9px; animation: rot 1.8s ease-in-out infinite; margin-bottom: 14px; }
@keyframes rot { 0%, 25% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (pointer: coarse) and (orientation: portrait) { body.ingame #rotate { display: flex; } } /* açılış, kayıt, garaj dikeyde açık */

/* Dokunmatik: kenar boşlukları (çentik/kamera deliği), daha okunur etiketler */
@media (pointer: coarse) and (orientation: landscape) {
  :root { --gl: max(28px, env(safe-area-inset-left)); --gr: max(28px, env(safe-area-inset-right)); }
  .blbl { font-size: 13px; }
  .blbl i { width: 70px; height: 6px; }
}
.rb.chip { width: 82px; height: 42px; right: 113px; bottom: 86px; border-radius: 21px; font-size: 13px; }

/* Kısa yatay ekranda garaj paneli tek bakışta sığsın */
@media (max-height: 470px) {
  .info { width: clamp(250px, 34vw, 320px); padding: 10px 12px; overflow-y: auto; }
  .head { margin-bottom: 8px; }
  .stats { gap: 3px; }
  .stats { grid-template-columns: minmax(82px, max-content) 1fr 46px; }
  .row { font-size: 12px; }
  .specs { display: flex; flex-wrap: wrap; gap: 2px 10px; margin: 8px 0 6px; padding-top: 6px; }
  .specs div { flex-direction: row; }
  .specs b { display: none; }
  .specs span { font-size: 12px; color: #c2cad1; }
  .specs div + div span::before { content: '· '; color: var(--muted); }
  .camo .lbl { margin-bottom: 4px; }
  .swatches { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 5px; padding: 2px; }
  .swatches::-webkit-scrollbar { display: none; }
  .sw { flex: 0 0 20px; width: 20px; height: 20px; }
  .topbtn { height: 32px; font-size: 12px; padding: 0 10px; }
}

/* Solak düzen: joystick sağda, butonlar solda */
#battle.lefty .bBtns { right: auto; left: var(--gl); }
#battle.lefty .rb.lg { right: auto; left: 0; }
#battle.lefty .rb.md { right: auto; left: 116px; }
#battle.lefty .rb.sm { right: auto; left: 22px; }
#battle.lefty .rb.chip { right: auto; left: 113px; }
#battle.lefty #bJoy:not(.on) { transform: translate(calc(100vw - var(--gr) - 90px), calc(100vh - 110px)); }
@media (max-height: 470px) { #battle.lefty .bBtns { transform-origin: bottom left; } }

/* İlk savaş öğreticisi */
#bTut { position: absolute; inset: 0; z-index: 4; display: none; background: rgba(0, 0, 0, 0.55); }
#battle.tut #bTut { display: block; }
#bTut > div { position: absolute; max-width: 240px; padding: 12px 14px; border-radius: 12px; background: rgba(14, 18, 23, 0.95); border: 2px solid var(--accent); font-weight: 600; font-size: 14px; line-height: 1.3; }
#bTut b { display: block; color: var(--accent); font-size: 18px; letter-spacing: 0.1em; margin-bottom: 2px; }
#bTut .tj { left: calc(var(--gl) + 10px); bottom: 40%; }
#bTut .ta { right: calc(var(--gr) + 150px); top: 30%; }
#bTut .tf { right: calc(var(--gr) + 10px); bottom: 150px; }
#battle.lefty #bTut .tj { left: auto; right: calc(var(--gr) + 10px); }
#battle.lefty #bTut .ta { right: auto; left: calc(var(--gl) + 150px); }
#battle.lefty #bTut .tf { right: auto; left: calc(var(--gl) + 10px); }
#bTutOk { position: absolute; left: 50%; bottom: 22%; transform: translateX(-50%); }
@media (max-height: 470px) { #bTut > div { font-size: 12px; padding: 8px 10px; max-width: 200px; } #bTut b { font-size: 15px; } #bTut .tf { bottom: 120px; } #bTutOk { bottom: 12%; } }

/* ================= HESAP, MENÜLER, ONLINE ================= */
.menuOv { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-start; justify-content: flex-start; background: rgba(5, 7, 10, 0.72); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  padding: max(12px, var(--sat)) max(12px, env(safe-area-inset-right)) max(12px, var(--sab)) max(12px, env(safe-area-inset-left)); overflow-y: auto; }
.menuOv > * { margin: auto; } /* güvenli ortalama: içerik ekrandan uzunsa üstü kesilmez, kaydırılır */
.menuOv.start { background: linear-gradient(90deg, rgba(5, 7, 10, 0.94) 0%, rgba(5, 7, 10, 0.55) 55%, rgba(5, 7, 10, 0.2) 100%); backdrop-filter: none; padding-left: max(8vw, var(--gl)); z-index: 35; }
.menuOv.start > .st-inner { margin: auto 0; }
.st-inner { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; max-width: 440px; }
.st-logo { font-size: clamp(44px, 8vw, 76px); font-weight: 700; letter-spacing: 0.12em; line-height: 1; text-shadow: 0 4px 24px rgba(0, 0, 0, 0.6); }
.st-sub { color: var(--accent); font-weight: 700; letter-spacing: 0.35em; font-size: 14px; margin-bottom: 8px; }
.st-go { font-size: 30px; height: 64px; padding: 0 56px; }
.st-go:disabled { filter: grayscale(0.6) brightness(0.8); }
.st-feat { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-weight: 600; font-size: 15px; color: #d5dbe0; }
.st-feat li::before { content: '✓ '; color: #6fd08c; font-weight: 700; }
.st-link { background: none; border: 0; padding: 10px 0; color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; font-size: 15px; }
.st-msg { min-height: 20px; font-weight: 600; color: #cfd6db; }
.st-msg.err, .mbox .err { color: #ff7b7b; }
.st-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-top: 4px; font-size: 13px; color: var(--muted); }
.st-foot .st-link.small { margin: 0; padding: 10px 0; }
.st-foot a { padding: 10px 0; }
.mbox { position: relative; width: min(440px, 94vw); max-height: 94vh; overflow-y: auto; padding: 20px 22px; border-radius: 16px; background: rgba(14, 18, 23, 0.97); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; text-align: left; }
.mbox.wide { width: min(560px, 94vw); }
.mbox h2 { margin: 0; font-size: 26px; letter-spacing: 0.12em; text-align: center; }
.mbox h2 small { font-size: 15px; color: var(--muted); margin-left: 4px; letter-spacing: 0.02em; }
.mbox p { margin: 0; line-height: 1.35; }
.mbox .muted, .muted { color: #aeb7bf; font-size: 14px; }
.mbox .warn { color: #ffcf7a; font-size: 13px; }
.mbox small { color: var(--muted); text-align: center; }
.fld { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 13px; color: var(--muted); }
.fld.grow { flex: 1; }
.fld input, .fld select, .tkInput { height: 44px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06); color: var(--text); font: 600 17px var(--font); padding: 0 12px; }
.fld select option { color: #111; }
.fld input:focus, .fld select:focus, .tkInput:focus { outline: 2px solid var(--accent); border-color: transparent; }
.mbox .row2 { display: flex; gap: 8px; }
.mbox .row2 > * { flex: 1; }
.mbox .battle { height: 50px; font-size: 20px; }
.mbox .ghost { height: 42px; }
.mbox button:disabled { opacity: 0.45; cursor: not-allowed; }
.tkCode { white-space: nowrap; overflow-x: auto; font: 700 clamp(15px, 3.6vw, 24px)/1.2 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: 0.06em; text-align: center; padding: 14px 8px; border-radius: 10px; background: rgba(243, 167, 18, 0.1); border: 1px dashed var(--accent); color: #ffd98a; user-select: all; -webkit-user-select: all; }
.tkInput { text-transform: uppercase; font-family: ui-monospace, Menlo, monospace; letter-spacing: 0.08em; text-align: center; }
.chk { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.chk input { width: 20px; height: 20px; accent-color: var(--accent); }
.tkDetails summary { cursor: pointer; font-weight: 700; color: var(--accent); padding: 4px 0; }
.tkDetails[open] { display: flex; flex-direction: column; gap: 8px; }
.lvl { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; font-weight: 700; }
.lvl > i { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.lvl > i i { display: block; height: 100%; background: linear-gradient(90deg, #3a8fe0, #7fd6ff); }
.lvl span { color: var(--muted); font-size: 13px; }
.pstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pstats div { padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); display: flex; flex-direction: column; }
.pstats span { font-size: 12px; color: var(--muted); font-weight: 600; }
.pstats b { font-size: 20px; }
table.lb { width: 100%; border-collapse: collapse; font-size: 14px; }
.lb th { text-align: left; color: var(--muted); font-size: 12px; padding: 4px 6px; border-bottom: 1px solid var(--line); }
.lb td { padding: 5px 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); font-weight: 600; }
.lb tr.me td { color: var(--accent); }
#lbList { max-height: 55vh; overflow-y: auto; }
.mm-spin { width: 58px; height: 58px; margin: 6px auto; border-radius: 50%; border: 4px solid rgba(255, 255, 255, 0.12); border-top-color: var(--accent); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.mm-time { text-align: center; font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
#mmBox .muted { text-align: center; }

/* Üst bar: profil çipi, altın, puan, ikon butonlar */
.pchip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px 0 8px; border-radius: 999px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.5); font-weight: 700; pointer-events: auto; }
.pchip b#pNick { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pchip .lv { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #7fd6ff; }
.pchip .lv > i { width: 34px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.15); overflow: hidden; }
.pchip .lv > i i { display: block; height: 100%; width: 0; background: #7fd6ff; }
.coin.rating i { background: linear-gradient(#cfeaff, #3a8fe0); border-radius: 0; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.topbtn.ic { width: 32px; padding: 0; font-size: 16px; display: grid; place-items: center; }

/* Oyna / satın al */
.playBtns, .buyBox { display: flex; gap: 10px; align-items: flex-end; }
.playBtns[hidden], .buyBox[hidden], #battleBtn[hidden] { display: none; }
.buyBox { flex-direction: column; align-items: flex-end; gap: 4px; }
#buyNote { font-weight: 700; font-size: 13px; padding: 2px 8px; border-radius: 6px; background: rgba(0, 0, 0, 0.55); }
.battle.buy { font-size: 20px; padding: 0 26px; }
.battle.buy:disabled { filter: grayscale(0.8) brightness(0.7); cursor: not-allowed; }
.battle { font-size: 22px; }
.card.locked img { filter: grayscale(0.85) brightness(0.55); }
.card .lk { position: absolute; top: 24px; left: 8px; font-size: 12px; font-weight: 700; color: #ffd98a; text-shadow: 0 1px 2px #000; }

/* Savaş sonu ödüller */
#bResStats .rw { padding-top: 2px; }
#bResStats .rw b { color: #7fd6ff; }
#bResStats .rw.gold b { color: #ffd25a; }
#bResStats .rw.up b { color: #6fd08c; }
#bResStats .rw.down b { color: #ff7b7b; }
#bResStats .rw.lvl { justify-content: center; }
#bResStats .rw.lvl span { color: var(--accent); font-weight: 700; font-size: 20px; letter-spacing: 0.1em; }
#bResStats .rw.lvl b { display: none; }
.blbl span small { opacity: 0.7; font-size: 10px; }

@media (max-height: 470px) {
  .st-go { height: 54px; font-size: 26px; }
  .st-feat { font-size: 13px; }
  .pchip { height: 32px; }
  .pchip b#pNick { max-width: 80px; }
  .topbtn.ic { width: 34px; height: 32px; }
  #fireBtn { display: none; }
  .battle.buy { font-size: 17px; padding: 0 18px; }
  .mbox { padding: 14px 16px; gap: 7px; }
  .mbox h2 { font-size: 22px; }
  .fld input, .fld select, .tkInput { height: 38px; }
  .tkCode { padding: 8px; }
}
#battle.over #bClick, #battle.over #bHint { display: none; }
.lb-ring { --p: 100%; width: 74px; height: 74px; margin: 2px auto 4px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--accent) var(--p), rgba(255, 255, 255, 0.1) 0); }
.lb-ring b { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: #0e1217; font-size: 26px; }
.lobbyList { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.lobbyList li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 9px; background: rgba(255, 255, 255, 0.05); border: 1px solid transparent; }
.lobbyList li.me { border-color: rgba(243, 167, 18, 0.5); }
.lobbyList li small { color: var(--muted); }
.lobbyList li em { font-style: normal; font-weight: 700; font-size: 13px; color: var(--muted); }
.lobbyList li.ok em { color: #6fd08c; }
.mbox .center { text-align: center; }
#bNet { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); padding: 14px 22px; border-radius: 12px; background: rgba(120, 20, 20, 0.88); font-weight: 700; font-size: 18px; letter-spacing: 0.06em; display: none; text-align: center; z-index: 5; }
#bNet.show { display: block; }
#bNet small { display: block; font-size: 13px; font-weight: 600; opacity: 0.85; letter-spacing: 0; }
.blbl.off span::after { content: ' · bağlantı yok'; color: #ffb3b3; font-size: 10px; }
.mm-count { text-align: center; font-size: 40px; font-weight: 700; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.mm-count small { font-size: 20px; color: var(--muted); }
.mbox .small { font-size: 12px; }
#mmBox .lobbyList { max-height: 44vh; overflow-y: auto; }
.emb { display: inline-grid; place-items: center; width: 18px; height: 20px; font-size: 11px; font-weight: 700; color: #fff; background: var(--c); clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%); vertical-align: -4px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); }
.card .fl .emb { width: 16px; height: 18px; font-size: 10px; }

/* ================= İLERLEME: modüller, örs, teknoloji ağacı ================= */
.t1 { color: #a7b3bd; }
.plus { font-style: normal; font-weight: 700; color: #7fd6ff; }
.plus.p5, .plus.p6 { color: #6fd08c; } .plus.p7, .plus.p8 { color: #ffd25a; } .plus.p9 { color: #ff9a3d; } .plus.p10 { color: #ff5d8f; text-shadow: 0 0 8px rgba(255, 93, 143, 0.6); }
.modbox { width: min(640px, 96vw); }
.mslots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mslot { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); }
.mslot.on { border-color: var(--accent); background: rgba(243, 167, 18, 0.1); }
.mslot em { font-style: normal; font-size: 12px; color: var(--muted); font-weight: 700; letter-spacing: 0.06em; }
.mslot b { font-size: 20px; }
.mslot small { font-size: 12px; color: #aeb7bf; text-align: center; }
.mpow { text-align: center; font-size: 13px; color: var(--muted); }
.mpow b { color: var(--text); }
.mlist { display: flex; flex-direction: column; gap: 5px; max-height: 38vh; overflow-y: auto; }
.mrow { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 9px; background: rgba(255, 255, 255, 0.04); }
.mrow.here { outline: 1px solid rgba(243, 167, 18, 0.5); }
.mrow .mn { font-weight: 700; }
.mrow .mb { font-size: 13px; color: #aeb7bf; }
.mrow .ma { display: flex; gap: 4px; }
.ghost.sm { height: 30px; padding: 0 9px; font-size: 12px; }
.ghost.sm.anv { border-color: rgba(255, 150, 60, 0.6); color: #ffb36b; }
.anvbox { width: min(420px, 94vw); position: relative; }
.anvbox #avGo { width: 100%; margin: 8px 0 4px; }
.anv-stage { position: relative; height: 150px; border-radius: 12px; background: radial-gradient(ellipse at 50% 90%, rgba(255, 140, 40, 0.25), transparent 60%), #0c0f13; overflow: hidden; }
.anvil { position: absolute; left: 50%; bottom: 14px; width: 150px; height: 46px; transform: translateX(-50%); background: linear-gradient(#5b6168, #2a2e33); clip-path: polygon(0 0, 100% 0, 88% 40%, 70% 40%, 76% 100%, 24% 100%, 30% 40%, 12% 40%); }
.hammer { position: absolute; left: 58%; top: 8px; width: 60px; height: 22px; background: linear-gradient(#8a9099, #4a4f56); border-radius: 4px; transform-origin: 90% 50%; transform: rotate(-35deg); }
.hammer::after { content: ''; position: absolute; left: 50px; top: 8px; width: 60px; height: 6px; background: #6b4a2e; border-radius: 3px; }
.anv-stage.striking .hammer { animation: hammer 0.38s ease-in 3; }
@keyframes hammer { 0% { transform: rotate(-35deg); } 55% { transform: rotate(18deg); } 100% { transform: rotate(-35deg); } }
.anv-stage.spark::before { content: ''; position: absolute; left: 50%; bottom: 58px; width: 120px; height: 60px; transform: translateX(-50%); background: radial-gradient(circle, rgba(255, 210, 110, 0.95) 0 6%, rgba(255, 140, 40, 0.5) 20%, transparent 60%); animation: spark 0.35s ease-out forwards; }
@keyframes spark { from { opacity: 1; transform: translateX(-50%) scale(0.6); } to { opacity: 0; transform: translateX(-50%) scale(1.6); } }
.anv-item { position: absolute; left: 50%; bottom: 60px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; font-weight: 700; text-shadow: 0 1px 3px #000; }
.anv-item .plus { font-size: 30px; }
.anv-stage.ok { box-shadow: inset 0 0 40px rgba(255, 210, 90, 0.5); }
.anv-stage.burn { box-shadow: inset 0 0 50px rgba(255, 60, 20, 0.7); background: radial-gradient(ellipse at 50% 80%, rgba(255, 80, 20, 0.55), transparent 65%), #120906; }
.anv-item.gone { font-size: 30px; color: #ff6b3d; letter-spacing: 0.2em; }
.anv-info { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.anv-info div { padding: 6px 9px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); display: flex; flex-direction: column; }
.anv-info span { font-size: 12px; color: var(--muted); font-weight: 700; }
.anv-info b.risk { color: #ffb36b; } .anv-info b.safe { color: #6fd08c; }
.warnbig { color: #ff8a6b; font-weight: 700; text-align: center; }
.anv-toast { position: absolute; left: 50%; top: 90px; transform: translateX(-50%); padding: 10px 22px; border-radius: 12px; font-weight: 700; font-size: 22px; letter-spacing: 0.08em; pointer-events: none; animation: anvToast 1.8s ease-out forwards; white-space: nowrap; }
.anv-toast.ok { background: rgba(60, 50, 10, 0.92); color: #ffd25a; border: 1px solid #ffd25a; }
.anv-toast.burn { background: rgba(70, 10, 5, 0.92); color: #ff6b3d; border: 1px solid #ff6b3d; }
.anv-toast.saved { background: rgba(10, 30, 50, 0.92); color: #7fd6ff; border: 1px solid #7fd6ff; }
@keyframes anvToast { 0% { opacity: 0; transform: translate(-50%, 10px) scale(0.9); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1.05); } 80% { opacity: 1; } 100% { opacity: 0; } }
.tree { width: min(860px, 96vw); }
.tt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tt-col h3 { margin: 0; font-size: 16px; color: var(--c); letter-spacing: 0.06em; }
.tt-tier { display: flex; gap: 6px; align-items: stretch; margin-top: 6px; }
.tt-tier > em { font-style: normal; width: 22px; font-weight: 700; color: var(--muted); display: grid; place-items: center; }
.tt-node { flex: 1; display: flex; flex-direction: column; gap: 1px; padding: 7px 8px; border-radius: 9px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); text-align: left; }
.tt-node small { color: var(--muted); font-size: 12px; }
.tt-node span { font-size: 12px; font-weight: 700; }
.tt-node.owned { border-color: rgba(111, 208, 140, 0.6); } .tt-node.owned span { color: #6fd08c; }
.tt-node.researched span { color: #ffd25a; } .tt-node.researchable span { color: #7fd6ff; }
.tt-node.locked { opacity: 0.5; }
@media (max-width: 700px) { .tt { grid-template-columns: 1fr; } .mslots { grid-template-columns: repeat(2, 1fr); } }
@media (max-height: 470px) { .mlist { max-height: 30vh; } .anv-stage { height: 110px; } }
#bResStats .rw.loot b { color: #ffcf7a; font-size: 14px; }

/* ---------------- Sosyal panel ---------------- */
.topbtn.socb { position: relative; }
.topbtn .badge { position: absolute; top: -5px; right: -6px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #e5484d; color: #fff; font-size: 12px; font-style: normal; font-weight: 700; line-height: 17px; text-align: center; }
.topbtn .badge[hidden] { display: none; }
.soc {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 38; width: min(380px, 100vw);
  display: flex; flex-direction: column; background: rgba(12, 15, 20, 0.97); border-left: 1px solid var(--line);
  transform: translateX(105%); transition: transform 0.22s ease; padding-right: env(safe-area-inset-right);
}
.soc.open { transform: none; box-shadow: -12px 0 40px rgba(0, 0, 0, 0.5); }
.soc header { display: flex; align-items: center; gap: 6px; padding: 8px 8px 6px 10px; border-bottom: 1px solid var(--line); }
.soc-tabs { display: flex; gap: 4px; flex: 1; }
.soc-tabs button { flex: 1; position: relative; height: 32px; border-radius: 8px; border: 1px solid transparent; background: none; font-weight: 700; font-size: 13px; letter-spacing: 0.06em; color: var(--muted); }
.soc-tabs button.on { color: var(--accent); border-color: rgba(243, 167, 18, 0.45); background: rgba(243, 167, 18, 0.08); }
.soc-tabs .dot { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: #e5484d; }
.soc-tabs .dot[hidden] { display: none; }
.soc-x { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); background: none; }
.soc-body { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 12px 14px; display: flex; flex-direction: column; gap: 7px; }
.soc-body h4 { margin: 8px 0 0; font-size: 12px; letter-spacing: 0.14em; color: var(--muted); }
.soc-body .muted.small, .soc-rule { font-size: 12px; color: var(--muted); margin: 0; }
.soc-body .center { text-align: center; }
.soc-body .warn { color: #ffcf7a; }
.soc-body input { height: 38px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.05); color: var(--text); font: inherit; font-size: 15px; min-width: 0; user-select: text; -webkit-user-select: text; }
.soc-body input:focus { outline: none; border-color: rgba(243, 167, 18, 0.6); }
.soc-body .battle { height: 38px; font-size: 15px; padding: 0 14px; }
.soc-body .ghost { height: 36px; }
.soc-body .wide { width: 100%; margin-top: 4px; }
.soc-body .row2 { display: flex; gap: 6px; } .soc-body .row2 > * { flex: 1; }
.soc-chans { display: flex; gap: 5px; flex-wrap: wrap; }
.soc-chans button { height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); font-size: 13px; font-weight: 700; }
.soc-chans button.on { border-color: var(--accent); color: var(--accent); }
.soc-chans button.new::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 5px; border-radius: 50%; background: #e5484d; vertical-align: middle; }
.soc-msgs { flex: 1; min-height: 120px; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; padding: 6px; border-radius: 10px; background: rgba(0, 0, 0, 0.25); }
.msg { font-size: 14px; line-height: 1.3; word-break: break-word; user-select: text; -webkit-user-select: text; }
.msg .who { border: 0; background: none; padding: 0; margin-right: 5px; font-weight: 700; color: #8fc4ff; }
.msg.me .who { color: var(--accent); }
.msg time { margin-left: 6px; font-size: 12px; color: #5d6770; }
.soc-in, .soc-add { display: flex; gap: 6px; }
.soc-in input, .soc-add input { flex: 1; }
.ctag { font-style: normal; color: #ffcf7a; margin-right: 3px; font-weight: 700; }
.ptag { font-style: normal; font-size: 12px; padding: 1px 5px; border-radius: 4px; background: rgba(74, 163, 255, 0.25); color: #9cd0ff; vertical-align: middle; }
.frow { display: flex; align-items: center; gap: 7px; padding: 6px 8px; border-radius: 9px; background: rgba(255, 255, 255, 0.04); font-size: 14px; }
.frow.me { background: rgba(243, 167, 18, 0.08); }
.frow.dim { opacity: 0.7; }
.frow > span:first-child, .frow > .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frow .who { border: 0; background: none; padding: 0; text-align: left; font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frow small { color: var(--muted); font-size: 12px; white-space: nowrap; }
.frow small.ok { color: #6fd08c; font-weight: 700; }
.frow .acts { display: flex; gap: 4px; flex: none; }
.frow .ghost.sm { height: 28px; padding: 0 8px; font-size: 12px; }
.frow .ghost.sm.ok { border-color: rgba(111, 208, 140, 0.6); color: #7fe09a; }
.st { width: 9px; height: 9px; border-radius: 50%; flex: none; background: #5d6770; }
.st.online { background: #41c76b; box-shadow: 0 0 6px #41c76b; } .st.queue { background: #f3c012; } .st.battle { background: #ff6b4a; }
.sel { user-select: text; -webkit-user-select: text; color: var(--text); }
.soc-hero { padding: 10px 12px; border-radius: 12px; background: linear-gradient(135deg, rgba(243, 167, 18, 0.1), rgba(74, 163, 255, 0.06)); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.soc-hero b { font-size: 17px; letter-spacing: 0.06em; }
.soc-hero p { margin: 0; font-size: 13px; }
.soc-hero .ghost.sm { height: 24px; padding: 0 7px; margin-left: 4px; }
.cstat { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.cstat b { color: var(--text); }
.clist { display: flex; flex-direction: column; gap: 5px; }
.clist .frow span:first-child { white-space: normal; }
.cnew { margin-top: 6px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.cnew summary { cursor: pointer; font-weight: 700; font-size: 13px; letter-spacing: 0.06em; color: var(--accent); }
.cnew form { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.cnew .tagIn { text-transform: uppercase; max-width: 90px; }
#battleBtn.readyOn { filter: hue-rotate(80deg) saturate(0.9); }

/* Etkileşimli bildirimler (davet / istek) */
#socNotes { position: fixed; top: calc(var(--top-h) + 6px); right: var(--gr); z-index: 45; display: flex; flex-direction: column; gap: 6px; width: min(330px, 92vw); pointer-events: none; }
.socNote { pointer-events: auto; padding: 10px 12px; border-radius: 12px; background: rgba(16, 20, 26, 0.97); border: 1px solid rgba(243, 167, 18, 0.45); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.5); animation: noteIn 0.25s ease; }
.socNote p { margin: 0 0 8px; font-size: 14px; line-height: 1.3; }
.socNote div { display: flex; gap: 6px; }
.socNote button { flex: 1; height: 32px; font-size: 14px; }
@keyframes noteIn { from { transform: translateX(30px); opacity: 0; } }

/* Oyuncu menüsü */
.nickMenu { position: fixed; z-index: 60; min-width: 180px; padding: 6px; border-radius: 12px; background: rgba(18, 22, 28, 0.99); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55); display: flex; flex-direction: column; }
.nickMenu > b { padding: 4px 8px 6px; font-size: 14px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.nickMenu button { text-align: left; height: 34px; padding: 0 10px; border: 0; border-radius: 8px; background: none; font-weight: 600; font-size: 14px; }
.nickMenu button:hover { background: rgba(255, 255, 255, 0.07); }
.nickMenu button:nth-last-child(-n+2) { color: #ff8a80; }
.lbNick { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-align: left; }

/* Savaş: hazır mesajlar */
#bQc { position: absolute; top: 10px; right: calc(var(--gr) + 50px); font-size: 18px; }
#bQcMenu { position: absolute; top: 58px; right: calc(var(--gr) + 50px); z-index: 6; display: none; flex-direction: column; gap: 3px; padding: 6px; border-radius: 12px; background: rgba(10, 13, 17, 0.9); border: 1px solid var(--line); }
#bQcMenu.show { display: flex; }
#bQcMenu button { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 6px; border: 0; border-radius: 8px; background: none; font-weight: 700; font-size: 14px; text-align: left; }
#bQcMenu button:hover { background: rgba(255, 255, 255, 0.08); }
#bQcMenu kbd { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 5px; background: rgba(255, 255, 255, 0.1); font: inherit; font-size: 12px; }
#bLabels em { font-style: normal; color: #ffcf7a; margin-right: 2px; }
@media (pointer: coarse) { #bQcMenu kbd { display: none; } #bQcMenu button { height: 36px; } }

/* ---------------- Pazar / sezon / envanter / premium ---------------- */
button.coin { cursor: pointer; color: inherit; font: inherit; font-weight: 700; font-size: 15px; pointer-events: auto; }
.coin.gems i { width: auto; height: auto; background: none; border-radius: 0; font-style: normal; font-size: 13px; }
.topbtn.shopb { border-color: rgba(243, 167, 18, 0.55); color: var(--accent); }
.sw.rare { border-color: var(--rc); box-shadow: 0 0 6px var(--rc); }
.sw.rare.on { border-color: var(--accent); }
.sw.locked { opacity: 0.35; filter: grayscale(0.6); position: relative; }
.sw.locked::after { content: '🔒'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; }
.mbox.shop { width: min(760px, 96vw); height: auto; min-height: min(420px, 90vh); max-height: 94vh; padding: 12px 14px; gap: 8px; }
.shop header { display: flex; align-items: center; gap: 6px; }
.shTabs { display: flex; gap: 4px; flex: 1; }
.shTabs button { flex: 1; height: 34px; border-radius: 9px; border: 1px solid transparent; background: none; font-weight: 700; font-size: 14px; letter-spacing: 0.08em; color: var(--muted); }
.shTabs button.on { color: var(--accent); border-color: rgba(243, 167, 18, 0.45); background: rgba(243, 167, 18, 0.08); }
.shBody { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.shBody h4 { margin: 6px 0 0; font-size: 12px; letter-spacing: 0.14em; color: var(--muted); }
.shBody .ghost.sm { height: 30px; padding: 0 10px; font-size: 12px; align-self: flex-start; }
.shSw { display: inline-block; width: 18px; height: 18px; border-radius: 50%; vertical-align: -4px; margin-right: 6px; border: 1px solid rgba(255, 255, 255, 0.25); }
.shSw.plan { border: 0; font-style: normal; width: auto; height: auto; }
.sHead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sHead b { font-size: 18px; letter-spacing: 0.08em; display: block; }
.sHead small { color: var(--muted); font-size: 12px; }
.sTier { display: flex; align-items: baseline; gap: 4px; }
.sTier span { font-size: 12px; color: var(--muted); letter-spacing: 0.12em; }
.sTier b { font-size: 30px; color: var(--accent); }
.sBar { position: relative; height: 16px; border-radius: 8px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.sBar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #d98b0b, #f3c012); }
.sBar span { position: relative; display: block; text-align: center; font-size: 12px; font-weight: 700; line-height: 16px; text-shadow: 0 1px 2px #000; }
.sActs { display: flex; gap: 8px; align-items: center; }
.sActs .battle { height: 38px; font-size: 15px; padding: 0 16px; }
.sActs .battle.elite { background: linear-gradient(90deg, #8b5cf6, #d4a017); color: #fff; }
.eliteOn { font-weight: 700; color: #ffd66b; letter-spacing: 0.08em; }
.sTrack { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.sRowLbl { flex: 0 0 52px; position: sticky; left: 0; z-index: 2; background: rgba(14, 18, 23, 0.97); display: flex; flex-direction: column; justify-content: space-around; padding-top: 20px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--muted); }
.sRowLbl .e { color: #ffd66b; }
.sCol { flex: 0 0 96px; display: flex; flex-direction: column; gap: 5px; }
.sCol > em { font-style: normal; text-align: center; font-weight: 700; font-size: 13px; color: var(--muted); }
.sCol.reach > em { color: var(--accent); }
.scard { position: relative; height: 84px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 4px; font-size: 12px; font-weight: 700; text-align: center; line-height: 1.15; }
.scard.elite { background: linear-gradient(160deg, rgba(139, 92, 246, 0.16), rgba(212, 160, 23, 0.1)); border-color: rgba(212, 160, 23, 0.35); }
.scard .shSw { margin: 0; width: 26px; height: 26px; }
.scard em { font-style: normal; font-size: 12px; color: var(--muted); }
.scard.ready { border-color: var(--accent); box-shadow: 0 0 10px rgba(243, 167, 18, 0.35); }
.scard.ready em { color: #111; background: var(--accent); padding: 1px 8px; border-radius: 6px; }
.scard.got { opacity: 0.5; } .scard.got em { color: #6fd08c; }
.scard.lock { opacity: 0.6; }
.scard:disabled { cursor: default; }
.mList { display: flex; flex-direction: column; gap: 5px; }
.mRow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); text-align: left; font-size: 14px; }
.mRow:hover { border-color: rgba(243, 167, 18, 0.4); }
.mRow small, .mHead small, .frow small { color: var(--muted); font-size: 12px; }
.mp { display: flex; flex-direction: column; align-items: flex-end; }
.mp b { color: #ffd66b; }
.mHead { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 18px; }
.shBody .frow { font-size: 14px; }
.pOffers { display: flex; gap: 8px; }
.pOffer { flex: 1; padding: 14px 8px; border-radius: 12px; border: 1px solid rgba(212, 160, 23, 0.5); background: linear-gradient(160deg, rgba(212, 160, 23, 0.15), rgba(0, 0, 0, 0.2)); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pOffer b { font-size: 20px; letter-spacing: 0.06em; }
.pOffer span { font-weight: 700; color: #9cd0ff; }
.pOffer:disabled { opacity: 0.45; cursor: not-allowed; }
.gemBox { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-radius: 10px; background: rgba(74, 163, 255, 0.08); border: 1px solid rgba(74, 163, 255, 0.3); }
.gemBox b { font-size: 20px; }
.soc-hero.prem { background: linear-gradient(135deg, rgba(212, 160, 23, 0.16), rgba(139, 92, 246, 0.1)); }
.okc { color: #6fd08c; }
@media (max-height: 460px) { .mbox.shop { max-height: 96vh; } .scard { height: 70px; } .sCol { flex-basis: 86px; } }
@media (max-width: 920px) { .top .brand { display: none; } .top { justify-content: flex-end; } }
/* Makineli: mobil düğme + ısı çubuğu */
.bBtns { width: 290px; }
.rb.mg { right: 200px; bottom: 8px; width: 70px; height: 70px; font-size: 10px; letter-spacing: 0.04em; background: rgba(10, 14, 18, 0.65); }
.rb.mg .heat { position: absolute; left: 14px; right: 14px; bottom: 12px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.15); overflow: hidden; }
.rb.mg .heat i { display: block; height: 100%; width: 100%; background: #ffd07a; }
.rb.mg.hot, .bWeap .slot.hot { border-color: #ff5a3c; }
.rb.mg.hot .heat i, .bWeap .slot.hot .bar i { background: #ff5a3c; }
#battle.lefty .rb.mg { right: auto; left: 200px; }
/* Maç sonu: önce skor tablosu, sonra ödüller */
#bResult .box { width: min(760px, 96vw); max-height: 94vh; overflow-y: auto; }
#bResult .resRew, #bResult .resEnd { display: none; }
#bResult.rew .resRew, #bResult.rew .resEnd { display: flex; }
#bResult.rew .resRew { display: grid; }
#bResult.rew .resBoard, #bResult.rew .resNav { display: none; }
#bResult .resEnd .ghost.sm { flex: 0 0 auto; padding: 0 12px; }
.resBoard { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sbT { border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.25); }
.sbT.blue { border-color: rgba(74, 163, 255, 0.45); } .sbT.red { border-color: rgba(255, 90, 90, 0.4); }
.sbH { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 10px; }
.sbT.blue .sbH { background: rgba(74, 163, 255, 0.18); } .sbT.red .sbH { background: rgba(255, 90, 90, 0.16); }
.sbH b { letter-spacing: 0.1em; font-size: 13px; } .sbH span { font-size: 11px; color: var(--muted); }
.sbT table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sbT th { font-size: 10px; letter-spacing: 0.08em; color: var(--muted); font-weight: 700; text-align: right; padding: 4px 6px; }
.sbT td { padding: 4px 6px; text-align: right; font-variant-numeric: tabular-nums; border-top: 1px solid rgba(255, 255, 255, 0.05); }
.sbT th:nth-child(2), .sbT td.nm { text-align: left; }
.sbT td:first-child, .sbT th:first-child { width: 18px; color: var(--muted); text-align: center; }
.sbT td.nm { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.sbT td.nm small { color: var(--muted); font-weight: 600; font-size: 10px; }
.sbT td.nm em { font-style: normal; color: #ffcf7a; margin-right: 3px; }
.sbT tr.me td { background: rgba(243, 167, 18, 0.14); }
.sbT tr.dead td.nm { opacity: 0.6; }
.sbT .mvp { font-style: normal; color: #ffd24a; margin-right: 4px; }
.sbMvp { grid-column: 1 / -1; margin: 2px 0 0; text-align: center; font-size: 14px; color: #ffe08a; }
@media (max-width: 700px) { .resBoard { grid-template-columns: 1fr; } }
@media (max-height: 460px) { .sbT td, .sbT th { padding: 2px 5px; } .sbT table { font-size: 12px; } }
#bResult.rew .resRew { max-width: 440px; width: 100%; margin: 0 auto 6px; }

/* ---------------- Lobi canlı sohbet paneli ---------------- */
:root { --dock-h: 206px; }
#ui #chatDock, #ui #chatTicker { pointer-events: auto; }
#chatDock { position: absolute; left: var(--gl); bottom: calc(var(--car-h) + 14px); width: clamp(236px, 30vw, 340px); height: var(--dock-h); z-index: 2;
  display: flex; flex-direction: column; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
#chatDock[hidden] { display: none; }
#chatDock.min { height: 38px; }
#chatDock.min .cdMsgs, #chatDock.min .cdIn { display: none; }
body.dockOn .info { bottom: calc(var(--car-h) + 14px + var(--dock-h) + 8px); }
body.dockOn .info .desc { display: none; }
body.dockMin .info { bottom: calc(var(--car-h) + 14px + 46px); }
.cdHead { display: flex; align-items: center; gap: 4px; padding: 5px 6px; border-bottom: 1px solid var(--line); min-width: 0; }
.cdTabs { display: flex; gap: 3px; flex: 1; min-width: 0; overflow: hidden; }
.cdTabs button { flex: none; height: 26px; padding: 0 8px; border-radius: 8px; border: 1px solid transparent; background: none; font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.cdTabs button b { font-weight: 700; }
.cdTabs button.on { color: var(--accent); border-color: rgba(243, 167, 18, 0.45); background: rgba(243, 167, 18, 0.08); }
.cdOn { font-size: 12px; color: #6fd08c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; }
#chatDock.min .cdOn { color: var(--muted); max-width: none; flex: 1; }
#chatDock.min .cdTabs { flex: none; }
#chatDock.min .cdTabs button:not(.on) { display: none; }
.cdBtn { flex: none; width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.3); font-size: 12px; display: grid; place-items: center; }
.cdMsgs { flex: 1; min-height: 0; overflow-y: auto; padding: 5px 8px; display: flex; flex-direction: column; gap: 2px; scrollbar-width: thin; }
.cdMsgs .msg { font-size: 13px; }
.cdMsgs .msg time { font-size: 12px; }
.cdNote { margin: auto; text-align: center; color: var(--muted); font-size: 12px; padding: 6px; }
.cdErr { font-size: 12px; color: #ffb36b; }
.cdIn { display: flex; gap: 5px; padding: 5px 6px 6px; }
.cdIn input { flex: 1; min-width: 0; height: 30px; padding: 0 9px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.05); color: var(--text); font: inherit; font-size: 13px; user-select: text; -webkit-user-select: text; }
.cdIn input:focus { outline: none; border-color: rgba(243, 167, 18, 0.6); }
.cdIn .battle { height: 30px; width: 40px; padding: 0; font-size: 14px; }
.cdPop { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); max-height: min(360px, 55vh); display: flex; flex-direction: column; gap: 5px; padding: 8px; border-radius: 12px; background: rgba(14, 18, 23, 0.98); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
.cdPop[hidden] { display: none; }
.cdPopHead { display: flex; justify-content: space-between; align-items: center; font-size: 12px; letter-spacing: 0.1em; }
.cdSearch { height: 30px; padding: 0 9px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.05); color: var(--text); font: inherit; font-size: 13px; }
.cdRooms, .cdUsers { overflow-y: auto; display: flex; flex-direction: column; gap: 2px; min-height: 0; }
.cdRooms button, .cdUsers button { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px; border: 0; border-radius: 7px; background: none; text-align: left; font-size: 13px; font-weight: 600; flex: none; }
.cdRooms button:hover, .cdUsers button:hover { background: rgba(255, 255, 255, 0.07); }
.cdRooms button.on { color: var(--accent); }
.cdRooms small, .cdUsers small { margin-left: auto; color: #6fd08c; font-size: 12px; }
.cdUsers small { color: var(--muted); }
#chatTicker { position: absolute; top: calc(var(--top-h) + 4px); left: 50%; transform: translate(-50%, -8px); max-width: min(520px, 70vw); padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(10, 13, 17, 0.85); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity 0.25s, transform 0.25s; pointer-events: none; }
#chatTicker.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#chatTicker[hidden] { display: none; }
#chatTicker b { color: #8fc4ff; margin-right: 4px; }
.fres { display: flex; flex-direction: column; gap: 4px; }
.fres .who small { color: var(--muted); font-weight: 600; }
.pcard .pstats b { font-size: 16px; }
.sbT td.nm.link { cursor: pointer; text-decoration: underline dotted rgba(255, 255, 255, 0.35); text-underline-offset: 3px; }
.nickMenu { z-index: 80; }
.fld textarea { min-height: 110px; resize: vertical; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06); color: var(--text); font: 600 16px/1.35 var(--font); padding: 10px 12px; user-select: text; -webkit-user-select: text; }
.fld textarea:focus { outline: 2px solid var(--accent); border-color: transparent; }
.sbox #sContact { height: 40px; font-size: 14px; }
.st-link.small { font-size: 13px; opacity: 0.75; margin-top: 2px; }

/* ---------------- Oyun içi pencereler (alert/confirm/prompt yerine) ---------------- */
.dlgOv { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 14px; background: rgba(4, 6, 9, 0.7); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: dlgFade 0.15s ease; }
.dlg { width: min(420px, 94vw); max-height: 92vh; overflow-y: auto; padding: 20px 20px 16px; border-radius: 16px; background: rgba(16, 20, 26, 0.99); border: 1px solid rgba(243, 167, 18, 0.35);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); display: flex; flex-direction: column; gap: 10px; animation: dlgPop 0.18s cubic-bezier(0.2, 1.3, 0.4, 1); }
.dlg.danger { border-color: rgba(255, 90, 60, 0.55); }
.dlg h3 { margin: 0; font-size: 21px; letter-spacing: 0.1em; text-align: center; }
.dlg p { margin: 0; font-size: 15px; line-height: 1.4; color: #cfd6dc; text-align: center; }
.dlg .dlgIcon { font-size: 34px; text-align: center; line-height: 1; }
.dlg .warnbox { padding: 9px 11px; border-radius: 10px; background: rgba(255, 90, 60, 0.12); border: 1px solid rgba(255, 90, 60, 0.4); color: #ffb3a1; font-size: 14px; text-align: left; }
.dlg .costs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.dlg .costs span { padding: 5px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.06); font-weight: 700; font-size: 14px; }
.dlgIn { display: flex; align-items: center; gap: 8px; }
.dlgIn input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06); color: var(--text); font: 700 18px var(--font); user-select: text; -webkit-user-select: text; }
.dlgIn input:focus { outline: 2px solid var(--accent); border-color: transparent; }
.dlgIn input.bad { outline: 2px solid #ff5a3c; }
.dlgIn span { font-weight: 700; color: var(--muted); }
.dlgHint { font-size: 13px !important; color: var(--muted) !important; }
.dlgCh { display: flex; flex-direction: column; gap: 5px; }
.dlgCh button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); text-align: left; }
.dlgCh button.on { border-color: var(--accent); background: rgba(243, 167, 18, 0.1); }
.dlgCh small { color: var(--muted); font-size: 12px; }
.dlgBtns { display: flex; gap: 8px; margin-top: 4px; }
.dlgBtns button { flex: 1; height: 46px; font-size: 17px; }
.dlgBtns .battle.red { background: linear-gradient(180deg, #ff7b5a, #d7401f); color: #fff; }
@keyframes dlgFade { from { opacity: 0; } }
@keyframes dlgPop { from { transform: scale(0.92); opacity: 0; } }

/* ---------------- Modüller (yeni) ---------------- */
.mbox.modbox { width: min(820px, 96vw); max-height: 94vh; padding: 14px 16px; gap: 10px; }
.mHead { display: flex; align-items: center; gap: 10px; }
.mHead h2 { margin: 0; flex: 1; text-align: left; font-size: 24px; }
.mHead h2 small { font-size: 16px; color: var(--accent); margin-left: 6px; letter-spacing: 0.1em; }
.mRes { display: flex; gap: 6px; flex-wrap: wrap; }
.mRes span { padding: 4px 9px; border-radius: 999px; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--line); font-size: 14px; white-space: nowrap; }
.modbox .mslots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.modbox .mslot { position: relative; min-height: 118px; padding: 10px 8px 9px; gap: 3px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); }
.modbox .mslot.full { background: linear-gradient(180deg, rgba(74, 163, 255, 0.1), rgba(255, 255, 255, 0.03)); }
.modbox .mslot.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset, 0 0 16px rgba(243, 167, 18, 0.25); background: rgba(243, 167, 18, 0.1); }
.modbox .mslot em { font-size: 13px; color: var(--text); letter-spacing: 0.06em; }
.modbox .mslot b { font-size: 22px; display: flex; gap: 5px; align-items: center; }
.modbox .mslot small { font-size: 12px; line-height: 1.25; }
.modbox .mslot small strong { color: #6fd08c; }
.mic { font-size: 26px; line-height: 1; }
.mic.sm { font-size: 22px; }
.mtier { font-style: normal; display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 6px; border-radius: 6px; font-size: 14px; font-weight: 700; background: rgba(255, 255, 255, 0.1); }
.mtier.t2 { background: rgba(74, 163, 255, 0.25); color: #9cd0ff; } .mtier.t3 { background: rgba(182, 124, 255, 0.28); color: #d3b4ff; }
.mDetail { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 12px; background: rgba(0, 0, 0, 0.22); border: 1px solid var(--line); min-height: 0; }
.mdTitle { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px; font-size: 15px; }
.modbox .mlist { display: flex; flex-direction: column; gap: 6px; max-height: 38vh; overflow-y: auto; }
.modbox .mrow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid transparent; }
.modbox .mrow.here { border-color: rgba(111, 208, 140, 0.55); background: rgba(111, 208, 140, 0.07); }
.modbox .mrow .mn { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.modbox .mrow .mn b { font-size: 16px; }
.modbox .mrow .mn small { font-size: 12px; color: var(--muted); }
.modbox .mrow .mn em { font-style: normal; }
.modbox .mrow .ma { display: flex; gap: 6px; flex: none; }
.modbox .mrow .ma button { height: 38px; padding: 0 14px; font-size: 14px; }
.modbox .mrow .ma .battle { font-size: 15px; padding: 0 18px; }
.ghost.up { border-color: rgba(111, 208, 140, 0.6); color: #7fe09a; }
.ghost.dim { color: #ffd25a; border-color: rgba(255, 210, 90, 0.35); }
.mEmpty { margin: 10px 0; text-align: center; color: var(--muted); font-size: 14px; line-height: 1.5; }
.mFoot { display: flex; flex-direction: column; gap: 6px; }
.mFoot .buy { height: 40px; font-size: 14px; border-style: dashed; }
.mFoot p { margin: 0; }
@media (max-width: 700px) { .modbox .mslots { grid-template-columns: repeat(2, 1fr); } .modbox .mrow { flex-wrap: wrap; } .modbox .mrow .ma { width: 100%; } .modbox .mrow .ma button { flex: 1; } }
@media (max-height: 470px) { .modbox .mslot { min-height: 84px; padding: 6px; } .mic { font-size: 20px; } .modbox .mlist { max-height: 34vh; } }

/* ---------------- Modül yükseltme (yeni) ---------------- */
.mbox.anvbox { width: min(480px, 96vw); max-height: 94vh; padding: 14px 16px; gap: 9px; }
.anv-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); }
.anv-card > div:not(.anv-lv) { flex: 1; display: flex; flex-direction: column; }
.anv-card b { font-size: 19px; }
.anv-card small { color: var(--muted); font-size: 13px; }
.anv-card.burned small { color: #ff6b3d; font-weight: 700; }
.anv-lv { display: flex; align-items: center; gap: 6px; font-size: 28px; }
.anv-lv span { color: var(--muted); font-size: 20px; }
.anvbox .anv-stage { height: 104px; }
.anvbox .anv-info div { padding: 7px 10px; }
.anvbox .anv-info b { font-size: 16px; }
.chk.prot { padding: 8px 10px; border-radius: 10px; background: rgba(74, 163, 255, 0.08); border: 1px solid rgba(74, 163, 255, 0.3); font-size: 14px; }
.chk.prot.dis { opacity: 0.55; }
.anvbox .wide { width: 100%; height: 50px; font-size: 20px; }
.warnc { color: #ffb36b; font-size: 14px; margin: 0; }
.rates { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.rates span { display: flex; flex-direction: column; align-items: center; min-width: 38px; padding: 3px 4px; border-radius: 7px; background: rgba(255, 255, 255, 0.05); font-size: 12px; color: var(--muted); font-weight: 700; }
.rates span b { font-size: 12px; color: #6fd08c; }
.rates span.burn b { color: #ffb36b; }
.rates span.now { outline: 1px solid var(--accent); color: var(--accent); }
.anvbox .anv-toast { top: 150px; }
@media (max-height: 470px) { .anvbox .anv-stage { height: 70px; } .anv-card { padding: 6px 10px; } }
.dlg .guide { display: flex; flex-direction: column; gap: 7px; } .dlg .guide p { text-align: left; font-size: 14px; }
.modbox .mrow .mn small, .modbox .mrow .mn b { text-align: left; }
.anv-card small { text-align: left; }
@media (max-height: 470px) {
  .anvbox .anv-stage { display: none; }
  .anvbox .anv-info { grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .anvbox .anv-info div { padding: 4px 7px; }
  .anvbox .anv-info b { font-size: 14px; }
  .anvbox .rates, .anvbox > #avBody > p.muted { display: none; }
  .anvbox .wide { height: 42px; }
  .anvbox .anv-toast { top: 40%; }
  .chk.prot { padding: 5px 8px; font-size: 13px; }
  .dlg { padding: 12px 16px 12px; gap: 7px; }
  .dlg .dlgIcon { font-size: 26px; }
  .dlgBtns button { height: 40px; }
}

/* ---------------- Yeniden doğma + helikopter ---------------- */
#bGameMode { position: absolute; top: 52px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.55); white-space: nowrap; pointer-events: none; text-shadow: 0 1px 2px #000; }
#battle.over #bGameMode { display: none; }
#bDeploy { position: absolute; inset: auto 0 0 0; display: none; justify-content: center; padding: 0 12px 14px; z-index: 7; pointer-events: none; }
#bDeploy.show { display: flex; }
.dpBox { pointer-events: auto; width: min(760px, 100%); display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 16px; background: rgba(10, 13, 17, 0.9); border: 1px solid rgba(243, 167, 18, 0.4); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.dpHead { display: flex; justify-content: space-between; align-items: baseline; }
.dpHead b { font-size: 20px; letter-spacing: 0.14em; color: var(--accent); }
.dpHead span { font-size: 14px; color: #cfd6dc; }
.dpCards { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.dpCard { flex: 0 0 132px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px 10px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.05); text-align: left; position: relative; }
.dpCard em { position: absolute; top: 7px; right: 8px; font-style: normal; font-size: 12px; font-weight: 700; color: var(--muted); }
.dpCard b { font-size: 17px; letter-spacing: 0.06em; }
.dpCard small { font-size: 11px; color: var(--muted); }
.dpCard span { font-size: 11px; color: #9cd0ff; margin-top: 2px; }
.dpCard.on { border-color: var(--accent); background: rgba(243, 167, 18, 0.14); box-shadow: 0 0 0 1px var(--accent) inset; }
.dpCard.air { background: linear-gradient(160deg, rgba(74, 163, 255, 0.16), rgba(255, 255, 255, 0.03)); }
.dpCard.air em { color: #9cd0ff; font-size: 16px; }
.dpCard.dis { opacity: 0.45; }
.dpCard.dis span { color: #ffb36b; }
#dpGo { height: 48px; font-size: 20px; }
#dpGo:disabled { filter: grayscale(0.6) brightness(0.75); cursor: default; }
#battle.dead .bScore, #battle.dead #bMap { opacity: 0.9; }
.bAlt { position: absolute; right: calc(var(--gr) + 10px); bottom: 240px; display: none; flex-direction: column; gap: 10px; pointer-events: auto; }
.bAlt .rb { position: static; width: 56px; height: 56px; font-size: 20px; background: rgba(10, 14, 18, 0.65); }
#battle.heli .bAlt { display: flex; }
#battle.dead .bAlt { display: none; }
@media (pointer: fine) { .bAlt { display: none !important; } }
#battle.lefty .bAlt { right: auto; left: calc(var(--gl) + 10px); }
@media (max-height: 460px) { .dpCard { flex-basis: 112px; padding: 6px 8px; } .dpCard b { font-size: 15px; } #dpGo { height: 40px; } .dpBox { padding: 8px 10px; gap: 6px; } .bAlt { bottom: 200px; } }
.heliNote { pointer-events: auto; max-width: 330px; padding: 8px 12px; border-radius: 10px; font-size: 13px; line-height: 1.35; background: rgba(74, 163, 255, 0.12); border: 1px solid rgba(74, 163, 255, 0.4); color: #cfe6ff; }
.heliNote[hidden] { display: none; }
@media (max-width: 920px) { .heliNote { display: none !important; } }
#bDeploy.show ~ #bSpec, #battle:has(#bDeploy.show) #bSpec { display: none !important; }
/* Helikopter irtifa göstergesi: sürekli (altta küçük), tekerlekle değiştirince belirginleşir */
#bAltInd { position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%); display: none; gap: 8px; align-items: baseline; padding: 3px 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.45); border: 1px solid var(--line); pointer-events: none; transition: transform 0.15s, border-color 0.15s; }
#bAltInd span { font-size: 10px; letter-spacing: 0.14em; color: var(--muted); font-weight: 700; }
#bAltInd b { font-size: 16px; font-variant-numeric: tabular-nums; }
#battle.heli:not(.dead) #bAltInd { display: flex; }
#bAltInd.show { border-color: var(--accent); transform: translateX(-50%) scale(1.15); }
.st-foot a, .slink { color: #9cd0ff; } .slink { display: block; text-align: center; font-size: 13px; }

/* ---------------- Bayrak kapma ---------------- */
.bScore .cqb { display: none; width: 150px; height: 10px; border-radius: 5px; background: rgba(0, 0, 0, 0.5); outline: 1px solid rgba(255, 255, 255, 0.18); overflow: hidden; }
.bScore .cqb i { display: block; height: 100%; width: 0; transition: width 0.4s linear; }
.bScore .blue .cqb i { background: linear-gradient(90deg, #2f7de0, #6db6ff); }
.bScore .red .cqb { transform: scaleX(-1); }
.bScore .red .cqb i { background: linear-gradient(90deg, #d93a3a, #ff7b7b); }
#battle.cq .bScore .cqb { display: block; }
#battle.cq .bScore .tm span { display: none; }
#battle.cq .bScore .tm b { min-width: 52px; text-align: center; font-variant-numeric: tabular-nums; }
#bFlags { position: absolute; top: 46px; left: 50%; transform: translateX(-50%); display: none; gap: 7px; pointer-events: none; }
#battle.cq #bFlags { display: flex; }
#battle.cq #bGameMode { top: 86px; }
#bFlags i { --p: 0; --c: #e9e9e9; position: relative; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--c) calc(var(--p) * 360deg), rgba(0, 0, 0, 0.55) 0); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }
#bFlags i b { width: 23px; height: 23px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #fff; background: #5d6268; text-shadow: 0 1px 2px #000; }
#bFlags i.vb { --c: #4aa3ff; } #bFlags i.vr { --c: #ff5c5c; }
#bFlags i.ob b { background: #2f74d0; } #bFlags i.or b { background: #cf3434; }
#bFlags i.fight { animation: flagFight 0.8s ease-in-out infinite; }
#bFlags i.alert b { outline: 2px solid #ffd25a; }
@keyframes flagFight { 50% { transform: scale(1.14); box-shadow: 0 0 10px #ffd25a; } }
#bCap { position: absolute; top: 118px; left: 50%; transform: translateX(-50%); display: none; flex-direction: column; align-items: center; gap: 5px; pointer-events: none;
  padding: 7px 14px 9px; border-radius: 10px; background: rgba(8, 11, 15, 0.62); font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-shadow: 0 1px 2px #000; }
#bCap.show { display: flex; }
#bCap > i { width: 220px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.15); overflow: hidden; }
#bCap > i > i { display: block; height: 100%; background: #e9e9e9; transition: width 0.25s linear; }
#bCap.vb > i > i { background: #4aa3ff; } #bCap.vr > i > i { background: #ff5c5c; }
.fmark { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; pointer-events: none; will-change: transform; }
.fmark b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #fff; background: rgba(93, 98, 104, 0.85); border: 2px solid rgba(255, 255, 255, 0.85); text-shadow: 0 1px 2px #000; }
.fmark.ob b { background: rgba(47, 116, 208, 0.9); } .fmark.or b { background: rgba(207, 52, 52, 0.9); }
.fmark small { font-size: 10px; font-weight: 700; color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 2px #000; }
.dpSpawn { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 2px 0 10px; }
.dpSpawn:empty { display: none; }
.dpSpawn span { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.6); margin-right: 4px; }
.dpSpawn button { min-width: 42px; height: 36px; padding: 0 10px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.08); color: #fff; font-weight: 800; font-size: 14px; cursor: pointer; }
.dpSpawn button.ob { border-color: #4aa3ff; } .dpSpawn button.or { border-color: #ff5c5c; }
.dpSpawn button.on { background: #f3a712; color: #111; border-color: #f3a712; }
.dpSpawn button.dis { opacity: 0.35; cursor: not-allowed; }
@media (max-width: 700px) {
  .bScore .cqb { width: 80px; height: 8px; }
  #bFlags { top: 40px; gap: 5px; } #bFlags i { width: 25px; height: 25px; } #bFlags i b { width: 19px; height: 19px; font-size: 11px; }
  #battle.cq #bGameMode { display: none; }
  #bCap { top: 76px; font-size: 11px; } #bCap > i { width: 160px; }
}
#battle.over #bCap { display: none; }
#battle.cq .sbT td, #battle.cq .sbT th { padding-left: 4px; padding-right: 4px; }
#battle.cq .sbT td.nm { max-width: 128px; }
#battle.cq .sbT td.nm small { display: none; }
#battle.cq #bResult .box { width: min(820px, 96vw); }
@media (max-height: 500px) {
  #battle.cq #bGameMode { display: none; }
  #bCap { top: 84px; }
}
#battle.cq #bClick { top: 170px; }
.pcard .row2 button { white-space: nowrap; font-size: 14px; letter-spacing: 0.08em; }

/* Vuruş hissi: isabet yazıları, karşı önlem */
.bfloat.rico { font-size: 20px; color: #cfd6dc; letter-spacing: 0.08em; }
.bfloat.dmg.crit { color: #ffb347; font-size: 26px; }
.bWeap .slot.cm { position: absolute; right: 0; bottom: calc(100% + 8px); width: 150px; }
.bWeap .slot.cm.ready .bar i { background: #7fd6ff; }
.bWeap .slot.cm:not(.ready) { opacity: 0.6; }
#bCm { right: 100px; bottom: 150px; color: #7fd6ff; border-color: rgba(127, 214, 255, 0.5); }
#bCm.ready { border-color: #7fd6ff; box-shadow: 0 0 12px rgba(127, 214, 255, 0.4); }
#battle.lefty #bCm { right: auto; left: 100px; }
#battle.dead #bCm { display: none; }
.dlgCh.need { animation: needPick 0.4s; } .dlgCh.need button { border-color: #ffb347; }
@keyframes needPick { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
/* Telefonda sohbet şeridi sağda: soldaki tank kartının başlığına binmesin */
@media (max-width: 900px) {
  #chatTicker { left: auto; right: 10px; max-width: 46vw; transform: translateY(-8px); }
  #chatTicker.show { transform: translateY(0); }
}
/* Kısa ekranlar (yatay telefon): her şey kaydırmadan görünsün */
@media (max-height: 440px) {
  .info .desc, .info .specs { display: none; }                 /* garaj: kamuflaj satırı görünsün */
  .info .stats { margin-bottom: 8px; }
  .sw { width: 28px; height: 28px; }
  #settingsPanel .sbox { width: min(820px, 96vw); display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; padding: 12px 18px; max-height: 96vh; }
  #settingsPanel .sbox > h2, #settingsPanel .sbox > button, #settingsPanel .sbox > a, #settingsPanel .sbox > .sVer, #settingsPanel .sbox > .slinks { grid-column: 1 / -1; }
  #settingsPanel #sApp { display: contents; }
  #settingsPanel #sApp > button { grid-column: 1 / -1; padding-top: 8px; padding-bottom: 8px; }
  #settingsPanel .sbox > h2 { margin: 0 0 4px; font-size: 20px; }
  #settingsPanel .srow { min-height: 34px; grid-template-columns: 92px 1fr auto; font-size: 13px; }
  #settingsPanel .sbox > button { padding-top: 8px; padding-bottom: 8px; }
  #contactBox textarea { height: 62px; min-height: 0; }
  #contactBox .mbox { padding: 12px 18px; gap: 6px; }
  #contactBox .mbox > p { display: none; }
  .mslots .mslot small { display: none; }
  .mslots .mslot { padding-top: 6px; padding-bottom: 6px; }
}
.warnTxt { color: #ffb347; font-weight: 700; font-size: 12px; }
/* Uzun pencerelerde (rehber, telefon) onay düğmeleri hep görünür: altta sabit */
.dlg .dlgBtns { position: sticky; bottom: -16px; margin-bottom: -16px; padding: 10px 0 16px; background: linear-gradient(transparent, rgba(16, 20, 26, 0.99) 14px); z-index: 1; }

/* ---------------- Günlük: giriş serisi + görevler ---------------- */
.topbtn.dayb { position: relative; }
.mbox.daily { width: min(640px, 96vw); max-height: 94vh; overflow-y: auto; padding: 12px 14px; gap: 8px; }
.daily header { display: flex; align-items: center; justify-content: space-between; }
.daily header b { font-size: 18px; letter-spacing: 0.12em; color: var(--accent); }
.daily h4 { margin: 6px 0 2px; font-size: 13px; letter-spacing: 0.1em; }
.dyStreak { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.dyDay { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 3px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); text-align: center; font-size: 12px; min-height: 64px; }
.dyDay em { font-style: normal; font-size: 12px; color: var(--muted); letter-spacing: 0.06em; }
.dyDay span { line-height: 1.3; }
.dyDay.got { opacity: 0.5; }
.dyDay.got i { position: absolute; top: 3px; right: 5px; font-style: normal; color: #5fd38d; font-weight: 700; }
.dyDay.today { border-color: var(--accent); background: rgba(243, 167, 18, 0.12); box-shadow: 0 0 14px rgba(243, 167, 18, 0.25); }
.dyDay.big { background: linear-gradient(160deg, rgba(139, 92, 246, 0.16), rgba(243, 167, 18, 0.1)); }
#dyClaim { align-self: center; min-width: 240px; }
.dyQuests { display: flex; flex-direction: column; gap: 6px; }
.dyQ { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); display: flex; flex-direction: column; gap: 5px; }
.dyQt, .dyQr { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; }
.dyQt small, .dyQr span { color: var(--muted); font-size: 12px; }
.dyBar { position: relative; height: 16px; border-radius: 8px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.dyBar i { display: block; height: 100%; background: linear-gradient(90deg, #c77d05, var(--accent)); }
.dyBar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; text-shadow: 0 1px 2px #000; }
.dyFw { margin: 4px 0 0; padding: 7px 10px; border-radius: 10px; font-size: 13px; background: rgba(255, 255, 255, 0.04); color: var(--muted); }
.dyFw.on { color: var(--text); background: rgba(95, 211, 141, 0.12); border: 1px solid rgba(95, 211, 141, 0.35); }
@media (max-width: 560px) { .dyStreak { grid-template-columns: repeat(4, 1fr); } }

/* Sıralama sekmeleri */
.lbTabs { display: flex; gap: 6px; }
.lbTabs button { flex: 1; height: 32px; border-radius: 9px; border: 1px solid var(--line); background: none; color: var(--muted); font-weight: 700; letter-spacing: 0.08em; }
.lbTabs button.on { color: var(--accent); border-color: rgba(243, 167, 18, 0.45); background: rgba(243, 167, 18, 0.08); }
.lbNote { margin: 2px 0 6px; font-size: 12px; color: var(--muted); }

/* Elmas borsası, mitik */
.gxGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gxGrid h4 { margin: 4px 0; }
.lb.gx td, .lb.gx th { padding: 3px 8px; }
.gxRow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gxRow input { width: 84px; height: 32px; border-radius: 8px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.3); color: var(--text); padding: 0 8px; font-size: 14px; }
.gxRow .battle.sm { height: 32px; padding: 0 16px; font-size: 14px; }
.mythRow { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 6px 10px; border-radius: 10px; border: 1px solid rgba(255, 77, 109, 0.35); background: rgba(255, 77, 109, 0.07); font-size: 13px; }
.mythRow span { display: flex; align-items: center; gap: 6px; }
@media (max-width: 620px) { .gxGrid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .shTabs button { font-size: 12px; letter-spacing: 0.02em; } }
.bOverlay h2 .resClose { display: block; margin-top: 2px; font-size: 13px; letter-spacing: 0.08em; color: var(--muted); font-weight: 600; }
.protShop { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 10px; border-radius: 9px; background: rgba(255, 255, 255, 0.04); font-size: 12px; color: var(--muted); }
/* Sonuç ekranı: başlık ve butonlar hep görünür, arada skor/ödül listesi kayar (telefonda butonlar ekran dışında kalmasın) */
#bResult .box { overflow: hidden; max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
#bResult .resBoard, #bResult.rew .resRew { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
#bResult .resNav, #bResult .resEnd { flex: 0 0 auto; }
#bResult h2 { flex: 0 0 auto; }
@media (max-height: 470px) {
  #bResult .box { padding: 8px 12px; gap: 6px; }
  #bResult h2 { font-size: 20px; margin: 0; }
  #bResult .resNav button, #bResult .resEnd button { height: 38px; }
}
/* Helikopter ▲▼: sol başparmağın yanında (sağ üstte ölüm akışı ve bildirimlerin altında kalıyordu) */
.bAlt { right: auto; left: calc(var(--gl) + 190px); bottom: 110px; }
.bAlt .rb { width: 52px; height: 52px; }
#battle.lefty .bAlt { left: auto; right: calc(var(--gr) + 190px); }
@media (max-height: 460px) { .bAlt { bottom: 96px; gap: 8px; } }
#bHint small { display: block; }
@media (pointer: fine) { #bHint .tch { display: none; } #bHint { bottom: 132px; } }
#battle.needlock #bClick, #battle.cq #bClick { top: 60%; } /* geri sayım ve bayrak şeridiyle çakışmasın */
#bWarn { z-index: 2; }
.bfloat.dmg { text-shadow: 0 0 3px #000, 0 2px 6px #000; }
.bfloat.dmg.weak { color: #b9c2c9; font-size: 21px; }
/* Dürbün karartması üst göstergeleri (skor, süre, harita, bayraklar, akış) örtmesin */
#battle.zoomed #bMap, #battle.zoomed .bScore, #battle.zoomed #bFlags, #battle.zoomed #bFeed, #battle.zoomed #bPause, #battle.zoomed #bQc { z-index: 2; }
#battle.zoomed #bScope { z-index: 1; }
#dyClaim { display: block; margin: 4px auto 0; }

/* Davet (arkadaşını çağır) */
.soc-tabs button { font-size: 12px; letter-spacing: 0.03em; }
.soc-hero.inv { background: linear-gradient(135deg, rgba(212, 167, 44, 0.18), rgba(74, 163, 255, 0.08)); }
.invCode { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; border-radius: 12px; border: 1px dashed rgba(212, 167, 44, 0.6); background: rgba(212, 167, 44, 0.06); text-align: center; }
.invCode > span { font-size: 12px; letter-spacing: 0.14em; color: var(--muted); }
.invCode > b { font-size: 28px; letter-spacing: 0.22em; color: #e8c15a; font-family: ui-monospace, monospace; }
.invCode small { word-break: break-all; font-size: 12px; }
.invSteps, .invTiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.invSteps > div, .invTiers > div { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 7px 8px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); font-size: 12px; }
.invSteps em, .invTiers em { font-style: normal; font-weight: 700; color: var(--accent); font-size: 12px; }
.invTiers > div.got { border-color: rgba(95, 211, 141, 0.5); background: rgba(95, 211, 141, 0.08); }
.invTiers > div i { position: absolute; top: 4px; right: 7px; font-style: normal; color: #5fd38d; }
.invBar { position: relative; height: 16px; border-radius: 8px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.invBar i { display: block; height: 100%; background: linear-gradient(90deg, #a07c1c, #e8c15a); }
.invBar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.invMs { display: flex; gap: 4px; }
.invMs i { font-style: normal; font-size: 12px; width: 26px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; border: 1px solid var(--line); color: var(--muted); }
.invMs i.on { background: rgba(95, 211, 141, 0.2); border-color: rgba(95, 211, 141, 0.6); color: #bff0d2; }
.invUse { display: flex; gap: 6px; }
.invUse input { flex: 1; height: 32px; border-radius: 8px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.3); color: var(--text); padding: 0 10px; text-transform: uppercase; letter-spacing: 0.12em; }
.dyInv { margin-top: 2px; padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(212, 167, 44, 0.5); background: rgba(212, 167, 44, 0.08); color: var(--text); font-size: 13px; text-align: left; }
@media (max-width: 560px) { .invSteps, .invTiers { grid-template-columns: 1fr; } }

/* ================= SURVIVOR ================= */
#sv { position: fixed; inset: 0; z-index: 5; pointer-events: none; touch-action: none; user-select: none; -webkit-user-select: none; font-family: var(--font); color: #eef2f5; }
#sv button { pointer-events: auto; }
#sv.hurt::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(220, 30, 20, 0.55)); animation: svHurt 0.45s ease-out forwards; }
@keyframes svHurt { from { opacity: 1; } to { opacity: 0; } }
.svTop { position: absolute; top: 0; left: 0; right: 0; padding: max(6px, env(safe-area-inset-top)) var(--gr) 0 var(--gl); display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 4px 10px; }
.svXp { grid-column: 1 / -1; position: relative; height: 14px; border-radius: 7px; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.15); overflow: hidden; }
.svXp > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #1d8fd6, #4ad2ff); box-shadow: 0 0 10px #4ad2ff; transition: width 0.15s; }
.svXp b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 12px; letter-spacing: 0.12em; text-shadow: 0 1px 2px #000; }
.svStats { display: flex; align-items: center; justify-content: center; gap: 18px; font-size: 18px; font-weight: 700; text-shadow: 0 1px 3px #000; }
.svStats b { font-size: 26px; padding: 0 12px; border-radius: 8px; background: rgba(0, 0, 0, 0.45); }
.svBtn { width: 42px; height: 38px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.5); font-weight: 700; }
.svBuild { position: absolute; left: var(--gl); top: calc(max(6px, env(safe-area-inset-top)) + 58px); display: flex; flex-direction: column; gap: 4px; }
.svBuild > div { display: flex; gap: 4px; }
.svSlot { position: relative; width: 38px; height: 38px; border-radius: 8px; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.18); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.svSlot.sm { width: 30px; height: 30px; font-size: 15px; }
.svSlot.empty { opacity: 0.35; }
.svSlot.evo { border-color: #ffc53d; box-shadow: 0 0 10px rgba(255, 197, 61, 0.6); }
.svSlot small { position: absolute; right: 2px; bottom: 0; font-size: 11px; font-weight: 700; text-shadow: 0 1px 2px #000; }
#sv:not(.showBuild) .svSlot.sm { }
.svBoss { position: absolute; left: 50%; top: calc(max(6px, env(safe-area-inset-top)) + 58px); transform: translateX(-50%); width: min(520px, 70vw); text-align: center; }
.svBoss b { display: block; font-size: 16px; letter-spacing: 0.14em; color: #ff8a6a; text-shadow: 0 1px 3px #000; }
.svBoss > i { display: block; height: 12px; border-radius: 6px; background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 90, 60, 0.6); overflow: hidden; }
.svBoss > i > i { display: block; height: 100%; background: linear-gradient(90deg, #b3201a, #ff5a3a); transition: width 0.2s; }
.svBoss.shield > i > i { background: linear-gradient(90deg, #1d6fa8, #4ad2ff); }
.svBanner { position: absolute; left: 0; right: 0; top: 30%; text-align: center; font-size: 30px; font-weight: 700; letter-spacing: 0.12em; padding: 10px; text-shadow: 0 2px 6px #000; animation: svBan 0.35s ease-out; }
.svBanner.boss, .svBanner.warn { background: repeating-linear-gradient(-45deg, rgba(160, 20, 10, 0.6) 0 18px, rgba(60, 5, 0, 0.6) 18px 36px); }
.svBanner.info { font-size: 20px; top: 22%; background: rgba(0, 0, 0, 0.45); letter-spacing: 0.04em; }
.svBanner.win { color: #ffd23a; background: rgba(0, 0, 0, 0.5); }
@keyframes svBan { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.svToast { position: absolute; right: var(--gr); top: calc(max(6px, env(safe-area-inset-top)) + 58px); display: flex; flex-direction: column; gap: 4px; align-items: flex-end; font-weight: 700; }
.svToast div { padding: 4px 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.55); }
.svNums { position: absolute; inset: 0; width: 100%; height: 100%; }
.svArrows i { position: absolute; left: 0; top: 0; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 18px solid #ff5a3a; margin: -10px 0 0 -9px; filter: drop-shadow(0 0 4px #000); }
.svArrows i.chest { border-left-color: #ffd23a; }
.svBottom { position: absolute; left: 50%; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 8px); transform: translateX(-50%); width: min(360px, 60vw); }
.svHp { position: relative; height: 16px; border-radius: 8px; background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 255, 255, 0.2); overflow: hidden; }
.svHp > i { display: block; height: 100%; background: linear-gradient(90deg, #2ea55a, #5fd38d); transition: width 0.12s; }
.svHp > i.low { background: linear-gradient(90deg, #b3201a, #ff5a3a); animation: bblink 0.5s infinite alternate; }
.svHp span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; text-shadow: 0 1px 2px #000; }
.svSpecial { position: absolute; right: calc(var(--gr) + 8px); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 8px); width: 96px; height: 96px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35); background: rgba(10, 14, 18, 0.7); overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; letter-spacing: 0.04em; }
.svSpecial.ready { border-color: var(--accent); box-shadow: 0 0 18px rgba(243, 167, 18, 0.55); }
.svSpecial small { font-size: 11px; color: var(--muted); }
.svSpecial > i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: rgba(0, 0, 0, 0.6); }
#sv.desk .svSpecial { width: 78px; height: 78px; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 40px); }
.svJoy { position: absolute; left: 0; top: 0; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.25); background: rgba(0, 0, 0, 0.18); display: none; }
.svJoy.on { display: block; }
.svJoy i { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); }
.svTeam { position: absolute; left: var(--gl); top: 42%; display: flex; flex-direction: column; gap: 6px; }
.svTeam div { display: grid; grid-template-columns: 90px 70px auto; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; text-shadow: 0 1px 2px #000; }
.svTeam i { display: block; height: 7px; border-radius: 4px; background: rgba(0, 0, 0, 0.6); overflow: hidden; } .svTeam i i { height: 100%; background: #5fd38d; }
.svTeam .down span { color: #ff8a6a; } .svTeam em { font-style: normal; color: #ffd23a; }
.svPing { position: absolute; right: calc(var(--gr) + 118px); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 16px); display: flex; gap: 6px; }
.svPing button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(0, 0, 0, 0.55); font-size: 18px; }
/* Pencereler */
.svOv { position: absolute; inset: 0; pointer-events: auto; display: flex; align-items: center; justify-content: center; background: rgba(4, 7, 10, 0.72); padding: 12px var(--gr) 12px var(--gl); overflow-y: auto; }
.svOv h2 { margin: 0; font-size: 30px; letter-spacing: 0.12em; text-align: center; }
.svOv h2 small { display: block; font-size: 13px; letter-spacing: 0.04em; color: var(--muted); }
.svOv h4 { margin: 8px 0 4px; font-size: 13px; letter-spacing: 0.12em; color: var(--muted); }
.svCards { display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(900px, 100%); }
.svCardRow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; }
.svCard { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 12px 14px; border-radius: 14px; border: 2px solid rgba(255, 255, 255, 0.18); background: linear-gradient(170deg, rgba(34, 42, 52, 0.96), rgba(16, 20, 26, 0.96)); text-align: center; transition: transform 0.12s, border-color 0.12s; animation: svCardIn 0.28s ease-out backwards; }
.svCard:nth-child(2) { animation-delay: 0.06s; } .svCard:nth-child(3) { animation-delay: 0.12s; }
@keyframes svCardIn { from { opacity: 0; transform: translateY(24px) scale(0.95); } }
.svCard:hover, .svCard:focus-visible { transform: translateY(-4px); border-color: var(--accent); }
.svCard.rare { border-color: #ffc53d; box-shadow: 0 0 24px rgba(255, 197, 61, 0.45), inset 0 0 18px rgba(255, 197, 61, 0.12); }
.svCard kbd { position: absolute; left: 8px; top: 6px; font: 700 12px var(--font); color: var(--muted); }
.svCard .ic { font-size: 42px; line-height: 1; }
.svCard b { font-size: 20px; letter-spacing: 0.04em; }
.svCard em { font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--accent); }
.svCard.rare em { color: #ffd23a; }
.svCard p { margin: 0; font-size: 14px; color: #c9d1d8; line-height: 1.3; }
.svCard .evo { font-size: 12px; color: #9fe8ff; line-height: 1.25; }
.st { display: inline-flex; gap: 3px; } .st i { width: 9px; height: 9px; transform: rotate(45deg); background: rgba(255, 255, 255, 0.18); } .st i.on { background: #ffc53d; }
.svCardActs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.svCardActs .ghost.on { border-color: #ff5a3a; color: #ff8a6a; }
.svCards.banish .svCard { border-color: rgba(255, 90, 60, 0.6); }
.svTip { margin: 0; padding: 6px 12px; border-radius: 8px; background: rgba(243, 167, 18, 0.15); border: 1px solid rgba(243, 167, 18, 0.4); font-weight: 600; text-align: center; animation: svTipB 1s infinite alternate; }
@keyframes svTipB { to { background: rgba(243, 167, 18, 0.28); } }
.svChest { display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(480px, 100%); }
.svChest .lid { font-size: 72px; animation: svShake 0.5s ease-in-out 2; }
@keyframes svShake { 25% { transform: rotate(-12deg) scale(1.1); } 75% { transform: rotate(12deg) scale(1.1); } }
.svChest.evo h2 { color: #ffd23a; text-shadow: 0 0 18px rgba(255, 210, 58, 0.8); }
.svChestIn { display: flex; flex-direction: column; gap: 8px; width: 100%; animation: svCardIn 0.4s 0.5s backwards; }
.svEvo { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px; border-radius: 12px; border: 2px solid #ffc53d; background: rgba(40, 30, 8, 0.8); }
.svEvo span { font-size: 48px; } .svEvo b { font-size: 24px; color: #ffd23a; } .svEvo p { margin: 0; color: #d7dde2; }
.svUp { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); font-size: 22px; } .svUp b { font-size: 17px; } .svUp small { margin-left: auto; color: var(--accent); font-size: 13px; }
.svPauseBox, .svDeath, .svResult { display: flex; flex-direction: column; gap: 10px; width: min(820px, 100%); padding: 18px 20px; border-radius: 16px; background: rgba(14, 18, 23, 0.96); border: 1px solid var(--line); max-height: 100%; overflow-y: auto; }
.svDeath { width: min(460px, 100%); align-items: stretch; text-align: center; }
.svDeath h2 { color: #ff6b5a; }
.svRev { display: flex; flex-direction: column; gap: 8px; }
.svRev .gem, .svDouble .gem { border-color: #6fb3ff; }
.svPauseGrid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 16px; }
.svRow { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 15px; } .svRow .st { margin-left: auto; }
.svEvoT { width: 100%; border-collapse: collapse; font-size: 13px; } .svEvoT td { padding: 3px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); color: #8e99a3; }
.svEvoT tr.half td { color: #c9d1d8; } .svEvoT tr.ready td { color: #ffd23a; } .svEvoT tr.done td { color: #5fd38d; }
.svSet { display: flex; gap: 16px; flex-wrap: wrap; font-size: 14px; } .svSet input { accent-color: var(--accent); }
.svResult.win h2 { color: #ffd23a; }
.svResStats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .svResStats div { padding: 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); text-align: center; } .svResStats span { display: block; font-size: 12px; color: var(--muted); } .svResStats b { font-size: 22px; }
.svBars { display: flex; flex-direction: column; gap: 5px; }
.svBar { display: grid; grid-template-columns: 150px 1fr 70px; align-items: center; gap: 8px; font-size: 14px; } .svBar i { display: block; height: 12px; border-radius: 6px; background: rgba(255, 255, 255, 0.07); overflow: hidden; } .svBar i i { height: 100%; background: linear-gradient(90deg, #c77d05, var(--accent)); } .svBar b { text-align: right; font-variant-numeric: tabular-nums; }
.svRew { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 16px; } .svRew .cx { color: #9fe8ff; }
.svDouble { display: flex; gap: 8px; justify-content: center; }
#sv.showBuild .svBuild { transform: scale(1.35); transform-origin: top left; }
@media (max-width: 760px), (max-height: 470px) {
  .svCardRow { gap: 8px; } .svCard { padding: 10px 6px 10px; gap: 3px; } .svCard .ic { font-size: 30px; } .svCard b { font-size: 16px; } .svCard p { font-size: 12px; } .svCard .evo { font-size: 11px; }
  .svOv h2 { font-size: 22px; } .svStats { font-size: 15px; gap: 12px; } .svStats b { font-size: 20px; }
  .svPauseGrid { grid-template-columns: 1fr; } .svBar { grid-template-columns: 110px 1fr 56px; font-size: 12px; }
  .svSlot { width: 30px; height: 30px; font-size: 16px; } .svSlot.sm { width: 24px; height: 24px; font-size: 12px; }
  .svBanner { font-size: 20px; } .svSpecial { width: 80px; height: 80px; }
  .svResStats b { font-size: 18px; }
}
#sv [hidden] { display: none !important; }

/* Survivor menüsü */
.battle.svb { background: linear-gradient(135deg, #3ad2b0, #1a8f8f); color: #041816; }
.mbox.svm { width: min(980px, 97vw); max-height: 96vh; padding: 12px 14px; gap: 8px; overflow: hidden; display: flex; flex-direction: column; }
.svm header { display: flex; align-items: center; gap: 10px; }
.svmLogo { font-size: 22px; letter-spacing: 0.18em; color: #3ad2b0; }
.svmTabs { display: flex; gap: 3px; flex: 1; overflow-x: auto; }
.svmTabs button { flex: 1 0 auto; height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid transparent; background: none; color: var(--muted); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; }
.svmTabs button.on { color: #3ad2b0; border-color: rgba(58, 210, 176, 0.5); background: rgba(58, 210, 176, 0.08); }
.svmBody { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 2px; }
.svmBody h4 { margin: 6px 0 2px; font-size: 13px; letter-spacing: 0.12em; }
.svmTut { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(243, 167, 18, 0.45); background: rgba(243, 167, 18, 0.08); }
.svmTut p { margin: 2px 0 0; }
.svmTut { flex-wrap: wrap; } .svmTut > div { flex: 1 1 180px; min-width: 0; } .svmTut .svmGo { flex: none; margin-inline-start: auto; } /* uzun çeviride düğme alt satıra iner */
.svmMaps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.svmMap { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 132px; padding: 10px; border-radius: 12px; border: 2px solid transparent; background: linear-gradient(160deg, var(--a), var(--b)); text-align: left; color: #fff; text-shadow: 0 1px 3px #000; overflow: hidden; }
.svmMap .art { position: absolute; right: 6px; bottom: 2px; font-size: 44px; opacity: 0.55; }
.svmMap b { font-size: 17px; } .svmMap small { font-size: 12px; line-height: 1.25; opacity: 0.95; } .svmMap .stars { color: #ffd23a; letter-spacing: 2px; }
.svmMap.on { border-color: #3ad2b0; box-shadow: 0 0 16px rgba(58, 210, 176, 0.45); } .svmMap.lock { filter: grayscale(0.85) brightness(0.6); }
.svmRow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.svmDiff { display: flex; gap: 6px; }
.svmDiff button, .svmPills button { height: 36px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.svmDiff button small { font-size: 12px; color: var(--accent); }
.svmDiff button.on, .svmPills button.on { border-color: #3ad2b0; color: #3ad2b0; background: rgba(58, 210, 176, 0.1); }
.svmDiff button:disabled { opacity: 0.45; }
.svmBoss { font-size: 13px; color: var(--muted); } .svmBoss b { color: #ff8a6a; }
.svmPills { display: flex; gap: 6px; flex-wrap: wrap; }
.svmVeh { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.svmVeh button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 9px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); text-align: left; }
.svmVeh button small { font-size: 12px; color: var(--muted); } .svmVeh button em { font-style: normal; font-size: 12px; }
.svmVeh button.on { border-color: #3ad2b0; background: rgba(58, 210, 176, 0.1); } .svmVeh button.dis { opacity: 0.35; }
.svmStart { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.svmDaily { display: grid; grid-template-columns: 200px 1fr; gap: 12px; align-items: center; } .svmDaily p { margin: 3px 0; }
.svmClanBar { position: relative; height: 26px; border-radius: 13px; background: rgba(255, 255, 255, 0.07); overflow: visible; }
.svmClanBar > i { display: block; height: 100%; border-radius: 13px; background: linear-gradient(90deg, #a07c1c, #e8c15a); }
.svmClanBar > b { position: absolute; top: -4px; width: 22px; height: 34px; margin-left: -11px; border-radius: 6px; background: #2a2f36; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 12px; } .svmClanBar > b.ok { background: #e8c15a; color: #1a1204; }
.svmClanBar > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.svmTiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .svmTiers div { padding: 6px 8px; border-radius: 9px; border: 1px solid var(--line); font-size: 12px; display: flex; flex-direction: column; } .svmTiers div.ok { border-color: #e8c15a; } .svmTiers div.got { opacity: 0.5; } .svmTiers em { font-style: normal; font-weight: 700; color: var(--accent); }
.svmWs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.svmWsItem { display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); } .svmWsItem small { color: var(--muted); font-size: 12px; } .svmWsItem em { font-style: normal; color: #5fd38d; font-weight: 700; font-size: 12px; }
.svmCodex { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.svmCodex > div { display: flex; flex-direction: column; gap: 3px; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line); } .svmCodex > div.ok { border-color: rgba(95, 211, 141, 0.5); }
.svmCodex small { color: var(--muted); font-size: 12px; } .svmCodex > div > i { display: block; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; } .svmCodex > div > i > i { display: block; height: 100%; background: #3ad2b0; } .svmCodex span { font-size: 11px; color: var(--muted); } .svmCodex em { font-style: normal; font-size: 12px; }
.svmBoards { grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) { .svmMaps { grid-template-columns: repeat(3, minmax(0, 1fr)); } .svmMap { min-height: 104px; } .svmDaily { grid-template-columns: 1fr; } .svmTiers { grid-template-columns: repeat(2, 1fr); } .svmBoards { grid-template-columns: 1fr; } .playBtns #svBtn { font-size: 16px; } }
.svmBoards { display: grid; gap: 12px; }

/* ---------- Survivor co-op ---------- */
.svArrows i.mate { border-left-color: #4ad2ff; }
.svArrows i.help { border-left-color: #ff4a3a; animation: svBlink 0.6s steps(2) infinite; }
.svArrows i.ping { border-left-color: #b67cff; }
@keyframes svBlink { 50% { opacity: 0.35; } }
.svDown { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); width: min(420px, calc(100vw - 32px)); padding: 12px 14px; border-radius: 14px; background: rgba(40, 8, 6, 0.78); border: 1px solid rgba(255, 90, 60, 0.5); text-align: center; pointer-events: auto; z-index: 3; }
.svDown > b { font-size: 20px; letter-spacing: 0.12em; color: #ff8a6a; }
.svDown p { margin: 6px 0 8px; font-size: 13px; color: #f2dcd6; }
.svDownBar { height: 8px; border-radius: 4px; background: rgba(0, 0, 0, 0.55); overflow: hidden; margin-bottom: 8px; }
.svDownBar i { display: block; height: 100%; width: 0; background: #5dff8a; transition: width 0.15s linear; }
.svDown .svRev { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.svco .svmBody { overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.svco header .muted { flex: 1; }
.svcChoose { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.svcCard { padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); display: flex; flex-direction: column; gap: 8px; }
.svcCard > b { letter-spacing: 0.12em; color: var(--accent); }
.svcJoin { display: flex; gap: 8px; }
.svcJoin input { flex: 1; min-width: 0; font: 700 22px/1 var(--font); letter-spacing: 0.3em; text-align: center; text-transform: uppercase; padding: 8px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.4); color: var(--text); }
.svcTop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px; }
.svcCode, .svcMap { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); display: flex; flex-direction: column; gap: 6px; }
.svcCode small, .svcMap small { color: var(--muted); letter-spacing: 0.14em; font-size: 12px; }
.svcCode b { font-size: 34px; letter-spacing: 0.3em; color: var(--accent); }
.svcCode.pub b { font-size: 18px; letter-spacing: 0.04em; color: var(--text); }
.svcCode { flex-direction: row; flex-wrap: wrap; align-items: center; } .svcCode small { flex-basis: 100%; }
.svcSel { display: flex; flex-wrap: wrap; gap: 6px; }
.svcSel button { padding: 5px 10px; border-radius: 8px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.3); color: var(--text); font: 600 13px var(--font); }
.svcSel button.on { border-color: var(--accent); color: var(--accent); }
.svcSlots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.svcSlot { padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); display: flex; flex-direction: column; gap: 3px; min-height: 78px; overflow: hidden; }
.svcSlot b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svcSlot small { color: var(--muted); }
.svcSlot em { font-style: normal; font-size: 12px; letter-spacing: 0.1em; color: var(--muted); margin-top: auto; }
.svcSlot.ready { border-color: rgba(93, 255, 138, 0.45); } .svcSlot.ready em { color: #5dff8a; }
.svcSlot.me { box-shadow: inset 0 0 0 1px var(--accent); }
.svcSlot.empty { align-items: center; justify-content: center; border-style: dashed; }
@media (max-width: 640px) { .svcTop { grid-template-columns: 1fr; } .svcSlots { grid-template-columns: repeat(2, minmax(0, 1fr)); } .svcCode b { font-size: 26px; } }

/* ================= İLK DENEYİM · DİKEY EKRAN · ERİŞİLEBİLİRLİK ================= */
/* Klavye odağı görünür; dokunuşta çift dokunma yakınlaştırması olmaz (sıkıştırarak yakınlaştırma açık) */
button:focus-visible, a:focus-visible, summary:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button, a, summary, select, input, label { touch-action: manipulation; }

/* Üst bar: dar ekranda ikincil düğmeler ☰ menüsüne geçer (sıralama, ses, ayarlar, tam ekran; daha darda ağaç) */
.top .wallet { min-width: 0; }
.pchip { position: relative; }
#profDot { position: absolute; top: -3px; right: -3px; width: 12px; height: 12px; border-radius: 50%; background: #e5484d; border: 2px solid #0b0e12; font-style: normal; }
#profDot[hidden] { display: none; }
@media (max-width: 899px) { #ratingBtn, #muteBtn, #setBtn, #fsBtn { display: none; } }
@media (max-width: 619px) { #treeBtn { display: none; } }
/* Dokunmatik: üst bar düğmeleri ≥44 px dokunma alanı (görünür kutu 40 px + görünmez pay) */
@media (pointer: coarse) {
  .topbtn, .pchip, button.coin { position: relative; height: 40px; }
  .topbtn.ic { width: 42px; height: 40px; font-size: 18px; }
  button.coin { padding: 0 12px 0 9px; }
  .topbtn::before, .pchip::before, button.coin::before { content: ''; position: absolute; inset: -3px -3px; }
  .wallet, .wl-res, .wl-act { gap: 6px; }
  .soc-x { width: 44px; height: 44px; }
  .cdBtn { width: 34px; height: 34px; }
  .shTabs button, .lbTabs button, .soc-tabs button { min-height: 44px; }
  .ghost.sm, .frow .ghost.sm, .shBody .ghost.sm { min-height: 38px; }
}
@media (pointer: coarse) and (max-height: 470px) {
  :root { --top-h: calc(50px + var(--sat)); }
  .topbtn, .pchip, button.coin { height: 38px; }
  .topbtn.ic { width: 40px; height: 38px; }
  .topbtn::before, .pchip::before, button.coin::before { inset: -4px -3px; }
}
/* Dikey: üst bar iki satır (profil + para birimleri / düğmeler); AĞAÇ ikinci satırda yine görünür */
@media (max-aspect-ratio: 1/1) {
  :root { --top-h: calc(100px + var(--sat)); }
  .top { flex-direction: column; align-items: stretch; justify-content: center; }
  .top .wallet { flex-direction: column; align-items: stretch; gap: 6px; }
  .wl-res, .wl-act { justify-content: flex-end; }
  .wl-res .pchip { margin-right: auto; }
  .pchip b#pNick { max-width: 92px; }
  #treeBtn { display: inline-block; }
  .toast { bottom: calc(var(--car-h) + 140px); }
}
@media (max-aspect-ratio: 1/1) and (max-width: 359px) { .pchip .lv > i { display: none; } }

/* ☰ menüsü */
.moreMenu { min-width: 230px; }
.moreMenu button { display: flex; align-items: center; gap: 10px; height: 44px; font-weight: 700; letter-spacing: 0.04em; }
.moreMenu button i { font-style: normal; width: 22px; text-align: center; }
.moreMenu button:nth-last-child(-n+2) { color: inherit; }
.dotIn { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #e5484d; margin-left: auto; }

/* Bağlamsal ipucu balonu (pencere değil) */
.coach { position: fixed; z-index: 30; max-width: min(330px, calc(100vw - 16px)); display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border-radius: 12px;
  background: #ffd25a; color: #1a1204; font-weight: 700; font-size: 15px; line-height: 1.25; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); pointer-events: auto; animation: coachIn 0.35s ease; }
.coach b { font-weight: 800; }
.coach button { position: relative; flex: none; width: 34px; height: 34px; border: 0; border-radius: 8px; background: rgba(0, 0, 0, 0.12); color: #1a1204; font-weight: 700; }
.coach button::before { content: ''; position: absolute; inset: -5px; }
.coach::after { content: ''; position: absolute; left: var(--ax, 50%); width: 14px; height: 14px; background: inherit; transform: translateX(-50%) rotate(45deg); }
.coach.above::after { bottom: -6px; } .coach.below::after { top: -6px; }
@keyframes coachIn { from { opacity: 0; transform: translateY(6px); } }
.pulse { animation: pulseB 1.3s ease-in-out infinite; }
@keyframes pulseB { 50% { filter: brightness(1.22) saturate(1.1); transform: scale(1.035); } }
@media (prefers-reduced-motion: reduce) { .pulse, .coach, #rotate .phone, .mmRot i { animation: none; } }

/* Hesap yedekleme notu (kapatılabilir) ve profil satırı */
.codeNote { position: fixed; top: calc(var(--top-h) + 6px); right: var(--gr); z-index: 30; width: min(340px, calc(100vw - 24px)); }
.codeNote p { font-size: 14px; }
.codeNote button { height: 40px; font-size: 14px; }
.codeNote .battle { font-size: 15px; padding: 0 12px; }
@media (max-aspect-ratio: 1/1) { .codeNote { left: var(--gl); right: var(--gr); width: auto; top: auto; bottom: calc(var(--car-h) + 82px); } }
.bkRow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(243, 167, 18, 0.08); border: 1px solid rgba(243, 167, 18, 0.4); }
.bkRow p { flex: 1; } .bkRow small { color: var(--muted); text-align: left; font-size: 13px; }
.mbox .bkRow .battle { height: 44px; font-size: 15px; padding: 0 14px; flex: none; }

/* Profil oluşturma: tek dokunuşla geçilebilir form */
.nickRow { display: flex; gap: 6px; }
.nickRow input { flex: 1; min-width: 0; }
.ghost.ic { width: 44px; height: 44px; padding: 0; font-size: 20px; flex: none; }
.crRef summary { cursor: pointer; font-weight: 700; color: var(--accent); padding: 8px 0; font-size: 14px; }
.crRef[open] { display: flex; flex-direction: column; gap: 6px; }
.crBox .small { font-size: 13px; }
/* Profil açılışı: şartları kabul satırı (zorunlu) */
.crTerms { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.35; color: var(--muted, #9aa3ad); cursor: pointer; padding: 4px 0; }
.crTerms input { width: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--accent); }
.crTerms a { color: var(--accent); }
/* Mağaza (uygulama içi satın alma) */
.iapList { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 6px 0 10px; }
.iapItem { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: inherit; font: inherit; cursor: pointer; min-height: 44px; }
.iapItem b { font-size: 17px; }
.iapItem .pr { font-weight: 700; color: var(--accent); }
.iapItem em { position: absolute; top: -8px; right: 8px; font-style: normal; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 6px; background: #d4a72c; color: #111; }
.iapItem.wide { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; text-align: start; }
.iapItem.wide span { display: flex; flex-direction: column; gap: 2px; }
.iapItem.star { border-color: rgba(212,167,44,.7); background: rgba(212,167,44,.1); }
.iapItem[disabled] { opacity: .55; cursor: default; }
.sVer { text-align: center; font-size: 12px; opacity: .6; margin: 4px 0 0; }
#sApp { display: flex; flex-direction: column; gap: 8px; }
#sApp:empty { display: none; }


/* Kuyruk: dikey telefonda "yan çevir" ipucu */
.mmRot { display: none; align-items: center; justify-content: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(243, 167, 18, 0.1); border: 1px solid rgba(243, 167, 18, 0.4); color: #ffd98a; font-weight: 700; font-size: 14px; text-align: center; }
.mmRot i { flex: none; width: 15px; height: 25px; border: 2px solid var(--accent); border-radius: 4px; animation: rot 1.8s ease-in-out infinite; }
@media (pointer: coarse) and (orientation: portrait) { .mmRot { display: flex; } }

/* Pazar: seviye kilidi, elmas kazanma yolları, elit yol açıklaması */
.lockBox { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); }
.lockBox > b { font-size: 18px; letter-spacing: 0.08em; }
.lockBox .row2 { flex-wrap: wrap; }
.earnList { display: flex; flex-direction: column; gap: 6px; }
.earn { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); }
.earn > i { font-style: normal; font-size: 20px; width: 26px; text-align: center; flex: none; }
.earn > span { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.earn small { color: var(--muted); font-size: 13px; text-align: left; }
.earn .ghost.sm { flex: none; align-self: center; }
.pOffer.short { opacity: 0.7; border-style: dashed; }
.pOffer small { color: #ffb36b; font-size: 12px; font-weight: 700; }
.eliteNote { margin: 0; padding: 7px 10px; border-radius: 10px; font-size: 13px; line-height: 1.35; color: #d5dbe0; background: rgba(139, 92, 246, 0.1); border: 1px solid rgba(212, 160, 23, 0.3); }
.linkBtn { background: none; border: 0; padding: 0; color: #ffd66b; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.scard.lock { opacity: 0.75; }
.scard.lock em { color: #b9a3ff; }

/* Açılış ekranı: dikeyde altta (tank üstte görünür), kısa yatayda sıkışık */
@media (max-aspect-ratio: 1/1) {
  .menuOv.start { background: linear-gradient(0deg, rgba(5, 7, 10, 0.97) 0%, rgba(5, 7, 10, 0.82) 50%, rgba(5, 7, 10, 0.2) 100%); padding: max(16px, var(--sat)) var(--gr) max(16px, var(--sab)) var(--gl); }
  .menuOv.start > .st-inner { margin: auto auto 0; width: 100%; max-width: 460px; }
  .st-logo { font-size: clamp(38px, 12vw, 64px); }
  .st-go { width: 100%; }
}
@media (max-height: 470px) {
  .st-inner { gap: 4px; }
  .st-logo { font-size: clamp(34px, 7vw, 56px); }
  .st-sub { margin-bottom: 4px; }
  .st-feat li.xtra { display: none; }
  .st-link { padding: 6px 0; }
}
/* Yatay ekranda aksiyon düğmeleri bilgi panelinin üstüne binmesin: panel genişliği tek değişkende, sığmayınca
   oyna düğmeleri altta tam satır, MODÜLLER / ATEŞ / 360° üst satırda (telefon, tablet, 900-1180 px masaüstü) */
:root { --info-w: clamp(236px, 30vw, 340px); }
@media (max-height: 470px) { :root { --info-w: clamp(250px, 34vw, 320px); } }
@media (max-width: 620px) and (min-aspect-ratio: 1/1) { :root { --info-w: 220px; } }
@media (min-aspect-ratio: 1/1) { .info { width: var(--info-w); } }
@media (max-width: 1180px) and (min-aspect-ratio: 1/1) {
  .actions { left: calc(var(--gl) + var(--info-w) + 10px); flex-wrap: wrap-reverse; justify-content: flex-end; gap: 8px; }
  .playBtns, .buyBox { order: -1; flex: 1 1 100%; justify-content: flex-end; }
}
@media (max-width: 900px) and (min-aspect-ratio: 1/1) {
  #rotBtn { display: none; }
  .playBtns .battle { padding: 0 14px; font-size: 17px; letter-spacing: 0.08em; }
  .actions #modBtn { height: 38px; }
}
.shBody > *, .mbox.daily > * { flex-shrink: 0; } /* kısa ekranda sezon şeridi ezilip kartlar kesilmesin: gövde kayar */
@media (max-height: 470px) { .eliteNote { font-size: 12px; padding: 5px 8px; } }
.playBtns .battle { white-space: nowrap; }
@media (max-width: 620px) and (min-aspect-ratio: 1/1) { .playBtns .battle { padding: 0 10px; font-size: 15px; letter-spacing: 0.06em; } }
@media (max-width: 520px) {
  .shTabs { overflow-x: auto; scrollbar-width: none; }
  .shTabs::-webkit-scrollbar { display: none; }
  .shTabs button { flex: 0 0 auto; padding: 0 10px; white-space: nowrap; }
}
/* Logo, üst bar düğmelerine yer bıraksın (920-1000 px masaüstü ve dokunmatik tablette taşıyordu) */
@media (max-width: 999px), (pointer: coarse) and (max-width: 1199px) { .top .brand { display: none; } .top { justify-content: flex-end; } }
/* iPhone: 16 px altı yazı alanına dokununca sayfa kendiliğinden yakınlaşmasın (yakınlaştırma artık açık) */
@media (pointer: coarse) { input, select, textarea, .soc-body input, .cdIn input, .cdSearch, .gxRow input, .invUse input { font-size: max(16px, 1em); } }

/* ================= DİL SEÇİMİ (i18n) ================= */
/* Açılış ekranında sağ üstte bayrak + kod; dokununca dil listesi (nickMenu görünümünde) */
.stLang { position: absolute; top: max(12px, var(--sat)); right: var(--gr); margin: 0; z-index: 2; height: 40px; min-width: 64px; padding: 0 12px; border-radius: 20px; border: 1px solid var(--line); background: rgba(14, 18, 23, 0.85); color: var(--text); font-weight: 700; font-size: 15px; letter-spacing: 0.06em; }
.nickMenu.langMenu { min-width: 170px; }
.nickMenu.langMenu button { display: flex; align-items: center; gap: 10px; height: 42px; color: inherit; }
.nickMenu.langMenu button i { font-style: normal; }
.nickMenu.langMenu button.on { color: var(--accent); }
/* Ayarlar: dil satırı */
.sLang { grid-column: 2 / -1; height: 36px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06); color: var(--text); font: 600 15px var(--font); padding: 0 8px; }
.sLang option { color: #111; }

/* ================= MOBİL: dokunma hedefleri, tam ekran, değişken görünür yükseklik ================= */
/* Dokunma hedefleri en az 44 px (kısa ekranda .bBtns 0,85 ölçekli: 52 → 44) */
.bIcon { width: 44px; height: 44px; }
#bQc { right: calc(var(--gr) + 52px); }
#bFs { position: absolute; top: 10px; right: calc(var(--gr) + 104px); font-size: 20px; }
#bFs[hidden], .fsGame[hidden] { display: none !important; }
/* Dar ekranda üst sağ (skor çubuğu yanı) dolu: mini haritanın altına */
@media (max-width: 800px) { #bFs { right: auto; left: var(--gl); top: 140px; } #battle.lefty #bFs { left: var(--gl); } }
#battle.zoomed #bFs { z-index: 2; }
.rb.chip { height: 52px; border-radius: 26px; }
/* Adres çubuğu açılıp kapanınca joystick görünür alanda kalsın: dvh (desteklemeyen tarayıcı vh satırında kalır) */
#bJoy { transform: translate(calc(var(--gl) + 90px), calc(100vh - 110px)); transform: translate(calc(var(--gl) + 90px), calc(100dvh - 110px - var(--sab))); }
#battle.lefty #bJoy:not(.on) { transform: translate(calc(100vw - var(--gr) - 90px), calc(100vh - 110px)); transform: translate(calc(100vw - var(--gr) - 90px), calc(100dvh - 110px - var(--sab))); }
#battle .bBtns, #battle .bAlt { margin-bottom: var(--sab); }
/* Klavye yardımı telefonda gösterilmez (kontrollerin üstüne taşıyordu) */
@media (pointer: coarse) { #bHint small { display: none; } #bHint { bottom: calc(104px + var(--sab)); } }
/* Survivor tam ekran düğmesi (duraklat düğmesinin solunda) */
.fsGame { position: fixed; z-index: 50; top: calc(max(6px, env(safe-area-inset-top)) + 20px); right: calc(var(--gr) + 48px); width: 44px; height: 44px; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(10, 13, 18, 0.74); color: #e9edf0; font-size: 20px; display: grid; place-items: center; padding: 0; touch-action: manipulation; }
/* iPhone: bir kerelik "Ana Ekrana Ekle" ipucu */
#iosHint { position: fixed; z-index: 70; left: 50%; bottom: calc(12px + var(--sab)); transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px);
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 12px; background: rgba(14, 18, 23, 0.95); border: 1px solid var(--accent);
  font-weight: 600; font-size: 14px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5); }
#iosHint b { color: var(--accent); }
#iosHint button { flex: none; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.06); }

/* ---------------- Çoklu dil (2026-10): logo, dil seçici, site bağlantıları, RTL ---------------- */
.logo .io, .lg .io, .st-logo .io { font-style: normal; color: var(--accent); }
.st-logo { letter-spacing: 0.04em; }
#loading .lg { letter-spacing: 0.06em; }
.brand .logo { letter-spacing: 0.06em; }
.nickMenu.langMenu { max-height: calc(100dvh - 80px - var(--sat)); overflow-y: auto; overscroll-behavior: contain; }
.slinks { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; }
/* Uzun çeviriler (de, hu, ru…) düğme/etiket taşırmasın: sözcük kırılır, metin kısaltılmaz */
button, .srow > span, h2, h3, h4 { overflow-wrap: break-word; }
/* Japonca/Korece kısa düğme metni (自動, 低…) harf harf bölünmesin */
.seg button, .topbtn, .st-go { word-break: keep-all; }
/* Sağdan sola (ar): DOM menüleri tarayıcı tarafından aynalanır; sayılar, kodlar ve oyuncu adları soldan sağa kalır */
[dir="rtl"] input[type="range"] { direction: ltr; }
[dir="rtl"] .tkInput, [dir="rtl"] .invCode, [dir="rtl"] #pNick { direction: ltr; unicode-bidi: isolate; }