:root{
	--bg:#0f1724;
	--card:#0b1220;
	--muted:#98a0b3;
	--accent:#4f46e5;
	--accent-2:#06b6d4;
	--success:#16a34a;
	--danger:#ef4444;
	--glass: rgba(255,255,255,0.03);
	--radius:12px;
	font-size:16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
	margin:0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	background: linear-gradient(180deg,#071021 0%,#081225 60%);
	color:#e6eef6;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:24px;
	transition: background 0.4s ease; /* Arkaplan geçişi için eklendi */
}

/* YENİ: Hamle sırası oyuncudayken arkaplanı parlatan sınıf */
body.my-turn {
	background: radial-gradient(ellipse at center, rgba(22, 163, 74, 0.15) 0%, var(--bg) 65%);
}


/* Genel sayfa yapısı */
.page{width:100%;max-width:1100px}
.brand{text-align:center;margin-bottom:18px}
.brand h1{margin:0;font-size:28px;letter-spacing:0.2px}
.brand .subtitle{margin:6px 0 0;color:var(--muted);font-size:13px}

/* Kart */
.card{
	background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
	border:1px solid rgba(255,255,255,0.04);
	padding:18px;
	border-radius:var(--radius);
	box-shadow: 0 6px 18px rgba(2,6,23,0.6);
}

/* Landing */
.center-card{max-width:420px;margin:0 auto;text-align:center}
.label{display:block;margin-bottom:8px;color:var(--muted)}
.input{
	width:100%;
	padding:10px 12px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);
	background:transparent;color:var(--accent-2);font-weight:600;font-size:16px;
	margin-bottom:12px;
	text-align: center;
}
.game-mode-selector {
	display: flex;
	background: rgba(255,255,255,0.03);
	border-radius: 8px;
	padding: 4px;
	margin-bottom: 12px;
}
.mode-btn {
	flex: 1;
	padding: 8px;
	border: 0;
	background: transparent;
	color: var(--muted);
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}
.mode-btn.active {
	background: var(--accent);
	color: white;
	font-weight: 600;
}
.player-inputs {
	display: flex;
	gap: 10px;
}
.player-inputs {
	display:flex;gap:8px;
}
@media (max-width:640px){
	.player-inputs{flex-direction:column}
}
.row{display:flex;gap:8px;justify-content:center}
.btn{
	width: 100%;
	padding:10px 14px;border-radius:10px;border:0;cursor:pointer;font-weight:600;
}
.btn.primary{background:linear-gradient(90deg,var(--accent),#7c3aed);color:white}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.1);color:var(--muted)}
.hint{display:block;margin-top:10px;color:var(--muted);font-size:13px}

/* Game page layout */
.game-header{
	display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;
}
.info{display:flex;flex-direction:column;}
.info .status{font-weight:600}
.scoreboard {
	padding: 8px 12px;
	text-align: center;
}
.scoreboard.hidden {
	display: none;
}
.scoreboard div {
	font-weight: 600;
	font-size: 14px;
}
.controls{display:flex;gap:8px}
.small-btn{padding:8px 10px;border-radius:8px;border:0;background:rgba(255,255,255,0.03);color:var(--muted);cursor:pointer}

/* Canvas container */
.canvas-wrap{
	display:flex;
	justify-content:center;
	align-items:center;
	margin-top:8px;
	padding: 12px;
}
#gameCanvas{
	/* Normalde beyaz arka plan: ızgara net beyaz görünmeli */
	background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
	border-radius:10px;
	box-shadow: 0 8px 30px rgba(2,6,23,0.6);
	border:1px solid rgba(2,6,23,0.06);
	cursor: crosshair;
	transition: box-shadow 0.25s ease, transform 0.12s ease;
}

/* Sadece sıra sizdeyken canvas etrafında yeşil "yanan ışık" etkisi */
body.my-turn #gameCanvas {
	/* hafif yeşil glow */
	box-shadow:
		0 8px 40px rgba(16,185,129,0.18),
		0 0 60px rgba(16,185,129,0.14) inset,
		0 2px 12px rgba(16,185,129,0.08);
	transform: translateY(-2px);
}

/* Game Over Modal */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(15, 23, 36, 0.8);
	backdrop-filter: blur(5px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	opacity: 1;
	transition: opacity 0.3s ease;
}

.modal-overlay.hidden {
	opacity: 0;
	pointer-events: none;
}

.modal-content {
	background: var(--card);
	padding: 24px 32px;
	border-radius: var(--radius);
	text-align: center;
	border: 1px solid rgba(255, 255, 255, 0.06);
	animation: zoomIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	max-width: 500px; /* Kurallar için daha geniş olabilir */
	max-height: 80vh; /* Yüksekliği sınırlayın */
	overflow-y: auto; /* İçerik taşarsa kaydırma çubuğu */
}

.modal-content h2 {
	margin: 0 0 16px;
	color: white;
}

.modal-buttons {
	display: flex;
	gap: 10px;
	justify-content: center;
}

.modal-content .btn {
	width: auto;
	padding: 10px 24px;
}

.rules-text {
	text-align: left;
	font-size: 14px;
	line-height: 1.6;
	color: var(--muted);
}
.rules-text strong {
	color: white;
}
.rules-text ul {
	padding-left: 20px;
	margin-top: 10px;
}
.rules-text li {
	margin-bottom: 5px;
}

@keyframes zoomIn {
	from {
		opacity: 0;
		transform: scale(0.8);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* footer */
.footer{opacity:0.6;margin-top:18px;text-align:center;color:var(--muted);font-size:13px}

/* Responsive */
@media (max-width:640px){
	.center-card{padding:14px}
	.brand h1{font-size:22px}
}

/* Yeni: giriş formu bölümleri için düzen ve açıklama */
.form-section { margin-top: 12px; padding-top: 8px; border-top: 1px dashed rgba(255,255,255,0.03); }
.section-title { font-weight:700;color:rgb(110, 243, 100);margin-bottom:8px;font-size:14px; }
.form-row { display:flex;flex-direction:column;gap:8px;margin-bottom:8px;align-items:stretch; }
.helper { color:var(--muted); font-size:12px; margin-top:2px; }