/* istaka.css — solo (oyun.html) ve online (masa.html) masanın ORTAK görünümü: masa, raylar, atık
   alanları, deste, ıstaka, taşlar, çerçeveler, paneller, ilerleme çubuğu, modal, 💡 kart, Bul penceresi.
   Sayfaya özgü kurallar sayfanın kendi <style> bloğunda, bu dosyadan SONRA gelir.
   SIRA KURALI: telefon (@media) kuralları dosyanın sonunda, temel kurallardan SONRA durur — önce
   gelirlerse aynı özgüllükteki temel kural onları ezer (solo modal küçültmesi bu yüzden çalışmıyordu). */
:root{--felt:#2f9c52;--feltk:#155b33;--wood:#8a5a2b;--woodA:#c08c4a;--woodK:#7a4f24;--ray:#9a652f;
--plate:#0d5a2d;--plate2:#0e6b35;--krem:#f4e8d2;--cy:#3adf7c;--ca:#f3c429;--cm:#b06ae0;}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;height:100vh;height:100dvh;font-family:system-ui,sans-serif;background:#0d3a20;display:flex;justify-content:center;align-items:center;overflow:hidden;overscroll-behavior:none}
#masa{position:relative;flex:none;width:1240px;height:740px;border:14px solid transparent;border-radius:20px;overflow:hidden;touch-action:none;
 background:
  repeating-linear-gradient(45deg,rgba(255,255,255,.020) 0 1px,transparent 1px 7px) padding-box,
  repeating-linear-gradient(-45deg,rgba(0,0,0,.028) 0 1px,transparent 1px 7px) padding-box,
  radial-gradient(115% 95% at 50% 42%, #3fae62 0%, #2f9c52 40%, #1f7a41 78%, #155b33 100%) padding-box,
  repeating-linear-gradient(90deg,rgba(0,0,0,.10) 0 3px,transparent 3px 9px) border-box,
  linear-gradient(180deg,#b5824a,#6b4520) border-box;
 box-shadow:inset 0 0 0 2px #4d3014, 0 18px 40px rgba(0,0,0,.45)}
/* masa + raylar + atık alanları + deste */
.ray.yatay{top:10px;left:50%;transform:translateX(-50%);width:220px;height:38px;flex-direction:row;justify-content:space-between;align-items:center;padding:0 14px;border-radius:8px}
.ray.yatay .ad{writing-mode:horizontal-tb;transform:none;flex:0 1 auto;letter-spacing:2px;font-size:15px}
.ray{position:absolute;top:70px;height:200px;width:38px;border-radius:10px;display:flex;flex-direction:column;align-items:center;padding:8px 0 7px;gap:4px;color:var(--krem);font-size:12px;font-weight:700;border:1px solid #4d3014;
 background:
  radial-gradient(140% 60% at 28% 8%, rgba(255,255,255,.28), transparent 46%),
  repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 2px,transparent 2px 6px),
  linear-gradient(90deg,#b5824a 0%,#9a6a36 45%,#6f4521 100%);
 box-shadow:0 8px 16px rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.25), inset 0 -3px 5px rgba(0,0,0,.35)}
.ray::before{content:"";position:absolute;inset:5px;border-radius:7px;background:linear-gradient(90deg,rgba(0,0,0,.18),rgba(255,255,255,.07) 50%,rgba(0,0,0,.22));box-shadow:inset 0 1px 2px rgba(0,0,0,.35);pointer-events:none}
.ray>span{position:relative}
.ray .ad{writing-mode:vertical-rl;transform:rotate(180deg);flex:1;display:flex;align-items:center;justify-content:center;letter-spacing:2px;font-size:15px}
#rayR .ad{transform:none}
#rayL{left:10px}
#rayR{right:10px}
.pad{position:absolute;width:64px;height:90px;border-radius:8px;background:var(--feltk);display:flex;align-items:center;justify-content:center}
.pad.alinabilir{outline:3px dashed #8fd6a8;outline-offset:3px;cursor:pointer}
.pad.hedef{outline:3px dashed #ffe08a;outline-offset:3px}
#pad2{left:18%;top:15%}
#pad1{right:18%;top:15%}
#pad3{left:18%;top:48%}
#pad0{right:18%;top:48%}
.ucan{position:absolute;z-index:75;border-radius:7%/5%;background-size:cover;box-shadow:0 8px 18px rgba(0,0,0,.45);pointer-events:none;will-change:transform;transition:transform .38s cubic-bezier(.3,.7,.35,1),opacity .16s ease .26s}
.ucan.arka{border:1px solid #b8a87f;background:radial-gradient(120% 80% at 50% 12%, rgba(255,255,255,.55), transparent 46%),linear-gradient(180deg,#fcf6e4,#efe2c2 52%,#d8c69d);box-shadow:inset 0 0 0 3px rgba(255,255,255,.5),0 10px 18px rgba(0,0,0,.32)}
#pile{position:absolute;top:calc(50% - 47px);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:15px;cursor:pointer}
#pileTas{width:64px;height:94px;border-radius:9px;border:1px solid #b8a87f;position:relative;
 background:
  radial-gradient(120% 80% at 50% 12%, rgba(255,255,255,.55), transparent 46%),
  linear-gradient(180deg,#fcf6e4 0%,#efe2c2 52%,#d8c69d 100%);
 box-shadow:inset 0 0 0 3px rgba(255,255,255,.55), inset 0 -7px 12px rgba(140,115,70,.30),
  0 5px 0 -1px #d9cba2, 0 10px 0 -2px #c2b389, 0 16px 22px rgba(0,0,0,.30)}
#pileTas::after{content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;transform:translate(-50%,-50%);border:2px solid #cdbb90;border-radius:50%;box-shadow:inset 0 0 0 3px rgba(255,255,255,.5)}
#pileSayi{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:16.5px;font-weight:900;color:#7a5a2a;pointer-events:none;text-shadow:0 1px 0 rgba(255,255,255,.55);z-index:1}
/* ıstaka + taşlar + çerçeveler */
#istaka{position:absolute;left:14px;right:14px;bottom:14px;border-radius:12px;border:1px solid #4d3014;
 background:
  repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 2px,transparent 2px 6px),
  repeating-linear-gradient(0deg,rgba(0,0,0,.05) 0 1px,transparent 1px 4px),
  linear-gradient(180deg,#b5824a 0%,#9a6a36 38%,#7a4f24 78%,#5f3c1b 100%);
 box-shadow:0 14px 26px rgba(0,0,0,.38), inset 0 2px 0 rgba(255,255,255,.18), inset 0 -3px 6px rgba(0,0,0,.35)}
#istaka::before,#istaka::after{content:"";position:absolute;top:0;bottom:0;width:12px;z-index:2;pointer-events:none;background:linear-gradient(90deg,#6b4520,#4f3115)}
#istaka::before{left:0;border-radius:11px 0 0 11px}
#istaka::after{right:0;border-radius:0 11px 11px 0;background:linear-gradient(270deg,#6b4520,#4f3115)}
.raf{position:absolute;left:12px;right:12px;border-radius:5px;z-index:0;pointer-events:none;
 background:linear-gradient(180deg,#ecc88f 0%,#c99e5e 18%,#8a5a2b 60%,#56351a 100%);
 box-shadow:0 3px 5px rgba(0,0,0,.45), inset 0 1px 0 #f6dcae}
.tas{position:absolute;z-index:3;will-change:transform;border-radius:7%/5%;background-size:cover;cursor:grab;touch-action:none;user-select:none;transition:left .18s,top .18s,box-shadow .15s;box-shadow:0 3px 6px rgba(0,0,0,.4)}
.tas.tutuldu{cursor:grabbing;z-index:60;box-shadow:0 12px 20px rgba(0,0,0,.5)}
.tas.otur{transition:left .18s,top .18s,transform .18s}
#cerceveler{position:absolute;inset:0;pointer-events:none;z-index:50}
.cer{position:absolute;border-radius:10px;border:3px solid}
.cer.m{border-color:var(--cm);box-shadow:0 0 10px rgba(176,106,224,.55)}
.cer.p{border-color:#4fc3f7;border-style:dashed;box-shadow:0 0 8px rgba(79,195,247,.45)}
.cer.ky{border-color:#39ff7a;box-shadow:0 0 16px rgba(57,255,122,.9),0 0 5px rgba(57,255,122,.7);animation:kyPop .42s ease-out}
@keyframes kyPop{0%{transform:scale(1.08);box-shadow:0 0 24px rgba(57,255,122,1)}100%{transform:scale(1)}}
.cer .rozet{position:absolute;top:-11px;right:-8px;font-size:11px;font-weight:700;background:var(--cm);color:#fff;border-radius:999px;padding:1px 7px}
#ipucu{position:absolute;left:0;top:0;will-change:transform;border:2px dashed rgba(255,255,255,.65);border-radius:9%/6%;background:rgba(255,255,255,.12);display:none;pointer-events:none;z-index:5}
/* paneller + düğmeler */
.panel{position:absolute;display:flex;flex-direction:column;gap:8px;z-index:4}
#benKart{background:linear-gradient(180deg,#0e6b35,#0a4d26);border:1px solid rgba(255,255,255,.16);border-radius:12px;color:#eaf6ed;padding:8px 10px;font-size:13px;font-weight:700;display:flex;flex-direction:column;gap:2px;box-shadow:0 4px 10px rgba(0,0,0,.3)}
#benKart small{font-weight:600;color:#ffd98a}
.yum{border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:9px 10px;font-size:12.5px;font-weight:700;color:#dff2e5;background:linear-gradient(180deg,#0e6b35,#0b522a);cursor:pointer;box-shadow:0 3px 8px rgba(0,0,0,.3);text-align:center}
.yum:active{transform:translateY(1px)}
#btnAc{background:linear-gradient(180deg,#ffe08a,#e8b21a);color:#3a2a05;opacity:.45;pointer-events:none}   /* koyu yazı: altın üstünde beyaz okunmuyordu */
#btnAc.hazir{opacity:1;pointer-events:auto;box-shadow:0 0 16px rgba(243,196,41,.75)}
.nabizRing{position:absolute;inset:-7px;border:3px solid rgba(243,196,41,.95);border-radius:inherit;pointer-events:none;opacity:0;z-index:8}
.aktif>.nabizRing{animation:nabiz 1.1s ease-in-out infinite}
@keyframes nabiz{0%,100%{opacity:1}50%{opacity:.15}}
.panel.mini{gap:5px}
.panel.mini .yum{padding:4px 5px;font-size:10px;border-radius:8px}
.panel.mini #benKart{padding:5px 7px;font-size:11px;gap:1px}
.panel.mini #benKart small{line-height:1.25}
.panel.mini #btnAc{white-space:nowrap;padding:7px 4px;font-size:11px}
#masa.kisa #pad2,#masa.kisa #pad1{top:5%}
#masa.kisa #pad3,#masa.kisa #pad0{top:42%}
#masa.kisa .pad{width:54px;height:76px}
#masa.kisa #pile{top:6%}
#masa.kisa #pileTas{width:54px;height:80px}
#masa.kisa .ray.yatay{top:6px;height:32px;width:170px}
/* modal (el sonu, defter, kurallar, sonuç) */
#modal{position:absolute;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:90}
#modalIc{background:#f7f2e4;border-radius:14px;padding:18px 22px;max-width:88%;max-height:84%;overflow:auto;color:#3a2e1a}
#modalIc h2{margin:0 0 10px;font-size:17px}
#modalIc .grupSatir{display:flex;gap:4px;align-items:center;margin:6px 0;flex-wrap:wrap}
.miniTas{width:26px;height:38px;border-radius:4px;background-size:cover;display:inline-block}
#modalIc .etiket{font-size:12px;color:#7a6332;margin-left:6px}
#modalIc button{margin-top:14px;font-size:13px;font-weight:600;border:none;border-radius:999px;padding:8px 18px;cursor:pointer;background:var(--plate);color:#fff}
#benKart .hbar{display:none}   /* ilerleme HER MODDA ıstaka üstü #yarisBar'da (ince bar gizli) */
/* YATAY telefon: ilerleme çubuğu KALKAR (atık alanlarını sıkıştırıyordu — Murat), puan sağ panelde BÜYÜK */
#masa.yatay #yarisBar{display:none}
.puanBuyuk{display:none;font-size:22px;font-weight:900;color:#ffd98a;text-align:center;letter-spacing:.5px;line-height:1.15;text-shadow:0 1px 2px rgba(0,0,0,.6)}
#masa.yatay .puanBuyuk{display:block}
/* Belirgin ilerleme çubuğu — BEN için, ıstaka üstünde, her modda */
#yarisBar{position:absolute;display:flex;z-index:60;align-items:center;gap:9px;padding:5px 11px;border-radius:13px;
  background:linear-gradient(180deg,rgba(58,42,12,.86),rgba(40,28,8,.86));border:1.5px solid rgba(243,196,41,.5);
  box-shadow:0 5px 14px rgba(0,0,0,.4)}
#yarisBarAd{color:#ffe9ad;font-weight:800;font-size:13.5px;white-space:nowrap;max-width:120px;overflow:hidden;text-overflow:ellipsis}
.ybTrack{position:relative;flex:1;height:23px;border-radius:12px;background:rgba(0,0,0,.42);overflow:hidden}
#yarisBarFill{display:block;height:100%;width:0;border-radius:12px;background:linear-gradient(90deg,#ffd98a,#f3c429);transition:width .45s cubic-bezier(.3,.7,.35,1)}
#yarisBarPuan{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:16.5px;font-weight:900;letter-spacing:.5px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.85),0 0 4px rgba(0,0,0,.6)}
.yarisDefter .kd{background:#efe3c4;color:#5a4a22;border:1px solid #d9c79a;border-radius:7px;padding:3px 8px;font-size:12px;font-weight:600;white-space:nowrap}
.yarisDefter .kd b{color:#9c7208;margin-left:2px}
.yarisDefter .kd.jk{background:linear-gradient(180deg,#fff3cf,#ffe19a);border-color:#e0b94a}
.yarisDefter.bos{color:#9b8a63;font-size:12px;font-weight:400}
#gecmis{position:absolute;background:#f7f2e4;border-radius:10px;padding:8px 10px;font-size:12px;color:#3a2e1a;display:none;z-index:80;box-shadow:0 6px 18px rgba(0,0,0,.35);max-width:220px}
#btnIpucu b{font-size:14px}
#btnIpucu:disabled{opacity:.45;pointer-events:none}
/* 💡 kelime fikri kartı */
#ipucuKart{position:absolute;display:none;z-index:82;background:#f7f2e4;border-radius:12px;padding:10px 14px;color:#3a2e1a;box-shadow:0 10px 26px rgba(0,0,0,.45);max-width:360px;cursor:pointer}
#ipucuKart .baslik{font-size:13px;font-weight:800;color:#3a2e1a;margin-bottom:7px}
#ipucuKart .baslik b{color:#9c7208}
#ipucuKart .taslar{display:flex;gap:3px;align-items:center;flex-wrap:wrap}
#ipucuKart .eksikTas{outline:2px dashed #d9a514;outline-offset:2px;border-radius:4px;opacity:.42;filter:grayscale(.25)}
#ipucuKart .not{font-size:11px;color:#7a6332;margin-top:7px}
/* Bul penceresi (konum/boy sayfada) */
#anlamPop .kapat{position:absolute;top:8px;right:10px;border:none;background:rgba(0,0,0,.08);border-radius:50%;width:30px;height:30px;font-size:15px;cursor:pointer;color:#555}
#anlamPop ol{margin:8px 0 0;padding-left:22px}
#anlamPop li{margin:5px 0;font-size:15px;line-height:1.5}
#anlamPop .yok{color:#a07b3a;font-size:15px;margin-top:10px}
#anlamPop .kaynak{margin-top:12px;font-size:11px;color:#aaa;text-align:right}
.hbar{display:block;background:rgba(0,0,0,.38);border-radius:2px;overflow:hidden}
.hbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffd98a,#f3c429);transition:width .4s}
.ray .hbar{position:absolute;left:50%;transform:translateX(-50%);bottom:3px;width:24px;height:3px;z-index:1}
.ray.yatay .hbar{width:56px;bottom:2px}
#modalIc .kupa{font-size:21px;margin:0 0 6px}
.mSatir{display:flex;align-items:center;gap:8px;margin:4px 0;font-size:13px}
.mSatir.ben .mAd{color:#0e6b35}
.mBar{flex:1;height:8px;border-radius:4px;background:#e4d9bd;overflow:hidden;min-width:90px}
.mBar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#2f9c52,#0e6b35);border-radius:4px}
.mSatir b{min-width:82px;text-align:right;white-space:nowrap}
:focus-visible{outline:2px solid #ffd98a !important;outline-offset:2px}   /* klavye odağı görünür */
/* Telefon: masa ölçeklenmez, arayüz ekranla orantılı küçülür */
@media (max-width:700px){
 #modalIc{padding:13px 15px;max-width:90%;border-radius:12px}
 #modalIc h2{font-size:14px;margin:0 0 7px}
 #modalIc .kupa{font-size:16px;margin:0 0 5px}
 #modalIc .grupSatir{gap:3px;margin:4px 0}
 #modalIc button{margin-top:10px;padding:7px 15px;font-size:12px}
 .mSatir{font-size:11.5px;gap:6px;margin:3px 0}
 .mSatir b{min-width:64px}
 #masa{width:100vw;height:100vh;height:100dvh;border:none;border-radius:0}
 #istaka{left:6px;right:6px;bottom:8px;border-radius:8px}
 .panel.yatayP{flex-direction:row;flex-wrap:wrap}
 .panel.yatayP #benKart{width:100%;flex-direction:row;gap:10px;justify-content:space-between}
 .panel.yatayP .yum{flex:1;padding:7px 4px;font-size:11px}
 .ray.yatay{width:172px}
}
/* Yatay telefon (geniş ama kısa): modal iyice küçülür, ekrana sığar */
@media (max-height:540px){
 #modalIc{padding:10px 14px;max-width:74%;max-height:92%;border-radius:11px}
 #modalIc h2{font-size:13px;margin:0 0 5px}
 #modalIc .kupa{font-size:15px;margin:0 0 4px}
 #modalIc .grupSatir{gap:2px;margin:3px 0}
 #modalIc button{margin-top:8px;padding:6px 16px;font-size:12px}
 .mSatir{font-size:11px;gap:5px;margin:2px 0}
 .mSatir b{min-width:62px}
}
@media (prefers-reduced-motion:reduce){
 .aktif>.nabizRing{animation:none;opacity:1}
}