/* =================== ركن الصغار =================== */
.new-chip { background: #fcc419; color: #212529; border-radius: 999px; padding: 0 7px; font-size: 10.5px; font-weight: 700; margin-inline-start: auto; }
.kids-banner { display: flex; align-items: center; gap: 14px; margin: 16px 0 0; padding: 16px 18px; border-radius: 20px; color: #fff; background: linear-gradient(135deg, #ff6b6b, #f59f00 45%, #51cf66); box-shadow: 0 10px 24px rgba(245, 159, 0, .25); }
.kids-banner:hover { text-decoration: none; transform: translateY(-3px); }
.kids-banner div { flex: 1; display: flex; flex-direction: column; }
.kids-banner b { font-size: 19px; }
.kids-banner small { opacity: .95; }
.kb-ic { font-size: 42px; }
.kb-go { background: rgba(255, 255, 255, .25); padding: 8px 14px; border-radius: 12px; font-weight: 700; white-space: nowrap; }

body.kids-mode #main { background: radial-gradient(circle at 10% 0%, #fff3bf 0, transparent 35%), radial-gradient(circle at 90% 20%, #d3f9d8 0, transparent 30%), radial-gradient(circle at 50% 100%, #e5dbff 0, transparent 40%); }
.kids-hero { position: relative; overflow: hidden; text-align: center; padding: 28px 16px; border-radius: 26px; background: linear-gradient(135deg, #ff922b, #fcc419); color: #fff; }
.kids-hero h1 { font-size: 34px; color: #fff; margin: 0; text-shadow: 0 2px 0 rgba(0, 0, 0, .12); }
.kids-hero p { font-size: 18px; margin: 6px 0 0; }
.kids-float span { position: absolute; font-size: 30px; opacity: .35; animation: floaty 5s ease-in-out infinite; animation-delay: calc(var(--i) * -0.8s); left: calc(var(--i) * 16% + 4%); top: calc(10% + var(--i) * 12%); }
.kworlds { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin: 18px 0; }
.kworld { border-radius: 26px; padding: 22px 16px; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 4px; box-shadow: 0 10px 24px rgba(0, 0, 0, .12); transition: transform .18s; }
.kworld:hover { transform: translateY(-5px) rotate(-1deg); text-decoration: none; }
.kw-ic { font-size: 58px; }
.kworld b { font-size: 22px; }
.kworld small { font-size: 22px; font-weight: 700; opacity: .9; letter-spacing: 4px; }
.k-ar { background: linear-gradient(135deg, #ff6b6b, #e03131); }
.k-num { background: linear-gradient(135deg, #4dabf7, #1971c2); }
.k-en { background: linear-gradient(135deg, #b197fc, #7048e8); }
.k-shapes { background: linear-gradient(135deg, #69db7c, #2b8a3e); }
.center { text-align: center; justify-content: center; }

.khead { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.khead h1 { margin: 0; font-size: 28px; }
.kbig { font-family: Cairo, 'Segoe UI', Arial, sans-serif; font-weight: 800; font-size: 46px; line-height: 1.2; color: #1864ab; display: inline-block; }
.kbig.huge { font-size: 130px; line-height: 1.1; color: #e03131; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.kgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; }
.kgrid.ltr { direction: ltr; }
.ktile { font: inherit; background: #fff; border: 3px solid #e7f5ff; border-radius: 22px; padding: 12px 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--ink); cursor: pointer; transition: transform .15s, border-color .15s; box-shadow: var(--shadow); }
.ktile:hover { transform: translateY(-4px) scale(1.03); border-color: #74c0fc; text-decoration: none; }
.ktile b { font-size: 50px; font-weight: 800; color: #e03131; line-height: 1.15; }
.kgrid.ltr .ktile b { color: #7048e8; }
.ktile.knum b { color: #1971c2; }
.ktile small { color: var(--muted); font-size: 13.5px; }
.kgrid .ktile:nth-child(4n+2) b { color: #1971c2; }
.kgrid .ktile:nth-child(4n+3) b { color: #2b8a3e; }
.kgrid .ktile:nth-child(4n+4) b { color: #e8590c; }

.kletter { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.kcard { background: #fff; border-radius: 26px; box-shadow: var(--shadow); padding: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 3px solid #fff3bf; }
.kword b { font-size: 34px; }
.kemoji { font-size: 90px; line-height: 1.1; }
.kalt { font-size: 22px; color: var(--muted); }
.say-btn { font: inherit; font-size: 17px; font-weight: 700; background: linear-gradient(135deg, #20c997, #0ca678); color: #fff; border: none; border-radius: 999px; padding: 8px 18px; cursor: pointer; box-shadow: 0 6px 14px rgba(12, 166, 120, .3); }
.say-btn:active, .say-btn.talk { animation: pop .4s; }
.kforms, .kharakat { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; }
.kform-card, .kh { font: inherit; background: #fff; border-radius: 20px; box-shadow: var(--shadow); padding: 10px; display: flex; flex-direction: column; align-items: center; border: 2px solid #e7f5ff; }
.kh { cursor: pointer; }
.kh:hover { border-color: #20c997; }
.kform-card small, .kh small { color: var(--muted); }
.kpager { display: flex; justify-content: space-between; margin-top: 18px; }
.kpager .btn { font-size: 22px; font-weight: 800; }

/* لوحة التتبّع */
.ktrace { max-width: 380px; margin: 0 auto; }
.trace-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.trace-cv { border-radius: 24px; border: 4px dashed #74c0fc; touch-action: none; cursor: crosshair; background: #fff; box-shadow: var(--shadow); }
.trace-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; }
.trace-colors { display: flex; gap: 6px; }
.tc { width: 30px; height: 30px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px #dee2e6; cursor: pointer; }
.tc.on { box-shadow: 0 0 0 3px #212529; transform: scale(1.15); }
.trace-msg { min-height: 28px; font-size: 17px; text-align: center; }
.trace-msg .good { color: #2b8a3e; font-size: 20px; }

/* الألعاب */
.kgames { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.kgame { background: linear-gradient(135deg, #fff9db, #fff); border: 3px solid #ffe066; border-radius: 20px; padding: 14px; display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 16px; transition: transform .15s; }
.kgame span { font-size: 32px; }
.kgame:hover { transform: translateY(-3px) scale(1.02); text-decoration: none; border-color: #fab005; }
.kg { max-width: 760px; margin: 0 auto; background: #fff; border-radius: 26px; box-shadow: var(--shadow); padding: 18px; }
.kg-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 18px; }
.kg-stars { color: #e67700; font-weight: 800; }
.kg-bar { height: 10px; background: #f1f3f5; border-radius: 10px; overflow: hidden; margin: 12px 0; }
.kg-bar i { display: block; height: 100%; background: linear-gradient(90deg, #fcc419, #f76707); transition: width .4s; }
.kg-prompt { text-align: center; font-size: 22px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.kg-prompt p { margin: 0; }
.kg-opts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
.kg-opts.three { grid-template-columns: repeat(3, 1fr); }
.kg-opts.wide { grid-template-columns: repeat(2, 1fr); }
.kg-opt { font: inherit; background: #f8f9fa; border: 3px solid #dee2e6; border-radius: 20px; padding: 12px 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; min-height: 92px; transition: transform .12s, border-color .12s; }
.kg-opt:hover { transform: scale(1.05); border-color: #74c0fc; }
.kg-opt.right { background: #d3f9d8; border-color: #2f9e44; animation: pop .4s; }
.kg-opt.wrong { background: #ffe3e3; border-color: #e03131; animation: shake .4s; }
.kg-end { text-align: center; }
.kg-trophy { font-size: 90px; }
.kg-big { font-size: 30px; letter-spacing: 2px; margin: 8px 0 16px; direction: ltr; }
.kq { font-size: 34px; font-weight: 800; color: #1864ab; }
.kq.big2 { font-size: 44px; }
.qbox { display: inline-block; border: 3px dashed #f76707; border-radius: 12px; padding: 0 14px; color: #f76707; }
.ksign { font-size: 20px; }
.kitems { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; font-size: 38px; max-width: 420px; }
.kitems .gone { opacity: .3; text-decoration: line-through; filter: grayscale(1); position: relative; }
.keq { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }
.keq > b { font-size: 40px; color: #e8590c; }
.kclock { width: 200px; height: 200px; }
.kpizza { width: 190px; height: 190px; }
.kfrac { display: inline-flex; flex-direction: column; align-items: center; font-size: 30px; font-weight: 800; color: #1864ab; line-height: 1.1; }
.kfrac i { width: 34px; height: 4px; background: #343a40; border-radius: 2px; margin: 3px 0; }
.kshape { width: 78px; height: 78px; }
.kswatch { width: 64px; height: 64px; border-radius: 50%; display: inline-block; border: 3px solid #dee2e6; box-shadow: inset 0 -6px 10px rgba(0, 0, 0, .12); }
.kform { color: #e8590c; font-size: 70px; }

@media (max-width: 860px) {
  .kletter { grid-template-columns: 1fr; }
  .kbig.huge { font-size: 100px; }
  .kg-opts { grid-template-columns: repeat(2, 1fr); }
  .kg-opts.three { grid-template-columns: 1fr; }
  .kemoji { font-size: 70px; }
  .kids-banner { flex-wrap: wrap; }
  .kb-go { width: 100%; text-align: center; }
  .ktile b { font-size: 42px; }
}