/* WO — WeIdeas Oyun arayüzü v1.0.0 · tokenları oyuna göre :root'ta ezin (WO.temaUygula da kullanılabilir) */
:root {
  --wo-ana: #ffb703;          /* birincil düğme */
  --wo-ana-koyu: #c77d00;
  --wo-ikincil: #4cc9f0;
  --wo-ikincil-koyu: #1f8fb8;
  --wo-tehlike: #ef476f;
  --wo-basari: #06d6a0;
  --wo-yuzey: #ffffff;
  --wo-yuzey-2: #f3f5fb;
  --wo-murekkep: #1d2340;     /* metin */
  --wo-murekkep-2: #5b6386;
  --wo-cerceve: #1d2340;
  --wo-golge: 0 6px 0 rgba(20, 24, 50, .25), 0 14px 28px rgba(20, 24, 50, .25);
  --wo-yaricap: 18px;
  --wo-baslik-font: "Baloo 2", "Fredoka", "Nunito", system-ui, sans-serif;
  --wo-govde-font: "Nunito", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wo-guvenli-ust: env(safe-area-inset-top, 0px);
  --wo-guvenli-alt: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; user-select: none; -webkit-user-select: none; font-family: var(--wo-govde-font); color: var(--wo-murekkep); background: #10142a; }
button { font: inherit; }

/* ── ekranlar: yalnızca aktif olan görünür, yumuşak giriş ── */
.wo-ekran { position: fixed; inset: 0; display: none; }
.wo-ekran.wo-ekran-aktif { display: block; animation: wo-giris .32s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes wo-giris { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.wo-tuval-kap { position: absolute; inset: 0; }
.wo-tuval-kap canvas { display: block; width: 100%; height: 100%; }

/* ── düğmeler: basılınca çöken 3B görünüm ── */
.wo-btn {
  --r: var(--wo-yuzey); --rk: #c9cfe2; --m: var(--wo-murekkep);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  min-height: 52px; padding: 0 22px; border: 3px solid var(--wo-cerceve); border-radius: var(--wo-yaricap);
  background: linear-gradient(180deg, color-mix(in srgb, var(--r) 82%, #fff) 0%, var(--r) 55%, color-mix(in srgb, var(--r) 88%, #000) 100%);
  color: var(--m); font-family: var(--wo-baslik-font); font-weight: 800; font-size: 19px; letter-spacing: .3px;
  box-shadow: 0 6px 0 var(--rk), 0 6px 0 3px var(--wo-cerceve), 0 14px 22px rgba(0, 0, 0, .28);
  transform: translateY(0); transition: transform .08s, box-shadow .08s; cursor: pointer; touch-action: manipulation;
}
.wo-btn::after { content: ""; position: absolute; left: 10%; right: 10%; top: 5px; height: 34%; border-radius: 999px; background: rgba(255, 255, 255, .45); pointer-events: none; }
.wo-btn:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--rk), 0 1px 0 3px var(--wo-cerceve), 0 4px 8px rgba(0, 0, 0, .25); }
.wo-btn.birincil { --r: var(--wo-ana); --rk: var(--wo-ana-koyu); --m: #3a2500; }
.wo-btn.ikincil { --r: var(--wo-ikincil); --rk: var(--wo-ikincil-koyu); --m: #04263a; }
.wo-btn.tehlike { --r: var(--wo-tehlike); --rk: #a3203f; --m: #fff; }
.wo-btn.buyuk { min-height: 66px; font-size: 26px; padding: 0 34px; }
.wo-btn.yuvarlak { width: 56px; min-height: 56px; padding: 0; border-radius: 50%; font-size: 24px; }
.wo-btn:disabled { filter: grayscale(.8) brightness(.9); pointer-events: none; }
.wo-btn.nabiz { animation: wo-nabiz 1.4s ease-in-out infinite; }
@keyframes wo-nabiz { 50% { transform: scale(1.05); } }

/* ── paneller ── */
.wo-panel { background: var(--wo-yuzey); border: 3px solid var(--wo-cerceve); border-radius: calc(var(--wo-yaricap) + 6px); box-shadow: var(--wo-golge); padding: 20px; }
.wo-baslik { font-family: var(--wo-baslik-font); font-weight: 800; margin: 0; line-height: 1.05; color: #fff; text-align: center;
  -webkit-text-stroke: 6px var(--wo-cerceve); paint-order: stroke fill; text-shadow: 0 5px 0 var(--wo-cerceve), 0 10px 18px rgba(0, 0, 0, .35); }
.wo-panel .wo-baslik { color: var(--wo-ana); }
.wo-alt { color: var(--wo-murekkep-2); text-align: center; font-weight: 700; }
.wo-dugmeler { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.wo-dugmeler.dikey { flex-direction: column; align-items: stretch; }
.wo-rozet { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--wo-tehlike); color: #fff; font-size: 13px; letter-spacing: .5px; animation: wo-nabiz 1s infinite; }

/* ── HUD (oyun üstü) ── */
.wo-hud { position: absolute; left: 0; right: 0; top: 0; padding: calc(10px + var(--wo-guvenli-ust)) 12px 0; display: flex; gap: 8px; align-items: center; pointer-events: none; z-index: 5; }
.wo-hud > * { pointer-events: auto; }
.wo-hap { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px 0 6px; border-radius: 999px; background: rgba(15, 20, 45, .72); border: 2px solid rgba(255, 255, 255, .18); color: #fff; font-family: var(--wo-baslik-font); font-weight: 800; font-size: 20px; backdrop-filter: blur(6px); box-shadow: 0 4px 10px rgba(0, 0, 0, .25); }
.wo-hap i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 18px; background: radial-gradient(circle at 35% 30%, #fff6c4, var(--wo-ana) 60%, var(--wo-ana-koyu)); border: 2px solid var(--wo-cerceve); }
.wo-bosluk { flex: 1; }
.wo-zipla { animation: wo-zipla .35s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes wo-zipla { 40% { transform: scale(1.3); } }
.wo-ilerleme { height: 14px; border-radius: 999px; background: rgba(0, 0, 0, .35); border: 2px solid var(--wo-cerceve); overflow: hidden; }
.wo-ilerleme > b { display: block; height: 100%; width: 0; background: linear-gradient(180deg, #9dffcf, var(--wo-basari)); transition: width .35s cubic-bezier(.2, .9, .3, 1.2); }

/* ── modal ── */
.wo-modal-arka { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px; background: rgba(10, 12, 30, .55); backdrop-filter: blur(3px); animation: wo-sol .2s; }
.wo-modal { width: min(420px, 100%); animation: wo-pat .34s cubic-bezier(.2, 1.4, .4, 1); }
.wo-modal h2 { font-family: var(--wo-baslik-font); margin: 0 0 10px; font-size: 26px; text-align: center; }
.wo-modal-arka.cikis { opacity: 0; transition: opacity .2s; } .wo-modal.cikis { transform: scale(.9); transition: transform .2s; }
@keyframes wo-sol { from { opacity: 0; } } @keyframes wo-pat { from { transform: scale(.6); opacity: 0; } }
.wo-ayarlar { display: grid; gap: 10px; }
.wo-anahtar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--wo-yuzey-2); font-weight: 800; position: relative; }
.wo-anahtar input { position: absolute; opacity: 0; }
.wo-anahtar i { width: 54px; height: 30px; border-radius: 999px; background: #c9cfe2; border: 2px solid var(--wo-cerceve); position: relative; transition: background .2s; flex: none; }
.wo-anahtar i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--wo-cerceve); transition: transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.wo-anahtar input:checked + i { background: var(--wo-basari); } .wo-anahtar input:checked + i::after { transform: translateX(24px); }

/* ── bildirim (toast) ── */
.wo-bildirimler { position: fixed; left: 0; right: 0; top: calc(64px + var(--wo-guvenli-ust)); display: grid; justify-items: center; gap: 8px; z-index: 60; pointer-events: none; }
.wo-bildirim { padding: 10px 18px; border-radius: 999px; background: var(--wo-murekkep); color: #fff; font-weight: 800; border: 2px solid rgba(255, 255, 255, .2); box-shadow: 0 8px 20px rgba(0, 0, 0, .3); animation: wo-pat .3s cubic-bezier(.2, 1.4, .4, 1); }
.wo-bildirim.cikis { opacity: 0; transform: translateY(-10px); transition: .3s; }

/* ── geçiş perdesi ── */
.wo-gecis { position: fixed; inset: 0; z-index: 80; pointer-events: none; background: radial-gradient(circle, transparent 0, var(--wo-murekkep) 0); clip-path: circle(0 at 50% 50%); transition: clip-path .2s ease-in; background: var(--wo-murekkep); }
.wo-gecis.acik { clip-path: circle(150% at 50% 50%); pointer-events: auto; }

/* ── öğretici el ── */
.wo-ipucu { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
.wo-ipucu.cikis { opacity: 0; transition: opacity .25s; }
.wo-ipucu-balon { position: absolute; left: 50%; bottom: calc(22% + var(--wo-guvenli-alt)); transform: translateX(-50%); max-width: 86%; padding: 12px 18px; border-radius: 16px; background: #fff; border: 3px solid var(--wo-cerceve); box-shadow: var(--wo-golge); font-weight: 800; text-align: center; animation: wo-pat .35s cubic-bezier(.2, 1.4, .4, 1); }
.wo-el { position: absolute; width: 64px; height: 64px; margin: -8px 0 0 -18px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M24 6c3 0 5 2 5 5v17l2-1c2-1 5 0 6 2l1 2 2-1c2-1 5 0 6 2l1 2 1-1c2-1 5 0 6 3l2 10c1 6-2 12-7 15l-3 2H31c-3 0-6-2-8-4L11 39c-2-2-2-5 0-7 2-1 5-1 7 1l1 2V11c0-3 2-5 5-5z' fill='%23fff' stroke='%231d2340' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E"); filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .35)); }
.wo-el-dokun { animation: wo-dokun 1.1s ease-in-out infinite; }
@keyframes wo-dokun { 0%, 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(8px) scale(.9); } }
.wo-el-surukle { animation: wo-surukle 1.6s ease-in-out infinite; }
@keyframes wo-surukle { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 75% { transform: translate(var(--dx), var(--dy)); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)); opacity: 0; } }

/* ── joystick ── */
.wo-joy { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .12); border: 3px solid rgba(255, 255, 255, .35); opacity: 0; transition: opacity .15s; pointer-events: none; }
.wo-joy.acik { opacity: 1; }
.wo-joy-top { position: absolute; left: 50%; top: 50%; width: 46%; height: 46%; margin: -23% 0 0 -23%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #c9cfe2); border: 3px solid var(--wo-cerceve); }

/* ── bitiş ── */
.wo-bitis { width: min(380px, 92vw); margin: 0 auto; text-align: center; }
.wo-bitis .wo-baslik { font-size: 44px; color: var(--wo-ana); }
.wo-yildizlar { display: flex; justify-content: center; gap: 6px; margin: 14px 0 4px; }
.wo-yildiz { width: 64px; height: 64px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 4l8.6 17.5 19.4 2.8-14 13.6 3.3 19.3L32 48.1 14.7 57.2 18 37.9 4 24.3l19.4-2.8z' fill='%23d4d9e8' stroke='%231d2340' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.wo-yildiz:nth-child(2) { transform: translateY(-12px) scale(1.15); }
.wo-yildiz.dolu { animation: wo-yildiz-gel .5s cubic-bezier(.2, 1.6, .4, 1) both; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff3a1'/%3E%3Cstop offset='.5' stop-color='%23ffc93c'/%3E%3Cstop offset='1' stop-color='%23f08c00'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M32 4l8.6 17.5 19.4 2.8-14 13.6 3.3 19.3L32 48.1 14.7 57.2 18 37.9 4 24.3l19.4-2.8z' fill='url(%23g)' stroke='%231d2340' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M22 22l6-1' stroke='%23fff' stroke-width='4' stroke-linecap='round' opacity='.8'/%3E%3C/svg%3E"); }
.wo-yildiz.dolu:nth-child(2) { animation-name: wo-yildiz-gel2; }
@keyframes wo-yildiz-gel { from { transform: scale(2.4) rotate(-30deg); opacity: 0; } }
@keyframes wo-yildiz-gel2 { from { transform: translateY(-12px) scale(2.6) rotate(30deg); opacity: 0; } to { transform: translateY(-12px) scale(1.15); } }
.wo-puan-buyuk { font-family: var(--wo-baslik-font); font-weight: 800; font-size: 56px; color: var(--wo-murekkep); line-height: 1; margin: 8px 0; }

/* ── menü yerleşimi ── */
.wo-menu { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: calc(28px + var(--wo-guvenli-ust)) 22px calc(28px + var(--wo-guvenli-alt)); }
.wo-logo { font-size: clamp(44px, 13vw, 72px); }
.wo-yuzen { animation: wo-yuzen 3s ease-in-out infinite; }
@keyframes wo-yuzen { 50% { transform: translateY(-8px) rotate(-1deg); } }
.wo-ortala { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }