/* Kızma Birader — rekoroyun.com (2026-11-01). Tahta: Türkiye'de en yaygın kızma birader tahtası (açık ahşap, siyah çizgili beyaz haneler,
   köşelerde renkli PARK ALANI daireleri, renkli çıkış ve ev haneleri, plastik piyonlar). Çevre: tavla / satranç oyunlarının koyu ahşap / bakır halka dili.
   Ölçüler JS'te (boyutla) hesaplanır: --bu tahtanın bir hanesi, --pu kart / düğme 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;
	--k0:#d42a20; --k0a:#ff7a63; --k0k:#7d0f09;   /* kırmızı (koltuk 1) */
	--k1:#2f6fd0; --k1a:#7fb2ff; --k1k:#13336f;   /* mavi (koltuk 2) */
	--k2:#f2c21a; --k2a:#fff08a; --k2k:#9c7300;   /* sarı (koltuk 3) */
	--k3:#2ca44a; --k3a:#86e89a; --k3k:#0f5a24;   /* yeşil (koltuk 4) */
}
#game-border{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	transition:opacity .2s;
}

/* ---------------- tahta (SVG; piyonlar, işaretler ve zar üstünde ayrı katmanlarda) ---------------- */
#tahta{
	position:absolute;
	border-radius:calc(var(--bu)*0.42);
	box-shadow:0 calc(var(--bu)*0.18) calc(var(--bu)*0.6) rgba(0,0,0,.55), 0 0 0 calc(var(--bu)*0.05) #2a0d04;
}
#tahta-svg{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	display:block;
	border-radius:inherit;
}
#isaretler,#piyonlar{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	pointer-events:none;
}
#isaretler{ z-index:5; }
#piyonlar{ z-index:10; }

/* piyon: plastik, ayakta; tabanının ortası hanenin ortasına oturur (svg 40 x 56) */
.piyon{
	position:absolute;
	left:0;
	top:0;
	width:calc(var(--bu)*0.78);
	height:calc(var(--bu)*1.09);
	margin:calc(var(--bu)*-0.9) 0 0 calc(var(--bu)*-0.39);
	pointer-events:none;
	will-change:transform;
}
.piyon svg{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	overflow:visible;
}
.piyon.oynar{
	pointer-events:auto;
	cursor:pointer;
}
.piyon.oynar::before{ /* oynanabilir piyon: tabanında nefes alan altın halka */
	content:"";
	position:absolute;
	left:-10%;
	width:120%;
	bottom:-4%;
	height:36%;
	border-radius:50%;
	box-shadow:0 0 0 calc(var(--bu)*0.05) #ffd34d, 0 0 calc(var(--bu)*0.3) rgba(255,214,64,.9);
	animation:piyonNefes 1.1s ease-in-out infinite;
}
.piyon.oynar.secili::before{
	box-shadow:0 0 0 calc(var(--bu)*0.07) #fff3b0, 0 0 calc(var(--bu)*0.45) rgba(255,234,140,1);
	animation:none;
}
.piyon.oynar svg{
	animation:piyonZipla 1.1s ease-in-out infinite;
}
.piyon.oynar.secili svg{
	animation:none;
	transform:translateY(calc(var(--bu)*-0.12));
}
@keyframes piyonNefes{
	0%,100%{opacity:.55; transform:scale(.9);}
	50%{opacity:1; transform:scale(1.06);}
}
@keyframes piyonZipla{
	0%,100%{transform:translateY(0);}
	50%{transform:translateY(calc(var(--bu)*-0.08));}
}
.piyon.yuruyor svg{ animation:none; }

