/* Amiral Battı — rekoroyun.com (2026-11-01). Tavla / satranç oyunlarının görsel dili: koyu ahşap plakalar, bakır halkalar, Bebas Neue;
   oyun alanları gece denizi (lacivert su, pirinç çerçeve). Ölçüler JS'te (boyutla) hesaplanır:
   --cu büyük alanın kare birimi, --cs küçük alanın kare birimi, --pu şerit birimi, --su pencere birimi, --mu menü birimi (px). */
*{
	box-sizing:border-box;
	user-select:none;
	-webkit-user-select:none;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
}
html,body{
	margin:0;
	height:100%;
	overflow:hidden;
}
body{
	background:#0b1d33;
	background:radial-gradient(ellipse at 50% 35%, #1d3d63 0%, #10263f 50%, #07111f 100%);
	font-family:'Bebas Neue', sans-serif;
	font-weight:400;
	color:#d6e9fb;
	--cu:30px;
	--cs:22px;
	--pu:1px;
	--su:8px;
	--mu:10px;
}
#game-border{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	transition:opacity .2s;
}
/* ---------------- menü düğmeleri (satranç ile aynı simgeler) ---------------- */
#buttons-div .ikon-dugme{
	position:relative;
	cursor:pointer;
	border-radius:0.6em;
	background:url("../img/icon-new.svg") center / auto 62% no-repeat, linear-gradient(180deg, #21507e 0%, #0e2541 100%);
	border-radius:.75em;
	box-shadow:0 0 0 .1em #06121f, 0 0 0 .2em rgba(212,175,95,.45), inset 0 .09em 0 rgba(175,215,255,.22), inset 0 -.2em 0 rgba(0,0,0,.3), 0 .25em .5em rgba(0,0,0,.45);
	transition:transform .12s, filter .12s;
	font-size:16px;
}
#buttons-div .ikon-dugme:hover{
	filter:brightness(1.18);
	transform:translateY(-1px);
}
#buttons-div .ikon-dugme:active{
	transform:translateY(1px);
	filter:brightness(.95);
}
#buttons-div .d-ayar{
	background-image:url("../img/icon-settings.svg"), linear-gradient(180deg, #21507e 0%, #0e2541 100%);
}
#buttons-div .d-geri{
	background-image:url("../img/icon-undo.svg"), linear-gradient(180deg, #21507e 0%, #0e2541 100%);
}
#buttons-div .d-ses{
	background-image:url("../img/icon-ses-acik.svg"), linear-gradient(180deg, #21507e 0%, #0e2541 100%);
}
#buttons-div .d-ses.ses-kapali{
	background-image:url("../img/icon-ses-kapali.svg"), linear-gradient(180deg, #21507e 0%, #0e2541 100%);
}
/* ONLINE: online oyunda değilken pasif (diğer düğmeler gibi koyu ahşap, açık simge), online oyundayken aktif (parlak altın, nabızlı ışık) */
#buttons-div .d-online{
	background:url("../img/icon-online-acik.svg") 9% 50% / auto 62% no-repeat, linear-gradient(180deg, #21507e 0%, #0e2541 100%);
	color:#d6e9fb;
	text-shadow:0 .06em 0 rgba(0,0,0,.6);
	font-family:'Bebas Neue', cursive;
	text-align:center;
	padding-left:22%;
}
#buttons-div .d-online.b_online_active{
	background-image:url("../img/icon-online.svg"), linear-gradient(180deg, #ffd34d 0%, #f39200 100%);
	color:#13253d;
	text-shadow:0 .05em 0 rgba(255,248,220,.6);
	box-shadow:0 0 0 .1em #6b3000, 0 0 0 .2em #fff3c4, inset 0 .1em 0 rgba(255,255,255,.5), inset 0 -.2em 0 rgba(120,50,0,.35), 0 0 .8em rgba(255,214,64,.7);
	animation:onlineIsik 2s ease-in-out infinite;
}
@keyframes onlineIsik{
	0%,100%{box-shadow:0 0 0 .1em #6b3000, 0 0 0 .2em #fff3c4, inset 0 .1em 0 rgba(255,255,255,.5), inset 0 -.2em 0 rgba(120,50,0,.35), 0 0 .4em rgba(255,214,64,.5);}
	50%{box-shadow:0 0 0 .1em #6b3000, 0 0 0 .2em #fff3c4, inset 0 .1em 0 rgba(255,255,255,.5), inset 0 -.2em 0 rgba(120,50,0,.35), 0 0 1.1em rgba(255,214,64,.9);}
}
#buttons-div .d-online span{
	pointer-events:none;
}
/* İPUCU: geniş düğme (online oyunda yerine SOHBET); ipucu gösterilirken altın */
#buttons-div .d-ipucu{
	background:url("../img/ayar-yardim.svg") 10% 50% / auto 58% no-repeat, linear-gradient(180deg, #21507e 0%, #0e2541 100%);
	color:#d6e9fb;
	text-shadow:0 .06em 0 rgba(0,0,0,.6);
	font-family:'Bebas Neue', cursive;
	text-align:center;
	padding-left:22%;
}
#buttons-div .d-ipucu.acik{
	background-image:url("../img/ayar-yardim-koyu.svg"), linear-gradient(180deg, #ffd34d 0%, #f39200 100%);
	color:#13253d;
	text-shadow:0 .05em 0 rgba(255,248,220,.6);
	box-shadow:0 0 0 .1em #6b3000, 0 0 0 .2em #fff3c4, inset 0 .1em 0 rgba(255,255,255,.5), inset 0 -.2em 0 rgba(120,50,0,.35), 0 0 .8em rgba(255,214,64,.7);
}
#buttons-div .d-ipucu span{
	pointer-events:none;
}
#buttons-div .d-sohbet{
	background:url("../img/icon-sohbet.svg") 10% 50% / auto 58% no-repeat, linear-gradient(180deg, #21507e 0%, #0e2541 100%);
	color:#d6e9fb;
	text-shadow:0 .06em 0 rgba(0,0,0,.6);
	font-family:'Bebas Neue', cursive;
	text-align:center;
	padding-left:22%;
}
#buttons-div .d-sohbet span{
	pointer-events:none;
}
.kapali-dugme{
	opacity:0.4;
}
/* ===== satranç oyunundan (embed/satranc/css/style.css, 2026-11-01) aynen alınan ortak pencereler: bildirim, ayarlar, mesaj, başlangıç menüsü ===== */
#pop-message{ /* kısa bildirim (30.10.2026: ahşap plaka; bilgi altın, uyarı kırmızı halka + simge) */
	position:fixed;
	display:block;
	opacity:0;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	z-index:98;
	pointer-events:none;
	max-width:90vw;
	padding:max(8px, calc(var(--su)*1.1)) max(14px, calc(var(--su)*2.2));
	border-radius:max(10px, calc(var(--su)*1.4));
	text-align:center;
	font-family:'Poppins', sans-serif;
	font-weight:600;
	font-size:max(13px, calc(var(--su)*2.1));
	line-height:1.35;
	color:#e8f3ff;
	text-shadow:0 1px 0 rgba(0,0,0,.5);
	background:linear-gradient(180deg, #21507e 0%, #0c2038 100%);
	box-shadow:0 0 0 2px #06121f, 0 0 0 max(4px, calc(var(--su)*.45)) var(--halka, rgba(212,175,95,.6)), inset 0 2px 0 rgba(175,215,255,.18), 0 max(6px, calc(var(--su)*1)) max(18px, calc(var(--su)*3)) rgba(0,0,0,.55);
}
#pop-message::before{
	content:"";
	display:inline-block;
	vertical-align:-.28em;
	width:1.35em;
	height:1.35em;
	margin-right:.5em;
	border-radius:50%;
	background:var(--simge) center / 62% no-repeat, var(--daire);
	box-shadow:0 0 0 2px #06121f;
}
.info{
	--halka:#e0a24c;
	--daire:radial-gradient(circle at 40% 35%, #ffd34d 0%, #f39200 100%);
	--simge:url("../img/mesaj-bilgi.svg");
}
.alert{
	--halka:#d4553f;
	--daire:radial-gradient(circle at 40% 35%, #ef6a4f 0%, #a8251a 100%);
	--simge:url("../img/mesaj-uyari.svg");
}
/* ---------------- ayarlar (30.10.2026 yenilendi: başlangıç menüsüyle aynı koyu ahşap / bakır halka dili) ----------------
   birim --ss; satır: solda bakır halkalı simge dairesi, ad + açıklama, sağda seçim çubuğu (seçili altın) ya da anahtar (açıkken altın) */
#settings{
	--ss:max(7px, min(var(--su), 1.15vh)); /* alçak pencerede yedi satır sığsın */
	position:fixed;
	display:none;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	z-index:98;
	width:min(94vw, calc(var(--ss)*64));
	max-height:94vh;
	overflow-y:auto;
	padding:calc(var(--ss)*1.2) calc(var(--ss)*2) calc(var(--ss)*2) calc(var(--ss)*2);
	text-align:center;
	color:#d6e9fb;
	border-radius:calc(var(--ss)*2.6);
	background:linear-gradient(180deg, #1b416a 0%, #0a1b31 100%);
	box-shadow:0 0 0 calc(var(--ss)*.25) #06121f, 0 0 0 calc(var(--ss)*.55) rgba(212,175,95,.45), inset 0 calc(var(--ss)*.2) 0 rgba(175,215,255,.14),
		inset 0 0 calc(var(--ss)*2) rgba(0,0,0,.4), 0 calc(var(--ss)*1.2) calc(var(--ss)*5) rgba(0,0,0,.6);
	scrollbar-width:thin;
	scrollbar-color:#2b5f91 transparent;
}
#settings-header{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:calc(var(--ss)*1.2);
	padding:calc(var(--ss)*.6) calc(var(--ss)*6) calc(var(--ss)*1.8) calc(var(--ss)*6);
	font-size:calc(var(--ss)*4.4);
	line-height:1;
	letter-spacing:.06em;
	color:#e3f1ff;
	text-shadow:0 .06em 0 rgba(0,0,0,.55);
}
#settings-header::before{ /* dişli simgesi */
	content:"";
	flex:none;
	width:calc(var(--ss)*4.4);
	height:calc(var(--ss)*4.4);
	border-radius:50%;
	background:url("../img/menu-ayar.svg") center / 56% no-repeat, radial-gradient(circle at 40% 35%, #5f97c8 0%, #2b5f91 60%, #173a60 100%);
	box-shadow:0 0 0 calc(var(--ss)*.2) #06121f, 0 0 0 calc(var(--ss)*.4) rgba(175,215,255,.25), inset 0 calc(var(--ss)*-.3) calc(var(--ss)*.6) rgba(0,0,0,.35);
}
#settings-header::after{ /* başlığın altında bakır çizgi */
	content:"";
	position:absolute;
	left:8%;
	right:8%;
	bottom:calc(var(--ss)*.6);
	height:calc(var(--ss)*.22);
	border-radius:9px;
	background:linear-gradient(90deg, rgba(212,175,95,0) 0%, rgba(212,175,95,.7) 50%, rgba(212,175,95,0) 100%);
}
#settings-close{
	position:absolute;
	top:calc(var(--ss)*.2);
	right:calc(var(--ss)*-.4);
	width:calc(var(--ss)*4.6);
	height:calc(var(--ss)*4.6);
	cursor:pointer;
	border-radius:50%;
	background:radial-gradient(circle at 40% 35%, #2a5b8c 0%, #173a60 70%, #0a1b31 100%);
	box-shadow:0 0 0 calc(var(--ss)*.2) #06121f, 0 0 0 calc(var(--ss)*.4) rgba(212,175,95,.55), inset 0 calc(var(--ss)*.18) 0 rgba(175,215,255,.2), 0 calc(var(--ss)*.4) calc(var(--ss)*.8) rgba(0,0,0,.45);
	transition:transform .12s, filter .12s;
}
#settings-close::before,#settings-close::after{ /* çarpı */
	content:"";
	position:absolute;
	left:27%;
	top:50%;
	width:46%;
	height:calc(var(--ss)*.5);
	margin-top:calc(var(--ss)*-.25);
	border-radius:9px;
	background:#e8f3ff;
	box-shadow:0 calc(var(--ss)*.1) 0 rgba(0,0,0,.35);
	transform:rotate(45deg);
}
#settings-close::after{
	transform:rotate(-45deg);
}
#settings-close:hover{
	filter:brightness(1.2);
	transform:rotate(90deg);
}
#settings .list{
	display:flex;
	align-items:center;
	gap:calc(var(--ss)*1.2);
	min-height:calc(var(--ss)*7.6);
	margin:calc(var(--ss)*1.2) calc(var(--ss)*.5) 0 calc(var(--ss)*.5);
	padding:calc(var(--ss)*.9) calc(var(--ss)*1.2);
	border-radius:calc(var(--ss)*1.6);
	text-align:left;
	background:linear-gradient(180deg, #245585 0%, #0e2541 100%);
	box-shadow:0 0 0 calc(var(--ss)*.2) #06121f, 0 0 0 calc(var(--ss)*.42) rgba(212,175,95,.4), inset 0 calc(var(--ss)*.18) 0 rgba(175,215,255,.18),
		inset 0 calc(var(--ss)*-.35) 0 rgba(0,0,0,.28), 0 calc(var(--ss)*.5) calc(var(--ss)*1) rgba(0,0,0,.4);
}
#settings .list::before{ /* simge dairesi */
	content:"";
	flex:none;
	width:calc(var(--ss)*5.2);
	height:calc(var(--ss)*5.2);
	border-radius:50%;
	background:var(--simge) center / 54% no-repeat, radial-gradient(circle at 40% 35%, #5f97c8 0%, #2b5f91 60%, #173a60 100%);
	box-shadow:0 0 0 calc(var(--ss)*.2) #06121f, 0 0 0 calc(var(--ss)*.4) rgba(175,215,255,.25), inset 0 calc(var(--ss)*-.3) calc(var(--ss)*.6) rgba(0,0,0,.35);
}
#settings .l-seviye{ --simge:url("../img/ayar-seviye.svg"); }
#settings .l-renk{ --simge:url("../img/ayar-renk.svg"); }
#settings .l-tahta{ --simge:url("../img/ayar-tahta.svg"); }
#settings .l-tas{ --simge:url("../img/ayar-tas.svg"); }
#settings .l-ses{ --simge:url("../img/ayar-ses.svg"); }
#settings .l-yardim{ --simge:url("../img/ayar-yardim.svg"); }
#settings .l-numara{ --simge:url("../img/ayar-numara.svg"); }
#settings .list span{
	flex:1;
	min-width:0;
	font-size:calc(var(--ss)*2.7);
	line-height:1.05;
	letter-spacing:.03em;
	color:#e3f1ff;
	text-shadow:0 .06em 0 rgba(0,0,0,.55);
}
#settings .list em{
	display:block;
	margin-top:calc(var(--ss)*.35);
	font-family:'Poppins', sans-serif;
	font-weight:600;
	font-style:normal;
	font-size:max(10.5px, calc(var(--ss)*1.35));
	line-height:1.25;
	letter-spacing:0;
	color:#8fb3d6;
	text-shadow:none;
}
/* seçim çubuğu: oyuk içinde üç seçenek, seçili olan altın */
#settings .secim{
	flex:none;
	display:flex;
	gap:calc(var(--ss)*.3);
	width:calc(var(--ss)*28);
	padding:calc(var(--ss)*.35);
	border-radius:calc(var(--ss)*1.2);
	background:#06121f;
	box-shadow:inset 0 calc(var(--ss)*.25) calc(var(--ss)*.6) rgba(0,0,0,.7), 0 calc(var(--ss)*.12) 0 rgba(175,215,255,.16);
}
#settings-easy{
	order:1;
}
#settings-normal{
	order:2;
}
#settings-hard{
	order:3;
}
#settings .settings-button{
	cursor:pointer;
	flex:1 1 0;
	padding:0 calc(var(--ss)*.5);
	height:calc(var(--ss)*4.2);
	line-height:calc(var(--ss)*4.5);
	font-size:calc(var(--ss)*2.1);
	letter-spacing:.04em;
	text-align:center;
	white-space:nowrap;
	border-radius:calc(var(--ss)*.85);
	color:#86aacd;
	transition:color .15s, background .15s;
}
#settings .settings-button.passive:hover{
	color:#e3f1ff;
	background:rgba(175,215,255,.08);
}
#settings .settings-button.active{
	cursor:default;
	color:#13253d;
	background:linear-gradient(180deg, #ffd34d 0%, #f39200 100%);
	box-shadow:inset 0 calc(var(--ss)*.15) 0 rgba(255,255,255,.5), inset 0 calc(var(--ss)*-.25) 0 rgba(120,50,0,.35), 0 0 calc(var(--ss)*1.2) rgba(255,188,0,.35);
	text-shadow:0 .05em 0 rgba(255,248,220,.6);
}
/* anahtar: açıkken altın yol + sağda düğme, kapalıyken oyuk + solda düğme */
#settings .settings-switch{
	position:relative;
	flex:none;
	cursor:pointer;
	box-sizing:border-box;
	width:calc(var(--ss)*11.6);
	height:calc(var(--ss)*4.8);
	line-height:calc(var(--ss)*5.05);
	font-size:calc(var(--ss)*1.9);
	letter-spacing:.05em;
	border-radius:calc(var(--ss)*2.4);
	transition:background .2s, color .2s;
}
#settings .settings-switch::after{
	content:"";
	position:absolute;
	top:calc(var(--ss)*.5);
	left:calc(100% - var(--ss)*4.3);
	width:calc(var(--ss)*3.8);
	height:calc(var(--ss)*3.8);
	border-radius:50%;
	background:radial-gradient(circle at 38% 32%, #fffaf0 0%, #dcecfb 55%, #8fb3d6 100%);
	box-shadow:0 calc(var(--ss)*.2) calc(var(--ss)*.4) rgba(0,0,0,.45), inset 0 calc(var(--ss)*-.2) calc(var(--ss)*.3) rgba(5,20,45,.35);
	transition:left .2s, background .2s;
}
#settings .settings-switch.on{
	text-align:left;
	padding-left:calc(var(--ss)*1.7);
	color:#13253d;
	background:linear-gradient(180deg, #ffd34d 0%, #f39200 100%);
	box-shadow:0 0 0 calc(var(--ss)*.2) #6b3000, inset 0 calc(var(--ss)*.15) 0 rgba(255,255,255,.45), inset 0 calc(var(--ss)*-.25) 0 rgba(120,50,0,.3), 0 0 calc(var(--ss)*1.2) rgba(255,188,0,.3);
	text-shadow:0 .05em 0 rgba(255,248,220,.6);
}
#settings .settings-switch.off{
	text-align:right;
	padding-right:calc(var(--ss)*1.2);
	color:#7393b5;
	background:#06121f;
	box-shadow:inset 0 calc(var(--ss)*.25) calc(var(--ss)*.6) rgba(0,0,0,.7), 0 calc(var(--ss)*.12) 0 rgba(175,215,255,.16);
}
#settings .settings-switch.off::after{
	left:calc(var(--ss)*.5);
	background:radial-gradient(circle at 38% 32%, #5f97c8 0%, #2b5f91 60%, #173a60 100%);
}
@media (max-width:500px){ /* dar ekran: simge daireleri gizlenir, açıklamaya yer kalır */
	#settings{
		padding-left:calc(var(--ss)*1.2);
		padding-right:calc(var(--ss)*1.2);
	}
	#settings .list::before{
		display:none;
	}
	#settings .secim{
		width:auto;
	}
	#settings .settings-button{
		flex:none;
		padding:0 calc(var(--ss)*.8);
	}
}
/* ---------------- mesaj penceresi (30.10.2026 yenilendi: ayarlarla aynı koyu ahşap / bakır halka dili) ----------------
   başlık üstünde simge dairesi (data-tur: uyari | kazandi | bitti), TAMAM altın (birincil), İPTAL koyu ahşap; açılışta yumuşak büyüme */
