body.oyunSayfa{background:#1b1446}
.oAlan{overflow:hidden}
.skKap{position:absolute;inset:0;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;
  background:radial-gradient(ellipse 80% 55% at 50% 108%,#ff9a7a 0%,#c8508a 28%,transparent 62%),
             radial-gradient(ellipse 70% 50% at 85% 10%,#5a3fc0 0%,transparent 60%),
             linear-gradient(180deg,#0d0a2c 0%,#221a5e 45%,#4a2a7e 75%,#7a3a86 100%)}
#skCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:pointer}

/* üst panel */
.skUst{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:8px;padding:8px 10px;z-index:3;pointer-events:none}
.skUst>*{pointer-events:auto}
.skBolum{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:66px;padding:4px 10px 3px;border-radius:14px;border:2px solid #ffffff2a;background:linear-gradient(180deg,#ff6a4d,#c92446);color:#fff;cursor:pointer;font-family:inherit;box-shadow:0 4px 0 #0005,0 6px 18px #e8364a55}
.skBolum small{font:800 10px Nunito,sans-serif;text-transform:uppercase;letter-spacing:.6px;opacity:.85;line-height:1.1}
.skBolum b{font:800 24px 'Baloo 2',Nunito,sans-serif;line-height:1}
.skBolum i{font:700 9.5px Nunito,sans-serif;font-style:normal;opacity:.8;letter-spacing:.3px;line-height:1.2}
.skBolum:active{transform:translateY(2px);box-shadow:0 2px 0 #0005}
.skSayac{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:76px;padding:4px 12px;border-radius:14px;background:#0d0a2ccc;border:1px solid #ffffff22;backdrop-filter:blur(4px)}
.skSayac small{font:800 10px Nunito,sans-serif;color:#c9c0ff;text-transform:uppercase;letter-spacing:.6px;line-height:1.1}
.skSayac b{font:800 24px 'Baloo 2',Nunito,sans-serif;color:#fff;line-height:1}
.skSayac span{font:800 11px Nunito,sans-serif;color:#ffd23f;white-space:nowrap;line-height:1.3}
.skSayac span u{text-decoration:none;color:#ffffff40}
.skAraclar{margin-left:auto;display:flex;gap:6px}
.skArac{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:52px;height:50px;border-radius:14px;border:2px solid #5a4fc0;background:#2a2366e6;color:#fff;font-size:21px;line-height:1.05;cursor:pointer;font-family:inherit;padding:0}
.skArac small{font:800 10px Nunito,sans-serif;color:#d8d2ff;white-space:nowrap}
.skArac.reklamli{background:linear-gradient(180deg,#8064ff,#5131d6);border-color:#a993ff}
.skArac.reklamli::after{content:'▶';position:absolute;top:-7px;right:-5px;background:#ffd23f;color:#3a2600;font-size:9px;border-radius:8px;padding:1px 5px;line-height:1.4}
.skArac.parla{animation:skParla 1.2s ease-in-out infinite}
.skArac:disabled{opacity:.4;cursor:not-allowed}
.skArac:active{transform:translateY(2px)}
@keyframes skParla{0%,100%{box-shadow:0 0 0 0 #ffd23f00}50%{box-shadow:0 0 0 5px #ffd23f88}}

/* ipucu şeridi */
.skSerit{position:absolute;left:50%;top:66px;transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:#0d0a2ce6;border:2px solid #ffd23f;z-index:3;box-shadow:0 6px 20px #0008}
.skSerit em{font:800 12px Nunito,sans-serif;color:#ffd23f;font-style:normal;margin-right:2px}
.skSerit b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#ffffff14;color:#fff;font-size:17px;line-height:1}
.skSerit b i{display:block;font-style:normal;line-height:0;transition:transform .2s}
.skSerit b.simdi{background:#ffd23f;color:#3a2600;box-shadow:0 0 12px #ffd23faa}

/* yeni karo ipucu balonu */
.skBalon{position:absolute;left:50%;bottom:184px;transform:translateX(-50%);width:min(380px,calc(100% - 24px));display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:18px;background:linear-gradient(180deg,#fffaf0,#ffe9c9);color:#2a1b3d;z-index:4;box-shadow:0 10px 30px #000a;cursor:pointer;animation:skBalonGel .35s cubic-bezier(.2,1.4,.5,1)}
.skBalon .s{flex:0 0 46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:26px;box-shadow:inset 0 -3px 0 #0002}
.skBalon>div>b{display:block;font:800 16px 'Baloo 2',Nunito,sans-serif;color:#c92446;line-height:1.2}
.skBalon p{margin:2px 0 0;font-size:13.5px;line-height:1.35}
.skBalon small{display:block;margin-top:3px;font-size:11px;color:#8a6b7a;font-weight:700}
@keyframes skBalonGel{from{opacity:0;transform:translate(-50%,24px) scale(.9)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
.skKap:not(.dokunmatik) .skBalon{left:16px;bottom:62px;transform:none;animation-name:skBalonGel2}
@keyframes skBalonGel2{from{opacity:0;transform:translateY(24px) scale(.9)}to{opacity:1;transform:none}}

/* düşme yazısı */
.skDus{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%) scale(.6);font:900 38px 'Baloo 2',Nunito,sans-serif;color:#fff;text-shadow:0 4px 0 #c92446,0 8px 24px #000a;opacity:0;pointer-events:none;z-index:3;white-space:nowrap;transition:opacity .2s,transform .25s cubic-bezier(.2,1.5,.5,1)}
.skDus.goster{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* alt: yön düğmeleri */
.skAlt{position:absolute;left:0;right:0;bottom:0;z-index:3;pointer-events:none;display:flex;align-items:flex-end;justify-content:center;padding:10px 12px 14px;gap:14px}
.skAlt>*{pointer-events:auto}
.skPad{position:relative;width:156px;height:156px;flex:0 0 auto}
.skPad button{position:absolute;width:56px;height:56px;border-radius:16px;border:2px solid #ffffff33;background:radial-gradient(circle at 50% 30%,#ffffff2a,#ffffff0a),#2a2366d0;color:#fff;font-size:20px;cursor:pointer;box-shadow:0 4px 0 #0006;backdrop-filter:blur(3px);touch-action:none}
.skPad button:active,.skPad button.bas{transform:translateY(2px);box-shadow:0 2px 0 #0006;background:#ff6a4d}
.skPad .u{left:50px;top:0}.skPad .d{left:50px;bottom:0}.skPad .l{left:0;top:50px}.skPad .r{right:0;top:50px}
.skDegis{align-self:center;height:52px;padding:0 16px;border-radius:16px;border:2px solid #7ee0ff;background:linear-gradient(180deg,#4a7dff,#2a4fd0);color:#fff;font:800 15px Nunito,sans-serif;cursor:pointer;box-shadow:0 4px 0 #0006}
.skDegis:active{transform:translateY(2px)}
.skDegis.parla{animation:skParla 1.2s ease-in-out infinite}
.skKlavye{margin:0 auto 0 0;align-self:flex-end;font-size:13px;font-weight:700;color:#d8d2ffcc;background:#0d0a2c99;padding:6px 12px;border-radius:12px}
.skKap.dokunmatik .skKlavye{display:none}
.skKap:not(.dokunmatik) .skAlt{justify-content:flex-end}
.skKap:not(.dokunmatik) .skPad{transform:scale(.82);transform-origin:100% 100%}

/* bölüm haritası ve modallar */
.skHarita{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:6px;max-height:52vh;overflow:auto;padding:4px}
.skHarita button{display:flex;flex-direction:column;align-items:center;font-family:inherit;border-radius:12px;border:2px solid #3a3180;background:#231c5c;color:#fff;padding:5px 0 3px;cursor:pointer}
.skHarita button b{font:800 17px Nunito,sans-serif;line-height:1.2}
.skHarita button i{font-style:normal;font-size:11px;color:#ffd23f;letter-spacing:-1px;line-height:1.2;min-height:13px}
.skHarita button i u{text-decoration:none;color:#ffffff30}
.skHarita button.gecti{background:#2b2470;border-color:#7d6bff}
.skHarita button.atlandi i{color:#9aa5c9;letter-spacing:0}
.skHarita button.siradaki{background:#6a2350;border-color:#ff6a4d;box-shadow:0 0 12px #ff6a4d66}
.skHarita button.simdi{outline:2px solid #fff;outline-offset:1px}
.skHarita button:disabled{opacity:.35;cursor:not-allowed}
.skYildizlar{display:flex;justify-content:center;gap:6px;margin:0 0 4px}
.skY{font-size:46px;line-height:1;color:#ffffff22;transform:scale(.3);opacity:0;animation:skY .5s cubic-bezier(.2,1.6,.5,1) forwards}
.skY.dolu{color:#ffd23f;text-shadow:0 0 16px #ffd23f99}
.skY:nth-child(2){font-size:58px;margin-top:-10px}
@keyframes skY{to{transform:scale(1);opacity:1}}
.skKarolar{display:grid;grid-template-columns:1fr;gap:7px;text-align:left;margin:8px 0}
.skKarolar div{display:flex;gap:10px;align-items:center;font-size:14px;line-height:1.35}
.skKarolar .s,.skBalon .s{flex:0 0 34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:18px;color:#2a1b3d;font-weight:900;box-shadow:inset 0 -3px 0 #0003}
.skBalon .s{flex-basis:46px;height:46px;font-size:24px}
.s.normal{background:linear-gradient(135deg,#e7e9fb,#c4c8ee)}
.s.kirilgan{background:linear-gradient(135deg,#ffb25a,#f07a22)}
.s.yumusak{background:linear-gradient(135deg,#e7e9fb,#c4c8ee);color:#d9a400}
.s.agir{background:linear-gradient(135deg,#e7e9fb,#c4c8ee);color:#d9a400}
.s.kopru{background:linear-gradient(135deg,#e9fbff,#b9dbe8);border:3px solid #3fd3c8}
.s.bolucu{background:linear-gradient(135deg,#7ee0ff,#4a7dff);color:#fff}
.s.hedef{background:radial-gradient(circle,#150a2e 0 38%,#9da2e0 40%);}
.s.etki{background:linear-gradient(135deg,#e7e9fb,#c4c8ee);font-size:13px}
.skKod{font-size:12px;color:#9aa5c9;margin:-4px 0 6px}
@media (max-width:520px){
  .skUst{padding:6px 6px;gap:5px}
  .skBolum{min-width:56px;padding:3px 7px 2px}
  .skBolum b{font-size:21px}
  .skSayac{min-width:64px;padding:3px 8px}
  .skSayac b{font-size:21px}
  .skArac{width:46px;height:46px;font-size:19px;border-radius:12px}
  .skAraclar{gap:5px}
  .skSerit{top:62px}
}
@media (max-width:370px){ .skArac{width:41px} .skArac small{font-size:9px} }