/* hedef: oynanabilir piyonun varacağı hane (yardım açıkken) */
.hedef{
	position:absolute;
	width:calc(var(--bu)*0.86);
	height:calc(var(--bu)*0.86);
	margin:calc(var(--bu)*-0.43) 0 0 calc(var(--bu)*-0.43);
	border-radius:50%;
	box-shadow:0 0 0 calc(var(--bu)*0.06) var(--hr, #ffd34d), inset 0 0 calc(var(--bu)*0.25) var(--hr, #ffd34d);
	background:radial-gradient(circle, rgba(255,214,64,.35) 0%, rgba(255,214,64,0) 70%);
	opacity:.55;
	transition:opacity .15s, transform .15s;
}
.hedef.aktif{
	opacity:1;
	transform:scale(1.08);
	animation:hedefDalga 1s ease-out infinite;
}
.hedef.vurus{ --hr:#ff4b3a; }
.hedef.vurus.aktif::after{ /* vurulacak piyon: kırmızı çarpı */
	content:"";
	position:absolute;
	inset:22%;
	background:linear-gradient(45deg, transparent 42%, #ff4b3a 42% 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, #ff4b3a 42% 58%, transparent 58%);
	filter:drop-shadow(0 0 2px #000);
}
@keyframes hedefDalga{
	0%{box-shadow:0 0 0 calc(var(--bu)*0.06) var(--hr, #ffd34d), 0 0 0 0 rgba(255,214,64,.6), inset 0 0 calc(var(--bu)*0.25) var(--hr, #ffd34d);}
	100%{box-shadow:0 0 0 calc(var(--bu)*0.06) var(--hr, #ffd34d), 0 0 0 calc(var(--bu)*0.3) rgba(255,214,64,0), inset 0 0 calc(var(--bu)*0.25) var(--hr, #ffd34d);}
}
.yol-nokta{ /* hedefe giden yol */
	position:absolute;
	width:calc(var(--bu)*0.16);
	height:calc(var(--bu)*0.16);
	margin:calc(var(--bu)*-0.08) 0 0 calc(var(--bu)*-0.08);
	border-radius:50%;
	background:#ffd34d;
	box-shadow:0 0 calc(var(--bu)*0.12) rgba(255,214,64,.9), 0 0 0 1px rgba(90,40,0,.6);
}
.iz{ /* son hamle: piyonun çıktığı hane (soluk halka) */
	position:absolute;
	width:calc(var(--bu)*0.7);
	height:calc(var(--bu)*0.7);
	margin:calc(var(--bu)*-0.35) 0 0 calc(var(--bu)*-0.35);
	border-radius:50%;
	border:calc(var(--bu)*0.045) dashed var(--ir, #fff);
	opacity:.75;
}
.vurus-efekt{ /* vurulan piyonun yerinde patlama halkası */
	position:absolute;
	width:calc(var(--bu)*1.6);
	height:calc(var(--bu)*1.6);
	margin:calc(var(--bu)*-0.8) 0 0 calc(var(--bu)*-0.8);
	border-radius:50%;
	border:calc(var(--bu)*0.12) solid #fff3b0;
	animation:vurusEfekt .55s ease-out forwards;
}
@keyframes vurusEfekt{
	0%{transform:scale(.3); opacity:1;}
	100%{transform:scale(1.4); opacity:0;}
}
.ev-efekt{ /* eve giren piyon: yıldızlar */
	position:absolute;
	width:calc(var(--bu)*0.3);
	height:calc(var(--bu)*0.3);
	margin:calc(var(--bu)*-0.15) 0 0 calc(var(--bu)*-0.15);
	background:#ffe27a;
	clip-path:polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
	animation:evEfekt .8s ease-out forwards;
}
@keyframes evEfekt{
	0%{transform:translate(0,0) scale(.4) rotate(0); opacity:1;}
	100%{transform:translate(var(--dx),var(--dy)) scale(1.1) rotate(160deg); opacity:0;}
}

/* ---------------- zar (tavla ile aynı 3B küp) ---------------- */
#zar-alani{
	position:absolute;
	display:flex;
	align-items:center;
	justify-content:center;
	z-index:30;
	pointer-events:none;
}
#zar-alani.atilir{
	pointer-events:auto;
	cursor:pointer;
}
#zar-alani.atilir::before{ /* sıradaki oyuncu zar atabilir: zarın çevresinde altın dalga */
	content:"";
	position:absolute;
	width:calc(var(--bu)*1.25);
	height:calc(var(--bu)*1.25);
	border-radius:28%;
	box-shadow:0 0 0 calc(var(--bu)*0.05) #ffd34d, 0 0 calc(var(--bu)*0.4) rgba(255,214,64,.9);
	animation:zarDalga 1.2s ease-in-out infinite;
}
@keyframes zarDalga{
	0%,100%{transform:scale(.92); opacity:.6;}
	50%{transform:scale(1.06); opacity:1;}
}
.zar{
	--zs:calc(var(--bu)*0.86);
	position:relative;
	flex:none;
	width:var(--zs);
	height:var(--zs);
	transition:opacity .25s, filter .25s, transform .25s;
}
.zar .golge{
	position:absolute;
	left:-4%;
	top:2%;
	width:112%;
	height:112%;
	border-radius:30%;
	background:radial-gradient(closest-side, rgba(0,0,0,.5) 55%, rgba(0,0,0,.2) 80%, rgba(0,0,0,0) 100%);
}
.zar .yuk{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	perspective:calc(var(--zs)*5);
}
.zar .kup{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	transform-style:preserve-3d;
}
.zar .yuz,.zar .ic{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	backface-visibility:hidden;
	-webkit-backface-visibility:hidden;
}
.zar .yuz{
	border-radius:17%;
	background:linear-gradient(145deg, #ffffff 0%, #f6f0e2 42%, #ddd3ba 100%);
	box-shadow:inset 0 calc(var(--zs)*-0.07) calc(var(--zs)*0.06) rgba(120,90,40,.35), inset 0 calc(var(--zs)*0.045) calc(var(--zs)*0.035) rgba(255,255,255,.95), inset 0 0 0 calc(var(--zs)*0.012) rgba(150,120,70,.35);
}
.zar .y1{ transform:translateZ(calc(var(--zs)/2)); }
.zar .y6{ transform:rotateY(180deg) translateZ(calc(var(--zs)/2)); }
.zar .y2{ transform:rotateY(90deg) translateZ(calc(var(--zs)/2)); }
.zar .y5{ transform:rotateY(-90deg) translateZ(calc(var(--zs)/2)); }
.zar .y3{ transform:rotateX(90deg) translateZ(calc(var(--zs)/2)); }
.zar .y4{ transform:rotateX(-90deg) translateZ(calc(var(--zs)/2)); }
.zar .ic{
	backface-visibility:visible;
	-webkit-backface-visibility:visible;
	left:3%;
	top:3%;
	width:94%;
	height:94%;
	background:#cfc4a8;
}
.zar .i1{ transform:rotateX(90deg); }
.zar .i2{ transform:rotateY(90deg); }
.zar .yuz i{
	position:absolute;
	width:21%;
	height:21%;
	margin:-10.5% 0 0 -10.5%;
	border-radius:50%;
	background:radial-gradient(circle at 38% 35%, #4a4a4a 0%, #0d0d0d 75%);
	box-shadow:inset 0 calc(var(--zs)*0.02) calc(var(--zs)*0.02) rgba(0,0,0,.5), 0 calc(var(--zs)*0.01) 0 rgba(255,255,255,.7);
}
.zar .y1 i{ /* tek nokta kırmızı (klasik zar) */
	width:27%;
	height:27%;
	margin:-13.5% 0 0 -13.5%;
	background:radial-gradient(circle at 38% 35%, #e0473a 0%, #8c120c 80%);
}
.zar.soluk{
	opacity:.55;
	filter:grayscale(.35);
	transform:scale(.9);
}
.zar-rozet{ /* 3 haktan kaçıncısı */
	position:absolute;
	right:calc(var(--bu)*-0.28);
	top:calc(var(--bu)*-0.22);
	min-width:calc(var(--bu)*0.42);
	height:calc(var(--bu)*0.42);
	line-height:calc(var(--bu)*0.46);
	padding:0 calc(var(--bu)*0.08);
	border-radius:calc(var(--bu)*0.21);
	background:linear-gradient(#ffd34d, #f39200);
	color:#4a1a06;
	font-size:calc(var(--bu)*0.3);
	text-align:center;
	box-shadow:0 0 0 1px #6b3000;
}

/* ---------------- oyuncu kartları: dört köşede, köşedeki park alanının yanında ---------------- */
.kart{
	position:absolute;
	display:none;
	--pu:1px;
	--renk:var(--k0);
	--renka:var(--k0a);
	--renkk:var(--k0k);
}
.kart.var{ display:block; }
.kart.r1{ --renk:var(--k1); --renka:var(--k1a); --renkk:var(--k1k); }
.kart.r2{ --renk:var(--k2); --renka:var(--k2a); --renkk:var(--k2k); }
.kart.r3{ --renk:var(--k3); --renka:var(--k3a); --renkk:var(--k3k); }
.kart .img{
	position:absolute;
	border-radius:50%;
	background-color:#3a170a;
	background-position:center;
	background-size:100% auto;
	background-repeat:no-repeat;
	box-shadow:0 0 0 calc(var(--pu)*2.2) #2a0d04, 0 0 0 calc(var(--pu)*5.4) var(--renk), 0 0 0 calc(var(--pu)*6.8) #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;
}
.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.yz .img{ cursor:default; }
.kart.online .img{ cursor:pointer; }
.kart.sira .img{
	animation:siraNabiz 1.4s 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)*5.4) var(--renk), 0 0 0 calc(var(--pu)*6.8) #2a0d04, 0 0 0 calc(var(--pu)*8.6) #ffc83a, 0 0 calc(var(--pu)*8) rgba(255,200,60,.4);}
	50%{box-shadow:0 0 0 calc(var(--pu)*2.2) #2a0d04, 0 0 0 calc(var(--pu)*5.4) var(--renka), 0 0 0 calc(var(--pu)*6.8) #2a0d04, 0 0 0 calc(var(--pu)*9.4) #ffe08a, 0 0 calc(var(--pu)*20) rgba(255,200,60,.85);}
}
.kart.dusunuyor .img::after{ /* yapay zeka sırada: dönen ışık */
	content:"";
	position:absolute;
	inset:calc(var(--pu)*-7);
	border-radius:50%;
	background:conic-gradient(from 0deg, rgba(255,230,140,0) 0 70%, rgba(255,230,140,.95) 88%, rgba(255,230,140,0) 100%);
	-webkit-mask:radial-gradient(closest-side, transparent calc(100% - var(--pu)*3.2), #000 calc(100% - var(--pu)*3));
	mask:radial-gradient(closest-side, transparent calc(100% - var(--pu)*3.2), #000 calc(100% - var(--pu)*3));
	animation:yzDon 1s linear infinite;
}
@keyframes yzDon{ 100%{transform:rotate(360deg);} }
.kart .user-name{
	position:absolute;
	text-align:center;
	color:#5a3510;
	letter-spacing:.04em;
	text-shadow:0 .06em 0 rgba(255,255,255,.5);
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	padding:0 6%;
	border-radius:.35em;
	background:linear-gradient(180deg, #f8e3b8 0%, #e2b97a 100%);
	box-shadow:0 0 0 .08em #8a5a2b, 0 0 0 .16em var(--renk), inset 0 .07em 0 rgba(255,252,240,.2), 0 .15em .35em rgba(255,255,255,.5);
}
.kart .user-name small{
	font-family:'Poppins', sans-serif;
	font-weight:600;
	font-size:.62em;
	letter-spacing:0;
	color:#8a5f33;
}
.kart .evler{ /* eve giren piyonlar: dört yuva */
	position:absolute;
	display:flex;
	gap:calc(var(--pu)*4);
	justify-content:center;
}
.kart .evler i{
	display:block;
	width:calc(var(--pu)*13);
	height:calc(var(--pu)*13);
	border-radius:50%;
	background:rgba(0,0,0,.35);
	box-shadow:inset 0 1px 2px rgba(0,0,0,.6), 0 0 0 1px rgba(255,205,160,.18);
}
.kart .evler i.dolu{
	background:radial-gradient(circle at 35% 30%, var(--renka) 0%, var(--renk) 55%, var(--renkk) 100%);
	box-shadow:0 0 0 1px #2a0d04, 0 1px 2px rgba(0,0,0,.6);
}
.kart .skor{ /* galibiyet sayısı */
	position:absolute;
	min-width:calc(var(--pu)*24);
	height:calc(var(--pu)*24);
	line-height:calc(var(--pu)*26);
	padding:0 calc(var(--pu)*5);
	border-radius:calc(var(--pu)*12);
	text-align:center;
	font-size:calc(var(--pu)*16);
	color:#4a1a06;
	background:linear-gradient(#ffe27a, #f39200);
	box-shadow:0 0 0 calc(var(--pu)*1.5) #6b3000, 0 calc(var(--pu)*2) calc(var(--pu)*4) rgba(0,0,0,.5);
}
.kart .skor:empty{ display:none; }
/* yatay ekran: kart dikine (avatar üstte, ad, ev yuvaları) */
body.yatay .kart .img{
	left:50%;
	top:calc(var(--pu)*9);
	width:calc(var(--pu)*80);
	height:calc(var(--pu)*80);
	margin-left:calc(var(--pu)*-40);
}
body.yatay .kart .user-name{
	left:4%;
	width:92%;
	top:calc(var(--pu)*94);
	height:calc(var(--pu)*25);
	line-height:calc(var(--pu)*27);
	font-size:calc(var(--pu)*15);
}
body.yatay .kart .evler{
	left:0;
	right:0;
	top:calc(var(--pu)*126);
}
body.yatay .kart .skor{
	left:calc(50% + var(--pu)*24);
	top:calc(var(--pu)*2);
}
/* dik ekran: kart yatay (avatar solda, ad + ev yuvaları sağda); sağdaki kartlarda ayna */
body.dikey .kart .img{
	left:calc(var(--pu)*9);
	top:calc(var(--pu)*9);
	width:calc(var(--pu)*72);
	height:calc(var(--pu)*72);
}
body.dikey .kart .user-name{
	left:calc(var(--pu)*92);
	right:calc(var(--pu)*4);
	top:calc(var(--pu)*14);
	height:calc(var(--pu)*26);
	line-height:calc(var(--pu)*28);
	font-size:calc(var(--pu)*16);
}
body.dikey .kart .evler{
	left:calc(var(--pu)*92);
	right:calc(var(--pu)*4);
	top:calc(var(--pu)*52);
}
body.dikey .kart .skor{
	left:calc(var(--pu)*58);
	top:calc(var(--pu)*0);
}
body.dikey .kart.ayna .img{ left:auto; right:calc(var(--pu)*9); }
body.dikey .kart.ayna .user-name,body.dikey .kart.ayna .evler{ left:calc(var(--pu)*4); right:calc(var(--pu)*92); }
body.dikey .kart.ayna .skor{ left:auto; right:calc(var(--pu)*58); }

#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(250,232,194,.97) 0%, rgba(228,190,128,.97) 100%);
	box-shadow:0 0 0 calc(var(--bu)*0.03) #8a5a2b, 0 0 0 calc(var(--bu)*0.07) rgba(150,96,40,.55), inset 0 calc(var(--bu)*0.03) 0 rgba(255,252,240,.2), 0 calc(var(--bu)*0.12) calc(var(--bu)*0.45) rgba(255,255,255,.5);
	color:#5a3510;
	font-size:calc(var(--bu)*0.5);
	letter-spacing:.04em;
	text-shadow:0 .06em 0 rgba(255,255,255,.5);
	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:#8a5f33;
	text-shadow:none;
}
@keyframes mesajGel{
	0%{opacity:0; transform:translate(-50%,-50%) scale(.85);}
	100%{opacity:1; transform:translate(-50%,-50%) scale(1);}
}


/* ---------------- menü düğmeleri (tavla / satranç ile aynı; yatayda solda ONLINE + ZAR AT, sağda küçük düğmeler; dikte altta tek sıra) ---------------- */
.dugmeler{
	display:grid;
}
.dugmeler .ikon-dugme{
	position:relative;
	cursor:pointer;
	border-radius:0.6em;
	background:url("../img/icon-new.svg") center / auto 62% no-repeat, linear-gradient(180deg, #f8e3b8 0%, #e2b97a 100%);
	border-radius:.75em;
	box-shadow:0 0 0 .1em #8a5a2b, 0 0 0 .2em rgba(150,96,40,.45), inset 0 .09em 0 rgba(255,252,240,.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;
}
.dugmeler .ikon-dugme:hover{
	filter:brightness(1.18);
	transform:translateY(-1px);
}
.dugmeler .ikon-dugme:active{
	transform:translateY(1px);
	filter:brightness(.95);
}
.dugmeler .d-ayar{
	background-image:url("../img/icon-settings.svg"), linear-gradient(180deg, #f8e3b8 0%, #e2b97a 100%);
}
.dugmeler .d-geri{
	background-image:url("../img/icon-undo.svg"), linear-gradient(180deg, #f8e3b8 0%, #e2b97a 100%);
}
.dugmeler .d-ses{
	background-image:url("../img/icon-ses-acik.svg"), linear-gradient(180deg, #f8e3b8 0%, #e2b97a 100%);
}
.dugmeler .d-ses.ses-kapali{
	background-image:url("../img/icon-ses-kapali.svg"), linear-gradient(180deg, #f8e3b8 0%, #e2b97a 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) */
.dugmeler .d-online{
	background:url("../img/icon-online-acik.svg") 9% 50% / auto 62% no-repeat, linear-gradient(180deg, #f8e3b8 0%, #e2b97a 100%);
	color:#5a3510;
	text-shadow:0 .06em 0 rgba(255,255,255,.5);
	font-family:'Bebas Neue', cursive;
	text-align:center;
	padding-left:22%;
}
.dugmeler .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);}
}
.dugmeler .d-online span{
	pointer-events:none;
}
/* ZAR AT: geniş düğme; sıra yerel oyuncudayken (zar atılabilir) altın ve nabızlı */
.dugmeler .d-zar{
	background:url("../img/zar-plaka.svg") 10% 50% / auto 58% no-repeat, linear-gradient(180deg, #f8e3b8 0%, #e2b97a 100%);
	color:#5a3510;
	text-shadow:0 .06em 0 rgba(255,255,255,.5);
	font-family:'Bebas Neue', cursive;
	text-align:center;
	padding-left:22%;
}
.dugmeler .d-zar.acik{
	background-image:url("../img/zar-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);
}
.dugmeler .d-zar span{
	pointer-events:none;
}
.dugmeler .d-sohbet{
	background:url("../img/icon-sohbet.svg") 10% 50% / auto 58% no-repeat, linear-gradient(180deg, #f8e3b8 0%, #e2b97a 100%);
	color:#5a3510;
	text-shadow:0 .06em 0 rgba(255,255,255,.5);
	font-family:'Bebas Neue', cursive;
	text-align:center;
	padding-left:22%;
}
.dugmeler .d-sohbet span{
	pointer-events:none;
}
.kapali-dugme{
	opacity:0.4;
}
.dugmeler .d-zar.acik{
	animation:onlineIsik 1.4s ease-in-out infinite;
}
.dugmeler{
	position:absolute;
	display:grid;
	z-index:20;
}
.dugmeler .ikon-dugme{
	font-size:inherit; /* boyut ve satır yüksekliği kapsayıcıdan (boyutla) */
	line-height:inherit;
}
.dugmeler .ikon-dugme span{
	pointer-events:none;
	position:relative;
	top:.06em;
}
.dugmeler .d-online,.dugmeler .d-zar,.dugmeler .d-sohbet{
	white-space:nowrap;
}
body.alcak .dugmeler .d-online span,body.alcak .dugmeler .d-sohbet span{
	display:none; /* çok dar düğmede yalnız simge */
}
body.alcak .dugmeler .d-online,body.alcak .dugmeler .d-sohbet{
	padding-left:0;
	background-position:center;
}

/* ---------------- 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:#5a3510;
	text-shadow:0 1px 0 rgba(0,0,0,.5);
	background:linear-gradient(180deg, #f8e3b8 0%, #e2b97a 100%);
	box-shadow:0 0 0 2px #8a5a2b, 0 0 0 max(4px, calc(var(--su)*.45)) var(--halka, rgba(150,96,40,.6)), inset 0 2px 0 rgba(255,252,240,.18), 0 max(6px, calc(var(--su)*1)) max(18px, calc(var(--su)*3)) rgba(255,255,255,.5);
}
#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 #8a5a2b;
}
.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:#5a3510;
	border-radius:calc(var(--ss)*2.6);
	background:linear-gradient(180deg, #f6dfb0 0%, #ddb06f 100%);
	box-shadow:0 0 0 calc(var(--ss)*.25) #8a5a2b, 0 0 0 calc(var(--ss)*.55) rgba(150,96,40,.45), inset 0 calc(var(--ss)*.2) 0 rgba(255,252,240,.14),
		inset 0 0 calc(var(--ss)*2) rgba(120,70,20,.15), 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:#5a3510;
	text-shadow:0 .06em 0 rgba(255,255,255,.5);
}
#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%, #c98a4f 0%, #9a6131 60%, #6e4120 100%);
	box-shadow:0 0 0 calc(var(--ss)*.2) #8a5a2b, 0 0 0 calc(var(--ss)*.4) rgba(255,252,240,.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(150,96,40,0) 0%, rgba(150,96,40,.7) 50%, rgba(150,96,40,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%, #c98a4f 0%, #9a6131 70%, #6e4120 100%);
	box-shadow:0 0 0 calc(var(--ss)*.2) #8a5a2b, 0 0 0 calc(var(--ss)*.4) rgba(150,96,40,.55), inset 0 calc(var(--ss)*.18) 0 rgba(255,252,240,.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, #f8e3b8 0%, #e2b97a 100%);
	box-shadow:0 0 0 calc(var(--ss)*.2) #8a5a2b, 0 0 0 calc(var(--ss)*.42) rgba(150,96,40,.4), inset 0 calc(var(--ss)*.18) 0 rgba(255,252,240,.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%, #c98a4f 0%, #9a6131 60%, #6e4120 100%);
	box-shadow:0 0 0 calc(var(--ss)*.2) #8a5a2b, 0 0 0 calc(var(--ss)*.4) rgba(255,252,240,.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-oyuncu{ --simge:url("../img/ayar-oyuncu.svg"); }
#settings .l-oto{ --simge:url("../img/ayar-oto.svg"); }
#settings .l-ses{ --simge:url("../img/ayar-ses.svg"); }
#settings .l-yardim{ --simge:url("../img/ayar-yardim.svg"); }
#settings .list span{
	flex:1;
	min-width:0;
	font-size:calc(var(--ss)*2.7);
	line-height:1.05;
	letter-spacing:.03em;
	color:#5a3510;
	text-shadow:0 .06em 0 rgba(255,255,255,.5);
}
#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:#8a5f33;
	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:#b4824a;
	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,252,240,.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:#fff1d6;
	transition:color .15s, background .15s;
}
#settings .settings-button.passive:hover{
	color:#ffffff;
	background:rgba(255,252,240,.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:#fff1d6;
	background:#b4824a;
	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,252,240,.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:#5a3510;
	border-radius:calc(var(--ss)*2.6);
	background:radial-gradient(ellipse at 50% 0%, rgba(150,96,40,.28) 0%, rgba(150,96,40,0) 60%), linear-gradient(180deg, #f6dfb0 0%, #ddb06f 100%);
	box-shadow:0 0 0 calc(var(--ss)*.25) #8a5a2b, 0 0 0 calc(var(--ss)*.55) rgba(150,96,40,.5), inset 0 calc(var(--ss)*.2) 0 rgba(255,252,240,.14),
		inset 0 0 calc(var(--ss)*2) rgba(120,70,20,.15), 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%, #c98a4f 0%, #9a6131 60%, #6e4120 100%);
	box-shadow:0 0 0 calc(var(--ss)*.3) #8a5a2b, 0 0 0 calc(var(--ss)*.62) rgba(150,96,40,.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/ayar-zar.svg") center / 52% no-repeat, radial-gradient(circle at 40% 35%, #c98a4f 0%, #9a6131 60%, #6e4120 100%);
}
#message-title{
	font-family:'Bebas Neue', cursive;
	font-size:calc(var(--ss)*5);
	line-height:1;
	letter-spacing:.06em;
	color:#5a3510;
	text-shadow:0 .06em 0 rgba(255,255,255,.5);
}
#message[data-tur="kazandi"] #message-title{
	color:#b45a00;
	text-shadow:0 .06em 0 rgba(255,255,255,.5), 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:#5a3510;
}
#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(150,96,40,0) 0%, rgba(150,96,40,.7) 50%, rgba(150,96,40,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:#8a5f33;
}
#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%, #c98a4f 0%, #9a6131 70%, #6e4120 100%);
	box-shadow:0 0 0 calc(var(--ss)*.2) #8a5a2b, 0 0 0 calc(var(--ss)*.4) rgba(150,96,40,.55), inset 0 calc(var(--ss)*.18) 0 rgba(255,252,240,.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:#5a3510;
	background:linear-gradient(180deg, #f8e3b8 0%, #e2b97a 100%);
	box-shadow:0 0 0 calc(var(--ss)*.2) #8a5a2b, 0 0 0 calc(var(--ss)*.42) rgba(150,96,40,.45), inset 0 calc(var(--ss)*.18) 0 rgba(255,252,240,.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(255,255,255,.5);
}
#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%, #b57a43 0%, #84542a 52%, #3d220f 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, #f6dfb0 0%, #ddb06f 100%);
	box-shadow:0 0 0 calc(var(--mu)*.25) #8a5a2b, 0 0 0 calc(var(--mu)*.55) rgba(150,96,40,.4), inset 0 calc(var(--mu)*.2) 0 rgba(255,252,240,.14),
		inset 0 0 calc(var(--mu)*2) rgba(120,70,20,.15), 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:#5a3510;
	background:linear-gradient(180deg, #f8e3b8 0%, #e2b97a 100%);
	box-shadow:0 0 0 calc(var(--mu)*.2) #8a5a2b, 0 0 0 calc(var(--mu)*.42) rgba(150,96,40,.45), inset 0 calc(var(--mu)*.18) 0 rgba(255,252,240,.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%, #c98a4f 0%, #9a6131 60%, #6e4120 100%);
	box-shadow:0 0 0 calc(var(--mu)*.2) #8a5a2b, 0 0 0 calc(var(--mu)*.4) rgba(255,252,240,.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(255,255,255,.5);
}
.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:#8a5f33;
}
.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%, #c98a4f 0%, #9a6131 70%, #6e4120 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:#b45a00; }
#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:#5a3510;
	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, #f6dfb0 0%, #ddb06f 100%);
	box-shadow:0 0 0 calc(var(--mu)*.2) #8a5a2b, 0 0 0 calc(var(--mu)*.4) rgba(150,96,40,.4), inset 0 calc(var(--mu)*.15) 0 rgba(255,252,240,.14);
	transition:filter .12s;
}
#start-back:hover{
	filter:brightness(1.06);
	color:#3a2008;
}
/* 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;
}


/* ---------------- 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:#5a3510;
	font-family:'Bebas Neue', cursive;
	font-size:24px;
	white-space:nowrap;
	letter-spacing:0.05em;
	text-align:center;
	text-shadow:0 .06em 0 rgba(255,255,255,.5);
	background:linear-gradient(180deg, #f8e3b8 0%, #e2b97a 100%);
	box-shadow:0 0 0 2px #8a5a2b, 0 0 0 5px rgba(150,96,40,.55), inset 0 2px 0 rgba(255,252,240,.18), 0 8px 26px rgba(255,255,255,.5);
}
#loading::before{
	content:"";
	position:absolute;
	left:20px;
	top:50%;
	width:24px;
	height:24px;
	margin-top:-15px;
	border-radius:50%;
	border:3px solid rgba(150,96,40,.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){
	.piyon.oynar::before,.piyon.oynar svg,.hedef.aktif,.kart.sira .img,.kart.dusunuyor .img::after,#zar-alani.atilir::before,.dugmeler .d-zar.acik{
		animation:none;
	}
	#message,#tahta-mesaj,#message[data-tur="kazandi"]::before{
		animation:none;
	}
}
/* sohbet düğmesi bu oyunda kare (yalnız simge) */
.dugmeler .d-sohbet.simge{
	padding-left:0;
	background-position:center;
}
.dugmeler .d-sohbet.simge span{
	display:none;
}
#menu-chat.simge span{ /* sohbet-dugme.js düğmeyi online'da body'ye taşır: kapsayıcıdan bağımsız seçici */
	display:none;
}
@media (max-height:420px){ /* 03.11.2026: alçak yatay ekranda (568x320) oyun sonu penceresi (4 oyunculu sıralama + düğmeler) sığmıyor, İPTAL / YENİ OYUN alttan kesiliyordu */
	#message{--ss:max(5px, var(--su)); padding-top:calc(var(--ss)*2.4);}
	#message::before{display:none;}
	#message-message small{line-height:1.3; margin-top:.3em;}
	#message-confirms{margin-top:calc(var(--ss)*2);}
}