#message{
	--ss:max(7px, var(--su));
	position:fixed;
	display:none;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	z-index:99;
	box-sizing:border-box;
	width:min(92vw, calc(var(--ss)*58));
	max-height:94vh;
	overflow-y:auto;
	padding:calc(var(--ss)*3) calc(var(--ss)*3) calc(var(--ss)*3.2) calc(var(--ss)*3);
	text-align:center;
	color:#e3f1ff;
	border-radius:calc(var(--ss)*2.6);
	background:radial-gradient(ellipse at 50% 0%, rgba(212,175,95,.28) 0%, rgba(212,175,95,0) 60%), linear-gradient(180deg, #1b416a 0%, #0a1b31 100%);
	box-shadow:0 0 0 calc(var(--ss)*.25) #06121f, 0 0 0 calc(var(--ss)*.55) rgba(212,175,95,.5), inset 0 calc(var(--ss)*.2) 0 rgba(175,215,255,.14),
		inset 0 0 calc(var(--ss)*2) rgba(0,0,0,.4), 0 calc(var(--ss)*1.2) calc(var(--ss)*6) rgba(0,0,0,.65);
	animation:pencereGel .25s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes pencereGel{
	0%{opacity:0; transform:translate(-50%, -50%) scale(.82);}
	100%{opacity:1; transform:translate(-50%, -50%) scale(1);}
}
#message::before{ /* simge dairesi */
	content:"";
	display:block;
	margin:0 auto calc(var(--ss)*1.2) auto;
	width:calc(var(--ss)*7.4);
	height:calc(var(--ss)*7.4);
	border-radius:50%;
	background:url("../img/mesaj-uyari.svg") center / 52% no-repeat, radial-gradient(circle at 40% 35%, #5f97c8 0%, #2b5f91 60%, #173a60 100%);
	box-shadow:0 0 0 calc(var(--ss)*.3) #06121f, 0 0 0 calc(var(--ss)*.62) rgba(212,175,95,.6), inset 0 calc(var(--ss)*-.4) calc(var(--ss)*.8) rgba(0,0,0,.35), 0 calc(var(--ss)*.6) calc(var(--ss)*1.4) rgba(0,0,0,.45);
}
#message[data-tur="kazandi"]::before{
	background:url("../img/mesaj-kupa.svg") center / 54% no-repeat, radial-gradient(circle at 40% 35%, #ffe27a 0%, #ffbf1f 50%, #e07f00 100%);
	box-shadow:0 0 0 calc(var(--ss)*.3) #6b3000, 0 0 0 calc(var(--ss)*.62) rgba(255,232,150,.75), inset 0 calc(var(--ss)*-.4) calc(var(--ss)*.8) rgba(120,50,0,.35), 0 0 calc(var(--ss)*4) rgba(255,190,40,.55);
	animation:kupaParla 1.8s ease-in-out infinite;
}
@keyframes kupaParla{
	0%,100%{filter:brightness(1);}
	50%{filter:brightness(1.15);}
}
#message[data-tur="bitti"]::before{
	background:url("../img/mesaj-sah.svg") center / 52% no-repeat, radial-gradient(circle at 40% 35%, #5f97c8 0%, #2b5f91 60%, #173a60 100%);
}
#message-title{
	font-family:'Bebas Neue', cursive;
	font-size:calc(var(--ss)*5);
	line-height:1;
	letter-spacing:.06em;
	color:#e3f1ff;
	text-shadow:0 .06em 0 rgba(0,0,0,.55);
}
#message[data-tur="kazandi"] #message-title{
	color:#ffcf3a;
	text-shadow:0 .06em 0 rgba(0,0,0,.55), 0 0 .5em rgba(255,190,40,.45);
}
#message-message{
	position:relative;
	margin:calc(var(--ss)*1.6) auto 0 auto;
	padding-top:calc(var(--ss)*1.6);
	width:94%;
	font-family:'Bebas Neue', cursive;
	font-size:calc(var(--ss)*3.3);
	line-height:1.2;
	letter-spacing:.03em;
	color:#d6e9fb;
}
#message-message::before{ /* başlığın altında bakır çizgi */
	content:"";
	position:absolute;
	left:10%;
	right:10%;
	top:0;
	height:calc(var(--ss)*.22);
	border-radius:9px;
	background:linear-gradient(90deg, rgba(212,175,95,0) 0%, rgba(212,175,95,.7) 50%, rgba(212,175,95,0) 100%);
}
#message-message small{
	display:block;
	margin-top:.5em;
	font-family:'Poppins', sans-serif;
	font-weight:600;
	font-size:max(12px, calc(var(--ss)*1.6));
	line-height:1.45;
	letter-spacing:0;
	color:#8fb3d6;
}
#message .close{
	position:absolute;
	top:calc(var(--ss)*1.4);
	right:calc(var(--ss)*1.4);
	width:calc(var(--ss)*4.4);
	height:calc(var(--ss)*4.4);
	cursor:pointer;
	font-size:0;
	border-radius:50%;
	background:radial-gradient(circle at 40% 35%, #2a5b8c 0%, #173a60 70%, #0a1b31 100%);
	box-shadow:0 0 0 calc(var(--ss)*.2) #06121f, 0 0 0 calc(var(--ss)*.4) rgba(212,175,95,.55), inset 0 calc(var(--ss)*.18) 0 rgba(175,215,255,.2), 0 calc(var(--ss)*.4) calc(var(--ss)*.8) rgba(0,0,0,.45);
	transition:transform .12s, filter .12s;
}
#message .close::before,#message .close::after{
	content:"";
	position:absolute;
	left:27%;
	top:50%;
	width:46%;
	height:calc(var(--ss)*.5);
	margin-top:calc(var(--ss)*-.25);
	border-radius:9px;
	background:#e8f3ff;
	box-shadow:0 calc(var(--ss)*.1) 0 rgba(0,0,0,.35);
	transform:rotate(45deg);
}
#message .close::after{
	transform:rotate(-45deg);
}
#message .close:hover{
	filter:brightness(1.2);
	transform:rotate(90deg);
}
#message-confirms{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:calc(var(--ss)*1.6);
	margin-top:calc(var(--ss)*3);
}
#message .ok,#message .cancel{
	cursor:pointer;
	min-width:calc(var(--ss)*17);
	padding:0 calc(var(--ss)*2);
	height:calc(var(--ss)*6);
	line-height:calc(var(--ss)*6.35);
	font-family:'Bebas Neue', cursive;
	font-size:calc(var(--ss)*3);
	letter-spacing:.05em;
	border-radius:calc(var(--ss)*1.5);
	transition:transform .12s, filter .12s;
}
#message .ok{
	order:2;
	color:#13253d;
	background:linear-gradient(180deg, #ffd34d 0%, #f39200 100%);
	box-shadow:0 0 0 calc(var(--ss)*.2) #6b3000, 0 0 0 calc(var(--ss)*.42) rgba(255,232,150,.7), inset 0 calc(var(--ss)*.2) 0 rgba(255,255,255,.5),
		inset 0 calc(var(--ss)*-.35) 0 rgba(120,50,0,.35), 0 calc(var(--ss)*.5) calc(var(--ss)*1) rgba(0,0,0,.4), 0 0 calc(var(--ss)*2) rgba(255,188,0,.3);
	text-shadow:0 .05em 0 rgba(255,248,220,.6);
}
#message .cancel{
	order:1;
	color:#d6e9fb;
	background:linear-gradient(180deg, #245585 0%, #0e2541 100%);
	box-shadow:0 0 0 calc(var(--ss)*.2) #06121f, 0 0 0 calc(var(--ss)*.42) rgba(212,175,95,.45), inset 0 calc(var(--ss)*.18) 0 rgba(175,215,255,.2),
		inset 0 calc(var(--ss)*-.35) 0 rgba(0,0,0,.3), 0 calc(var(--ss)*.5) calc(var(--ss)*1) rgba(0,0,0,.45);
	text-shadow:0 .06em 0 rgba(0,0,0,.55);
}
#message .ok:hover,#message .cancel:hover{
	filter:brightness(1.12);
	transform:translateY(calc(var(--ss)*-.25));
}
#message .ok:active,#message .cancel:active{
	filter:brightness(.96);
	transform:translateY(calc(var(--ss)*.15));
}

