:root {
  --bg: #10141c;
  --panel: #1b2230;
  --line: #334155;
  --text: #f1f5f9;
  --muted: #94a3b8;
  --cat: #f59e0b;
  --dog: #38bdf8;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
}

button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }

#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* ---- seçim ve bitiş ekranları ---- */
.screen {
  position: fixed; inset: 0; z-index: 20;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(6px, 2vh, 18px);
  padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: radial-gradient(ellipse at 50% 30%, #243049 0%, var(--bg) 70%);
  overflow: auto;
}
.screen h1 { margin: 0; font-size: clamp(26px, 7vh, 56px); letter-spacing: .02em; }
.screen h2 { margin: 0; font-size: clamp(18px, 5vh, 30px); }
.lead { margin: 0; color: var(--muted); font-size: clamp(14px, 3.4vh, 20px); }

.sides { display: flex; align-items: center; gap: clamp(10px, 3vw, 36px); }
.vs { font-weight: 800; font-size: clamp(18px, 5vh, 34px); color: var(--muted); }
.side {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: clamp(150px, 30vw, 300px);
  padding: clamp(8px, 2.5vh, 22px) 12px;
  background: var(--panel); border: 3px solid var(--line); border-radius: 18px;
  transition: transform .12s, border-color .12s;
}
.side .face { width: clamp(70px, 26vh, 170px); height: clamp(70px, 26vh, 170px); }
.side strong { font-size: clamp(18px, 5vh, 30px); }
.side span { color: var(--muted); font-size: clamp(11px, 2.8vh, 15px); text-align: center; }
.side.cat:hover, .side.cat:active { border-color: var(--cat); transform: scale(1.03); }
.side.dog:hover, .side.dog:active { border-color: var(--dog); transform: scale(1.03); }
.side.cat strong { color: var(--cat); }
.side.dog strong { color: var(--dog); }

#heroList {
  display: flex; gap: 10px; max-width: 100%;
  overflow-x: auto; padding: 4px 2px 8px; touch-action: pan-x;
}
.hero {
  flex: 0 0 auto; width: clamp(128px, 17vw, 190px);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px; text-align: center;
  background: var(--panel); border: 2px solid var(--line); border-radius: 14px;
}
.hero:hover, .hero:active { border-color: var(--accent); }
.hero canvas { width: clamp(44px, 14vh, 84px); height: clamp(44px, 14vh, 84px); }
.hero b { font-size: clamp(14px, 3.6vh, 19px); }
.hero .role { color: var(--accent); font-size: 12px; font-weight: 600; }
.hero .desc { color: var(--muted); font-size: 11px; line-height: 1.25; min-height: 2.5em; }
.hero .abs { font-size: 11px; line-height: 1.35; color: var(--text); }

.plain { background: none; border: 0; color: var(--muted); padding: 6px 10px; font-size: 14px; }
.primary {
  background: var(--cat); color: #1c1917; font-weight: 700; font-size: 18px;
  border: 0; border-radius: 12px; padding: 12px 28px;
}

/* ---- oyun içi arayüz ---- */
#hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
#hud > * { pointer-events: auto; }

#score {
  position: absolute; top: max(8px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  display: flex; gap: 14px; align-items: center;
  padding: 5px 16px; border-radius: 999px;
  background: rgba(15, 23, 42, .78); font-weight: 700; font-size: 16px;
  font-variant-numeric: tabular-nums; pointer-events: none;
}
#score .c { color: var(--cat); }
#score .d { color: var(--dog); }
#score .t { color: var(--muted); font-weight: 500; }

#feed {
  position: absolute; top: max(8px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right));
  display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
  font-size: 12px; pointer-events: none;
}
#feed div { padding: 2px 8px; border-radius: 6px; background: rgba(15, 23, 42, .72); border-left: 3px solid; }

#status {
  position: absolute; left: 50%; bottom: max(8px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(280px, 34vw); padding: 6px 10px; border-radius: 12px;
  background: rgba(15, 23, 42, .78); pointer-events: none;
}
#statusTop { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; gap: 6px; }
#statusName { font-size: 13px; font-weight: 600; white-space: nowrap; }
#slots { font-size: 12px; letter-spacing: 1px; white-space: nowrap; }

