/* ============================================================
   Mini Zombie Shooters — style.css
   Sabit 16:9 sahne, responsive HUD, mobil joystick.
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  background: #0a0a0a;
  overflow: hidden;
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

/* Sahne kabuğu: ekranı doldurur, içindeki stage'i ortalar */
#game-shell {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sabit 16:9 oyun alanı — viewport'a sığan en büyük 16:9 dikdörtgen (letterbox).
   aspect-ratio sayesinde ölçek doğru; tile'lar dev görünmez. */
#game-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  overflow: hidden;
  background: #101810;
  box-shadow: 0 0 40px rgba(0,0,0,.6);
}

#game-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* HUD / ekranlar canvas üstünde katman */
.ui-layer {
  position: absolute;
  inset: 0;
  pointer-events: none; /* alt katmanlar tıklamayı yutmasın; butonlar tek tek açar */
}
.ui-layer button,
.ui-layer .joystick { pointer-events: auto; }

.hidden { display: none !important; }

/* ===================== HUD ÜST ÇUBUK ===================== */
#hud {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 14px 16px;
  gap: 12px;
}

.hud-left, .hud-right, .hud-center {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hud-center {
  position: absolute;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  color: #fff;
  font-size: clamp(18px, 3.4vw, 30px);
  font-weight: bold;
  text-shadow: 0 2px 4px rgba(0,0,0,.6);
}
.hud-center .crosshair { font-size: 1.1em; opacity: .9; }

.hud-icon {
  width: clamp(38px, 6vw, 54px);
  height: clamp(38px, 6vw, 54px);
  border: none;
  border-radius: 14px;
  background: #6c5a8c;
  color: #fff;
  font-size: clamp(18px, 3vw, 26px);
  cursor: pointer;
  box-shadow: 0 4px 0 #4a3c63;
  transition: transform .05s, filter .1s;
}
.hud-icon:active { transform: translateY(2px); box-shadow: 0 2px 0 #4a3c63; }
.hud-icon.off { filter: grayscale(1) brightness(.7); }

/* Can barı */
.health-bar {
  width: clamp(120px, 26vw, 320px);
  height: clamp(22px, 3.4vw, 34px);
  background: #3a1414;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.5);
}
.health-fill {
  width: 100%;
  height: 100%;
  background: linear-gradient(#ff5a3c, #c5291a);
  border-radius: 18px;
  transition: width .15s ease-out;
}

/* Coin sayacı */
.coin-box {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-size: clamp(18px, 3vw, 28px);
  font-weight: bold;
  text-shadow: 0 2px 4px rgba(0,0,0,.6);
}
.coin-dot { filter: hue-rotate(-15deg); }

/* Cephane göstergesi */
.ammo-box {
  color: #fff;
  font-weight: bold;
  font-size: clamp(13px, 2.2vw, 18px);
  background: rgba(0,0,0,.35);
  padding: 6px 10px;
  border-radius: 10px;
  white-space: nowrap;
}
.ammo-box.reloading { color: #ffd24a; }

/* ===================== EKRANLAR (menü/shop/gameover) ===================== */
.screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;   /* sığmazsa üstten başlar (kırpılmaz), kaydırılır */
  gap: 18px;
  text-align: center;
  background: radial-gradient(circle at 50% 40%, rgba(20,40,20,.82), rgba(0,0,0,.92));
  color: #fff;
  padding: 24px;
  overflow-y: auto;               /* kısa yatay ekranda içerik kaydırılabilir */
  -webkit-overflow-scrolling: touch;
  pointer-events: auto;           /* modal ekran → dokunmayı yakala (kaydırma için şart) */
}
.screen > * { flex-shrink: 0; }   /* içerik küçülüp ezilmesin, kaydırılsın */
.game-title {
  font-size: clamp(32px, 8vw, 78px);
  letter-spacing: 2px;
  line-height: .98;
  color: #b6ff5a;
  text-shadow: 0 4px 0 #2e5e14, 0 8px 14px rgba(0,0,0,.6);
  display: flex; flex-direction: column; align-items: center;   /* her satır ayrı ortalı */
}
.game-title .t-line { display: block; }
/* "3D" rozeti akıştan çıkar → QUELL'i kaydırmaz, tam ortada kalır */
.game-title .t-quell { position: relative; }
.game-title .t-quell .badge3d { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: 12px; }
/* üst-başlık (kicker): "ZOMBIE SURVIVAL" — marka üstünde, SEO/kimlik için */
.title-kicker {
  font-size: clamp(13px, 2.8vw, 22px);
  font-weight: bold;
  letter-spacing: clamp(3px, 1.2vw, 9px);
  color: #ff6a4a;
  text-shadow: 0 2px 6px rgba(0,0,0,.7);
  margin-bottom: -2px;
}
.screen h2 {
  font-size: clamp(26px, 6vw, 50px);
  color: #ff6a4a;
  text-shadow: 0 3px 8px rgba(0,0,0,.6);
}
.hint { opacity: .8; font-size: clamp(11px, 2.2vw, 16px); max-width: 540px; }

/* ===================== ANİMASYONLU ANA MENÜ ===================== */
/* Menü ekranı: opak yerine sinematik vignette → arkadaki canlı 3D sahne görünür */
#screen-menu {
  background:
    radial-gradient(ellipse at 50% 42%, rgba(8,14,9,0.10) 0%, rgba(6,11,7,0.45) 52%, rgba(0,0,0,0.86) 100%);
  animation: menuFadeIn .9s ease-out both;
}
@keyframes menuFadeIn { from { opacity:0 } to { opacity:1 } }

/* başlık: nabız gibi parlama + yavaş süzülme + ilk girişte aşağıdan gelme */
#screen-menu .game-title {
  animation: titleGlow 2.6s ease-in-out infinite, titleFloat 5s ease-in-out infinite, titleIn .8s cubic-bezier(.2,.9,.3,1.4) both;
}
@keyframes titleGlow {
  0%,100% { text-shadow: 0 4px 0 #2e5e14, 0 0 16px rgba(150,255,70,.45), 0 8px 14px rgba(0,0,0,.7); }
  50%     { text-shadow: 0 4px 0 #2e5e14, 0 0 34px rgba(180,255,90,.95), 0 0 62px rgba(120,255,60,.5), 0 8px 14px rgba(0,0,0,.7); }
}
@keyframes titleFloat { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-9px) } }
@keyframes titleIn { from { transform: translateY(-40px); opacity:0 } to { transform: translateY(0); opacity:1 } }

/* "3D" rozeti nabız */
#screen-menu .badge3d { animation: badgePulse 1.8s ease-in-out infinite; }
@keyframes badgePulse { 0%,100% { transform: translateY(-50%) scale(1); filter:brightness(1) } 50% { transform: translateY(-50%) scale(1.12); filter:brightness(1.3) } }

/* ---- buton listesi (dikey) ---- */
.menu-btns { display: flex; flex-direction: column; gap: 12px; align-items: stretch; width: min(86vw, 340px); }
.menu-btn {
  pointer-events: auto;
  border: 2px solid rgba(182,255,90,.35);
  border-radius: 14px;
  padding: 14px 22px;
  font-family: inherit;
  font-size: clamp(15px, 3vw, 22px);
  font-weight: bold;
  letter-spacing: 1px;
  color: #dfffb8;
  background: linear-gradient(180deg, rgba(40,70,30,.72), rgba(15,28,12,.82));
  cursor: pointer;
  transition: transform .08s, border-color .15s, color .15s, box-shadow .15s;
  backdrop-filter: blur(2px);
  animation: btnIn .45s ease-out both;
}
.menu-btn:hover { border-color: #b6ff5a; color: #fff; box-shadow: 0 0 18px rgba(150,255,70,.35); transform: translateY(-2px); }
.menu-btn:active { transform: translateY(1px) scale(.98); }
.menu-btn:nth-child(2) { animation-delay: .06s; }
.menu-btn:nth-child(3) { animation-delay: .12s; }
.menu-btn:nth-child(4) { animation-delay: .18s; }
@keyframes btnIn { from { transform: translateY(14px); opacity:0 } to { transform: translateY(0); opacity:1 } }

/* PLAY GAME: birincil buton — daha büyük, parlak, nabız */
.menu-btn.primary {
  color: #14260a;
  background: linear-gradient(#bcff66, #7bd028);
  border-color: rgba(255,255,255,.5);
  font-size: clamp(18px, 3.6vw, 26px);
  padding: 16px 24px;
  box-shadow: 0 6px 0 #4f8a16;
  animation: playPulse 1.5s ease-in-out infinite, btnIn .5s ease-out both;
}
@keyframes playPulse {
  0%,100% { box-shadow: 0 6px 0 #4f8a16, 0 0 0 rgba(188,255,102,0); }
  50%     { box-shadow: 0 6px 0 #4f8a16, 0 0 30px rgba(188,255,102,.8); }
}
.menu-btn.primary:hover { filter: brightness(1.08); transform: translateY(-2px); color:#14260a; }
.menu-btn.primary:active { transform: translateY(3px); box-shadow: 0 3px 0 #4f8a16; }
.menu-btn.back { width: auto; align-self: center; margin-top: 6px; border-color: rgba(255,255,255,.25); }

/* ---- alt paneller (How to Play / Settings / Credits) ---- */
.menu-panel {
  display: flex; flex-direction: column; gap: 14px; align-items: stretch;
  width: min(92vw, 540px);
  background: linear-gradient(180deg, rgba(18,30,16,.92), rgba(8,14,8,.95));
  border: 2px solid rgba(182,255,90,.3);
  border-radius: 18px;
  padding: 20px 24px;
  box-shadow: 0 12px 40px rgba(0,0,0,.6), 0 0 30px rgba(120,255,60,.12);
  animation: panelIn .3s ease-out both;
}
@keyframes panelIn { from { transform: scale(.92) translateY(10px); opacity:0 } to { transform: scale(1) translateY(0); opacity:1 } }
.menu-panel h3 { color: #b6ff5a; font-size: clamp(20px, 4vw, 30px); letter-spacing: 1px; text-shadow: 0 2px 6px rgba(0,0,0,.6); }
.menu-panel .panel-body { text-align: left; font-size: clamp(13px, 2.4vw, 16px); line-height: 1.5; color: #e6f5d8; }
.ctl-grid { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin-bottom: 10px; }
.ctl-grid .k { color: #b6ff5a; font-weight: bold; white-space: nowrap; }
.menu-panel .tip { opacity: .85; margin-top: 6px; }
.menu-panel .credits p { margin: 4px 0; }
.set-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.08); font-weight: bold; }
.toggle-btn {
  pointer-events: auto; cursor: pointer; min-width: 84px;
  border: 2px solid rgba(182,255,90,.4); border-radius: 10px; padding: 8px 16px;
  font-family: inherit; font-weight: bold; font-size: clamp(13px, 2.2vw, 16px);
  color: #14260a; background: linear-gradient(#bcff66, #7bd028); transition: filter .1s, opacity .1s;
}
.toggle-btn.off { color: #ffd0d0; background: linear-gradient(#7a3030, #4a1c1c); border-color: rgba(255,120,120,.4); }
.toggle-btn:active { transform: translateY(1px); }

/* ===================== LEVEL SELECT / COMPLETE / PAUSE ===================== */
#screen-levelselect, #screen-levelcomplete { animation: menuFadeIn .35s ease-out both; }
.ls-title, .lc-win, .pause-title { color: #b6ff5a !important; letter-spacing: 1px; }
.lc-win { text-shadow: 0 0 28px rgba(150,255,70,.6), 0 3px 8px rgba(0,0,0,.6); animation: titleGlow 2.4s ease-in-out infinite; }
.pause-title { letter-spacing: 4px; }

.level-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; width: min(92vw, 520px); margin: 4px 0 8px; }
.level-card {
  pointer-events: auto; cursor: pointer; aspect-ratio: 1 / 1; position: relative;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(182,255,90,.4); border-radius: 14px;
  background: linear-gradient(180deg, rgba(40,70,30,.8), rgba(15,28,12,.85));
  color: #dfffb8; font-family: inherit; font-weight: bold; font-size: clamp(18px, 4vw, 26px);
  transition: transform .08s, box-shadow .15s, border-color .15s;
  animation: btnIn .4s ease-out both;
}
.level-card:hover:not(.locked) { transform: translateY(-3px) scale(1.05); box-shadow: 0 0 18px rgba(150,255,70,.5); border-color: #b6ff5a; }
.level-card:active:not(.locked) { transform: scale(.97); }
.level-card.cleared { border-color: #7bd028; }
.level-card.locked { cursor: not-allowed; color: #69745f; border-color: rgba(120,130,110,.3);
  background: linear-gradient(180deg, rgba(28,32,24,.8), rgba(10,12,9,.85)); }
.level-card .lk { position: absolute; bottom: 5px; right: 7px; font-size: .55em; opacity: .85; }
.level-card .lc-check { position: absolute; top: 4px; right: 7px; color: #7bd028; font-size: .5em; }

/* pause: yarı saydam → arkadaki oyun görünür */
#screen-pause { background: radial-gradient(ellipse at 50% 45%, rgba(5,10,6,.55), rgba(0,0,0,.85)); animation: menuFadeIn .2s ease-out both; }

/* ---- yıldızlar ---- */
.star { color: rgba(255,255,255,.18); transition: color .3s, transform .3s; }
.star.on { color: #ffd24a; text-shadow: 0 0 10px rgba(255,210,74,.7); }
.lc-stars { font-size: clamp(38px, 8vw, 64px); letter-spacing: 6px; line-height: 1; }
.lc-stars .star.on { animation: starPop .5s ease-out both; }
.lc-stars .star:nth-child(2).on { animation-delay: .15s; }
.lc-stars .star:nth-child(3).on { animation-delay: .3s; }
@keyframes starPop { 0% { transform: scale(0) rotate(-40deg); opacity:0 } 70% { transform: scale(1.35) rotate(8deg) } 100% { transform: scale(1) rotate(0); opacity:1 } }
.card-stars { position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; font-size: .42em; letter-spacing: 1px; }
.card-stars .star { color: rgba(255,255,255,.16); }

/* 3D rozet */
.badge3d {
  display: inline-block;
  background: linear-gradient(#ff6a4a, #c5291a);
  color: #fff;
  font-size: 0.42em;
  vertical-align: middle;
  padding: 2px 10px;
  border-radius: 8px;
  margin-left: 6px;
  letter-spacing: 1px;
  box-shadow: 0 3px 0 rgba(0,0,0,.3);
}

/* Yükleme barı */
.load-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(70%, 460px); }
.load-bar {
  width: 100%;
  height: 22px;
  background: rgba(255,255,255,.1);
  border: 2px solid rgba(255,255,255,.2);
  border-radius: 14px;
  overflow: hidden;
}
.load-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(#bcff66, #7bd028);
  border-radius: 14px;
  transition: width .15s ease-out;
}
.load-pct { font-weight: bold; color: #b6ff5a; font-size: clamp(14px, 2.6vw, 20px); }
.result-line { font-size: clamp(16px, 3vw, 24px); }

.big-btn {
  pointer-events: auto;
  border: none;
  border-radius: 16px;
  padding: 16px 42px;
  font-size: clamp(18px, 3.4vw, 28px);
  font-weight: bold;
  letter-spacing: 1px;
  color: #14260a;
  background: linear-gradient(#bcff66, #7bd028);
  cursor: pointer;
  box-shadow: 0 6px 0 #4f8a16;
  transition: transform .05s;
}
.big-btn:active { transform: translateY(3px); box-shadow: 0 3px 0 #4f8a16; }

/* ===================== SHOP ===================== */
/* yumuşak giriş — aniden "pat" diye açılmaz */
#screen-shop { background: radial-gradient(ellipse at 50% 40%, rgba(14,26,12,.9), rgba(0,0,0,.95)); animation: shopIn .4s cubic-bezier(.2,.8,.3,1.1) both; }
@keyframes shopIn { from { opacity:0; transform: scale(.96) translateY(14px); } to { opacity:1; transform: none; } }
.shop-cleared { color:#b6ff5a !important; letter-spacing:2px;
  text-shadow:0 0 26px rgba(150,255,70,.6), 0 3px 8px rgba(0,0,0,.6);
  animation: clearedPop .5s cubic-bezier(.2,.9,.3,1.5) both; }
@keyframes clearedPop { 0%{transform:scale(.5);opacity:0} 70%{transform:scale(1.12)} 100%{transform:scale(1);opacity:1} }
.shop-sub { color:#dfffb8; font-weight:bold; font-size:clamp(14px,2.6vw,18px); letter-spacing:1px; opacity:.92; }
.shop-sub #shop-coin-count { color:#ffd24a; }
#screen-shop #btn-next-wave { margin-top:6px; width:min(86vw,340px); }
.shop-coin { font-size: clamp(16px, 3vw, 24px); color: #ffd24a; font-weight: bold; }
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  width: min(92%, 720px);
}
.shop-card {
  pointer-events: auto;
  background: rgba(255,255,255,.08);
  border: 2px solid rgba(255,255,255,.15);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: transform .06s, border-color .1s;
}
.shop-card:hover { border-color: #b6ff5a; }
.shop-card:active { transform: scale(.97); }
.shop-card.maxed { opacity: .5; cursor: default; }
.shop-card .sc-name { font-weight: bold; font-size: clamp(14px, 2.6vw, 18px); }
.shop-card .sc-desc { font-size: clamp(11px, 2vw, 13px); opacity: .8; }
.shop-card .sc-level { font-size: 11px; opacity: .7; }
.shop-card .sc-price { font-weight: bold; color: #ffd24a; }
.shop-card.cant .sc-price { color: #ff6a4a; }

/* ===================== BOSS CAN BARI ===================== */
#boss-bar { z-index: 6; position: absolute; display: flex; flex-direction: column; align-items: center; gap: 5px;
  inset: auto; top: auto; right: auto; bottom: 14px; left: 50%; transform: translateX(-50%); width: min(70vw, 560px); height: auto; }
.boss-label { color: #ff5a5a; font-weight: bold; letter-spacing: 2px; font-size: clamp(13px,2.4vw,18px); text-shadow: 0 2px 4px rgba(0,0,0,.7); }
.boss-track { width: 100%; height: clamp(14px,2.4vw,20px); background: #3a0c0c; border: 2px solid rgba(255,90,90,.6); border-radius: 12px; overflow: hidden; box-shadow: 0 0 16px rgba(255,40,40,.4); }
#boss-fill { width: 100%; height: 100%; background: linear-gradient(#ff5a3c, #b3160c); transition: width .12s; }

/* ===================== AKTİF POWER-UP'LAR ===================== */
#power-bar { z-index: 6; position: absolute; display: flex; flex-direction: column; gap: 6px;
  inset: auto; top: 50%; right: auto; bottom: auto; left: 16px; transform: translateY(-50%); width: auto; height: auto; }
.pwr { display: flex; align-items: center; gap: 6px; background: rgba(0,0,0,.45); border: 2px solid var(--c); border-radius: 10px; padding: 4px 8px; box-shadow: 0 0 12px var(--c); }
.pwr span { font-size: clamp(16px,2.6vw,22px); }
.pwr i { display: block; height: 5px; width: 40px; background: var(--c); border-radius: 3px; }

/* ===================== NUKE FLAŞ ===================== */
#nuke-flash { position: absolute; inset: 0; background: #fff; opacity: 0; z-index: 9; pointer-events: none; transition: opacity .4s; }

/* ===================== POWER-UP PICKUP (placeholder yorum) ===================== */

/* ===================== EKRAN-DIŞI ZOMBİ YÖN OKLARI ===================== */
#zombie-arrows { z-index: 4; }
.zarrow {
  position: absolute;
  width: 0; height: 0;
  /* sağa bakan üçgen; JS rotate ile zombi yönüne çevrilir */
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 20px solid #ff2e2e;
  margin: -11px 0 0 -10px;            /* merkezle */
  filter: drop-shadow(0 0 5px rgba(255,40,40,.8));
  transform-origin: 10px 11px;
  transition: opacity .12s;
  pointer-events: none;
}

/* ===================== TOPLA BUTONU (E / dokunmatik) ===================== */
.pickup-btn {
  position: absolute;
  left: 50%;
  bottom: clamp(140px, 26vh, 230px);
  transform: translateX(-50%);
  z-index: 6;
  pointer-events: auto;
  border: none;
  border-radius: 14px;
  padding: 12px 26px;
  font-size: clamp(15px, 2.6vw, 20px);
  font-weight: bold;
  letter-spacing: .5px;
  color: #14260a;
  background: linear-gradient(#ffe488, #f3b425);
  box-shadow: 0 5px 0 #b9871a, 0 0 18px rgba(255,210,80,.5);
  cursor: pointer;
  animation: pickupPulse 1s ease-in-out infinite;
}
.pickup-btn:active { transform: translateX(-50%) translateY(3px); box-shadow: 0 2px 0 #b9871a; }
@keyframes pickupPulse { 0%,100%{ box-shadow:0 5px 0 #b9871a, 0 0 14px rgba(255,210,80,.4);} 50%{ box-shadow:0 5px 0 #b9871a, 0 0 26px rgba(255,210,80,.85);} }

/* ===================== MOBİL JOYSTICK ===================== */
#touch-controls { z-index: 5; }
.joystick {
  position: absolute;
  bottom: clamp(20px, 6vh, 60px);
  width: clamp(110px, 22vw, 170px);
  height: clamp(110px, 22vw, 170px);
}
#joy-move { left: clamp(20px, 5vw, 70px); }
#joy-aim  { right: clamp(20px, 5vw, 70px); }
.joy-base {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 3px solid rgba(255,255,255,.25);
}
.joy-knob {
  position: absolute;
  left: 50%; top: 50%;
  width: 44%;
  height: 44%;
  margin: -22% 0 0 -22%;
  border-radius: 50%;
  background: rgba(255,255,255,.45);
  border: 2px solid rgba(255,255,255,.6);
}
#joy-aim .joy-base { border-color: rgba(255,120,90,.5); }
#joy-aim .joy-knob { background: rgba(255,120,90,.55); }

/* ===================== ROZEF GAMES AÇILIŞ LOGOSU (şaşalı) ===================== */
#splash {
  position: absolute; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 44%, #17170f 0%, #000 78%);
  overflow: hidden;
  transition: opacity .6s ease;   /* yükleme %100 olunca game.js .splash-hide ekler */
}
#splash.splash-hide { opacity: 0; pointer-events: none; }
/* yükleme barı (Rozef altın tonunda) */
.splash-load { width: clamp(180px, 40vw, 320px); height: 8px; margin: 26px auto 10px;
  background: rgba(255,210,80,.12); border: 1px solid rgba(255,210,80,.3); border-radius: 6px; overflow: hidden; }
#splash-fill { width: 0%; height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, #b8860b, #ffd24a, #fff3c0); box-shadow: 0 0 12px rgba(255,210,80,.6); transition: width .15s ease-out; }
#splash-pct { animation: none !important; color: #cdb56a; letter-spacing: 5px; }
.splash-inner { position: relative; text-align: center; animation: splashPop 1s cubic-bezier(.2,.7,.2,1.35) both; }
@keyframes splashPop { 0% { transform: scale(.7); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } }

/* RG amblem (altıgen + iç içe geçmiş RG ligatür) — SVG, her boyutta keskin */
.rg-logo { display: block; }
.rg-logo-lg { width: clamp(82px, 16vw, 122px); height: auto; margin: 0 auto 20px;
  filter: drop-shadow(0 0 14px rgba(255,200,80,.45)); animation: rgGlow 2.4s ease-in-out infinite; }
@keyframes rgGlow {
  0%,100% { filter: drop-shadow(0 0 10px rgba(255,200,80,.35)); }
  50%     { filter: drop-shadow(0 0 26px rgba(255,210,90,.8)); }
}

/* altın gradyan "ROZEF" + ışıltı süpürmesi */
.splash-name {
  position: relative; font: 800 clamp(40px, 11vw, 100px)/1 "Trebuchet MS", Arial, sans-serif;
  letter-spacing: clamp(4px, 1.5vw, 10px);
  background: linear-gradient(180deg, #fff8d8 0%, #ffd24a 46%, #a9760a 72%, #ffe9a0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.6)) drop-shadow(0 0 28px rgba(255,200,80,.35));
}
.splash-games {
  margin-top: 8px; font: 700 clamp(16px, 4vw, 32px)/1 "Trebuchet MS", Arial, sans-serif;
  letter-spacing: clamp(8px, 3vw, 24px); color: #ecdca6;
  text-shadow: 0 2px 8px rgba(0,0,0,.6), 0 0 16px rgba(255,200,80,.25);
}
.splash-sub { margin-top: 24px; font-size: clamp(10px, 2vw, 14px); letter-spacing: 8px; color: #8a7d52; animation: subBlink 1.8s ease-in-out infinite; }
@keyframes subBlink { 0%,100% { opacity: .45; } 50% { opacity: 1; } }

/* ışıltı süpürmesi (bir kez geçen ışık) */
.splash-inner::after {
  content: ""; position: absolute; top: -20%; left: -60%; width: 40%; height: 140%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-18deg); pointer-events: none;
  animation: shimmer 2.6s ease-in-out .6s forwards;
}
@keyframes shimmer { 0% { left: -60%; } 60%,100% { left: 130%; } }

/* ===================== MAIN MENU — ROZEF GAMES MARKASI (sol alt) ===================== */
.menu-credit {
  position: absolute; left: 16px; bottom: 14px;
  display: flex; align-items: center; gap: 7px;
  font-size: clamp(11px, 2vw, 14px); font-weight: bold; letter-spacing: 2px;
  color: #e9d9a8; opacity: .85; text-shadow: 0 1px 4px rgba(0,0,0,.7);
  pointer-events: none;
}
.rg-logo-sm { width: 26px; height: 26px; flex: 0 0 auto; filter: drop-shadow(0 0 6px rgba(255,200,80,.4)); }

/* ===================== PORTRE UYARISI (mobil/tablet dik) ===================== */
#rotate-prompt {
  display: none;                 /* sadece dokunmatik + portre'de açılır */
  position: fixed; inset: 0; z-index: 200;
  flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  text-align: center; padding: 28px;
  background: radial-gradient(circle at 50% 45%, #14210f 0%, #060a06 80%);
  color: #cfe6c0;
}
.rp-phone { font-size: 72px; animation: rpRotate 2s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes rpRotate { 0%,30% { transform: rotate(0deg); } 60%,100% { transform: rotate(-90deg); } }
.rp-text { width: 100%; font-size: clamp(18px, 5vw, 28px); font-weight: 800; letter-spacing: 2px; color: #b6ff5a; text-shadow: 0 0 18px rgba(150,255,70,.5); line-height: 1.15; text-align: center; overflow-wrap: break-word; }
.rp-sub { width: 100%; font-size: clamp(12px, 3.4vw, 15px); opacity: .8; letter-spacing: 1px; line-height: 1.5; text-align: center; overflow-wrap: break-word; }
/* yalnız dokunmatik cihaz + portre → göster (masaüstü dar pencerede tetiklenmez) */
@media (orientation: portrait) and (pointer: coarse) and (hover: none) {
  #rotate-prompt { display: flex; }
}

/* ===================== KISA YATAY EKRAN (telefon landscape) — KOMPAKT =====================
   Dosya SONUNDA: baz .screen/.game-title/h2 kurallarını (eşit özgüllük, sonra gelen kazanır) geçersiz kılar.
   Amaç: shop'ta başlık+kartlar+NEXT WAVE hepsi ekrana sığsın. */
@media (max-height: 480px) {
  .screen { gap: 7px; padding: 8px 12px; justify-content: safe center; }
  .game-title { font-size: clamp(22px, 6.5vh, 38px); }
  .screen h2 { font-size: clamp(18px, 5.6vh, 28px); }
  .shop-sub { font-size: clamp(11px, 3.2vh, 14px); }
  .shop-grid { gap: 7px; }
  .shop-card { padding: 6px 10px !important; }
  #screen-shop #btn-next-wave { margin-top: 2px; padding: 9px 20px; }
  .menu-btn { padding: 9px 18px; }
}