/* Spider Solitaire teması - ver 0.1 (2026-10-28)
 * Ortak kart.css'in üstüne yalnız bu oyuna özgü süsler: örümcek ağı desenli deste arkası, masada soluk köşe
 * ağları ve iplikten sarkan örümcek, boş yuvalarda ağ, başlangıç ekranında ağ + örümcek.
 * Görseller spider/tema/ (üreten: _araclar/spider_svg.py). Deste arkası CSS değişkeninde olduğu için
 * (değişken kart.css'teki .arka'da çözülür, göreli adres orada bozulur) gömülü veri adresi olarak durur. */

/* ---------- deste arkası: örümcek ağı (Spider'ın kendi tercihi; KartKabuk.arkaOyun) ---------- */
/* ARKA-BASLA (spider_svg.py yazar, elle düzenleme) */
.desen-orumcek{
	--arka-desen: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 140%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M50 62L100 68.54M50 62L100 100.29M50 62L82.39 140M50 62L39.8 140M50 62L-0 127.28M50 62L0 82.76M50 62L0 55.46M50 62L0 23.71M50 62L24.25 0M50 62L58.11 0M50 62L97.49 0M50 62L100 41.24M62.29 63.61Q60.07 66.52 62.29 71.41Q58.3 73.72 57.96 81.17Q52.24 77.72 47.49 81.17Q43.94 76.43 37.71 78.04Q39.93 70.67 37.71 67.1Q39.93 63.43 37.71 60.39Q39.93 57.48 37.71 52.59Q42.37 51.9 43.67 46.77Q48.22 49.51 51.99 46.77Q55.6 49.51 61.67 46.77Q59.82 53.66 62.29 56.9Q60.07 60.57 62.29 63.61M68.57 64.43Q65.23 68.83 68.57 76.22Q62.55 79.71 62.03 90.97Q53.38 85.76 46.21 90.97Q40.83 83.82 31.43 86.25Q34.77 75.1 31.43 69.71Q34.77 64.17 31.43 59.57Q34.77 55.17 31.43 47.78Q38.46 46.73 40.44 38.97Q47.31 43.12 53.01 38.97Q58.47 43.12 67.64 38.97Q64.85 49.4 68.57 54.29Q65.23 59.83 68.57 64.43M74.86 65.25Q70.38 71.14 74.86 81.04Q66.79 85.7 66.1 100.78Q54.52 93.8 44.93 100.78Q37.73 91.21 25.14 94.45Q29.62 79.54 25.14 72.32Q29.62 64.9 25.14 58.75Q29.62 52.86 25.14 42.96Q34.56 41.56 37.2 31.18Q46.4 36.73 54.03 31.18Q61.33 36.73 73.61 31.18Q69.87 45.13 74.86 51.68Q70.38 59.1 74.86 65.25M81.14 66.07Q75.54 73.45 81.14 85.85Q71.04 91.7 70.17 110.58Q55.67 101.84 43.65 110.58Q34.63 98.59 18.86 102.66Q24.46 83.97 18.86 74.93Q24.46 65.63 18.86 57.93Q24.46 50.55 18.86 38.15Q30.66 36.39 33.96 23.38Q45.5 30.33 55.05 23.38Q64.2 30.33 79.58 23.38Q74.9 40.86 81.14 49.07Q75.54 58.37 81.14 66.07M87.43 66.89Q80.69 75.76 87.43 90.67Q75.29 97.69 74.25 120.39Q56.81 109.88 42.37 120.39Q31.52 105.98 12.57 110.87Q19.31 88.41 12.57 77.54Q19.31 66.37 12.57 57.11Q19.31 48.24 12.57 33.33Q26.75 31.22 30.73 15.59Q44.59 23.94 56.07 15.59Q67.06 23.94 85.55 15.59Q79.92 36.6 87.43 46.46Q80.69 57.63 87.43 66.89M93.71 67.72Q85.85 78.07 93.71 95.48Q79.53 103.69 78.32 130.19Q57.96 117.92 41.08 130.19Q28.42 113.36 6.29 119.08Q14.15 92.84 6.29 80.15Q14.15 67.1 6.29 56.28Q14.15 45.93 6.29 28.52Q22.85 26.05 27.49 7.79Q43.68 17.55 57.09 7.79Q69.93 17.55 91.52 7.79Q84.94 32.33 93.71 43.85Q85.85 56.9 93.71 67.72M100 68.54Q91 80.38 100 100.29Q83.78 109.68 82.39 140Q59.1 125.96 39.8 140Q25.32 120.75 -0 127.28Q9 97.28 0 82.76Q9 67.83 0 55.46Q9 43.62 0 23.71Q18.94 20.88 24.25 0Q42.77 11.16 58.11 0Q72.79 11.16 97.49 0Q89.97 28.07 100 41.24Q91 56.17 100 68.54%22 fill=%22none%22 stroke=%22%23fff%22 stroke-opacity=%22.34%22 stroke-width=%221.1%22/%3E%3Cpath d=%22M50 62 V92%22 stroke=%22%23fff%22 stroke-opacity=%22.6%22 stroke-width=%22.8%22/%3E%3Cpath d=%22M48.45 96.45L44.81 89.61L47.5 84.97M48.45 97.5L41.26 94.6L35.86 90.01M48.45 98.56L41.08 100.95L36.44 106.65M48.45 99.61L44 105.96L46.43 111.22M51.55 96.45L55.19 89.61L52.5 84.97M51.55 97.5L58.74 94.6L64.14 90.01M51.55 98.56L58.92 100.95L63.56 106.65M51.55 99.61L56 105.96L53.57 111.22%22 fill=%22none%22 stroke=%22%23fff%22 stroke-opacity=%22.9%22 stroke-width=%220.99%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cellipse cx=%2250%22 cy=%22102.65%22 rx=%223.84%22 ry=%224.96%22 fill=%22%23fff%22 fill-opacity=%22.9%22/%3E%3Ccircle cx=%2250%22 cy=%2296.14%22 r=%222.6%22 fill=%22%23fff%22 fill-opacity=%22.9%22/%3E%3C/svg%3E");
	--arka-boy: 100% 100%; --arka-konum: 0 0; --arka-golge: none;
}
/* ARKA-BITIR */