#shopBtn {
  position: absolute; top: max(10px, env(safe-area-inset-top));
  left: calc(max(130px, min(220px, 20vw)) + 20px);
  padding: 6px 12px; border-radius: 999px; border: 2px solid rgba(255, 255, 255, .3);
  background: rgba(15, 23, 42, .82); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums;
}
#shopBtn.on { border-color: #facc15; box-shadow: 0 0 10px rgba(250, 204, 21, .55); }

#shop {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5;
  width: min(620px, 94vw); max-height: 92vh; display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px; border-radius: 14px; border: 2px solid var(--line);
  background: rgba(15, 23, 42, .96);
}
#shopHead { display: flex; align-items: center; gap: 12px; font-size: 16px; }
#shopGold { color: #facc15; font-weight: 700; margin-right: auto; }
#shopClose { background: none; border: 0; font-size: 20px; padding: 2px 8px; }
#shopNote { font-size: 12px; color: var(--muted); min-height: 1.2em; }
#shopList {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 6px;
  overflow-y: auto; touch-action: pan-y;
}
.item {
  display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px;
  background: var(--panel); border: 2px solid var(--line); border-radius: 10px; text-align: center;
}
.item .ic { font-size: 20px; line-height: 1.1; }
.item b { font-size: 12px; }
.item .ds { font-size: 10px; color: var(--muted); line-height: 1.2; min-height: 2.4em; }
.item .ct { font-size: 12px; font-weight: 700; color: #facc15; }
.item.can { border-color: #facc15; }
.item.own { border-color: #22c55e; opacity: .75; }
.item.own .ct { color: #4ade80; }
.item.no { opacity: .45; }
.bar { position: relative; height: 15px; border-radius: 5px; background: #0b1220; overflow: hidden; }
.bar.thin { height: 5px; margin-top: 3px; }
#hpFill { height: 100%; background: #22c55e; }
#xpFill { height: 100%; background: #a78bfa; }
#hpText { position: absolute; inset: 0; text-align: center; font-size: 11px; line-height: 15px; font-weight: 600; }

#stickZone { position: absolute; left: 0; bottom: 0; width: 45%; height: 72%; }
#stick {
  position: absolute; width: 124px; height: 124px; margin: -62px 0 0 -62px;
  border-radius: 50%; background: rgba(255, 255, 255, .1); border: 2px solid rgba(255, 255, 255, .3);
  pointer-events: none;
}
#knob {
  position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px;
  border-radius: 50%; background: rgba(255, 255, 255, .55);
}

#pad {
  position: absolute; right: max(14px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom));
  width: 210px; height: 200px;
}
#pad button {
  position: absolute; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .45);
  background: rgba(15, 23, 42, .8); display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0; overflow: hidden;
}
#pad button:active { transform: scale(.93); }
#btnAtk { right: 0; bottom: 0; width: 88px; height: 88px; font-size: 34px; border-color: #f87171; }
.ab { width: 64px; height: 64px; }
.ab[data-i="0"] { right: 104px; bottom: 0; }
.ab[data-i="1"] { right: 92px; bottom: 80px; }
.ab[data-i="2"] { right: 10px; bottom: 104px; }
.ab .ic { font-size: 22px; line-height: 1; }
.ab .nm { font-size: 8.5px; line-height: 1.05; max-width: 56px; text-align: center; color: var(--muted); }
.ab .cd {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(2, 6, 23, .78); font-size: 22px; font-weight: 700;
}

#hint {
  position: absolute; left: 12px; bottom: 10px; font-size: 12px; color: rgba(255, 255, 255, .6);
  pointer-events: none;
}
@media (pointer: coarse) { #hint { display: none; } }

#dead {
  position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%);
  padding: 10px 22px; border-radius: 12px; background: rgba(2, 6, 23, .82);
  font-size: 18px; font-weight: 600; text-align: center; pointer-events: none;
}

