/* Tavla — rekoroyun.com (2026-10-29). Dama 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 hane genişliği), --pul pul çapı, --pu panel birimi, --su pencere 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;
	--pul:37px;
	--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; /* pul sürüklerken sayfa kaymasın */
	cursor:default;
}
.pul{
	position:absolute;
	left:0;
	top:0;
	width:var(--pul);
	height:var(--pul);
	border-radius:50%;
	background-position:center;
	background-size:100% 100%;
	background-repeat:no-repeat;
	transition:transform .34s cubic-bezier(.3,.75,.3,1), width .34s, height .34s, border-radius .34s;
	will-change:transform;
	filter:drop-shadow(0 calc(var(--bu)*0.05) calc(var(--bu)*0.05) rgba(0,0,0,.55));
	pointer-events:none;
}
.pul.beyaz{
	background-image:url("../img/stamp-2.svg");
}
.pul.siyah{
	background-image:url("../img/stamp-1.svg");
}
.pul.toplandi{ /* toplanan pul: kutuda yandan görünüm */
	border-radius:calc(var(--bu)*0.06);
	filter:none;
	box-shadow:0 1px 1px rgba(0,0,0,.45);
}
.pul.beyaz.toplandi{
	background:linear-gradient(180deg, #fffdf5 0%, #e9e2d0 55%, #b9ad94 100%);
}
.pul.siyah.toplandi{
	background:linear-gradient(180deg, #5a5a5a 0%, #262626 55%, #0b0b0b 100%);
}
.pul.anim-yok{
	transition:none;
}
.pul.ust{
	z-index:20;
}
.pul.surukle{
	transition:none;
	z-index:60;
	filter:drop-shadow(0 calc(var(--bu)*0.2) calc(var(--bu)*0.2) rgba(0,0,0,.6)) brightness(1.06);
}
.pul .sayi{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	line-height:var(--pul);
	text-align:center;
	font-family:'Poppins', sans-serif;
	font-weight:800;
	font-size:calc(var(--pul)*0.36);
	pointer-events:none;
}
.pul.beyaz .sayi{
	color:#5b3a1a;
}
.pul.siyah .sayi{
	color:#f3e6c8;
}
/* ---------------- yardım işaretleri (30.10.2026 yenilendi) ----------------
   oynanabilir pul: nefes alan altın halka; seçili pul: parlak halka + üzerinde dönen ışık; hedef: oynayanın renginde hayalet pul + dalga + zar rozeti;
   vuruş: kırmızı halka; toplama: kutuda altın ışık + aşağı/yukarı akan oklar; son tur: hayalet pul + noktalı kavisli ok */
.pul.oynar::after,.pul.secili::after,.pul.secili::before{
	content:"";
	position:absolute;
	left:-7%;
	top:-7%;
	width:114%;
	height:114%;
	border-radius:50%;
	pointer-events:none;
}
.pul.oynar::after{
	box-shadow:0 0 0 calc(var(--bu)*0.04) rgba(255,214,64,.85), 0 0 calc(var(--bu)*0.2) rgba(255,200,40,.6);
	animation:oynarNefes 1.6s ease-in-out infinite;
}
@keyframes oynarNefes{
	0%,100%{opacity:.55;}
	50%{opacity:1;}
}
.pul.secili::after{
	box-shadow:0 0 0 calc(var(--bu)*0.06) #fff3b0, 0 0 0 calc(var(--bu)*0.1) rgba(255,190,40,.55), 0 0 calc(var(--bu)*0.45) rgba(255,214,64,.95);
}
.pul.secili::before{ /* halkanın üzerinde dönen ışık */
	left:-13%;
	top:-13%;
	width:126%;
	height:126%;
	background:conic-gradient(from 0deg, rgba(255,255,255,0) 0deg, rgba(255,255,255,0) 230deg, rgba(255,246,200,.95) 320deg, rgba(255,255,255,0) 360deg);
	-webkit-mask:radial-gradient(circle, transparent 0 62%, #000 64% 70%, transparent 72%);
	mask:radial-gradient(circle, transparent 0 62%, #000 64% 70%, transparent 72%);
	animation:seciliDon 1.1s linear infinite;
}
@keyframes seciliDon{
	100%{transform:rotate(360deg);}
}
/* gidilebilecek hane: hayalet pul */
.hedef{
	position:absolute;
	width:var(--pul);
	height:var(--pul);
	border-radius:50%;
	box-shadow:0 0 0 calc(var(--bu)*0.045) rgba(255,226,120,.95), 0 0 calc(var(--bu)*0.3) rgba(255,200,60,.55);
}
.hedef::before{ /* oynayanın renginde yarı saydam pul */
	content:"";
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	border-radius:50%;
	background:center / 100% 100% no-repeat;
	opacity:.42;
}
.hedef.beyaz::before{
	background-image:url("../img/stamp-2.svg");
}
.hedef.siyah::before{
	background-image:url("../img/stamp-1.svg");
}
.hedef::after{ /* dışa yayılan dalga */
	content:"";
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	border-radius:50%;
	box-shadow:0 0 0 calc(var(--bu)*0.04) rgba(255,226,120,.9);
	animation:hedefDalga 1.4s ease-out infinite;
}
@keyframes hedefDalga{
	0%{transform:scale(1); opacity:.9;}
	100%{transform:scale(1.45); opacity:0;}
}
.hedef.vurus{ /* rakibin tek pulu vurulur */
	box-shadow:0 0 0 calc(var(--bu)*0.05) #ff7a5c, 0 0 calc(var(--bu)*0.35) rgba(255,70,40,.75);
}
.hedef.vurus::before{
	opacity:0;
}
.hedef.vurus::after{
	box-shadow:0 0 0 calc(var(--bu)*0.04) rgba(255,110,80,.9);
}
.zar-rozet{ /* hedefe gitmek için kullanılacak zar(lar) */
	position:absolute;
	z-index:1;
	right:-22%;
	top:-18%;
	min-width:calc(var(--bu)*0.36);
	height:calc(var(--bu)*0.36);
	padding:0 calc(var(--bu)*0.07);
	box-sizing:border-box;
	border-radius:calc(var(--bu)*0.18);
	font-family:'Poppins', sans-serif;
	font-weight:800;
	font-size:calc(var(--bu)*0.22);
	line-height:calc(var(--bu)*0.37);
	text-align:center;
	white-space:nowrap;
	color:#4a1a06;
	background:linear-gradient(180deg, #ffe27a 0%, #f3a200 100%);
	box-shadow:0 0 0 calc(var(--bu)*0.025) #6b3000, 0 calc(var(--bu)*0.04) calc(var(--bu)*0.08) rgba(0,0,0,.5);
}
.hedef.vurus .zar-rozet{
	color:#fff;
	background:linear-gradient(180deg, #ff8a6a 0%, #d0331c 100%);
	box-shadow:0 0 0 calc(var(--bu)*0.025) #5a0d04, 0 calc(var(--bu)*0.04) calc(var(--bu)*0.08) rgba(0,0,0,.5);
}
.hedef-kutu{ /* pulu toplama kutusu */
	position:absolute;
	overflow:visible;
	border-radius:calc(var(--bu)*0.12);
	box-shadow:inset 0 0 0 calc(var(--bu)*0.05) rgba(255,233,150,.95), inset 0 0 calc(var(--bu)*0.6) rgba(255,200,60,.35), 0 0 calc(var(--bu)*0.35) rgba(255,214,64,.7);
	background:repeating-linear-gradient(180deg, rgba(255,214,64,0) 0, rgba(255,214,64,0) calc(var(--bu)*0.35), rgba(255,214,64,.22) calc(var(--bu)*0.5), rgba(255,214,64,0) calc(var(--bu)*0.65)) 0 0 / 100% calc(var(--bu)*0.65);
	animation:kutuAkis 1s linear infinite, kutuNabiz 1.1s ease-in-out infinite;
}
@keyframes kutuAkis{
	100%{background-position:0 calc(var(--bu)*0.65);}
}
@keyframes kutuNabiz{
	0%,100%{opacity:.7;}
	50%{opacity:1;}
}
.hedef-kutu .zar-rozet{
	right:auto;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
}
/* son turun izi: rakibin pulunun çıktığı yerde hayalet pul + noktalı kavisli ok */
.iz{
	position:absolute;
	width:var(--pul);
	height:var(--pul);
	border-radius:50%;
	box-shadow:inset 0 0 0 calc(var(--bu)*0.035) rgba(255,226,170,.5);
}
.iz::before{
	content:"";
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	border-radius:50%;
	background:center / 100% 100% no-repeat;
	opacity:.22;
}
.iz.beyaz::before{
	background-image:url("../img/stamp-2.svg");
}
.iz.siyah::before{
	background-image:url("../img/stamp-1.svg");
}
.iz-ok{
	position:absolute;
	left:0;
	top:0;
	overflow:visible;
	pointer-events:none;
	filter:drop-shadow(0 1px 1px rgba(0,0,0,.6));
}

/* ---------------- zarlar ---------------- */
#zar-alani{
	position:absolute;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:calc(var(--bu)*0.22);
	pointer-events:none;
	z-index:30;
}
/* 3B zar (30.10.2026): .golge masadaki gölge, .yuk yükseklik (atışta büyür), .kup altı yüzlü küp (preserve-3d); .ic iç düzlemler köşe boşluklarını kapatır */
.zar{
	--zs:calc(var(--bu)*0.92);
	position:relative;
	flex:none;
	width:var(--zs);
	height:var(--zs);
	transition:opacity .25s, filter .25s, transform .25s;
}
.zar.kucuk{
	--zs:calc(var(--bu)*0.66);
}
.zar .golge{
	position:absolute;
	left:-4%;
	top:2%;
	width:112%;
	height:112%;
	border-radius:30%;
	background:radial-gradient(closest-side, rgba(0,0,0,.55) 55%, rgba(0,0,0,.22) 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%, #6a1b12 0%, #2a0905 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.siyah .yuz{
	background:linear-gradient(145deg, #4c4c4c 0%, #272727 48%, #111 100%);
	box-shadow:inset 0 calc(var(--zs)*-0.07) calc(var(--zs)*0.06) rgba(0,0,0,.55), inset 0 calc(var(--zs)*0.045) calc(var(--zs)*0.035) rgba(255,255,255,.2), inset 0 0 0 calc(var(--zs)*0.012) rgba(0,0,0,.6);
}
.zar.siyah .ic{
	background:#1a1a1a;
}
.zar.siyah .yuz i{
	background:radial-gradient(circle at 38% 35%, #ffffff 0%, #d8cfba 80%);
	box-shadow:inset 0 calc(var(--zs)*0.02) calc(var(--zs)*0.02) rgba(0,0,0,.35), 0 calc(var(--zs)*0.01) 0 rgba(0,0,0,.6);
}
.zar.kullanildi{
	opacity:.32;
	filter:grayscale(.6);
	transform:scale(.86);
}
.zar.kullanildi .golge{
	opacity:.4;
}
.belir{ /* çiftte 3. ve 4. zar, başlangıçta isimler: atılan zarlar durunca belirir */
	animation:zarBelir .28s ease-out .95s both;
}
@keyframes zarBelir{
	0%{opacity:0; transform:scale(.6);}
	100%{opacity:1; transform:none;}
}
.zar-etiket{ /* başlangıç zarında kimin zarı olduğu */
	position:absolute;
	left:-200%;
	right:-200%;
	top:108%;
	text-align:center;
	white-space:nowrap;
	font-size:calc(var(--bu)*0.34);
	color:#ffe4b8;
	text-shadow:0 1px 2px #000;
}
#zar-at{
	position:absolute;
	display:none;
	cursor:pointer;
	z-index:31;
	text-align:center;
	border-radius:calc(var(--bu)*0.22);
	background:linear-gradient(#ffd34d, #f39200);
	box-shadow:inset 0 calc(var(--bu)*-0.08) 0 rgba(120,50,0,.35), inset 0 calc(var(--bu)*0.04) 0 rgba(255,255,255,.45), 0 0 0 1px #6b3000, 0 0 calc(var(--bu)*0.5) rgba(255,188,0,.55);
	color:#4a1a06;
	font-size:calc(var(--bu)*0.6);
	letter-spacing:.04em;
	animation:zarAtNabiz 1.4s ease-in-out infinite;
}
#zar-at span{
	pointer-events:none;
	position:relative;
	top:.06em;
}
#zar-at:hover{
	filter:brightness(1.1);
}
@keyframes zarAtNabiz{
	0%,100%{box-shadow:inset 0 calc(var(--bu)*-0.08) 0 rgba(120,50,0,.35), inset 0 calc(var(--bu)*0.04) 0 rgba(255,255,255,.45), 0 0 0 1px #6b3000, 0 0 calc(var(--bu)*0.25) rgba(255,188,0,.4);}
	50%{box-shadow:inset 0 calc(var(--bu)*-0.08) 0 rgba(120,50,0,.35), inset 0 calc(var(--bu)*0.04) 0 rgba(255,255,255,.45), 0 0 0 1px #6b3000, 0 0 calc(var(--bu)*0.7) rgba(255,214,64,.85);}
}
#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 (29.10.2026 yenilendi): koyu ahşap plaka; PİP satırında oyuncunun pul rengi + toplama ilerleme çubuğu, altın SKOR (maçta "1/5") */
.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{ /* PİP: oyuncunun pul 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);
}
#bilgi2 .pip 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.skor b{
	color:#ffd34d;
}
.bilgi-satir.skor b small{
	font-size:.55em;
	color:#c98d5c;
	margin-left:.1em;
}
.bilgi-cubuk{ /* toplama ilerlemesi: 167 pipten 0'a */
	height:calc(var(--pu)*4.5);
	min-height:2px;
	margin:calc(var(--pu)*2) 0 calc(var(--pu)*3) 0;
	border-radius:calc(var(--pu)*3);
	background:rgba(0,0,0,.45);
	box-shadow:inset 0 1px 1px rgba(0,0,0,.5);
	overflow:hidden;
}
.bilgi-cubuk span{
	display:block;
	height:100%;
	width:0;
	border-radius:inherit;
	background:linear-gradient(90deg, #c96a1c, #ffd34d);
	transition:width .4s;
}
#bilgi2 .bilgi-cubuk span{
	background:linear-gradient(90deg, #7a6a5a, #e9dcc6);
}
.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%);
}
#buttons-div .d-sohbet{
	background-image:url("../img/icon-sohbet.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;
}
.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{
	width:94%;
	margin:calc(var(--pu)*5) auto 0 auto;
	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{
	grid-column:1 / span 2;
	height:calc(var(--pu)*42);
	line-height:calc(var(--pu)*45);
	font-size:calc(var(--pu)*19);
}
body.yatay.alcak #buttons-div .d-online span{
	display:none; /* çok alçak ekranda yalnız simge */
}
body.yatay.alcak #buttons-div .d-online{
	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)*92);
	padding:calc(var(--pu)*4) 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)*24);
	line-height:calc(var(--pu)*28);
}
body.dikey .mac-bilgi{
	flex:1 1 auto;
	font-size:calc(var(--pu)*11);
	line-height:calc(var(--pu)*15);
	padding:calc(var(--pu)*6) calc(var(--pu)*4);
}
body.dikey #buttons-div{
	flex:1 1 auto;
	grid-template-columns:repeat(5, 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{
	grid-column:1 / span 5;
	line-height:calc(var(--pu)*46);
	font-size:calc(var(--pu)*21);
	padding-left:14%;
	background-position:6% 50%;
}

/* şerit (29.10.2026): 800x600 gibi ekranlarda tahta büyük kalsın diye iki oyuncu + düğmeler tahtanın üstünde tek satır;
   solda ben (kart, bilgi, düğmeler), sağda rakip (maç bilgisi, bilgi, kart). --pu = şerit yüksekliği / 100 */
body.serit .panel{
	display:flex;
	align-items:center;
	gap:calc(var(--pu)*16);
}
body.serit #menu-2{
	flex-direction:row-reverse;
	pointer-events:none; /* sağ yarıyı kaplar: boş kısmı ortadaki düğmelere tıklamayı engellemesin */
}
body.serit #menu-2 > *{
	pointer-events:auto;
}
body.serit .user{
	flex:none;
	width:calc(var(--pu)*100);
	height:calc(var(--pu)*100);
	background-size:94% auto;
}
body.serit .user .img{
	width:calc(var(--pu)*86);
	height:calc(var(--pu)*86);
	top:calc(var(--pu)*7);
}
body.serit .user .user-name{
	left:-14%;
	width:128%;
	bottom:calc(var(--pu)*-6); /* sıra halkası ve çerçeve etiketin altından taşmasın */
	font-size:calc(var(--pu)*22);
	height:calc(var(--pu)*32);
	line-height:calc(var(--pu)*34);
	padding:0 3%;
	letter-spacing:0;
}
body.serit .bilgi{
	flex:none;
	width:calc(var(--pu)*100);
	border-width:calc(var(--pu)*3);
	padding:calc(var(--pu)*3) calc(var(--pu)*8);
}
body.serit .bilgi-satir i{
	font-size:calc(var(--pu)*12);
}
body.serit .bilgi-satir b{
	font-size:calc(var(--pu)*26);
	line-height:calc(var(--pu)*30);
}
body.serit .mac-bilgi{
	flex:0 1 auto;
	min-width:0;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	max-width:calc(var(--pu)*150);
	font-size:calc(var(--pu)*14);
	line-height:calc(var(--pu)*18);
	padding:calc(var(--pu)*8) calc(var(--pu)*12);
}
body.serit #buttons-div{
	position:absolute; /* şeridin (tahtanın) tam ortasında */
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	grid-template-columns:calc(var(--pu)*140);
	grid-auto-columns:calc(var(--pu)*64);
	grid-auto-flow:column;
	gap:calc(var(--pu)*16);
	height:calc(var(--pu)*66);
}
body.serit #buttons-div .ikon-dugme{
	font-size:calc(var(--pu)*15);
}
body.serit #buttons-div .d-online{
	line-height:calc(var(--pu)*70);
	font-size:calc(var(--pu)*28);
	padding-left:30%;
	background-position:12% 50%;
}

/* ---------------- 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, var(--su));
	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-mac{ --simge:url("../img/ayar-mac.svg"); }
#settings .l-ses{ --simge:url("../img/ayar-ses.svg"); }
#settings .l-yardim{ --simge:url("../img/ayar-yardim.svg"); }
#settings .l-zar{ --simge:url("../img/ayar-zar.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,#settings-mac1{
	order:1;
}
#settings-normal,#settings-mac3{
	order:2;
}
#settings-hard,#settings-mac5{
	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/ayar-zar.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 img{
	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-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-settings{ --simge:url("../img/menu-ayar.svg"); }
#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 img{
	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:#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){
	.pul{
		transition-duration:.05s;
	}
	.hedef,.hedef::after,.hedef-kutu,#zar-at,.user.sira::before,.pul.secili::after,.pul.secili::before,.pul.oynar::after{
		animation:none;
	}
	.belir{
		animation-delay:0s;
	}
	#message,#tahta-mesaj,#message[data-tur="kazandi"]::before{
		animation:none;
	}
}