/* War Gunner — 2.5D arayüz: kalınlığı olan paneller, basılan butonlar, eğilen kartlar */
:root {
  --bg: #0b0e13;
  --text: #edf1f6;
  --muted: #9aa6b6;
  --gold: #ffd34a;
  --red: #ff5a5a;
  --blue: #63b8ff;
  --accent: #ffb43a;
  /* metal plaka */
  --plate-top: #2d3541;
  --plate-bot: #1b2129;
  --plate-edge: #0c0f14;
  --plate-line: rgba(255, 255, 255, 0.09);
  --depth: 8px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text);
  font-family: 'Inter', system-ui, sans-serif; -webkit-user-select: none; user-select: none; }
#scene { position: fixed; inset: 0; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
.hidden { display: none !important; }
.gold { color: var(--gold); }
.red { color: var(--red); }

/* ---------- Ortak yapı taşları ---------- */

/* Kalın metal plaka: üst yüz + alt kenar kalınlığı + perçinler */
.plate {
  position: relative;
  background:
    radial-gradient(circle at 12px 12px, #6b7686 0 2.5px, #222830 3px, transparent 3.6px),
    radial-gradient(circle at calc(100% - 12px) 12px, #6b7686 0 2.5px, #222830 3px, transparent 3.6px),
    radial-gradient(circle at 12px calc(100% - 12px), #6b7686 0 2.5px, #222830 3px, transparent 3.6px),
    radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), #6b7686 0 2.5px, #222830 3px, transparent 3.6px),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.012) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, var(--plate-top), var(--plate-bot));
  border: 1px solid #3c4655;
  border-top-color: #56627a;
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -2px 0 rgba(0, 0, 0, 0.35),
    0 var(--depth) 0 var(--plate-edge),
    0 calc(var(--depth) + 2px) 0 #06080b,
    0 24px 50px rgba(0, 0, 0, 0.55);
}
/* İkaz şeritli başlık bandı */
.stripe {
  height: 8px; border-radius: 4px;
  background: repeating-linear-gradient(-45deg, #e8a920 0 10px, #1b1f26 10px 20px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 2px 0 rgba(0, 0, 0, 0.5);
}

/* 3B buton: yüz rengi + yan kalınlık. Üzerine gelince kalkar, basınca çöker */
.btn3d {
  --face: #3b4556; --side: #1a2029; --ink: #fff; --h: 6px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: 11px; padding: 11px 18px; color: var(--ink);
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 17px; letter-spacing: 0.4px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--face) 78%, white), var(--face) 55%, color-mix(in srgb, var(--face) 88%, black));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -3px 0 rgba(0, 0, 0, 0.18),
    0 var(--h) 0 var(--side),
    0 calc(var(--h) + 1px) 0 rgba(0, 0, 0, 0.6),
    0 calc(var(--h) + 8px) 14px rgba(0, 0, 0, 0.45);
  transform: translateY(0);
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.15s;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}
.btn3d:hover:not(:disabled) {
  transform: translateY(-2px); filter: brightness(1.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -3px 0 rgba(0, 0, 0, 0.18),
    0 calc(var(--h) + 2px) 0 var(--side), 0 calc(var(--h) + 3px) 0 rgba(0, 0, 0, 0.6), 0 calc(var(--h) + 14px) 18px rgba(0, 0, 0, 0.45);
}
.btn3d:active:not(:disabled), .btn3d.pressed {
  transform: translateY(calc(var(--h) - 1px));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 2px 6px rgba(0, 0, 0, 0.3),
    0 1px 0 var(--side), 0 2px 0 rgba(0, 0, 0, 0.6), 0 4px 6px rgba(0, 0, 0, 0.35);
}
.btn3d:disabled { --face: #2b313a; --side: #14181d; --ink: #6f7a88; cursor: default; filter: saturate(0.4); }
.btn3d.primary { --face: #f2a531; --side: #8a4d0c; --ink: #2a1600; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); }
.btn3d.danger { --face: #e2463a; --side: #7a1610; }
.btn3d.ok { --face: #3fae55; --side: #1a5a26; }
.btn3d.blue { --face: #3a78c8; --side: #183a6a; }
.btn3d.sell { --face: #6a3a34; --side: #2e1714; --ink: #ffcab8; }
.btn3d.big { font-size: 22px; padding: 14px 28px; --h: 8px; border-radius: 14px; }
.btn3d.small { font-size: 14px; padding: 7px 11px; --h: 4px; border-radius: 8px; }

/* Tuş başlığı (klavye kısayolu) */
.keycap, kbd {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px;
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 12px; color: #dfe6f0;
  background: linear-gradient(180deg, #4a5466, #2c333f);
  border-radius: 5px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 3px 0 #151a21, 0 4px 4px rgba(0, 0, 0, 0.5);
}

/* Parlak taş rozet (istatistik simgesi) */
.gem {
  --c: #888; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto;
  font-size: 18px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--c) 40%, white), var(--c) 55%, color-mix(in srgb, var(--c) 55%, black));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -2px 3px rgba(0, 0, 0, 0.35), 0 3px 0 color-mix(in srgb, var(--c) 40%, black), 0 5px 8px rgba(0, 0, 0, 0.5);
  transform: rotate(-6deg);
}

/* ---------- Ekranlar ---------- */
.screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: radial-gradient(ellipse at center, rgba(8, 10, 16, 0.2), rgba(4, 5, 9, 0.82)); z-index: 20;
  perspective: 1400px; animation: fadein 0.3s ease; }
@keyframes fadein { from { opacity: 0; } }
.screen > .plate, .screen > .stage { animation: rise 0.45s cubic-bezier(.2, .9, .3, 1.2); transform-origin: 50% 100%; }
@keyframes rise { from { transform: translateY(40px) rotateX(18deg) scale(0.96); opacity: 0; } }
.screen .plate { padding: 26px 30px 30px; max-width: 640px; width: 100%; max-height: calc(100vh - 40px); overflow: auto; }
.plate h2 { font-family: 'Rajdhani', sans-serif; font-size: 30px; margin: 0; letter-spacing: 0.5px; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5); }
.phead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0 16px; }
.btns { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.btns.col { flex-direction: column; }
.btns.col .btn3d { width: 100%; }
.story { color: #ccd4df; line-height: 1.65; font-size: 15px; }
.story b { color: var(--accent); }

/* Ana menü: kabartma logo (WAR mor, GUNNER altın) + eğik plaka */
.stage { display: flex; flex-direction: column; align-items: center; gap: 26px; width: 100%; max-width: 620px; }
.logo3d { text-align: center; transform: perspective(800px) rotateX(18deg); animation: hover 5s ease-in-out infinite; }
@keyframes hover { 50% { transform: perspective(800px) rotateX(18deg) translateY(-6px); } }
.logo3d .l1 {
  display: block; font-family: 'Russo One', 'Rajdhani', sans-serif; font-size: 72px; line-height: 0.95; letter-spacing: 6px; white-space: nowrap; color: #e8d8ff;
  text-shadow:
    0 1px 0 #b08aff, 0 2px 0 #a07af2, 0 3px 0 #906ae4, 0 4px 0 #805ad6, 0 5px 0 #704ac8, 0 6px 0 #603cba,
    0 7px 0 #522eac, 0 8px 0 #44229c, 0 9px 0 #36188a, 0 10px 0 #2a1070,
    0 14px 10px rgba(0, 0, 0, 0.6), 0 0 40px rgba(160, 100, 255, 0.55);
}
.logo3d .l2 {
  display: inline-block; margin-top: 10px; font-family: 'Russo One', 'Rajdhani', sans-serif; font-size: 30px; letter-spacing: 9px; color: #ffd890;
  text-shadow: 0 1px 0 #e8a040, 0 2px 0 #d08a30, 0 3px 0 #b87020, 0 4px 0 #9a5814, 0 6px 6px rgba(0, 0, 0, 0.6);
  padding: 4px 18px; border-radius: 8px; background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 1px rgba(255, 200, 120, 0.25);
}
.logo3d .l1 b { font-weight: inherit; color: #ffd890;
  text-shadow: 0 1px 0 #e8a040, 0 2px 0 #d8902e, 0 3px 0 #c47e22, 0 4px 0 #b06c18, 0 5px 0 #9a5a10, 0 6px 0 #84480a,
    0 7px 0 #6e3806, 0 8px 0 #5a2a04, 0 9px 0 #462002, 0 10px 0 #341600, 0 14px 10px rgba(0, 0, 0, 0.6), 0 0 40px rgba(255, 170, 60, 0.45); }
.menuplate { max-width: 560px; text-align: center; transform: perspective(1200px) rotateX(8deg); }
.menuplate .tag { color: var(--muted); text-transform: uppercase; letter-spacing: 4px; font-size: 12px; margin: 14px 0 6px; }
.menuplate .btns { justify-content: center; }

/* Level seçimi: maket karolar */
.panel-wide { max-width: 1100px !important; }
#levelGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 22px 16px; padding: 6px 2px 10px; }
.lvlcard {
  --rx: 0deg; --ry: 0deg;
  position: relative; border: none; padding: 0; text-align: left; border-radius: 14px; overflow: visible;
  background: linear-gradient(180deg, #2a323e, #1a2028);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 7px 0 #0c0f14, 0 9px 0 #05070a, 0 16px 24px rgba(0, 0, 0, 0.5);
  transform: perspective(700px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d; transition: transform 0.12s ease-out, box-shadow 0.2s;
}
.lvlcard:hover:not(.locked) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 7px 0 #0c0f14, 0 9px 0 #05070a, 0 22px 30px rgba(0, 0, 0, 0.6), 0 0 0 2px var(--accent); }
.lvlcard .diorama { display: block; width: 100%; aspect-ratio: 400 / 250; transform: translateZ(28px); transition: transform 0.2s;
  filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.55)); margin-top: -10px; }
.lvlcard:hover:not(.locked) .diorama { transform: translateZ(40px) translateY(-6px); }
.lvlcard.locked { cursor: not-allowed; }
.lvlcard.locked .diorama { filter: grayscale(1) brightness(0.55) drop-shadow(0 6px 6px rgba(0, 0, 0, 0.5)); }
.lvlinfo { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; padding: 4px 12px 12px; align-items: center; transform: translateZ(10px); }
.lvlno { font-family: 'Russo One', 'Rajdhani', sans-serif; font-size: 26px; color: var(--accent); grid-row: span 2;
  text-shadow: 0 1px 0 #b87020, 0 2px 0 #8a4d0c, 0 3px 3px rgba(0, 0, 0, 0.6); }
.lvlname { font-weight: 600; font-size: 14px; }
.lvlstars i, .stars3d i { font-style: normal; color: #2e3540; text-shadow: 0 1px 0 #11151b; }
.lvlstars i.on { color: var(--gold); text-shadow: 0 1px 0 #b88a10, 0 2px 0 #7a5a06, 0 0 8px rgba(255, 210, 70, 0.5); }
.lock { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%) translateZ(50px); font-size: 34px; filter: drop-shadow(0 4px 2px rgba(0, 0, 0, 0.7)); }
.bosstag { position: absolute; top: -6px; left: 10px; transform: translateZ(60px) rotate(-4deg); background: linear-gradient(180deg, #e04048, #9a1a22); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: 1.5px; padding: 3px 8px; border-radius: 5px; box-shadow: 0 3px 0 #5a0c12, 0 5px 6px rgba(0, 0, 0, 0.5); }

/* Brifing */
.brief { display: grid; grid-template-columns: 1.1fr 1fr; gap: 22px; align-items: start; }
.brief .diorama { width: 100%; filter: drop-shadow(0 14px 10px rgba(0, 0, 0, 0.6)); transform: perspective(800px) rotateX(10deg); animation: hover2 6s ease-in-out infinite; }
@keyframes hover2 { 50% { transform: perspective(800px) rotateX(10deg) translateY(-5px); } }
.meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0; }
.meta .m { background: rgba(0, 0, 0, 0.28); border-radius: 10px; padding: 8px 10px; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.06); }
.meta small { display: block; font-size: 10px; letter-spacing: 1.5px; color: var(--muted); text-transform: uppercase; }
.meta b { font-family: 'Rajdhani', sans-serif; font-size: 20px; }
#briefNew h4 { margin: 14px 0 8px; font-family: 'Rajdhani', sans-serif; font-size: 14px; text-transform: uppercase; letter-spacing: 2px; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 4px; border-radius: 12px; font-size: 13px; font-weight: 600;
  background: linear-gradient(180deg, #313a47, #222831); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 4px 0 #0e1217, 0 6px 8px rgba(0, 0, 0, 0.4);
  border-left: 3px solid var(--c); }
.chip img { width: 50px; height: 50px; margin: -10px 0 -6px; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.5)); }
.chip small { color: var(--muted); font-weight: 400; }
ul.help { padding-left: 18px; line-height: 1.75; color: #ccd4df; }
.keys-help { display: flex; flex-wrap: wrap; gap: 12px 18px; color: var(--muted); font-size: 13px; margin-top: 14px; align-items: center; }

/* Sonuç */
#resTitle { font-family: 'Russo One', 'Rajdhani', sans-serif; font-size: 40px; letter-spacing: 2px; }
#resTitle.win { color: #ffe08a; text-shadow: 0 1px 0 #e0a830, 0 2px 0 #c08a20, 0 3px 0 #a07010, 0 4px 0 #7a5208, 0 7px 8px rgba(0, 0, 0, 0.6), 0 0 30px rgba(255, 200, 80, 0.4); }
#resTitle.lose { color: #ff8a80; text-shadow: 0 1px 0 #d04038, 0 2px 0 #a82a24, 0 3px 0 #801a16, 0 4px 0 #5a0e0c, 0 7px 8px rgba(0, 0, 0, 0.6); }
.stars3d { display: flex; justify-content: center; gap: 10px; margin: 14px 0 4px; perspective: 600px; }
.stars3d i { display: inline-block; font-size: 64px; line-height: 1; animation: starIn 0.7s cubic-bezier(.2, 1.4, .4, 1) backwards; }
.stars3d i:nth-child(2) { font-size: 80px; transform: translateY(-10px); }
.stars3d i.on { color: #ffd84a; text-shadow: 0 1px 0 #e8b020, 0 2px 0 #d09a18, 0 3px 0 #b88010, 0 4px 0 #9a660a, 0 5px 0 #7a4e06, 0 9px 10px rgba(0, 0, 0, 0.6), 0 0 26px rgba(255, 210, 70, 0.55); }
@keyframes starIn { from { transform: rotateY(-540deg) scale(0); opacity: 0; } }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#hud > * { pointer-events: auto; }
#topbar { position: absolute; top: 8px; left: 10px; right: 10px; height: 54px; display: flex; align-items: center; gap: 10px; padding: 0 10px; border-radius: 14px; --depth: 5px; }
.lvlplate { display: flex; align-items: center; gap: 10px; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 18px; white-space: nowrap; margin-right: 6px; }
.lvlplate .num { font-family: 'Russo One', sans-serif; font-size: 18px; color: #1d1200; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px;
  background: linear-gradient(180deg, #ffcf6a, #e6942a); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 3px 0 #7a4410, 0 5px 6px rgba(0, 0, 0, 0.5); }
.stat { display: flex; align-items: center; gap: 9px; padding: 4px 12px 4px 5px; border-radius: 12px; white-space: nowrap;
  background: rgba(0, 0, 0, 0.32); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.07); }
.stat small { display: block; font-size: 9px; letter-spacing: 1.6px; color: var(--muted); line-height: 1; }
.stat b { font-family: 'Rajdhani', sans-serif; font-size: 21px; line-height: 1.05; }
.stat.lives .gem { --c: #e0404a; }
.stat.money .gem { --c: #e6a520; }
.stat.money b { color: var(--gold); }
.stat.wave .gem { --c: #3a8ae0; }
.lifebar { width: 70px; height: 8px; border-radius: 4px; background: #14181e; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8); overflow: hidden; margin-top: 3px; }
.lifebar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(180deg, #ff8a80, #d0303a); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); transition: width 0.3s; }
.spacer { flex: 1; }
#topbar .btn3d { min-width: 42px; height: 38px; padding: 0 11px; --h: 4px; font-size: 16px; border-radius: 9px; }
#topbar .btn3d.on { --face: #3a9a50; --side: #17501f; }
#topbar .btn3d.off { --ink: #7a8696; }

#bottombar { position: absolute; left: 10px; right: 10px; bottom: 12px; height: 118px; display: flex; align-items: center; gap: 14px; padding: 0 12px; border-radius: 16px; --depth: 6px; }
#shop { display: flex; gap: 10px; flex: 1; overflow-x: auto; overflow-y: visible; padding: 18px 4px 10px; margin-top: -14px; }
#shop .card {
  --rx: 0deg; --ry: 0deg;
  position: relative; flex: 1 1 0; min-width: 76px; max-width: 100px; height: 96px; /* 10 silah tek sıraya sığsın: daralır, en dar hâlde kayar */ border: none; border-radius: 12px; padding: 0;
  background: linear-gradient(180deg, #384252, #232a34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -2px 0 rgba(0, 0, 0, 0.3), 0 6px 0 #10141a, 0 7px 0 #05070a, 0 12px 14px rgba(0, 0, 0, 0.45);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 1px; padding-bottom: 6px;
  transform: perspective(500px) rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d;
  transition: transform 0.1s ease-out, box-shadow 0.1s;
}
#shop .card > img { position: absolute; top: -16px; left: 50%; width: 66px; height: 66px; transform: translateX(-50%) translateZ(20px);
  filter: drop-shadow(0 6px 4px rgba(0, 0, 0, 0.55)); transition: transform 0.15s; pointer-events: none; }
#shop .card:hover:not(.locked) > img { transform: translateX(-50%) translateZ(30px) translateY(-5px) scale(1.06); }
#shop .card .keycap { position: absolute; top: 6px; left: 6px; min-width: 18px; height: 18px; font-size: 11px; transform: translateZ(25px); }
#shop .card .nm { font-size: 11.5px; font-weight: 700; text-align: center; line-height: 1.1; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); transform: translateZ(10px); }
#shop .card .cost { font-family: 'Rajdhani', sans-serif; font-weight: 700; color: var(--gold); font-size: 15px; transform: translateZ(10px); text-shadow: 0 1px 0 #5a3a00; }
#shop .card.sel { transform: perspective(500px) translateY(5px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 2px var(--accent), 0 1px 0 #10141a, 0 2px 0 #05070a, 0 0 22px rgba(255, 180, 58, 0.55); }
#shop .card.poor .cost { color: var(--red); text-shadow: 0 1px 0 #4a0a0a; }
#shop .card.poor:not(.locked) > img { filter: grayscale(0.7) brightness(0.75) drop-shadow(0 6px 4px rgba(0, 0, 0, 0.55)); }
#shop .card.locked { cursor: not-allowed; background: linear-gradient(180deg, #262b33, #191d23); }
#shop .card.locked > img { filter: grayscale(1) brightness(0.3) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.6)); }
#shop .card.locked .cost { color: var(--muted); font-size: 12px; text-shadow: none; }

#wavebox { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: 0 0 auto; max-width: 380px; }
#nextPreview { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; font-size: 12px; color: var(--muted); align-items: center; }
#nextPreview .pv { display: inline-flex; align-items: center; gap: 2px; padding: 1px 8px 1px 1px; border-radius: 8px; background: rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5); color: #dfe6ee; font-weight: 600; }
#nextPreview .pv img { width: 28px; height: 28px; margin: -6px 0 -4px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6)); }
#btnWave.btn3d { font-size: 20px; padding: 12px 22px; --h: 7px; }
#btnWave small { font-size: 13px; color: #ffe08a; }

/* İpucu */
#shopTip { position: fixed; width: 270px; padding: 14px 16px 16px; font-size: 13px; pointer-events: none; --depth: 5px; z-index: 30; }
#shopTip h4 { margin: 0 0 4px; font-family: 'Rajdhani', sans-serif; font-size: 19px; }
#shopTip p { margin: 4px 0 8px; color: #c2cad5; line-height: 1.45; }
#shopTip .hint { color: var(--muted); font-size: 12px; }
#shopTip .lockedtxt { color: var(--accent); }

/* İstatistik çubukları */
.stats { display: grid; gap: 6px; margin: 10px 0; }
.sr { display: grid; grid-template-columns: 78px 1fr auto; align-items: center; gap: 8px; font-size: 12.5px; }
.sr span { color: var(--muted); }
.sr b { font-family: 'Rajdhani', sans-serif; font-size: 15px; text-align: right; white-space: nowrap; }
.sr em { color: #7fe68a; font-style: normal; }
.sbar { position: relative; height: 9px; border-radius: 5px; background: #12161c; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8); overflow: hidden; }
.sbar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; }
.sbar .nx { background: repeating-linear-gradient(-45deg, rgba(127, 230, 138, 0.55) 0 4px, rgba(127, 230, 138, 0.25) 4px 8px); }
.sbar .cur { background: linear-gradient(180deg, #8fd0ff, #3a88d8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.targets { display: flex; gap: 6px; margin: 6px 0; }
.targets span { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 8px; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.45); }
.targets .y { background: linear-gradient(180deg, #3a8a48, #286a34); color: #d8ffde; }
.targets .n { background: linear-gradient(180deg, #5a2a2a, #3e1c1c); color: #ffaaa0; text-decoration: line-through; }

/* Kule paneli */
#towerPanel { position: absolute; right: 14px; top: 84px; max-height: calc(100vh - 250px); overflow-y: auto; width: 290px; padding: 0 16px 18px; --depth: 6px; }
.tpart { position: relative; height: 104px; margin: 4px -6px 0; display: flex; align-items: flex-end; justify-content: center; }
.tpart img { width: 112px; height: 112px; filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.6)); animation: hover3 4s ease-in-out infinite; }
@keyframes hover3 { 50% { transform: translateY(-4px); } }
.tpart .nextimg { position: absolute; right: 2px; bottom: 6px; width: 64px; height: 64px; opacity: 0.85; animation: none; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.6)) saturate(1.1); }
.tpart .arrow { position: absolute; right: 60px; bottom: 30px; color: #7fe68a; font-weight: 800; text-shadow: 0 2px 0 #1a5a26; }
.tphead { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.tphead h3 { margin: 0; font-family: 'Rajdhani', sans-serif; font-size: 21px; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5); }
.tphead .lvl { font-size: 12px; color: var(--muted); }
.tphead .lvl i { font-style: normal; color: #2e3540; text-shadow: 0 1px 0 #10141a; }
.tphead .lvl i.on { color: var(--gold); text-shadow: 0 1px 0 #9a6a08, 0 0 6px rgba(255, 210, 70, 0.5); }
.tphead .x { margin-left: auto; }
.tpline { font-size: 12px; color: var(--muted); margin: 4px 0 10px; }
.tpline b { color: var(--text); }
.modes { display: flex; gap: 0; margin-bottom: 14px; border-radius: 9px; padding: 3px; background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5); }
.modes button { flex: 1; border: none; border-radius: 7px; padding: 6px 0; font-size: 12px; font-weight: 700; color: var(--muted); background: transparent; transition: 0.12s; }
.modes button.on { color: #fff; background: linear-gradient(180deg, #4a8ae0, #2e64b0); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 0 #183a6a, 0 3px 4px rgba(0, 0, 0, 0.4); transform: translateY(-1px); }
.tpbtns { display: grid; gap: 12px; }
.tpbtns .btn3d { justify-content: space-between; font-size: 16px; padding: 10px 14px; }
.tpbtns .btn3d .keycap { height: 18px; min-width: 18px; font-size: 10px; }

/* Bildirimler */
#toasts { position: absolute; top: 76px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast { padding: 9px 18px 9px 22px; border-radius: 10px; font-size: 14px; font-weight: 600; white-space: nowrap; --depth: 4px;
  animation: tin 0.3s cubic-bezier(.2, 1.3, .4, 1); transition: opacity 0.4s, transform 0.4s; }
.toast::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 5px; border-radius: 3px; background: repeating-linear-gradient(-45deg, #e8a920 0 4px, #1b1f26 4px 8px); }
.toast.warn { color: #ffd0c8; }
.toast.warn::before { background: repeating-linear-gradient(-45deg, #e04040 0 4px, #1b1f26 4px 8px); }
.toast.out { opacity: 0; transform: translateY(-10px) rotateX(40deg); }
@keyframes tin { from { opacity: 0; transform: translateY(-14px) rotateX(-50deg); } }
#floats { position: absolute; inset: 0; pointer-events: none !important; overflow: hidden; }
.float { position: absolute; transform: translate(-50%, -50%); font-family: 'Russo One', 'Rajdhani', sans-serif; font-size: 16px;
  text-shadow: 0 1px 0 #a87a10, 0 2px 0 #7a5208, 0 3px 3px rgba(0, 0, 0, 0.7); animation: flt 0.9s ease-out forwards; }
@keyframes flt { 0% { transform: translate(-50%, -30%) scale(0.6); } 20% { transform: translate(-50%, -60%) scale(1.15); } to { transform: translate(-50%, -170%) scale(1); opacity: 0; } }
#dmgFlash { position: absolute; inset: 0; pointer-events: none !important; box-shadow: inset 0 0 140px rgba(255, 0, 0, 0.6); opacity: 0; }
#dmgFlash.on { animation: dmg 0.5s; }
@keyframes dmg { 0% { opacity: 1; } 100% { opacity: 0; } }

@media (max-width: 860px) {
  #hudLevel { display: none; }
  .stat small { display: none; }
  .lifebar { display: none; }
  .stat b { font-size: 17px; }
  .gem { width: 28px; height: 28px; font-size: 15px; }
  #wavebox { max-width: 150px; }
  #nextPreview { display: none; }
  #btnWave.btn3d { font-size: 16px; padding: 10px 12px; }
  #shop .card { max-width: 80px; }
  #shop .card > img { width: 66px; height: 66px; }
  .logo3d .l1 { font-size: 50px; }
  .brief { grid-template-columns: 1fr; }
  #towerPanel { right: 8px; left: 8px; width: auto; top: 76px; }
}

/* ---------- Arayüz simgeleri (2B SVG; kendi koyu konturu ve alt gölgesi var) ---------- */
.i3d { width: 1.45em; height: 1.45em; vertical-align: middle; object-fit: contain; flex: 0 0 auto;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4)); pointer-events: none; }
.btn3d.primary .i3d { filter: none; }
.i3d.tiny { width: 1.25em; height: 1.25em; margin: -0.2em 0.1em -0.15em 0; }
.i3d.big { width: 1.7em; height: 1.7em; margin: -0.3em 0; }
.i3d.huge { width: 92px; height: 92px; margin: 6px auto 0; display: block; animation: starIn 0.7s cubic-bezier(.2, 1.4, .4, 1) backwards; }
.btn3d .i3d { margin: -0.25em 0; }
.btn3d:hover:not(:disabled) .i3d { transform: translateY(-1px) scale(1.08); }
.btn3d .i3d { transition: transform 0.12s; }
#topbar .btn3d .i3d { width: 22px; height: 22px; }
#topbar #btnAuto, #topbar #btnSpeed { gap: 4px; }
.sticon { width: 34px; height: 34px; margin: -2px 0; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45)); }
.stat:hover .sticon { animation: wobble 0.5s; }
@keyframes wobble { 30% { transform: rotate(8deg) scale(1.1); } 60% { transform: rotate(-10deg); } }
.meta .m { display: flex; align-items: center; gap: 8px; }
.meta .mi { width: 34px; height: 34px; }
.lvlstars .i3d { width: 17px; height: 17px; margin-right: 1px; filter: none; }
.lock .i3d { width: 54px; height: 54px; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.6)); }
.bosstag { display: flex; align-items: center; gap: 3px; padding-left: 3px !important; }
.bosstag .i3d { width: 20px; height: 20px; margin: -4px 0; }
.stars3d .st { width: 74px; height: 74px; animation: starIn 0.7s cubic-bezier(.2, 1.4, .4, 1) backwards; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.6)); }
.stars3d .st:nth-child(2) { width: 92px; height: 92px; transform: translateY(-12px); }
.modes { align-items: center; }
.modes > .i3d { margin: 0 4px 0 2px; }
.targets span { display: inline-flex; align-items: center; gap: 2px; }
.targets .i3d { width: 20px; height: 20px; margin: -5px 0; }
.targets .n .i3d { filter: grayscale(1) brightness(0.7); }
.toast { display: flex; align-items: center; gap: 6px; }
.toast .i3d { width: 24px; height: 24px; margin: -4px 0; }
.float .i3d { width: 18px; height: 18px; margin: -3px 1px 0 0; }
.tpline .i3d { width: 18px; height: 18px; }
.tphead .lvl .i3d { width: 14px; height: 14px; margin: -2px 0; }
.tpart .arrow .i3d { width: 22px; height: 22px; }
.help .i3d { width: 20px; height: 20px; }
.plate h2 .i3d { margin: -0.3em 0.1em 0 0; }
#shop .card .cost .i3d { width: 17px; height: 17px; margin-right: 2px; }

/* ---------- Boss can çubuğu ---------- */
#bossBar { position: absolute; top: 74px; left: 50%; transform: translateX(-50%); width: min(560px, calc(100vw - 340px)); min-width: 300px;
  display: flex; align-items: center; gap: 12px; padding: 8px 16px 10px 8px; --depth: 5px; animation: bossIn 0.6s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes bossIn { from { transform: translateX(-50%) translateY(-30px) rotateX(60deg); opacity: 0; } }
#bossImg { width: 62px; height: 62px; margin: -18px 0 -10px; filter: drop-shadow(0 6px 4px rgba(0, 0, 0, 0.6)); }
.bb { flex: 1; min-width: 0; }
.bbname { display: flex; align-items: baseline; gap: 10px; margin-bottom: 5px; white-space: nowrap; overflow: hidden; }
.bbname span { font-family: 'Russo One', 'Rajdhani', sans-serif; font-size: 17px; color: #ffb0a0; letter-spacing: 1px;
  text-shadow: 0 1px 0 #8a2018, 0 2px 0 #5a0e0a, 0 3px 4px rgba(0, 0, 0, 0.6); }
.bbname small { color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; }
.bbtrack { position: relative; height: 16px; border-radius: 8px; background: #12161c; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.08); overflow: hidden; }
.bbtrack i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px; transition: width 0.15s; }
#bossHp { background: linear-gradient(180deg, #ff7a6a, #c8202a 60%, #8a1018); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45); }
#bossSh { top: auto; height: 6px; bottom: 0; background: linear-gradient(180deg, #a8dcff, #3a8ae0); opacity: 0.9; }
#bossPct { position: absolute; right: 8px; top: 0; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 13px; line-height: 16px; text-shadow: 0 1px 2px #000; }
#bossBar.enraged { animation: enrage 0.8s ease-in-out infinite; }
@keyframes enrage { 50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 5px 0 var(--plate-edge), 0 0 26px rgba(255, 60, 40, 0.6); } }
#hud.hasboss #toasts { top: 150px; }
.bosscard { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 6px; border-radius: 12px; border-left: 3px solid #e04048;
  background: linear-gradient(180deg, #3a2a2e, #24191c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 4px 0 #120a0c, 0 6px 8px rgba(0, 0, 0, 0.4); }
.bosscard img { width: 74px; height: 74px; margin: -16px 0 -10px; filter: drop-shadow(0 6px 4px rgba(0, 0, 0, 0.6)); }
.bosscard b { font-family: 'Rajdhani', sans-serif; font-size: 18px; color: #ffb0a0; }
.bosscard p { margin: 2px 0 0; font-size: 12.5px; color: #c8bfc2; }

/* ---------- Ana menü ses anahtarları ---------- */
.audiotoggles { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }
.audiotoggles .btn3d { font-size: 13px; }
.btn3d.off { --ink: #7a8696; }
.btn3d.off .i3d { opacity: 0.6; }

/* ======================================================================
   MOBİL (dokunmatik, yatay telefon) — html.mobile platform.js tarafından eklenir
   ====================================================================== */
:root {
  --sat: env(safe-area-inset-top, 0px); --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px);
  --rail: 104px;
}
.only-mobile { display: none; }
html.mobile .only-mobile { display: block; }
html.mobile .only-desktop { display: none !important; }
html.mobile, html.mobile body { overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
html.mobile * { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
html.mobile button { touch-action: manipulation; }

/* ---- Üst bar: ince, rayın solunda biter */
html.mobile #topbar { top: calc(6px + var(--sat)); left: calc(6px + var(--sal)); right: calc(var(--rail) + 14px + var(--sar));
  height: 42px; padding: 0 6px; gap: 6px; border-radius: 12px; --depth: 4px; }
html.mobile #hudLevel, html.mobile .stat small, html.mobile .lifebar, html.mobile #btnMute, html.mobile #btnMusic { display: none; }
html.mobile .lvlplate { margin-right: 0; }
html.mobile .lvlplate .num { width: 30px; height: 30px; font-size: 16px; }
html.mobile .stat { padding: 2px 9px 2px 3px; gap: 5px; }
html.mobile .stat b { font-size: 17px; }
html.mobile .sticon { width: 28px; height: 28px; margin: -2px 0; }
html.mobile #topbar .btn3d { min-width: 40px; height: 34px; padding: 0 8px; font-size: 14px; --h: 3px; }

/* ---- Sağ ray: dikey mağaza + dalga düğmesi */
html.mobile #bottombar { top: calc(6px + var(--sat)); right: calc(6px + var(--sar)); bottom: calc(6px + var(--sab)); left: auto;
  width: var(--rail); height: auto; flex-direction: column; gap: 8px; padding: 8px 6px; border-radius: 14px; --depth: 5px; }
html.mobile #shop { flex-direction: column; overflow-y: auto; overflow-x: hidden; margin: 0; padding: 14px 2px 4px; gap: 12px; width: 100%;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; }
html.mobile #shop::-webkit-scrollbar { display: none; }
html.mobile #shop .card { flex: 0 0 auto; width: 100%; max-width: none; min-width: 0; height: 66px; padding-bottom: 5px; }
html.mobile #shop .card > img { top: -12px; width: 54px; height: 54px; }
html.mobile #shop .card .nm, html.mobile #shop .card .keycap { display: none; }
html.mobile #shop .card .cost { font-size: 14px; }
html.mobile #shop .card.locked .cost { font-size: 10px; }
html.mobile #wavebox { width: 100%; max-width: none; align-items: stretch; gap: 0; }
html.mobile #nextPreview { display: none; }
html.mobile #btnWave.btn3d { width: 100%; padding: 10px 4px; font-size: 14px; flex-direction: column; gap: 2px; line-height: 1.05; --h: 5px; }
html.mobile #btnWave .i3d { width: 26px; height: 26px; margin: 0; }
html.mobile #btnWave small { font-size: 11px; }

/* ---- Kule paneli: soldan açılan, kaydırılabilir */
html.mobile #towerPanel { left: calc(6px + var(--sal)); right: auto; top: calc(54px + var(--sat)); bottom: calc(6px + var(--sab));
  width: 236px; max-height: none; overflow-y: auto; padding: 0 12px 14px; --depth: 4px; }
html.mobile .tpart { height: 70px; margin-top: 2px; }
html.mobile .tpart > img { width: 78px; height: 78px; }
html.mobile .tpart .nextimg { width: 46px; height: 46px; }
html.mobile .tpart .arrow { right: 46px; bottom: 18px; }
html.mobile .tphead h3 { font-size: 18px; }
html.mobile .stats { gap: 4px; margin: 6px 0; }
html.mobile .sr { grid-template-columns: 64px 1fr auto; font-size: 11px; }
html.mobile .sr b { font-size: 13px; }
html.mobile .modes button { padding: 8px 0; }
html.mobile .tpbtns { gap: 10px; }
html.mobile .tpbtns .btn3d { font-size: 15px; padding: 11px 12px; }
html.mobile .tpbtns .keycap { display: none; }

/* ---- Boss çubuğu, bildirimler, bilgi kartı */
html.mobile #bossBar { top: calc(54px + var(--sat)); left: calc(50% - var(--rail) / 2); width: min(400px, calc(100vw - var(--rail) - 300px)); min-width: 240px;
  padding: 5px 12px 7px 6px; gap: 8px; }
html.mobile #bossImg { width: 44px; height: 44px; margin: -10px 0 -6px; }
html.mobile .bbname span { font-size: 14px; }
html.mobile .bbname small { display: none; }
html.mobile .bbtrack { height: 12px; }
html.mobile #bossPct { font-size: 11px; line-height: 12px; }
html.mobile #toasts { top: calc(56px + var(--sat)); left: calc(50% - var(--rail) / 2); }
html.mobile #hud.hasboss #toasts { top: calc(112px + var(--sat)); }
html.mobile .toast { font-size: 12px; padding: 6px 12px 6px 18px; white-space: normal; max-width: 60vw; text-align: center; }
html.mobile #shopTip.docked { left: auto !important; bottom: auto !important; right: calc(var(--rail) + 16px + var(--sar)); top: calc(54px + var(--sat));
  width: 250px; padding: 10px 12px 12px; font-size: 12px; }
html.mobile #shopTip h4 { font-size: 16px; }
html.mobile #shopTip p { margin: 2px 0 6px; }

/* ---- Görünümü sıfırla + yerleştirme onay balonu */
#btnFit { position: absolute; right: calc(12px + var(--sar)); bottom: calc(160px + var(--sab)); width: 48px; height: 48px; padding: 0; font-size: 22px; }
#placeConfirm { position: fixed; left: 0; top: 0; z-index: 15; display: flex; gap: 12px; margin: -86px 0 0 -66px; pointer-events: auto; }
#placeConfirm .btn3d { width: 58px; height: 50px; padding: 0; font-size: 22px; border-radius: 14px; flex-direction: column; gap: 0; line-height: 1; }
#placeConfirm #pcOk { width: 74px; }
#placeConfirm small { font-size: 11px; font-family: 'Rajdhani', sans-serif; }

/* ---- Menüler: kısa (yatay telefon) ekrana sığdır */
@media (max-height: 520px) {
  .screen { padding: calc(8px + var(--sat)) calc(10px + var(--sar)) calc(8px + var(--sab)) calc(10px + var(--sal)); }
  .screen .plate { padding: 12px 18px 16px; max-height: calc(100vh - 16px - var(--sat) - var(--sab)); }
  .plate h2 { font-size: 21px; }
  .phead { margin: 6px 0 10px; }
  .btns { margin-top: 12px; gap: 10px; }
  .btn3d.big { font-size: 16px; padding: 10px 18px; --h: 6px; }
  .stage { gap: 8px; }
  .logo3d .l1 { font-size: 38px; letter-spacing: 4px; }
  .logo3d .l2 { font-size: 16px; margin-top: 4px; letter-spacing: 6px; }
  .menuplate .tag { margin: 8px 0 4px; }
  .menuplate .story { font-size: 12px; line-height: 1.45; margin: 4px 0; }
  .audiotoggles { margin-top: 10px; }
  #levelGrid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px 10px; }
  .lvlinfo { padding: 2px 8px 8px; grid-template-columns: auto 1fr; gap: 0 6px; }
  .lvlno { font-size: 18px; }
  .lvlname { font-size: 11px; line-height: 1.15; }
  .lvlstars .i3d { width: 13px; height: 13px; }
  .bosstag { font-size: 9px; }
  .brief { grid-template-columns: 0.85fr 1.15fr; gap: 14px; }
  .brief .diorama { max-height: 52vh; object-fit: contain; }
  #briefStory { font-size: 12.5px; line-height: 1.45; }
  .meta { gap: 6px; margin: 8px 0; }
  .meta .m { padding: 5px 6px; gap: 5px; }
  .meta .mi { width: 24px; height: 24px; }
  .meta b { font-size: 15px; }
  .meta small { font-size: 8px; letter-spacing: 0.8px; }
  #briefNew h4 { margin: 8px 0 6px; font-size: 12px; }
  .chip img { width: 38px; height: 38px; }
  .bosscard { padding: 4px 10px 4px 4px; }
  .bosscard img { width: 52px; height: 52px; margin: -8px 0 -4px; }
  .bosscard p { font-size: 11.5px; }
  #resTitle { font-size: 28px; }
  .stars3d .st { width: 52px; height: 52px; }
  .stars3d .st:nth-child(2) { width: 64px; height: 64px; }
  #resText { font-size: 12.5px; margin: 6px 0; }
  ul.help { font-size: 13px; line-height: 1.55; margin: 6px 0; }
  #pauseScreen .btns.col, #result .btns.col { gap: 8px; }
}

/* ---- Dikey tutulursa (tarayıcıda) çevir uyarısı; uygulamada ekran yatay kilitli */
#rotate { display: none; }
@media (orientation: portrait) {
  html.mobile #rotate { display: flex; position: fixed; inset: 0; z-index: 100; align-items: center; justify-content: center; text-align: center;
    background: #0b0e13; color: var(--text); font-family: 'Rajdhani', sans-serif; font-size: 20px; padding: 30px; }
  #rotate span { display: block; font-size: 64px; margin-bottom: 12px; animation: spin 2s ease-in-out infinite; }
}
@keyframes spin { 50% { transform: rotate(90deg); } }

/* ---- Kule paneli: geliştir/sat düğmeleri ve hedefleme başlığın hemen altında (kaydırmadan erişilir);
   mobilde ayrıca küçük görseller. Sıfırlama düğmesi rayın solunda; brifingde düğme sabit */
#towerPanel:not(.hidden) { display: flex; flex-direction: column; }
#towerPanel .tpart { order: 0; }
#towerPanel .tphead { order: 1; }
#towerPanel .tpbtns { order: 2; margin: 12px 0 6px; }
#towerPanel .modes { order: 3; margin: 6px 0 2px; }
#towerPanel .stats, #towerPanel .tpnote { order: 4; }
#towerPanel .traits2, #towerPanel .targets { order: 5; }
#towerPanel .tpline { order: 6; margin-bottom: 2px; }
html.mobile #towerPanel .tpart { height: 56px; }
html.mobile #towerPanel .tpart > img { width: 64px; height: 64px; }
html.mobile #towerPanel .tpart .nextimg { width: 40px; height: 40px; }
html.mobile #towerPanel .tpbtns { margin: 8px 0 4px; }
html.mobile #towerPanel .modes { margin: 6px 0 4px; }
html.mobile #towerPanel .tpline { margin-bottom: 0; }
html.mobile #btnFit { left: auto; right: calc(var(--rail) + 16px + var(--sar)); bottom: calc(10px + var(--sab)); }
@media (max-height: 520px) {
  #briefing .brief > div:last-child { max-height: calc(100vh - 92px - var(--sat) - var(--sab)); overflow-y: auto; padding-right: 4px; }
  #briefing .brief .btns { position: sticky; bottom: 0; margin-top: 10px; padding: 8px 0 2px; background: linear-gradient(180deg, rgba(27, 33, 41, 0), #1b2129 35%); }
  #briefing .plate { overflow: hidden; }
}

/* ---- iOS WebKit: 3B dönüşümlü öğelerde dokunuş hedefleme ve kaydırma alanında çizim hataları */
.lvlcard .diorama, .lvlcard .lock, .lvlcard .lvlinfo, .lvlcard .bosstag { pointer-events: none; }
html.mobile .lvlcard, html.mobile .lvlcard .diorama, html.mobile .lvlcard:hover:not(.locked) .diorama { transform: none !important; }
html.mobile .lvlcard .lock { transform: translate(-50%, -50%) !important; }
html.mobile .brief .diorama { transform: none; animation: none; }
html.mobile .screen > .plate, html.mobile .screen > .stage { animation-name: riseFlat; }
@keyframes riseFlat { from { transform: translateY(24px); opacity: 0; } }

/* ======================================================================
   EK EKRANLAR: açılış, ana menü ızgarası, ayarlar, istihbarat arşivi, komutan kaydı,
   onay penceresi, emeği geçenler, savaş raporu, FPS
   ====================================================================== */

/* ---------- Açılış ---------- */
#boot { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 40%, #1a2130, var(--bg) 70%); transition: opacity 0.6s ease, visibility 0.6s; }
#boot.done { opacity: 0; visibility: hidden; pointer-events: none; }
.bootin { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 20px; text-align: center; }
.bootbar { width: min(320px, 70vw); height: 14px; border-radius: 7px; overflow: hidden; background: #12161c;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.08); }
.bootbar i { display: block; height: 100%; background: repeating-linear-gradient(-45deg, #e8a920 0 10px, #1b1f26 10px 20px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); animation: bootstripe 0.7s linear infinite; }
@keyframes bootstripe { to { background-position: 28.28px 0; } }
.boottxt { margin: 0; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 4px; text-transform: uppercase; color: var(--muted); }
.bootslow { display: none; margin: 0; max-width: 340px; font-size: 13px; line-height: 1.5; color: #ffb0a0; }
#boot.slow .bootslow { display: block; }

/* ---------- Ana menü: büyük başlat + 4'lü kısayol ızgarası ---------- */
.btn3d.wide { width: 100%; }
.menugrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.btn3d.tile { flex-direction: column; gap: 5px; min-height: 78px; padding: 10px 6px 9px; font-size: 14.5px; line-height: 1.1; text-align: center; }
.btn3d.tile .i3d { width: 34px; height: 34px; margin: 0; }

/* ---------- Ortak: sekmeler ---------- */
.tabs { display: flex; gap: 4px; padding: 4px; margin-bottom: 14px; border-radius: 12px;
  background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.06); }
.tabs button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 6px; border: none; border-radius: 9px;
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 16px; white-space: nowrap; color: var(--muted); background: transparent; transition: 0.12s; }
.tabs button:hover:not(.on) { color: var(--text); background: rgba(255, 255, 255, 0.04); }
.tabs button .i3d { width: 22px; height: 22px; opacity: 0.5; transition: 0.12s; }
.tabs button small { font-size: 12px; font-weight: 600; opacity: 0.75; }
.tabs button.on { color: #fff; background: linear-gradient(180deg, #4a8ae0, #2e64b0); transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 0 #183a6a, 0 3px 4px rgba(0, 0, 0, 0.4); }
.tabs button.on .i3d { opacity: 1; }

/* ---------- Ayarlar ---------- */
.screen .setplate { max-width: 680px; }
#settings h2 .i3d, #codex h2 .i3d, #career h2 .i3d { width: 1.25em; height: 1.25em; }
.tabpane { display: grid; gap: 8px; }
.setrow { display: flex; align-items: center; gap: 16px; padding: 10px 14px; border-radius: 12px;
  background: rgba(0, 0, 0, 0.22); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.05); }
.setrow.col { flex-direction: column; align-items: stretch; gap: 10px; }
.setlbl { flex: 1; min-width: 0; }
.setlbl b { display: block; font-family: 'Rajdhani', sans-serif; font-size: 17px; letter-spacing: 0.3px; }
.setlbl small { display: block; margin-top: 1px; font-size: 12px; line-height: 1.35; color: var(--muted); }
.setctl { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.setctl output { width: 30px; text-align: right; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 16px; }
html:not(.native) .only-native { display: none !important; }
#dataSummary { margin: 0 0 4px; }

/* Kaydırıcı: oluklu ray + basılan metal düğme */
.slider3d { --v: 50%; -webkit-appearance: none; appearance: none; width: 190px; height: 28px; margin: 0; background: transparent; cursor: pointer; }
.slider3d::-webkit-slider-runnable-track { height: 12px; border-radius: 6px;
  background: linear-gradient(180deg, #ffcf6a, #e6942a) 0 0 / var(--v) 100% no-repeat, #12161c;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.08); }
.slider3d::-moz-range-track { height: 12px; border-radius: 6px; background: #12161c; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.08); }
.slider3d::-moz-range-progress { height: 12px; border-radius: 6px; background: linear-gradient(180deg, #ffcf6a, #e6942a); }
.slider3d::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -6px; border: none; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #c9d2de 45%, #7d8898);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.25), 0 3px 0 #2a313b, 0 5px 6px rgba(0, 0, 0, 0.5); transition: transform 0.08s; }
.slider3d::-moz-range-thumb { width: 24px; height: 24px; border: none; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #c9d2de 45%, #7d8898);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.25), 0 3px 0 #2a313b, 0 5px 6px rgba(0, 0, 0, 0.5); }
.slider3d:active::-webkit-slider-thumb { transform: translateY(2px); }
.slider3d:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.slider3d.dim { opacity: 0.4; }

/* Anahtar: oyuk yuva + kayan düğme */
.switch3d { position: relative; flex: 0 0 auto; width: 62px; height: 32px; padding: 0; border: none; border-radius: 16px;
  background: #12161c; box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.08); transition: background 0.15s; }
.switch3d.on { background: linear-gradient(180deg, #2f8a44, #3fae55); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.08); }
.switch3d i { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #c9d2de 45%, #7d8898);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.25), 0 3px 0 #2a313b, 0 4px 5px rgba(0, 0, 0, 0.5); transition: transform 0.18s cubic-bezier(.3, 1.4, .5, 1); }
.switch3d.on i { transform: translateX(30px); }
.switch3d:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Bölmeli seçici */
.seg { display: flex; gap: 3px; padding: 3px; border-radius: 10px; background: rgba(0, 0, 0, 0.4); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.55); }
.seg button { flex: 1; padding: 7px 12px; border: none; border-radius: 8px; white-space: nowrap;
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 15px; color: var(--muted); background: transparent; transition: 0.12s; }
.seg button:hover:not(.on) { color: var(--text); }
.seg button.on { color: #fff; background: linear-gradient(180deg, #4a8ae0, #2e64b0); transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 0 #183a6a, 0 3px 4px rgba(0, 0, 0, 0.4); }
.setrow.col .seg button { padding: 9px 6px; }

/* ---------- İstihbarat Arşivi ---------- */
.cxwrap { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.cxlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 18px 12px; padding: 16px 2px 8px; }
.cxcard { position: relative; height: 112px; padding: 0 6px 8px; border: none; border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  background: linear-gradient(180deg, #384252, #232a34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -2px 0 rgba(0, 0, 0, 0.3), 0 6px 0 #10141a, 0 7px 0 #05070a, 0 12px 14px rgba(0, 0, 0, 0.45);
  transition: transform 0.1s ease-out, box-shadow 0.1s; }
.cxcard img { position: absolute; top: -14px; left: 50%; width: 86px; height: 86px; transform: translateX(-50%);
  filter: drop-shadow(0 6px 4px rgba(0, 0, 0, 0.55)); pointer-events: none; transition: transform 0.15s; }
.cxcard span { font-size: 12px; font-weight: 700; line-height: 1.15; text-align: center; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); pointer-events: none; }
.cxcard:hover:not(.sel) { transform: translateY(-2px); }
.cxcard:hover img { transform: translateX(-50%) translateY(-4px) scale(1.05); }
.cxcard.sel { transform: translateY(4px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 2px var(--accent), 0 2px 0 #10141a, 0 3px 0 #05070a, 0 0 22px rgba(255, 180, 58, 0.45); }
.cxcard.locked { background: linear-gradient(180deg, #262b33, #191d23); }
.cxcard.locked img, .cxhero.locked img, .chip.locked img { filter: brightness(0) drop-shadow(0 0 1.5px rgba(150, 170, 200, 0.55)); opacity: 0.75; }
.cxcard.locked span { color: var(--muted); letter-spacing: 2px; }
.cxdetail { position: sticky; top: 0; min-height: 320px; padding: 0 16px 16px; border-radius: 14px;
  background: rgba(0, 0, 0, 0.26); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.06); }
.cxhero { position: relative; height: 150px; display: flex; align-items: flex-end; justify-content: center; }
.cxhero::before { content: ''; position: absolute; bottom: 4px; left: 50%; width: 180px; height: 44px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--c, #7d8898) 50%, transparent), transparent 70%); }
.cxhero img { position: relative; width: 150px; height: 150px; margin-bottom: -6px; filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.6)); animation: hover3 4s ease-in-out infinite; }
.cxhero.locked img { animation: none; }
.cxhead { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 8px 0 2px; }
.cxdetail h3 { margin: 8px 0 2px; font-family: 'Rajdhani', sans-serif; font-size: 22px; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5); }
.cxhead h3 { margin: 0; }
.cxhead .keycap { margin-left: auto; }
.cxdesc { margin: 6px 0 4px; font-size: 13px; line-height: 1.5; color: #c2cad5; }
.modes.cxlvl { margin: 10px 0 6px; }
.cxlvl button { display: inline-flex; align-items: center; justify-content: center; gap: 3px; }
.cxlvl .i3d { width: 14px; height: 14px; }
.cxdetail h4 { margin: 12px 0 8px; font-family: 'Rajdhani', sans-serif; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.cxdetail .chip img { width: 42px; height: 42px; margin: -8px 0 -6px; }
.cxdetail .hint { margin: 8px 0 0; font-size: 11.5px; color: var(--muted); }
.tag { display: inline-flex; align-items: center; gap: 3px; padding: 3px 9px 3px 5px; border-radius: 8px; font-size: 11px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; background: linear-gradient(180deg, #3a4656, #283040); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 0 rgba(0, 0, 0, 0.45); }
.tag .i3d { width: 18px; height: 18px; margin: -4px 0; }
.tag.boss { background: linear-gradient(180deg, #e04048, #9a1a22); }
ul.traits { margin: 8px 0; padding-left: 18px; font-size: 12.5px; line-height: 1.55; color: #ccd4df; }
ul.traits li::marker { color: var(--accent); }

/* ---------- Komutan Kaydı ---------- */
.rank { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; padding: 12px 18px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 180, 58, 0.12), rgba(0, 0, 0, 0.25));
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 200, 120, 0.15); }
.rankbadge, .mdisc { display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; }
.rankbadge { width: 72px; height: 72px;
  background: radial-gradient(circle at 35% 30%, #ffe08a, #e6a520 55%, #8a5a08);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), inset 0 -3px 4px rgba(0, 0, 0, 0.3), 0 4px 0 #6a4206, 0 8px 12px rgba(0, 0, 0, 0.5); }
.rankbadge .i3d { width: 46px; height: 46px; }
.rankinfo { flex: 1; min-width: 0; }
.rankinfo small { display: block; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.rankinfo > b { font-family: 'Russo One', 'Rajdhani', sans-serif; font-size: 26px; letter-spacing: 1px; color: #ffe08a;
  text-shadow: 0 1px 0 #c08a20, 0 2px 0 #8a5a08, 0 4px 5px rgba(0, 0, 0, 0.6); }
.rbar { max-width: 420px; height: 10px; margin: 6px 0 4px; border-radius: 5px; overflow: hidden; background: #12161c; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8); }
.rbar i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(180deg, #ffcf6a, #e6942a); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.rankinfo span { font-size: 12px; color: var(--muted); }
.rankinfo span b { color: var(--text); }
.rankstars { display: flex; align-items: center; gap: 4px; font-family: 'Rajdhani', sans-serif; font-weight: 700; }
.rankstars .i3d { width: 44px; height: 44px; }
.rankstars b { font-size: 34px; color: var(--gold); }
.rankstars small { font-size: 18px; color: var(--muted); }
.meta.ctiles { grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; }
.meta b small { font-size: 0.7em; color: var(--muted); }
.ctiles .m > div { min-width: 0; }
.ctiles .m b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sechead { margin: 18px 0 10px; font-family: 'Rajdhani', sans-serif; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.sechead small { margin-left: 6px; font-size: 14px; color: var(--accent); }
.medals { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.medal { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 10px 10px; border-radius: 12px; text-align: center;
  background: linear-gradient(180deg, #2a313c, #1d232b); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 4px 0 #0e1217, 0 6px 8px rgba(0, 0, 0, 0.4); }
.medal.got { background: linear-gradient(180deg, #3a3426, #231f17); box-shadow: inset 0 1px 0 rgba(255, 220, 140, 0.14), inset 0 0 0 1px rgba(255, 200, 100, 0.12), 0 4px 0 #0e1217, 0 6px 8px rgba(0, 0, 0, 0.4); }
.medal b { margin-top: 4px; font-family: 'Rajdhani', sans-serif; font-size: 15px; }
.medal:not(.got) b { color: #aab4c2; }
.medal small { min-height: 2.6em; font-size: 11.5px; line-height: 1.3; color: var(--muted); }
.mdisc { width: 58px; height: 58px;
  background: radial-gradient(circle at 35% 30%, #5a6474, #343c48 55%, #1e242c);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), inset 0 -3px 4px rgba(0, 0, 0, 0.4), 0 3px 0 #10141a, 0 5px 8px rgba(0, 0, 0, 0.5); }
.mdisc .i3d { width: 36px; height: 36px; opacity: 0.32; }
.medal.got .mdisc, .mchip .mdisc { background: radial-gradient(circle at 35% 30%, #ffe8a0, #e6a520 55%, #8a5a08);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55), inset 0 -3px 4px rgba(0, 0, 0, 0.3), 0 3px 0 #6a4206, 0 5px 10px rgba(0, 0, 0, 0.5), 0 0 18px rgba(255, 200, 80, 0.25); }
.medal.got .mdisc .i3d, .mchip .mdisc .i3d { opacity: 1; }
.mbar { width: 80%; height: 6px; margin-top: 4px; border-radius: 3px; overflow: hidden; background: #12161c; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8); }
.mbar i { display: block; height: 100%; background: linear-gradient(180deg, #8fd0ff, #3a88d8); }
.mval, .mdate { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 12px; color: var(--muted); }
.mdate { color: var(--gold); }
.mdisc.sm { width: 34px; height: 34px; margin: -4px 0 -4px -2px; }
.mdisc.sm .i3d { width: 22px; height: 22px; }

/* ---------- Sonuç: savaş raporu + yeni madalyalar ---------- */
#result .plate { max-width: 540px !important; }
.meta.report { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 4px 0 6px; text-align: left; }
.report .m { padding: 6px 8px; }
#resMedals h4 { margin: 12px 0 8px; font-family: 'Rajdhani', sans-serif; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); }
#resMedals .chips { justify-content: center; }
.chip.mchip { padding-left: 6px; border-left-color: var(--gold); }

/* ---------- Ateşkes özeti + harita yıldız sayacı ---------- */
.pinfo { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 12px 0 0; }
.pinfo span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 8px; font-size: 13px; color: #ccd4df;
  background: rgba(0, 0, 0, 0.3); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5); }
.pinfo .i3d { width: 20px; height: 20px; }
.phead-r { display: flex; align-items: center; gap: 12px; }
.starcount { display: inline-flex; align-items: center; gap: 2px; padding: 3px 12px 3px 6px; border-radius: 10px; font-family: 'Rajdhani', sans-serif; font-weight: 700;
  background: rgba(0, 0, 0, 0.32); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.45); }
.starcount .i3d { width: 26px; height: 26px; }
.starcount b { font-size: 20px; color: var(--gold); }
.starcount small { font-size: 14px; color: var(--muted); }

/* ---------- Onay penceresi (ekranların üstünde) ---------- */
#confirm { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(4, 5, 9, 0.66); perspective: 1200px; animation: fadein 0.2s ease; }
.cfplate { width: 100%; max-width: 440px; padding: 22px 26px 24px; text-align: center; animation: rise 0.35s cubic-bezier(.2, .9, .3, 1.2); }
#confirm:not(.safe) .stripe { background: repeating-linear-gradient(-45deg, #e04040 0 10px, #1b1f26 10px 20px); }
#cfTitle { margin: 16px 0 6px; font-family: 'Rajdhani', sans-serif; font-size: 24px; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5); }
#cfText { margin: 0; font-size: 14px; line-height: 1.5; color: #ccd4df; }
.cfplate .btns { justify-content: center; margin-top: 18px; }
.cfplate .btn3d { min-width: 130px; }

/* ---------- Emeği Geçenler ---------- */
.screen .credplate { max-width: 560px; text-align: center; }
.cred { padding: 0 6px 6px; }
.logo3d.small { margin: 4px 0 0; transform: none; animation: none; }
.logo3d.small .l1 { font-size: 44px; letter-spacing: 4px; }
.logo3d.small .l2 { font-size: 18px; letter-spacing: 6px; }
.cred .tag { margin: 10px 0 6px; font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: var(--muted); }
.cred h4 { display: flex; align-items: center; gap: 12px; margin: 18px 0 6px; font-family: 'Rajdhani', sans-serif; font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--accent); }
.cred h4::before, .cred h4::after { content: ''; flex: 1; height: 2px; border-radius: 1px; background: linear-gradient(90deg, transparent, rgba(255, 180, 58, 0.4)); }
.cred h4::after { transform: scaleX(-1); }
.cred p { margin: 4px 0; font-size: 14px; line-height: 1.5; color: #ccd4df; }
.cred p b { color: var(--text); }
.cred .note { max-width: 420px; margin: 8px auto 0; font-size: 12.5px; color: var(--muted); }

/* ---------- FPS ---------- */
#fps { position: fixed; z-index: 50; left: calc(14px + var(--sal)); top: calc(72px + var(--sat)); padding: 3px 9px; border-radius: 7px; pointer-events: none;
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 0.5px; color: #7fe68a;
  background: rgba(10, 13, 18, 0.75); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 3px 0 #06080b; }
#fps.ok { color: var(--gold); }
#fps.bad { color: var(--red); }
html.mobile #fps { top: auto; bottom: calc(10px + var(--sab)); left: calc(10px + var(--sal)); }

/* ---------- Dar pencere ---------- */
@media (max-width: 860px) {
  .cxwrap { grid-template-columns: minmax(0, 1fr) 300px; }
  .meta.ctiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .menugrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cxwrap { grid-template-columns: 1fr; }
  .cxdetail { position: static; }
  .meta.ctiles, .meta.report { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .setrow { flex-wrap: wrap; }
  .rank { flex-wrap: wrap; }
}

/* ---------- Kısa (yatay telefon) ekran ---------- */
@media (max-height: 520px) {
  .menugrid { gap: 8px; margin-top: 10px; }
  .btn3d.tile { min-height: 0; padding: 6px 4px; gap: 3px; font-size: 12.5px; --h: 4px; }
  .btn3d.tile .i3d { width: 24px; height: 24px; }
  .menuplate .audiotoggles { display: none; }
  .tabs { margin-bottom: 8px; }
  .tabs button { padding: 6px 4px; font-size: 14px; }
  .tabs button .i3d { width: 18px; height: 18px; }
  .tabpane { gap: 6px; }
  .setrow { gap: 12px; padding: 6px 12px; }
  .setlbl b { font-size: 15px; }
  .setlbl small { font-size: 11px; }
  .slider3d { width: 150px; }
  .seg button { padding: 6px 10px; font-size: 14px; }
  .setrow.col .seg button { padding: 7px 4px; }
  .cxwrap { grid-template-columns: minmax(0, 1fr) 290px; gap: 12px; }
  .cxlist { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 16px 10px; padding-top: 12px; }
  .cxcard { height: 86px; padding-bottom: 6px; }
  .cxcard img { top: -10px; width: 64px; height: 64px; }
  .cxcard span { font-size: 11px; }
  .cxdetail { min-height: 0; max-height: calc(100vh - 140px - var(--sat) - var(--sab)); overflow-y: auto; padding: 0 12px 12px; }
  .cxhero { height: 96px; }
  .cxhero img { width: 100px; height: 100px; }
  .cxhero::before { width: 130px; height: 32px; }
  .cxdetail h3 { font-size: 19px; }
  .cxdesc { font-size: 12px; }
  .rank { gap: 12px; margin-bottom: 8px; padding: 6px 12px; }
  .rankbadge { width: 50px; height: 50px; }
  .rankbadge .i3d { width: 32px; height: 32px; }
  .rankinfo > b { font-size: 19px; }
  .rbar { height: 8px; margin: 4px 0 2px; }
  .rankstars .i3d { width: 30px; height: 30px; }
  .rankstars b { font-size: 24px; }
  .rankstars small { font-size: 14px; }
  .sechead { margin: 12px 0 8px; }
  .medals { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
  .medal { padding: 8px 5px 7px; }
  .mdisc { width: 40px; height: 40px; }
  .mdisc .i3d { width: 26px; height: 26px; }
  .medal b { font-size: 12.5px; line-height: 1.1; }
  .medal small { font-size: 10px; }
  .report .m { padding: 4px 6px; }
  #resMedals h4 { margin: 6px 0 6px; }
  .pinfo { margin-top: 8px; }
  .pinfo span { font-size: 12px; padding: 3px 8px; }
  .cfplate { padding: 14px 20px 18px; }
  #cfTitle { margin-top: 10px; font-size: 20px; }
  #cfText { font-size: 13px; }
  .cfplate .btns { margin-top: 12px; }
  .logo3d.small .l1 { font-size: 30px; }
  .logo3d.small .l2 { font-size: 14px; }
  .cred h4 { margin: 12px 0 4px; }
  .cred p { font-size: 13px; }
}

/* ======================================================================
   HAREKÂTLAR, ZORLUK, SİLAH AYRINTISI, ERİŞİLEBİLİRLİK
   ====================================================================== */

/* ---------- Arayüz boyutu: plakalar CSS zoom ile birlikte büyür (--ui, platform.js) ---------- */
:root { --ui: 1; }
#topbar, #bottombar, #towerPanel, #bossBar, #toasts, #btnFit, #shopTip, #wavePop, #hint,
.screen > .plate, .screen > .stage, .cfplate { zoom: var(--ui); }
.screen .plate { max-height: calc((100vh - 40px) / var(--ui)); }

/* ---------- HUD: zorluk rozeti, dalga sayacı düğmesi, kalan düşman ---------- */
.diffpip { padding: 2px 7px; border-radius: 6px; font-family: 'Rajdhani', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 2px 0 rgba(0, 0, 0, 0.45); }
.diffpip.easy { background: linear-gradient(180deg, #3a8a48, #286a34); color: #d8ffde; }
.diffpip.hard { background: linear-gradient(180deg, #d0403a, #8a1a16); color: #ffe0d8; }
button.stat { border: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
button.stat:hover { filter: brightness(1.12); }
button.stat:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.eleft { display: inline-flex; align-items: center; gap: 1px; margin-left: 2px; padding: 1px 6px 1px 2px; border-radius: 7px; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 14px;
  color: #ffb0a0; background: rgba(0, 0, 0, 0.35); }
.eleft .i3d { width: 16px; height: 16px; margin: 0; }
#nextPreview .pv.boss { background: linear-gradient(180deg, #c8323a, #7a1218); color: #fff; letter-spacing: 1px; }
#nextPreview .pv .pvair, #wavePop .pv .pvair { width: 15px; height: 15px; margin: 0 0 0 2px; }
#wavePop { position: absolute; z-index: 12; width: 280px; padding: 10px 14px 12px; font-size: 13px; --depth: 5px; animation: tin 0.25s cubic-bezier(.2, 1.3, .4, 1); }
#wavePop .wphead { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-family: 'Rajdhani', sans-serif; font-size: 16px; }
#wavePop .wphead .i3d { width: 20px; height: 20px; }
#wavePop .wphead .tag { margin-left: auto; }
#wavePop p { margin: 4px 0 8px; color: #ccd4df; }
#wavePop small { display: flex; align-items: center; gap: 4px; color: var(--muted); }
#wavePop small .i3d { width: 16px; height: 16px; }
.pvchips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
#wavePop .pv { display: inline-flex; align-items: center; gap: 2px; padding: 2px 8px 2px 2px; border-radius: 8px; font-weight: 700; color: #dfe6ee;
  background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5); }
#wavePop .pv img { width: 34px; height: 34px; margin: -6px 0 -4px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6)); }
#wavePop .pv.boss { background: linear-gradient(180deg, #c8323a, #7a1218); color: #fff; letter-spacing: 1px; }

/* ---------- Saha Eğitimi ipucu ---------- */
#hint { position: absolute; z-index: 13; width: 300px; padding: 10px 14px 12px; font-size: 13.5px; line-height: 1.45; --depth: 5px; border-color: var(--accent);
  animation: tin 0.3s cubic-bezier(.2, 1.3, .4, 1); pointer-events: auto; }
#hint .hhead { display: flex; align-items: center; gap: 6px; font-family: 'Rajdhani', sans-serif; font-size: 15px; color: var(--accent); }
#hint .hhead small { color: var(--muted); font-size: 13px; }
#hint .hhead .btn3d { margin-left: auto; font-size: 12px; padding: 4px 9px; --h: 3px; }
#hint p { margin: 6px 0 0; color: #e4e9f0; }
#hint::after { content: ''; position: absolute; width: 14px; height: 14px; background: var(--plate-bot); border: 1px solid var(--accent); transform: rotate(45deg); }
#hint.at-shop { left: 24px; bottom: 156px; }
#hint.at-shop::after { left: 40px; bottom: -8px; border-top: none; border-left: none; }
#hint.at-wave { right: 16px; bottom: 156px; }
#hint.at-wave::after { right: 60px; bottom: -8px; border-top: none; border-left: none; }
#hint.at-map { left: 24px; bottom: 156px; }
#hint.at-map::after { display: none; }
#hint.at-panel { right: 322px; top: 190px; }
#hint.at-panel::after { right: -8px; top: 30px; border-bottom: none; border-left: none; }
html.mobile #hint { width: 250px; font-size: 12.5px; }
html.mobile #hint.at-shop { left: auto; bottom: auto; right: calc(var(--rail) + 18px + var(--sar)); top: calc(60px + var(--sat)); }
html.mobile #hint.at-shop::after, html.mobile #hint.at-wave::after { left: auto; bottom: auto; right: -8px; top: 24px; border: 1px solid var(--accent); border-bottom: none; border-left: none; }
html.mobile #hint.at-wave { right: calc(var(--rail) + 18px + var(--sar)); bottom: calc(12px + var(--sab)); }
html.mobile #hint.at-wave::after { top: auto; bottom: 22px; }
html.mobile #hint.at-map { left: calc(8px + var(--sal)); bottom: calc(8px + var(--sab)); }
html.mobile #hint.at-panel { right: auto; left: calc(252px + var(--sal)); top: calc(60px + var(--sat)); }
html.mobile #hint.at-panel::after { right: auto; left: -8px; border: 1px solid var(--accent); border-top: none; border-right: none; }

/* ---------- Cephe haritası: harekât sekmeleri ---------- */
.lsplate .phead { margin-bottom: 10px; }
.camptabs { margin-bottom: 10px; }
.camptabs button { justify-content: flex-start; gap: 10px; padding: 7px 12px; text-align: left; }
.camptabs button .i3d { width: 26px; height: 26px; opacity: 0.6; }
.ctname { display: flex; flex-direction: column; line-height: 1.05; font-size: 17px; }
.ctname small { font-family: 'Inter', sans-serif; font-size: 11.5px !important; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; opacity: 0.8; }
.ctstars { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; padding: 2px 9px 2px 4px; border-radius: 8px; background: rgba(0, 0, 0, 0.3); font-size: 15px; color: var(--gold); }
.ctstars .i3d { width: 18px !important; height: 18px !important; opacity: 1 !important; }
.ctstars small { color: var(--muted); font-size: 12px; }
.camptabs button.locked:not(.on) { color: #6f7a88; }
.campinfo { margin: 0 2px 14px; }
.campintro { margin: 0; font-size: 13.5px; line-height: 1.55; color: #c2cad5; cursor: pointer; }
.campintro b { color: var(--accent); }
.camplock { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 10px; border-radius: 9px; font-size: 13px; color: #ffd0a0;
  background: rgba(232, 169, 32, 0.1); box-shadow: inset 0 0 0 1px rgba(232, 169, 32, 0.25); }
.camplock .i3d { width: 20px; height: 20px; }
.lvlcard .bosstag { top: -8px; left: 8px; z-index: 2; }
.diffbadge { position: absolute; top: -8px; right: 8px; z-index: 2; display: flex; align-items: center; gap: 3px; padding: 2px 8px 2px 3px; border-radius: 6px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; transform: translateZ(60px) rotate(3deg); pointer-events: none;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.45), 0 5px 6px rgba(0, 0, 0, 0.4); }
.diffbadge .i3d { width: 17px; height: 17px; margin: -3px 0; }
.diffbadge.hard { background: linear-gradient(180deg, #ffcf6a, #e6942a); color: #2a1600; }
.diffbadge.easy { background: linear-gradient(180deg, #3a8a48, #286a34); color: #d8ffde; }
html.mobile .lvlcard .diffbadge, html.mobile .lvlcard .bosstag { transform: none; }

/* ---------- Brifing: harekât etiketi, zorluk seçici, en iyi sonuç ---------- */
#briefing h2 { display: flex; flex-direction: column; line-height: 1.05; }
.camptag { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); text-shadow: none; }
#briefBest { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 2px 0 10px; }
#briefBest .i3d { width: 17px; height: 17px; }
.starrule { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; color: var(--muted); }
.diffbox { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 10px; border-radius: 10px; margin: 4px 0 6px;
  background: rgba(0, 0, 0, 0.22); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35); }
.difflbl { flex: 1 1 180px; min-width: 0; }
.difflbl b { display: block; font-family: 'Rajdhani', sans-serif; font-size: 16px; }
.difflbl small { display: block; font-size: 11.5px; line-height: 1.35; color: var(--muted); }
.diffseg { flex: 0 0 auto; }
.diffseg button[data-v="easy"].on { background: linear-gradient(180deg, #4aa85a, #2c7a3c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 0 #174a20, 0 3px 4px rgba(0, 0, 0, 0.4); }
.diffseg button[data-v="hard"].on { background: linear-gradient(180deg, #e0504a, #a02420); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 0 #5a0e0a, 0 3px 4px rgba(0, 0, 0, 0.4); }
.only-mobile-i { display: none; }
html.mobile .only-mobile-i { display: inline; }

/* ---------- Ateşkes: iki sütunlu düğmeler ---------- */
.btns.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.btns.grid2 .btn3d { font-size: 15px; padding: 10px 8px; }
.btns.grid2 .span2 { grid-column: span 2; }
.pinfo .pdiff.easy b { color: #8fe89a; }
.pinfo .pdiff.hard b { color: #ff8a80; }
.pinfo .rec b { color: var(--gold); }
#resInfo { margin: 4px 0 0; }

/* ---------- Ayarlar: kaydırılabilir sekmeler, kontrol listesi, sürüm ---------- */
.screen .setplate { max-width: 780px; }
.tabs { overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: 1 0 auto; }
.seg.dim { opacity: 0.45; }
.ctllist { display: grid; gap: 10px; }
.ctlgrp { padding: 8px 12px 10px; border-radius: 12px; background: rgba(0, 0, 0, 0.22); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35); }
.ctlgrp h4 { display: flex; align-items: center; gap: 6px; margin: 2px 0 8px; font-family: 'Rajdhani', sans-serif; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); }
.ctlgrp h4 .i3d { width: 18px; height: 18px; }
.ctlgrp h4 small { color: var(--muted); letter-spacing: 0.5px; text-transform: none; font-size: 12px; }
.ctlrows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; }
.ctlrow { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 10px; font-size: 13px; color: #ccd4df; }
.ctlrow .caps { display: flex; align-items: center; flex-wrap: wrap; gap: 3px; color: var(--muted); }
.ctlrow kbd { min-width: 24px; }
.ctlrow small { color: var(--muted); }
.ctllist .hint { margin: 0; font-size: 12px; color: var(--muted); }
.vertext { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 17px; color: var(--accent); }
.keys-help kbd { margin: 0 1px; }

/* ---------- Kule paneli: geliştirilebilir durumu, değer farkları, özellikler ---------- */
.readytag { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; padding: 1px 7px 1px 3px; border-radius: 6px; font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.8px; text-transform: uppercase; color: #12300f; background: linear-gradient(180deg, #b6ff8a, #4fd05a);
  box-shadow: 0 2px 0 #1a5a26, 0 0 12px rgba(120, 255, 120, 0.45); animation: readyPulse 1.2s ease-in-out infinite; }
.readytag .i3d { width: 14px !important; height: 14px !important; }
.readytag.max { color: #2a1600; background: linear-gradient(180deg, #ffe08a, #e6a520); box-shadow: 0 2px 0 #7a4e06; animation: none; padding-left: 7px; }
@keyframes readyPulse { 50% { box-shadow: 0 2px 0 #1a5a26, 0 0 20px rgba(150, 255, 120, 0.8); filter: brightness(1.15); } }
#tpUp.ready { animation: upPulse 1.2s ease-in-out infinite; }
@keyframes upPulse { 50% { filter: brightness(1.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -3px 0 rgba(0, 0, 0, 0.18), 0 6px 0 var(--side), 0 7px 0 rgba(0, 0, 0, 0.6), 0 0 22px rgba(120, 255, 120, 0.65); } }
#tpUp .short { margin-left: 4px; font-size: 12px; color: #ff8a80; }
#tpSell.armed { --face: #d0503a; --side: #6a1a10; --ink: #fff; animation: upPulse 0.6s ease-in-out infinite; }
.sr.dps span { color: var(--gold); font-weight: 700; }
.sr.dps .sbar .cur { background: linear-gradient(180deg, #ffe08a, #e6942a); }
.sr em i { font-style: normal; font-size: 11px; color: #7fe68a; opacity: 0.85; }
#towerPanel .sr { grid-template-columns: 64px minmax(30px, 1fr) auto; }
.tpnote { display: flex; gap: 5px; margin: -2px 0 8px; font-size: 11.5px; line-height: 1.4; color: #b8c2cf; }
.tpnote b { color: var(--gold); }
.tpnote .i3d { width: 16px; height: 16px; flex: 0 0 auto; }
.traits2 { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0; }
.traits2 span { padding: 2px 8px; border-radius: 7px; font-size: 11px; font-weight: 700; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.45); }
.traits2 .y { background: linear-gradient(180deg, #34506e, #243a52); color: #cfe6ff; }
.traits2 .n { background: linear-gradient(180deg, #5a2a2a, #3e1c1c); color: #ffb0a6; }
.tpinv small { color: var(--muted); }
html.mobile #towerPanel .sr { grid-template-columns: 54px minmax(24px, 1fr) auto; }

/* ---------- Mağaza: geliştirilebilir kule rozeti + bilgi kartı tablosu ---------- */
#shop .card .upbadge { position: absolute; top: 4px; right: 4px; z-index: 2; display: inline-flex; align-items: center; gap: 1px; padding: 1px 6px 1px 2px; border-radius: 8px;
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 13px; color: #12300f; transform: translateZ(26px);
  background: linear-gradient(180deg, #b6ff8a, #4fd05a); box-shadow: 0 2px 0 #1a5a26, 0 0 10px rgba(120, 255, 120, 0.5); animation: readyPulse 1.4s ease-in-out infinite; }
#shop .card .upbadge .i3d { width: 15px; height: 15px; margin: 0; }
html.mobile #shop .card .upbadge { top: 2px; right: 2px; transform: none; }
.tiptab { width: 100%; border-collapse: collapse; margin: 6px 0 4px; font-size: 12px; }
.tiptab th, .tiptab td { padding: 2px 4px; text-align: right; font-weight: 600; }
.tiptab th:first-child { text-align: left; color: var(--muted); font-weight: 600; }
.tiptab thead th { font-family: 'Rajdhani', sans-serif; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.tiptab thead .i3d { width: 14px; height: 14px; margin: -2px 2px 0 0; }
.tiptab td { font-family: 'Rajdhani', sans-serif; font-size: 14px; }
.tiptab .mx { color: #7fe68a; }
.tiptab tr.dps th, .tiptab tr.dps td:not(.mx) { color: var(--gold); }
#shopTip .tipcost { margin: 4px 0 6px; }
html.mobile #shopTip.docked { max-height: calc(100vh - 66px - var(--sat) - var(--sab)); overflow: hidden; }
html.mobile #shopTip.docked > p:first-of-type, html.mobile #shopTip.docked .traits2, html.mobile #shopTip.docked .tipcost { display: none; }

/* ---------- İstihbarat Arşivi: üç seviye yan yana ---------- */
.cxlvls { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding-top: 10px; }
.cxlvls::before { content: ''; position: absolute; left: 10%; right: 10%; bottom: 18px; height: 40px; border-radius: 50%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--c, #7d8898) 45%, transparent), transparent 70%); }
.cxlv { position: relative; display: flex; flex-direction: column; align-items: center; }
.cxlv img { width: 100%; max-width: 108px; aspect-ratio: 1; filter: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.6)); }
.cxlv b { display: inline-flex; align-items: center; gap: 2px; font-family: 'Rajdhani', sans-serif; font-size: 13px; color: #dfe6ee; }
.cxlv .i3d { width: 14px; height: 14px; }
.cxcmp { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 12px; }
.cxcmp th, .cxcmp td { padding: 3px 4px; text-align: right; white-space: nowrap; }
.cxcmp thead th { font-family: 'Rajdhani', sans-serif; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.cxcmp tbody th { text-align: left; font-weight: 600; color: var(--muted); }
.cxcmp td { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 14px; }
.cxcmp td i { display: block; font-style: normal; font-size: 10.5px; line-height: 1; color: #7fe68a; }
.cxcmp tr:nth-child(even) td, .cxcmp tr:nth-child(even) th { background: rgba(255, 255, 255, 0.025); }
.cxcmp tr.dps th, .cxcmp tr.dps td { color: var(--gold); }
.cxcmp tr.sep th, .cxcmp tr.sep td { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.cxcmp tr.eff td { color: #8fd0ff; }

/* ---------- Kısa (yatay telefon) ekran ---------- */
@media (max-height: 520px) {
  .camptabs button { padding: 4px 10px; }
  .camptabs button .i3d { width: 20px; height: 20px; }
  .ctname { font-size: 14px; }
  .ctname small { font-size: 10px !important; }
  .ctstars { font-size: 13px; }
  .campinfo { margin-bottom: 12px; }
  .campintro { font-size: 12px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .campintro.open { display: block; }
  .camplock { margin-top: 6px; padding: 4px 8px; font-size: 11.5px; }
  .diffbadge { font-size: 8.5px; padding: 1px 5px 1px 2px; }
  .diffbadge .i3d { width: 13px; height: 13px; }
  .lvlcard .bosstag { font-size: 8.5px; padding: 2px 5px; }
  .lvlcard .bosstag .i3d { width: 14px; height: 14px; }
  .diffbox { padding: 5px 8px; gap: 8px; margin: 2px 0 4px; }
  .difflbl b { font-size: 14px; }
  .difflbl small { font-size: 10.5px; }
  .diffseg button { padding: 5px 10px; font-size: 13px; }
  #briefBest { margin: 0 0 6px; font-size: 11.5px; }
  .camptag { font-size: 10px; }
  .btns.grid2 { gap: 8px; margin-top: 8px; }
  .btns.grid2 .btn3d { font-size: 13px; padding: 7px 6px; --h: 4px; }
  .ctlrows { grid-template-columns: 1fr; }
  .ctlrow { grid-template-columns: 96px 1fr; font-size: 12px; }
  .cxlv img { max-width: 76px; }
  .cxcmp { font-size: 11px; }
  .cxcmp td { font-size: 12.5px; }
  .tiptab td { font-size: 13px; }
  #wavePop { width: 250px; }
}
@media (max-width: 640px) {
  .ctlrows { grid-template-columns: 1fr; }
  .diffbox { flex-direction: column; align-items: stretch; }
}

/* ---------- Hareketi Azalt: animasyon, geçiş ve eğilmeler kapanır ---------- */
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after {
  animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
  transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
html.reduce-motion .lvlcard, html.reduce-motion #shop .card { transform: none !important; }
html.reduce-motion .lvlcard:hover:not(.locked) .diorama, html.reduce-motion #shop .card:hover:not(.locked) > img { transform: translateX(0); }
html.reduce-motion .lvlcard .diorama { transform: none; }
html.reduce-motion #shop .card > img { transform: translateX(-50%) !important; }

/* ---------- Yüksek kontrastlı metin ---------- */
html.hi-contrast { --muted: #c9d3df; }
html.hi-contrast .story, html.hi-contrast .cxdesc, html.hi-contrast #shopTip p, html.hi-contrast .tpline, html.hi-contrast ul.help,
html.hi-contrast .campintro, html.hi-contrast .tpnote, html.hi-contrast .ctlrow, html.hi-contrast #cfText { color: #f2f5f9; }
html.hi-contrast .setlbl small, html.hi-contrast .meta small, html.hi-contrast .stat small, html.hi-contrast .sr span,
html.hi-contrast .difflbl small, html.hi-contrast .medal small, html.hi-contrast .tabs button { font-weight: 700; }
html.hi-contrast .tabs button:not(.on), html.hi-contrast .seg button:not(.on), html.hi-contrast .modes button:not(.on) { color: #dfe6ee; }
html.hi-contrast .toast, html.hi-contrast .float { text-shadow: 0 1px 0 #000, 0 0 4px #000; }
html.hi-contrast .plate { border-color: #8a96a8; }

/* ---------- Arayüz boyutu: zoom'lu öğelerde vh/vw de büyüdüğü için yükseklik sınırları --ui'ye bölünür ----------
   Yalnız ekran payı (vh, ekran kenar boşluğu, çentik) bölünür; zoom'lu komşu plakaların payı (üst/alt bar, başlık) zaten büyüdüğünden çıkarılır */
#towerPanel { max-height: calc(100vh / var(--ui) - 230px); }
#bossBar { width: min(560px, calc((100vw - 340px) / var(--ui))); }
html.mobile #bossBar { width: min(400px, calc((100vw - var(--rail) - 300px) / var(--ui))); }
html.mobile #shopTip.docked { max-height: calc((100vh - var(--sab)) / var(--ui) - 66px - var(--sat)); }
html.mobile .toast { max-width: calc(60vw / var(--ui)); }
@media (max-height: 520px) {
  .screen .plate { max-height: calc((100vh - 16px - var(--sat) - var(--sab)) / var(--ui)); }
  #briefing .brief > div:last-child { max-height: calc((100vh - 16px - var(--sat) - var(--sab)) / var(--ui) - 76px); }
  .cxdetail { max-height: calc((100vh - 16px - var(--sat) - var(--sab)) / var(--ui) - 124px); }
  .brief .diorama { max-height: calc(52vh / var(--ui)); }
}

/* ---------- Ana menü: logo + plaka büyük arayüz boyutunda ekrana sığmazsa sayfa kaydırılır (ortalama üstü kesmesin) ---------- */
#menu { overflow-x: hidden; overflow-y: auto; padding-top: var(--sat); padding-bottom: var(--sab); scrollbar-width: none; }
#menu::-webkit-scrollbar { display: none; }
#menu > .stage { margin: auto 0; }

/* ---------- Üst bar dar pencerede: önce cephe adı kısalır; yine sığmazsa (UI.fitTopbar) etiketler gizlenir, bar küçülür ---------- */
.lvlplate { min-width: 0; }
.lvlplate .num { flex: 0 0 auto; }
#hudLevel { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#topbar.tight #hudLevel, #topbar.tight .stat small, #topbar.tight .lifebar { display: none; }

/* ---------- Dil seçimi: ilk açılış penceresi ve Ayarlar > Oynanış ---------- */
.langgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; }
.langgrid .btn3d { padding: 10px 8px; font-size: 16px; justify-content: center; min-width: 0; }
.langgrid .btn3d.on { outline: 2px solid var(--accent); outline-offset: 2px; }
.setrow .setctl:has(.langgrid) { width: 100%; }
#langPick { position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: radial-gradient(ellipse at center, rgba(8, 10, 16, 0.55), rgba(4, 5, 9, 0.92)); }
#langPick .plate { width: 100%; max-width: 560px; padding: 24px 26px 28px; text-align: center; zoom: var(--ui); }
#langPick .lpglobe { font-size: 40px; line-height: 1; margin: 6px 0 4px; }
#langPick h2 { margin: 4px 0 2px; }
#langPick .lpsub { margin: 0 0 16px; font-size: 13px; color: var(--muted); }
@media (max-width: 520px) { .langgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- SEO: ekran okuyucu ve arama motorları için tanıtım; JS kapalıysa görünür bilgi ---------- */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.noscript { position: fixed; inset: 0; z-index: 200; overflow: auto; padding: 32px 20px; background: #0b0e13; color: #e8ecf2; font: 16px/1.55 Inter, system-ui, sans-serif; }
.noscript h1 { margin: 0 0 12px; font: 700 28px/1.2 'Russo One', Inter, sans-serif; }
.noscript a { color: #ffc24a; }