/* Satranç — rekoroyun.com (2026-10-31). Tavla oyununun görsel dili: koyu ahşap zemin, Bebas Neue, yan menüler (yatay) / üst-alt şeritler (dik).
   Ölçüler JS'te (boyutla) hesaplanır: --bu tahta birimi (bir kare), --pu panel 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:#441b0b;
	background:radial-gradient(circle at 50% 42%, #66301a 0%, #4a1f0d 55%, #33130a 100%);
	font-family:'Bebas Neue', sans-serif;
	font-weight:400;
	color:#ffd3c2;
	--bu:40px;
	--pu:1px;
	--su:8px;
	--mu:10px;
}
#game-border{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	transition:opacity .2s;
}
.panel{
	position:absolute;
	font-size:0;
}

/* ---------------- tahta ---------------- */
#board-outer{
	position:absolute;
	border-radius:calc(var(--bu)*0.32);
	box-shadow:0 calc(var(--bu)*0.25) calc(var(--bu)*0.9) rgba(0,0,0,.6);
}
#tahta-svg{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	display:block;
	overflow:visible;
}
#isaretler,#taslar{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
#isaretler{
	pointer-events:none;
}
#taslar{
	touch-action:none; /* taş sürüklerken sayfa kaymasın */
	cursor:default;
}
.tas{
	position:absolute;
	left:0;
	top:0;
	width:var(--bu);
	height:var(--bu);
	transition:transform .3s cubic-bezier(.3,.75,.3,1), opacity .25s;
	will-change:transform;
	filter:drop-shadow(0 calc(var(--bu)*0.05) calc(var(--bu)*0.045) rgba(0,0,0,.6));
	pointer-events:none;
}
.tas svg{
	position:absolute;
	left:6%;
	top:4%;
	width:88%;
	height:88%;
	overflow:visible;
}
.tas.anim-yok{
	transition:none;
}
.tas.ust{
	z-index:20;
}
.tas.surukle{
	transition:none;
	z-index:60;
	filter:drop-shadow(0 calc(var(--bu)*0.18) calc(var(--bu)*0.16) rgba(0,0,0,.6)) brightness(1.06);
}
.tas.alindi{ /* alınan taş tahtadan silinir */
	opacity:0;
}
.tas.secili{
	filter:drop-shadow(0 0 calc(var(--bu)*0.05) #fff3b0) drop-shadow(0 0 calc(var(--bu)*0.12) rgba(255,200,40,.85));
}
/* ---------------- yardım işaretleri (tavla ile aynı dil): seçili kare altın, gidilebilecek kare nabızlı altın nokta, alma kırmızı halka,
   son hamle soluk altın kareler + noktalı ok, tehdit altındaki şah kırmızı ışık, ipucu altın ok */
.kare{
	position:absolute;
	width:var(--bu);
	height:var(--bu);
}
.kare.son{
	background:rgba(255,214,90,.22);
	box-shadow:inset 0 0 0 calc(var(--bu)*0.03) rgba(255,226,150,.45);
}
.kare.secili{
	background:radial-gradient(circle, rgba(255,226,120,.42) 0%, rgba(255,200,60,.22) 60%, rgba(255,200,60,.08) 100%);
	box-shadow:inset 0 0 0 calc(var(--bu)*0.05) rgba(255,233,150,.95), inset 0 0 calc(var(--bu)*0.3) rgba(255,200,60,.6);
}
.kare.sah{
	background:radial-gradient(circle, rgba(255,60,30,.75) 0%, rgba(230,40,20,.45) 40%, rgba(200,30,10,0) 72%);
	animation:sahNabiz 1.2s ease-in-out infinite;
}
@keyframes sahNabiz{
	0%,100%{opacity:.7;}
	50%{opacity:1;}
}
.kare.hedef::before{ /* boş kare: altın nokta */
	content:"";
	position:absolute;
	left:35%;
	top:35%;
	width:30%;
	height:30%;
	border-radius:50%;
	background:radial-gradient(circle at 40% 35%, #fff3b0 0%, #ffd34d 45%, #e08a00 100%);
	box-shadow:0 0 0 calc(var(--bu)*0.02) rgba(107,48,0,.6), 0 0 calc(var(--bu)*0.18) rgba(255,200,60,.8);
	opacity:.88;
}
.kare.hedef::after{ /* dışa yayılan dalga */
	content:"";
	position:absolute;
	left:35%;
	top:35%;
	width:30%;
	height:30%;
	border-radius:50%;
	box-shadow:0 0 0 calc(var(--bu)*0.03) rgba(255,226,120,.9);
	animation:hedefDalga 1.4s ease-out infinite;
}
@keyframes hedefDalga{
	0%{transform:scale(1); opacity:.9;}
	100%{transform:scale(2.2); opacity:0;}
}
.kare.hedef.alma::before{ /* rakip taş: kırmızı halka */
	left:4%;
	top:4%;
	width:92%;
	height:92%;
	background:none;
	box-shadow:inset 0 0 0 calc(var(--bu)*0.06) #ff7a5c, 0 0 calc(var(--bu)*0.25) rgba(255,70,40,.75), inset 0 0 calc(var(--bu)*0.25) rgba(255,70,40,.45);
	opacity:1;
}
.kare.hedef.alma::after{
	left:4%;
	top:4%;
	width:92%;
	height:92%;
	box-shadow:0 0 0 calc(var(--bu)*0.03) rgba(255,110,80,.9);
	animation-name:almaDalga;
}
@keyframes almaDalga{
	0%{transform:scale(1); opacity:.9;}
	100%{transform:scale(1.18); opacity:0;}
}
.iz-ok{
	position:absolute;
	left:0;
	top:0;
	overflow:visible;
	pointer-events:none;
	z-index:30;
	filter:drop-shadow(0 1px 1px rgba(0,0,0,.6));
}
.iz-ok.ipucu{
	filter:drop-shadow(0 0 calc(var(--bu)*0.12) rgba(255,200,40,.9));
	animation:ipucuNabiz 1s ease-in-out infinite;
}
@keyframes ipucuNabiz{
	0%,100%{opacity:.75;}
	50%{opacity:1;}
}
/* yapay zeka düşünürken rakip kartında dönen ışık */
.user.dusunuyor .img::after{
	content:"";
	position:absolute;
	left:-10%;
	top:-10%;
	width:120%;
	height:120%;
	border-radius:50%;
	background:conic-gradient(from 0deg, rgba(255,255,255,0) 0deg, rgba(255,255,255,0) 250deg, rgba(255,246,200,.95) 340deg, rgba(255,255,255,0) 360deg);
	-webkit-mask:radial-gradient(circle, transparent 0 64%, #000 66% 71%, transparent 73%);
	mask:radial-gradient(circle, transparent 0 64%, #000 66% 71%, transparent 73%);
	animation:dusunDon 1s linear infinite;
	pointer-events:none;
}
@keyframes dusunDon{
	100%{transform:rotate(360deg);}
}
/* ---------------- piyon terfisi: ahşap plaka üzerinde dört taş ---------------- */
#terfi{
	position:absolute;
	display:none;
	z-index:40;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	padding:calc(var(--bu)*0.22) calc(var(--bu)*0.3) calc(var(--bu)*0.3) calc(var(--bu)*0.3);
	border-radius:calc(var(--bu)*0.3);
	text-align:center;
	white-space:nowrap;
	background:linear-gradient(180deg, rgba(110,50,22,.97) 0%, rgba(58,22,8,.97) 100%);
	box-shadow:0 0 0 calc(var(--bu)*0.03) #2a0d04, 0 0 0 calc(var(--bu)*0.07) rgba(201,122,70,.55), inset 0 calc(var(--bu)*0.03) 0 rgba(255,205,160,.2), 0 calc(var(--bu)*0.15) calc(var(--bu)*0.6) rgba(0,0,0,.6);
	animation:mesajGel .22s ease-out;
}
#terfi b{
	display:block;
	color:#ffd9b0;
	font-weight:400;
	font-size:calc(var(--bu)*0.42);
	letter-spacing:.05em;
	margin-bottom:calc(var(--bu)*0.12);
	text-shadow:0 .06em 0 rgba(0,0,0,.55);
	white-space:nowrap;
}
#terfi .secenek{
	display:inline-block;
	position:relative;
	width:calc(var(--bu)*1.15);
	height:calc(var(--bu)*1.15);
	margin:0 calc(var(--bu)*0.06);
	cursor:pointer;
	border-radius:calc(var(--bu)*0.2);
	background:linear-gradient(180deg, #74361a 0%, #4a1c0b 100%);
	box-shadow:0 0 0 calc(var(--bu)*0.025) #2a0d04, 0 0 0 calc(var(--bu)*0.05) rgba(201,122,70,.45), inset 0 calc(var(--bu)*0.025) 0 rgba(255,205,160,.2);
	transition:transform .12s, filter .12s;
}
#terfi .secenek:hover{
	transform:translateY(calc(var(--bu)*-0.05));
	filter:brightness(1.1);
	background:linear-gradient(180deg, #ffd34d 0%, #f39200 100%);
}
#terfi .secenek svg{
	position:absolute;
	left:8%;
	top:6%;
	width:84%;
	height:84%;
	filter:drop-shadow(0 calc(var(--bu)*0.04) calc(var(--bu)*0.04) rgba(0,0,0,.55));
}

#tahta-mesaj{ /* tahta üstünde kısa bilgi (30.10.2026: ahşap plaka + bakır halka) */
	position:absolute;
	display:none;
	z-index:32;
	pointer-events:none;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	padding:calc(var(--bu)*0.2) calc(var(--bu)*0.55);
	border-radius:calc(var(--bu)*0.26);
	background:linear-gradient(180deg, rgba(110,50,22,.96) 0%, rgba(58,22,8,.96) 100%);
	box-shadow:0 0 0 calc(var(--bu)*0.03) #2a0d04, 0 0 0 calc(var(--bu)*0.07) rgba(201,122,70,.55), inset 0 calc(var(--bu)*0.03) 0 rgba(255,205,160,.2), 0 calc(var(--bu)*0.12) calc(var(--bu)*0.45) rgba(0,0,0,.55);
	color:#ffd9b0;
	font-size:calc(var(--bu)*0.5);
	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:calc(var(--bu)*0.25);
	letter-spacing:0;
	color:#c99a72;
	text-shadow:none;
}
@keyframes mesajGel{
	0%{opacity:0; transform:translate(-50%,-50%) scale(.85);}
	100%{opacity:1; transform:translate(-50%,-50%) scale(1);}
}