/* ---------------- başlangıç ekranı (29.10.2026 yenilendi: oyunun koyu ahşap / bakır halka dili) ----------------
   ölçü birimi --mu (menü 43 x 74 birim, boyutla); düğmeler: solda bakır halkalı simge dairesi, ad + açıklama; TEK KİŞİLİK altın (birincil) */
#start-screen{
	position:fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	z-index:90;
	background:radial-gradient(ellipse at 50% 34%, #2b5f91 0%, #173a60 52%, #081729 100%);
}
#start-screen::before{
	content:"";
	position:absolute;
	inset:0;
	background:url("../img/dark.png") center / 220px;
	opacity:.13;
	pointer-events:none;
}
#start-screen::after{ /* logonun arkasında sıcak ışık */
	content:"";
	position:absolute;
	inset:0;
	background:radial-gradient(ellipse at 50% 22%, rgba(255,190,110,.2) 0%, rgba(0,0,0,0) 45%);
	pointer-events:none;
}
#start-menu{
	font-family:'Bebas Neue', cursive;
	position:absolute;
	z-index:1;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	text-align:center;
}
#start-menu #logo{
	display:block;
	margin:0 auto calc(var(--mu)*1.6) auto;
	width:calc(var(--mu)*38);
	height:auto;
	filter:drop-shadow(0 calc(var(--mu)*1) calc(var(--mu)*1.4) rgba(0,0,0,.45));
}
#start-buttons{
	margin:auto;
	width:calc(var(--mu)*40);
	padding:calc(var(--mu)*2.6);
	display:flex;
	flex-direction:column;
	gap:calc(var(--mu)*1.5);
	border-radius:calc(var(--mu)*2.6);
	background:linear-gradient(180deg, #1b416a 0%, #0a1b31 100%);
	box-shadow:0 0 0 calc(var(--mu)*.25) #06121f, 0 0 0 calc(var(--mu)*.55) rgba(212,175,95,.4), inset 0 calc(var(--mu)*.2) 0 rgba(175,215,255,.14),
		inset 0 0 calc(var(--mu)*2) rgba(0,0,0,.4), 0 calc(var(--mu)*1.2) calc(var(--mu)*3) rgba(0,0,0,.5);
}
.start-buttons{
	position:relative;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:flex-start;
	height:calc(var(--mu)*8.4);
	padding-left:calc(var(--mu)*10.6);
	text-align:left;
	cursor:pointer;
	border-radius:calc(var(--mu)*1.6);
	color:#d6e9fb;
	background:linear-gradient(180deg, #245585 0%, #0e2541 100%);
	box-shadow:0 0 0 calc(var(--mu)*.2) #06121f, 0 0 0 calc(var(--mu)*.42) rgba(212,175,95,.45), inset 0 calc(var(--mu)*.18) 0 rgba(175,215,255,.2),
		inset 0 calc(var(--mu)*-.35) 0 rgba(0,0,0,.3), 0 calc(var(--mu)*.5) calc(var(--mu)*1) rgba(0,0,0,.45);
	transition:transform .12s, filter .12s;
}
.start-buttons::before{ /* simge dairesi */
	content:"";
	position:absolute;
	left:calc(var(--mu)*1.4);
	top:50%;
	width:calc(var(--mu)*6.2);
	height:calc(var(--mu)*6.2);
	margin-top:calc(var(--mu)*-3.1);
	border-radius:50%;
	background:var(--simge) center / 54% no-repeat, radial-gradient(circle at 40% 35%, #5f97c8 0%, #2b5f91 60%, #173a60 100%);
	box-shadow:0 0 0 calc(var(--mu)*.2) #06121f, 0 0 0 calc(var(--mu)*.4) rgba(175,215,255,.25), inset 0 calc(var(--mu)*-.3) calc(var(--mu)*.6) rgba(0,0,0,.35);
}
.start-buttons b{
	display:block;
	font-weight:400;
	font-size:calc(var(--mu)*3.6);
	line-height:1;
	letter-spacing:.03em;
	text-shadow:0 .06em 0 rgba(0,0,0,.55);
}
.start-buttons small{
	display:block;
	margin-top:calc(var(--mu)*.35);
	font-family:'Poppins', sans-serif;
	font-weight:600;
	font-size:max(9px, calc(var(--mu)*1.45));
	line-height:1.2;
	color:#8fb3d6;
}
.start-buttons:hover{
	transform:translateY(calc(var(--mu)*-.25));
	filter:brightness(1.12);
}
.start-buttons:active{
	transform:translateY(calc(var(--mu)*.15));
	filter:brightness(.96);
}
.start-buttons.birincil{
	color:#13253d;
	background:linear-gradient(180deg, #ffd34d 0%, #f39200 100%);
	box-shadow:0 0 0 calc(var(--mu)*.2) #6b3000, 0 0 0 calc(var(--mu)*.42) rgba(255,232,150,.7), inset 0 calc(var(--mu)*.2) 0 rgba(255,255,255,.5),
		inset 0 calc(var(--mu)*-.35) 0 rgba(120,50,0,.35), 0 calc(var(--mu)*.5) calc(var(--mu)*1) rgba(0,0,0,.4), 0 0 calc(var(--mu)*2) rgba(255,188,0,.35);
}
.start-buttons.birincil b{
	text-shadow:0 .05em 0 rgba(255,248,220,.6);
}
.start-buttons.birincil small{
	color:#2a4566;
}
.start-buttons.birincil::before{
	background:var(--simge) center / 54% no-repeat, radial-gradient(circle at 40% 35%, #2b5f91 0%, #173a60 70%, #0a1b31 100%);
}
#start-1p{ --simge:url("../img/menu-tek.svg"); }
#start-2p{ --simge:url("../img/menu-cift.svg"); }
#start-settings{ --simge:url("../img/menu-ayar.svg"); }
#start-online{ --simge:url("../img/menu-online.svg"); }
/* 01.11.2026: ONLINE (menünün en altında) altın daire + altın yazı (kart oyunlarındaki REKOR TABLOSU gibi) */
#start-online:not(.birincil) b{ color:#f2d77a; }
#start-online:not(.birincil)::before{
	background:url("../img/menu-online-koyu.svg") center / 54% no-repeat, radial-gradient(circle at 40% 35%, #ffe27a 0%, #ffbf1f 50%, #e07f00 100%);
	box-shadow:0 0 0 calc(var(--mu)*.2) #6b3000, 0 0 0 calc(var(--mu)*.4) rgba(255,232,150,.6), inset 0 calc(var(--mu)*-.3) calc(var(--mu)*.6) rgba(120,50,0,.3);
}
#start-back{
	display:none;
	margin:calc(var(--mu)*2.2) auto 0 auto;
	width:max-content;
	padding:calc(var(--mu)*.7) calc(var(--mu)*2.6);
	cursor:pointer;
	color:#d6e9fb;
	font-family:'Bebas Neue', cursive;
	letter-spacing:0.05em;
	font-size:calc(var(--mu)*2.8);
	line-height:1.1;
	border-radius:calc(var(--mu)*3);
	background:linear-gradient(180deg, #1b416a 0%, #0a1b31 100%);
	box-shadow:0 0 0 calc(var(--mu)*.2) #06121f, 0 0 0 calc(var(--mu)*.4) rgba(212,175,95,.4), inset 0 calc(var(--mu)*.15) 0 rgba(175,215,255,.14);
	transition:filter .12s;
}
#start-back:hover{
	filter:brightness(1.18);
	color:#fff;
}
/* alçak yatay ekranlarda menü yan yana: logo solda, düğmeler sağda */
body.menu-yan #start-menu{
	display:grid;
	grid-template-columns:auto auto;
	column-gap:calc(var(--mu)*4);
	align-items:center;
}
body.menu-yan #start-menu #logo{
	grid-row:1 / 3;
	margin:0;
}
body.menu-yan #start-buttons,
body.menu-yan #start-back{
	grid-column:2;
}


