/* Bütün oyunlarda ortak: çentik/gezinme çubuğu boşlukları, kaydırma ve yakınlaştırma kilidi */
:root{
  --sat: max(env(safe-area-inset-top, 0px), var(--safe-area-inset-top, 0px));
  --sab: max(env(safe-area-inset-bottom, 0px), var(--safe-area-inset-bottom, 0px));
}
*,*::before,*::after{box-sizing:border-box}
html{height:100%;padding-top:var(--sat);padding-bottom:var(--sab);overscroll-behavior:none}
body{margin:0;height:100%;font-size:14px;overscroll-behavior:none;-webkit-touch-callout:none;-webkit-text-size-adjust:100%;touch-action:manipulation}
img{max-width:100%}
[hidden]{display:none!important}
.app-sound{background:none;border:0;padding:0;cursor:pointer;color:inherit;display:inline-flex;align-items:center;justify-content:center}
.app-sound svg{width:20px;height:20px}
.app-lang{font:800 .8rem/1 system-ui,sans-serif;letter-spacing:.04em;cursor:pointer}
/* İlk açılış dil seçimi: her oyunun renginden bağımsız, nötr bir kart */
.app-langpick{position:fixed;inset:0;z-index:1000;background:rgba(10,12,20,.82);display:flex;align-items:center;justify-content:center;padding-inline:24px}
.app-langcard{background:#fbfaf7;color:#1d2230;border-radius:22px;padding:26px 22px;width:100%;max-width:320px;display:flex;flex-direction:column;gap:12px;text-align:center;font-family:Nunito,system-ui,sans-serif;box-shadow:0 20px 50px rgba(0,0,0,.45)}
.app-langtitle{font-size:1.45rem;font-weight:800;line-height:1.2;margin-bottom:6px}
.app-langtitle span{font-size:1rem;font-weight:700;color:#6a7080}
.app-langcard button{border:0;border-radius:14px;padding:15px;font:800 1.1rem Nunito,system-ui,sans-serif;cursor:pointer;background:#ece9e1;color:#1d2230}
.app-langcard button.pref{background:#1d2230;color:#fbfaf7}
/* Oynayarak öğretme katmanı: dokunuşları engellemez */
.cc-root{position:fixed;inset:0;z-index:900;pointer-events:none}
.cc-ring{position:fixed;border-radius:14px;box-shadow:0 0 0 3px #fff,0 0 22px 6px rgba(255,255,255,.55);animation:cc-pulse 1.4s ease-in-out infinite;transition:all .25s}
.cc-ring.dim{box-shadow:0 0 0 3px #fff,0 0 0 9999px rgba(5,8,18,.45),0 0 22px 6px rgba(255,255,255,.55)}
@keyframes cc-pulse{50%{outline:3px solid rgba(255,255,255,.5);outline-offset:4px}}
.cc-hand{position:fixed;left:0;top:0;width:0;height:0}
.cc-hand i{position:absolute;left:-20px;top:-20px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 4px 14px rgba(0,0,0,.45),inset 0 0 0 4px rgba(0,0,0,.08)}
.cc-hand i::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:3px solid #fff;opacity:0}
.cc-tap{animation:cc-tap 1.3s ease-in-out infinite;transform:translate(var(--sx),var(--sy))}
.cc-tap i::after{animation:cc-ripple 1.3s ease-out infinite}
@keyframes cc-tap{0%,100%{transform:translate(var(--sx),calc(var(--sy) + 26px))}45%,60%{transform:translate(var(--sx),var(--sy))}}
@keyframes cc-ripple{0%,45%{opacity:0;transform:scale(.6)}55%{opacity:1}100%{opacity:0;transform:scale(1.6)}}
.cc-drag{animation:cc-drag 2s cubic-bezier(.45,0,.3,1) infinite}
@keyframes cc-drag{0%{transform:translate(var(--sx),var(--sy));opacity:0}12%{opacity:1;transform:translate(var(--sx),var(--sy)) scale(.85)}70%{transform:translate(var(--ex),var(--ey)) scale(.85);opacity:1}85%,100%{transform:translate(var(--ex),var(--ey));opacity:0}}
.cc-hold{transform:translate(var(--sx),var(--sy))}
.cc-hold i::after{animation:cc-hold 1.8s ease-out infinite}
@keyframes cc-hold{0%{opacity:0;transform:scale(.5)}20%{opacity:1}100%{opacity:0;transform:scale(2.6)}}
.cc-bubble{position:fixed;left:16px;right:16px;bottom:calc(var(--sab) + 24px);margin-inline:auto;max-width:420px;background:#fff;color:#141a2a;border-radius:16px;padding:14px 16px;
  font:700 1rem/1.4 Nunito,system-ui,sans-serif;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.4);animation:cc-in .3s ease-out}
.cc-bubble.cc-top{bottom:auto;top:calc(var(--sat) + 16px)}
.cc-bubble b{color:#d9480f}
@keyframes cc-in{from{opacity:0;transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){.cc-hand,.cc-hand i::after,.cc-ring{animation:none!important}}
/* Rozetler: kazanınca inen bildirim ve rozet listesi; oyunların renginden bağımsız nötr kart */
.bd-medal{flex:none;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;font-style:normal;font-size:1.1rem;color:#8a8f9c;background:#e6e3dc;box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}
.bd-medal.on{color:#7a4b00;background:radial-gradient(circle at 35% 30%, #ffe9a6, #f2b632 70%);box-shadow:inset 0 -3px 0 rgba(0,0,0,.15),0 0 0 3px #fff3c4}
.bd-toast{position:fixed;left:50%;top:calc(var(--sat) + 14px);transform:translateX(-50%);z-index:960;display:flex;align-items:center;gap:12px;background:#fbfaf7;color:#1d2230;
  border-radius:18px;padding:10px 18px 10px 10px;box-shadow:0 12px 30px rgba(0,0,0,.4);font-family:Nunito,system-ui,sans-serif;animation:bd-in 3.2s ease forwards;max-width:calc(100% - 32px)}
.bd-toast small{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#8a6a1a;font-weight:800}
.bd-toast b{font-size:1rem}
@keyframes bd-in{0%{opacity:0;transform:translate(-50%,-20px)}10%,85%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-10px)}}
.bd-panel{position:fixed;inset:0;z-index:950;background:rgba(10,12,20,.78);display:flex;align-items:center;justify-content:center;padding-inline:16px}
.bd-card{background:#fbfaf7;color:#1d2230;border-radius:22px;padding:18px;width:100%;max-width:380px;max-height:82vh;display:flex;flex-direction:column;gap:12px;font-family:Nunito,system-ui,sans-serif}
.bd-head{font-size:1.3rem;font-weight:800;display:flex;justify-content:space-between;align-items:baseline}
.bd-head span{font-size:.95rem;color:#6a7080}
.bd-list{overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.bd-row{display:flex;align-items:center;gap:12px;padding:8px;border-radius:14px;background:#f1eee7;opacity:.7}
.bd-row.on{opacity:1;background:#fff6d8}
.bd-row b{display:block;font-size:.98rem}
.bd-row small{display:block;font-size:.82rem;color:#5d6475;line-height:1.35}
.bd-close{border:0;border-radius:14px;padding:13px;background:#1d2230;color:#fbfaf7;font:800 1rem Nunito,system-ui,sans-serif;cursor:pointer}
.bd-link{align-self:center;border:0;background:none;color:inherit;opacity:.75;font:800 .9rem Nunito,system-ui,sans-serif;padding:6px 10px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.bd-set{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.bd-set button{border:0;border-radius:12px;padding:10px 4px;background:#ece9e1;color:#1d2230;font:800 .88rem Nunito,system-ui,sans-serif;cursor:pointer}
/* Koleksiyon uygulamasında oyunun içindeki ana ekran düğmesi */
.app-home{display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.app-home-float{position:fixed;left:12px;top:calc(var(--sat) + 10px);z-index:50;width:36px;height:36px;border:0;border-radius:12px;background:rgba(0,0,0,.35);color:#fff}
/* Sayfa geçişleri (koleksiyonda ana ekran ↔ oyun): tarayıcı yeni sayfayı hazır olunca kısa bir solma ve yaklaşmayla gösterir, beyaz ekran yanıp sönmez */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .14s ease-in both}
::view-transition-new(root){animation:vt-in .22s cubic-bezier(.2,.8,.3,1) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:scale(.975)}}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}
/* Günlük sonuç paylaşımı, hatırlatma ve diğer oyunlar (ayarlar paneli) */
.bd-share{border:0;border-radius:14px;padding:12px;background:#ffffff;color:#1d2230;font:800 .98rem Nunito,system-ui,sans-serif;cursor:pointer;box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}
.bd-rem{border:0;border-radius:12px;padding:10px;background:#ece9e1;color:#1d2230;font:800 .88rem Nunito,system-ui,sans-serif;cursor:pointer}
.bd-more{display:flex;flex-direction:column;gap:6px}
.bd-more small{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#6a7080;font-weight:800}
.bd-more div{display:flex;flex-wrap:wrap;gap:6px}
.bd-more button{border:0;border-radius:999px;padding:7px 11px;background:#f1eee7;color:#1d2230;font:700 .8rem Nunito,system-ui,sans-serif;cursor:pointer}
.bd-more button.all{background:#1d2230;color:#fbfaf7}
.app-toast{position:fixed;left:50%;bottom:calc(var(--sab, 0px) + 24px);transform:translateX(-50%);background:#1d2230;color:#fbfaf7;padding:10px 16px;border-radius:14px;font:800 .9rem Nunito,system-ui,sans-serif;z-index:1000;animation:bd-in 2.4s ease forwards}
/* Nasıl oynanır: adım adım animasyonlu anlatım */
.hw-ov{position:fixed;inset:0;z-index:960;background:rgba(10,12,20,.82);display:flex;align-items:center;justify-content:center;padding-inline:16px;animation:hw-in .2s ease-out}
@keyframes hw-in{from{opacity:0}}
.hw-card{background:#fbfaf7;color:#1d2230;border-radius:24px;width:100%;max-width:380px;overflow:hidden;display:flex;flex-direction:column;font-family:Nunito,system-ui,sans-serif;box-shadow:0 20px 50px rgba(0,0,0,.45);touch-action:pan-y}
.hw-art{aspect-ratio:200/140;display:flex}
.hw-art svg{width:100%;height:100%;display:block}
.hw-body{padding:16px 20px 4px;display:flex;flex-direction:column;gap:6px;min-height:118px}
.hw-body small{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:#6a7080;font-weight:800}
.hw-body h3{margin:0;font-size:1.3rem;font-weight:800;line-height:1.15}
.hw-body p{margin:0;line-height:1.45;color:#3b4252;font-size:.98rem}
.hw-dots{display:flex;justify-content:center;gap:7px;padding:8px 0 4px}
.hw-dots i{width:8px;height:8px;border-radius:50%;background:#d8d4ca;cursor:pointer;transition:width .2s}
.hw-dots i.on{width:22px;border-radius:4px;background:#1d2230}
.hw-btns{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;padding:10px 16px 16px}
.hw-btns button{border:0;border-radius:14px;padding:13px;font:800 1rem Nunito,system-ui,sans-serif;cursor:pointer}
.hw-skip{background:#ece9e1;color:#1d2230}
.hw-next{background:#1d2230;color:#fbfaf7}
.bd-how{border:0;border-radius:14px;padding:12px;background:#1d2230;color:#fbfaf7;font:800 .98rem Nunito,system-ui,sans-serif;cursor:pointer}
.app-menu{display:inline-flex;align-items:center;justify-content:center}
@media (prefers-reduced-motion:reduce){.hw-art *{animation-duration:0s!important}}
/* Hedef şeridi: oyunun amacı tek cümle, dokununca "Ne yapmalıyım?" */
.app-goal{display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;border:0;border-radius:12px;padding:7px 10px;margin:0;
  background:rgba(255,255,255,.08);color:inherit;font:700 .84rem/1.3 Nunito,system-ui,sans-serif;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.app-goal i{flex:none;display:flex;opacity:.8}
.app-goal span{flex:1;min-width:0}
.app-goal span b{font-weight:900}
.app-goal > b{flex:none;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.16);font-size:.78rem}
.app-goal.fresh{animation:gl-fresh 1.6s ease-out}
@keyframes gl-fresh{0%{box-shadow:0 0 0 0 rgba(255,214,110,.0);background:rgba(255,214,110,.35)}40%{box-shadow:0 0 0 4px rgba(255,214,110,.35)}100%{box-shadow:0 0 0 0 rgba(255,214,110,0)}}
html.light-ui .app-goal{background:rgba(31,48,54,.08)}
html.light-ui .app-goal > b{background:rgba(31,48,54,.12)}
.gl-card{gap:12px}
.gl-goal{background:#fff6d8;border-radius:14px;padding:10px 12px}
.gl-goal small{display:block;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:#8a6a1a;font-weight:800}
.gl-goal p{margin:2px 0 0;font-weight:800;line-height:1.35}
.gl-rules{display:flex;flex-direction:column;gap:8px;overflow-y:auto;max-height:36vh}
.gl-rules div{display:flex;flex-direction:column;gap:1px;padding:6px 2px;border-bottom:1px solid #ece9e1}
.gl-rules b{font-size:.92rem}
.gl-rules span{font-size:.86rem;color:#4b5263;line-height:1.4}
.gl-btns{display:grid;grid-auto-flow:column;gap:8px}
.gl-btns button{border:0;border-radius:12px;padding:11px 8px;background:#ece9e1;color:#1d2230;font:800 .9rem Nunito,system-ui,sans-serif;cursor:pointer}
.gl-btns .gl-hint{background:#ffc857;color:#3a2600}
.gl-nudge{position:fixed;left:50%;transform:translateX(-50%);z-index:900;display:flex;align-items:center;gap:8px;width:max-content;max-width:calc(100vw - 32px);box-sizing:border-box;
  background:#fbfaf7;color:#1d2230;border-radius:14px;padding:8px 8px 8px 14px;box-shadow:0 10px 30px rgba(0,0,0,.35);font:800 .88rem Nunito,system-ui,sans-serif;animation:gl-in .3s ease-out}
.gl-nudge span{flex:1}
.gl-nudge button{border:0;border-radius:10px;padding:8px 12px;background:#ffc857;color:#3a2600;font:800 .88rem Nunito,system-ui,sans-serif;cursor:pointer}
.gl-nudge button.x{background:transparent;color:#6a7080;padding:6px 8px;font-size:1.1rem}
@keyframes gl-in{from{opacity:0;transform:translate(-50%,-8px)}}