/* Kör sıralama oyunu. Değerler stil.css'teki değişkenlerden; yeni renk yok. */

.oyun-sayfa { padding:28px 0 56px; }
.oyun-giris { max-width:720px; margin:-6px 0 22px; color:var(--soluk); font-size:16px; }
.oyun-mod { margin-top:-14px; }
/* Öneri ve hata bildirimi bağlantısı, oyunun altında; XOX'taki ile aynı cümle. */
.oyun-oneri { display:inline-block; margin-top:22px; font-size:13px; color:var(--lacivert);
  text-decoration:underline; text-underline-offset:3px; }
@media (hover:hover) { .oyun-oneri:hover { color:var(--altin); } }
.oyun-mod a { font-family:var(--baslik-yazi); font-weight:700; font-size:18px; color:var(--lacivert);
  border-bottom:2px solid var(--altin); }
/* Panelde kapalı oyuna bakan yöneticiye uyarı; okur bu sayfayı görmüyor. */
.oyun-kapali { margin:0 0 16px; padding:10px 14px; border-radius:8px; background:var(--kagit);
  border:1px solid var(--altin); font-size:15px; }

.oyun { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px;
  align-items:start; }

/* Sahne hem oyuncu kartını hem bitiş panelini taşıyor; yüksekliği sabit, ikisi
   arasında geçerken sayfa oynamasın diye. */
.oyun-sahne { height:620px; border-radius:10px; overflow:hidden;
  background:linear-gradient(135deg,var(--lacivert-koyu),var(--lacivert) 60%,#0d2f52);
  color:#fff; }

.oyun-kart { position:relative; height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:22px; padding:32px; text-align:center; }
.oyun-kart[hidden], .oyun-bitti[hidden] { display:none; }
.oyun-sayac { position:absolute; top:20px; right:22px; font-family:var(--baslik-yazi);
  font-weight:700; font-size:18px; letter-spacing:.08em; color:var(--altin); }
.oyun-figur { display:block; width:170px; height:170px; flex:none;
  border:4px solid var(--altin); border-radius:50%; }
.oyun-ad { margin:0; font-family:var(--baslik-yazi); font-weight:700;
  font-size:clamp(34px,4vw,48px); line-height:1.05; }
.oyun-kunye { margin:8px 0 0; font-size:17px; color:rgba(255,255,255,.7); }
.oyun-yonerge { position:absolute; bottom:20px; left:0; right:0; margin:0;
  font-size:14px; color:rgba(255,255,255,.55); }

.oyun-bitti { height:100%; display:flex; flex-direction:column; background:var(--kagit);
  color:var(--metin); }
.oyun-onizleme { flex:1; min-height:0; display:flex; align-items:center;
  justify-content:center; padding:18px; background:var(--krem); }
.oyun-tuval { max-width:100%; max-height:100%; width:auto; height:auto; border-radius:4px;
  box-shadow:0 2px 10px rgba(10,41,73,.22); }
.oyun-islem { display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px 4px; border-top:1px solid var(--cizgi); }
/* Simgeler haber sayfasındaki paylaşım dizisinin aynısı, yalnızca parmakla
   rahat basılsın diye biraz büyük. */
.oyun-islem .paylas { gap:10px; }
.oyun-islem .paylas a, .oyun-islem .paylas button { width:40px; height:40px; }
.oyun-islem .paylas svg { width:19px; height:19px; }
.oyun-dugme { padding:12px 20px; border:0; border-radius:8px; background:var(--lacivert);
  color:#fff; font-family:var(--baslik-yazi); font-weight:700; font-size:18px;
  letter-spacing:.02em; cursor:pointer; }
.oyun-durum { margin:0; padding:4px 18px 14px; min-height:1.2em; font-size:13px;
  color:var(--soluk); }

.oyun-siralar { display:flex; flex-direction:column; gap:8px; margin:0; padding:0;
  list-style:none; }
.oyun-sira { display:flex; align-items:center; gap:14px; width:100%; height:54px;
  padding:0 14px 0 0; border:1px dashed #dcd3bd; border-radius:8px; background:var(--kagit);
  color:var(--soluk); font:inherit; text-align:left; cursor:pointer; overflow:hidden; }
.oyun-sira-no { display:grid; place-items:center; width:54px; height:100%; flex:none;
  background:var(--lacivert); color:var(--altin); font-family:var(--baslik-yazi);
  font-weight:700; font-size:26px; }
.oyun-sira-ad { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  font-size:16px; }
.oyun-sira.dolu { border-style:solid; border-color:var(--cizgi); color:var(--lacivert);
  cursor:default; }
.oyun-sira.dolu .oyun-sira-ad { font-family:var(--baslik-yazi); font-weight:700;
  font-size:21px; }
.oyun-sira:disabled:not(.dolu) { cursor:default; }
.oyun-sira-kunye { margin-left:auto; flex:none; font-size:13px; color:var(--soluk); }

/* Paylaşılan sıralamanın sayfasında sahne bir davet kutusu: oyun yok,
   kutu listenin boyunca uzanıyor. */
.oyun-davet { height:auto; align-self:stretch; display:flex; flex-direction:column;
  align-items:flex-start; justify-content:center; gap:14px; padding:36px; }
.oyun-davet h2 { margin:0; font-family:var(--baslik-yazi); font-weight:700;
  font-size:clamp(30px,3.4vw,42px); line-height:1.05; }
.oyun-davet p { margin:0; color:rgba(255,255,255,.7); font-size:17px; }
.oyun-davet .oyun-dugme { margin-top:8px; background:var(--altin); color:var(--lacivert);
  text-decoration:none; }

/* Dokunmatik ekranda :hover parmak çekilince kalıyor, renkler yalnızca
   fareli cihazda değişiyor. */
@media (hover:hover) {
  .oyun-sira:not(:disabled):hover { border-color:var(--altin); border-style:solid;
    color:var(--lacivert); }
  .oyun-dugme:hover { background:var(--lacivert-koyu); }
  .oyun-davet .oyun-dugme:hover { background:#fff; }
}

@media (max-width:780px) {
  .oyun { grid-template-columns:1fr; gap:14px; }
  /* Telefonda kart küçülüp yukarıda sabit duruyor: liste kaydırılırken
     sıradaki ad gözden kaçmasın. Oyun bitince sabitlik kalkıyor. */
  .oyun-sahne { position:sticky; top:0; z-index:5; height:auto; border-radius:0 0 10px 10px;
    box-shadow:0 8px 20px rgba(10,41,73,.18); }
  .oyun-sahne.bitti, .oyun-davet { position:static; box-shadow:none; border-radius:10px; }
  .oyun-davet { padding:24px 20px; }
  .oyun-sira-kunye { display:none; }
  .oyun-kart { flex-direction:row; justify-content:flex-start; gap:14px; height:auto;
    min-height:104px; padding:16px 60px 16px 16px; text-align:left; }
  .oyun-figur { width:72px; height:72px; border-width:3px; }
  .oyun-ad { font-size:26px; }
  .oyun-kunye { margin-top:4px; font-size:14px; }
  .oyun-sayac { top:14px; right:14px; font-size:16px; }
  .oyun-yonerge { display:none; }
  .oyun-onizleme { height:min(62vh,470px); flex:none; }
  .oyun-sira { height:48px; }
  .oyun-sira-no { width:48px; font-size:22px; }
}