/* 1907 Tavla - Fenerbahce temasi (lacivert zemin, sari vurgu; pullar sari & lacivert) */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; }
body{
	font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	background:linear-gradient(160deg,#081536 0%, #0b1f4d 55%, #122a63 100%);
	color:#f2f4fa;
	min-height:100vh;
	display:flex; flex-direction:column;
}

/* ---------- ust bar ---------- */
.ustbar{
	display:flex; align-items:center; gap:12px;
	padding:10px 14px;
	background:#081536;
	border-bottom:2px solid #ffed00;
}
.logo{ font-weight:800; font-size:18px; color:#ffed00; text-decoration:none; }
.logo span{ color:#fff; font-weight:400; }
.baslik{ flex:1; text-align:center; font-weight:800; letter-spacing:4px; color:#ffed00; font-size:15px; }
.uyekutu{ display:flex; align-items:center; gap:7px; font-size:13px; }
.uyekutu img{ width:28px; height:28px; border-radius:50%; object-fit:cover; border:2px solid #ffed00; }

/* ---------- muzik bari ---------- */
.muzikbar{
	display:flex; align-items:center; gap:8px;
	padding:5px 12px; position:relative;
	background:#0a1b42;
	border-bottom:1px solid #23407e;
}
.mz-btn{
	background:none; border:none; color:#ffed00; cursor:pointer;
	font-size:15px; padding:4px 6px; border-radius:8px; line-height:1;
}
.mz-btn:active{ transform:scale(.9); }
.mz-play{ font-size:18px; }
.mz-bilgi{ flex:1; min-width:0; display:flex; align-items:center; gap:8px; }
.mz-kategori{
	background:#17418a; color:#c8d0e6; font-size:10px; font-weight:700;
	border-radius:8px; padding:2px 8px; white-space:nowrap; flex:none;
}
.mz-kategori:empty{ display:none; }
.mz-sarki{
	font-size:12px; color:#c8d0e6; white-space:nowrap;
	overflow:hidden; text-overflow:ellipsis;
}
.mz-sure{ font-size:11px; color:#8fa0c9; flex:none; font-variant-numeric:tabular-nums; }
.mz-cizgi{
	position:absolute; left:0; right:0; bottom:-1px; height:3px;
	background:#23407e; cursor:pointer;
}
.mz-dolgu{ height:100%; width:0; background:#ffed00; transition:width .3s linear; }
@media (max-width:600px){
	.mz-kategori{ display:none; }
	.muzikbar{ padding:4px 8px; }
}

/* ---------- butonlar ---------- */
.btn{
	display:inline-block; border:none; cursor:pointer; text-decoration:none; text-align:center;
	padding:10px 18px; border-radius:10px; font-size:14px; font-weight:700;
	transition:transform .1s, opacity .2s;
}
.btn:active{ transform:scale(.96); }
.btn-sari{ background:#ffed00; color:#081536; }
.btn-kirmizi{ background:#e30613; color:#fff; }
.btn-cizgi{ background:transparent; color:#ffed00; border:2px solid #ffed00; }
.btn[disabled]{ opacity:.4; pointer-events:none; }

/* ---------- giris uyari ---------- */
.girisuyari{ flex:1; display:flex; align-items:center; justify-content:center; padding:20px; }
.kart{
	background:#0e2456; border:1px solid #23407e; border-radius:18px;
	padding:36px 28px; text-align:center; max-width:360px; width:100%;
	box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.kart h1{ color:#ffed00; margin:10px 0 8px; }
.kart p{ color:#b9c4e0; margin-bottom:22px; }
.kart .btn{ margin:4px; }
.fbamblem{ font-size:42px; }

/* ---------- lobi ---------- */
.lobi{ flex:1; padding:16px; max-width:640px; margin:0 auto; width:100%; }
.lobibaslik{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.lobibaslik h1{ font-size:20px; color:#ffed00; }
.lobi h2{ font-size:15px; color:#8fa0c9; margin:18px 0 10px; text-transform:uppercase; letter-spacing:1px; }
.oyunliste{ display:flex; flex-direction:column; gap:10px; }
.oyunsatir{
	display:flex; align-items:center; gap:12px;
	background:#0e2456; border:1px solid #23407e; border-radius:14px; padding:12px 14px;
}
.oyunsatir img{ width:42px; height:42px; border-radius:50%; object-fit:cover; border:2px solid #ffed00; }
.oyunsatir .ad{ flex:1; font-weight:700; }
.oyunsatir .ad small{ display:block; color:#8fa0c9; font-weight:400; font-size:12px; margin-top:2px; }
.bos{ color:#8fa0c9; text-align:center; padding:26px 0; font-size:14px; }
.benimsatir{ background:#132e63; border-color:#ffed00; }

/* ---------- oyun alani ---------- */
.oyunalan{ flex:1; display:flex; flex-direction:column; padding:8px; max-width:820px; margin:0 auto; width:100%; }

.rakipbar, .benbar{
	display:flex; align-items:center; gap:10px; padding:7px 10px;
	background:#0e2456; border:1px solid #23407e; border-radius:12px;
}
.rakipbar{ margin-bottom:8px; }
.benbar{ margin-top:8px; }
.oyuncu{ display:flex; align-items:center; gap:9px; flex:1; min-width:0; }
.oyuncu img{ width:34px; height:34px; border-radius:50%; object-fit:cover; }
.oyuncu .bilgi{ min-width:0; }
.oyuncu .rumuz{ font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.oyuncu .altyazi{ font-size:11px; color:#8fa0c9; }
.oyuncu.sari img{ border:2px solid #ffd700; }
.oyuncu.kirmizi img{ border:2px solid #6e8fd6; }
.siralamba{ width:12px; height:12px; border-radius:50%; background:#31427a; flex:none; }
.siralamba.aktif{ background:#2ecc40; box-shadow:0 0 10px #2ecc40; }
.toplanan{ display:flex; align-items:center; gap:4px; font-size:12px; color:#8fa0c9; flex:none; }
.minipul{ width:14px; height:14px; border-radius:50%; display:inline-block; }
.minipul.s{ background:radial-gradient(circle at 35% 30%, #fff176, #f7c600 60%, #b78900); }
.minipul.k{ background:radial-gradient(circle at 35% 30%, #7d9be0, #1a3a8c 60%, #091838); border:1px solid #b9c9f2; }

/* ---------- tahta ---------- */
.tahtakap{ flex:1; display:flex; align-items:center; justify-content:center; min-height:0; }
.tahta{
	width:100%;
	max-width:780px;
	aspect-ratio: 13/10;
	max-height:100%;
	background:#123a23;
	background:linear-gradient(135deg,#0f3e63 0%, #0c3050 100%);
	border:6px solid #5b3a1e;
	border-radius:10px;
	box-shadow:inset 0 0 40px rgba(0,0,0,.55), 0 14px 40px rgba(0,0,0,.5);
	display:grid;
	grid-template-columns: 1fr 8% 1fr;
	grid-template-rows: 1fr 1fr;
	position:relative;
	user-select:none; touch-action:manipulation;
}
.ceyrek{ display:flex; }
.ceyrek.ust{ align-items:flex-start; }
.ceyrek.alt{ align-items:flex-end; }
.orta{
	grid-row:1 / span 2;
	background:#5b3a1e;
	background:linear-gradient(90deg,#4a2f18,#6b4423,#4a2f18);
	display:flex; flex-direction:column; align-items:center; justify-content:space-around;
	padding:6px 2px; z-index:2;
}

.nokta{
	flex:1; height:100%; position:relative;
	display:flex; flex-direction:column; align-items:center;
	cursor:pointer;
}
.ceyrek.alt .nokta{ flex-direction:column-reverse; }
.nokta .ucgen{
	position:absolute; left:6%; width:88%; height:82%;
}
.ceyrek.ust .ucgen{ top:0; clip-path:polygon(0 0, 100% 0, 50% 100%); }
.ceyrek.alt .ucgen{ bottom:0; clip-path:polygon(0 100%, 100% 100%, 50% 0); }
.ucgen.a{ background:linear-gradient(180deg,#ffe98a,#d9b23a); opacity:.92; }
.ucgen.b{ background:linear-gradient(180deg,#17418a,#0d2a5c); opacity:.95; }
.nokta.secili .ucgen{ outline:3px solid #fff; outline-offset:-3px; }
.nokta.hedef .ucgen{ box-shadow:0 0 0 3px #2ecc40 inset; filter:brightness(1.25); }
.nokta.hedef::after{
	content:""; position:absolute; width:26%; padding-top:26%;
	border-radius:50%; background:rgba(46,204,64,.85);
	top:50%; left:50%; transform:translate(-50%,-50%); z-index:3;
	box-shadow:0 0 12px #2ecc40;
}

.pul{
	width:78%; padding-top:78%; border-radius:50%; position:relative; z-index:2;
	margin:1% 0; flex:none;
	box-shadow:0 2px 5px rgba(0,0,0,.5);
}
.pul.s{ background:radial-gradient(circle at 35% 30%, #fff8c4, #ffd700 55%, #a87e00); border:1px solid #8a6a00;}
.pul.k{ background:radial-gradient(circle at 35% 30%, #7d9be0, #1a3a8c 55%, #091838); border:2px solid #c7d4f5;}
.pul.secilipul{ box-shadow:0 0 0 3px #fff, 0 0 14px #fff; }
.pul .adet{
	position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
	font-size:11px; font-weight:800; color:rgba(0,0,0,.7);
}
.pul.k .adet{ color:rgba(255,255,255,.85); }

/* orta bar (kirik pullar) ve toplama alani */
.bardaki{ display:flex; flex-direction:column; align-items:center; gap:3px; }
.bardaki .pul{ width:70%; padding-top:70%; cursor:pointer; }
.bardaki .pul.hedefpul{ box-shadow:0 0 0 3px #2ecc40, 0 0 12px #2ecc40; }

.offalan{
	position:absolute; right:-6px; top:0; bottom:0; width:0;
}

/* ---------- alt bar ---------- */
.altbar{
	display:flex; align-items:center; gap:10px; flex-wrap:wrap;
	padding:8px 4px 2px;
}
.zarlar{ display:flex; gap:6px; min-height:40px; align-items:center; }
.zar{
	width:38px; height:38px; border-radius:9px; background:#fff; color:#081536;
	display:flex; align-items:center; justify-content:center;
	font-size:22px; font-weight:800;
	box-shadow:0 3px 8px rgba(0,0,0,.4);
}
.zar.kullanildi{ opacity:.25; }
.zar.rakipzari{ background:#c8d0e6; }
.durummesaj{ flex:1; font-size:13px; color:#ffed00; font-weight:600; min-width:120px; }
.butonlar{ display:flex; gap:8px; flex-wrap:wrap; }
.butonlar .btn{ padding:9px 14px; font-size:13px; }

/* ---------- modal ---------- */
.modalarka{
	position:fixed; inset:0; background:rgba(3,8,25,.8); z-index:50;
	display:flex; align-items:center; justify-content:center; padding:20px;
}
.modal{
	background:#0e2456; border:2px solid #ffed00; border-radius:18px;
	padding:34px 28px; text-align:center; max-width:340px; width:100%;
}
.modal h2{ color:#ffed00; margin:8px 0; }
.modal p{ color:#b9c4e0; margin-bottom:20px; }
.sonucikon{ font-size:48px; }

/* ---------- mobil ---------- */
@media (max-width:600px){
	.baslik{ letter-spacing:2px; font-size:13px; }
	.uyekutu span{ display:none; }
	.tahta{ border-width:4px; }
	.zar{ width:32px; height:32px; font-size:18px; }
	.butonlar .btn{ padding:8px 10px; font-size:12px; }
	.oyunalan{ padding:6px; }
}
@media (max-height:640px) and (orientation:landscape){
	.rakipbar, .benbar{ padding:4px 8px; }
	.oyuncu img{ width:26px; height:26px; }
}