/* Port Rush — arena kabuğu (hr-arena-shell) için OYUN ADAPTÖRÜ stilleri (hr-arena-port-rush.js).
 *
 * Sınıflar `ar-pr-` önekli, animasyonlar `hr-pr-` önekli. Liman / port-tarayıcı estetiği kullanıcının mevcut Port Rush
 * görsel diliyle aynıdır: kare köşeler, mor aksan, altın süre, yeşil/kırmızı cevap işareti, ızgaralı büyük port numarası.
 * `.ar-theme-portrush` = YARIŞ SAHNESİ TEMA YUVASI: yalnız renk/kenar değişkenleri + kare köşe. Premium liman/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-portrush{--ar-accent:var(--hr-accent,#b06cff);--ar-accent-2:var(--hr-accent-2,#f5c451)}
.ar-theme-portrush .ar-stage,.ar-theme-portrush .ar-arena,.ar-theme-portrush .ar-ranks,.ar-theme-portrush .ar-btn,.ar-theme-portrush .ar-box,
.ar-theme-portrush .ar-pcard,.ar-theme-portrush .ar-metrics,.ar-theme-portrush .ar-dlrow,.ar-theme-portrush .ar-input,.ar-theme-portrush .ar-pod,
.ar-theme-portrush .ar-lrow,.ar-theme-portrush .ar-codebox,.ar-theme-portrush .ar-slow,.ar-theme-portrush .ar-tab{border-radius:0}
.ar-theme-portrush .ar-title{display:none} /* sayfa kahramanı zaten "Port Rush" başlığını taşır */
.ar-theme-portrush .ar-head{margin-bottom:10px}
.ar-theme-portrush .ar-stage{min-height:0}
.ar-theme-portrush .ar-pane{padding:clamp(16px,2.4vh,26px)}
/* ── yarış sahnesi arka planı (F8, onaylı Codex görseli assets/arena-scenes/race-portrush.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-portrush{--ar-backdrop:url('/assets/arena-scenes/race-portrush.webp')}
.ar-theme-portrush[data-ar-phase="race"] .ar-stage::after,.ar-theme-portrush[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-portrush[data-ar-phase="race"] .ar-arena{background:rgba(7,9,18,.58)}
/* 8 oyunculu yarışta cevap alanını ekranın dışına itmesin */
.ar-theme-portrush .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-portrush .ar-content{padding:0;min-height:0}
/* yarışta/sonuçta kabuk başlığı (eyebrow + canlı sayaçlar) gereksiz yer kaplar; dikey alan cevap alanına kalsın */
.ar-theme-portrush[data-ar-phase="race"] .ar-head,.ar-theme-portrush[data-ar-phase="end"] .ar-head{display:none}
.ar-theme-portrush .ar-race{gap:8px;padding:12px 16px}
.ar-theme-portrush .ar-ranks{padding:6px 10px;gap:2px}.ar-theme-portrush .ar-rrow{padding:3px 8px}.ar-theme-portrush .ar-answerbar{min-height:26px}
.ar-theme-portrush .ar-arena{min-height:0}

/* ── yarış içeriği ── */
.ar-pr{display:flex;flex-direction:column;min-width:0}
.ar-pr-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--ar-border)}
.ar-pr-stat{padding:10px 14px;border-right:1px solid var(--ar-border);white-space:nowrap;min-width:0}
.ar-pr-stat:last-child{border-right:0}
.ar-pr-stat strong{display:inline-flex;align-items:baseline;font:700 22px 'JetBrains Mono',monospace;color:var(--ar-text);line-height:1.1;font-variant-numeric:tabular-nums}
.ar-pr-stat strong small{font:600 .52em 'JetBrains Mono',monospace;margin-left:1px}
.ar-pr-stat.primary strong{color:var(--ar-accent-2)}
.ar-pr-stat.combo strong{color:var(--ar-accent)}
.ar-pr-stat>span{display:block;margin-top:3px;font:600 9px 'JetBrains Mono',monospace;color:var(--ar-muted);text-transform:uppercase;letter-spacing:.12em}
.ar-pr-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);min-width:0}

