/* ---------- DOSYA 08 · atış poligonu (js/range.js çiziyor) ---------- */
.range { overflow-x: clip; }
.range__head { padding: 16vh var(--pad) 4vh; display: grid; gap: 14px; }
.range__head .mono { color: var(--fg); }
.range__title { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: -.045em; line-height: .88; font-size: clamp(44px, 10vw, 180px); }
.range__sub { font-size: clamp(17px, 1.4vw, 22px); color: var(--mute); max-width: 52ch; }
.range__stage { padding: 0 var(--pad) 16vh; }

/* oyun sırasında sitenin imleci yalnızca sahnenin üstünde (ya da fare kilidindeyken) saklanır */
body.in-range:has(.rng:hover, .rng:not(.is-click)) .cursor { opacity: 0 !important; }
/* başarım bildirimleri tur bitince görünsün, nişan alırken HUD'un üstüne binmesin; defter de öyle */
body.in-range .toasts { opacity: 0; }
body.in-range :is(.nb-tab, .nb-bubble) { opacity: 0; pointer-events: none; }
/* parmakla sürükleyince sayfa kaymasın (Lenis yokken de) */
body.in-range { touch-action: none; }
/* Lenis tur başında durunca kök overflow: clip olur, kaydırma çubuğu gider, sayfa 15 px genişler ve sahne zıplar.
   Pay her zaman ayrılı: yalnız durunca ayrılsa Chrome'da vw (dolayısıyla --pad) değişip metinler yeniden kırılıyor. */
html { scrollbar-gutter: stable; }

.rng {
  --lime: #a6ff3d; --hot: #ff4a1c; --txt: #e6f4ea; --glass: rgba(6, 11, 8, .62);
  position: relative; width: 100%; max-width: 1500px; margin: 0 auto; aspect-ratio: 16 / 9; max-height: min(88vh, calc(100vh - 96px)); min-height: 420px;
  border-radius: 18px; overflow: hidden; isolation: isolate; color: var(--txt);
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%, rgba(166, 255, 61, .07), transparent 70%),
    repeating-linear-gradient(90deg, rgba(166, 255, 61, .05) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(0deg, rgba(166, 255, 61, .05) 0 1px, transparent 1px 48px),
    #0b100d;
  box-shadow: inset 0 0 0 1px rgba(166, 255, 61, .14), 0 40px 90px -30px rgba(0, 0, 0, .8);
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.rng [hidden] { display: none !important; }
.rng__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1s var(--ease-out); }
.rng.is-ready .rng__gl { opacity: 1; }
/* köşeler kararsın, HUD okunur kalsın */
.rng::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: radial-gradient(ellipse 90% 85% at 50% 50%, transparent 58%, rgba(3, 6, 4, .62));
  box-shadow: inset 0 0 0 1px rgba(166, 255, 61, .14);
}
.rng.is-live { touch-action: none; }
.rng.is-live.is-click .rng__gl { cursor: none; }

