/* Sapan Savaşı 3D HUD stilleri (shared/sapan/README-3d.md §16; DESIGN §16.1 bütçesi, §23.2) — sapan3d-ui.
   public/index.html bu dosyayı hud.css'ten sonra bağlar; public/js/sapan/hud.js bağlı değilse kendisi ekler (dev sayfası).
   Her seçici .sp- önekli ya da .hud--sapan altında (docs/v8-platform.md §13 — diğer oyunlara sızmaz). Ortak HUD değişkenleri
   (--u, --pt/--pr/--pb/--pl, --hud-top-b, --rb, --fd/--fb, --t0/--t1/--t2, --ac, --bad, --cy, --e-out) .hud kökünden gelir.
   Ölçüler 667×375 telefona göre: üst çubuk içeriği ≤ 20 px, "sana nişan" bandı ≤ 22 px, bildirim ≤ 26 px (y ≤ %22), radar ≤ 72 px,
   YAKINLAŞ ≤ 36 px, el çubuğu ≤ 240×52 (kart ≥ 44 px), öfke çubuğu ≤ 130×8, kalkan 40 px, tahmin satırı ≤ 44 px (sağ alt, el
   çubuğunun yuvası). Merkez %64×%60 kalıcı öğeden boş (tools/sapan-hud-test.mjs ölçer). Çekiş kılavuzu ve ipucu GEÇİCİ.
   Emoji YOK: simgeler sp- sprite'ından (public/icons-sapan.svg); kuş/silah ikonları LOOK renkleriyle çok tonlu (--spi-* değişkenleri). */

/* ---- kök katman; Sapan dışı düzende (bayat katman kalsa bile) hiçbir şey görünmez ---- */
.sp-hud {
  --sp-glass: rgba(9, 12, 20, .64);
  --sp-glass2: rgba(9, 12, 20, .84);
  --sp-line: rgba(255, 255, 255, .12);
  --sp-gold: #ffcf33;
  --sp-gold2: #ffb300;
  --sp-leg: #ff9f1c;
  --sp-red: #ff4d5e;
  --sp-cyan: #3ddcff;
  --sp-card: clamp(44px, calc(var(--u)*44), 56px);
  --sp-gap: 3px;
  --sp-hand-h: calc(var(--sp-card) + 6px);
  --sp-hand-w: calc(5 * var(--sp-card) + 4 * var(--sp-gap) + 6px);
  --sp-rm: clamp(60px, calc(var(--u)*72), 72px);
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-family: var(--fd);
  color: var(--t0);
}
.sp-hud * { box-sizing: border-box; }
.hud:not(.hud--sapan) .sp-hud,
.hud:not(.hud--sapan) .sp-bar { display: none !important; }
.sp-hud button { font-family: var(--fd); margin: 0; }