/* port sahnesi: ızgaralı büyük port numarası */
.ar-pr-stage{position:relative;min-height:min(250px,32vh);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;border-right:1px solid var(--ar-border);overflow:hidden}
.ar-pr-stage::before{content:"";position:absolute;inset:22px;border:1px solid #282d3c;background:linear-gradient(90deg,transparent 49.8%,#ffffff07 50%),linear-gradient(0deg,transparent 49.8%,#ffffff07 50%);pointer-events:none}
.ar-pr-stage>*{position:relative}
.ar-pr-stage small{font:700 10px 'JetBrains Mono',monospace;letter-spacing:.18em;color:var(--ar-accent);padding:0 12px}
.ar-pr-stage strong{font:700 clamp(52px,min(9.4vw,15vh),118px)/1 'JetBrains Mono',monospace;letter-spacing:-.08em;color:var(--ar-text);text-shadow:0 0 38px color-mix(in srgb,var(--ar-accent) 28%,transparent)}
.ar-pr-proto{display:inline-block;border:1px solid #39324e;padding:5px 10px;color:#d2b4ff;font:700 10px 'JetBrains Mono',monospace;letter-spacing:.1em}

/* cevap paneli */
.ar-pr-panel{padding:22px 24px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.ar-pr-title{font:700 20px 'Cinzel',Georgia,serif;margin:6px 0 4px}
.ar-pr-hint{margin:0 0 14px;color:var(--ar-muted);font-size:.78rem}
.ar-pr-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ar-pr-opt{min-height:58px;display:flex;align-items:center;gap:9px;text-align:left;border:1px solid var(--ar-border);border-radius:0;background:#070910;color:var(--ar-text);padding:10px 12px;cursor:pointer;font-weight:700;min-width:0}
.ar-pr-opt:hover:not(:disabled),.ar-pr-opt:focus-visible{border-color:var(--ar-accent);background:#1d1528}
.ar-pr-opt:disabled{cursor:default}
.ar-pr-opt.sel{border-color:var(--ar-accent);background:#1d1528}
.ar-pr-opt.good{border-color:var(--ar-ok);background:#0e2d25;opacity:1}
.ar-pr-opt.bad{border-color:var(--ar-danger);background:#35151c;opacity:1}
.ar-pr-key{flex:none;display:inline-grid;place-items:center;width:24px;height:24px;border:1px solid #39324e;color:#d2b4ff;font:600 10px 'JetBrains Mono',monospace}
.ar-pr-label{min-width:0;overflow-wrap:anywhere;line-height:1.25}
.ar-pr-fb{min-height:30px;padding-top:10px;color:var(--ar-muted);font-size:.86rem}
.ar-pr-fb.good{color:var(--ar-ok)}
.ar-pr-fb.bad{color:#ff8a99}
.ar-pr-foot{display:flex;justify-content:flex-end}
.ar-pr-skip{border:1px solid transparent;background:transparent;color:var(--ar-muted);padding:6px 10px;cursor:pointer;font:600 11px 'JetBrains Mono',monospace;letter-spacing:.06em}
.ar-pr-skip:hover:not(:disabled){color:var(--ar-text);border-color:var(--ar-border)}
.ar-pr-skip:disabled{opacity:.4;cursor:default}
.ar-pr-in{animation:hr-pr-in .22s ease-out}
@keyframes hr-pr-in{from{opacity:.35;transform:translateY(4px)}}

/* tek oyunculu koşu çerçevesi (kabuk sınıflarını yeniden kullanır) */
.ar-solo{min-width:0}

@media(max-width:860px){
  .ar-pr-grid{grid-template-columns:1fr}
  .ar-pr-stage{min-height:150px;border-right:0;border-bottom:1px solid var(--ar-border)}
  .ar-pr-stage::before{inset:12px}
  .ar-pr-stage strong{font-size:clamp(56px,16vw,86px)}
}
@media(max-width:520px){
  .ar-pr-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ar-pr-stat{padding:8px 8px}
  .ar-pr-stat strong{font-size:16px}
  .ar-pr-stat>span{font-size:7px;letter-spacing:.06em}
  .ar-pr-stage{min-height:110px;padding:8px 0}
  .ar-pr-stage strong{font-size:56px}
  .ar-pr-panel{padding:14px 12px}
  .ar-pr-title{font-size:16px}
  .ar-pr-hint{display:none}
  .ar-pr-opts{grid-template-columns:1fr 1fr}
  .ar-pr-opt{min-height:50px;padding:8px;font-size:.82rem}
  .ar-theme-portrush .ar-ranks{max-height:min(128px,16vh)}
}
@media(max-height:820px){
  .ar-pr-hint{display:none}.ar-pr-panel{padding:14px 20px}.ar-pr-title{margin:4px 0 10px}
  .ar-pr-opt{min-height:50px}.ar-pr-stat{padding:7px 14px}
}
@media(max-height:700px){
  .ar-theme-portrush .ar-race{padding:8px 14px;gap:6px}
  .ar-pr-stat{padding:5px 14px}.ar-pr-stat strong{font-size:18px}
  .ar-pr-opt{min-height:44px}.ar-pr-panel{padding:10px 18px}.ar-pr-fb{min-height:24px;padding-top:6px}
}
@media(prefers-reduced-motion:reduce){
  .ar-pr-in{animation:none}
}
.ar-pr-bot{width:100%;text-align:left}
.ar-pr-botlabel{font:600 10px 'JetBrains Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--ar-muted);margin:0 0 7px}
.ar-pr-botseg{display:flex;gap:6px;flex-wrap:wrap}
.ar-pr-botbtn{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-pr-botbtn:hover{color:var(--ar-text)}
.ar-pr-botbtn[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))}