:root{--bg:#eef2ff;--pri:#4f46e5;--pri2:#818cf8;--ok:#16a34a;--bad:#dc2626;--yel:#fbbf24;--ink:#1e1b4b;--card:#fff}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:"Segoe UI",Roboto,system-ui,sans-serif;overflow:hidden}
button{font:inherit;color:inherit;border:0;cursor:pointer;touch-action:manipulation}
#app{height:100%;display:flex;flex-direction:column;max-width:720px;margin:0 auto}
#top{display:flex;align-items:center;gap:8px;padding:calc(env(safe-area-inset-top) + 8px) 10px 8px;background:var(--pri);color:#fff}
#title{flex:1;text-align:center;font-weight:800;font-size:1.25rem}
.ib{background:rgba(255,255,255,.2);color:#fff;border-radius:12px;width:44px;height:44px;font-size:1.3rem}
.ib.hid{visibility:hidden}
#view{flex:1;overflow-y:auto;overflow-x:hidden;padding:12px;-webkit-overflow-scrolling:touch;position:relative}
.hidden{display:none!important}
h2{margin:10px 2px 6px;font-size:1.05rem;color:#4338ca}
.txt{font-weight:800}
body.caps .txt{text-transform:uppercase}

/* Ana ekran */
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:8px}
.tile{background:var(--card);border-radius:18px;padding:8px 2px;box-shadow:0 3px 0 #c7d2fe;display:flex;flex-direction:column;align-items:center;min-height:74px;position:relative}
.tile b{font-size:1.75rem;line-height:1.1;color:var(--pri)}
.tile small{font-size:.95rem;font-weight:700;color:#6366f1}
.tile .st{font-size:.7rem;min-height:14px}
.tile.passive{background:#e5e7eb;box-shadow:none;opacity:.7}
.tile.passive b,.tile.passive small{color:#6b7280}
.tile.next{outline:4px solid var(--yel)}
.tile:active{transform:translateY(2px)}
.hint{font-size:.9rem;color:#4b5563;margin:2px 4px 8px}

/* Harf menüsü */
.lhead{display:flex;align-items:center;gap:14px;background:var(--card);border-radius:20px;padding:10px 16px;margin-bottom:12px;box-shadow:0 3px 0 #c7d2fe}
.lhead .big{font-size:3.6rem;font-weight:900;color:var(--pri);line-height:1}
.lhead .big small{font-size:2.6rem;color:#6366f1}
.acts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.act{background:var(--card);border-radius:18px;padding:12px 8px;box-shadow:0 3px 0 #c7d2fe;display:flex;flex-direction:column;align-items:center;gap:4px;font-weight:700;font-size:.95rem;min-height:96px}
.act .ic{font-size:2.1rem}
.act .s{font-size:.8rem;min-height:16px}
.sect{grid-column:1/-1;margin:6px 2px 0;font-weight:800;color:#4338ca}

/* Genel */
.btn{background:var(--pri);color:#fff;border-radius:16px;padding:12px 18px;font-weight:800;font-size:1.05rem;box-shadow:0 3px 0 #3730a3}
.btn.g{background:var(--ok);box-shadow:0 3px 0 #166534}
.btn.r{background:var(--bad);box-shadow:0 3px 0 #991b1b}
.btn.y{background:var(--yel);color:#422006;box-shadow:0 3px 0 #b45309}
.btn.w{background:#fff;color:var(--pri);box-shadow:0 3px 0 #c7d2fe}
.btn:active{transform:translateY(2px)}
.row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:10px 0}
.prog{height:12px;background:#c7d2fe;border-radius:8px;overflow:hidden;margin-bottom:10px}
.prog i{display:block;height:100%;background:var(--ok);transition:width .3s}
.center{text-align:center}
.bigword{font-size:3.2rem;text-align:center;margin:14px 0 6px;line-height:1.2}
.pic{font-size:5rem;text-align:center;line-height:1.1}
.msg{min-height:34px;text-align:center;font-weight:800;font-size:1.15rem;margin:6px 0}
.msg.ok{color:var(--ok)}.msg.bad{color:var(--bad)}
.hl{color:#e11d48}
.syl span{display:inline-block;padding:0 3px}.syl span:nth-child(odd){color:#2563eb}.syl span:nth-child(even){color:#ea580c}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.opt{background:#fff;border-radius:18px;padding:14px 6px;font-size:2rem;font-weight:800;box-shadow:0 3px 0 #c7d2fe;min-height:84px}
.opt.pic{font-size:3.4rem}
.opt.ok{background:#bbf7d0;box-shadow:0 3px 0 #16a34a}.opt.bad{background:#fecaca;box-shadow:0 3px 0 #dc2626}
.shake{animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.conf{position:fixed;top:30%;font-size:2rem;pointer-events:none;animation:conf 1.6s ease-out forwards;z-index:50}
@keyframes conf{0%{transform:translateY(0) scale(.5);opacity:1}100%{transform:translateY(-160px) scale(1.4) rotate(40deg);opacity:0}}
.stars{font-size:3rem;text-align:center;margin:10px}

/* Harf tanı */
.wcards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.wcard{background:#fff;border-radius:18px;padding:10px;text-align:center;box-shadow:0 3px 0 #c7d2fe}
.wcard .e{font-size:3rem}.wcard .w{font-size:1.7rem;font-weight:800}
.wcard .sy{font-size:1rem;min-height:22px;font-weight:700}
canvas.draw{width:100%;height:50vh;background:#fff;border-radius:20px;touch-action:none;box-shadow:0 3px 0 #c7d2fe}

/* Okuma metni */
.story{background:#fff;border-radius:20px;padding:14px;box-shadow:0 3px 0 #c7d2fe;font-size:1.9rem;line-height:2.1}
.sent{display:block;margin-bottom:4px;border-radius:12px;padding:0 6px}
.sent.cur{background:#fef9c3}
.w{display:inline-block;margin-right:.05em;border-radius:8px;padding:0 3px;cursor:pointer}
.w.ok{background:#bbf7d0}.w.bad{background:#fecaca}.w.sp{background:#fde68a}

/* Klavye */
.typed{min-height:80px;background:#fff;border-radius:18px;padding:10px 14px;font-size:2.3rem;font-weight:800;text-align:center;box-shadow:inset 0 0 0 3px #c7d2fe;word-break:break-word}
.typed::after{content:"|";color:var(--pri);animation:bl 1s infinite}
@keyframes bl{50%{opacity:0}}
.kb{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin:12px 0}
.key{min-width:0;background:#fff;border-radius:10px;font-size:1.5rem;font-weight:800;padding:9px 0;box-shadow:0 3px 0 #c7d2fe}
.key.cur{background:#fef08a}
.key.sp{grid-column:span 4}.key.w2{grid-column:span 2}
.key.fn{background:#e0e7ff}.key.on{background:var(--yel)}
.key.dis{opacity:.22;pointer-events:none;box-shadow:none}
.diff span{display:inline-block;min-width:1ch}.diff .g{color:var(--ok)}.diff .b{color:var(--bad);text-decoration:underline}

/* Mikrofon */
.mic{width:110px;height:110px;border-radius:50%;background:var(--bad);color:#fff;font-size:3rem;margin:10px auto;display:block;box-shadow:0 5px 0 #991b1b}
.mic.on{animation:pulse 1s infinite}
@keyframes pulse{50%{transform:scale(1.1);box-shadow:0 0 0 18px rgba(220,38,38,.25)}}

/* Yol oyunu */
.road{position:relative;height:calc(100vh - 230px);min-height:360px;max-height:560px;border-radius:20px;overflow:hidden;background:#4b5563;border:6px solid #1f2937}
.road::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:8px;margin-left:-4px;background:repeating-linear-gradient(#fde047 0 30px,transparent 30px 60px);background-size:8px 60px;animation:roadmove .5s linear infinite}
.road.stop::before{animation:none}
@keyframes roadmove{to{background-position:0 60px}}
.wall{position:absolute;width:46%;height:76px;top:-80px}
.wall.L{left:2%}.wall.R{right:2%}
.wall .door{position:absolute;top:0;height:100%;width:50%;background:repeating-linear-gradient(0deg,#b45309 0 12px,#92400e 12px 14px);border:3px solid #78350f;transition:transform .45s}
.wall .dl{left:0}.wall .dr{right:0}
.wall.open .dl{transform:translateX(-102%)}.wall.open .dr{transform:translateX(102%)}
.wall .wt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.9rem;font-weight:900;color:#fff;text-shadow:0 2px 4px #000;z-index:2;transition:opacity .3s}
.wall.open .wt{opacity:0}
.car{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);transition:left .2s;line-height:0;z-index:3;filter:drop-shadow(0 4px 3px rgba(0,0,0,.4))}
.road.crash{animation:shake .5s}
.hud{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-weight:800}

/* Balon */
.sky{position:relative;height:calc(100vh - 260px);min-height:340px;background:linear-gradient(#bae6fd,#e0f2fe);border-radius:20px;overflow:hidden}
.bl{position:absolute;bottom:-100px;width:68px;height:90px;border-radius:50% 50% 48% 48%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.95rem;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5);animation:rise linear infinite;padding:0 4px;text-align:center}
.bl::after{content:"";position:absolute;bottom:-18px;width:2px;height:18px;background:#64748b}
@keyframes rise{from{transform:translateY(0)}to{transform:translateY(-130vh)}}
.bl.pop{animation:none;transform:scale(1.6);opacity:0;transition:.3s}

/* Yağmur */
.rain{position:relative;height:calc(100vh - 260px);min-height:340px;background:linear-gradient(#ddd6fe,#f5f3ff);border-radius:20px;overflow:hidden}
.fl{position:absolute;top:-70px;width:64px;height:64px;border-radius:50%;background:#fff;box-shadow:0 3px 0 #c7d2fe;display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:900;color:var(--pri);animation:fall linear forwards}
@keyframes fall{to{transform:translateY(120vh)}}
.fl.hit{background:#bbf7d0}

/* Hafıza, hece, cümle */
.mem{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mc{height:92px;border-radius:16px;background:var(--pri2);color:#fff;font-size:2rem;font-weight:900;box-shadow:0 3px 0 #4f46e5;display:flex;align-items:center;justify-content:center;padding:2px;text-align:center}
.mc.open{background:#fff;color:var(--ink);box-shadow:0 3px 0 #c7d2fe}.mc.done{background:#bbf7d0;color:var(--ink);box-shadow:none}
.mc .e{font-size:2.8rem}.mc .t{font-size:1.4rem}
.slots{display:flex;gap:8px;justify-content:center;margin:14px 0;flex-wrap:wrap}
.slot{min-width:84px;height:64px;border-radius:14px;border:3px dashed #a5b4fc;display:flex;align-items:center;justify-content:center;font-size:1.8rem;font-weight:800;background:#fff;padding:0 6px}
.slot.f{border-style:solid;border-color:var(--ok);background:#dcfce7}
.chips{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.chip{background:#fff;border-radius:14px;padding:12px 16px;font-size:1.8rem;font-weight:800;box-shadow:0 3px 0 #c7d2fe}
.chip.used{opacity:.25;pointer-events:none}
.blank{display:inline-block;min-width:1.2ch;border-bottom:5px solid var(--pri);color:var(--pri)}

/* Modal */
#modal{position:fixed;inset:0;background:rgba(30,27,75,.6);display:flex;align-items:center;justify-content:center;z-index:100;padding:14px}
.sheet{background:#fff;border-radius:22px;padding:16px;width:100%;max-width:480px;max-height:90vh;overflow-y:auto}
.sheet h3{margin:0 0 8px}
.sheet label{display:block;margin:12px 0 4px;font-weight:700}
.sheet input[type=text],.sheet select{width:100%;padding:10px;border-radius:10px;border:2px solid #c7d2fe;font-size:1.1rem;user-select:text}
.sheet input[type=range]{width:100%}

.speeds{display:flex;flex-direction:column;gap:10px;margin-top:12px}.speeds .btn{flex:none;min-height:64px;font-size:1.3rem;text-align:left;padding:14px 18px}