/* ---- üst çubuk yuvası (ortak .hud-score__slot; içerik ≤ 20 px) ---- */
.sp-bar {
  display: flex;
  align-items: center;
  gap: calc(var(--u)*7);
  height: min(20px, 100%);
  max-height: 20px;
  white-space: nowrap;
  line-height: 1;
  font-family: var(--fd);
  font-variant-numeric: tabular-nums;
}
.sp-bar:not(.is-slotted) {
  position: absolute;
  left: 50%;
  top: calc(var(--pt) + var(--u)*2);
  transform: translateX(-50%);
  height: 20px;
  padding: 0 calc(var(--u)*9);
  border-radius: 99px;
  background: rgba(9, 12, 20, .62);
  border: 1px solid rgba(255, 255, 255, .1);
}
.hud-score__seg.is-on ~ .hud-score__slot > .sp-bar.is-slotted {
  padding-left: calc(var(--u)*7);
  border-left: 1px solid rgba(255, 255, 255, .16);
}
.sp-seg {
  display: none;
  align-items: center;
  gap: calc(var(--u)*3);
  min-width: 0;
}
.sp-seg.is-on { display: flex; }
.sp-seg.is-on ~ .sp-seg.is-on::before {
  content: '';
  flex: none;
  width: 1px;
  height: 11px;
  margin-right: calc(var(--u)*4);
  background: rgba(255, 255, 255, .16);
  transform: skewX(-12deg);
}
.sp-seg small {
  font-weight: 700;
  font-size: max(10px, calc(var(--u)*10));   /* fix-v9: ≥ 10 px (SIRA:, İZLİYORSUN 8.6 px idi) */
  letter-spacing: .1em;
  color: var(--t1);
}
.sp-seg b {
  font-style: italic;
  font-weight: 800;
  font-size: min(16px, max(13px, calc(var(--u)*14.5)));
  letter-spacing: .02em;
  color: var(--t0);
}
.sp-seg em {
  font-style: normal;
  font-weight: 800;
  font-size: max(9.5px, calc(var(--u)*10.5));
  color: var(--t1);
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .1);
}
.sp-seg em:empty { display: none; }
.sp-seg .ic { flex: none; width: 12px; height: 12px; color: var(--t2); }
/* sıra: "SIRA SENDE · 7" / "SIRA: ALİ · 7" */
.sp-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c, #fff);
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .35), 0 0 6px var(--c, #fff);
}
.sp-turn__n {
  max-width: calc(var(--u)*92);
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--c, #fff) !important;
}
.sp-turn__n:empty { display: none; }
.sp-turn__t {
  min-width: 1.15em;
  text-align: right;
  color: var(--t0) !important;
  font-size: 16px !important;   /* v10 A10: sayaç rakamı 13 → 16 px */
  font-variant-numeric: tabular-nums;
}
.sp-turn__t:empty { display: none; }
.sp-turn__t::before {
  content: '·';
  margin: 0 calc(var(--u)*4) 0 calc(var(--u)*1);
  font-style: normal;
  color: var(--t2);
}
.sp-turn.is-mine small { color: var(--ac); letter-spacing: .06em; font-size: min(15px, max(12.5px, calc(var(--u)*13.5))); font-weight: 800; font-style: italic; }
.sp-turn.is-mine .sp-dot { animation: sp-dot 1s ease-in-out infinite; }
@keyframes sp-dot { 50% { transform: scale(1.35); } }
/* v10 A10: son 3 sn turuncu + her saniye nabız (is-beat yeniden başlatılır) */
.sp-turn.is-low .sp-turn__t { color: #ff9f1c !important; text-shadow: 0 0 8px rgba(255, 159, 28, .55); }
.sp-turn.is-low.is-beat .sp-turn__t { animation: sp-low .42s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes sp-low { 0% { transform: scale(1.32); } 100% { transform: scale(1); } }
/* 2 px sıra rengi ilerleme çizgisi — çubuğun alt kenarında (kalıcı alan +0) */
.sp-bar { position: relative; }
.sp-prog {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: -2px;
  height: 2px;
  display: none;
  border-radius: 2px;
  background: rgba(255, 255, 255, .1);
  overflow: hidden;
  pointer-events: none;
}
.sp-prog.is-on { display: block; }
.sp-prog__f {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--c, #ffcf33);
  box-shadow: 0 0 6px var(--c, #ffcf33);
  transform-origin: 0 50%;
  transition: transform .12s linear;
}
.sp-prog.is-low .sp-prog__f { background: #ff9f1c; box-shadow: 0 0 6px #ff9f1c; }
/* rüzgâr: ok + sayı (kademe rengi) */
.sp-arrow {
  display: inline-flex;
  flex: none;
  width: 13px;
  height: 13px;
  transition: transform .35s var(--e-out, ease-out);
}
.sp-arrow svg { width: 100%; height: 100%; }
.sp-wind .sp-arrow, .sp-next .sp-arrow { color: #dfe7ff; }
.sp-wind.is-w2 .sp-arrow, .sp-wind.is-w2 b { color: var(--sp-gold, #ffcf33); }
.sp-wind.is-w3 .sp-arrow, .sp-wind.is-w3 b { color: #ff8a3d; }
.sp-wind.is-calm .sp-arrow, .sp-next.is-calm .sp-arrow, .sp-next:not(.is-wind) .sp-arrow { display: none; }
.sp-wind.is-calm b, .sp-next.is-calm b { font-size: max(10px, calc(var(--u)*11)); letter-spacing: .08em; color: var(--t1); font-style: normal; }
.sp-wind > .ic { color: #9fb4d9; }
/* ani ölüm */
.sp-sd b {
  padding: 2px calc(var(--u)*6);
  border-radius: 99px;
  background: var(--sp-red, #ff4d5e);
  color: #fff;
  font-size: max(10px, calc(var(--u)*11));
  font-style: normal;
  letter-spacing: .08em;
  animation: sp-sd 1.6s ease-in-out infinite;
}
@keyframes sp-sd { 50% { box-shadow: 0 0 0 3px rgba(255, 77, 94, .35); } }
.sp-cap.is-low b { color: var(--sp-red, #ff4d5e); }
.sp-next small { color: var(--cy, #3ddcff); }
.sp-next.is-wind small { color: var(--t1); }
.sp-next b { color: var(--cy, #3ddcff); font-size: min(14px, max(12px, calc(var(--u)*13))); }
.sp-next b:empty { display: none; }
.sp-me small { color: var(--t1); }
.sp-me.is-out small, .sp-me.is-out b { color: var(--sp-red, #ff4d5e); }
.sp-me.is-win small, .sp-me.is-win b { color: var(--ac); }
.sp-me.is-spect small { color: var(--cy, #3ddcff); letter-spacing: .12em; }
.sp-me b:empty { display: none; }

/* ---- çubuğun hemen altı: "sana nişan" bandı / strike modu / TEK bildirim yuvası (y ≤ %22) ---- */
.sp-top {
  position: absolute;
  left: 50%;
  top: calc(var(--hud-top-b, calc(var(--pt) + var(--u)*26)) + 3px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  max-width: 60%;
  white-space: nowrap;
  line-height: 1;
}
.sp-aimed, .sp-strike, .sp-msg, .sp-hint { display: none; }
.sp-aimed.is-on, .sp-strike.is-on, .sp-msg.is-on { display: flex; animation: sp-in .2s var(--e-out, ease-out); }
@keyframes sp-in { from { opacity: 0; transform: translateY(-4px) scale(.96); } to { opacity: 1; transform: none; } }
.sp-aimed {
  align-items: center;
  gap: 6px;
  height: min(20px, max(19px, calc(var(--u)*20)));
  padding: 0 calc(var(--u)*11) 0 calc(var(--u)*6);
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(160, 18, 38, .94), rgba(212, 36, 60, .94));
  border: 1px solid rgba(255, 140, 150, .55);
  box-shadow: 0 3px 12px rgba(120, 0, 20, .35);
}
.sp-aimed__ico { display: inline-flex; color: #fff; animation: sp-aimico 1s ease-in-out infinite; }
.sp-aimed__ico .ic { width: 14px; height: 14px; }
@keyframes sp-aimico { 50% { transform: scale(1.2) rotate(45deg); } }
.sp-aimed b {
  font-style: italic;
  font-weight: 800;
  font-size: max(12px, calc(var(--u)*13.5));
  letter-spacing: .04em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.sp-strike {
  align-items: center;
  gap: 7px;
  height: min(26px, max(22px, calc(var(--u)*24)));
  padding: 0 3px 0 calc(var(--u)*10);
  border-radius: 99px;
  background: var(--sp-glass2);
  border: 1.5px solid var(--sp-red, #ff4d5e);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
  pointer-events: auto;
}
.sp-strike__n {
  font: 800 max(9px, calc(var(--u)*9.5))/1 var(--fd);
  letter-spacing: .06em;
  color: var(--sp-red, #ff4d5e);
  padding: 2px 4px;
  border-radius: 4px;
  background: rgba(255, 77, 94, .16);
}
.sp-strike.is-stage2 { border-color: var(--ac, #ffcf33); }
.sp-strike.is-stage2 .sp-strike__n { color: var(--ac, #ffcf33); background: rgba(255, 207, 51, .16); }
.sp-strike > .ic { width: 14px; height: 14px; color: var(--sp-red, #ff4d5e); animation: sp-aimico 1.2s ease-in-out infinite; }
.sp-strike__t {
  font-weight: 800;
  font-size: max(11px, calc(var(--u)*12));
  letter-spacing: .04em;
  color: #fff;
}
.sp-strike__x {
  position: relative;
  height: calc(100% - 4px);
  padding: 0 calc(var(--u)*10);
  border: 0;
  border-radius: 99px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-weight: 800;
  font-size: max(10px, calc(var(--u)*11));
  letter-spacing: .08em;
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
/* görünmez dokunma payı: ≥ 44 px */
.sp-strike__x::before { content: ''; position: absolute; inset: -14px -6px; }
.sp-strike__x.is-down { background: rgba(255, 255, 255, .28); }
.sp-msg {
  align-items: center;
  gap: 6px;
  height: min(21px, max(20px, calc(var(--u)*21)));
  padding: 0 calc(var(--u)*11);
  border-radius: 99px;
  background: rgba(9, 12, 20, .82);
  border: 1px solid var(--c, rgba(255, 255, 255, .16));
  box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
  transition: opacity .15s ease;
}
.sp-msg__ico { display: inline-flex; color: var(--c, var(--ac)); line-height: 0; }
.sp-msg__ico:empty { display: none; }
.sp-msg__ico .ic { width: 14px; height: 14px; }
.sp-msg small { font-weight: 700; font-size: max(9px, calc(var(--u)*10)); letter-spacing: .14em; color: var(--c, var(--ac)); }
.sp-msg small:empty { display: none; }
.sp-msg b {
  font-style: italic;
  font-weight: 800;
  font-size: max(12px, calc(var(--u)*13));
  letter-spacing: .03em;
  color: var(--t0);
}
.sp-msg--chip b { color: var(--c, var(--t0)); }
.sp-msg--result {
  height: min(23px, max(21px, calc(var(--u)*23)));
  border: 0;
  background: var(--sp-red, #ff4d5e);
}
.sp-msg--result b { color: #fff; font-size: max(14px, calc(var(--u)*16)); text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.sp-msg--result .sp-msg__ico { color: #fff; }
.sp-msg--result.is-win { background: linear-gradient(90deg, #ffb300, #ffcf33); }
.sp-msg--result.is-win b, .sp-msg--result.is-win .sp-msg__ico { color: #1d2140; text-shadow: none; }

/* "sana nişan" anında YALNIZ sol ve sağ kenarda 4 px kırmızı nabız (tam çerçeve yok) */
.sp-edge { position: absolute; top: 0; bottom: 0; width: 4px; display: none; background: var(--sp-red, #ff4d5e); opacity: .9; }
.sp-edge--l { left: 0; }
.sp-edge--r { right: 0; }
.sp-hud.is-aimed .sp-edge { display: block; animation: sp-edge 1s ease-in-out infinite; }
@keyframes sp-edge { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }

/* ---- sol üst: RADAR (≤ 72 px; seri satırının altında) — kamera yönü yukarı (katman döner, yazılar dik) ---- */
.sp-rd {
  position: absolute;
  left: var(--pl);
  top: calc(var(--pt) + var(--u)*22);
  width: var(--sp-rm);
  height: var(--sp-rm);
  display: none;
  pointer-events: auto;
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  border-radius: 50%;
}
.hud--sapan .hud-custom:has(~ .hud-tl .hud-minfo.is-empty) .sp-rd { top: var(--pt); }
.sp-rd.is-on { display: block; }
.sp-rd.is-down { transform: scale(.97); }
.sp-rd__bg, .sp-rd__fov { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sp-rd__disc { fill: rgba(9, 12, 20, .62); stroke: rgba(255, 255, 255, .14); stroke-width: 1; }
.sp-rd__land { fill: rgba(78, 160, 92, .2); }
.sp-rd__lake { fill: rgba(61, 176, 255, .38); stroke: rgba(160, 220, 255, .35); stroke-width: .8; }
.sp-rd__orbit { fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: 1; stroke-dasharray: 2 3; }
.sp-rd__wedge { fill: rgba(255, 255, 255, .26); stroke: rgba(255, 255, 255, .6); stroke-width: .7; stroke-linejoin: round; }
.sp-rd__rot { position: absolute; inset: 0; transition: transform .12s linear; will-change: transform; }
.sp-rd__nodes { position: absolute; inset: 0; }
/* "kamera ilerisi" çentiği: diskin üstünde küçük üçgen */
.sp-rd__north {
  position: absolute;
  left: 50%;
  top: -1px;
  width: 8px;
  height: 5px;
  margin-left: -4px;
  background: rgba(255, 255, 255, .75);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.sp-rn {
  position: absolute;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  transition: left .5s var(--e-out, ease-out), top .5s var(--e-out, ease-out);
}
/* düğüm içeriği karşı döner → baş harf / pipler / ikonlar hep dik */
.sp-rn__up {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--c, #9aa3ad);
  box-shadow: 0 0 0 1.5px rgba(9, 12, 20, .9), 0 1px 3px rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(var(--sp-rdrot, 0deg));
  transition: transform .12s linear, opacity .2s;
}
.sp-rn::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; } /* dokunma payı */
.sp-rn__c {
  font-style: normal;
  font-weight: 800;
  font-size: 10px;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .45);
}
.sp-rn.is-dark .sp-rn__c { color: #161a26; text-shadow: none; }
.sp-rn.is-2 .sp-rn__c { font-size: 9.5px; letter-spacing: -.07em; }
.sp-rn__pulse { position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--c, #fff); opacity: 0; }
.sp-rn.is-shooter .sp-rn__pulse { animation: sp-pulse 1.1s ease-out infinite; }
@keyframes sp-pulse { 0% { transform: scale(.85); opacity: .95; } 100% { transform: scale(1.6); opacity: 0; } }
.sp-rn.is-you .sp-rn__up { box-shadow: 0 0 0 1.5px rgba(9, 12, 20, .9), 0 0 0 3px #fff, 0 1px 3px rgba(0, 0, 0, .5); }
.sp-rn.is-shield .sp-rn__up::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1.5px solid var(--sp-cyan, #3ddcff);
  box-shadow: 0 0 6px rgba(61, 220, 255, .6);
}
.sp-rn.is-afk .sp-rn__up { opacity: .55; }
.sp-rn__out, .sp-rn__lead, .sp-rn__rev { position: absolute; display: none; line-height: 0; }
.sp-rn__out { color: #d6dbe7; }
.sp-rn__out .ic { width: 10px; height: 10px; }
.sp-rn__lead { left: 50%; top: -8px; margin-left: -4.5px; color: var(--sp-gold, #ffcf33); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .7)); }
.sp-rn__lead .ic, .sp-rn__rev .ic { width: 9px; height: 9px; }
.sp-rn__rev { right: -7px; top: -6px; color: #ff5a6e; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .8)); }
.sp-rn.is-leader .sp-rn__lead, .sp-rn.is-revenge .sp-rn__rev { display: block; }
.sp-rn.is-out .sp-rn__up { background: #3a4152; box-shadow: 0 0 0 1.5px rgba(9, 12, 20, .9); }
.sp-rn.is-ruin .sp-rn__up { background: #4a3a34; }
.sp-rn.is-out .sp-rn__c { display: none; }
.sp-rn.is-out .sp-rn__out { display: block; }
.sp-rp {
  position: absolute;
  left: 50%;
  top: calc(100% + 1px);
  transform: translateX(-50%);
  display: flex;
  gap: 1.5px;
  pointer-events: none;
}
.sp-rp i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #f3f5fa;
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .6);
}
.sp-rp i.is-hurt { background: #ffb02e; }
.sp-rp i.is-dead { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); }
.sp-rn.is-out .sp-rp { display: none; }
.sp-rn__emo {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 3px);
  display: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  border-radius: 50% 50% 50% 4px;
  background: #fff;
  color: #1d2140;
  line-height: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
  z-index: 2;
}
.sp-rn__emo .ic { width: 14px; height: 14px; }
.sp-rn__emo.is-on { display: flex; animation: sp-emo .25s var(--e-out, ease-out); }
@keyframes sp-emo { from { transform: scale(.3) translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
.sp-rd__guess {
  position: absolute;
  left: 50%;
  bottom: -2px;
  display: none;
  align-items: center;
  gap: 1px;
  transform: translateX(-50%);
  padding: 1px 4px;
  border-radius: 99px;
  background: rgba(9, 12, 20, .8);
  color: #c9a8ff;
  line-height: 1;
}
.sp-rd__guess.is-on { display: flex; }
.sp-rd__guess .ic { width: 10px; height: 10px; }
.sp-rd__guess b { font-style: normal; font-weight: 800; font-size: 10px; color: #e4d8ff; }

/* ---- sağ üst köşenin altı: YAKINLAŞ (≤ 36 px; yalnız kendi nişanımda) ---- */
.sp-zoom {
  position: absolute;
  right: var(--pr);
  top: calc(var(--pt) + var(--rb, 34px) + 10px);
  width: var(--rb, 34px);
  height: var(--rb, 34px);
  padding: 0;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .28);
  background: rgba(9, 12, 20, .62);
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
  transition: transform .06s ease, background .15s ease, border-color .15s;
}
.sp-zoom::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; } /* dokunma payı ≥ 44 */
.sp-zoom.is-on { display: flex; }
.sp-zoom .ic { width: 18px; height: 18px; }
.sp-zoom small {
  position: absolute;
  top: calc(100% + 2px);
  right: -2px;
  font: 800 10px/1 var(--fd);
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .85);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
  white-space: nowrap;
}
.sp--touch .sp-zoom small { display: none; }
.sp-zoom.is-active { background: var(--ac, #ffcf33); border-color: #fff; color: #1d2140; }
.sp-zoom.is-down { transform: scale(.9); }

/* ---- ekran-uzayı ÇEKİŞ KILAVUZU (geçici; pointer-events none) ---- */
.sp-pg { position: absolute; inset: 0; display: none; pointer-events: none; --pg: #fff; }
.sp-pg.is-on { display: block; }
.sp-pg__svg { position: absolute; inset: 0; overflow: visible; }
/* v10 (plan §5): bant 2 px %55 beyaz, çapa halkası 16 px; hassas kipte ince, iptalde kırmızı */
.sp-pg__band { stroke: rgba(255, 255, 255, .55); stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .6)); }
.sp-pg__arcbg { fill: rgba(9, 12, 20, .28); stroke: rgba(255, 255, 255, .2); stroke-width: 3.5; transition: stroke-width .15s ease, stroke .15s ease; }
.sp-pg__arc { fill: none; stroke: var(--pg); stroke-width: 3.5; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(255, 176, 32, .5)); transition: stroke-width .15s ease; }
.sp-pg__anchor { fill: rgba(9, 12, 20, .55); stroke: #fff; stroke-width: 2; }
.sp-pg__finger { fill: rgba(255, 255, 255, .14); stroke: rgba(255, 255, 255, .55); stroke-width: 1.5; }
.sp-pg.is-idle .sp-pg__arc, .sp-pg.is-idle .sp-pg__lbl { opacity: .35; }
.sp-pg.is-fine .sp-pg__arc, .sp-pg.is-fine .sp-pg__arcbg { stroke-width: 1.6; }
.sp-pg.is-fine .sp-pg__anchor { stroke-width: 1.2; }
.sp-pg.is-cancel .sp-pg__arcbg { stroke: #ff4d5e; stroke-width: 2.5; fill: rgba(120, 10, 28, .3); }
.sp-pg.is-cancel .sp-pg__anchor { stroke: #ff4d5e; }
.sp-pg.is-cancel .sp-pg__band { stroke: rgba(255, 77, 94, .55); }
.sp-pg.is-cancel .sp-pg__lbl { opacity: 1; border-color: rgba(255, 77, 94, .7); }
.sp-pg.is-cancel .sp-pg__p { color: #ff6b7a !important; letter-spacing: .06em; }
.sp-pg.is-cancel .sp-pg__lbl i, .sp-pg.is-cancel .sp-pg__d { display: none; }
.sp-pg__lbl {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 4px 8px;
  border-radius: 7px;
  background: rgba(9, 12, 20, .78);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  will-change: transform;
  transition: transform .09s linear;
}
.sp-pg__row { display: flex; align-items: baseline; gap: 4px; }
.sp-pg__lbl b { font: italic 800 15px/1 var(--fd); color: #fff; }
.sp-pg__p { color: var(--pg) !important; }
.sp-pg__lbl i { font-style: normal; color: var(--t2); }
.sp-pg__fine {
  display: none;
  margin-left: 2px;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(61, 220, 255, .18);
  color: #9fe9ff;
  font: 800 9.5px/1.1 var(--fd);
  letter-spacing: .08em;
  font-style: normal;
}
.sp-pg.is-fine .sp-pg__fine { display: inline-block; }
.sp-pg__prev { font: 700 10.5px/1 var(--fb); letter-spacing: .02em; color: rgba(225, 232, 248, .78); }
.sp-pg__prev:empty { display: none; }

/* ---- turdaki ilk sıram: ipucu (çubuğun altında) + iki bölgenin soluk çizgisi (3 sn, geçici) ---- */
.sp-hint { align-items: center; gap: 6px; height: 18px; padding: 0 calc(var(--u)*9); border-radius: 99px; background: rgba(9, 12, 20, .74); border: 1px solid rgba(255, 255, 255, .16); }
.sp-hint.is-on { display: flex; animation: sp-in .25s var(--e-out, ease-out); }
.sp-hint b { font: 700 max(11px, calc(var(--u)*11.5))/1 var(--fb); color: #fff; letter-spacing: .01em; }
.sp-hint .ic { width: 13px; height: 13px; color: var(--ac, #ffcf33); }
.sp-zline {
  position: absolute;
  top: 24%;
  bottom: 6%;
  width: 0;
  display: none;
  border-left: 2px dashed rgba(255, 255, 255, .28);
  pointer-events: none;
}
.sp-hud.is-hint .sp-zline { display: block; animation: sp-zl 1.6s ease-in-out infinite; }
@keyframes sp-zl { 50% { opacity: .35; } }

/* ---- sağ alt: el çubuğu, öfke, kalkan, açıklama ---- */
.sp-br { position: absolute; inset: 0; pointer-events: none; }
.sp-hand {
  position: absolute;
  right: var(--pr);
  bottom: var(--pb);
  display: none;
  align-items: center;
  gap: var(--sp-gap);
  height: var(--sp-hand-h);
  padding: 3px;
  border-radius: 12px;
  background: rgba(9, 12, 20, .5);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
  pointer-events: auto;
}
.sp-hand.is-on { display: flex; animation: sp-hand .22s var(--e-out, ease-out); }
@keyframes sp-hand { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
.sp-hand__g { display: flex; gap: var(--sp-gap); }
.sp-hand__weps { position: relative; }
.sp-hand__weps::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--sp-gap) / 2 - .5px);
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: rgba(255, 207, 51, .35);
}
.sp-hand.is-off .sp-card { opacity: .5; }
/* çekiş sürerken: soluk ve dokunulmaz (dokunuş alttaki dönme bölgesine düşer) */
.sp-hud.is-dim .sp-hand { opacity: .45; pointer-events: none; }
.sp-hud.is-dim .sp-desc { visibility: hidden; }
.sp-card {
  position: relative;
  flex: none;
  width: var(--sp-card);
  height: var(--sp-card);
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border-radius: 9px;
  border: 1.5px solid rgba(255, 255, 255, .14);
  background: linear-gradient(180deg, rgba(36, 42, 62, .92), rgba(14, 17, 28, .94));
  background:
    radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--c, #fff) 30%, transparent), transparent 62%),
    linear-gradient(180deg, rgba(36, 42, 62, .92), rgba(14, 17, 28, .94));
  color: var(--c, #fff);
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  transition: transform .08s ease, border-color .12s ease, box-shadow .12s ease, opacity .15s;
  overflow: visible;
}
.sp-card__ico { display: inline-flex; line-height: 0; color: var(--spi-body, var(--c, #fff)); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .55)); }
/* çok tonlu ikon: gövde currentColor (= LOOK.body), karın/gaga/göz/vurgu --spi-* (hud.js lookVars) */
.sp-card__ico .ic { width: calc(var(--sp-card) * .56); height: calc(var(--sp-card) * .56); }
.sp-card.is-darkc .sp-card__ico { filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px rgba(255, 255, 255, .8)); }
.sp-card__n {
  max-width: calc(100% - 4px);
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
  font-weight: 800;
  font-size: max(10px, calc(var(--sp-card) * .22));   /* fix-r1: ≥ 10 px (eskiden 8.4 px) */
  letter-spacing: 0;
  line-height: 1;
  color: #eef1f8;
}
/* 7+ harfli ad (GÖKTAŞI, MIKNATIS…): yazı boyu aynı kalır, yatayda sıkışır */
.sp-card__n.is-long { display: block; max-width: calc((100% - 4px) / .8); transform: scaleX(.8); transform-origin: 50% 50%; }
.sp-card__b { position: absolute; display: none; }
.sp-card__r {
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  padding: 1px 5px;
  border-radius: 99px;
  background: var(--sp-gold, #ffcf33);
  color: #1d2140;
  font-style: normal;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: .06em;
  line-height: 1.1;
}
.sp-card__r:empty { display: none; }
.sp-card.is-down { transform: scale(.92); }
.sp-card.is-sel {
  border-color: var(--ac, #ffcf33);
  box-shadow: 0 0 0 1.5px var(--ac, #ffcf33), 0 0 12px rgba(255, 207, 51, .5);
  transform: translateY(-2px);
}
.sp-card.is-sel.is-down { transform: translateY(-2px) scale(.94); }
.sp-card.is-deny { animation: sp-deny .32s ease; }
@keyframes sp-deny { 30% { border-color: var(--sp-red, #ff4d5e); box-shadow: 0 0 0 2px rgba(255, 77, 94, .5); } }
.sp-card.is-empty { background: rgba(14, 17, 28, .45); border-style: dashed; border-color: rgba(255, 207, 51, .22); cursor: default; }
.sp-card.is-empty .sp-card__ico { opacity: 0; }
/* silahlar: altın çerçeve; nadir: mor iç parıltı; efsanevi: turuncu parıltı */
.sp-card.is-weapon { border-color: rgba(255, 207, 51, .72); }
.sp-card.is-rare { box-shadow: inset 0 0 10px rgba(155, 107, 255, .55); }
.sp-card.is-legend {
  border-color: var(--sp-leg, #ff9f1c);
  box-shadow: 0 0 10px rgba(255, 159, 28, .65), inset 0 0 8px rgba(255, 159, 28, .45);
  animation: sp-leg 1.6s ease-in-out infinite;
}
@keyframes sp-leg { 50% { box-shadow: 0 0 16px rgba(255, 159, 28, .9), inset 0 0 10px rgba(255, 159, 28, .6); } }
.sp-card.is-sel.is-weapon { border-color: var(--ac, #ffcf33); }
/* tür rozeti: destek (yeşil +), hedef dokunuşu (kırmızı nişangâh) */
.sp-card.is-support .sp-card__b, .sp-card.is-strike .sp-card__b {
  display: block;
  top: 2px;
  right: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.sp-card.is-support .sp-card__b { background: #35e08c; box-shadow: 0 0 0 1px rgba(0, 0, 0, .45); }
.sp-card.is-strike .sp-card__b { background: transparent; border: 1.5px solid var(--sp-red, #ff4d5e); }
.sp-card.is-used { opacity: .38; filter: grayscale(.7); }
.sp-card.is-dis:not(.is-empty):not(.is-used) { cursor: default; }
.sp-card.is-offer {
  border-color: var(--sp-gold, #ffcf33);
  animation: sp-offer 1.1s ease-in-out infinite;
}
.sp-card.is-offer.is-legend { border-color: var(--sp-leg, #ff9f1c); }
/* fix-v9: teklif AYRI tepside (silah yuvalarının üstünde) — sahip olunan silahlar el çubuğunda görünür/seçilir kalır */
.sp-offer {
  position: absolute;
  right: var(--pr);
  bottom: calc(var(--pb) + var(--sp-hand-h) + 18px);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 2px 3px 7px;
  border-radius: 12px;
  background: rgba(9, 12, 20, .72);
  border: 1px solid rgba(255, 207, 51, .55);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  pointer-events: auto;
}
.sp-offer.is-on { display: flex; animation: sp-hand .22s var(--e-out, ease-out); }
.sp-offer__t {
  font: 800 max(10px, calc(var(--u)*10))/1.1 var(--fb);
  letter-spacing: .08em;
  color: var(--sp-gold, #ffcf33);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
  white-space: nowrap;
}
.sp-offer__g { display: flex; gap: var(--sp-gap); }
.sp-offer.is-off .sp-card { opacity: .5; }
.sp-offer .sp-card__r { top: auto; bottom: -7px; }   /* SEÇ şeridi kartın altında (tepsi başlığını örtmesin) */
.sp-hud.is-dim .sp-offer { opacity: .45; pointer-events: none; }
.sp-hud.has-offer .sp-meter { visibility: hidden; }
/* teklif açıkken BOŞ silah yuvası gizli (teklif tepsisi onun yerini alır; seçilince yuva dolu döner) */
.sp-hud.has-offer .sp-hand__weps .sp-card.is-empty { display: none; }
.sp-hud.has-offer .sp-hand__weps:not(:has(.sp-card:not(.is-empty)))::before { display: none; }   /* teklif açıkken öfke satırı gereksiz (teklif zaten öfkeden/yardımdan) — HUD payı */
@keyframes sp-offer { 50% { box-shadow: 0 0 0 2px rgba(255, 207, 51, .45), 0 0 14px rgba(255, 207, 51, .45); } }
.sp-kbd {
  position: absolute;
  left: 2px;
  top: 2px;
  display: none;
  padding: 0 3px;
  border-radius: 3px;
  background: rgba(9, 12, 20, .85);
  border: 1px solid rgba(255, 255, 255, .18);
  font: 700 8px/1.3 var(--fb);
  color: var(--t1);
}
.sp--desktop .sp-kbd { display: block; }
/* öfke çubuğu: el varken elin hemen üstünde, yokken sağ alt köşede küçük */
.sp-meter {
  position: absolute;
  right: var(--pr);
  bottom: var(--pb);
  display: none;
  align-items: center;
  gap: 5px;
  height: 12px;
  line-height: 1;
}
.sp-meter.is-on { display: flex; }
.sp-hud.has-hand .sp-meter { bottom: calc(var(--pb) + var(--sp-hand-h) + 3px); }
.sp-hud.has-desc.has-hand .sp-meter { visibility: hidden; }
.sp-meter small {
  font-weight: 800;
  font-size: max(10px, calc(var(--u)*10));   /* fix-r1: ÖFKE ≥ 10 px */
  letter-spacing: .12em;
  color: #ff8a8a;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}
.sp-meter b {
  min-width: 2.4em;
  font-style: italic;
  font-weight: 800;
  font-size: max(10px, calc(var(--u)*11));
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}
.sp-meter b:empty { display: none; }
.sp-meter__bar {
  position: relative;
  width: clamp(72px, calc(var(--u)*96), 130px);
  height: 7px;
  border-radius: 99px;
  overflow: hidden;
  background: rgba(30, 34, 50, .9);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.sp-hud:not(.has-hand) .sp-meter__bar { width: clamp(56px, calc(var(--u)*64), 96px); height: 6px; }
.sp-meter__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff9f1c, #ff4d5e);
  transition: width .35s var(--e-out, ease-out);
}
.sp-meter.is-gain .sp-meter__bar { animation: sp-gain .45s ease-out; }
@keyframes sp-gain { 0% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 0 0 0 rgba(255, 120, 80, .0); } 40% { box-shadow: inset 0 0 0 1px #fff, 0 0 8px rgba(255, 120, 80, .8); } }
.sp-meter.is-full .sp-meter__fill { background: linear-gradient(90deg, #ff4d5e, #ffcf33, #ff4d5e); background-size: 200% 100%; animation: sp-full 1.2s linear infinite; }
@keyframes sp-full { to { background-position: -200% 0; } }
.sp-meter.is-full small { color: var(--sp-gold, #ffcf33); }
.sp-meter.is-blocked small { color: var(--t1); }
/* açıklama balonu: öfke satırının yerinde (y ≥ merkez bölgenin altı), 1.5 sn */
.sp-desc {
  position: absolute;
  right: var(--pr);
  bottom: calc(var(--pb) + var(--sp-hand-h) + 2px);
  display: none;
  align-items: center;
  height: 15px;
  max-width: 60%;
  padding: 0 8px;
  border-radius: 99px;
  background: rgba(9, 12, 20, .86);
  border: 1px solid var(--c, rgba(255, 207, 51, .6));
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 600 max(10px, calc(var(--u)*10.5))/1 var(--fb);
  color: #fff;
}
.sp-desc.is-on { display: block; line-height: 13px; animation: sp-in .18s var(--e-out, ease-out); }
/* kalkan butonu (40 px) */
.sp-shield {
  position: absolute;
  right: var(--pr);
  bottom: calc(var(--pb) + 16px);
  width: 40px;
  height: 40px;
  padding: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(61, 220, 255, .55);
  background: radial-gradient(circle at 50% 32%, rgba(61, 220, 255, .28), rgba(8, 24, 36, .72) 72%);
  color: var(--sp-cyan, #3ddcff);
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
  transition: transform .06s ease, opacity .2s;
}
.sp-shield::before { content: ''; position: absolute; inset: -3px; border-radius: 50%; } /* dokunma payı ≥ 44 */
.sp-shield.is-on { display: flex; }
.sp-hud.has-hand .sp-shield { right: calc(var(--pr) + var(--sp-hand-w) + 6px); bottom: calc(var(--pb) + (var(--sp-hand-h) - 40px) / 2); }
.sp-shield .ic { width: 22px; height: 22px; }
.sp-shield.is-down { transform: scale(.9); }
.sp-shield.is-dis { opacity: .45; filter: grayscale(.6); }
.sp-shield.is-active { border-color: #fff; background: radial-gradient(circle at 50% 32%, rgba(61, 220, 255, .65), rgba(8, 40, 60, .8) 72%); color: #fff; box-shadow: 0 0 0 3px rgba(61, 220, 255, .35), 0 0 14px rgba(61, 220, 255, .6); }
.sp-shield.is-pulse { animation: sp-shp .7s ease-in-out infinite alternate; }
@keyframes sp-shp { from { box-shadow: 0 0 0 0 rgba(61, 220, 255, 0); } to { box-shadow: 0 0 0 6px rgba(61, 220, 255, .45); } }
.sp-shield.is-deny { animation: sp-deny .32s ease; }

/* ---- sağ alt (el çubuğunun yuvası): Tahmin satırı — sırası olmayan canlı + elenen (≤ 44 px) ---- */
.sp-guess {
  position: absolute;
  right: var(--pr);
  bottom: var(--pb);
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  max-width: 46%;
  pointer-events: none;
}
.sp-guess.is-on { display: flex; }
.sp-hud.has-hand .sp-guess { display: none; }
.sp-hud.has-guess:not(.has-hand) .sp-meter { bottom: calc(var(--pb) + 50px); }
.sp-hud.has-guess:not(.has-hand) .sp-shield { bottom: calc(var(--pb) + 66px); }
.sp-guess__l {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 13px;
  white-space: nowrap;
  font: 700 max(10.5px, calc(var(--u)*11))/1 var(--fb);
  color: #e4d8ff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}
.sp-guess__l small { font-size: inherit; }   /* fix-v9: tarayıcı <small> küçültmesi yok (7.9 px idi) */
.sp-guess__s { display: inline-flex; align-items: center; gap: 2px; color: #c9a8ff; }
.sp-guess__s .ic { width: 12px; height: 12px; }
.sp-guess__s b { font: 800 11px/1 var(--fd); color: #fff; }
.sp-guess.is-closed .sp-guess__l small { opacity: .6; }
.sp-guess__row { display: flex; gap: 4px; pointer-events: auto; }
.sp-gc {
  position: relative;
  height: 28px;
  min-width: 28px;
  padding: 0 6px;
  border-radius: 8px;
  border: 1.5px solid rgba(255, 255, 255, .25);
  background: var(--c, rgba(40, 46, 66, .92));
  color: #fff;
  font: 800 12px/1 var(--fd);
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}
.sp-gc::before { content: ''; position: absolute; inset: -8px -2px; } /* dokunma payı ≥ 44 */
.sp-gc.is-dark { color: #161a26; }
.sp-gc--miss { background: rgba(40, 46, 66, .92); letter-spacing: .06em; font-size: 10.5px; }
.sp-gc.is-pick { border-color: #fff; box-shadow: 0 0 0 2px #fff, 0 0 10px rgba(255, 255, 255, .5); }
.sp-gc.is-dis { opacity: .5; cursor: default; }
.sp-gc.is-pick.is-dis { opacity: .85; }
.sp-gc.is-down { transform: scale(.92); }
.sp-gc.is-deny { animation: sp-deny .32s ease; }

/* ---- ortak HUD'un 'sapan' düzeni (kök .hud--sapan) ---- */
/* Hayalet Bahsi şeridi: SOL ALT (elenmişken el yok); merkez %64 × %60'a girmez; seçenek satırı ≤ 44 px */
.hud--sapan .hud-bet { left: var(--pl); bottom: var(--pb); transform: none; align-items: flex-start; max-width: 46%; }
.hud--sapan .hud-bet__row { justify-content: flex-start; }
.hud--sapan .hud-bet__c { height: 44px; min-height: 0; }
.hud--sapan.hud--desktop .hud-bet { max-width: 46%; }

/* ==== v10 (docs/v10-plan.md §5, §7 — v10-ui) ==================================================================================== */
/* ---- SIRA ŞERİDİ (A10): üst kenardan kayar 0.25 sn, 0.9 sn kalır, 0.2 sn'de gider — geçici, çubuğun üstüne biner ---- */
.sp-ts {
  --c: #ffcf33;
  position: absolute;
  left: 50%;
  top: calc(var(--pt) + 1px);
  z-index: 6;
  display: none;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 15px 0 3px;
  border-radius: 99px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 55%),
    linear-gradient(90deg, color-mix(in srgb, var(--c) 78%, #05070d), color-mix(in srgb, var(--c) 46%, #0b1020));
  border: 1.5px solid color-mix(in srgb, var(--c) 55%, #fff);
  box-shadow: 0 5px 16px rgba(0, 0, 0, .42), 0 0 20px color-mix(in srgb, var(--c) 40%, transparent);
  white-space: nowrap;
  line-height: 1;
  pointer-events: none;
  transform: translate(-50%, -150%);
}
.sp-ts.is-on { display: flex; animation: sp-ts 1.35s linear forwards; }
@keyframes sp-ts {
  0% { transform: translate(-50%, -150%); opacity: 0; animation-timing-function: cubic-bezier(.2, .9, .3, 1.15); }
  18.5% { transform: translate(-50%, 0); opacity: 1; }
  85.2% { transform: translate(-50%, 0); opacity: 1; animation-timing-function: cubic-bezier(.5, 0, .9, .4); }
  100% { transform: translate(-50%, -130%); opacity: 0; }
}
.sp-ts__av { display: inline-flex; line-height: 0; }
.sp-ts .hud-av { width: 22px; height: 22px; box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0, 0, 0, .4); background: rgba(9, 12, 20, .55); }
.sp-ts .hud-av b { font: 800 12px/1 var(--fd); color: #fff; }
.sp-ts__l { font: 800 11px/1 var(--fd); letter-spacing: .12em; color: rgba(255, 255, 255, .86); text-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
.sp-ts__n { font: italic 800 16px/1 var(--fd); letter-spacing: .03em; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.sp-ts__n:empty { display: none; }
.sp-ts__s { font: 700 10px/1 var(--fb); font-style: normal; color: #fff; padding: 2px 6px; border-radius: 99px; background: rgba(0, 0, 0, .28); }
.sp-ts__s:empty { display: none; }
.sp-ts.is-mine .sp-ts__l { font: italic 800 17px/1 var(--fd); letter-spacing: .06em; color: #fff; }
.sp-ts.is-mine { box-shadow: 0 5px 16px rgba(0, 0, 0, .42), 0 0 26px color-mix(in srgb, var(--c) 60%, transparent), 0 0 0 3px rgba(255, 207, 51, .35); }
.sp-ts.is-dark .sp-ts__l, .sp-ts.is-dark .sp-ts__n, .sp-ts.is-dark .sp-ts__s { color: #141826; text-shadow: none; }
.sp-ts.is-dark .sp-ts__s { background: rgba(255, 255, 255, .35); }

/* ---- ◀ ▶ tek el dönüş (32 px; YAKINLAŞ'ın altında, sağ kenar — merkez bölgenin dışında; dokunma payı ≥ 44) ---- */
.sp-nudge {
  position: absolute;
  right: var(--pr);
  top: calc(var(--pt) + 2 * var(--rb, 34px) + 20px);
  display: none;
  gap: 6px;
  pointer-events: none;
}
.sp-nudge.is-on { display: flex; animation: sp-in .2s var(--e-out, ease-out); }
.sp-nb {
  position: relative;
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .26);
  background: rgba(9, 12, 20, .58);
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .28);
  transition: transform .06s ease, background .12s ease, border-color .12s ease;
}
.sp-nb::before { content: ''; position: absolute; inset: -6px -3px; border-radius: 50%; } /* dokunma payı ≥ 44 (yan yana çakışmasın) */
.sp-nb .ic { width: 15px; height: 15px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5)); }
.sp-nb--r .ic { transform: scaleX(-1); }
.sp-nb.is-down, .sp-nb.is-active { background: rgba(255, 207, 51, .9); border-color: #fff; color: #1d2140; transform: scale(.92); }
.sp-nb.is-down .ic, .sp-nb.is-active .ic { filter: none; }

/* ---- İLK SIRA ÖĞRETİCİSİ: hayalet el cepten aşağı-sola (1.6 sn döngü) + büyüyen noktalı yay; sağda iki yana ok (geçici) ---- */
.sp-tut { position: absolute; inset: 0; display: none; pointer-events: none; z-index: 3; }
.sp-tut.is-on { display: block; animation: sp-tutin .3s ease-out; }
@keyframes sp-tutin { from { opacity: 0; } to { opacity: 1; } }
.sp-tut__pull, .sp-tut__turn { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
/* bant: cepten parmağa (aşağı-sol, 222°) uzar */
.sp-tut__band {
  position: absolute;
  left: 0;
  top: -1.5px;
  width: 92px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .35));
  box-shadow: 0 0 0 1px rgba(11, 16, 32, .55);
  transform-origin: 0 50%;
  transform: rotate(138deg) scaleX(0);
  animation: sp-tutband 1.6s ease-in-out infinite;
}
@keyframes sp-tutband { 0%, 8% { transform: rotate(138deg) scaleX(0); opacity: 0; } 18% { opacity: 1; } 62% { transform: rotate(138deg) scaleX(1); opacity: 1; } 78%, 100% { transform: rotate(138deg) scaleX(1); opacity: 0; } }
/* cep halkası (bas) */
.sp-tut__ring {
  position: absolute;
  left: -13px;
  top: -13px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .9);
  box-shadow: 0 0 0 1.5px rgba(11, 16, 32, .5), 0 0 12px rgba(255, 255, 255, .45);
  animation: sp-tutring 1.6s ease-out infinite;
}
@keyframes sp-tutring { 0% { transform: scale(.4); opacity: 0; } 10% { transform: scale(1); opacity: 1; } 30% { transform: scale(1.5); opacity: 0; } 100% { opacity: 0; } }
/* hayalet el: cepte basar (0.1 sn), aşağı-sola çeker (0.15 → 0.62), bırakır ve söner */
.sp-tut__hand {
  position: absolute;
  left: -16px;
  top: -3px;
  line-height: 0;
  color: #fff;
  --spi-ink: rgba(11, 16, 32, .55);
  filter: drop-shadow(0 0 1px rgba(11, 16, 32, .9)) drop-shadow(0 2px 4px rgba(0, 0, 0, .45));
  animation: sp-tuthand 1.6s ease-in-out infinite;
}
.sp-tut__hand .ic { width: 34px; height: 34px; }
@keyframes sp-tuthand {
  0% { transform: translate(0, 0) scale(1.08); opacity: 0; }
  8% { transform: translate(0, 0) scale(.94); opacity: .92; }
  62% { transform: translate(-68px, 62px) scale(.94); opacity: .92; }
  72% { transform: translate(-68px, 62px) scale(1.04); opacity: .92; }
  86%, 100% { transform: translate(-68px, 62px) scale(1.04); opacity: 0; }
}
/* büyüyen kesikli yay (temsilî — gerçek çizgi çekince belirir). v10-fix (QA): nişan çizgisinin biçiminde (beyaz yuvarlak tire + koyu
   dış çizgi), cepten sağ-yukarı ve tepeden ÖNCE biter (bir kulenin yanında "iniş ipucu" gibi durmaz), sona doğru incelir/söner */
.sp-tut__dots { position: absolute; left: 0; top: 0; }
.sp-tut__dots i {
  position: absolute;
  width: 11px;
  height: 5px;
  margin: -2.5px 0 0 -5.5px;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 0 0 1.6px rgba(11, 16, 32, .78), 0 0 6px rgba(255, 255, 255, .35);
  opacity: 0;
  --a: -40deg;
  transform: rotate(var(--a));
  animation: sp-tutdot 1.6s ease-out infinite;
}
.sp-tut__dots i:nth-child(1) { left: 14px; top: -15px; --a: -48deg; animation-delay: .22s; }
.sp-tut__dots i:nth-child(2) { left: 28px; top: -29px; --a: -42deg; animation-delay: .29s; }
.sp-tut__dots i:nth-child(3) { left: 43px; top: -41px; --a: -35deg; animation-delay: .36s; }
.sp-tut__dots i:nth-child(4) { left: 58px; top: -50px; --a: -27deg; animation-delay: .43s; width: 9px; height: 4.5px; }
.sp-tut__dots i:nth-child(5) { left: 72px; top: -56px; --a: -18deg; animation-delay: .5s; width: 7px; height: 4px; }
@keyframes sp-tutdot { 0% { opacity: 0; transform: rotate(var(--a)) scale(.3); } 6% { opacity: 1; transform: rotate(var(--a)) scale(1); } 40% { opacity: .9; } 55%, 100% { opacity: 0; } }
.sp-tut__t {
  position: absolute;
  white-space: nowrap;
  font: 800 12px/1 var(--fb);
  letter-spacing: .02em;
  color: #fff;
  padding: 3px 7px;
  border-radius: 99px;
  background: rgba(9, 12, 20, .72);
  border: 1px solid rgba(255, 255, 255, .18);
}
.sp-tut__pull .sp-tut__t { left: -96px; top: 74px; }
.sp-tut__turn { display: flex; }
.sp-tut__turn .sp-tut__t { left: 50%; top: 22px; transform: translateX(-50%); }
.sp-tut__ar {
  position: absolute;
  top: -11px;
  line-height: 0;
  color: #fff;
  filter: drop-shadow(0 0 1px rgba(11, 16, 32, .9)) drop-shadow(0 2px 3px rgba(0, 0, 0, .4));
}
.sp-tut__ar .ic { width: 22px; height: 22px; }
.sp-tut__ar--l { left: -44px; animation: sp-tutarl 1.6s ease-in-out infinite; }
.sp-tut__ar--r { left: 22px; animation: sp-tutarr 1.6s ease-in-out infinite; }
.sp-tut__ar--r .ic { transform: scaleX(-1); }
@keyframes sp-tutarl { 0%, 100% { transform: translateX(0); opacity: .55; } 50% { transform: translateX(-10px); opacity: 1; } }
@keyframes sp-tutarr { 0%, 100% { transform: translateX(0); opacity: .55; } 50% { transform: translateX(10px); opacity: 1; } }

/* ---- "Uçarken dokun: yetenek" çipi (alt orta, 1.2 sn; merkez bölgenin altında) ---- */
.sp-ahint {
  position: absolute;
  left: 50%;
  bottom: calc(var(--pb) + 8px);
  display: none;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 12px 0 8px;
  border-radius: 99px;
  background: rgba(9, 12, 20, .82);
  border: 1.5px solid rgba(255, 207, 51, .75);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .35), 0 0 14px rgba(255, 207, 51, .3);
  transform: translateX(-50%);
  white-space: nowrap;
  pointer-events: none;
}
.sp-ahint.is-on { display: flex; animation: sp-ahint 1.2s ease-out forwards; }
@keyframes sp-ahint { 0% { opacity: 0; transform: translate(-50%, 8px) scale(.9); } 14% { opacity: 1; transform: translate(-50%, 0) scale(1); } 82% { opacity: 1; } 100% { opacity: 0; } }
.sp-ahint__ico { display: inline-flex; line-height: 0; color: var(--sp-gold, #ffcf33); animation: sp-ahtap .6s ease-in-out infinite; }
.sp-ahint__ico .ic { width: 16px; height: 16px; }
@keyframes sp-ahtap { 50% { transform: translateY(2px) scale(.9); } }
.sp-ahint b { font: 800 12px/1 var(--fb); color: #fff; letter-spacing: .01em; }

/* ---- F17 gelen atış: ekran kenarı vinyeti nişancı renginde, 0.6 sn (yalnız kurban; merkez boş kalır) ---- */
.sp-vig {
  --c: #ff4d5e;
  position: absolute;
  inset: 0;
  display: none;
  pointer-events: none;
  z-index: 1;
  box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--c) 90%, transparent), inset 0 0 56px 12px color-mix(in srgb, var(--c) 72%, transparent);
  border-radius: 2px;
}
.sp-vig.is-on { display: block; animation: sp-vig .6s ease-out forwards; }
@keyframes sp-vig { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .sp-hud *, .sp-bar * { animation: none !important; transition: none !important; }
  /* öğretici hareketsiz: el çekişin sonunda, bant tam boy, noktalar görünür */
  .sp-tut__hand { transform: translate(-68px, 62px); opacity: .9; }
  .sp-tut__band { transform: rotate(138deg) scaleX(1); opacity: 1; }
  .sp-tut__dots i { opacity: .8; }
  .sp-ts.is-on { transform: translate(-50%, 0); }
}