/* Decode Race — arena kabuğu (hr-arena-shell) için OYUN ADAPTÖRÜ stilleri (hr-arena-decode.js).
 *
 * Sınıflar `ar-dc-` önekli, animasyonlar `hr-dc-` önekli. Mühür / katman görsel dili kullanıcının mevcut Decode Race
 * sayfasıyla aynıdır: kare köşeler, mor mühür yüzeyi (köşe çerçeveli "IV" damgası), aether-yeşil doğru/başarı,
 * altın Combo, ekmek kırıntısı katman izi, decoder tezgahı. `.ar-theme-decode` = YARIŞ SAHNESİ TEMA YUVASI: yalnız
 * renk/kenar değişkenleri + kare köşe. Premium mühür/rün sahne görseli F8'de `--ar-backdrop` ve `.ar-content` yuvasına BAĞLANDI (bkz. aşağıdaki 'yarış sahnesi arka planı' bloğu). */

/* ── tema yuvası ── */
.ar-theme-decode{--ar-accent:var(--hr-accent,#b06cff);--ar-accent-2:var(--hr-accent-2,#f5c451);--ar-ok:#00ff9c}
.ar-theme-decode .ar-stage,.ar-theme-decode .ar-arena,.ar-theme-decode .ar-ranks,.ar-theme-decode .ar-btn,.ar-theme-decode .ar-box,
.ar-theme-decode .ar-pcard,.ar-theme-decode .ar-metrics,.ar-theme-decode .ar-dlrow,.ar-theme-decode .ar-input,.ar-theme-decode .ar-pod,
.ar-theme-decode .ar-lrow,.ar-theme-decode .ar-codebox,.ar-theme-decode .ar-slow,.ar-theme-decode .ar-tab{border-radius:0}
.ar-theme-decode .ar-title{display:none} /* sayfa kahramanı zaten "Decode Race" başlığını taşır */
.ar-theme-decode .ar-head{margin-bottom:10px}
.ar-theme-decode .ar-stage{min-height:0}
.ar-theme-decode .ar-pane{padding:clamp(16px,2.4vh,26px)}
/* ── yarış sahnesi arka planı (F8, onaylı Codex görseli assets/arena-scenes/race-decode.webp) ──
 * Lobi/bekleme: kabuğun hafif maskeli --ar-backdrop katmanı (opacity .14). Yarış + bitiş: sahne tam kapsar; HUD/metin
 * okunabilirliği için üstte iki karartma (merkez radial + dikey gradient). Statik görsel — animasyon yok. */
.ar-theme-decode{--ar-backdrop:url('/assets/arena-scenes/race-decode.webp')}
.ar-theme-decode[data-ar-phase="race"] .ar-stage::after,.ar-theme-decode[data-ar-phase="end"] .ar-stage::after{background:radial-gradient(ellipse 62% 70% at 50% 52%,rgba(6,8,16,.46),rgba(6,8,16,.12) 72%,transparent),linear-gradient(180deg,rgba(6,8,16,.3),rgba(6,8,16,.58)),var(--ar-backdrop) 50% 38%/cover no-repeat;opacity:1;-webkit-mask-image:none;mask-image:none}
.ar-theme-decode[data-ar-phase="race"] .ar-arena{background:rgba(7,9,18,.58)}
.ar-theme-decode .ar-ranks{max-height:min(150px,17vh);overflow-y:auto;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--ar-accent) 42%,transparent) transparent}
.ar-theme-decode .ar-content{padding:0;min-height:0}
.ar-theme-decode .ar-arena{min-height:0}
.ar-theme-decode[data-ar-phase="race"] .ar-head,.ar-theme-decode[data-ar-phase="end"] .ar-head{display:none}
.ar-theme-decode .ar-race{gap:8px;padding:12px 16px}
.ar-theme-decode .ar-ranks{padding:6px 10px;gap:2px}.ar-theme-decode .ar-rrow{padding:3px 8px}.ar-theme-decode .ar-answerbar{min-height:26px}

/* ── lobi seçenekleri ── */
.ar-dc-opts{width:100%;text-align:left}
.ar-dc-label{font:600 10px 'JetBrains Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--ar-muted);margin:0 0 7px}
.ar-dc-seg{display:flex;gap:6px;flex-wrap:wrap}
.ar-dc-segbtn{border:1px solid var(--ar-border);border-radius:0;background:rgba(7,9,18,.5);color:var(--ar-muted);padding:9px 16px;cursor:pointer;font-size:.9rem}
.ar-dc-segbtn:hover{color:var(--ar-text)}
.ar-dc-segbtn[aria-pressed="true"]{color:var(--ar-text);border-color:var(--ar-accent);background:color-mix(in srgb,var(--ar-accent) 9%,rgba(7,9,18,.5))}

/* ── yarış içeriği ── */
.ar-dc{display:flex;flex-direction:column;min-width:0}
.ar-dc-hud{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--ar-border)}
.ar-dc-stat{padding:9px 14px;border-right:1px solid var(--ar-border);white-space:nowrap;min-width:0}
.ar-dc-stat:last-child{border-right:0}
.ar-dc-stat strong{display:block;font:700 22px 'JetBrains Mono',monospace;line-height:1.1;color:var(--ar-text);font-variant-numeric:tabular-nums}
.ar-dc-stat.combo strong{color:var(--ar-accent-2);text-shadow:0 0 18px rgba(245,196,81,.22)}
.ar-dc-stat.score strong{color:var(--ar-accent-2)}
.ar-dc-stat>span{display:block;margin-top:3px;font:600 9px 'JetBrains Mono',monospace;color:var(--ar-muted);text-transform:uppercase;letter-spacing:.12em}
.ar-dc-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.95fr);min-width:0}

