/* 🍬 Kelime Şekeri — harita, tahta, şekerler. seker.js */
body.sk-acik { overflow: hidden; }
.sk-kok { position: fixed; inset: 0; z-index: 9000; overflow: hidden; display: flex; justify-content: center; color: #3b1d4a; user-select: none; -webkit-user-select: none;
  font-family: "Baloo 2", ui-rounded, "SF Pro Rounded", system-ui, sans-serif; background: radial-gradient(120% 80% at 50% 0%, #ffd6ec 0%, #ff9ccf 45%, #c86ad8 100%); }
.sk-kok.cocuk { background: radial-gradient(120% 80% at 50% 0%, #e6fbff 0%, #a7e8ff 45%, #7fc8ff 100%); color: #12355b; }
.sk-kok * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
.sk-kok [hidden] { display: none !important; }
.sk-kok button { font: inherit; color: inherit; cursor: pointer; }
.sk-kap { position: relative; width: min(100%, 560px); height: 100%; display: flex; flex-direction: column; }
.sk-ust { display: flex; align-items: center; gap: 8px; padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 6px; }
.sk-geri { width: 42px; height: 42px; flex-shrink: 0; border: 0; border-radius: 14px; background: #ffffffd9; box-shadow: 0 3px 0 #0002; font-size: 20px; font-weight: 800; }
.sk-baslik { font-size: 20px; font-weight: 800; flex: 1; text-shadow: 0 2px 0 #fff8; }
.sk-rozet { background: #ffffffd9; border-radius: 12px; padding: 4px 10px; font-weight: 800; box-shadow: 0 3px 0 #0002; white-space: nowrap; }

/* harita */
.sk-harita { flex: 1; overflow-y: auto; padding: 8px 16px 40px; -webkit-overflow-scrolling: touch; }
.sk-iki { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 4px 0 10px; }
.sk-iki button { border: 0; border-radius: 14px; padding: 9px 4px; font-size: 14px; font-weight: 800; background: #fff; color: #b0127d !important; box-shadow: 0 3px 0 #0002; }
.sk-iki-bas { font-size: 13px; font-weight: 800; color: #5b2a6b; margin-top: 4px; }
.sk-dunya { margin: 18px 0 8px; text-align: center; font-weight: 900; font-size: 17px; color: #fff; text-shadow: 0 2px 0 #0003; }
.sk-dunya span { display: inline-block; background: #ffffff38; border-radius: 999px; padding: 4px 14px; }
.sk-yol { display: flex; flex-direction: column; gap: 10px; }
.sk-dugum { align-self: center; width: 64px; height: 64px; border-radius: 50%; border: 0; display: grid; place-items: center; position: relative; padding: 0; font-size: 22px; font-weight: 900; color: #fff !important;
  background: radial-gradient(circle at 35% 30%, #ff8bd1, #e0198f 70%); box-shadow: 0 5px 0 #9d0f63, 0 8px 16px #0003; }
.sk-dugum.sol { align-self: flex-start; margin-left: 12%; } .sk-dugum.sag { align-self: flex-end; margin-right: 12%; }
.cocuk .sk-dugum { background: radial-gradient(circle at 35% 30%, #7fd6ff, #1c7ed6 70%); box-shadow: 0 5px 0 #145a9c, 0 8px 16px #0003; }
.sk-dugum.sk-kilitli { background: #d6c8dc; box-shadow: 0 5px 0 #a99bb0; color: #7c6b85 !important; }
.sk-dugum.simdi { animation: sk-nabiz 1.2s ease-in-out infinite; }
@keyframes sk-nabiz { 50% { transform: scale(1.1); } }
.sk-dugum small { position: absolute; bottom: -14px; font-size: 12px; letter-spacing: -1px; color: #ffd43b; text-shadow: 0 1px 0 #0006; }

/* oyun ekranı */
.sk-hud { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: stretch; padding: 0 12px 6px; }
.sk-hamle { background: #fff; border-radius: 16px; padding: 4px 12px; text-align: center; box-shadow: 0 3px 0 #0002; min-width: 70px; }
.sk-hamle b { display: block; font-size: 30px; line-height: 1; color: #b0127d; } .cocuk .sk-hamle b { color: #1c7ed6; }
.sk-hamle small { font-size: 12px; font-weight: 700; color: #7c6b85; }
.sk-sag { display: flex; flex-direction: column; gap: 5px; }
.sk-puan { display: flex; align-items: center; gap: 8px; background: #ffffffd9; border-radius: 12px; padding: 3px 10px; font-weight: 800; box-shadow: 0 3px 0 #0002; }
.sk-bar { flex: 1; height: 9px; border-radius: 6px; background: #f1dcea; overflow: hidden; } .sk-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffd43b, #ff922b); transition: width .3s; }
.sk-hedefler { display: flex; gap: 5px; flex-wrap: wrap; }
.sk-hedef { display: flex; align-items: center; gap: 5px; background: #fff; border-radius: 12px; padding: 3px 9px; font-weight: 800; font-size: 15px; box-shadow: 0 3px 0 #0002; }
.sk-hedef b { color: #b0127d; } .cocuk .sk-hedef b { color: #1c7ed6; } .sk-hedef .em { font-size: 22px; line-height: 1; }
.sk-hedef.tamam { background: #d3f9d8; } .sk-hedef.tamam b { color: #2f9e44; }
.sk-hedef.zip { animation: sk-zip .3s; } @keyframes sk-zip { 50% { transform: scale(1.15); } }
.sk-rakip { display: flex; justify-content: space-between; gap: 6px; background: #3b1d4a; color: #fff; border-radius: 12px; padding: 4px 10px; font-weight: 800; font-size: 14px; }
.sk-alan { flex: 1; display: grid; place-items: center; padding: 4px 8px calc(env(safe-area-inset-bottom, 0px) + 10px); }
.sk-tahta { position: relative; border-radius: 18px; background: #3b1d4a59; box-shadow: inset 0 0 0 3px #ffffff40; touch-action: none; }
.cocuk .sk-tahta { background: #12355b40; }
.sk-not { text-align: center; font-size: 13px; font-weight: 700; color: #5b2a6b; padding: 0 12px 6px; min-height: 20px; } .cocuk .sk-not { color: #12355b; }

/* şeker */
.sk-s { position: absolute; left: 0; top: 0; display: grid; place-items: center; transition: transform .17s ease-in; will-change: transform; }
.sk-s.yavas { transition-duration: .26s; }
.sk-g { position: absolute; inset: 7%; border-radius: 30%; box-shadow: inset 0 -5px 0 #0003, inset 0 4px 0 #fff6, 0 3px 4px #0003; }
.sk-g::after { content: ""; position: absolute; left: 18%; top: 12%; width: 32%; height: 20%; border-radius: 50%; background: #fff9; filter: blur(.5px); }
.sk-r0 .sk-g { background: linear-gradient(160deg, #ff8787, #e03131); border-radius: 45% / 38%; transform: rotate(-12deg); }
.sk-r1 .sk-g { background: linear-gradient(160deg, #ffc078, #f76707); border-radius: 50% / 42%; }
.sk-r2 .sk-g { background: linear-gradient(160deg, #ffe066, #f59f00); border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%; }
.sk-r3 .sk-g { background: linear-gradient(160deg, #8ce99a, #2f9e44); border-radius: 26%; }
.sk-r4 .sk-g { background: radial-gradient(circle at 35% 30%, #a5d8ff, #1c7ed6 72%); border-radius: 50%; }
.sk-r5 .sk-g { background: linear-gradient(160deg, #e599f7, #9c36b5); clip-path: polygon(50% 0, 63% 14%, 82% 8%, 84% 28%, 100% 38%, 88% 54%, 96% 74%, 76% 78%, 70% 96%, 50% 86%, 30% 96%, 24% 78%, 4% 74%, 12% 54%, 0 38%, 16% 28%, 18% 8%, 37% 14%); border-radius: 0; }
.sk-y { position: relative; z-index: 2; color: #fff; font-weight: 900; line-height: 1; text-align: center; padding: 0 2px; max-width: 96%; overflow: hidden; white-space: nowrap;
  text-shadow: 0 1px 0 #0009, 0 0 3px #0008; letter-spacing: -.2px; }
.sk-em { position: relative; z-index: 2; line-height: 1; filter: drop-shadow(0 2px 1px #0003); }
.sk-s.em .sk-y { position: absolute; bottom: 8%; font-size: 10px !important; }
/* çocuk: renkli şeker zemini + üstünde resim (Riven 1 Eki: "çocuk bölümü daha güzel emojilerle") */
.sk-s.em .sk-g { inset: 4%; }
.sk-s.em .sk-em { margin-top: -10%; filter: drop-shadow(0 2px 0 #fff8) drop-shadow(0 2px 2px #0004); }
.sk-s.em .sk-y { background: #0005; border-radius: 6px; padding: 0 4px; }
.sk-o1 .sk-g::before, .sk-o2 .sk-g::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.sk-o1 .sk-g::before { background: repeating-linear-gradient(0deg, #ffffffc0 0 3px, transparent 3px 8px); }
.sk-o2 .sk-g::before { background: repeating-linear-gradient(90deg, #ffffffc0 0 3px, transparent 3px 8px); }
.sk-o3 .sk-g { box-shadow: 0 0 0 3px #fff, 0 0 10px 3px #fff9, inset 0 -5px 0 #0003; }
.sk-o4 .sk-g { background: radial-gradient(circle at 50% 50%, #ff6b6b 0 6%, transparent 7%), radial-gradient(circle at 30% 35%, #ffd43b 0 6%, transparent 7%), radial-gradient(circle at 68% 30%, #51cf66 0 6%, transparent 7%),
  radial-gradient(circle at 70% 68%, #4dabf7 0 6%, transparent 7%), radial-gradient(circle at 32% 70%, #f783ac 0 6%, transparent 7%), radial-gradient(circle at 40% 30%, #8d5a3b, #3d2314 72%) !important; border-radius: 50% !important; clip-path: none !important; transform: none !important; }
.sk-sayac { position: absolute; z-index: 3; right: 2%; top: 2%; min-width: 20px; height: 20px; border-radius: 10px; background: #212529; color: #fff; font-size: 12px; font-weight: 900; display: grid; place-items: center; padding: 0 4px; box-shadow: 0 0 0 2px #fff; }
.sk-sayac.az { background: #e03131; animation: sk-nabiz .7s infinite; }
.sk-s.sec .sk-g { outline: 3px solid #fff; outline-offset: 1px; }
.sk-s.pat { animation: sk-pat .2s ease-out forwards; } @keyframes sk-pat { to { transform: var(--t) scale(1.35); opacity: 0; } }
.sk-s.dog { animation: sk-dog .25s ease-out; } @keyframes sk-dog { from { opacity: 0; } }
.sk-s.sk-oneri { animation: sk-ip 0.8s ease-in-out 2; } @keyframes sk-ip { 50% { filter: brightness(1.35); } }

/* perde / kartlar */
.sk-perde { position: absolute; z-index: 5; inset: 0; display: grid; place-items: center; padding: 16px; background: #2b0f3a80; }
.cocuk .sk-perde { background: #0b2a4a70; }
.sk-kart { width: min(100%, 380px); max-height: 92%; overflow-y: auto; background: #fff; border-radius: 26px; padding: 20px; text-align: center; box-shadow: 0 8px 0 #0002, 0 20px 50px #0004; }
.sk-kart h2 { margin: 2px 0 8px; font-size: 26px; color: #b0127d; } .cocuk .sk-kart h2 { color: #1c7ed6; }
.sk-kart p { margin: 0 0 12px; font-size: 17px; line-height: 1.35; color: #4a3655; }
.sk-btn { display: block; width: 100%; margin-top: 10px; border: 0; border-radius: 16px; padding: 13px; font-size: 20px; font-weight: 800; color: #fff !important; background: linear-gradient(180deg, #ff5bb8, #d6197f); box-shadow: 0 5px 0 #9d0f63; }
.cocuk .sk-btn { background: linear-gradient(180deg, #4dabf7, #1c7ed6); box-shadow: 0 5px 0 #145a9c; }
.sk-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #9d0f63; }
.sk-btn.ikincil { background: #f3eef5; color: #4a3655 !important; box-shadow: 0 5px 0 #d9cfe0; }
.sk-hedef-liste { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 12px; }
.sk-hedef-liste span { background: #fff0f8; border-radius: 14px; padding: 8px 12px; font-weight: 800; font-size: 18px; } .cocuk .sk-hedef-liste span { background: #e7f5ff; }
.sk-hedef-liste .em { font-size: 30px; display: block; line-height: 1.1; }
.sk-soru-metin { font-size: 28px; font-weight: 900; color: #3b1d4a; margin: 4px 0 2px; overflow-wrap: anywhere; }
.sk-secenek { display: grid; gap: 8px; margin-top: 10px; }
.sk-secenek button { border: 0; border-radius: 14px; padding: 12px; font-size: 20px; font-weight: 800; background: #f8f0fc; box-shadow: 0 4px 0 #e5d4ee; }
.sk-secenek button.dogru { background: #d3f9d8; box-shadow: 0 4px 0 #8ce99a; } .sk-secenek button.yanlis { background: #ffe3e3; box-shadow: 0 4px 0 #ffa8a8; }
.sk-secenek.em button { font-size: 44px; padding: 8px; } .sk-secenek.em { grid-template-columns: 1fr 1fr; }
.sk-yildiz { font-size: 40px; letter-spacing: 6px; color: #e9dcef; } .sk-yildiz i { font-style: normal; } .sk-yildiz i.on { color: #fab005; text-shadow: 0 3px 0 #e67700; }
.sk-ogren { text-align: left; margin: 0 0 8px; } .sk-ogren small { display: block; font-weight: 800; color: #b0127d; margin-bottom: 6px; } .cocuk .sk-ogren small { color: #1c7ed6; }
.sk-kelime { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; border: 0; border-radius: 12px; background: #fdf2f8; padding: 7px 12px; margin-bottom: 6px; font-size: 16px; text-align: left; }
.cocuk .sk-kelime { background: #eef7ff; } .sk-kelime b { color: #3b1d4a; } .sk-kelime span { color: #7c6b85; } .sk-kelime .em { font-size: 24px; }
.sk-ist { width: 100%; border-collapse: collapse; margin: 4px 0 12px; font-size: 16px; } .sk-ist th { font-size: 14px; color: #7c6b85; padding: 4px; } .sk-ist th:last-child { color: #e03131; }
.sk-ist td { padding: 5px 4px; border-top: 1px solid #f1e6f5; } .sk-ist td:first-child { text-align: left; color: #7c6b85; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .sk-dugum.simdi, .sk-sayac.az { animation: none; } .sk-s { transition-duration: .05s; } }
/* 🖼️ çocuk kelime resimleri (yoksa emoji) */
.sk-gor { display: inline-grid; place-items: center; position: relative; line-height: 1; vertical-align: middle; }
.sk-gor img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 2px #0003); }
.sk-gor img + i { display: none; } .sk-gor i { font-style: normal; }
.sk-s.em .sk-em { margin-top: -8%; filter: none; } .sk-s.em .sk-em .sk-gor img { filter: drop-shadow(0 2px 0 #fff9) drop-shadow(0 3px 3px #0004); }
.sk-secenek.em button { display: grid; place-items: center; padding: 10px; }