/* ===== satranç oyunundan: online lobi, yükleniyor, sohbet, profil ===== */
#online{
	position:absolute;
	width:100%;
	height:100vh;
	display:none;
	top:0;
	left:0;
	border:0;
	overflow:hidden;
}
#loading{ /* online bağlantı beklenirken (30.10.2026: ahşap plaka + dönen bakır halka) */
	display:none;
	position:fixed;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	z-index:97;
	padding:14px 26px 14px 62px;
	border-radius:14px;
	color:#e3f1ff;
	font-family:'Bebas Neue', cursive;
	font-size:24px;
	white-space:nowrap;
	letter-spacing:0.05em;
	text-align:center;
	text-shadow:0 .06em 0 rgba(0,0,0,.55);
	background:linear-gradient(180deg, #21507e 0%, #0c2038 100%);
	box-shadow:0 0 0 2px #06121f, 0 0 0 5px rgba(212,175,95,.55), inset 0 2px 0 rgba(175,215,255,.18), 0 8px 26px rgba(0,0,0,.55);
}
#loading::before{
	content:"";
	position:absolute;
	left:20px;
	top:50%;
	width:24px;
	height:24px;
	margin-top:-15px;
	border-radius:50%;
	border:3px solid rgba(212,175,95,.3);
	border-top-color:#ffc83a;
	animation:yukleniyorDon .8s linear infinite;
}
@keyframes yukleniyorDon{
	100%{transform:rotate(360deg);}
}
#chatFrame{
	position:fixed;
	display:none;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
	border:0;
	z-index:999;
}
.bubble{
	position:fixed;
	display:none;
	max-width:min(60vw, 260px);
	padding:8px 12px;
	background:#f0f0f0;
	border-radius:10px;
	color:#333;
	font:max(12px, 2.4vmin) Poppins, sans-serif;
	box-shadow:0 1vmin 3vmin rgba(0,0,0,.4);
	z-index:998;
}
.bubble img{
	width:max(32px, 7vmin);
	height:max(32px, 7vmin);
}
#profile{
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:995;
	pointer-events:none;
}
#profile > *{
	pointer-events:auto;
}

/* ===================== AMİRAL BATTI: oyun alanı ===================== */
body{
	--k:var(--cu);
}
#start-screen{
	background:radial-gradient(ellipse at 50% 34%, #23507e 0%, #143456 52%, #07111f 100%);
}
#start-screen::before{
	background:repeating-radial-gradient(ellipse at 50% 120%, rgba(255,255,255,.06) 0 2px, rgba(0,0,0,0) 3px 26px);
	opacity:1;
}
#start-screen::after{
	background:radial-gradient(ellipse at 50% 22%, rgba(150,210,255,.18) 0%, rgba(0,0,0,0) 45%);
}

/* ---------------- oyuncu kartları: avatar dairesi + ad plakası + gemi durumu ---------------- */
.kart{
	position:absolute;
	display:flex;
	align-items:center;
	gap:calc(var(--pu)*10);
	font-size:0;
}
.kart.sag{
	flex-direction:row-reverse;
}
.kart .img{
	position:relative;
	flex:none;
	width:calc(var(--pu)*74);
	height:calc(var(--pu)*74);
	border-radius:50%;
	background-color:#0f2742;
	background-position:center;
	background-size:100% auto;
	background-repeat:no-repeat;
	--halka:#c9a55a;
	box-shadow:0 0 0 calc(var(--pu)*2.2) #06121f, 0 0 0 calc(var(--pu)*4.6) var(--halka), 0 0 0 calc(var(--pu)*6) #06121f,
		inset 0 calc(var(--pu)*-4) calc(var(--pu)*8) rgba(0,0,0,.35), 0 calc(var(--pu)*4) calc(var(--pu)*10) rgba(0,0,0,.5);
	transition:box-shadow .3s;
}
#user1-img{
	background-image:url("../img/user-1.svg");
}
#user2-img{
	background-image:url("../img/user-computer.svg");
	cursor:pointer;
}
.kart .img.avatar-foto::before{
	content:"";
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	border-radius:50%;
	background:var(--avatar) center / cover no-repeat;
}
.kart.sira .img{
	--halka:#ffc83a;
	animation:siraNabiz 1.6s ease-in-out infinite;
}
@keyframes siraNabiz{
	0%,100%{box-shadow:0 0 0 calc(var(--pu)*2.2) #06121f, 0 0 0 calc(var(--pu)*4.6) #ffc83a, 0 0 0 calc(var(--pu)*6) #06121f, 0 0 calc(var(--pu)*6) rgba(255,200,60,.35);}
	50%{box-shadow:0 0 0 calc(var(--pu)*2.2) #06121f, 0 0 0 calc(var(--pu)*4.6) #ffe08a, 0 0 0 calc(var(--pu)*6) #06121f, 0 0 calc(var(--pu)*18) rgba(255,200,60,.85);}
}
.kart.dusunuyor .img::after{ /* yapay zeka nişan alıyor */
	content:"";
	position:absolute;
	inset:calc(var(--pu)*-9);
	border-radius:50%;
	background:conic-gradient(from 0deg, rgba(255,200,60,0) 0 70%, rgba(255,215,110,.95) 100%);
	-webkit-mask:radial-gradient(circle, transparent calc(50% - var(--pu)*3), #000 calc(50% - var(--pu)*2.5));
	mask:radial-gradient(circle, transparent calc(50% - var(--pu)*3), #000 calc(50% - var(--pu)*2.5));
	animation:dusunDon 1s linear infinite;
}
@keyframes dusunDon{
	100%{transform:rotate(360deg);}
}
.kart-yazi{
	display:flex;
	flex-direction:column;
	gap:calc(var(--pu)*8);
	min-width:0;
}
.kart.sag .kart-yazi{
	align-items:flex-end;
}
.kart .user-name{
	max-width:calc(var(--pu)*230);
	font-size:calc(var(--pu)*24);
	line-height:1.25;
	padding:0 calc(var(--pu)*12);
	color:#e3f1ff;
	letter-spacing:.05em;
	text-shadow:0 .06em 0 rgba(0,0,0,.6);
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	border-radius:.35em;
	background:linear-gradient(180deg, #1e4774 0%, #0c2038 100%);
	box-shadow:0 0 0 .08em #06121f, 0 0 0 .16em rgba(212,175,95,.5), inset 0 .07em 0 rgba(175,215,255,.2), 0 .15em .35em rgba(0,0,0,.55);
}
.filo-durum{ /* her gemi bir çubuk: boyu gemi uzunluğuyla orantılı; batanlar kırmızı ve çizili */
	display:flex;
	gap:calc(var(--pu)*5);
	padding:calc(var(--pu)*4) calc(var(--pu)*6);
	border-radius:calc(var(--pu)*8);
	background:rgba(0,0,0,.28);
	box-shadow:inset 0 1px 2px rgba(0,0,0,.5);
}
.kart.sag .filo-durum{
	flex-direction:row-reverse;
}
.filo-durum i{
	position:relative;
	display:block;
	height:calc(var(--pu)*11);
	width:calc(var(--pu)*7.2*var(--l));
	border-radius:calc(var(--pu)*6) calc(var(--pu)*2) calc(var(--pu)*2) calc(var(--pu)*6);
	background:linear-gradient(180deg, #c3ccd6 0%, #7d8a98 100%);
	box-shadow:0 0 0 1px rgba(0,0,0,.45);
	transition:background .4s;
}
.kart.sag .filo-durum i{
	border-radius:calc(var(--pu)*2) calc(var(--pu)*6) calc(var(--pu)*6) calc(var(--pu)*2);
}
.filo-durum i.batti{
	background:linear-gradient(180deg, #ff7a5a 0%, #b02a14 100%);
	opacity:.75;
}
.filo-durum i.batti::after{
	content:"";
	position:absolute;
	left:-2px;
	right:-2px;
	top:50%;
	height:2px;
	margin-top:-1px;
	background:#06121f;
	transform:rotate(-8deg);
}

/* ---------------- düğmeler ---------------- */
#buttons-div{
	position:absolute;
	display:grid;
	grid-auto-flow:column;
	align-items:center;
	justify-content:center;
}
#buttons-div .ikon-dugme{
	height:100%;
	width:100%;
}
#buttons-div .d-online,#buttons-div .d-sohbet{
	display:flex;
	align-items:center;
	justify-content:center;
	line-height:1;
	padding-top:.08em;
	padding-left:34%;
}

/* ---------------- deniz alanı: pirinç çerçeve, gece suyu, ızgara ---------------- */
.saha{
	position:absolute;
	border-radius:calc(var(--k)*0.3);
	box-shadow:0 calc(var(--k)*0.2) calc(var(--k)*0.8) rgba(0,0,0,.6);
	transition:box-shadow .35s, filter .35s;
	touch-action:none;
}
.saha .zemin{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	display:block;
	overflow:visible;
}
.saha .gemiler,.saha .isaretler,.saha .efekt{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	pointer-events:none;
}
.saha .efekt{
	overflow:visible;
	z-index:5;
}
.saha-baslik{
	position:absolute;
	left:50%;
	bottom:100%;
	transform:translateX(-50%);
	margin-bottom:calc(var(--k)*0.14);
	padding:0 calc(var(--k)*0.45);
	font-size:calc(var(--k)*0.5);
	line-height:1.35;
	letter-spacing:.08em;
	white-space:nowrap;
	color:#e3f1ff;
	text-shadow:0 .06em 0 rgba(0,0,0,.6);
	border-radius:.4em;
	background:linear-gradient(180deg, #1b416a 0%, #0a1b31 100%);
	box-shadow:0 0 0 .07em #06121f, 0 0 0 .14em rgba(212,175,95,.45), inset 0 .06em 0 rgba(175,215,255,.18);
	transition:color .3s, background .3s;
}
/* sırası gelen oyuncunun atış yapacağı alan: altın ışık; sırası olmayan: soluk */
.saha.aktif{
	box-shadow:0 0 0 calc(var(--k)*0.06) #ffc83a, 0 0 calc(var(--k)*0.9) rgba(255,200,60,.55), 0 calc(var(--k)*0.2) calc(var(--k)*0.8) rgba(0,0,0,.6);
	animation:hedefIsik 1.8s ease-in-out infinite;
}
.saha.aktif .saha-baslik{
	color:#13253d;
	text-shadow:0 .05em 0 rgba(255,248,220,.6);
	background:linear-gradient(180deg, #ffd34d 0%, #f39200 100%);
	box-shadow:0 0 0 .07em #6b3000, 0 0 0 .14em rgba(255,232,150,.7);
}
@keyframes hedefIsik{
	0%,100%{box-shadow:0 0 0 calc(var(--k)*0.06) #ffc83a, 0 0 calc(var(--k)*0.5) rgba(255,200,60,.4), 0 calc(var(--k)*0.2) calc(var(--k)*0.8) rgba(0,0,0,.6);}
	50%{box-shadow:0 0 0 calc(var(--k)*0.06) #ffe08a, 0 0 calc(var(--k)*1.1) rgba(255,200,60,.75), 0 calc(var(--k)*0.2) calc(var(--k)*0.8) rgba(0,0,0,.6);}
}
.saha.soluk .zemin,.saha.soluk .isaretler,.saha.soluk .gemiler{
	filter:brightness(.78) saturate(.85);
}
.saha.hedefli{
	cursor:crosshair;
}
.saha.sars{
	animation:sars .45s ease-out;
}
@keyframes sars{
	0%,100%{transform:translate(0,0);}
	15%{transform:translate(calc(var(--k)*-0.12),calc(var(--k)*0.06));}
	30%{transform:translate(calc(var(--k)*0.1),calc(var(--k)*-0.08));}
	45%{transform:translate(calc(var(--k)*-0.07),calc(var(--k)*0.05));}
	65%{transform:translate(calc(var(--k)*0.04),calc(var(--k)*-0.03));}
}

/* ---------------- gemiler ---------------- */
.gemi{
	position:absolute;
	transition:left .18s ease-out, top .18s ease-out, opacity .3s, filter .3s;
}
.gemi svg{
	display:block;
	width:100%;
	height:100%;
	overflow:visible;
	filter:drop-shadow(0 calc(var(--k)*0.06) calc(var(--k)*0.06) rgba(0,0,0,.55));
}
body.yerlestir #gemiler1 .gemi{
	pointer-events:auto;
	cursor:grab;
}
.gemi.surukle{
	transition:none;
	z-index:4;
	cursor:grabbing;
}
.gemi.surukle svg{
	filter:drop-shadow(0 calc(var(--k)*0.18) calc(var(--k)*0.2) rgba(0,0,0,.6));
}
.gemi.gecerli::after,.gemi.gecersiz::after{
	content:"";
	position:absolute;
	inset:calc(var(--k)*0.04);
	border-radius:calc(var(--k)*0.18);
	pointer-events:none;
}
.gemi.gecerli::after{
	box-shadow:0 0 0 calc(var(--k)*0.05) #7dff9a, 0 0 calc(var(--k)*0.35) rgba(125,255,154,.6);
}
.gemi.gecersiz::after{
	box-shadow:0 0 0 calc(var(--k)*0.05) #ff5a4a, 0 0 calc(var(--k)*0.35) rgba(255,90,74,.7);
	background:rgba(255,60,40,.18);
}
.gemi.titre{
	animation:titre .35s;
}
@keyframes titre{
	0%,100%{transform:translateX(0);}
	25%{transform:translateX(calc(var(--k)*-0.12));}
	75%{transform:translateX(calc(var(--k)*0.12));}
}
.gemi.batik svg{ /* batan gemi: kararmış, yanık */
	filter:grayscale(.55) brightness(.5) sepia(.35) drop-shadow(0 0 calc(var(--k)*0.12) rgba(255,90,20,.55));
}
.gemi.batik.yeni{
	animation:batis 1.2s ease-out;
}
@keyframes batis{
	0%{opacity:0; transform:scale(1.15);}
	35%{opacity:1;}
	100%{opacity:1; transform:scale(1);}
}
.gemi.hayalet{ /* oyun sonunda görünen batmamış düşman gemileri */
	opacity:.6;
}
.gemi.hayalet svg{
	filter:drop-shadow(0 0 calc(var(--k)*0.12) rgba(140,210,255,.8));
}

/* ---------------- işaretler (kare başına) ---------------- */
.isaret{
	position:absolute;
	width:var(--k);
	height:var(--k);
}
.isaret::before,.isaret::after{
	content:"";
	position:absolute;
	left:50%;
	top:50%;
	border-radius:50%;
	transform:translate(-50%,-50%);
}
.isaret.m0::before{ /* karavana: suda beyaz nokta + halka */
	width:28%;
	height:28%;
	background:radial-gradient(circle at 40% 35%, #ffffff 0%, #cfe9ff 55%, #7fb6e0 100%);
	box-shadow:0 0 0 calc(var(--k)*0.05) rgba(200,235,255,.25), 0 calc(var(--k)*0.02) calc(var(--k)*0.05) rgba(0,0,0,.5);
}
.isaret.mb::before{ /* yardım: burada gemi olamaz */
	width:14%;
	height:14%;
	background:rgba(190,225,255,.38);
}
.isaret.m1::before{ /* isabet: yanan delik */
	width:62%;
	height:62%;
	background:radial-gradient(circle, #fff6c2 0%, #ffcf3d 22%, #ff7a12 48%, #c3260b 72%, rgba(80,10,0,.85) 100%);
	box-shadow:0 0 calc(var(--k)*0.3) rgba(255,110,20,.85);
	animation:alev 0.9s ease-in-out infinite alternate;
}
.isaret.m1::after{ /* duman */
	width:44%;
	height:44%;
	top:22%;
	left:62%;
	background:radial-gradient(circle, rgba(60,60,64,.55) 0%, rgba(60,60,64,0) 70%);
	animation:duman 2.4s linear infinite;
}
.isaret.m3::before{ /* batık geminin vurulmuş karesi: kor */
	width:46%;
	height:46%;
	background:radial-gradient(circle, #ffb347 0%, #d4380d 40%, rgba(60,8,0,.9) 75%, rgba(20,0,0,0) 100%);
	box-shadow:0 0 calc(var(--k)*0.18) rgba(255,90,20,.55);
	animation:alev 1.4s ease-in-out infinite alternate;
}
.isaret.m3::after{
	width:40%;
	height:40%;
	top:26%;
	left:60%;
	background:radial-gradient(circle, rgba(40,40,44,.5) 0%, rgba(40,40,44,0) 70%);
	animation:duman 3.2s linear infinite;
}
@keyframes alev{
	0%{transform:translate(-50%,-50%) scale(.9); filter:brightness(1);}
	100%{transform:translate(-50%,-50%) scale(1.07); filter:brightness(1.25);}
}
@keyframes duman{
	0%{transform:translate(-50%,-30%) scale(.5); opacity:0;}
	20%{opacity:1;}
	100%{transform:translate(-30%,-170%) scale(1.6); opacity:0;}
}
.isaret.mp::before{ /* gönderilen atış (sunucu yanıtı bekleniyor) */
	width:70%;
	height:70%;
	border:calc(var(--k)*0.06) solid #ffd34d;
	box-sizing:border-box;
	animation:nisanNabiz .6s ease-in-out infinite alternate;
}
@keyframes nisanNabiz{
	0%{transform:translate(-50%,-50%) scale(.75); opacity:.6;}
	100%{transform:translate(-50%,-50%) scale(1.05); opacity:1;}
}
.isaret.son{ /* son atış */
	box-shadow:inset 0 0 0 calc(var(--k)*0.05) rgba(255,215,90,.85);
	border-radius:calc(var(--k)*0.08);
}

/* ---------------- imleç (düşman sularında nişangah) ---------------- */
.imlec{
	position:absolute;
	display:none;
	width:var(--k);
	height:var(--k);
	pointer-events:none;
	z-index:3;
	border-radius:calc(var(--k)*0.1);
	background:rgba(255,215,90,.14);
	box-shadow:inset 0 0 0 calc(var(--k)*0.05) rgba(255,215,90,.9);
}
.imlec::before,.imlec::after{
	content:"";
	position:absolute;
	background:rgba(255,215,90,.9);
}
.imlec::before{
	left:50%;
	top:18%;
	bottom:18%;
	width:calc(var(--k)*0.05);
	margin-left:calc(var(--k)*-0.025);
}
.imlec::after{
	top:50%;
	left:18%;
	right:18%;
	height:calc(var(--k)*0.05);
	margin-top:calc(var(--k)*-0.025);
}
.imlec.dolu{
	background:rgba(255,80,60,.12);
	box-shadow:inset 0 0 0 calc(var(--k)*0.05) rgba(255,120,100,.6);
}
.imlec.dolu::before,.imlec.dolu::after{
	background:rgba(255,120,100,.6);
}

/* ---------------- atış efektleri ---------------- */
.ef{
	position:absolute;
	pointer-events:none;
}
.ef-nisan{ /* hedefe kilitlenen nişangah */
	width:var(--k);
	height:var(--k);
	border-radius:50%;
	box-shadow:0 0 0 calc(var(--k)*0.06) #ffd34d, inset 0 0 0 calc(var(--k)*0.04) rgba(255,211,77,.5);
	animation:nisanGel .32s ease-in forwards;
}
@keyframes nisanGel{
	0%{transform:scale(2.6); opacity:0;}
	60%{opacity:1;}
	100%{transform:scale(.7); opacity:1;}
}
.ef-patlama{
	width:calc(var(--k)*2.4);
	height:calc(var(--k)*2.4);
	margin:calc(var(--k)*-0.7) 0 0 calc(var(--k)*-0.7);
	border-radius:50%;
	background:radial-gradient(circle, #fffbe0 0%, #ffd34d 18%, #ff7a12 38%, rgba(200,40,10,.75) 55%, rgba(60,10,0,0) 72%);
	animation:patla .6s ease-out forwards;
}
@keyframes patla{
	0%{transform:scale(.15); opacity:1;}
	55%{opacity:1;}
	100%{transform:scale(1.15); opacity:0;}
}
.ef-kivilcim{
	width:calc(var(--k)*0.16);
	height:calc(var(--k)*0.16);
	border-radius:50%;
	background:#ffd34d;
	box-shadow:0 0 calc(var(--k)*0.15) #ff8a12;
}
.ef-halka{ /* su sıçraması halkaları */
	width:var(--k);
	height:var(--k);
	border-radius:50%;
	border:calc(var(--k)*0.06) solid rgba(210,240,255,.85);
	box-sizing:border-box;
	animation:halka .8s ease-out forwards;
}
@keyframes halka{
	0%{transform:scale(.2); opacity:1;}
	100%{transform:scale(1.7); opacity:0;}
}
.ef-damla{
	width:calc(var(--k)*0.13);
	height:calc(var(--k)*0.13);
	border-radius:50%;
	background:#dff3ff;
}
.ef-duman{
	width:calc(var(--k)*1.6);
	height:calc(var(--k)*1.6);
	border-radius:50%;
	background:radial-gradient(circle, rgba(70,70,76,.6) 0%, rgba(70,70,76,0) 70%);
}

/* ---------------- yerleştirme paneli ---------------- */
#yer-panel{
	position:absolute;
	display:none;
	flex-direction:column;
	justify-content:center;
	gap:calc(var(--k)*0.32);
	padding:calc(var(--k)*0.5) calc(var(--k)*0.55);
	border-radius:calc(var(--k)*0.4);
	color:#e3f1ff;
	background:linear-gradient(180deg, #1b416a 0%, #0a1b31 100%);
	box-shadow:0 0 0 calc(var(--k)*0.05) #06121f, 0 0 0 calc(var(--k)*0.11) rgba(212,175,95,.4), inset 0 calc(var(--k)*0.04) 0 rgba(175,215,255,.14),
		inset 0 0 calc(var(--k)*0.5) rgba(0,0,0,.4), 0 calc(var(--k)*0.25) calc(var(--k)*0.7) rgba(0,0,0,.5);
	font-size:0;
}
body.yerlestir #yer-panel{
	display:flex;
}
.yp-baslik{
	font-size:calc(var(--k)*0.72);
	line-height:1;
	letter-spacing:.05em;
	text-align:center;
	color:#ffd34d;
	text-shadow:0 .06em 0 rgba(0,0,0,.6);
}
.yp-yazi{
	font-family:'Poppins', sans-serif;
	font-weight:600;
	font-size:max(10px, calc(var(--k)*0.3));
	line-height:1.35;
	text-align:center;
	color:#9cc0e2;
}
.yp-yazi b{
	color:#ffd34d;
}
.yp-liste{
	display:flex;
	flex-direction:column;
	gap:calc(var(--k)*0.12);
	padding:calc(var(--k)*0.18) calc(var(--k)*0.3);
	border-radius:calc(var(--k)*0.2);
	background:rgba(0,0,0,.28);
	box-shadow:inset 0 1px 2px rgba(0,0,0,.5);
}
.yp-satir{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:calc(var(--k)*0.3);
	font-family:'Poppins', sans-serif;
	font-weight:600;
	font-size:max(10px, calc(var(--k)*0.3));
	line-height:1.3;
	color:#d6e9fb;
}
.yp-satir i{
	display:block;
	flex:none;
	height:calc(var(--k)*0.26);
	width:calc(var(--k)*0.34*var(--l));
	border-radius:calc(var(--k)*0.13) calc(var(--k)*0.04) calc(var(--k)*0.04) calc(var(--k)*0.13);
	background:repeating-linear-gradient(90deg, #c3ccd6 0 calc(var(--k)*0.3), #2a3440 calc(var(--k)*0.3) calc(var(--k)*0.34));
	box-shadow:0 0 0 1px rgba(0,0,0,.45);
}
.yp-dugmeler{
	display:flex;
	gap:calc(var(--k)*0.3);
}
.yp-dugme{
	flex:1;
	cursor:pointer;
	text-align:center;
	font-size:calc(var(--k)*0.62);
	line-height:calc(var(--k)*1.15);
	letter-spacing:.05em;
	border-radius:calc(var(--k)*0.24);
	color:#d6e9fb;
	text-shadow:0 .06em 0 rgba(0,0,0,.6);
	background:linear-gradient(180deg, #245585 0%, #0e2541 100%);
	box-shadow:0 0 0 calc(var(--k)*0.04) #06121f, 0 0 0 calc(var(--k)*0.08) rgba(212,175,95,.45), inset 0 calc(var(--k)*0.035) 0 rgba(175,215,255,.2), inset 0 calc(var(--k)*-0.07) 0 rgba(0,0,0,.3);
	transition:transform .12s, filter .12s;
}
.yp-dugme:hover{
	filter:brightness(1.15);
	transform:translateY(-1px);
}
.yp-dugme.birincil{
	color:#13253d;
	text-shadow:0 .05em 0 rgba(255,248,220,.6);
	background:linear-gradient(180deg, #ffd34d 0%, #f39200 100%);
	box-shadow:0 0 0 calc(var(--k)*0.04) #6b3000, 0 0 0 calc(var(--k)*0.08) rgba(255,232,150,.7), inset 0 calc(var(--k)*0.04) 0 rgba(255,255,255,.5), 0 0 calc(var(--k)*0.4) rgba(255,188,0,.35);
}
.yp-dugme.kapali{
	opacity:.45;
	pointer-events:none;
}
#yer-panel.bekle .yp-dugmeler{
	display:none;
}

/* ---------------- alan üstü kısa bilgi ---------------- */
#tahta-mesaj{ /* (satranç ile aynı ahşap plaka) */
	position:absolute;
	display:none;
	z-index:32;
	pointer-events:none;
	transform:translate(-50%,-50%);
	padding:calc(var(--cu)*0.22) calc(var(--cu)*0.6);
	border-radius:calc(var(--cu)*0.28);
	background:linear-gradient(180deg, rgba(33,80,126,.96) 0%, rgba(10,27,49,.96) 100%);
	box-shadow:0 0 0 calc(var(--cu)*0.03) #06121f, 0 0 0 calc(var(--cu)*0.07) rgba(212,175,95,.55), inset 0 calc(var(--cu)*0.03) 0 rgba(175,215,255,.2), 0 calc(var(--cu)*0.12) calc(var(--cu)*0.45) rgba(0,0,0,.55);
	color:#e3f1ff;
	font-size:calc(var(--cu)*0.62);
	letter-spacing:.04em;
	text-shadow:0 .06em 0 rgba(0,0,0,.55);
	white-space:nowrap;
	text-align:center;
	animation:mesajGel .22s ease-out;
}
#tahta-mesaj small{
	display:block;
	font-family:'Poppins', sans-serif;
	font-weight:600;
	font-size:max(10px, calc(var(--cu)*0.3));
	letter-spacing:0;
	color:#8fb3d6;
	text-shadow:none;
}
#tahta-mesaj.isabet{
	color:#ffd34d;
}
#tahta-mesaj.batti{
	color:#ff8a6a;
}
@keyframes mesajGel{
	0%{opacity:0; transform:translate(-50%,-50%) scale(.85);}
	100%{opacity:1; transform:translate(-50%,-50%) scale(1);}
}

/* ---------------- iki kişilik: cihaz devri perdesi ---------------- */
#perde{
	position:fixed;
	inset:0;
	display:none;
	z-index:80;
	background:radial-gradient(ellipse at 50% 40%, #1d3d63 0%, #07111f 100%);
}
.perde-kutu{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:calc(var(--su)*1.6);
	padding:calc(var(--su)*3) calc(var(--su)*4);
	min-width:min(86vw, calc(var(--su)*44));
	border-radius:calc(var(--su)*2.4);
	text-align:center;
	background:linear-gradient(180deg, #1b416a 0%, #0a1b31 100%);
	box-shadow:0 0 0 calc(var(--su)*.25) #06121f, 0 0 0 calc(var(--su)*.55) rgba(212,175,95,.4), 0 calc(var(--su)*1.2) calc(var(--su)*3) rgba(0,0,0,.5);
}
.perde-kutu b{
	font-weight:400;
	font-size:max(30px, calc(var(--su)*6));
	line-height:1;
	color:#ffd34d;
	letter-spacing:.04em;
	text-shadow:0 .06em 0 rgba(0,0,0,.6);
}
.perde-kutu span{
	font-family:'Poppins', sans-serif;
	font-weight:600;
	font-size:max(13px, calc(var(--su)*2));
	color:#d6e9fb;
}
.perde-dugme{
	cursor:pointer;
	padding:0 calc(var(--su)*4);
	font-size:max(24px, calc(var(--su)*4));
	line-height:1.6;
	border-radius:calc(var(--su)*1.2);
	color:#13253d;
	background:linear-gradient(180deg, #ffd34d 0%, #f39200 100%);
	box-shadow:0 0 0 calc(var(--su)*.2) #6b3000, 0 0 0 calc(var(--su)*.45) rgba(255,232,150,.7), 0 0 calc(var(--su)*2) rgba(255,188,0,.35);
}

@media (prefers-reduced-motion: reduce){
	.kart.sira .img,.kart.dusunuyor .img::after,.saha.aktif,.isaret.m1::before,.isaret.m1::after,.isaret.m3::before,.isaret.m3::after,.isaret.mp::before{
		animation:none;
	}
	#message,#tahta-mesaj,#message[data-tur="kazandi"]::before,.saha.sars,.gemi.batik.yeni{
		animation:none;
	}
}