/* karanlık mod: [data-theme=dark] ya da sistem tercihi (kullanıcı seçmediyse) */
:root[data-theme="dark"] { --bg:#171210; --card:#241c18; --ink:#f6efe7; --muted:#b5a79a; --line:#3a2e28; --primary:#e0713f; --primary-dk:#b4552a; --ok:#5fb37a; --ok-bg:#1f3325; --bad:#e2634f; --bad-bg:#3d221c; --warn:#e5b04d; --warn-bg:#3b2f14; --navy:#f6efe7; }
:root[data-theme="dark"] body { background:#0d0a09; }
:root[data-theme="dark"] .phone { border-color:#222; }
:root[data-theme="dark"] .opt, :root[data-theme="dark"] .tile, :root[data-theme="dark"] .chip, :root[data-theme="dark"] .tile-btn, :root[data-theme="dark"] .item, :root[data-theme="dark"] .mic, :root[data-theme="dark"] .streak, :root[data-theme="dark"] input, :root[data-theme="dark"] textarea, :root[data-theme="dark"] .btn.secondary, :root[data-theme="dark"] .flip .face, :root[data-theme="dark"] .nav { background:var(--card); color:var(--ink); }
:root[data-theme="dark"] .flip .face.back { background:#2e2420; }
:root[data-theme="dark"] .tag.blue { background:#3a2e28; }
:root[data-theme="dark"] .side.on { background:#3d2a20; }
:root[data-theme="dark"] .devbar { color:#999; }
.theme { background:none; border:0; font-size:20px; padding:0 4px; }
:root { --bg:#fbf6ef; --card:#ffffff; --ink:#1f2a44; --muted:#7a6f66; --line:#eadfd3; --primary:#d9633a; --primary-dk:#b04b27; --ok:#2e9e6a; --ok-bg:#e8f6ee; --bad:#d64a3c; --bad-bg:#fdecea; --warn:#b8811c; --warn-bg:#fff4dc; --navy:#1f2a44; --radius:18px; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
[hidden] { display:none !important; }
html, body { margin:0; background:#efe3d6; font-family:-apple-system, "SF Pro Rounded", "SF Pro Text", "Segoe UI", Roboto, sans-serif; color:var(--ink); }
body { display:flex; flex-direction:column; align-items:center; min-height:100vh; padding:24px 0; gap:12px; }
.phone { width:390px; height:844px; background:var(--bg); border-radius:44px; box-shadow:0 20px 60px rgba(60,30,10,.25); overflow:hidden; display:flex; flex-direction:column; border:8px solid #2a1f1a; position:relative; }
@media (max-width:420px) { body{padding:0} .phone{width:100%; height:100vh; border:0; border-radius:0} .devbar{display:none} }
.top { display:flex; align-items:center; gap:8px; padding:50px 18px 8px; font-weight:800; font-size:17px; color:var(--navy); }
.top #title { flex:1; }
.icon { background:none; border:0; font-size:30px; line-height:1; color:var(--primary); padding:0 8px 0 0; font-weight:700; }
.streak { font-size:14px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:5px 11px; font-weight:700; }
.bar { height:10px; margin:2px 18px 6px; background:var(--line); border-radius:6px; overflow:hidden; }
.bar i { display:block; height:100%; width:0; background:var(--primary); border-radius:6px; transition:width .3s; }
main { flex:1; overflow:auto; padding:6px 18px 20px; display:flex; flex-direction:column; gap:12px; }
.nav { display:flex; border-top:1px solid var(--line); background:#fff; padding:8px 4px 22px; }
.nav button { flex:1; background:none; border:0; font-size:22px; display:flex; flex-direction:column; align-items:center; gap:2px; color:var(--muted); }
.nav button span { font-size:11px; font-weight:600; }
.nav button.active { color:var(--primary); }
.card { background:var(--card); border-radius:var(--radius); padding:18px; border:1px solid var(--line); box-shadow:0 2px 0 var(--line); }
.card.hero { text-align:center; padding:26px 18px; }
h1 { font-size:26px; margin:6px 0 4px; color:var(--navy); }
h2 { font-size:18px; margin:0 0 6px; }
p { margin:6px 0; line-height:1.45; }
.muted { color:var(--muted); font-size:14px; }
.big { font-size:38px; font-weight:900; margin:6px 0 2px; letter-spacing:-.5px; }
.pron { font-size:17px; color:var(--primary); font-weight:700; }
.tr { font-size:20px; font-weight:600; }
.q { font-size:22px; font-weight:700; line-height:1.35; margin:8px 0 12px; }
.btn { display:block; width:100%; border:0; border-radius:16px; padding:17px; font-size:17px; font-weight:800; background:var(--primary); color:#fff; box-shadow:0 4px 0 var(--primary-dk); margin-top:8px; }
.btn:active { transform:translateY(2px); box-shadow:0 2px 0 var(--primary-dk); }
.btn.secondary { background:#fff; color:var(--primary); border:2px solid var(--line); box-shadow:0 4px 0 var(--line); }
.btn.ok { background:var(--ok); box-shadow:0 4px 0 #17724c; }
.btn.bad { background:var(--bad); box-shadow:0 4px 0 #a83a1c; }
.btn.ghost { background:none; color:var(--muted); box-shadow:none; font-weight:600; padding:10px; }
.btn:disabled { opacity:.5; }
.speak { display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:50%; border:0; background:var(--primary); color:#fff; font-size:28px; box-shadow:0 4px 0 var(--primary-dk); }
.speak.small { width:44px; height:44px; font-size:20px; }
.speak:active { transform:translateY(2px); box-shadow:0 2px 0 var(--primary-dk); }
input, textarea { width:100%; font-size:18px; padding:14px; border:2px solid var(--line); border-radius:14px; background:#fff; font-family:inherit; }
input:focus, textarea:focus { outline:none; border-color:var(--primary); }
.row { display:flex; gap:10px; } .row > * { flex:1; }
.opts { display:flex; flex-direction:column; gap:10px; }
.opt { background:#fff; border:2px solid var(--line); border-radius:14px; padding:15px; font-size:18px; font-weight:600; text-align:left; box-shadow:0 3px 0 var(--line); }
.opt:active { transform:translateY(2px); box-shadow:0 1px 0 var(--line); }
.opt.picked { border-color:var(--primary); }
.opt.right { border-color:var(--ok); background:var(--ok-bg); }
.opt.wrong { border-color:var(--bad); background:var(--bad-bg); }
.tiles { display:flex; flex-wrap:wrap; gap:8px; min-height:56px; padding:10px; border:2px dashed var(--line); border-radius:14px; background:#fff; }
.tiles.answer { border-style:solid; }
.tile { background:#fff; border:2px solid var(--line); border-radius:12px; padding:10px 14px; font-size:18px; font-weight:600; box-shadow:0 3px 0 var(--line); }
.tile.used { visibility:hidden; }
.result { border-radius:var(--radius); padding:16px; margin-top:10px; }
.result.ok { background:var(--ok-bg); border:1px solid #bfe9d1; }
.result.bad { background:var(--bad-bg); border:1px solid #f6c9b6; }
.result .head { font-weight:900; font-size:19px; }
.result.ok .head { color:var(--ok); } .result.bad .head { color:var(--bad); }
.tag { display:inline-block; font-size:12px; padding:4px 10px; border-radius:999px; background:var(--warn-bg); color:var(--warn); font-weight:800; letter-spacing:.2px; }
.tag.blue { background:#e9eef8; color:var(--navy); }
.tiles-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.tile-btn { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:16px 14px; text-align:left; box-shadow:0 3px 0 var(--line); font-size:15px; font-weight:700; }
.tile-btn .ic { font-size:26px; display:block; margin-bottom:6px; }
.tile-btn .sub { display:block; font-size:12px; color:var(--muted); font-weight:600; margin-top:2px; }
.stat { display:flex; gap:10px; }
.stat .card { flex:1; text-align:center; padding:12px 6px; }
.stat .n { font-size:24px; font-weight:900; } .stat .l { font-size:12px; color:var(--muted); }
.flip { perspective:1000px; min-height:300px; }
.flip .face { background:#fff; border-radius:22px; border:1px solid var(--line); box-shadow:0 6px 0 var(--line); padding:28px 20px; text-align:center; min-height:300px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; }
.flip .face.back { background:#fdf3ea; }
.list { display:flex; flex-direction:column; gap:10px; }
.item { background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px; }
.item b { display:block; }
.hero-emoji { font-size:60px; }
.slogan { text-align:center; font-size:15px; color:var(--muted); margin:0 0 10px; }
.devbar { font-size:12px; color:#555; }
.devnote { font-size:13px; color:var(--warn); background:var(--warn-bg); padding:8px 12px; border-radius:10px; }
.err { color:var(--bad); font-size:14px; }
.counter { text-align:center; font-size:13px; color:var(--muted); font-weight:700; }

/* kaydırmalı kart */
.swipe-wrap { position:relative; display:flex; align-items:center; gap:6px; min-height:320px; }
.side { flex:0 0 78px; text-align:center; font-weight:800; font-size:15px; color:var(--muted); padding:10px 4px; border-radius:14px; border:2px dashed var(--line); transition:all .15s; }
.side.on { color:var(--primary); border-color:var(--primary); background:#fdeee6; }
.side.left::before { content:"◀ "; } .side.right::after { content:" ▶"; }
.swipe { flex:1; touch-action:pan-y; user-select:none; cursor:grab; }
.swipe .face { transition:transform .18s, box-shadow .18s; will-change:transform; min-height:300px; background:var(--card); border-radius:22px; border:1px solid var(--line); box-shadow:0 6px 0 var(--line); padding:28px 12px; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; }
.swipe .face .big { font-size:34px; }
.swipe-wrap { justify-content:center; }
.side { flex:0 0 72px; }
.swipe.drag .face { transition:none; }
.swipe.shake .face { animation:shake .4s; border-color:var(--bad); }
.swipe.fly-left .face { transform:translateX(-140%) rotate(-12deg); opacity:0; transition:transform .25s, opacity .25s; }
.swipe.fly-right .face { transform:translateX(140%) rotate(12deg); opacity:0; transition:transform .25s, opacity .25s; }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-14px)} 40%{transform:translateX(12px)} 60%{transform:translateX(-8px)} 80%{transform:translateX(6px)} }

/* günlük hedef halkası, görevler, kutlama */
.ring { width:64px; height:64px; border-radius:50%; display:grid; place-items:center; font-weight:900; font-size:13px; background:conic-gradient(var(--ok) calc(var(--p) * 1%), var(--line) 0); }
.ring span { width:50px; height:50px; border-radius:50%; background:var(--card); display:grid; place-items:center; }
.today { display:flex; align-items:center; gap:14px; }
.quest { display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--line); font-size:15px; }
.quest:first-of-type { border-top:0; }
.quest .q-bar { flex:1; height:8px; background:var(--line); border-radius:4px; overflow:hidden; } .quest .q-bar i { display:block; height:100%; background:var(--primary); }
.quest.done { color:var(--ok); }
.pop { animation:pop .35s; } @keyframes pop { 0%{transform:scale(.6);opacity:0} 70%{transform:scale(1.08)} 100%{transform:scale(1);opacity:1} }
.confetti { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.confetti i { position:absolute; top:-10px; width:8px; height:14px; border-radius:2px; animation:fall 1.2s ease-in forwards; }
@keyframes fall { to { transform:translateY(900px) rotate(540deg); opacity:.2 } }
.mic { background:#fff; border:2px solid var(--line); border-radius:14px; padding:12px; font-size:16px; font-weight:700; width:100%; margin-top:8px; }
.mic.on { border-color:var(--bad); color:var(--bad); }
.xp-pill { font-size:12px; font-weight:800; color:var(--ok); }
.onb .opt { text-align:center; }

.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { background:#fff; border:2px solid var(--line); border-radius:999px; padding:10px 14px; font-size:17px; font-weight:700; box-shadow:0 3px 0 var(--line); }
.chip.on { border-color:var(--primary); background:#fdeee6; color:var(--primary); }
.chip.right { border-color:var(--ok); background:var(--ok-bg); } .chip.wrong { border-color:var(--bad); background:var(--bad-bg); }

/* telaffuz */
.read { font-size:20px; line-height:1.7; }
.read .w { padding:1px 3px; border-radius:6px; }
.read .w.ok { background:var(--ok-bg); color:var(--ok); } .read .w.miss { background:var(--bad-bg); color:var(--bad); text-decoration:underline wavy; }
.rec { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; border:0; border-radius:16px; padding:18px; font-size:18px; font-weight:800; background:var(--bad); color:#fff; box-shadow:0 4px 0 #a83a1c; margin-top:8px; }
.rec.on { animation:pulse 1s infinite; } @keyframes pulse { 50% { opacity:.7 } }

/* seviye tablosu */
.lvl { display:grid; grid-template-columns:1fr; gap:8px; }
.lvl button { display:grid; grid-template-columns:58px 1fr auto; align-items:center; gap:10px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px 14px; text-align:left; box-shadow:0 3px 0 var(--line); }
.lvl .b { font-size:20px; font-weight:900; color:var(--primary); }
.lvl .sub { font-size:12px; color:var(--muted); }
.lvl button:disabled { opacity:.55; }
.lvl .pct { font-size:13px; font-weight:800; color:var(--ok); }
.nav button { font-size:20px; }

/* sohbet */
.chat { display:flex; flex-direction:column; gap:8px; }
.msg { max-width:86%; padding:10px 14px; border-radius:16px; font-size:16px; line-height:1.4; }
.msg.bot { background:var(--card); border:1px solid var(--line); align-self:flex-start; border-bottom-left-radius:4px; }
.msg.user { background:var(--primary); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
.msg .fix { display:block; margin-top:6px; font-size:13px; background:var(--warn-bg); color:var(--warn); border-radius:10px; padding:6px 8px; }
.chatbar { display:flex; gap:8px; align-items:flex-end; }
.chatbar textarea { flex:1; }
.chatbar .btn { width:auto; margin:0; padding:14px 16px; }
.coach { font-size:17px; line-height:1.55; }

/* maskot: gözlüklü koç */
.mascot { display:inline-block; width:120px; height:120px; }
.mascot.small { width:56px; height:56px; }
.mascot-row { display:flex; align-items:center; gap:12px; }
.bubble { position:relative; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:10px 14px; font-size:15px; }
.bubble::before { content:""; position:absolute; left:-8px; top:18px; border:8px solid transparent; border-right-color:var(--line); border-left:0; }

/* günün planı (ana ekran C) */
.plan { display:flex; flex-direction:column; gap:8px; }
.step { display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:14px; background:var(--card); border:1px solid var(--line); font-weight:700; font-size:16px; }
.step .n { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:900; background:var(--line); color:var(--ink); flex:0 0 26px; }
.step.done { color:var(--muted); text-decoration:line-through; } .step.done .n { background:var(--ok); color:#fff; }
.step.now { border-color:var(--primary); box-shadow:0 3px 0 var(--line); } .step.now .n { background:var(--primary); color:#fff; }
.step small { margin-left:auto; color:var(--muted); font-weight:600; font-size:13px; }
.greet { font-size:22px; font-weight:800; text-align:center; color:var(--navy); text-wrap:balance; margin:4px 0 0; }
/* yol haritası (İlerleme) */
.path { display:flex; flex-direction:column; align-items:center; gap:12px; padding:8px 0; }
.node { width:52px; height:52px; border-radius:50%; display:grid; place-items:center; font-size:20px; background:var(--card); border:3px solid var(--line); box-shadow:0 3px 0 var(--line); position:relative; }
.node.done { background:var(--ok-bg); border-color:var(--ok); } .node.now { background:var(--primary); border-color:var(--primary-dk); color:#fff; transform:scale(1.15); } .node.locked { opacity:.5; }
.node .lbl { position:absolute; left:64px; top:12px; white-space:nowrap; font-size:13px; font-weight:800; color:var(--ink); } .node .lbl small { display:block; font-weight:600; color:var(--muted); font-size:11px; }
.node:nth-child(odd) { transform:translateX(-40px); } .node:nth-child(even) { transform:translateX(40px); }
.node.now:nth-child(odd) { transform:translateX(-40px) scale(1.15); } .node.now:nth-child(even) { transform:translateX(40px) scale(1.15); }
/* hikâye okuyucu */
.story { font-size:21px; line-height:1.9; }
.story .w { padding:2px 3px; border-radius:6px; cursor:pointer; }
.story .w.on { background:#fdeee6; color:var(--primary); }
:root[data-theme="dark"] .story .w.on { background:#3d2a20; }
.story .sent { display:block; margin-bottom:6px; }
.story .sent .tr { display:none; font-size:14px; color:var(--muted); }
.story .sent.show .tr { display:block; }
.gloss { position:sticky; bottom:8px; background:var(--navy); color:#fff; border-radius:14px; padding:12px 14px; font-size:17px; font-weight:700; box-shadow:0 8px 24px rgba(0,0,0,.2); }
.gloss small { display:block; font-weight:600; opacity:.8; font-size:13px; }
:root[data-theme="dark"] .gloss { background:#3a2e28; }

/* Koçi anlatsın */
.tabs { display:flex; gap:6px; }
.tabs button { flex:1; background:var(--card); border:2px solid var(--line); border-radius:12px; padding:10px; font-weight:800; font-size:14px; color:var(--muted); }
.tabs button.on { border-color:var(--primary); color:var(--primary); }
.rule { background:var(--warn-bg); border-left:4px solid var(--warn); border-radius:0 12px 12px 0; padding:10px 12px; font-weight:700; }
.trap { background:var(--bad-bg); border-left:4px solid var(--bad); border-radius:0 12px 12px 0; padding:10px 12px; }
.sec h3 { margin:12px 0 4px; font-size:16px; color:var(--navy); }
.sec p { margin:0; }
.ex { display:grid; grid-template-columns:1fr auto; gap:6px 10px; align-items:center; padding:10px 0; border-top:1px solid var(--line); }
.ex .wrong { color:var(--bad); text-decoration:line-through; font-size:14px; }
.ex .en { font-weight:800; font-size:17px; } .ex .tr { color:var(--muted); font-size:14px; } .ex .note { font-size:13px; color:var(--warn); }
.player { display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px; }
.player .speak { width:56px; height:56px; font-size:24px; }
.weak { color:var(--bad); font-weight:800; font-size:12px; }
@media print { body { background:#fff; padding:0; } .phone { width:100%; height:auto; border:0; border-radius:0; box-shadow:none; } .top, .nav, .bar, .tabs, .btn, .speak, .devbar, #streak, #theme, #back { display:none !important; } main { overflow:visible; } .card { box-shadow:none; break-inside:avoid; } }

/* sayı oyunu */
.numbig { font-size:72px; font-weight:900; text-align:center; color:var(--navy); letter-spacing:-2px; line-height:1.1; font-variant-numeric:tabular-nums; }
.numscore { display:flex; justify-content:center; gap:14px; font-weight:800; color:var(--muted); }

/* ---------- Çocuk Dünyası (Faz 4): büyük dokunma alanları, oyuncu renkler, yazı ikincil */
:root { --k-sky:#6fb7ff; --k-sun:#ffcf4d; --k-grass:#7ed37a; --k-berry:#ff7aa8; --k-grape:#b18cff; --k-bg:#fff8e8; }
:root[data-theme="dark"] { --k-bg:#221a14; }
body.kids .phone { background:var(--k-bg); }
body.kids .card.k-card { border-radius:26px; border-color:var(--k-sun); box-shadow:0 4px 0 var(--k-sun); }
.k-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.k-grid.games { grid-template-columns:repeat(3, 1fr); } .k-grid.themes { grid-template-columns:repeat(2, 1fr); } .k-grid.words { grid-template-columns:repeat(3, 1fr); }
.k-grid.opts { grid-template-columns:repeat(2, 1fr); } .k-grid.opts.three { grid-template-columns:repeat(3, 1fr); } .k-grid.opts.four { grid-template-columns:repeat(2, 1fr); }
.k-grid.mem { grid-template-columns:repeat(4, 1fr); gap:8px; }
.k-tile { position:relative; background:#fff; border:3px solid #ffe3a3; border-radius:22px; padding:12px 6px; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:15px; font-weight:800; color:var(--navy); box-shadow:0 5px 0 #f4c95d; min-height:96px; justify-content:center; }
:root[data-theme="dark"] .k-tile { background:#2c231d; border-color:#5a4520; box-shadow:0 5px 0 #4a3a1a; }
.k-tile:active, .k-tile.k-pop { transform:translateY(3px) scale(.98); box-shadow:0 2px 0 #f4c95d; }
.k-tile small { font-size:12px; color:var(--muted); font-weight:600; }
.k-tile.add { border-style:dashed; color:var(--muted); }
.k-tile.right { border-color:var(--ok); background:var(--ok-bg); } .k-tile.wrong { border-color:var(--bad); }
.k-tile.game { background:linear-gradient(180deg,#fff,#fff4d6); } .k-tile.theme { padding-bottom:16px; }
.k-emoji { font-size:46px; line-height:1.1; } .k-emoji.huge { font-size:84px; } .k-emoji.inline { font-size:28px; vertical-align:middle; }
.k-word { font-size:17px; } .k-big { font-size:22px; font-weight:800; margin:6px 0; text-align:center; }
.k-h { font-size:17px; margin:8px 0 0; color:var(--muted); }
.k-hint { text-align:center; }
.k-title { text-align:center; } .k-title h1 { margin:2px 0; } .k-title.small { display:flex; justify-content:space-between; font-weight:800; font-size:15px; }
.k-bar { display:block; width:80%; height:8px; background:#ffe3a3; border-radius:6px; overflow:hidden; margin-top:4px; } .k-bar b { display:block; height:100%; background:var(--k-grass); }
.k-star { position:absolute; top:6px; right:8px; font-size:18px; }
.k-head { display:flex; align-items:center; gap:10px; } .k-head b { font-size:18px; display:block; } .k-head small { color:var(--muted); }
.k-av { font-size:30px; background:#fff; border:3px solid #ffe3a3; border-radius:50%; width:56px; height:56px; } .k-av.on { border-color:var(--primary); background:#fdeee6; } .k-av.big { border:0; background:none; width:auto; height:auto; font-size:44px; }
.k-avatars { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 10px; } .k-ages { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 10px; }
.k-badge { margin-left:auto; font-size:30px; background:#fff; border:3px solid #ffe3a3; border-radius:18px; padding:4px 10px; box-shadow:0 4px 0 #f4c95d; }
.k-koci { display:flex; align-items:center; gap:8px; cursor:pointer; } .k-koci .bubble { flex:1; font-size:18px; font-weight:800; } .k-koci .bubble small { display:block; font-weight:600; color:var(--muted); font-size:13px; }
.k-listen { text-align:center; padding:6px 0; } .k-speak { width:96px; height:96px; font-size:44px; }
.k-match { display:flex; gap:12px; } .k-match .col { flex:1; display:flex; flex-direction:column; gap:10px; }
.k-cell { background:#fff; border:3px solid #ffe3a3; border-radius:18px; padding:10px; font-size:18px; font-weight:800; min-height:70px; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 0 #f4c95d; color:var(--navy); }
:root[data-theme="dark"] .k-cell { background:#2c231d; border-color:#5a4520; box-shadow:0 4px 0 #4a3a1a; }
.k-cell.sel { border-color:var(--k-sky); background:#eaf4ff; } .k-cell.done { border-color:var(--ok); background:var(--ok-bg); opacity:.7; }
.k-cell .k-emoji { font-size:40px; }
.k-mem { position:relative; aspect-ratio:1; border:0; background:none; perspective:600px; padding:0; }
.k-mem span { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; border-radius:16px; backface-visibility:hidden; transition:transform .35s; font-size:22px; font-weight:900; }
.k-mem .front { background:var(--k-grape); color:#fff; font-size:34px; } .k-mem .back { background:#fff; border:3px solid #ffe3a3; transform:rotateY(180deg); color:var(--navy); }
.k-mem .back .k-emoji { font-size:36px; } .k-mem .back b { font-size:15px; }
.k-mem.open .front, .k-mem.done .front { transform:rotateY(180deg); } .k-mem.open .back, .k-mem.done .back { transform:rotateY(0); } .k-mem.done .back { border-color:var(--ok); background:var(--ok-bg); }
.k-slots { display:flex; gap:6px; justify-content:center; margin:10px 0; } .k-slot { width:44px; height:52px; border-bottom:4px solid var(--k-sky); font-size:30px; font-weight:900; text-align:center; line-height:52px; color:var(--navy); }
.k-letters { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; } .k-letter { width:56px; height:56px; font-size:28px; font-weight:900; border-radius:14px; border:3px solid #ffe3a3; background:#fff; box-shadow:0 4px 0 #f4c95d; color:var(--navy); }
.k-letter.used { opacity:.25; }
.k-sky { position:relative; height:330px; border-radius:24px; background:linear-gradient(180deg,#bfe0ff,#eaf6ff); overflow:hidden; }
.k-balloon { position:absolute; bottom:-10px; width:72px; height:88px; border:0; border-radius:50% 50% 50% 50% / 45% 45% 55% 55%; box-shadow:inset -8px -8px 0 rgba(0,0,0,.08); animation:k-float 6s ease-in-out infinite; }
.k-balloon::after { content:""; position:absolute; left:50%; bottom:-22px; width:2px; height:22px; background:#8d6e63; }
.k-balloon .k-emoji { font-size:34px; }
@keyframes k-float { 0% { transform:translateY(0) } 50% { transform:translateY(-200px) rotate(3deg) } 100% { transform:translateY(0) } }
.k-balloon.pop { animation:none; transform:scale(1.6); opacity:0; transition:all .3s; }
.k-palette { display:flex; gap:12px; justify-content:center; margin:8px 0; } .k-swatch { width:52px; height:52px; border-radius:50%; border:4px solid #fff; box-shadow:0 0 0 3px #ffe3a3; } .k-swatch.on { box-shadow:0 0 0 4px var(--navy); transform:scale(1.15); }
.k-count { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; font-size:38px; min-height:60px; padding:8px; background:#fff; border-radius:20px; border:3px solid #ffe3a3; } .k-num { font-size:34px; }
.k-figure { width:220px; margin:0 auto; display:block; } .k-part { cursor:pointer; } .k-part.hit * { filter:drop-shadow(0 0 8px #43a047); } .k-part.nope * { filter:drop-shadow(0 0 8px #e53935); }
.k-opt { display:flex; justify-content:space-between; align-items:center; font-size:19px; } .k-opt .k-mini { font-size:18px; opacity:.6; }
.k-emojis { text-align:center; font-size:44px; margin:4px 0 8px; } .k-emojis span { margin:0 4px; }
.k-sent { font-size:24px; font-weight:800; line-height:1.4; color:var(--navy); } .k-sent .w { padding:2px 3px; border-radius:6px; }
.k-stars { text-align:center; font-size:30px; min-height:38px; margin:4px 0 0; }
.k-stickers { display:flex; flex-wrap:wrap; gap:8px; } .k-sticker { width:56px; height:56px; display:flex; align-items:center; justify-content:center; font-size:32px; border-radius:16px; background:#fff; border:3px solid #ffe3a3; color:#ccc; }
.k-sticker.on { border-color:var(--k-sun); } .k-sticker.badge.on { border-color:var(--k-grass); background:var(--ok-bg); }
.k-stickers.small .k-sticker { width:auto; height:auto; padding:6px 10px; font-size:16px; color:var(--navy); }
.k-garden { font-size:34px; line-height:1.4; min-height:44px; }
.k-sticker-win { margin:10px 0; } .k-sticker-win b { display:block; font-size:18px; }
.k-pin { font-size:34px; letter-spacing:10px; text-align:center; margin:8px 0; } .k-pad { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; } .k-key { font-size:24px; font-weight:800; padding:16px; border-radius:16px; border:2px solid var(--line); background:#fff; color:var(--navy); }
.k-bars { display:flex; align-items:flex-end; gap:6px; height:110px; margin-top:10px; } .k-bar-col { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; } .k-bar-col i { display:block; width:100%; background:var(--k-sky); border-radius:8px 8px 0 0; min-height:3px; } .k-bar-col small { font-size:11px; color:var(--muted); margin-top:4px; }
.k-shake { animation:k-shake .35s; } @keyframes k-shake { 0%,100% { transform:translateX(0) } 25% { transform:translateX(-8px) } 75% { transform:translateX(8px) } }
@media (prefers-reduced-motion: reduce) { .k-balloon { animation:none; bottom:120px; } .k-shake { animation:none; } }
/* mod düğmesi + yeni çocuk oyunları + sözlük */
.mode { font-size:13px; font-weight:800; background:#fff; border:1px solid var(--line); border-radius:999px; padding:5px 10px; color:var(--navy); }
:root[data-theme="dark"] .mode { background:#2c231d; border-color:#5a4520; color:#f6efe7; }
.k-tile.mode-c.on, .k-tile.mode-a.on { border-color:var(--primary); background:#fdeee6; }
.k-speak.small2 { width:72px; height:72px; font-size:32px; }
.k-road { position:relative; height:64px; background:#4a4a4a; border-radius:14px; margin:6px 0; overflow:hidden; }
.k-road::before { content:""; position:absolute; left:0; right:0; top:50%; height:4px; border-top:4px dashed #fff; opacity:.8; }
.k-car { position:absolute; top:8px; font-size:40px; transition:left .6s ease; transform:scaleX(1); }
.k-flag { position:absolute; right:8px; top:12px; font-size:32px; }
.k-blocks { display:flex; gap:8px; justify-content:center; } .k-block { flex:1; height:64px; font-size:24px; font-weight:900; border-radius:14px; border:3px solid #ffe3a3; background:#fff; color:var(--navy); box-shadow:0 4px 0 #f4c95d; }
.k-block.space { background:#eaf4ff; border-color:#6fb7ff; box-shadow:0 4px 0 #4a90d9; }
.k-lot { display:flex; flex-direction:column; align-items:center; gap:8px; padding:10px; background:#e7e3d8; border-radius:20px; }
.k-lot-mid { display:flex; align-items:center; gap:10px; } .k-lotcar { font-size:56px; filter:saturate(1.6); }
.k-spot { border:3px dashed var(--navy); background:#fff; border-radius:14px; padding:10px 14px; font-weight:800; min-width:110px; color:var(--navy); }
.k-dressfig { display:flex; align-items:center; justify-content:center; gap:14px; } .k-worn { display:flex; flex-wrap:wrap; gap:6px; max-width:180px; } .k-worn span { font-size:30px; border:3px solid #ddd; border-radius:12px; padding:2px 4px; background:#fff; }
.k-dot { width:14px; height:14px; border-radius:50%; display:inline-block; }
.k-guests { display:flex; gap:10px; justify-content:center; } .k-guest { background:#fff; border:3px solid #ffe3a3; border-radius:20px; padding:8px 12px; display:flex; flex-direction:column; align-items:center; } .k-guest.on { border-color:var(--k-berry); background:#fff0f5; }
.k-tray { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; padding:10px; background:#fff4d6; border-radius:20px; } .k-item { background:#fff; border:3px solid #ffe3a3; border-radius:16px; padding:6px 8px; display:flex; flex-direction:column; align-items:center; } .k-item.on { border-color:var(--k-sky); }
.k-plate { min-height:70px; border-radius:50%/40%; background:#fff; border:4px solid #ddd; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:4px; font-size:34px; padding:10px 20px; }
.k-rooms { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .k-room { background:#fff; border:3px solid #ffe3a3; border-radius:18px; padding:10px; display:flex; flex-direction:column; align-items:center; box-shadow:0 4px 0 #f4c95d; color:var(--navy); font-weight:700; }
.k-scene { text-align:center; font-size:56px; } .k-scene .stack { display:flex; flex-direction:column; align-items:center; line-height:1; } .k-scene .side { display:flex; justify-content:center; gap:8px; }
.dict .dict-item { align-items:flex-start; }
/* çocuk avatarları (SVG, canlı) */
.av { width:56px; height:56px; display:inline-block; vertical-align:middle; overflow:visible; }
.av.big { width:84px; height:84px; } .av.huge { width:120px; height:120px; } .av.small { width:36px; height:36px; } .av.tiny { width:22px; height:22px; }
.av .av-body { transform-origin:50% 90%; animation:av-bob 3.2s ease-in-out infinite; }
.av .av-blink { transform-origin:50% 52%; animation:av-blink 4.5s infinite; }
.av .av-wave { transform-origin:50% 50%; animation:av-wave 2.4s ease-in-out infinite; }
.av .av-spin { animation:av-spin 1.6s linear infinite; transform-box:fill-box; transform-origin:center; }
.av .av-flash { animation:av-flash 1.8s ease-in-out infinite; }
.av.pop .av-body { animation:av-pop .5s ease-out; }
.av-emoji { font-size:44px; line-height:1; } .av-emoji.big { font-size:60px; } .av-emoji.small { font-size:28px; }
@keyframes av-bob { 0%,100% { transform:translateY(0) rotate(0) } 50% { transform:translateY(-2px) rotate(-1.5deg) } }
@keyframes av-blink { 0%,92%,100% { transform:scaleY(1) } 95% { transform:scaleY(.1) } }
@keyframes av-wave { 0%,100% { transform:rotate(0) } 50% { transform:rotate(6deg) } }
@keyframes av-spin { to { transform:rotate(360deg) } }
@keyframes av-flash { 0%,100% { opacity:1 } 50% { opacity:.5 } }
@keyframes av-pop { 0% { transform:scale(1) } 40% { transform:scale(1.25) rotate(6deg) } 100% { transform:scale(1) } }
@media (prefers-reduced-motion: reduce) { .av * { animation:none !important; } }
.k-av.svg { padding:2px; } .k-av.svg .av { width:44px; height:44px; }
.rv label { display:block; margin-top:6px; font-size:12px; } .rv input, .rv textarea { margin-top:2px; font-size:15px; padding:8px 10px; } .rv .row { margin-top:8px; } .rv .row .btn { margin:0; padding:10px; font-size:14px; }
.rv-n { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin:6px 0; padding:6px; border:1px dashed var(--line); border-radius:10px; } .rv-n input { font-size:13px; padding:6px 8px; }
.k-avwrap { display:inline-flex; cursor:pointer; }

.av.img { border-radius:50%; overflow:hidden; background:#fff; box-shadow:0 2px 0 #f4c95d; } .av.img img { width:100%; height:100%; object-fit:cover; display:block; animation:av-bob 3.2s ease-in-out infinite; transform-origin:50% 90%; }
.av.img.pop img { animation:av-pop .5s ease-out; }

/* konuşan arkadaş */
.k-talker { position:relative; width:200px; height:200px; margin:0 auto; } .k-talker .av, .k-talker .av-emoji { width:200px; height:200px; font-size:150px; display:flex; align-items:center; justify-content:center; }
.k-talker .av.img img { animation:none; } .k-talker.talking .av.img img, .k-talker.talking .av .av-body { animation:av-talk .6s ease-in-out infinite; }
.k-mouth { position:absolute; transform:translate(-50%, -50%); pointer-events:none; filter:drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
@keyframes av-talk { 0%,100% { transform:translateY(0) rotate(0) } 50% { transform:translateY(-3px) rotate(1.5deg) } }
.k-fbubble { font-size:22px; font-weight:800; text-align:center; min-height:64px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; } .k-fbubble small { font-size:14px; font-weight:600; color:var(--muted); } .k-fbubble::before { display:none; }
.k-friendhead { display:flex; justify-content:center; }
.k-frow { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; } .k-fbtn { display:flex; flex-direction:column; align-items:center; gap:2px; font-size:26px; width:64px; padding:8px 0; border-radius:18px; border:3px solid #ffe3a3; background:#fff; box-shadow:0 4px 0 #f4c95d; color:var(--navy); } .k-fbtn small { font-size:11px; font-weight:700; } .k-fbtn:disabled { opacity:.6; }

/* indirmeler */
.dl-row { display:flex; justify-content:flex-end; margin:-4px 0 -6px; } .dl-mini { border:1px solid var(--line); background:#fff; border-radius:999px; padding:4px 10px; font-size:13px; font-weight:700; color:var(--primary); } .dl-mini.done { color:var(--ok); border-color:var(--ok); }
.item.dl { align-items:center; } .dlbar { margin:6px 0 0; height:6px; width:160px; } .dlbtn { margin:0; padding:8px 14px; font-size:14px; width:auto; display:inline-block; }
/* ---------- rozetler: hareketli */
.rz { position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; padding:8px 4px; }
.rz b { font-size:12px; line-height:1.15; color:var(--navy); } .rz small { font-size:10.5px; color:var(--muted); line-height:1.2; }
.rz-disc { position:relative; width:84px; height:84px; border-radius:50%; overflow:hidden; background:radial-gradient(circle at 35% 30%, #fff8e6, var(--rz) 70%); box-shadow:0 4px 0 rgba(0,0,0,.12), inset 0 0 0 4px rgba(255,255,255,.35); }
.rz.sm .rz-disc { width:56px; height:56px; } .rz.xl .rz-disc { width:150px; height:150px; }
.rz-disc img { width:100%; height:100%; object-fit:contain; display:block; } .rz-ph { display:flex; width:100%; height:100%; align-items:center; justify-content:center; font-size:38px; } .rz.xl .rz-ph { font-size:70px; }
.rz.locked .rz-disc { filter:grayscale(1) brightness(.75); opacity:.55; } .rz.locked b { color:var(--muted); }
.rz-shine { position:absolute; top:-20%; left:-60%; width:40%; height:140%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent); transform:skewX(-20deg); pointer-events:none; }
.rz.earned .rz-shine { animation:rz-shine 4s ease-in-out infinite; } .rz.earned.bronz .rz-shine { animation-duration:7s; opacity:.6; } .rz.earned.gumus .rz-shine { animation-duration:5s; }
.rz.earned.altin .rz-disc { box-shadow:0 4px 0 rgba(0,0,0,.12), 0 0 18px 2px rgba(212,160,23,.55); animation:rz-breathe 2.6s ease-in-out infinite; } .rz-glow { position:absolute; inset:0; border-radius:50%; box-shadow:inset 0 0 14px rgba(255,235,150,.9); animation:rz-glow 2.6s ease-in-out infinite; pointer-events:none; }
.rz.earned.elmas .rz-disc { box-shadow:0 4px 0 rgba(0,0,0,.12), 0 0 22px 3px rgba(63,182,216,.6); animation:rz-float 3.2s ease-in-out infinite; }
.rz-spark { position:absolute; width:8px; height:8px; background:#fff; border-radius:50%; box-shadow:0 0 8px 2px #bff0ff; opacity:0; pointer-events:none; }
.rz.earned .rz-spark { animation:rz-spark 2.4s ease-in-out infinite; } .rz-spark.s1 { top:14%; left:70%; } .rz-spark.s2 { top:60%; left:14%; animation-delay:.8s !important; } .rz-spark.s3 { top:75%; left:72%; animation-delay:1.6s !important; }
.rz-new { position:absolute; top:2px; right:8px; background:var(--bad); color:#fff; font-size:9px; font-weight:900; padding:2px 6px; border-radius:999px; letter-spacing:.05em; } .rz-soon { font-size:9px; color:var(--muted); border:1px dashed var(--line); padding:1px 6px; border-radius:999px; }
.rz.rz-pop .rz-disc { animation:rz-pop .5s ease-out; }
.rz-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px 2px; }
.rz-tabs { flex-wrap:wrap; gap:4px; } .rz-tabs button { font-size:12px; padding:5px 8px; } .rz-tabs small { opacity:.7; font-size:10px; }
.rz-ceremony { position:absolute; inset:0; background:rgba(31,42,68,.55); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .25s; z-index:20; }
.rz-ceremony.on { opacity:1; } .rz-cbox { background:var(--card); border-radius:28px; padding:22px 20px 16px; width:82%; text-align:center; transform:scale(.7) translateY(30px); transition:transform .45s cubic-bezier(.2,1.4,.4,1); }
.rz-ceremony.on .rz-cbox { transform:none; } .rz-ctitle { font-size:22px; font-weight:900; margin:0 0 6px; color:var(--navy); } .rz-ceremony.kids .rz-cbox { border:4px solid var(--k-sun); }
.rz.fresh .rz-disc { animation:rz-enter 1.1s cubic-bezier(.2,1.2,.4,1) both; } .rz.fresh.altin .rz-disc, .rz.fresh.elmas .rz-disc { animation:rz-enter 1.1s cubic-bezier(.2,1.2,.4,1) both, rz-breathe 2.6s 1.1s ease-in-out infinite; }
@keyframes rz-shine { 0%, 70% { left:-60%; } 100% { left:130%; } }
@keyframes rz-breathe { 0%,100% { transform:scale(1) } 50% { transform:scale(1.04) } }
@keyframes rz-glow { 0%,100% { opacity:.5 } 50% { opacity:1 } }
@keyframes rz-float { 0%,100% { transform:translateY(0) rotate(0) } 50% { transform:translateY(-4px) rotate(-2deg) } }
@keyframes rz-spark { 0%,100% { opacity:0; transform:scale(.4) } 50% { opacity:1; transform:scale(1.2) } }
@keyframes rz-pop { 0% { transform:scale(1) } 40% { transform:scale(1.18) rotate(-6deg) } 100% { transform:scale(1) } }
@keyframes rz-enter { 0% { transform:scale(.2) rotate(-540deg); opacity:0 } 60% { transform:scale(1.15) rotate(10deg); opacity:1 } 100% { transform:scale(1) rotate(0) } }
@media (prefers-reduced-motion: reduce) { .rz * { animation:none !important; } }