/* ===================================================================
   OYUN ORTAK KABUK — oyun.css
   Tüm oyun sayfalarında ortak olan header/footer/aksiyon barı/liderlik
   modalı için stiller. Oyunun kendi içeriği (tahta, klavye, vb.) kendi
   <style> bloğunda kalır — burası yalnızca "kabuğu" (shell) kapsar, bu
   yüzden seçiciler .oyun-* sınıflarıyla sınırlı tutulur; body/genel
   etiketlere dokunulmaz ki her oyunun kendi teması bozulmasın.
=================================================================== */
:root{
  --ok-lacivert: #16314F;
  --ok-mavi:     #2C6CB8;
  --ok-turuncu:  #E58A2A;
  --ok-krem:     #FBFAF5;
}

body{
  /* Sabit alt aksiyon barının içeriği örtmemesi için pay bırakılır. */
  padding-bottom:64px;
}
@media (max-width:640px){
  body{ padding-bottom:104px; } /* mobilde bar iki satıra çıkar */
}

/* ---------- header ---------- */
.oyun-header{
  position:sticky; top:0; z-index:70;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 18px;
  background:linear-gradient(120deg, var(--ok-lacivert) 0%, #204a78 100%);
  color:var(--ok-krem);
  box-shadow:0 3px 14px rgba(0,0,0,.35);
  border-bottom:3px solid var(--ok-turuncu);
  font-family:"Segoe UI",Verdana,sans-serif;
}
.oyun-header-brand{
  display:flex; align-items:center; gap:9px;
  color:var(--ok-krem); text-decoration:none;
  font-weight:800; font-size:.92rem;
  flex:0 0 auto;
  opacity:.96; transition:opacity .15s;
}
.oyun-header-brand:hover{ opacity:1; }
.oyun-header-brand img{
  display:block; border-radius:8px;
  box-shadow:0 2px 6px rgba(0,0,0,.4);
}
.oyun-header-brand span{ display:none; }
@media (min-width:520px){
  .oyun-header-brand span{ display:inline; }
}
.oyun-header-title{
  margin:0; flex:1 1 auto; text-align:center;
  font-size:1.15rem; font-weight:800; letter-spacing:.01em;
  color:var(--ok-krem);
  text-shadow:0 1px 3px rgba(0,0,0,.35);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.oyun-header-right{
  display:flex; align-items:center; gap:10px; flex:0 0 auto;
}
.oyun-header-user{
  font-size:.78rem; font-weight:700;
  color:var(--ok-krem);
  background:rgba(255,255,255,.14);
  padding:5px 11px; border-radius:999px;
  white-space:nowrap;
}
.oyun-fullscreen-btn{
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.35);
  color:var(--ok-krem);
  width:34px; height:34px; border-radius:8px;
  font-size:1.05rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s, border-color .15s, transform .1s, color .15s;
}
.oyun-fullscreen-btn:hover, .oyun-fullscreen-btn:focus-visible{
  background:var(--ok-turuncu); border-color:var(--ok-turuncu); color:#2a1a06;
}
.oyun-fullscreen-btn:active{ transform:scale(.92); }

/* ---------- alt aksiyon barı (sabit) ---------- */
.oyun-aksiyon-bari{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  display:flex; align-items:center; gap:10px;
  padding:10px 16px;
  background:rgba(10,16,24,.92);
  backdrop-filter:blur(4px);
  border-top:1px solid rgba(255,255,255,.12);
  font-family:"Segoe UI",Verdana,sans-serif;
}
.oyun-aksiyon-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 16px;
  border-radius:10px;
  font-size:.88rem; font-weight:700;
  text-decoration:none;
  border:1.5px solid rgba(255,255,255,.25);
  cursor:pointer;
  white-space:nowrap;
}
.oab-don{
  margin-right:auto;
  background:transparent;
  color:var(--ok-krem);
}
.oab-don:hover, .oab-don:focus-visible{ background:rgba(255,255,255,.1); }
.oab-liderlik{
  order:1;
  background:rgba(255,255,255,.08);
  color:var(--ok-krem);
}
.oab-liderlik:hover, .oab-liderlik:focus-visible{ background:rgba(255,255,255,.18); }
.oab-basla{
  order:2;
  background:linear-gradient(180deg, #f2a94f, var(--ok-turuncu));
  color:#2a1a06;
  border-color:transparent;
}
.oab-basla:hover, .oab-basla:focus-visible{ filter:brightness(1.06); }

@media (max-width:640px){
  .oyun-aksiyon-bari{ flex-wrap:wrap; }
  .oab-basla{ order:-1; flex:1 1 100%; margin-bottom:2px; }
  .oab-don{ order:1; flex:1 1 auto; margin-right:0; text-align:center; }
  .oab-liderlik{ order:2; flex:1 1 auto; }
}

/* ---------- liderlik modalı ---------- */
.oyun-liderlik-modal{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:16px;
  font-family:"Segoe UI",Verdana,sans-serif;
}
.oyun-liderlik-modal[hidden]{ display:none; }
.oyun-liderlik-backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.6);
}
.oyun-liderlik-kutu{
  position:relative; z-index:1;
  background:var(--ok-krem); color:var(--ok-lacivert);
  border-radius:14px; max-width:420px; width:100%;
  max-height:80vh; overflow:auto;
  box-shadow:0 20px 50px rgba(0,0,0,.4);
}
.oyun-liderlik-baslik{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid rgba(22,49,79,.12);
  position:sticky; top:0; background:var(--ok-krem);
}
.oyun-liderlik-baslik h3{ margin:0; font-size:1.05rem; }
.oyun-liderlik-kapat{
  background:none; border:none; font-size:1.1rem; cursor:pointer; color:var(--ok-lacivert);
  width:28px; height:28px; border-radius:8px;
}
.oyun-liderlik-kapat:hover{ background:rgba(22,49,79,.08); }
.oyun-liderlik-icerik{ padding:14px 18px 18px; }
.oyun-liderlik-bos{
  text-align:center; padding:20px 8px; color:var(--ok-lacivert); opacity:.7; font-size:.92rem;
}
.oyun-liderlik-liste{ list-style:none; margin:0; padding:0; }
.oyun-liderlik-liste li{
  display:flex; align-items:center; gap:10px;
  padding:8px 4px; border-bottom:1px solid rgba(22,49,79,.08);
  font-size:.92rem;
}
.oyun-liderlik-liste .sira{ font-weight:700; color:var(--ok-mavi); width:2.2em; }
.oyun-liderlik-liste .isim{ flex:1; }
.oyun-liderlik-liste .skor{ font-weight:700; }

/* ---------- tam ekran modu: kabuk gizlenir ---------- */
body.oyun-tam-ekran .oyun-header,
body.oyun-tam-ekran .oyun-aksiyon-bari{
  display:none !important;
}
body.oyun-tam-ekran{ padding-bottom:0 !important; }