/* 🎮 Oyun daveti (davet.js). Renkler tema değişkenlerinden (5 renk teması, tema yok, data-theme=dark): yazı/zemin çifti ya ikisi birden
   değişkenden ya ikisi birden sabit. style.css / temalar.css'e dokunulmaz. */

/* ── Bekleme odalarındaki "Arkadaşını çağır" düğmesi ──
   Her oyunda o ekranın kendi düğme sınıfı kullanılır (.btn, .oy-btn, .wp-share, .kb-button) + işaret sınıfı .dv-cagir.
   Yalnız Nitro'nun karanlık pistinde kendi düğmesi yok: .dv-cagir-btn (sabit renk çifti, sahne her temada koyu). */
.dv-cagir-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; margin:6px 0 0; min-height:36px; padding:6px 12px; border:0; border-radius:10px;
  background:#59D5DE; color:#0B1726; font:inherit; font-weight:800; font-size:13px; cursor:pointer; }
.dv-cagir-btn .kp-svg svg, .dv-cagir .kp-svg svg { width:18px; height:18px; }
.dv-cagir-btn:focus-visible, .dv-btn:focus-visible, .dv-kisi:focus-visible, .dv-kapat:focus-visible { outline:3px solid var(--koci-focus, var(--primary)); outline-offset:2px; }
.btn.dv-cagir { display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.wp-davet, .dv-cagir-btn { font-weight:800 !important; letter-spacing:0; }   /* oyunların kendi button kuralları incelttiği için */
/* Word Punch lobisi (sahne her temada koyu: sabit renk çifti) */
.wp-davet { display:block; width:100%; margin:-4px 0 14px; min-height:44px; padding:10px 14px; border:0; border-radius:12px; background:#9ce5ff; color:#101a2e; font:inherit; font-weight:800; font-size:14px; cursor:pointer; }
.wp-davet[hidden] { display:none; }

/* ── Arkadaş listesi perdesi (gönderen) ── */
.dv-perde { position:fixed; inset:0; z-index:80; display:flex; align-items:flex-end; justify-content:center; padding:12px; background:rgba(0,0,0,.5); }
.dv-kutu { width:100%; max-width:440px; max-height:min(86vh, 720px); display:flex; flex-direction:column; gap:10px; padding:16px; border-radius:20px;
  background:var(--card); color:var(--ink); border:1px solid var(--line); box-shadow:0 18px 50px rgba(0,0,0,.35); animation:dvYuksel .2s ease-out; }
@keyframes dvYuksel { from { transform:translateY(24px); opacity:0; } to { transform:none; opacity:1; } }
@media (prefers-reduced-motion:reduce) { .dv-kutu { animation:none; } }
.dv-ust { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.dv-ust small { display:block; color:var(--muted); font-size:12.5px; font-weight:700; letter-spacing:.02em; }
.dv-ust h2 { margin:2px 0 0; font-size:20px; color:var(--ink); }
.dv-kapat { width:40px; height:40px; flex:0 0 auto; border-radius:50%; border:1px solid var(--line); background:var(--bg); color:var(--ink); font-size:22px; line-height:1; cursor:pointer; }
.dv-govde { display:flex; flex-direction:column; gap:10px; min-height:0; }
.dv-not { margin:0; color:var(--muted); font-size:13.5px; line-height:1.4; }
.dv-not.dv-hata, .dv-sonuc { color:var(--bad); }
.dv-liste { display:flex; flex-direction:column; gap:6px; overflow:auto; max-height:46vh; padding:2px; }
.dv-kisi { display:flex; align-items:center; gap:10px; width:100%; min-height:56px; padding:8px 10px; text-align:left; cursor:pointer; font:inherit;
  border-radius:14px; border:2px solid var(--line); background:var(--bg); color:var(--ink); }
.dv-kisi.on { border-color:var(--primary); }
.dv-kisi[disabled] { opacity:.55; cursor:default; }
.dv-yuz { position:relative; width:40px; height:40px; flex:0 0 auto; border-radius:50%; overflow:visible; display:flex; align-items:center; justify-content:center; }
.dv-yuz > :not(.dv-nokta) { width:40px; height:40px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:22px; }
.dv-yuz img, .dv-yuz svg { width:100%; height:100%; object-fit:cover; }
.dv-harf { background:var(--primary); color:var(--koci-on-primary, #fff); font-weight:800; font-size:18px !important; }
.dv-nokta { position:absolute; right:-1px; bottom:-1px; width:13px; height:13px; border-radius:50%; background:var(--ok); border:2px solid var(--bg); }
.dv-tx { flex:1; min-width:0; display:flex; flex-direction:column; }
.dv-tx b { font-size:15.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); }
.dv-tx small { color:var(--muted); font-size:12.5px; }
.dv-sec { width:26px; height:26px; flex:0 0 auto; border-radius:50%; border:2px solid var(--line); display:flex; align-items:center; justify-content:center; font-weight:900; font-size:14px; color:transparent; }
.dv-kisi.on .dv-sec { background:var(--primary); border-color:var(--primary); color:var(--koci-on-primary, #fff); }
.dv-alt { display:flex; gap:8px; flex-wrap:wrap; }
.dv-alt .dv-btn { flex:1 1 140px; }
.dv-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:10px 14px; border-radius:var(--koci-radius-btn, 12px); cursor:pointer; font:inherit; font-weight:750; font-size:15px;
  border:1px solid var(--line); background:var(--bg); color:var(--ink); }
.dv-btn.ana { border-color:var(--primary); background:var(--primary); color:var(--koci-on-primary, #fff); }
.dv-btn[disabled] { opacity:.5; cursor:default; }
.dv-btn .kp-svg svg { width:18px; height:18px; }
.dv-bos { display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:10px 6px; }
.dv-bos b { font-size:17px; color:var(--ink); }
.dv-bos p { margin:0; color:var(--muted); font-size:14px; }
.dv-bos-ik { width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--bg); color:var(--primary); border:1px solid var(--line); }
.dv-bos-ik svg { width:26px; height:26px; }

/* ── Ekrana düşen davet kartı (alan) — Riven 2 Eki "hangi ekranda olursa olsun pat diye ekranın üstüne gelsin": her şeyin üstünde
   (tam ekran oyunlar 9000, Koçigram menüsü 9500); yalnız kv-perde (9999) ve rıza kartı (10000) üstte kalır. Kart sayfayı kilitlemez. */
.dv-flas { position:fixed; inset:0; z-index:9790; pointer-events:none; background:radial-gradient(circle at 50% 10%, rgba(255,255,255,.55), transparent 55%); animation:dvFlas 1.1s ease-out forwards; }
@keyframes dvFlas { from { opacity:1; } to { opacity:0; } }
.dv-kart { position:fixed; left:50%; top:calc(10px + env(safe-area-inset-top, 0px)); transform:translateX(-50%); z-index:9800; width:calc(100% - 20px); max-width:430px; box-sizing:border-box;
  display:flex; flex-direction:column; gap:12px; padding:14px; border-radius:22px; background:var(--card); color:var(--ink); border:2px solid var(--primary);
  box-shadow:0 18px 50px rgba(0,0,0,.45); animation:dvPat .5s cubic-bezier(.2,1.4,.4,1) both, dvParla 1.4s ease-in-out .5s 3; }
@keyframes dvPat { 0% { transform:translate(-50%, -140%) scale(.92); opacity:0; } 60% { transform:translate(-50%, 6px) scale(1.02); opacity:1; } 100% { transform:translate(-50%, 0) scale(1); opacity:1; } }
@keyframes dvParla { 50% { box-shadow:0 18px 50px rgba(0,0,0,.45), 0 0 0 6px var(--primary), 0 0 34px var(--primary); } }
.dv-kart.cik { animation:dvCik .2s ease-in forwards; }
@keyframes dvCik { from { transform:translate(-50%, 0); opacity:1; } to { transform:translate(-50%, -30px); opacity:0; } }
.dv-kart-bas { display:flex; align-items:center; gap:12px; }
.dv-kart-yuz { position:relative; width:56px; height:56px; flex:0 0 auto; }
.dv-kart-yuz > :not(.dv-halka):not(.dv-kart-ik) { width:56px; height:56px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:30px; }
.dv-kart-yuz img, .dv-kart-yuz > :not(.dv-kart-ik) svg { width:100%; height:100%; object-fit:cover; }
.dv-kart-yuz .dv-harf { font-size:24px !important; }
.dv-halka { position:absolute; inset:-5px; border-radius:50%; border:3px solid var(--primary); animation:dvHalka 1.2s ease-out infinite; pointer-events:none; }
@keyframes dvHalka { from { transform:scale(.92); opacity:1; } to { transform:scale(1.35); opacity:0; } }
.dv-kart-ik { position:absolute; right:-5px; bottom:-5px; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-style:normal; font-size:14px;
  background:var(--primary); color:var(--koci-on-primary, #fff); border:2px solid var(--card); }
.dv-kart-ik svg { width:14px; height:14px; }
.dv-kart-tx { display:flex; flex-direction:column; gap:2px; min-width:0; }
.dv-kart-tx small { color:var(--muted); font-size:12.5px; font-weight:700; }
.dv-kart-tx b { font-size:17px; line-height:1.25; color:var(--ink); }
.dv-kart-dug { display:flex; gap:8px; }
.dv-kart-dug .dv-btn { flex:1; min-height:48px; font-size:16px; }
.dv-btn.red { border:2px solid var(--line); }
.dv-kart-alt { display:flex; justify-content:space-between; gap:8px; margin-top:-4px; }
.dv-kart-alt button { min-height:36px; padding:6px 8px; border:0; background:none; color:var(--muted); font:inherit; font-size:13.5px; font-weight:700; cursor:pointer; border-radius:10px; }
.dv-kart-alt button:focus-visible { outline:3px solid var(--koci-focus, var(--primary)); outline-offset:1px; }

/* ── Oyun içi küçük şerit (Riven 2 Eki "yalnız oyundaysa küçük bir uyarı üstten: oyuna davet edildin, şu kişi tarafından") ve gönderene
   geri bildirimler ("oyunun içinde mücadele ediyor", "geliyor!"). Oyunu bölmez, kendiliğinden kalkar. Sahne her temada koyu: sabit renk çifti. */
.dv-serit { position:fixed; left:50%; top:calc(8px + env(safe-area-inset-top, 0px)); transform:translateX(-50%); z-index:9800; width:max-content; max-width:min(92vw, 430px); box-sizing:border-box;
  display:flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px; background:#141b2e; color:#fff; font-size:13.5px; line-height:1.3; font-weight:600;
  box-shadow:0 8px 24px rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.18); cursor:pointer; animation:dvSerit .3s ease-out both; transition:opacity .25s, transform .25s; }
@keyframes dvSerit { from { transform:translate(-50%, -20px); opacity:0; } to { transform:translate(-50%, 0); opacity:1; } }
.dv-serit.cik { opacity:0; transform:translate(-50%, -12px); }
.dv-serit-yuz { margin-left:-7px; width:28px; height:28px; flex:0 0 auto; }
.dv-serit-yuz > * { width:28px; height:28px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:16px; }
.dv-serit-yuz img, .dv-serit-yuz svg { width:100%; height:100%; object-fit:cover; }
.dv-serit-yuz .dv-harf { font-size:14px !important; }
.dv-serit-tx b { color:#9ce5ff; }

@media (prefers-reduced-motion:reduce) { .dv-kart, .dv-kart.cik, .dv-serit, .dv-halka { animation:none; } .dv-flas { display:none; } }

/* Çocuk modunda hiçbir davet kartı/düğmesi görünmez */
body.kids .dv-kart, body.kids .dv-serit, body.kids .dv-flas, body.kids .dv-perde, body.kids .dv-cagir, body.kids .dv-cagir-btn { display:none !important; }

/* ── Sohbetteki oyun kartı (davet.js dmOyunKart; Riven 2 Eki: "önce yapalım, sonra şık tasarım") ── */
.dv-etkler { display:grid; grid-template-columns:repeat(auto-fill, minmax(132px, 1fr)); gap:8px; }
.dv-etk { display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-height:74px; padding:10px; text-align:left; cursor:pointer; font:inherit;
  border-radius:14px; border:2px solid var(--line); background:var(--bg); color:var(--ink); }
.dv-etk:focus-visible { outline:3px solid var(--koci-focus, var(--primary)); outline-offset:2px; }
.dv-etk[disabled] { opacity:.55; cursor:default; }
.dv-etk-ik { font-size:22px; line-height:1; }
.dv-etk b { font-size:14px; line-height:1.2; }
.dv-etk small { color:var(--muted); font-size:12px; }
.dm-davet { flex:none; font-size:18px; padding-left:10px; padding-right:10px; }
body.kids .dm-davet, body.kids [data-dmdavet] { display:none !important; }
.msg.dm-oyun { max-width:100%; width:100%; align-self:stretch; padding:10px; border-radius:16px; background:var(--card); color:var(--ink); border:2px solid var(--primary); }
.dm-oyun-bas { margin-bottom:8px; font-size:15px; }
.dm-oyun-liste { grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); gap:6px; }
.dm-oyun-sec { min-height:64px; padding:8px; }
/* Riven 2 Eki: "ilk seçen kişide sarı ışık olsun, 2 kişide yeşil olsun ve girsin" — tek kişinin seçtiği oyun sarı yanar (sen ✓ / X ✓),
   ikisi aynı oyunu seçince yeşil olur ve oyun açılır. Renk çiftleri sabit (her temada okunur). */
.dm-oyun-sec.ben, .dm-oyun-sec.onun { border-color:#f5b400; background:#fff6cc; color:#3b2f00; box-shadow:0 0 0 3px rgba(245,180,0,.35), 0 0 16px rgba(245,180,0,.55); animation:dmSari 1.4s ease-in-out infinite; }
.dm-oyun-sec.ben small, .dm-oyun-sec.onun small { color:#6b5500; font-weight:800; }
@keyframes dmSari { 50% { box-shadow:0 0 0 3px rgba(245,180,0,.55), 0 0 26px rgba(245,180,0,.85); } }
.dm-oyun-sec.eslesti { border-color:#16a34a; background:#22c55e; color:#fff; box-shadow:0 0 0 3px rgba(34,197,94,.4), 0 0 22px rgba(34,197,94,.7); animation:none; }
.dm-oyun-sec.eslesti small { color:#fff; }
.dm-oyun-sec.eslesti[disabled] { opacity:1; }   /* buluşan oyun kapalı (disabled) ama parlak yeşil kalsın */
.dm-oyun-sec[disabled]:not(.eslesti) { animation:none; box-shadow:none; }   /* süresi dolmuş / iptal kartta sarı ışık yanıp sönmesin */
@media (prefers-reduced-motion:reduce) { .dm-oyun-sec.ben, .dm-oyun-sec.onun { animation:none; } }
.dm-oyun-alt { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; font-size:13px; color:var(--muted); font-weight:700; }
.dm-oyun-iptal { border:0; background:none; color:var(--muted); font:inherit; font-size:13px; text-decoration:underline; cursor:pointer; min-height:32px; }