/* ---------- masa süsleri (#dekor: kartların altında, dokunulmaz) ---------- */
#dekor{ position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
#dekor .ag{ position: absolute; width: min(42vmin, 340px); aspect-ratio: 1; background: center / 100% 100% no-repeat; }
/* sol üst köşedeki ağ kullanıcı isteğiyle kaldırıldı (2026-10-28); yalnız sağ alt */
#dekor .ag.sag{ right: 0; bottom: 0; background-image: url('tema/ag-kose-ters.svg'); }
/* iplikten sarkan örümcek: yeri ve ipliğin boyu yerleşime göre spider.js'ten (--ox, --oy) */
#dekor .sarkan{
	position: absolute; left: var(--ox, 60%); top: var(--ust-h);
	display: flex; flex-direction: column; align-items: center;
	transform: translateX(-50%) rotate(0); transform-origin: 50% 0;
	animation: sallan 7s ease-in-out infinite;
}
#dekor .ip{ width: 1px; height: var(--oy, 60px); background: linear-gradient(rgba(255,255,255,.08), rgba(255,255,255,.42)); animation: ip-cek 11s ease-in-out infinite; }
#dekor .orumcek{ width: var(--ob, 34px); aspect-ratio: 1; margin-top: calc(var(--ob, 34px) * -.18); background: url('tema/orumcek-koyu.svg') center / contain no-repeat; filter: drop-shadow(0 2px 2px rgba(0,0,0,.45)); }
@keyframes sallan{ 0%, 100%{ transform: translateX(-50%) rotate(-3.5deg); } 50%{ transform: translateX(-50%) rotate(3.5deg); } }
@keyframes ip-cek{ 0%, 100%{ transform: scaleY(1); } 50%{ transform: scaleY(.86); } }
#dekor .ip{ transform-origin: 50% 0; }
/* zafer kaskadında ve oyun yokken (başlangıç ekranı açıkken) gereksiz animasyon olmasın */
@media (prefers-reduced-motion: reduce){ #dekor .sarkan, #dekor .ip{ animation: none; } }

/* ---------- boş yuvalar: soluk ağ; seri yuvasında örümcek ---------- */
/* boş yuva ağsız, düz zemin (kullanıcı isteği); saydam değil: masadaki köşe ağı kutunun içinden görünmesin (koyu masa yeşili ≈ eski %17 siyah) */
.yuva{ background: #03321f; }
.yuva .seri-ik{ display: block; width: calc(var(--kg) * .62); aspect-ratio: 1; background: url('tema/ikon-orumcek.svg') center / contain no-repeat; opacity: .42; }

/* üst bant: zorluk simgesi örümcek */
.ik.orumcek{ background-image: url('tema/ikon-orumcek.svg'); }

/* ---------- başlangıç ekranı: köşelerde ağ, logonun yanında sarkan örümcek ---------- */
/* ağlar ayrı katmanda: ortak zemine (kart.css) dokunmaz, ortak klasörün yolunu bilmesi gerekmez (prototipte ortak/, sitede kart-ortak/) */
.kk-baslangic::before{
	content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: url('tema/ag-kose.svg') left top / min(48vmin, 420px) no-repeat,
		url('tema/ag-kose-ters.svg') right bottom / min(48vmin, 420px) no-repeat;
}
.kk-logo::after{
	content: ''; position: absolute; z-index: 2; pointer-events: none;
	right: calc(var(--yh) * -.42); top: calc(var(--yh) * -1.1);
	width: calc(var(--yh) * .42); height: calc(var(--yh) * 1.62);
	background: url('tema/orumcek-koyu.svg') center bottom / 100% auto no-repeat,
		linear-gradient(rgba(255,255,255,.05), rgba(255,255,255,.55)) center top / 1px calc(100% - var(--yh) * .32) no-repeat;
	filter: drop-shadow(0 3px 3px rgba(0,0,0,.4));
	transform-origin: 50% 0; animation: sallan-logo 6s ease-in-out infinite;
}
@keyframes sallan-logo{ 0%, 100%{ transform: rotate(-5deg); } 50%{ transform: rotate(5deg); } }
@media (prefers-reduced-motion: reduce){ .kk-logo::after{ animation: none; } }