/* HackRiddle Arena Kabuğu stilleri (hr-arena-shell.js). Sınıflar `ar-` önekli, animasyonlar `hr-ar-` önekli.
 *
 * Görsel dil: CyberClash lobisi + Yazma Arenası (siyah-altın zemin, mor aksan, altın vurgu). Kabuk yalnız
 * İSKELET + ortak bileşenleri çizer; oyuna özel renk/metafor `adapter.theme` (sınıf ya da CSS değişkenleri) ile gelir:
 *   --ar-accent / --ar-accent-2   ana ve ikincil vurgu          --ar-backdrop   sahne arka planı (url(...) | none)
 *   --ar-bg / --ar-panel / --ar-surface / --ar-border / --ar-text / --ar-muted / --ar-ok / --ar-danger
 * Premium tema görselleri (yarış sahnesi sprite'ları vb.) F8'de bu değişkenlere/`.ar-content` yuvasına bağlanır. */
.ar-shell{
  --ar-bg:#070912;--ar-panel:#0d101a;--ar-surface:#111624;--ar-border:#252b3b;--ar-text:#eef0f6;--ar-muted:#8f99ab;
  --ar-accent:var(--hr-accent,#b06cff);--ar-accent-2:var(--hr-accent-2,#f5c451);--ar-ok:#29e6a5;--ar-danger:#ff5266;--ar-info:#2dd4ff;
  --ar-backdrop:url('/assets/arcane-colosseum/arkane-kolezyum-ayin-cemberi-1920x1080.webp');
  position:relative;color:var(--ar-text);font-family:'Space Grotesk',system-ui,sans-serif;min-width:0;
  /* VIEWPORT-FIT (2026-10-22): kabuk, host'un yüksekliğine (sayfalar bunu `100dvh - üst menü` ile verir) dikey flex ile
   * oturur → sayfa dikey kaydırması OLMAZ; yalnız uzun içerik (seçenek/sonuç listesi) `.ar-pane` içinde kayar. Host yüksekliği
   * belirsizse (height:auto) `height:100%` otomatiğe düşer ve eski akış davranışı aynen korunur. */
  display:flex;flex-direction:column;height:100%;min-height:0;
}
.ar-shell *,.ar-shell *::before,.ar-shell *::after{box-sizing:border-box}
.ar-shell [hidden]{display:none!important}
.ar-shell button{font:inherit;color:inherit}
.ar-shell button:focus-visible,.ar-shell input:focus-visible,.ar-shell a:focus-visible{outline:2px solid var(--ar-info);outline-offset:3px}
/* Başlıklar yalnız ekran-okuyucu/odak yönetimi için programatik odak alır (tabindex=-1): görsel halka gürültüdür. */
.ar-shell [tabindex="-1"]:focus,.ar-shell [tabindex="-1"]:focus-visible{outline:none}
.ar-sr{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
/* Sayfa kabı: üst menü payı + genişlik (sayfa isterse kendi kabını kullanır). */
.ar-page{width:min(1100px,calc(100% - 32px));margin:0 auto;padding:104px 0 64px}

/* ── başlık + presence ── */
.ar-head{flex:none;display:flex;justify-content:space-between;gap:12px 20px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.ar-back{display:inline-block;margin-bottom:8px;color:var(--ar-muted);font-size:.8rem;text-decoration:none}
.ar-back:hover{color:var(--ar-text)}
.ar-eyebrow{font:600 10px 'JetBrains Mono',monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--ar-accent)}
.ar-title{font:700 clamp(26px,4vw,38px) 'Cinzel',Georgia,serif;margin:7px 0 4px}
.ar-title:empty{display:none}
.ar-desc{color:var(--ar-muted);line-height:1.6;margin:4px 0 0;max-width:560px}
.ar-presence{display:flex;gap:8px;flex-wrap:wrap}
.ar-pchip{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border:1px solid var(--ar-border);border-radius:99px;background:rgba(7,9,18,.55);color:var(--ar-muted);font:500 11px 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.06em}
.ar-pchip b{color:var(--ar-text);font-size:13px}
.ar-pchip i{width:6px;height:6px;border-radius:50%;background:var(--ar-ok);box-shadow:0 0 10px var(--ar-ok)}
.ar-pchip.waiting i{background:var(--ar-accent-2);box-shadow:0 0 10px var(--ar-accent-2)}
.ar-pchip.racing i{background:var(--ar-accent);box-shadow:0 0 10px var(--ar-accent)}

/* ── sahne kabı ── */
.ar-stage{position:relative;border:1px solid color-mix(in srgb,var(--ar-accent) 28%,var(--ar-border));border-radius:15px;background:linear-gradient(145deg,rgba(176,108,255,.035),transparent 42%),var(--ar-panel);box-shadow:0 30px 90px rgba(0,0,0,.3);overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);flex:1 1 auto;min-height:0}
.ar-stage::after{content:"";position:absolute;inset:0;background:var(--ar-backdrop) center/cover no-repeat;opacity:.14;mask-image:radial-gradient(ellipse at center,#000 18%,transparent 72%);-webkit-mask-image:radial-gradient(ellipse at center,#000 18%,transparent 72%);pointer-events:none}
.ar-pane{position:relative;z-index:2;padding:30px;min-width:0;min-height:0;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(176,108,255,.42) transparent}
.ar-center{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center}
/* güvenli dikey ortalama: boşluk varsa ortalar, içerik taşarsa üstten başlayıp kayar (justify-content:center üst kısmı kesiyordu) */
.ar-center>:first-child{margin-top:auto}.ar-center>:last-child{margin-bottom:auto}
.ar-h2{font:700 clamp(21px,3vw,27px) 'Cinzel',Georgia,serif;margin:7px 0}
.ar-p{color:var(--ar-muted);line-height:1.6;margin:6px 0;max-width:560px}
.ar-hint{color:var(--ar-muted);font-size:.84rem;margin:12px 0 0}
.ar-warn{margin:10px 0;padding:9px 13px;border:1px solid color-mix(in srgb,var(--ar-accent-2) 50%,var(--ar-border));border-radius:9px;background:rgba(245,196,81,.07);color:var(--ar-accent-2);font-size:.88rem}
.ar-err{color:#ff8a99}
.ar-note{flex:none;margin-top:8px;font-size:13px;color:var(--ar-muted)}
.ar-note:empty{display:none}
.ar-note.err{color:#ff8a99}
.ar-note.ok{color:var(--ar-ok)}

/* ── düğmeler ── */
.ar-btn{border:0;border-radius:8px;cursor:pointer;font-weight:700;padding:11px 20px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.ar-primary{background:var(--ar-accent);color:#10091a}
.ar-primary:hover{filter:brightness(1.08)}
.ar-secondary{background:rgba(7,9,18,.5);color:var(--ar-text);border:1px solid var(--ar-border);font-weight:500}
.ar-secondary:hover{border-color:color-mix(in srgb,var(--ar-accent) 45%,var(--ar-border))}
.ar-ghost{background:transparent;color:var(--ar-muted);border:1px solid transparent;font-weight:500;padding:8px 12px}
.ar-ghost:hover{color:var(--ar-text);border-color:var(--ar-border)}
.ar-danger{background:var(--ar-danger);color:#1a0509}
.ar-btn[disabled]{opacity:.45;cursor:default;filter:none}
.ar-actions{display:flex;justify-content:center;gap:9px;margin-top:22px;flex-wrap:wrap}
.ar-actions.tight{margin-top:12px}

/* ── lobi ── */
.ar-tabs{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin-bottom:18px}
.ar-tab{padding:9px 14px;background:transparent;color:var(--ar-muted);border:1px solid transparent;border-radius:8px;cursor:pointer}
.ar-tab:hover{color:var(--ar-text)}
.ar-tab.on{color:var(--ar-text);border-color:color-mix(in srgb,var(--ar-accent) 45%,var(--ar-border));background:rgba(176,108,255,.08)}
.ar-lobby-body{width:min(660px,100%);display:flex;flex-direction:column;align-items:center}
.ar-options{margin:16px 0 0;width:100%}
.ar-two{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px;text-align:left;width:100%}
.ar-box{padding:18px;border:1px solid var(--ar-border);border-radius:12px;background:rgba(7,9,18,.62);min-width:0}
.ar-box h3{margin:0 0 6px;font:700 15px 'Cinzel',serif}
.ar-box p{margin:0 0 12px;font-size:.84rem;color:var(--ar-muted)}
.ar-input{width:100%;padding:11px 12px;border:1px solid var(--ar-border);border-radius:8px;background:#070912;color:var(--ar-text);font:600 18px 'JetBrains Mono',monospace;letter-spacing:.2em;text-transform:uppercase;text-align:center}

/* ── arama (radar) ── */
.ar-radar{width:190px;height:190px;margin:0 auto 14px;position:relative;display:grid;place-items:center}
.ar-ring{position:absolute;inset:0;border:1px solid rgba(176,108,255,.22);border-radius:50%;animation:hr-ar-ring 2.2s ease-out infinite}
.ar-ring.r2{inset:26px;animation-delay:-.8s}.ar-ring.r3{inset:52px;animation-delay:-1.5s}
.ar-radar::before{content:"";position:absolute;inset:12px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 70%,rgba(176,108,255,.22) 90%,transparent);animation:hr-ar-scan 2.6s linear infinite}
.ar-node{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--ar-accent);box-shadow:0 0 12px var(--ar-accent)}
.ar-node.n1{left:12px;top:73px;animation:hr-ar-node 1.5s ease-in-out infinite}.ar-node.n2{right:22px;top:35px;animation:hr-ar-node 1.5s ease-in-out -.6s infinite}.ar-node.n3{right:14px;bottom:46px;animation:hr-ar-node 1.5s ease-in-out -1s infinite}
.ar-timer{font:600 13px 'JetBrains Mono',monospace;color:var(--ar-accent-2);letter-spacing:.12em;margin-bottom:6px}
.ar-slow{margin-top:14px;padding:12px 14px;border:1px solid var(--ar-border);border-radius:10px;background:rgba(7,9,18,.55);max-width:480px}
.ar-slow p{margin:0;color:var(--ar-muted);font-size:.88rem}
.ar-emblem{display:block;width:84px;height:84px;object-fit:contain;position:relative;filter:drop-shadow(0 6px 18px rgba(176,108,255,.45));animation:hr-ar-emblem 2.6s ease-in-out infinite}
.ar-prep .ar-emblem{width:92px;height:92px;margin-bottom:14px}
.ar-loader{width:52px;height:52px;border-radius:50%;border:2px solid var(--ar-border);border-top-color:var(--ar-accent);animation:hr-ar-scan 1s linear infinite;margin-bottom:14px}
.ar-loader i{display:none}
.ar-progress{position:relative;height:2px;margin:24px auto 4px;background:#252b38;overflow:hidden;width:min(440px,86%)}
.ar-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--ar-accent),var(--ar-accent-2));box-shadow:0 0 14px var(--ar-accent);animation:hr-ar-load 3.6s cubic-bezier(.2,.75,.25,1) forwards}

/* ── bekleme lobisi ── */
.ar-meter{width:min(520px,100%);margin:10px 0 4px}
.ar-meter-head{display:flex;justify-content:space-between;gap:12px;font:500 11px 'JetBrains Mono',monospace;color:var(--ar-muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:7px}
.ar-meter-time{color:var(--ar-accent-2);font-size:13px}
.ar-meter-bar{height:4px;border-radius:2px;background:#252b38;overflow:hidden}
.ar-meter-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--ar-accent),var(--ar-accent-2));box-shadow:0 0 12px var(--ar-accent);transition:width .25s linear}
.ar-players{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:9px;width:min(780px,100%)}
/* NOT: Chromium'da bu kartlar (padding'i stil sayfasından gelen li) ızgara hücresinde ~156px'e şişiyordu (ölçüm: 56px olmalı); padding'i !important
   yazmak sezgisel boyutu düzeltiyor — kök neden belirlenemedi, davranış tarayıcıda ölçülerek doğrulandı. */
.ar-pcard{display:flex;align-items:center;gap:10px;padding:10px 12px!important;border:1px solid var(--ar-border);border-radius:11px;background:rgba(7,9,18,.62);min-width:0;text-align:left;animation:hr-ar-arrive .4s ease-out}
.ar-pcard.you{border-color:color-mix(in srgb,var(--ar-accent) 55%,var(--ar-border));background:rgba(176,108,255,.08)}
.ar-pcard.ready{border-color:color-mix(in srgb,var(--ar-ok) 55%,var(--ar-border))}
.ar-pcard.empty{border-style:dashed;opacity:.5;animation:none}
.ar-avatar{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:rgba(176,108,255,.13);color:var(--ar-accent);font:700 14px 'Cinzel',serif}
.ar-pcard.bot .ar-avatar{background:rgba(245,196,81,.12);color:var(--ar-accent-2)}
.ar-pname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.ar-pname em{font:500 10px 'JetBrains Mono',monospace;color:var(--ar-muted);text-transform:uppercase;letter-spacing:.08em;margin-left:7px;font-style:normal}
.ar-pname em.bot{color:var(--ar-accent-2)}
.ar-pstate{font:600 10px 'JetBrains Mono',monospace;color:var(--ar-muted);text-transform:uppercase;white-space:nowrap}
.ar-pcard.ready .ar-pstate{color:var(--ar-ok)}
.ar-codebox{margin-top:16px;padding:14px 18px;border:1px dashed color-mix(in srgb,var(--ar-accent-2) 55%,var(--ar-border));border-radius:12px;background:rgba(245,196,81,.05);max-width:100%}
.ar-code{margin:6px auto;display:inline-block;font:700 26px 'JetBrains Mono',monospace;letter-spacing:.28em;color:var(--ar-accent-2);user-select:all}
.ar-linkline{font:500 11px 'JetBrains Mono',monospace;color:var(--ar-muted);overflow-wrap:anywhere;margin:2px 0 10px;user-select:all}

/* ── yarış iskeleti ── */
.ar-race{display:flex;flex-direction:column;gap:10px;padding:14px 18px}
.ar-racebar{flex:none;display:flex;justify-content:space-between;gap:14px;align-items:center;flex-wrap:wrap}
.ar-race-left,.ar-race-right{display:flex;align-items:center;gap:12px;min-width:0;flex-wrap:wrap}
.ar-race-title{font:700 15px 'Cinzel',Georgia,serif;letter-spacing:.02em}
.ar-chip{display:inline-block;padding:4px 9px;border:1px solid var(--ar-border);border-radius:99px;font:600 10px 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em}
.ar-chip.warn{color:var(--ar-accent-2);border-color:color-mix(in srgb,var(--ar-accent-2) 50%,var(--ar-border));background:rgba(245,196,81,.07)}
.ar-clockbox{display:flex;align-items:baseline;gap:7px}
.ar-clock{font:700 20px 'JetBrains Mono',monospace;color:var(--ar-accent-2);font-variant-numeric:tabular-nums}
.ar-clock.low{color:var(--ar-danger)}
.ar-clock-label{font:500 10px 'JetBrains Mono',monospace;color:var(--ar-muted);text-transform:uppercase;letter-spacing:.1em}
.ar-forfeit{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ar-forfeit-q{font-size:.84rem;color:var(--ar-muted)}
.ar-forfeit .ar-btn{padding:7px 12px;font-size:.85rem}
.ar-ranks{flex:none;list-style:none;margin:0;padding:6px 8px;border:1px solid var(--ar-border);border-radius:12px;background:rgba(7,9,18,.55);display:flex;flex-direction:column;gap:2px}
/* 5+ yarışçıda iki sütun: satır sayısı yarıya iner → yarış alanı görünür yükseklikte kalır */
.ar-ranks:has(.ar-rrow:nth-child(5)){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 14px}
.ar-rrow{display:grid;grid-template-columns:22px 28px minmax(90px,1.3fr) minmax(90px,3fr) 84px;align-items:center;gap:10px;padding:3px 8px;border-radius:8px;font-size:.88rem}
.ar-rrow.you{background:rgba(176,108,255,.1)}
.ar-rrow.left{opacity:.45}
.ar-rrow.disc{opacity:.75}
.ar-rpos{font:700 12px 'JetBrains Mono',monospace;color:var(--ar-muted);text-align:center}
.ar-rrow:nth-child(1) .ar-rpos{color:var(--ar-accent-2)}
.ar-rrow .ar-avatar{width:26px;height:26px;border-radius:7px;font-size:12px}
.ar-rrow.bot .ar-avatar{background:rgba(245,196,81,.12);color:var(--ar-accent-2)}
.ar-rname{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.ar-rnt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.ar-rbar{height:8px;border-radius:4px;background:#1b2130;overflow:hidden}
.ar-rbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#7d3fd6,var(--ar-accent));box-shadow:0 0 10px color-mix(in srgb,var(--ar-accent) 55%,transparent);transition:width .35s ease}
.ar-rrow.finished .ar-rbar i{background:linear-gradient(90deg,var(--ar-ok),var(--ar-accent-2))}
.ar-rlabel{font:600 12px 'JetBrains Mono',monospace;text-align:right;font-variant-numeric:tabular-nums;min-width:0}
.ar-rstate{font:600 9px 'JetBrains Mono',monospace;color:var(--ar-ok);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.ar-rstate[data-disc="1"]{color:var(--ar-accent-2)}
.ar-rstate:empty{display:none}
/* oyuna özel içerik yuvası + geri sayım katmanı */
.ar-arena{position:relative;border:1px solid var(--ar-border);border-radius:12px;background:rgba(7,9,18,.4);min-height:min(200px,100%);overflow:hidden;flex:1 1 auto;display:flex;flex-direction:column}
.ar-content{position:relative;flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;padding:14px;scrollbar-width:thin;scrollbar-color:rgba(176,108,255,.42) transparent}
.ar-countdown{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:rgba(7,9,18,.93);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.ar-cd-label{font:600 11px 'JetBrains Mono',monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--ar-accent)}
.ar-cd-num{font:700 clamp(72px,16vw,128px)/1 'Cinzel',Georgia,serif;color:var(--ar-accent-2);text-shadow:0 0 44px rgba(245,196,81,.45)}
.ar-cd-num.pop{animation:hr-ar-pop .85s ease-out}
.ar-cd-num.go{color:var(--ar-ok);text-shadow:0 0 44px rgba(41,230,165,.5);font-size:clamp(48px,11vw,84px);animation:hr-ar-pop .65s ease-out}
.ar-arena[data-locked="true"] .ar-content{filter:blur(6px);pointer-events:none;user-select:none}
.ar-answerbar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:36px}
.ar-status{margin:0;font-size:.88rem;color:var(--ar-muted);flex:1;min-width:0}
.ar-status.err{color:#ff8a99}
.ar-status.ok{color:var(--ar-ok)}

/* ── bitiş ── */
.ar-end{display:flex;flex-direction:column;align-items:center;text-align:center}
.ar-rewards{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:14px 0 4px;padding:11px 16px;border:1px solid color-mix(in srgb,var(--ar-accent-2) 40%,var(--ar-border));border-radius:12px;background:linear-gradient(90deg,rgba(245,196,81,.07),rgba(176,108,255,.07))}
.ar-rewards-label{font:600 10px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--ar-muted);margin-right:6px}
.ar-reward{padding:5px 11px;border-radius:99px;border:1px solid var(--ar-border);font:700 12px 'JetBrains Mono',monospace;background:rgba(7,9,18,.6)}
.ar-reward.season{color:var(--ar-accent-2);border-color:color-mix(in srgb,var(--ar-accent-2) 50%,var(--ar-border))}
.ar-reward.xp{color:var(--ar-ok);border-color:color-mix(in srgb,var(--ar-ok) 45%,var(--ar-border))}
.ar-reward.cosmetic{color:var(--ar-accent);border-color:color-mix(in srgb,var(--ar-accent) 50%,var(--ar-border))}
.ar-reward.throttled{color:var(--ar-muted);font-weight:600}
.ar-podium{list-style:none;margin:20px 0 6px;padding:0;display:flex;align-items:flex-end;justify-content:center;gap:12px;width:min(560px,100%)}
.ar-pod{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px 12px;border:1px solid var(--ar-border);border-radius:12px 12px 4px 4px;background:rgba(7,9,18,.62);animation:hr-ar-rise .6s ease-out both}
.ar-pod.p1{min-height:176px;border-color:color-mix(in srgb,var(--ar-accent-2) 60%,var(--ar-border));background:linear-gradient(180deg,rgba(245,196,81,.1),rgba(7,9,18,.62))}
.ar-pod.p2{min-height:144px}.ar-pod.p3{min-height:122px}
.ar-pod.you{box-shadow:0 0 0 1px var(--ar-accent),0 0 24px color-mix(in srgb,var(--ar-accent) 35%,transparent)}
.ar-pod.left{opacity:.55}
.ar-pod-place{font:700 24px 'Cinzel',serif;color:var(--ar-accent-2)}
.ar-pod.p2 .ar-pod-place{color:#cfd6e4}.ar-pod.p3 .ar-pod-place{color:#d49a6a}
.ar-pod-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9rem}
.ar-pod-metric{font:600 12px 'JetBrains Mono',monospace;color:var(--ar-muted)}
.ar-list{list-style:none;margin:10px 0 0;padding:0;width:min(560px,100%);display:flex;flex-direction:column;gap:4px;text-align:left}
.ar-lrow{display:grid;grid-template-columns:28px 28px minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:6px 10px;border:1px solid var(--ar-border);border-radius:9px;background:rgba(7,9,18,.5)}
.ar-lrow.you{border-color:color-mix(in srgb,var(--ar-accent) 55%,var(--ar-border));background:rgba(176,108,255,.08)}
.ar-lrow.left{opacity:.55}
.ar-lpos{font:700 12px 'JetBrains Mono',monospace;color:var(--ar-muted);text-align:center}
.ar-lrow .ar-avatar{width:26px;height:26px;font-size:12px;border-radius:7px}
.ar-lname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ar-lmetric{font:600 12px 'JetBrains Mono',monospace;color:var(--ar-muted)}
.ar-lrewards{display:flex;gap:5px}
.ar-lrewards .ar-reward{padding:2px 7px;font-size:10px}
.ar-metrics{margin:18px 0 0;width:min(560px,100%);padding:14px 16px;border:1px solid var(--ar-border);border-radius:12px;background:rgba(7,9,18,.55);text-align:left}
.ar-metrics h3{margin:0 0 10px;font:600 10px 'JetBrains Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--ar-muted)}
.ar-dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin:0}
.ar-dlrow{padding:9px 10px;border:1px solid var(--ar-border);border-radius:9px;text-align:center;background:rgba(7,9,18,.5)}
.ar-dlrow dt{font:500 9px 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--ar-muted);margin-bottom:3px}
.ar-dlrow dd{margin:0;font:700 17px 'JetBrains Mono',monospace}

/* ── bant ── */
.ar-banner{margin:0 0 10px;padding:9px 14px;border-radius:9px;border:1px solid color-mix(in srgb,var(--ar-accent-2) 50%,var(--ar-border));background:rgba(245,196,81,.08);color:var(--ar-accent-2);font-size:.88rem}
.ar-banner.ok{border-color:color-mix(in srgb,var(--ar-ok) 50%,var(--ar-border));background:rgba(41,230,165,.08);color:var(--ar-ok)}

@keyframes hr-ar-ring{0%{transform:scale(.72);opacity:0}35%{opacity:1}100%{transform:scale(1.07);opacity:0}}
@keyframes hr-ar-scan{to{transform:rotate(360deg)}}
@keyframes hr-ar-node{50%{transform:scale(1.65);opacity:.45}}
@keyframes hr-ar-arrive{from{transform:translateY(8px);opacity:0}}
@keyframes hr-ar-pop{from{transform:scale(.55);opacity:0}60%{transform:scale(1.08)}}
@keyframes hr-ar-rise{from{transform:translateY(24px);opacity:0}}
@keyframes hr-ar-emblem{50%{transform:scale(1.05)}}
@keyframes hr-ar-load{0%{width:6%}35%{width:42%}72%{width:76%}100%{width:100%}}

/* ── Kısa ekran sıkıştırması (viewport-fit): lobi/davet/antrenman sahnesi 1366×768 ve 1280×720'de kaydırmasız sığsın ── */
@media(max-height:830px){
  .ar-pane{padding:18px 22px}
  .ar-tabs{margin-bottom:10px;gap:5px}
  .ar-tab{padding:7px 13px}
  .ar-h2{font-size:clamp(19px,2.4vw,24px);margin:3px 0}
  .ar-p{margin:3px 0;font-size:.9rem;line-height:1.45}
  .ar-options{margin-top:10px}
  .ar-actions{margin-top:14px}
  .ar-two{gap:12px;margin-top:12px}
  .ar-box{padding:13px 15px}
  .ar-box h3{margin-bottom:4px}
  .ar-box p{margin-bottom:9px}
  .ar-btn{padding:9px 18px}
  .ar-code{font-size:23px;margin:2px auto}
  .ar-codebox{margin-top:10px;padding:10px 16px}
  .ar-players{margin-top:10px;gap:6px;grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
  .ar-pcard{padding:6px 10px!important}
  .ar-pcard .ar-avatar{width:28px;height:28px;font-size:12px}
  .ar-meter{margin:6px 0 2px}
  .ar-hint{margin-top:6px}
  .ar-linkline{margin:0 0 6px}
  .ar-radar{width:150px;height:150px;margin-bottom:8px}
  .ar-radar::before{inset:9px}
  .ar-ring.r2{inset:21px}.ar-ring.r3{inset:42px}
  .ar-node.n1{left:9px;top:58px}.ar-node.n2{right:17px;top:28px}.ar-node.n3{right:11px;bottom:36px}
  .ar-slow{margin-top:8px;padding:9px 12px}
  .ar-prep .ar-emblem{width:72px;height:72px;margin-bottom:8px}
  .ar-radar .ar-emblem{width:68px;height:68px}
  /* bitiş sahnesi: podyum + metrik + eylem tek ekranda */
  .ar-end>.ar-podium,.ar-end .ar-podium{margin:10px 0 4px}
  .ar-pod{padding:10px 8px 8px;gap:4px}
  .ar-pod.p1{min-height:128px}.ar-pod.p2{min-height:104px}.ar-pod.p3{min-height:88px}
  .ar-pod-place{font-size:20px}
  .ar-metrics{margin-top:10px;padding:10px 14px}
  .ar-metrics h3{margin-bottom:6px}
  .ar-dlrow{padding:6px 8px}.ar-dlrow dd{font-size:15px}
  .ar-rewards{margin:8px 0 2px;padding:8px 14px}
  .ar-list{margin-top:6px}.ar-lrow{padding:4px 10px}
}
@media(max-height:730px){
  .ar-pane{padding:12px 18px}
  .ar-lobby-body .ar-eyebrow{display:none}
  .ar-lobby-body .ar-p{display:none}
  .ar-box p{display:none}
  .ar-tabs{margin-bottom:6px}
  .ar-radar{width:118px;height:118px}
  .ar-ring.r2{inset:16px}.ar-ring.r3{inset:33px}
  .ar-radar .ar-emblem{width:54px;height:54px}
  .ar-prep .ar-emblem{width:56px;height:56px;margin-bottom:6px}
  .ar-node.n1{top:44px}.ar-node.n2{top:20px}.ar-node.n3{bottom:28px}
  .ar-pod.p1{min-height:108px}.ar-pod.p2{min-height:88px}.ar-pod.p3{min-height:74px}
  .ar-pod{padding:8px 6px 6px;gap:2px}
  .ar-end .ar-actions{margin-top:10px}
  .ar-race{gap:7px;padding:10px 14px}
  .ar-content{padding:4px 12px}
  .ar-answerbar{min-height:24px}
  .ar-rrow{padding:1px 8px}
  .ar-ranks{padding:4px 8px}
}
@media(max-width:860px){.ar-two{grid-template-columns:1fr}}
@media(max-width:700px){
  .ar-page{padding-top:92px}
  .ar-pane{padding:14px 12px}
  .ar-race{padding:10px 8px}
  /* mobil viewport-fit: sekmeler tek satırda segment, açıklama metinleri gizli, kutular dar */
  .ar-tabs{flex-wrap:nowrap;gap:4px;width:100%;margin-bottom:8px}
  .ar-tab{flex:1 1 0;min-width:0;padding:7px 4px;font-size:.8rem;line-height:1.2;white-space:normal;text-align:center}
  .ar-lobby-body .ar-eyebrow,.ar-lobby-body .ar-p{display:none}
  .ar-h2{margin:2px 0 4px}
  .ar-options{margin-top:6px}
  .ar-actions{margin-top:12px}
  .ar-two{gap:8px;margin-top:8px}
  .ar-box{padding:10px 12px}
  .ar-box p{display:none}
  .ar-box h3{margin-bottom:8px}
  .ar-input{font-size:16px;padding:8px 10px}
  .ar-head{margin-bottom:6px;gap:6px}
  .ar-head .ar-eyebrow{display:none}
  .ar-pchip{padding:4px 9px;font-size:10px}
  /* mobil yarış sıralaması: tek satır (sıra · ad · skor) + ince bar; avatar gizli */
  .ar-ranks{padding:4px 6px}
  .ar-rrow{grid-template-columns:16px minmax(0,1fr) auto;grid-template-rows:auto 5px;row-gap:3px;padding:3px 4px}
  .ar-rrow .ar-avatar{display:none}
  .ar-rpos{grid-row:1;grid-column:1}.ar-rname{grid-row:1;grid-column:2}.ar-rlabel{grid-row:1;grid-column:3}
  .ar-rbar{grid-row:2;grid-column:1 / 4;height:5px}
  .ar-race-title{font-size:13px}
  .ar-answerbar{min-height:24px}
  /* mobil bitiş + bekleme lobisi */
  .ar-podium{margin:8px 0 2px;gap:5px}
  .ar-pod.p1{min-height:92px}.ar-pod.p2{min-height:78px}.ar-pod.p3{min-height:66px}
  .ar-pod{padding:6px 4px 6px;gap:2px}
  .ar-pod-place{font-size:17px}
  .ar-pod-name{font-size:.78rem}
  .ar-metrics{margin-top:8px;padding:8px 10px}
  .ar-dl{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
  .ar-dlrow{padding:5px 4px}.ar-dlrow dd{font-size:14px}
  .ar-rewards{margin:6px 0 2px;padding:6px 10px}
  .ar-end .ar-actions{margin-top:8px}
  .ar-codebox{margin-top:6px;padding:8px 12px}
  .ar-code{font-size:18px;margin:0 auto}
  .ar-players{gap:5px;margin-top:6px}
  .ar-pcard{padding:5px 8px!important}
  .ar-rrow{grid-template-columns:20px 24px minmax(0,1fr) auto;row-gap:4px;column-gap:8px}
  .ar-rpos{grid-row:1;grid-column:1}.ar-rrow .ar-avatar{grid-row:1;grid-column:2}.ar-rname{grid-row:1;grid-column:3}
  .ar-rlabel{grid-row:1;grid-column:4;white-space:nowrap;font-size:11px}
  .ar-rbar{grid-row:2;grid-column:3 / 5}
  .ar-lrow{grid-template-columns:24px 26px minmax(0,1fr) auto}.ar-lrewards{grid-column:3 / 5}
  .ar-podium{gap:6px}.ar-pod{padding:12px 4px 10px}
  .ar-players{grid-template-columns:1fr 1fr}
  .ar-code{font-size:20px;letter-spacing:.2em}
}
@media(max-width:340px){.ar-players{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .ar-shell *,.ar-shell *::before,.ar-shell *::after{animation:none!important;transition:none!important}
  .ar-progress i{width:72%}
}