/* 🏟️ Arena lobisi (Riven 2 Eki: "Bu bölümü nasıl düzenleyelim · genel olarak · güzel tasarım olsun"). arena.js arenaScreen / arenaOyunKutu.
   Üstte özet + oda kodu, iki kısayol, bölüm çipleri; öne çıkan iki geniş kutu; gruplu kapak ızgarası; Düello; Tek başına; Koçi rakipleri. */

/* #screen esnek sütun: taşanı gizleyen / kaydıran çocuk (overflow ≠ visible) ekrana sığmak için küçülür — Arena'daki 15 oyunun kapaklı kartı
   4 px'e sıkışıp çizgi gibi görünüyordu (Riven 2 Eki videosu). Yalnız Arena parçaları: genel kural Koçigram'ın iç kaydırmasını bozuyordu. */
:where(.arena-oyun, .ar-hero, .ar-cip, .ar-bolum, .ar-hizli, .ar-sayfa-kapak, .ar-acik-oda, .oy-bolum) { flex-shrink:0; }

/* Özet: lacivert-mor kart, içinde oda kodu */
.ar-hero { margin-bottom:0; position:relative; overflow:hidden; }
.ar-hero::before { content:""; position:absolute; width:180px; height:180px; right:-60px; top:-70px; border-radius:50%; background:radial-gradient(circle, rgba(255,212,59,.28), transparent 70%); pointer-events:none; }
.ar-hero > * { position:relative; }
.ar-hero .cevrimici { color:#d9d4fb; margin:10px 2px 0; font-size:12.5px; } .ar-hero .cevrimici b { color:#fff; }
.ar-kod { font-size:17px; display:flex; gap:6px; margin-top:12px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius:14px; padding:5px; }
.ar-kod input { flex:1; min-width:0; width:auto; height:auto; min-height:0; margin:0; background:transparent; border:0; color:#fff; font:inherit; font-size:17px; line-height:1.2; font-weight:800; letter-spacing:3px; text-align:center; padding:8px 6px; outline:none; box-shadow:none; }
.ar-kod input::placeholder { color:#c9c3f3; letter-spacing:0; font-weight:600; font-size:14px; }
.ar-kod .btn { width:auto; height:auto; min-height:0; margin:0; padding:9px 18px; font-size:15px; line-height:1.2; background:#ffd43b; color:#1f2a44; box-shadow:0 3px 0 #b88a00; }
:root[data-theme="dark"] .ar-kod input { background:transparent; color:#fff; }
.ar-kod-not { margin:6px 2px 0; font-size:12.5px; font-weight:700; color:#ffd8a8; } .ar-kod-not:empty { display:none; }

/* İki kısayol */
.ar-hizli { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ar-hizli-btn { display:flex; align-items:center; gap:10px; min-width:0; text-align:left; font:inherit; color:var(--ink); background:var(--card); border:2px solid #e3dffc; border-radius:16px; padding:10px 12px; box-shadow:0 3px 0 #e3dffc; cursor:pointer; }
.ar-hizli-btn .kp-ik { width:36px; height:36px; border-radius:11px; } .ar-hizli-btn .kp-ik svg { width:19px; height:19px; }
.ar-hizli-btn > span:last-child { min-width:0; } .ar-hizli-btn b { display:block; font-size:14px; line-height:1.2; }
.ar-hizli-btn small { display:block; font-size:11.5px; font-weight:600; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Bölüm çipleri (dokununca o bölüme kayar) */
.ar-cip { display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; margin:0 -18px; padding:2px 18px; }
.ar-cip::-webkit-scrollbar { display:none; }
.ar-cip button, .kp-kok .ar-cip button { flex:none; font:inherit; font-size:13px; font-weight:800; color:var(--ink,#3c3489); background:color-mix(in srgb, var(--primary,#6246C8) 16%, var(--card,#fff)); border:0; border-radius:99px; padding:8px 14px; cursor:pointer; }
.ar-cip button:active { transform:translateY(1px); }

/* Bölüm başlığı */
.ar-bolum { scroll-margin-top:10px; }
.ar-bolum-bas { margin:4px 2px 10px; } .ar-bolum-bas h2 { margin:0; font-size:18px; display:flex; align-items:center; }
.ar-bolum-bas small { display:block; margin-top:2px; color:var(--muted); font-size:12.5px; font-weight:600; line-height:1.35; }

/* Oyun kutusu: kapak + ad + kişi/süre */
.ar-vitrin { display:grid; grid-template-columns:1fr; gap:12px; }
.ar-izgara { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (min-width:560px) { .ar-vitrin { grid-template-columns:1fr 1fr; } .ar-izgara { grid-template-columns:repeat(3, 1fr); } }
.ar-kutu { display:flex; flex-direction:column; min-width:0; padding:0; text-align:left; font:inherit; color:var(--ink); background:var(--card); border:2px solid #e3dffc; border-radius:18px;
  box-shadow:0 4px 0 #e3dffc; overflow:hidden; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease; }
.ar-kutu:active { transform:translateY(2px); box-shadow:0 2px 0 #e3dffc; }
.ar-kutu-kapak { position:relative; display:block; aspect-ratio:4/3; overflow:hidden; background:linear-gradient(135deg, #9775fa, #2b1766); }
.ar-kutu.ar-r-kirmizi .ar-kutu-kapak { background:linear-gradient(135deg, #ff6b6b, #7a1020); } .ar-kutu.ar-r-turuncu .ar-kutu-kapak { background:linear-gradient(135deg, #ffa94d, #8a3b00); }
.ar-kutu.ar-r-turkuaz .ar-kutu-kapak { background:linear-gradient(135deg, #3bc9db, #0b4f63); } .ar-kutu.ar-r-mavi .ar-kutu-kapak { background:linear-gradient(135deg, #4dabf7, #0b3a75); }
.ar-kutu.ar-r-yesil .ar-kutu-kapak { background:linear-gradient(135deg, #51cf66, #0b5d25); } .ar-kutu.ar-r-pembe .ar-kutu-kapak { background:linear-gradient(135deg, #f783ac, #7a1745); }
.ar-kutu.ar-r-sari .ar-kutu-kapak { background:linear-gradient(135deg, #ffd43b, #8a5a00); } .ar-kutu.ar-r-gri .ar-kutu-kapak { background:linear-gradient(135deg, #868e96, #212529); }
.ar-kutu-kapak img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ar-kutu-kapak::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.32)); pointer-events:none; }
.ar-kutu-ik { position:absolute; left:9px; top:9px; z-index:1; }
.ar-kutu-ik .kp-ik { width:34px; height:34px; border-radius:11px; box-shadow:0 4px 12px rgba(0,0,0,.3); } .ar-kutu-ik .kp-ik svg { width:18px; height:18px; }
/* görseli olmayan oyun: renkli zemin, ortada büyük simge, hafif desen */
.ar-kutu.kapaksiz .ar-kutu-kapak { background-image:radial-gradient(circle at 18% 22%, rgba(255,255,255,.22) 0 18%, transparent 19%), radial-gradient(circle at 88% 85%, rgba(255,255,255,.14) 0 24%, transparent 25%); }
.ar-kutu.kapaksiz.ar-r-kirmizi .ar-kutu-kapak { background-color:#c92a2a; } .ar-kutu.kapaksiz.ar-r-turuncu .ar-kutu-kapak { background-color:#e8590c; } .ar-kutu.kapaksiz.ar-r-gri .ar-kutu-kapak { background-color:#495057; }
.ar-kutu.kapaksiz.ar-r-yesil .ar-kutu-kapak { background-color:#2b8a3e; } .ar-kutu.kapaksiz.ar-r-mor .ar-kutu-kapak { background-color:#5f3dc4; } .ar-kutu.kapaksiz.ar-r-mavi .ar-kutu-kapak { background-color:#1971c2; }
.ar-kutu.kapaksiz.ar-r-pembe .ar-kutu-kapak { background-color:#c2255c; } .ar-kutu.kapaksiz.ar-r-turkuaz .ar-kutu-kapak { background-color:#0c8599; } .ar-kutu.kapaksiz.ar-r-sari .ar-kutu-kapak { background-color:#e67700; }
.ar-kutu.kapaksiz .ar-kutu-ik { left:50%; top:50%; transform:translate(-50%, -50%); }
.ar-kutu.kapaksiz .ar-kutu-ik .kp-ik { width:62px; height:62px; border-radius:20px; background:rgba(255,255,255,.2); color:#fff; box-shadow:0 8px 22px rgba(0,0,0,.25); backdrop-filter:blur(4px); }
.ar-kutu.kapaksiz .ar-kutu-ik .kp-ik svg { width:32px; height:32px; }
.ar-kutu-tx { display:flex; flex-direction:column; gap:4px; min-width:0; padding:9px 11px 11px; }
.ar-kutu-tx b { font-size:14.5px; line-height:1.2; overflow-wrap:anywhere; }
.ar-kutu-et { display:flex; flex-wrap:wrap; gap:3px 8px; font-size:11.5px; font-weight:700; color:var(--muted); }
.ar-kutu-et > span { display:inline-flex; align-items:center; gap:3px; } .ar-kutu-et svg { width:12px; height:12px; }

/* Öne çıkan: geniş kutu, kısa açıklama, "Oyna" */
.ar-kutu.vitrin .ar-kutu-kapak { aspect-ratio:16/7; }
.ar-kutu.vitrin.kapaksiz .ar-kutu-ik { left:22px; top:50%; transform:translateY(-50%); }
.ar-kutu.vitrin.kapaksiz .ar-kutu-ik .kp-ik { width:70px; height:70px; border-radius:22px; } .ar-kutu.vitrin.kapaksiz .ar-kutu-ik .kp-ik svg { width:36px; height:36px; }
.ar-kutu-git { position:absolute; right:12px; bottom:12px; z-index:1; background:#fff; color:#1f2a44; font-weight:800; font-size:13.5px; border-radius:99px; padding:7px 15px; box-shadow:0 3px 0 rgba(0,0,0,.22); }
.ar-kutu.vitrin .ar-kutu-tx { padding:11px 14px 13px; } .ar-kutu.vitrin .ar-kutu-tx b { font-size:18px; }
.ar-kutu.vitrin small { color:var(--muted); font-size:13px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ar-ucret { align-self:flex-start; margin-top:2px; font-size:12px; font-weight:800; color:#a61e4d; background:#fff0f6; border-radius:99px; padding:4px 10px; }

/* Tek başına: 2 sütun kare kutu */
.ar-tek { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ar-tek-kutu { display:flex; flex-direction:column; align-items:flex-start; gap:5px; min-width:0; text-align:left; font:inherit; color:var(--ink); background:var(--card);
  border:2px solid var(--line); border-radius:16px; padding:12px; box-shadow:0 3px 0 var(--line); cursor:pointer; }
.ar-tek-kutu:active, .ar-hizli-btn:active { transform:translateY(2px); box-shadow:none; }
.ar-tek-kutu .kp-ik { width:38px; height:38px; border-radius:12px; margin-bottom:2px; } .ar-tek-kutu .kp-ik svg { width:20px; height:20px; }
.ar-tek-kutu b { font-size:14px; line-height:1.2; } .ar-tek-kutu small { font-size:12px; font-weight:600; color:var(--muted); line-height:1.3; }

/* Koçi rakipleri: kartsız şerit */
.ar-bolum .arena-ekip { margin-top:0; }

/* Oyun sayfası (arenaOyunEkrani): Word Punch / Nitro kartının üstünde kapak */
.ar-sayfa-kapak { border-radius:18px; overflow:hidden; aspect-ratio:16/7; box-shadow:0 4px 0 #e3dffc; }
.ar-sayfa-kapak img { display:block; width:100%; height:100%; object-fit:cover; }

/* 🎮 Oyna sekmesi (planOyna, Riven 2 Eki "orada da bir sürü oyun var"): üç kaydırmalı raf; kutular yukarıdaki kapaklı kutuyla aynı */
.oy-bolum { scroll-margin-top:10px; }
.oy-bolum-bas { margin:0 2px 8px; } .oy-bolum-bas b { display:block; font-size:18px; line-height:1.2; }
.oy-bolum-bas small { display:block; margin-top:2px; color:var(--muted); font-size:12.5px; font-weight:600; }
.oy-raf { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(146px, 43%); gap:10px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
  scrollbar-width:none; margin:0 -18px; padding:2px 18px 10px; scroll-padding:0 18px; }
.oy-raf::-webkit-scrollbar { display:none; }
.oy-raf > * { scroll-snap-align:start; }
.ar-kutu-alt { font-size:12px; font-weight:600; color:var(--muted); line-height:1.3; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }   /* takip notu 21 Eki, madde 95: 2 satırda «Esenyurt't…» diye kesiliyordu */
.oy-raf .ar-tek-kutu { min-height:122px; }
.kp-kok .oy-arena-k { display:flex; flex-direction:column; justify-content:flex-end; gap:4px; text-align:left; color:#fff; border:0; border-radius:18px; padding:14px;
  background:radial-gradient(circle at 85% 15%, rgba(255,212,59,.35), transparent 45%), linear-gradient(150deg, #1f2a44, #3c3489); box-shadow:0 4px 0 #161d31; }
.kp-kok .oy-arena-k b { font-size:16px; line-height:1.2; } .kp-kok .oy-arena-k small { color:#d9d4fb; font-size:12px; line-height:1.3; }
.kp-kok .oy-arena-k span { margin-top:8px; align-self:flex-start; background:#ffd43b; color:#1f2a44; border-radius:99px; padding:6px 12px; font-weight:800; font-size:12.5px; }

/* Karanlık mod */
:root[data-theme="dark"] .ar-kutu, :root[data-theme="dark"] .ar-hizli-btn { border-color:#3c3489; box-shadow:0 4px 0 #3c3489; }
:root[data-theme="dark"] .ar-kutu:active { box-shadow:0 2px 0 #3c3489; }
:root[data-theme="dark"] .ar-cip button { background:#2c2752; color:#d9d4fb; }
:root[data-theme="dark"] .ar-ucret { background:#3d1a2a; color:#ffb3c7; }

/* ⏱️ Arena oyun sayfasında maç süresi (Kelime Ordusu, Riven 3 Eki) */
.ao-sure { margin: 4px 0 10px; } .ao-sure p { margin: 0 0 6px; }
.ao-sure-dug { display: flex; flex-wrap: wrap; gap: 6px; }
.ao-sure-dug button { border: 0; border-radius: 99px; padding: 7px 13px; font: inherit; font-weight: 800; font-size: 13.5px; background: var(--card); color: var(--ink); box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
.ao-sure-dug button[aria-pressed="true"] { background: #339af0; color: #fff; box-shadow: 0 3px 0 #1c7ed6; }