/* ===== My Mini Cat extras: Draw ✏️ · Learn 📚 · For Parents 👪 =====
 * Load AFTER css/style.css. Uses the site's tokens (--coral, --mint, --sky, --lilac, --pink, --ink, --card, --radius, --shadow)
 * and its components (.candy .card .panel .bubble .guide .subtab .tile .seg .bigbtn .navbtn .magic-btn .painting .magic-frame).
 * Every class here starts with x- so nothing collides with the main site. RTL uses logical properties. */

/* ---------- nav additions ---------- */
.x-draw-b { background: linear-gradient(135deg, var(--orange), var(--coral)); }
.x-learn-b { background: linear-gradient(135deg, #F5B800, var(--orange)); }
.x-parents { margin-top: 6px !important; font-size: 14px; }
.x-parents a { color: var(--ink-soft); text-decoration: none; font-weight: 600; padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,.7); border: 1.5px solid #E9D7E4; }
.x-parents a:hover, .x-parents a:focus-visible { color: var(--ink); border-color: var(--lilac); }
@media (min-width: 761px) and (max-width: 1180px) { .tabs.x-many a .tl { display: none; } .tabs.x-many a { padding: 10px 13px; } }
@media (max-width: 760px) {
  .tabs.x-many { gap: 0; padding-left: 2px; padding-right: 2px; }
  .tabs.x-many a { padding: 6px 0; border-radius: 18px; }
  .tabs.x-many a .ti { font-size: clamp(19px, 5.4vw, 24px); }
  .tabs.x-many a .tl { font-size: clamp(9.5px, 2.75vw, 13px); }
}
.x-view > .candy.mid { text-align: center; margin: 4px 0 12px; }

/* ================= DRAW ================= */
.x-draw { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(330px, 1fr); gap: 18px; align-items: start; }
.x-paper-col { position: sticky; top: 84px; }
.x-paper { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 640px; margin: 0 auto; border-radius: 10px; overflow: visible;
  background-color: #FFFEF8;
  background-image: linear-gradient(#DCE9F7 1px, transparent 1px), linear-gradient(90deg, #DCE9F7 1px, transparent 1px);
  background-size: 6.25% 6.25%;
  box-shadow: var(--shadow), 0 0 0 1px rgba(170,140,160,.15); transform: rotate(-.6deg); }
.x-paper canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; border-radius: 10px; }
.x-paper #xPreview { pointer-events: none; }
.x-paper[data-tool="pencil"] canvas, .x-paper[data-tool="brush"] canvas { cursor: crosshair; }
.x-paper[data-tool="eraser"] canvas { cursor: cell; }
.x-paper[data-tool="fill"] canvas, .x-paper[data-tool="stickers"] canvas { cursor: pointer; }
.x-tape { position: absolute; width: 110px; height: 30px; background: rgba(255, 214, 120, .62); box-shadow: 0 2px 4px rgba(0,0,0,.06); z-index: 2; pointer-events: none;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.25) 0 6px, transparent 6px 12px); }
.x-tape.a { top: -12px; left: 8%; transform: rotate(-8deg); }
.x-tape.b { top: -10px; right: 8%; transform: rotate(7deg); background-color: rgba(174, 140, 255, .45); }
.x-hist { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
.x-hbtn { display: flex; flex-direction: column; align-items: center; gap: 0; min-width: 82px; min-height: 64px; padding: 6px 12px; border-radius: 20px; background: #fff; box-shadow: 0 3px 8px rgba(170,100,160,.15); font-weight: 600; font-size: 15px; transition: transform .15s; }
.x-hbtn span { font-size: 26px; line-height: 1.1; }
.x-hbtn:active { transform: scale(.92); }
.x-hbtn:disabled { opacity: .38; }
.x-tools { padding: 12px; }
.x-toolrow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; overflow: visible; padding: 0; margin: 0; }
.x-toolrow .subtab { min-width: 0; font-size: 14px; padding: 8px 4px; }
.x-sub { margin-top: 10px; padding: 10px; border-radius: 20px; background: rgba(255,244,250,.9); animation: pop-in .3s cubic-bezier(.2,1.4,.4,1); }
.x-sub .seg { margin: 0 0 10px; }
.x-mini { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.x-mini .tile { min-height: 70px; font-size: 13px; padding: 4px 2px 6px; border-width: 3px; }
.x-mini .tile .ei { font-size: 28px; }
.x-mini .tile svg { width: 40px; height: 40px; }
.x-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.x-lbl { font-weight: 700; font-size: 17px; }
.x-sizes { display: flex; gap: 8px; flex: 1; }
.x-size { flex: 1; min-width: 48px; height: 52px; border-radius: 18px; background: #fff; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(170,100,160,.15); border: 3px solid transparent; }
.x-size i { display: block; border-radius: 50%; background: var(--ink); }
.x-size.on { border-color: var(--coral); box-shadow: 0 0 0 3px #FFD1DA; }
.x-palette { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 7px; margin-top: 12px; }
.x-sw { position: relative; aspect-ratio: 1; width: 100%; min-width: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(74,46,62,.14), 0 2px 5px rgba(170,100,160,.2); transition: transform .12s; }
.x-sw.on { transform: scale(1.12); box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--coral); z-index: 1; }
.x-sw:active { transform: scale(.9); }
.x-any { display: grid; place-items: center; cursor: pointer; background: conic-gradient(#FF7A8A, #FFD54F, #5FD8A9, #5CC0F5, #AE8CFF, #FF7A8A); overflow: hidden; }
.x-any input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; border: 0; padding: 0; }
.x-any span { font-size: 15px; pointer-events: none; filter: drop-shadow(0 1px 1px #fff); }
.x-magic { margin-top: 14px; }
.x-magic:disabled { opacity: .6; }
.x-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.x-actions .bigbtn { font-size: 20px; min-height: 60px; padding: 8px 12px; }
.x-minecard { margin-top: 20px; }
.x-h3 { margin: 0 0 10px; font-size: 24px; }
.x-dgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; }
.x-none { margin: 4px 0; color: var(--ink-soft); font-size: 18px; }
.x-dtile { position: relative; padding: 6px; border-radius: 20px; background: #fff; box-shadow: var(--shadow); transition: transform .15s; animation: pop-in .4s cubic-bezier(.2,1.4,.4,1) backwards; }
.x-dtile:active { transform: scale(.94); }
.x-dthumb { display: block; aspect-ratio: 1; border-radius: 14px; overflow: hidden; }
.x-dthumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.x-dbadge { position: absolute; top: -6px; inset-inline-end: -6px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; background: linear-gradient(135deg, #FFE27A, #FFB86B); box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.x-paperbg { background-color: #FFFEF8; background-image: linear-gradient(#DCE9F7 1px, transparent 1px), linear-gradient(90deg, #DCE9F7 1px, transparent 1px); background-size: 6.25% 6.25%; }
.x-galdraw { margin-top: 26px; }
/* before / after */
.x-ba { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.x-ba.one { grid-template-columns: minmax(0, 360px); justify-content: center; }
.x-ba figure { margin: 0; text-align: center; }
.x-ba figcaption { font-weight: 700; font-size: 17px; margin-top: 6px; color: var(--ink-soft); }
.x-before .x-paperbg { aspect-ratio: 1; border-radius: 16px; overflow: hidden; border: 5px solid #fff; box-shadow: var(--shadow); transform: rotate(-2deg); }
.x-before img { width: 100%; height: 100%; object-fit: contain; display: block; }
.x-after .magic-frame { padding: 8px; }
.x-after .magic-frame img { max-height: 46vh; }
.x-arrow { font-size: 34px; color: var(--coral); animation: x-nudge 1.4s ease-in-out infinite; }
[dir="rtl"] .x-arrow { transform: scaleX(-1); animation-name: x-nudge-rtl; }
@keyframes x-nudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@keyframes x-nudge-rtl { 0%,100% { transform: scaleX(-1) translateX(0); } 50% { transform: scaleX(-1) translateX(5px); } }
.x-easel-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; opacity: .85; }
.x-drawpaint .easel .canvas i { opacity: .55; }
@media (max-width: 860px) {
  .x-draw { grid-template-columns: minmax(0, 1fr); }
  .x-paper-col { position: static; }
  .x-paper { max-width: min(560px, 100%); }
}
@media (max-width: 1100px) and (min-width: 861px), (max-width: 560px) { .x-toolrow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .x-draw { gap: 8px; }
  /* phones: the paper stays on screen while the tools scroll underneath (like the cat maker's stage) */
  .x-paper-col { position: sticky; top: calc(68px + env(safe-area-inset-top)); z-index: 6; margin: 0 -14px; padding: 8px 14px 6px;
    background: linear-gradient(to bottom, rgba(255,231,240,.97) 88%, rgba(255,231,240,0)); }
  .x-paper { width: min(100%, 41vh, 41svh); }
  .x-tape { width: 70px; height: 20px; }
  .x-hist { margin-top: 6px; gap: 6px; }
  .x-hbtn { flex-direction: row; gap: 4px; min-width: 0; min-height: 44px; padding: 4px 12px; font-size: 14px; }
  .x-hbtn span { font-size: 20px; }
  .x-tools-col .guide { margin-top: 4px; }
  .x-palette { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; }
  .x-toolrow .subtab { font-size: 12.5px; } .x-toolrow .subtab .si { font-size: 24px; }
  .x-ba { grid-template-columns: minmax(0, 1fr); }
  .x-arrow { transform: rotate(90deg); animation: none; justify-self: center; }
  [dir="rtl"] .x-arrow { transform: rotate(90deg); }
  .x-before .x-paperbg { max-width: 220px; margin: 0 auto; }
}

/* ================= LEARN ================= */
.x-guide { max-width: 900px; margin-inline: auto; }
.x-progress { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 4px auto 16px; font-weight: 700; color: var(--ink-soft); font-size: 18px; }
.x-pawrow { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.x-pawbadge { display: block; flex: none; filter: drop-shadow(0 3px 5px rgba(150,90,140,.18)); }
.x-lessons { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; max-width: 1000px; margin: 0 auto; }
.x-ltile { --lc: var(--pink); position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; text-decoration: none; padding: 16px 10px 14px; border-radius: 26px;
  background: linear-gradient(160deg, #fff 55%, color-mix(in srgb, var(--lc) 22%, #fff)); box-shadow: var(--shadow); border: 4px solid color-mix(in srgb, var(--lc) 45%, #fff); transition: transform .15s; animation: pop-in .45s cubic-bezier(.2,1.4,.4,1) backwards; }
.x-ltile:active { transform: scale(.95); }
.x-ltile:hover { transform: translateY(-3px); }
.x-lic { font-size: 48px; line-height: 1.1; width: 78px; height: 78px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--lc) 25%, #fff); }
.x-lname { font-weight: 700; font-size: 22px; line-height: 1.15; }
.x-lmeta { font-size: 15px; color: var(--ink-soft); font-weight: 600; }
.x-ltile .x-pawbadge { position: absolute; top: 8px; inset-inline-end: 8px; }
.x-ltile.won { border-color: var(--lc); }
.x-lhead { justify-content: flex-start; }
.x-lhead .x-backb { font-size: 18px; min-height: 52px; padding: 6px 16px; }
.x-ltitle { margin: 0; font-size: clamp(26px, 4.4vw, 36px); color: var(--ink); }
.x-carousel { max-width: 760px; margin: 0 auto; }
.x-cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--radius); overscroll-behavior-x: contain; outline: none; }
.x-cards::-webkit-scrollbar { display: none; }
.x-cards:focus-visible { box-shadow: 0 0 0 4px var(--lilac); }
.x-card { --lc: var(--pink); flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; display: flex; flex-direction: column; background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--lc) 40%, #fff); }
.x-art { position: relative; display: grid; place-items: center; padding: 14px 14px 4px; background: radial-gradient(circle at 50% 60%, #fff 0 45%, color-mix(in srgb, var(--lc) 20%, #fff) 100%); }
.x-ill { width: 100%; max-width: 330px; height: auto; display: block; }
.x-artfuzz { position: absolute; bottom: 6px; inset-inline-end: 6%; width: 26%; max-width: 120px; filter: drop-shadow(0 6px 8px rgba(120,60,100,.2)); }
.x-ctext { position: relative; padding: 12px 20px 18px; padding-inline-end: 64px; }
.x-ctext h3 { margin: 0 0 4px; font-size: 22px; color: color-mix(in srgb, var(--lc) 55%, var(--ink)); }
.x-ctext p { margin: 0; font-size: 21px; line-height: 1.4; font-weight: 500; }
.x-ctext .speak { position: absolute; top: 12px; inset-inline-end: 12px; }
.x-ctext .speak:active { transform: scale(.9); }
.x-quizcard .x-ctext { text-align: center; padding-inline-end: 20px; }
.x-quizart { padding: 26px 14px; }
.x-go { margin-top: 12px; }
.x-cnav { display: flex; align-items: center; justify-content: space-between; gap: 10px; max-width: 760px; margin: 14px auto 0; }
.x-cnav .navbtn { flex: none; }
.x-cnav .navbtn.next.x-toquiz { background: linear-gradient(135deg, var(--coral), var(--orange)); }
.x-dots { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.x-dot { width: 16px; height: 16px; border-radius: 50%; background: #E5D4E2; padding: 0; transition: .2s; position: relative; }
.x-dot::before { content: ''; position: absolute; inset: -12px; }
.x-dot.on { width: 34px; border-radius: 999px; background: linear-gradient(135deg, var(--pink), var(--lilac)); }
.x-quiz { max-width: 760px; margin: 0 auto; text-align: center; border: 4px solid color-mix(in srgb, var(--lc) 40%, #fff); }
.x-qbar { display: flex; gap: 6px; justify-content: center; margin-bottom: 8px; }
.x-qbar i { width: 46px; height: 10px; border-radius: 999px; background: #EDE2EB; }
.x-qbar i.done { background: var(--mint); } .x-qbar i.now { background: var(--lc); }
.x-qnum { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink-soft); }
.x-qrow { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0 14px; }
.x-qtext { margin: 0; font-size: clamp(23px, 4vw, 30px); line-height: 1.25; }
.x-qrow .speak { flex: none; } .x-qrow .speak:active { transform: scale(.9); }
.x-answers { display: grid; gap: 10px; }
.x-ans { min-height: 64px; padding: 10px 18px; border-radius: 22px; background: #fff; font-weight: 700; font-size: 21px; box-shadow: 0 3px 8px rgba(170,100,160,.15); border: 4px solid #F0E3EE; transition: transform .15s, border-color .15s, background .15s; }
.x-ans:not(:disabled):hover { border-color: var(--lc); }
.x-ans:active { transform: scale(.97); }
.x-ans:disabled { cursor: default; color: var(--ink); opacity: 1; }
.x-ans.x-right { background: #E6FAEF; border-color: var(--mint); color: #1E7A55; }
.x-ans.x-right::before { content: '✓ '; }
.x-ans.x-try { background: #F1EBFF; border-color: #CBB8FF; }
.x-feedback { min-height: 30px; margin: 12px 0 0; font-weight: 700; font-size: 21px; }
.x-feedback.yes { color: #1E9A68; } .x-feedback.try { color: #6E54C8; }
.x-won { max-width: 640px; margin: 0 auto; text-align: center; border: 4px solid color-mix(in srgb, var(--lc) 45%, #fff); }
.x-won h3 { font-size: clamp(24px, 4vw, 32px); margin: 8px 0 4px; }
.x-won p { margin: 4px 0; font-size: 20px; }
.x-bigbadge { display: grid; place-items: center; }
.x-bigbadge .x-pawbadge { animation: x-badge .9s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes x-badge { from { transform: scale(.2) rotate(-40deg); opacity: 0; } to { transform: none; opacity: 1; } }
.x-stars { font-size: 36px; letter-spacing: 4px; }
.x-stars span { filter: grayscale(1) opacity(.3); } .x-stars span.on { filter: none; }
@media (max-width: 760px) {
  .x-lessons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .x-lic { width: 64px; height: 64px; font-size: 38px; }
  .x-lname { font-size: 19px; }
  .x-ltile { padding: 12px 6px; }
  .x-ctext p { font-size: 19px; }
  .x-ill { max-width: 270px; }
  .x-cnav .navbtn { width: 72px; height: 58px; font-size: 26px; }
  .x-dot { width: 13px; height: 13px; } .x-dot.on { width: 26px; }
  .x-ans { font-size: 19px; min-height: 58px; }
}

/* ================= PARENTS ================= */
.x-gate { max-width: 520px; margin: 20px auto; text-align: center; }
.x-gate h2 { margin: 4px 0 6px; font-size: 30px; }
.x-gate p { margin: 6px 0; font-size: 18px; }
.x-lock { font-size: 56px; }
.x-gq { display: block; font-size: 28px; font-weight: 700; margin: 12px 0 8px; }
.x-grow { display: flex; gap: 10px; justify-content: center; align-items: center; }
.x-grow input { width: 130px; font-size: 34px; font-weight: 700; text-align: center; padding: 8px; border-radius: 22px; border: 4px solid var(--lilac); outline: none; color: var(--ink); background: #fff; }
.x-grow input:focus { box-shadow: 0 0 0 5px #EEE4FF; }
.x-grow .bigbtn { min-height: 62px; font-size: 22px; padding: 8px 24px; }
.x-gmsg { min-height: 26px; color: #C2405E; font-weight: 700; }
.x-gkid { color: var(--ink-soft); font-size: 17px !important; margin: 4px 0 14px !important; }
.x-ptitle { margin: 0; font-size: clamp(28px, 4.6vw, 40px); }
.x-pbtns { display: flex; gap: 8px; flex-wrap: wrap; }
.x-pbtns .bigbtn { font-size: 17px; min-height: 50px; padding: 6px 16px; }
.x-ptoc { justify-content: flex-start; margin: 0 0 14px; gap: 8px; }
.x-ptoc .chip { font-size: 16px; padding: 8px 14px; }
.x-psec { max-width: 900px; margin: 0 auto 14px; font-size: 18px; line-height: 1.5; scroll-margin-top: 84px; }
.x-psec h3 { margin: 0 0 8px; font-size: 25px; }
.x-psec h4 { margin: 14px 0 6px; font-size: 20px; }
.x-psec p { margin: 6px 0; }
.x-psec.x-flash { animation: x-flash 1.2s ease; }
@keyframes x-flash { 30% { box-shadow: 0 0 0 5px var(--lilac), var(--shadow); } }
.x-list { margin: 4px 0; padding-inline-start: 22px; }
.x-list li { margin: 5px 0; }
.x-list li::marker { content: '🐾 '; font-size: .8em; }
.x-story { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 18px; align-items: start; }
.x-psketch img { max-width: 190px; }
.x-pcats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.x-pcat { display: flex; flex-direction: column; align-items: center; text-align: center; background: #fff; border-radius: 22px; padding: 10px; box-shadow: 0 3px 8px rgba(170,100,160,.12); }
.x-pcat img { width: 100%; max-width: 130px; height: auto; }
.x-pcat p { font-size: 16px; }
.x-pcat .pill { font-size: 17px; padding: 2px 12px; }
.x-limit { background: #FFF6D6; border-radius: 16px; padding: 8px 12px !important; font-weight: 600; }
.x-mail { font-size: 22px; font-weight: 700; color: var(--coral); }
.x-template { background: #FFF1E0; border: 2px dashed #FFB86B; border-radius: 16px; padding: 8px 12px; font-size: 16px; font-weight: 600; }
@media (max-width: 640px) {
  .x-story { grid-template-columns: minmax(0, 1fr); }
  .x-psec { font-size: 17px; }
  .x-pcat img { max-width: 110px; }
}

/* ================= legal pages (privacy.html / terms.html) ================= */
.x-legalpage main { max-width: 860px; }
.x-legal { font-size: 18px; line-height: 1.55; }
.x-legal h1 { font-size: clamp(30px, 5vw, 42px); margin: 6px 0 2px; }
.x-legal h2 { font-size: 23px; margin: 18px 0 4px; }
.x-legal p, .x-legal li { margin: 6px 0; }
.x-legal ul { padding-inline-start: 22px; }
.x-legal a { color: #B8476A; }
.x-legal .bigbtn { color: #fff; font-size: 18px; min-height: 52px; padding: 6px 18px; margin: 4px; }
.x-updated { color: var(--ink-soft); font-size: 15px; }
.x-legalnav { margin-top: 20px !important; text-align: center; }
.x-legalpage .topbar .brand .candy { display: block; }
@media (max-width: 760px) { .x-legalpage { padding-bottom: 20px; } }

@media (prefers-reduced-motion: reduce) {
  .x-arrow, .x-bigbadge .x-pawbadge, .x-ltile, .x-dtile { animation: none !important; }
}