/* ---------- HUD ---------- */
.rng__hud {
  position: absolute; left: 0; right: 0; top: 0; z-index: 3; pointer-events: none;
  display: flex; align-items: flex-start; gap: 10px; padding: clamp(10px, 1.5vw, 20px);
  opacity: 0; transform: translateY(-10px); transition: opacity .35s, transform .5s var(--ease-out);
}
.rng:is([data-phase=arm], [data-phase=count], [data-phase=play], [data-phase=pause]) .rng__hud { opacity: 1; transform: none; }
.rng__group { display: flex; gap: 10px; margin-left: auto; }
.rng__cell {
  display: grid; gap: 3px; padding: 8px 14px 9px; min-width: 0;
  background: var(--glass); border: 1px solid rgba(166, 255, 61, .16); border-radius: 12px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.rng__cell span { font-size: 10px; letter-spacing: .14em; color: rgba(230, 244, 234, .55); }
.rng__cell b { font: 900 clamp(16px, 1.7vw, 26px)/1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rng__cell--time { min-width: 108px; }
.rng__cell--time.is-low b { color: var(--hot); animation: rng-blink .5s steps(2) infinite; }
@keyframes rng-blink { 50% { opacity: .45; } }
.rng__bar { display: block; height: 3px; margin-top: 4px; border-radius: 3px; background: rgba(230, 244, 234, .12); overflow: hidden; }
.rng__bar em { display: block; height: 100%; background: var(--lime); transform-origin: 0 50%; box-shadow: 0 0 10px var(--lime); }
.is-low .rng__bar em { background: var(--hot); box-shadow: 0 0 10px var(--hot); }
.rng__cell--score { position: absolute; left: 50%; top: clamp(10px, 1.5vw, 20px); translate: -50% 0; text-align: center; min-width: 150px; border-color: rgba(166, 255, 61, .3); }
.rng__cell--score b { font-size: clamp(22px, 2.8vw, 42px); color: var(--lime); text-shadow: 0 0 22px rgba(166, 255, 61, .45); }
.rng__cell--combo b { transition: color .2s; }
.rng__cell--combo { transition: border-color .2s, box-shadow .2s; }
.rng__cell--combo[data-mult="2"] b { color: var(--lime); }
.rng__cell--combo[data-mult="3"] b { color: #ffc857; }
.rng__cell--combo[data-mult="4"] { border-color: rgba(255, 74, 28, .7); box-shadow: 0 0 24px rgba(255, 74, 28, .35); }
.rng__cell--combo[data-mult="4"] b { color: var(--hot); }

.rng__pausebtn {
  position: absolute; left: 14px; bottom: 14px; z-index: 4; width: 46px; height: 46px; border-radius: 50%;
  display: none; place-items: center; grid-auto-flow: column; gap: 5px; justify-content: center;
  background: var(--glass); border: 1px solid rgba(230, 244, 234, .2);
}
.rng__pausebtn i { display: block; width: 4px; height: 14px; border-radius: 2px; background: var(--txt); }
.rng.is-click:is([data-phase=count], [data-phase=play]) .rng__pausebtn { display: grid; }

/* ---------- nişangâh + vuruş işareti ---------- */
.rng__xh {
  position: absolute; left: 0; top: 0; z-index: 3; width: 40px; height: 40px; margin: -20px 0 0 -20px; pointer-events: none; overflow: visible;
  fill: none; stroke: var(--txt); stroke-width: 2; stroke-linecap: round; opacity: 0;
  filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .9));
}
.rng__xh circle { fill: var(--txt); stroke: none; }
.rng:is([data-phase=count], [data-phase=play]) .rng__xh { opacity: 1; }
@media (hover: hover) { .rng.is-click:not(:hover) .rng__xh { opacity: 0; } }
.rng__xh-c, .rng__hm { transform-box: view-box; transform-origin: 50% 50%; }
.rng__hm { opacity: 0; stroke-width: 2.6; }
.rng__hm.is-head { stroke: var(--hot); }

.rng__pops { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.rng__pop {
  position: absolute; left: 0; top: 0; opacity: 0; white-space: nowrap; text-align: center;
  font: 900 clamp(15px, 1.6vw, 24px)/1 var(--display); text-transform: uppercase; letter-spacing: -.01em;
  color: var(--txt); text-shadow: 0 2px 0 rgba(0, 0, 0, .6), 0 0 18px rgba(166, 255, 61, .4);
}
.rng__pop small { display: block; margin-top: 4px; font: 600 10px/1 var(--mono); letter-spacing: .12em; color: var(--lime); text-shadow: 0 1px 0 #000; }
.rng__pop.is-head { color: var(--hot); font-size: clamp(18px, 2vw, 30px); text-shadow: 0 2px 0 rgba(0, 0, 0, .6), 0 0 20px rgba(255, 74, 28, .55); }
.rng__pop.is-miss { color: #ff8a6b; font-size: 15px; text-shadow: 0 1px 0 #000, 0 0 12px rgba(255, 74, 28, .5); }

.rng__big {
  position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; pointer-events: none; opacity: 0;
  font: 900 clamp(72px, 13vw, 210px)/1 var(--display); text-transform: uppercase; letter-spacing: -.04em;
  color: var(--txt); text-shadow: 0 0 50px rgba(166, 255, 61, .55), 0 6px 0 rgba(0, 0, 0, .4);
}
.rng__toast {
  position: absolute; left: 50%; bottom: clamp(18px, 4%, 36px); z-index: 4; pointer-events: none; opacity: 0;
  width: max-content; max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 99px; text-align: center;
  background: var(--glass); border: 1px solid rgba(166, 255, 61, .3); color: var(--lime);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transform: translateX(-50%);
}

/* ---------- katmanlar: başlangıç, mola, sonuç ---------- */
.rng__ov { position: absolute; inset: 0; z-index: 5; display: grid; padding: clamp(18px, 4vw, 56px); }
.rng__ov--idle { place-items: center start; background: linear-gradient(90deg, rgba(5, 9, 7, .9), rgba(5, 9, 7, .55) 42%, transparent 72%); }
.rng__ov--pause, .rng__ov--end { place-items: center; background: rgba(5, 9, 7, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.rng__ov--end { overflow-y: auto; }
.rng__card { display: grid; gap: 14px; justify-items: start; max-width: 520px; }
.rng__card--mid { justify-items: center; text-align: center; }
.rng__kick { color: var(--lime); }
.rng__h {
  font: 900 clamp(40px, 6.4vw, 104px)/.86 var(--display); text-transform: uppercase; letter-spacing: -.045em;
  text-shadow: 0 0 40px rgba(166, 255, 61, .25);
}
.rng__how { font-size: clamp(16px, 1.3vw, 20px); color: rgba(230, 244, 234, .78); max-width: 34ch; }
.rng__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.rng__card--mid .rng__btns { justify-content: center; }
.rng__btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 99px;
  font-weight: 700; font-size: 16px; border: 1px solid rgba(230, 244, 234, .4);
  transition: background-color .25s, color .25s, border-color .25s, transform .4s var(--ease-out);
}
.rng__btn:hover { background: var(--txt); color: #0b100d; border-color: var(--txt); }
.rng__btn--go { background: var(--lime); border-color: var(--lime); color: #0b100d; box-shadow: 0 0 30px rgba(166, 255, 61, .35); }
.rng__btn--go:hover { background: var(--txt); border-color: var(--txt); }
.rng__btn:active { transform: scale(.96); }
.rng:not(.is-ready) .rng__btns { opacity: .45; pointer-events: none; }
.rng__alt { color: rgba(230, 244, 234, .55); text-decoration: underline; text-underline-offset: 4px; text-transform: none; letter-spacing: .02em; }
.rng__alt:hover { color: var(--txt); }
.rng__best { color: rgba(230, 244, 234, .5); }
.rng__note { color: var(--hot); min-height: 1em; text-transform: none; letter-spacing: .02em; }

.rng__sens { display: flex; align-items: center; gap: 12px; color: rgba(230, 244, 234, .65); }
.rng__sens input { width: 150px; accent-color: var(--lime); cursor: pointer; }
.rng__sens output { min-width: 4.5ch; color: var(--txt); font-variant-numeric: tabular-nums; }

.rng__end { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 4.5vw, 72px); align-items: center; width: min(100%, 1080px); }
.rng__end-l { display: grid; gap: 10px; justify-items: start; }
.rng__total {
  font: 900 clamp(64px, 10vw, 168px)/.82 var(--display); letter-spacing: -.05em; color: var(--lime); font-variant-numeric: tabular-nums;
  text-shadow: 0 0 60px rgba(166, 255, 61, .4);
}
.rng__new { padding: 6px 10px; border-radius: 6px; background: var(--hot); color: #0b100d; font-weight: 600; animation: rng-pulse 1s ease-in-out infinite alternate; }
@keyframes rng-pulse { to { box-shadow: 0 0 26px rgba(255, 74, 28, .7); } }
.rng__rank { margin-top: 6px; font: 900 clamp(22px, 2.6vw, 40px)/1 var(--display); text-transform: uppercase; letter-spacing: -.03em; color: var(--hot); }
.rng__joke { font-size: clamp(15px, 1.2vw, 18px); color: rgba(230, 244, 234, .72); max-width: 36ch; }
.rng__end-r { display: grid; gap: 20px; min-width: 0; }
.rng__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.rng__stats > div { padding: 12px 14px; border-radius: 12px; background: rgba(230, 244, 234, .05); border: 1px solid rgba(230, 244, 234, .1); }
.rng__stats dt { font-size: 10px; letter-spacing: .14em; color: rgba(230, 244, 234, .55); }
.rng__stats dd { margin: 6px 0 0; font: 700 clamp(20px, 2vw, 30px)/1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rng__runs { width: 100%; border-collapse: collapse; font-size: 12px; }
.rng__runs-cap { display: flex; justify-content: space-between; padding-bottom: 8px; color: rgba(230, 244, 234, .55); }
.rng__runs-cap span:last-child { color: var(--lime); }
.rng__runs th { padding: 6px 8px; text-align: left; font-weight: 400; color: rgba(230, 244, 234, .45); border-bottom: 1px solid rgba(230, 244, 234, .14); }
.rng__runs td { padding: 7px 8px; border-bottom: 1px solid rgba(230, 244, 234, .07); font-variant-numeric: tabular-nums; }
.rng__runs td:first-child { font-weight: 600; color: var(--txt); }
.rng__runs tr.is-now td { color: var(--lime); background: rgba(166, 255, 61, .07); }

.rng.is-fallback .rng__ov--idle { place-items: center; text-align: center; background: none; }
.rng.is-fallback .rng__card { justify-items: center; }

/* ---------- telefon: dikey sahne, menü altta ---------- */
@media (max-width: 760px) {
  .rng { aspect-ratio: 9 / 16; max-height: calc(100svh - 96px); min-height: 500px; border-radius: 14px; }
  .rng__hud { flex-wrap: wrap; gap: 6px; padding: 10px; }
  .rng__cell { padding: 6px 9px 7px; border-radius: 10px; }
  .rng__cell span { font-size: 9px; }
  .rng__cell b { font-size: 15px; }
  .rng__cell--time { min-width: 0; }
  .rng__cell--score { position: static; translate: none; min-width: 0; flex: 1; }
  .rng__cell--score b { font-size: 22px; }
  .rng__group { width: 100%; margin: 0; gap: 6px; }
  .rng__group .rng__cell { flex: 1; }
  .rng__ov { padding: 20px; }
  .rng__ov--idle { place-items: end start; background: linear-gradient(0deg, rgba(5, 9, 7, .94), rgba(5, 9, 7, .65) 45%, transparent 75%); }
  .rng__h { font-size: clamp(38px, 12vw, 56px); }
  .rng__btn { padding: 13px 20px; font-size: 15px; }
  .rng__ov--end { place-items: start center; padding: 18px; }
  .rng__end { grid-template-columns: 1fr; gap: 16px; }
  .rng__end-l { gap: 8px; }
  .rng__total { font-size: clamp(54px, 17vw, 84px); }
  .rng__rank { font-size: 21px; margin-top: 2px; }
  .rng__joke { font-size: 14px; }
  .rng__end .rng__btns { margin-top: 2px; }
  .rng__end .rng__btn { padding: 11px 18px; font-size: 14px; }
  .rng__end-r { gap: 12px; }
  .rng__stats { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .rng__stats > div { padding: 8px 7px; border-radius: 9px; }
  .rng__stats dt { font-size: 8px; letter-spacing: .06em; }
  .rng__stats dd { font-size: 16px; margin-top: 4px; white-space: nowrap; }
  .rng__runs { font-size: 11px; }
  .rng__runs th, .rng__runs td { padding: 5px 6px; }
  .rng__runs tbody tr:nth-child(n+4) { display: none; }
  .rng__sens input { width: 120px; }
}
@media (prefers-reduced-motion: reduce) { .rng__cell--time.is-low b, .rng__new { animation: none; } }