/* mühür paneli */
.ar-dc-seal{padding:16px 18px;display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--ar-border)}
.ar-dc-sealhead{display:flex;justify-content:space-between;gap:12px;align-items:center}
.ar-dc-sealhead small{color:var(--ar-muted);font-size:.78rem}
.ar-dc-badge{flex:none;padding:5px 8px;border:1px solid rgba(176,108,255,.35);color:#d2aeff;font:600 9px 'JetBrains Mono',monospace;letter-spacing:.09em;white-space:nowrap}
.ar-dc-crumbs{display:flex;align-items:center;gap:5px;overflow-x:auto;padding:12px 1px 10px;scrollbar-width:thin}
.ar-dc-crumb{white-space:nowrap;font:600 10px 'JetBrains Mono',monospace;color:#637080;padding:5px 8px;border:1px solid var(--ar-border)}
.ar-dc-crumb.done{color:var(--ar-ok);border-color:rgba(0,255,156,.25)}
.ar-dc-crumb.current{color:#d2aeff;border-color:rgba(176,108,255,.5);background:rgba(176,108,255,.08)}
.ar-dc-arrow{color:#637080;font-size:10px}
.ar-dc-slab{position:relative;flex:1;min-height:104px;max-height:max(110px,24vh);border:1px solid rgba(176,108,255,.27);background:linear-gradient(135deg,rgba(176,108,255,.06),rgba(6,8,16,.82) 38%,rgba(0,255,156,.025));padding:20px 22px;display:flex;align-items:center;overflow:auto;isolation:isolate;scrollbar-width:thin}
.ar-dc-slab::before{content:"";position:absolute;inset:8px;border:1px solid rgba(176,108,255,.08);pointer-events:none}
.ar-dc-slab::after{content:"IV";position:absolute;right:16px;bottom:10px;color:rgba(176,108,255,.18);font:700 34px 'Cinzel',Georgia,serif;pointer-events:none}
.ar-dc-cipher{font:500 clamp(14px,1.6vw,19px)/1.8 'JetBrains Mono',monospace;overflow-wrap:anywhere;word-break:break-word;color:#e1d9ff;letter-spacing:.035em;text-shadow:0 0 16px rgba(176,108,255,.18);white-space:pre-wrap;user-select:text}
.ar-dc-slab.open{border-color:rgba(0,255,156,.45);background:linear-gradient(135deg,rgba(0,255,156,.07),rgba(6,8,16,.82) 45%)}
.ar-dc-slab.open::before{content:attr(data-label);inset:auto auto auto 14px;top:8px;border:0;color:var(--ar-ok);font:700 9px 'JetBrains Mono',monospace;letter-spacing:.16em}
.ar-dc-slab.open .ar-dc-cipher{color:#bfffe7;text-shadow:0 0 16px rgba(0,255,156,.2);margin-top:12px}
.ar-dc-slab.peel{animation:hr-dc-peel .65s ease}
.ar-dc-slab.shake{animation:hr-dc-shake .35s ease;border-color:rgba(255,92,108,.7)}

/* decoder tezgahı */
.ar-dc-bench{padding:14px 16px;min-width:0}
.ar-dc-title{font:700 16px 'Cinzel',Georgia,serif;margin:5px 0 3px}
.ar-dc-note{margin:0 0 10px;color:var(--ar-muted);font-size:.76rem;line-height:1.4}
.ar-dc-tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.ar-dc-tool{border:1px solid var(--ar-border);border-radius:0;background:#060810;color:var(--ar-text);padding:8px 8px;text-align:left;min-height:48px;cursor:pointer;min-width:0}
.ar-dc-tool:hover:not(:disabled){border-color:var(--ar-accent);background:rgba(176,108,255,.07)}
.ar-dc-tool:disabled{opacity:.5;cursor:default}
.ar-dc-tool b{display:block;font-size:11.5px;line-height:1.25}
.ar-dc-tool small{display:block;font:9px 'JetBrains Mono',monospace;color:var(--ar-muted);margin-top:3px;overflow-wrap:anywhere}
.ar-dc-xorrow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;padding:8px 10px;border:1px solid var(--ar-border);background:#1c2530}
.ar-dc-xorrow span{font:10px 'JetBrains Mono',monospace;letter-spacing:.08em;color:var(--ar-muted)}
.ar-dc-xor{min-width:92px;padding:6px 8px;border:1px solid var(--ar-border);border-radius:0;background:#060810;color:var(--ar-ok);font:700 12px 'JetBrains Mono',monospace}
.ar-dc-xor:disabled{opacity:.5}

/* eylemler */
.ar-dc-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap;padding:10px 16px;border-top:1px solid var(--ar-border)}
.ar-dc-break,.ar-dc-hint{min-height:40px;border:1px solid rgba(255,255,255,.16);border-radius:0;background:transparent;color:var(--ar-text);padding:0 16px;cursor:pointer;font-weight:600}
.ar-dc-hint:hover:not(:disabled){border-color:var(--ar-accent);background:rgba(176,108,255,.07)}
.ar-dc-hint em{font-style:normal;color:var(--ar-accent-2)}
.ar-dc-break{min-width:150px;background:var(--ar-ok);border-color:var(--ar-ok);color:#04110d}
.ar-dc-break:disabled,.ar-dc-hint:disabled{opacity:.38;cursor:not-allowed}
.ar-dc-break:disabled{background:transparent;border-color:rgba(255,255,255,.16);color:var(--ar-muted)}
.ar-dc-fb{margin-left:auto;min-height:36px;display:flex;align-items:center;padding:0 12px;border-left:2px solid var(--ar-ok);background:rgba(0,255,156,.07);font-size:12px;color:#bfffe7;min-width:0;overflow-wrap:anywhere}
.ar-dc-fb.error{border-color:var(--ar-danger);background:rgba(255,92,108,.08);color:#ffc2c8}
.ar-dc-fb.hint{border-color:var(--ar-accent-2);background:rgba(245,196,81,.08);color:#ffe3a1}
.ar-dc-fb[hidden]{display:none}

/* bitiş metrik bloğu */
.ar-dc-metrics{display:flex;flex-direction:column;gap:10px}
.ar-dc-plain{padding:9px 12px;border:1px solid rgba(0,255,156,.3);background:rgba(0,255,156,.05);font:600 13px 'JetBrains Mono',monospace;color:#bfffe7;overflow-wrap:anywhere}
.ar-dc-plain span{display:block;margin-bottom:3px;font:700 9px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--ar-ok)}

@keyframes hr-dc-peel{0%{box-shadow:0 0 0 rgba(0,255,156,0)}35%{box-shadow:0 0 34px rgba(0,255,156,.35);border-color:rgba(0,255,156,.7)}100%{box-shadow:0 0 0 rgba(0,255,156,0)}}
@keyframes hr-dc-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}

@media(max-width:860px){
  .ar-dc-grid{grid-template-columns:1fr}
  .ar-dc-seal{border-right:0;border-bottom:1px solid var(--ar-border)}
  .ar-dc-slab{max-height:26vh;min-height:110px}
}
@media(max-width:520px){
  .ar-dc-stat{padding:7px 8px}
  .ar-dc-stat strong{font-size:16px}
  .ar-dc-stat>span{font-size:7px;letter-spacing:.06em}
  .ar-dc-seal,.ar-dc-bench{padding:10px 10px}
  .ar-dc-sealhead small{display:none}
  .ar-dc-note{display:none}
  .ar-dc-tool{min-height:40px;padding:6px 6px}
  .ar-dc-tool b{font-size:11px}
  .ar-dc-tool small{display:none}
  .ar-dc-actions{padding:8px 10px}
  .ar-dc-actions .ar-dc-break,.ar-dc-actions .ar-dc-hint{flex:1}
  .ar-dc-fb{margin-left:0;width:100%}
  .ar-theme-decode .ar-ranks{max-height:min(128px,16vh)}
}
@media(max-height:820px){
  .ar-dc-note{display:none}.ar-dc-sealhead small{display:none}
  .ar-dc-tool{min-height:42px}.ar-dc-tool small{display:none}
  .ar-dc-slab{padding:12px 18px}
  .ar-dc-actions{padding:8px 14px}.ar-dc-break,.ar-dc-hint{min-height:36px}
  .ar-dc-stat{padding:7px 14px}.ar-dc-crumbs{padding:8px 1px 8px}
}
@media(max-height:700px){
  .ar-theme-decode .ar-race{padding:8px 14px;gap:6px}
  .ar-dc-tool{min-height:38px}.ar-dc-actions{padding:6px 14px}.ar-dc-break,.ar-dc-hint{min-height:34px}
  .ar-dc-stat{padding:5px 14px}.ar-dc-stat strong{font-size:18px}.ar-dc-bench{padding:10px 14px}.ar-dc-seal{padding:12px 16px}
}
@media(max-width:360px){.ar-dc-tools{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){
  .ar-dc-slab.peel,.ar-dc-slab.shake{animation:none}
}
.ar-dc-label.gap{margin-top:14px}

/* viewport-fit (2026-10-22): mobilde şifre penceresi kısalır → araç tezgâhı kaydırmasız görünür */
@media(max-width:520px){.ar-dc-slab{max-height:17vh;min-height:80px}}