/* O mu bu mu. Sahne, bitiş paneli ve paylaşım simgeleri oyun.css'ten; burada
   yalnızca iki aday ve saha. Değerler stil.css'teki değişkenlerden, sahanın
   zemini oyun sahnesinin geçişindeki koyu mavi; yeni renk yok. */

.omu-secim { position:relative; height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:18px; padding:32px 24px; text-align:center; }
.omu-secim[hidden] { display:none; }
.omu-mevki { margin:0; font-family:var(--baslik-yazi); font-weight:700; font-size:22px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--altin); }

.omu-ikili { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center; gap:12px; width:100%; }
.omu-veya { font-family:var(--baslik-yazi); font-weight:600; font-size:17px;
  color:rgba(255,255,255,.6); }
.omu-aday { display:flex; flex-direction:column; align-items:center; gap:10px; min-width:0;
  padding:20px 10px 18px; border:2px solid rgba(255,255,255,.14); border-radius:10px;
  background:rgba(255,255,255,.06); color:#fff; font:inherit; cursor:pointer; }
.omu-figur { display:block; width:128px; height:128px; border:3px solid var(--altin);
  border-radius:50%; }
.omu-ad { max-width:100%; font-family:var(--baslik-yazi); font-weight:700; font-size:26px;
  line-height:1.1; overflow-wrap:anywhere; }
.omu-kulup { font-size:14px; color:rgba(255,255,255,.65); }

/* Saha: hücum yukarı. Çizgiler ince beyaz, oyuncunun yeri boşken kesik halka. */
.omu-saha { position:relative; height:620px; border-radius:10px; overflow:hidden;
  background:#0d2f52; border:2px solid rgba(255,255,255,.18); }
.omu-saha::before { content:""; position:absolute; left:0; right:0; top:50%;
  border-top:2px solid rgba(255,255,255,.18); }
.omu-saha-orta { position:absolute; left:50%; top:50%; width:120px; height:120px;
  transform:translate(-50%,-50%); border:2px solid rgba(255,255,255,.18); border-radius:50%; }
.omu-saha-ceza { position:absolute; left:50%; width:46%; height:15%; transform:translateX(-50%);
  border:2px solid rgba(255,255,255,.18); }
.omu-saha-ceza.ust { top:-2px; }
.omu-saha-ceza.alt { bottom:-2px; }

.omu-yerler { margin:0; padding:0; list-style:none; }
.omu-yer { position:absolute; display:flex; flex-direction:column; align-items:center; gap:5px;
  width:124px; transform:translate(-50%,-50%); text-align:center; }
.omu-nokta { width:34px; height:34px; border:3px dashed rgba(255,255,255,.35); border-radius:50%; }
.omu-yer.dolu .omu-nokta { border-style:solid; }
.omu-yer-ad { max-width:100%; padding:1px 7px; border-radius:5px; font-size:13px; line-height:1.4;
  color:rgba(255,255,255,.6); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.omu-yer.dolu .omu-yer-ad { background:rgba(7,27,49,.85); color:#fff;
  font-family:var(--baslik-yazi); font-weight:700; font-size:17px; }

@media (hover:hover) {
  .omu-aday:hover { border-color:var(--altin); background:rgba(255,255,255,.1); }
}
.omu-aday:focus-visible { border-color:var(--altin); }

@media (max-width:780px) {
  .omu-secim { gap:10px; padding:16px 12px 18px; }
  .omu-mevki { font-size:18px; }
  .omu-ikili { gap:6px; }
  .omu-veya { font-size:14px; }
  .omu-aday { gap:6px; padding:12px 6px; }
  .omu-figur { width:76px; height:76px; border-width:2px; }
  .omu-ad { font-size:19px; }
  .omu-kulup { font-size:12px; }
  .omu-saha { height:460px; }
  .omu-yer { width:84px; gap:3px; }
  .omu-nokta { width:24px; height:24px; border-width:2px; }
  .omu-yer-ad { font-size:11px; padding:0 4px; }
  .omu-yer.dolu .omu-yer-ad { font-size:13px; }
}