/* ---------------- oyuncu kartları (29.10.2026 yenilendi: puan kutusuyla aynı dil) ----------------
   avatar dairesi koyu çerçeve + bakır halka + koyu çizgi; ad etiketi koyu ahşap plaka; sıradaki oyuncuda halka altın ve nabızlı */
.user{
	position:relative;
	display:block;
	background:none;
}
.user .img{
	position:relative;
	margin:auto;
	border-radius:50%;
	background-color:#3a170a;
	background-position:center;
	background-size:100% auto;
	background-repeat:no-repeat;
	--halka:#b8733f;
	box-shadow:0 0 0 calc(var(--pu)*2.2) #2a0d04, 0 0 0 calc(var(--pu)*4.6) var(--halka), 0 0 0 calc(var(--pu)*6) #2a0d04,
		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;
}
.user .user-name{
	position:absolute;
	left:-4%;
	width:108%;
	bottom:0;
	text-align:center;
	color:#ffd9b0;
	letter-spacing:.05em;
	text-shadow:0 .06em 0 rgba(0,0,0,.6);
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	padding:0 6%;
	border-radius:.35em;
	background:linear-gradient(180deg, #6a2f15 0%, #43190a 100%);
	box-shadow:0 0 0 .08em #2a0d04, 0 0 0 .16em rgba(201,122,70,.5), inset 0 .07em 0 rgba(255,205,160,.2), 0 .15em .35em rgba(0,0,0,.55);
}
.user.sira .img{ /* sıradaki oyuncu */
	--halka:#ffc83a;
	animation:siraNabiz 1.6s ease-in-out infinite;
}
@keyframes siraNabiz{
	0%,100%{box-shadow:0 0 0 calc(var(--pu)*2.2) #2a0d04, 0 0 0 calc(var(--pu)*4.6) #ffc83a, 0 0 0 calc(var(--pu)*6) #2a0d04, inset 0 calc(var(--pu)*-4) calc(var(--pu)*8) rgba(0,0,0,.35), 0 0 calc(var(--pu)*6) rgba(255,200,60,.35);}
	50%{box-shadow:0 0 0 calc(var(--pu)*2.2) #2a0d04, 0 0 0 calc(var(--pu)*4.6) #ffe08a, 0 0 0 calc(var(--pu)*6) #2a0d04, inset 0 calc(var(--pu)*-4) calc(var(--pu)*8) rgba(0,0,0,.35), 0 0 calc(var(--pu)*16) rgba(255,200,60,.8);}
}
/* online avatar (Google fotoğrafı vb.) dairenin tamamını kaplar */
.user .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;
}
/* puan kutusu (tavla ile aynı koyu ahşap plaka): oyuncunun taş rengi + malzeme üstünlüğü, aldığı taşlar, altın SKOR */
.bilgi{
	position:relative;
	background:linear-gradient(180deg, #5c2812 0%, #43190a 100%);
	border:0 !important;
	border-radius:calc(var(--pu)*7);
	box-shadow:0 0 0 calc(var(--pu)*1.6) #2a0d04, 0 0 0 calc(var(--pu)*3) rgba(201,122,70,.35), inset 0 calc(var(--pu)*1.2) 0 rgba(255,205,160,.16), inset 0 0 calc(var(--pu)*8) rgba(0,0,0,.45), 0 calc(var(--pu)*4) calc(var(--pu)*8) rgba(0,0,0,.4);
}
.bilgi-satir{
	display:flex;
	align-items:center;
	justify-content:space-between;
}
.bilgi-satir i{
	display:flex;
	align-items:center;
	gap:.45em;
	font-style:normal;
	font-family:'Poppins', sans-serif;
	font-weight:600;
	letter-spacing:.08em;
	color:#d9a36f;
}
.bilgi-satir i::before{ /* oyuncunun taş rengi */
	content:"";
	flex:none;
	width:1.15em;
	height:1.15em;
	border-radius:50%;
	background:radial-gradient(circle at 50% 50%, #fff 0 38%, #d9d1bf 40% 46%, #f4efe2 48% 100%);
	box-shadow:0 0 0 .1em #8f8574, 0 .1em .15em rgba(0,0,0,.6);
}
.bilgi.siyah-taraf .renk i::before{
	background:radial-gradient(circle at 50% 50%, #2a2a2a 0 38%, #555 40% 46%, #1a1a1a 48% 100%);
	box-shadow:0 0 0 .1em #000, 0 .1em .15em rgba(0,0,0,.6);
}
.bilgi-satir.skor i::before{ /* SKOR: altın yıldız */
	border-radius:0;
	box-shadow:none;
	background:linear-gradient(#ffe27a, #f39200);
	clip-path:polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.bilgi-satir b{
	font-weight:400;
	color:#fff3e0;
	text-shadow:0 .06em 0 rgba(0,0,0,.5);
}
.bilgi-satir.renk b{
	color:#9be08f;
}
.bilgi-satir.skor b{
	color:#ffd34d;
}
.alinan{ /* alınan taşlar: aynı türler üst üste biner */
	display:flex;
	flex-wrap:wrap;
	align-content:flex-start;
	min-height:calc(var(--pu)*38);
	margin:calc(var(--pu)*2) 0 calc(var(--pu)*3) 0;
	padding:calc(var(--pu)*2) calc(var(--pu)*3);
	border-radius:calc(var(--pu)*4);
	background:rgba(0,0,0,.35);
	box-shadow:inset 0 1px 2px rgba(0,0,0,.5);
}
.alinan span{
	display:block;
	flex:none;
	width:calc(var(--pu)*17);
	height:calc(var(--pu)*17);
	margin-right:calc(var(--pu)*-7);
}
.alinan span.ayir{
	margin-right:calc(var(--pu)*1);
}
.alinan svg{
	display:block;
	width:100%;
	height:100%;
	filter:drop-shadow(0 1px 1px rgba(0,0,0,.6));
}
.bilgi-satir.skor{
	border-top:1px dashed rgba(255,205,160,.2);
	padding-top:calc(var(--pu)*2);
}
.mac-bilgi{
	text-align:center;
	color:#ffd9b0;
	font-family:'Poppins', sans-serif;
	font-weight:600;
	letter-spacing:.06em;
	background:linear-gradient(180deg, #5c2812 0%, #43190a 100%);
	border-radius:calc(var(--pu)*6);
	box-shadow:0 0 0 calc(var(--pu)*1.4) #2a0d04, 0 0 0 calc(var(--pu)*2.6) rgba(201,122,70,.35), inset 0 calc(var(--pu)*1) 0 rgba(255,205,160,.14), 0 calc(var(--pu)*3) calc(var(--pu)*6) rgba(0,0,0,.35);
}

/* ---------------- menü düğmeleri (dama ile aynı simgeler) ---------------- */
#buttons-div{
	display:grid;
}
#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, #6e3216 0%, #4a1c0b 100%);
	border-radius:.75em;
	box-shadow:0 0 0 .1em #2a0d04, 0 0 0 .2em rgba(201,122,70,.45), inset 0 .09em 0 rgba(255,205,160,.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, #6e3216 0%, #4a1c0b 100%);
}
#buttons-div .d-geri{
	background-image:url("../img/icon-undo.svg"), linear-gradient(180deg, #6e3216 0%, #4a1c0b 100%);
}
#buttons-div .d-ses{
	background-image:url("../img/icon-ses-acik.svg"), linear-gradient(180deg, #6e3216 0%, #4a1c0b 100%);
}
#buttons-div .d-ses.ses-kapali{
	background-image:url("../img/icon-ses-kapali.svg"), linear-gradient(180deg, #6e3216 0%, #4a1c0b 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, #6e3216 0%, #4a1c0b 100%);
	color:#f0cfa6;
	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:#4a1a06;
	text-shadow:0 .05em 0 rgba(255,240,200,.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, #6e3216 0%, #4a1c0b 100%);
	color:#f0cfa6;
	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:#4a1a06;
	text-shadow:0 .05em 0 rgba(255,240,200,.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, #6e3216 0%, #4a1c0b 100%);
	color:#f0cfa6;
	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;
}

/* yatay: yan menüler (sol: ben + düğmeler, sağ: rakip) */
body.yatay .panel{
	text-align:center;
}
body.yatay .user{
	width:100%;
}
body.yatay .user .img{
	width:calc(var(--pu)*84);
	height:calc(var(--pu)*84);
	margin-top:calc(var(--pu)*6);
}
body.yatay .user .user-name{
	font-size:calc(var(--pu)*13);
	height:calc(var(--pu)*23);
	line-height:calc(var(--pu)*25);
}
body.yatay .bilgi{
	width:94%;
	margin:calc(var(--pu)*5) auto 0 auto;
	padding:calc(var(--pu)*3) calc(var(--pu)*6);
}
body.yatay .bilgi-satir i{
	font-size:calc(var(--pu)*9.5);
}
body.yatay .bilgi-satir b{
	font-size:calc(var(--pu)*20);
	line-height:calc(var(--pu)*23);
}
body.yatay .mac-bilgi{
	font-size:calc(var(--pu)*8.5);
	line-height:calc(var(--pu)*11);
	padding:calc(var(--pu)*3) calc(var(--pu)*2);
}
body.yatay #buttons-div{
	position:absolute;
	left:3%;
	right:3%;
	bottom:0;
	grid-template-columns:1fr 1fr;
	gap:calc(var(--pu)*11); /* bakır halka (.2em) düğme dışına taşar */
}
body.yatay #buttons-div .ikon-dugme{
	height:calc(var(--pu)*38);
	font-size:calc(var(--pu)*12);
}
body.yatay #buttons-div .d-online,body.yatay #buttons-div .d-ipucu,body.yatay #buttons-div .d-sohbet{
	grid-column:1 / span 2;
	height:calc(var(--pu)*42);
	line-height:calc(var(--pu)*45);
	font-size:calc(var(--pu)*19);
}
body.yatay #buttons-div .d-sohbet{
	grid-row:2; /* online oyunda İPUCU'nun yerinde */
}
body.yatay.alcak #buttons-div .d-online span,body.yatay.alcak #buttons-div .d-ipucu span,body.yatay.alcak #buttons-div .d-sohbet span{
	display:none; /* çok alçak ekranda yalnız simge */
}
body.yatay.alcak #buttons-div .d-online,body.yatay.alcak #buttons-div .d-ipucu,body.yatay.alcak #buttons-div .d-sohbet{
	padding-left:0;
	background-position:center;
}

/* dik: üstte rakip şeridi, altta ben + düğmeler */
body.dikey .panel{
	display:flex;
	align-items:center;
	gap:calc(var(--pu)*5);
}
body.dikey .user{
	flex:none;
	width:calc(var(--pu)*100);
	height:calc(var(--pu)*100);
}
body.dikey .user .img{
	width:calc(var(--pu)*86);
	height:calc(var(--pu)*86);
	top:calc(var(--pu)*7);
}
body.dikey .user .user-name{
	font-size:calc(var(--pu)*15);
	height:calc(var(--pu)*25);
	line-height:calc(var(--pu)*27);
}
body.dikey .bilgi{
	flex:none;
	width:calc(var(--pu)*150);
	padding:calc(var(--pu)*3) calc(var(--pu)*6);
}
body.dikey .alinan{
	min-height:calc(var(--pu)*40);
	margin:calc(var(--pu)*1) 0 calc(var(--pu)*2) 0;
	padding:calc(var(--pu)*1) calc(var(--pu)*2);
}
body.dikey .alinan span{
	width:calc(var(--pu)*19);
	height:calc(var(--pu)*19);
	margin-right:calc(var(--pu)*-7);
}
body.dikey .bilgi-satir i{
	font-size:calc(var(--pu)*11);
}
body.dikey .bilgi-satir b{
	font-size:calc(var(--pu)*20);
	line-height:calc(var(--pu)*22);
}
body.dikey #buttons-div{
	flex:1 1 auto;
	min-width:0; /* 03.11.2026: 320 px dik ekranda düğmeler içerik genişliğinden küçülemiyor, panel ekrandan 15 px taşıyordu */
	grid-template-columns:repeat(4, minmax(0,1fr));
	grid-template-rows:1fr 1fr;
	gap:calc(var(--pu)*10);
	height:calc(var(--pu)*92);
}
body.dikey #buttons-div .ikon-dugme{
	font-size:calc(var(--pu)*12);
}
body.dikey #buttons-div .d-online,body.dikey #buttons-div .d-ipucu,body.dikey #buttons-div .d-sohbet{
	grid-column:span 2;
	line-height:calc(var(--pu)*46);
	font-size:calc(var(--pu)*19);
	padding-left:18%;
	background-position:10% 50%;
}
body.dikey #buttons-div .d-sohbet{
	grid-row:1;
	grid-column:3 / span 2;
}