/* Dar ve dik ekranda oyun yatay tutulmalı. */
#rotate {
  display: none; position: fixed; inset: 0; z-index: 50; background: var(--bg);
  align-items: center; justify-content: center; text-align: center; font-size: 22px; line-height: 1.6;
}
@media (orientation: portrait) and (max-width: 700px) { #rotate { display: flex; } }

/* ---- takas, gizli saldırı, kasa ve mağaza ---- */
#shopHead .tab {
  background: none; border: 0; border-bottom: 2px solid transparent; padding: 4px 8px;
  font-size: 14px; color: var(--muted); font-weight: 600;
}
#shopHead .tab.on { color: var(--text); border-color: #facc15; }
#tradeBox { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; touch-action: pan-y; }
.mates { display: flex; gap: 6px; flex-wrap: wrap; }
.mate {
  flex: 1 1 120px; padding: 5px 6px; font-size: 12px; text-align: left; line-height: 1.3;
  background: var(--panel); border: 2px solid var(--line); border-radius: 10px;
}
.mate.on { border-color: #facc15; }
.mate small { display: block; color: var(--muted); }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cols h4 { margin: 0 0 4px; font-size: 12px; color: var(--muted); font-weight: 600; }
.deal {
  display: flex; justify-content: space-between; align-items: center; gap: 6px; width: 100%;
  margin-bottom: 4px; padding: 5px 8px; font-size: 12px; text-align: left;
  background: var(--panel); border: 2px solid var(--line); border-radius: 8px;
}
.deal.ok { border-color: #facc15; }
.deal.no { opacity: .5; }
.deal small { color: var(--muted); white-space: nowrap; }
.deal b { color: #facc15; white-space: nowrap; }
.empty { font-size: 12px; color: var(--muted); padding: 4px 0; }

#btnSneak { right: 166px; bottom: 74px; width: 56px; height: 56px; border-color: #c084fc; }
#btnSneak .ic { font-size: 20px; line-height: 1; }
#btnSneak .nm { font-size: 8.5px; color: #facc15; font-weight: 700; }
#btnSneak .cd {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(2, 6, 23, .78); font-size: 18px; font-weight: 700;
}
#btnSneak.no { opacity: .55; }

.walletBtn {
  position: absolute; top: max(10px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right));
  padding: 7px 14px; border-radius: 999px; border: 2px solid #facc15;
  background: var(--panel); font-weight: 700; font-size: 14px;
}
#packList { display: flex; gap: 10px; max-width: 100%; overflow-x: auto; padding: 4px 2px 8px; touch-action: pan-x; }
.pack {
  flex: 0 0 auto; width: clamp(124px, 16vw, 170px);
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 8px;
  background: var(--panel); border: 2px solid var(--line); border-radius: 14px; text-align: center;
}
.pack:hover, .pack:active { border-color: #facc15; }
.pack .ic { font-size: clamp(22px, 8vh, 40px); line-height: 1.1; }
.pack b { font-size: 14px; }
.pack .amt { font-size: 17px; font-weight: 800; color: #facc15; }
.pack .bonus { font-size: 11px; color: #4ade80; min-height: 1.3em; }
.pack .price {
  margin-top: 4px; padding: 5px 12px; border-radius: 8px; background: #facc15; color: #1c1917;
  font-weight: 800; font-size: 14px;
}

/* ---- görünüm mağazası ---- */
#screenStore { justify-content: flex-start; touch-action: pan-y; gap: 6px; }
.sub { margin: 4px 0 0; font-size: 14px; color: var(--muted); font-weight: 600; align-self: center; }
#cosList { display: flex; gap: 10px; max-width: 100%; overflow-x: auto; padding: 4px 2px 8px; touch-action: pan-x; }
/* Listeler dikeyde sıkışmasın; ekran aşağı doğru kaydırılır. */
#cosList, #packList { flex: 0 0 auto; }
#screenStore .pack { padding: 6px 8px; }
.pack canvas { width: 60px; height: 60px; }
.pack.on { border-color: #22c55e; }
.pack.no { opacity: .55; }
#btnSneak.ready { border-color: #facc15; box-shadow: 0 0 12px rgba(250, 204, 21, .7); }

/* ---- demo (seyirci) modu ---- */
.demoBtn {
  border: 2px solid var(--line); border-radius: 999px; padding: 8px 18px;
  background: var(--panel); font-weight: 600; font-size: 14px;
}
.demoBtn:hover, .demoBtn:active { border-color: #facc15; }
#demoBar {
  display: none; position: absolute; left: 50%; bottom: max(10px, env(safe-area-inset-bottom));
  transform: translateX(-50%); gap: 8px; align-items: center; padding: 6px 10px; border-radius: 999px;
  background: rgba(15, 23, 42, .85); font-size: 13px; font-weight: 600; white-space: nowrap;
}
#hud.demo #demoBar { display: flex; }
#demoBar button {
  border: 2px solid var(--line); background: var(--panel); border-radius: 999px;
  padding: 4px 12px; font-weight: 700; font-size: 13px;
}
#hud.demo #pad, #hud.demo #stickZone, #hud.demo #stick, #hud.demo #status, #hud.demo #shopBtn,
#hud.demo #hint, #hud.demo #dead, #hud.demo #shop { display: none !important; }

/* ---- zıpla ve eğil düğmeleri ---- */
#pad .act { width: 56px; height: 56px; border-color: #4ade80; }
#btnJump { right: 94px; bottom: 152px; }
#btnCrouch { right: 160px; bottom: 138px; }
#pad .act .ic { font-size: 20px; line-height: 1; }
#pad .act .nm { font-size: 9px; color: var(--text); font-weight: 700; }
#btnCrouch.on { background: #166534; border-color: #bbf7d0; }

.brand { margin: -4px 0 0; font-size: clamp(11px, 2.8vh, 15px); font-weight: 800; letter-spacing: .35em; color: #facc15; }

/* ---- esir ekranı ve maç sonu ödülü ---- */
#leaveBtn {
  position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%);
  padding: 8px 16px; border-radius: 999px; border: 2px solid var(--line);
  background: rgba(15, 23, 42, .9); font-size: 13px; font-weight: 600;
}
#hud.demo #leaveBtn { display: none !important; }
#endReward { color: #facc15; font-weight: 600; }
#score .p { color: var(--muted); font-weight: 500; font-size: 12px; }

/* ---- gizli saldırı hedef seçimi ---- */
#sneakPick {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6;
  width: min(460px, 92vw); max-height: 92vh; overflow-y: auto; touch-action: pan-y;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  padding: 10px 12px; border-radius: 14px; border: 2px solid #c084fc; background: rgba(15, 23, 42, .96);
}
#sneakPick strong { grid-column: 1 / -1; font-size: 15px; }
#sneakPick .tg {
  display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; font-size: 13px; text-align: left;
  background: var(--panel); border: 2px solid var(--line); border-radius: 10px;
}
#sneakPick .tg.ok { border-color: #facc15; }
#sneakPick .tg.no { opacity: .45; }
#sneakPick .tg.wide { grid-column: 1 / -1; }
#sneakPick .tg small { color: var(--muted); white-space: nowrap; }
#sneakPick .tg.save small { color: #4ade80; font-weight: 700; }
#hud.demo #sneakPick { display: none !important; }

/* ---- giriş ekranı: alt başlık ve marka logosu ---- */
.tagline { margin: -6px 0 0; font-size: clamp(15px, 4.4vh, 26px); font-weight: 800; letter-spacing: .12em; color: #facc15; }
.logo {
  position: absolute; left: 50%; bottom: max(8px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  font-size: clamp(11px, 2.8vh, 14px); font-weight: 800; letter-spacing: .3em; color: var(--text); white-space: nowrap;
}
.logo span { font-weight: 500; letter-spacing: .08em; color: var(--muted); }
.logo { display: flex; align-items: center; gap: 8px; }
.logo img { width: clamp(20px, 6vh, 30px); height: clamp(20px, 6vh, 30px); }