/* ---------------- bildirim, ayarlar, mesaj ---------------- */
#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:#ffe6c8;
	text-shadow:0 1px 0 rgba(0,0,0,.5);
	background:linear-gradient(180deg, #6e3216 0%, #43190a 100%);
	box-shadow:0 0 0 2px #2a0d04, 0 0 0 max(4px, calc(var(--su)*.45)) var(--halka, rgba(201,122,70,.6)), inset 0 2px 0 rgba(255,205,160,.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 #2a0d04;
}
.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:#f0cfa6;
	border-radius:calc(var(--ss)*2.6);
	background:linear-gradient(180deg, #5c2812 0%, #3a1608 100%);
	box-shadow:0 0 0 calc(var(--ss)*.25) #2a0d04, 0 0 0 calc(var(--ss)*.55) rgba(201,122,70,.45), inset 0 calc(var(--ss)*.2) 0 rgba(255,205,160,.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:#8a4a26 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:#ffd9b0;
	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%, #c9844c 0%, #8a4a26 60%, #5e2a12 100%);
	box-shadow:0 0 0 calc(var(--ss)*.2) #2a0d04, 0 0 0 calc(var(--ss)*.4) rgba(255,205,160,.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(201,122,70,0) 0%, rgba(201,122,70,.7) 50%, rgba(201,122,70,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%, #8e4824 0%, #5e2a12 70%, #3a1608 100%);
	box-shadow:0 0 0 calc(var(--ss)*.2) #2a0d04, 0 0 0 calc(var(--ss)*.4) rgba(201,122,70,.55), inset 0 calc(var(--ss)*.18) 0 rgba(255,205,160,.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:#ffe6c8;
	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, #74361a 0%, #4a1c0b 100%);
	box-shadow:0 0 0 calc(var(--ss)*.2) #2a0d04, 0 0 0 calc(var(--ss)*.42) rgba(201,122,70,.4), inset 0 calc(var(--ss)*.18) 0 rgba(255,205,160,.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%, #c9844c 0%, #8a4a26 60%, #5e2a12 100%);
	box-shadow:0 0 0 calc(var(--ss)*.2) #2a0d04, 0 0 0 calc(var(--ss)*.4) rgba(255,205,160,.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:#ffd9b0;
	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:#c99a72;
	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:#2a0d04;
	box-shadow:inset 0 calc(var(--ss)*.25) calc(var(--ss)*.6) rgba(0,0,0,.7), 0 calc(var(--ss)*.12) 0 rgba(255,205,160,.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:#b98a64;
	transition:color .15s, background .15s;
}
#settings .settings-button.passive:hover{
	color:#ffd9b0;
	background:rgba(255,205,160,.08);
}
#settings .settings-button.active{
	cursor:default;
	color:#4a1a06;
	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,240,200,.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%, #f3dcb8 55%, #c99a6a 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(120,70,20,.35);
	transition:left .2s, background .2s;
}
#settings .settings-switch.on{
	text-align:left;
	padding-left:calc(var(--ss)*1.7);
	color:#4a1a06;
	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,240,200,.6);
}
#settings .settings-switch.off{
	text-align:right;
	padding-right:calc(var(--ss)*1.2);
	color:#9c7556;
	background:#2a0d04;
	box-shadow:inset 0 calc(var(--ss)*.25) calc(var(--ss)*.6) rgba(0,0,0,.7), 0 calc(var(--ss)*.12) 0 rgba(255,205,160,.16);
}
#settings .settings-switch.off::after{
	left:calc(var(--ss)*.5);
	background:radial-gradient(circle at 38% 32%, #c9844c 0%, #8a4a26 60%, #5e2a12 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:#ffd9b0;
	border-radius:calc(var(--ss)*2.6);
	background:radial-gradient(ellipse at 50% 0%, rgba(201,122,70,.28) 0%, rgba(201,122,70,0) 60%), linear-gradient(180deg, #5c2812 0%, #3a1608 100%);
	box-shadow:0 0 0 calc(var(--ss)*.25) #2a0d04, 0 0 0 calc(var(--ss)*.55) rgba(201,122,70,.5), inset 0 calc(var(--ss)*.2) 0 rgba(255,205,160,.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%, #c9844c 0%, #8a4a26 60%, #5e2a12 100%);
	box-shadow:0 0 0 calc(var(--ss)*.3) #2a0d04, 0 0 0 calc(var(--ss)*.62) rgba(201,122,70,.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%, #c9844c 0%, #8a4a26 60%, #5e2a12 100%);
}
#message-title{
	font-family:'Bebas Neue', cursive;
	font-size:calc(var(--ss)*5);
	line-height:1;
	letter-spacing:.06em;
	color:#ffd9b0;
	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:#f0cfa6;
}
#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(201,122,70,0) 0%, rgba(201,122,70,.7) 50%, rgba(201,122,70,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:#c99a72;
}
#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%, #8e4824 0%, #5e2a12 70%, #3a1608 100%);
	box-shadow:0 0 0 calc(var(--ss)*.2) #2a0d04, 0 0 0 calc(var(--ss)*.4) rgba(201,122,70,.55), inset 0 calc(var(--ss)*.18) 0 rgba(255,205,160,.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:#ffe6c8;
	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:#4a1a06;
	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,240,200,.6);
}
#message .cancel{
	order:1;
	color:#f0cfa6;
	background:linear-gradient(180deg, #74361a 0%, #4a1c0b 100%);
	box-shadow:0 0 0 calc(var(--ss)*.2) #2a0d04, 0 0 0 calc(var(--ss)*.42) rgba(201,122,70,.45), inset 0 calc(var(--ss)*.18) 0 rgba(255,205,160,.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%, #8a4a26 0%, #5e2a12 52%, #2e1108 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, #5c2812 0%, #3a1608 100%);
	box-shadow:0 0 0 calc(var(--mu)*.25) #2a0d04, 0 0 0 calc(var(--mu)*.55) rgba(201,122,70,.4), inset 0 calc(var(--mu)*.2) 0 rgba(255,205,160,.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:#f0cfa6;
	background:linear-gradient(180deg, #74361a 0%, #4a1c0b 100%);
	box-shadow:0 0 0 calc(var(--mu)*.2) #2a0d04, 0 0 0 calc(var(--mu)*.42) rgba(201,122,70,.45), inset 0 calc(var(--mu)*.18) 0 rgba(255,205,160,.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%, #c9844c 0%, #8a4a26 60%, #5e2a12 100%);
	box-shadow:0 0 0 calc(var(--mu)*.2) #2a0d04, 0 0 0 calc(var(--mu)*.4) rgba(255,205,160,.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:#c99a72;
}
.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:#4a1a06;
	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,240,200,.6);
}
.start-buttons.birincil small{
	color:#7a3a0c;
}
.start-buttons.birincil::before{
	background:var(--simge) center / 54% no-repeat, radial-gradient(circle at 40% 35%, #8a4a26 0%, #5e2a12 70%, #3a1608 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:#f0cfa6;
	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, #5c2812 0%, #3a1608 100%);
	box-shadow:0 0 0 calc(var(--mu)*.2) #2a0d04, 0 0 0 calc(var(--mu)*.4) rgba(201,122,70,.4), inset 0 calc(var(--mu)*.15) 0 rgba(255,205,160,.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;
}

/* ---------------- notasyon: sağ panelde (dikte üst şeritte) seviye başlıklı hamle listesi ---------------- */
.hamle-kutu{
	display:flex;
	flex-direction:column;
	overflow:hidden;
	border-radius:calc(var(--pu)*6);
	background:linear-gradient(180deg, #5c2812 0%, #43190a 100%);
	box-shadow:0 0 0 calc(var(--pu)*1.4) #2a0d04, 0 0 0 calc(var(--pu)*2.6) rgba(201,122,70,.35), inset 0 calc(var(--pu)*1) 0 rgba(255,205,160,.14), 0 calc(var(--pu)*3) calc(var(--pu)*6) rgba(0,0,0,.35);
}
.hamle-kutu .mac-bilgi{
	flex:none;
	width:auto;
	margin:0;
	border-radius:0;
	box-shadow:none;
	background:rgba(0,0,0,.25);
	border-bottom:1px solid rgba(255,205,160,.15);
}
.hamleler{
	flex:1 1 auto;
	min-height:0;
	overflow-y:auto;
	overflow-x:hidden;
	text-align:left;
	font-family:'Poppins', sans-serif;
	font-weight:600;
	color:#f3dcc0;
	scrollbar-width:thin;
	scrollbar-color:#8a4a26 transparent;
}
.hamleler .satir{
	display:grid;
	grid-template-columns:2.3em 1fr 1fr;
	align-items:center;
}
.hamleler .satir:nth-child(even){
	background:rgba(0,0,0,.14);
}
.hamleler i{
	font-style:normal;
	color:#b07a4e;
	text-align:right;
	padding-right:.35em;
}
.hamleler b{
	font-weight:600;
	padding:0 .3em;
	white-space:nowrap;
	border-radius:.3em;
}
.hamleler b.son{
	color:#4a1a06;
	background:linear-gradient(180deg, #ffd34d 0%, #f39200 100%);
}
.hamleler .bos{
	padding:.6em .4em;
	text-align:center;
	color:#a9785a;
	font-weight:400;
}
body.yatay #menu-2{
	display:flex;
	flex-direction:column;
	align-items:center;
}
body.yatay .hamle-kutu{
	flex:1 1 auto;
	min-height:0;
	width:94%;
	margin-top:calc(var(--pu)*7);
}
body.yatay .hamleler{
	font-size:calc(var(--pu)*10);
	line-height:calc(var(--pu)*17);
	padding:calc(var(--pu)*2) 0;
}
body.dikey .hamle-kutu{
	flex:1 1 auto;
	min-width:0;
	align-self:stretch;
	margin:calc(var(--pu)*4) 0;
}
body.dikey .hamle-kutu .mac-bilgi{
	font-size:calc(var(--pu)*10);
	line-height:calc(var(--pu)*13);
	padding:calc(var(--pu)*3) calc(var(--pu)*4);
}
body.dikey .hamleler{
	font-size:calc(var(--pu)*11.5);
	line-height:calc(var(--pu)*17);
	padding:calc(var(--pu)*2) calc(var(--pu)*3);
}
body.dikey .hamleler .satir{
	display:inline;
	background:none;
	margin-right:.35em;
}
body.dikey .hamleler i{
	padding-right:.15em;
}
body.dikey .hamleler b{
	padding:0 .15em;
}
/* taş setlerine göre gölge: klasik düz, 3B kendi gölgesini çizer */
body.set2 .tas{
	filter:drop-shadow(0 calc(var(--bu)*0.02) calc(var(--bu)*0.02) rgba(0,0,0,.35));
}
body.set3 .tas{
	filter:none;
}
body.set3 .tas.secili,body.set2 .tas.secili{
	filter:drop-shadow(0 0 calc(var(--bu)*0.05) #fff3b0) drop-shadow(0 0 calc(var(--bu)*0.12) rgba(255,200,40,.85));
}
body.set3 .tas svg{
	left:3%;
	top:1%;
	width:94%;
	height:94%;
}
/* ---------------- online-module (okey / dama / mangala ile ortak): sohbet, profil, yükleniyor ---------------- */
#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:#ffd9b0;
	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, #6e3216 0%, #43190a 100%);
	box-shadow:0 0 0 2px #2a0d04, 0 0 0 5px rgba(201,122,70,.55), inset 0 2px 0 rgba(255,205,160,.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(201,122,70,.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;
}
@media (prefers-reduced-motion: reduce){
	.tas{
		transition-duration:.05s;
	}
	.kare.hedef::after,.kare.sah,.user.sira .img,.user.dusunuyor .img::after,.iz-ok.ipucu{
		animation:none;
	}
	#message,#tahta-mesaj,#terfi,#message[data-tur="kazandi"]::before{
		animation:none;
	}
}