/* Sora LMS Pro Pack: Kids Activities (vocabulary games, Zazou stories, hub). Kids look with theme tokens and fallbacks. */
.sora-ka {
	--ka-base: var(--wp--preset--color--base, #FEF8E9);
	--ka-surface: var(--wp--preset--color--surface, #FFFFFF);
	--ka-soft: var(--wp--preset--color--soft, #FFF0C2);
	--ka-ink: var(--wp--preset--color--ink, #23214A);
	--ka-muted: var(--wp--preset--color--muted, #5A5775);
	--ka-primary: var(--wp--preset--color--primary, #4B4ACF);
	--ka-primary-dark: var(--wp--preset--color--primary-dark, #3634A8);
	--ka-sun: var(--wp--preset--color--accent, #FFC93C);
	--ka-coral: var(--wp--preset--color--accent-2, #FF6B5B);
	--ka-mint: var(--wp--preset--color--accent-3, #3CCB9C);
	--ka-sky: var(--wp--preset--color--accent-4, #6FB7FF);
	--ka-line: var(--wp--preset--color--line, #F1E2BC);
	--ka-success: var(--wp--preset--color--success, #178357);
	--ka-danger: #C8372A;
	--ka-head: var(--wp--preset--font-family--heading, "Fredoka", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif);
	--ka-body: var(--wp--preset--font-family--body, "Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif);
	--ka-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif;
	--ka-r: 24px;
	--ka-bw: 3px;
	--ka-shadow: 0 5px 0 var(--ka-ink);
	position: relative;
	font-family: var(--ka-body);
	color: var(--ka-ink);
	font-size: clamp(16px, 0.35vw + 15px, 20px);
	line-height: 1.5;
	max-width: min(1440px, 100%);
	margin-inline: auto;
	margin-block: clamp(20px, 3vw, 48px);
	box-sizing: border-box;
}
.sora-ka *, .sora-ka *::before, .sora-ka *::after { box-sizing: border-box; }
.sora-ka button { font-family: inherit; }
.sora-ka a { text-decoration: none; }
.ska-sr, .sora-ka-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.sora-ka :focus-visible { outline: 4px solid var(--ka-sky); outline-offset: 3px; }

/* Hero */
.sora-ka__hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(20px, 3vw, 40px) clamp(20px, 4vw, 48px); background: var(--ka-soft); border: var(--ka-bw) solid var(--ka-ink); border-radius: calc(var(--ka-r) + 8px); box-shadow: var(--ka-shadow); margin-bottom: clamp(24px, 3vw, 40px); overflow: hidden; position: relative; }
.sora-ka__hero::before { content: ""; position: absolute; width: 340px; height: 340px; right: -60px; top: -120px; border-radius: 50%; background: var(--ka-sun); opacity: .55; }
.sora-ka__hero[hidden] { display: none; }
.sora-ka__hero-text { position: relative; max-width: min(980px, 100%); flex: 1 1 auto; }
.sora-ka__title { font-family: var(--ka-head); font-weight: 600; font-size: clamp(30px, 2.6vw + 18px, 64px); line-height: 1.05; margin: 0 0 10px; color: var(--ka-ink); }
.sora-ka__intro { margin: 0; color: var(--ka-muted); font-size: clamp(16px, .5vw + 14px, 22px); }
.sora-ka__hero-img { position: relative; width: clamp(120px, 14vw, 240px); height: auto; flex: none; filter: drop-shadow(0 6px 0 rgba(35, 33, 74, .12)); }
.sora-ka--vocab .sora-ka__hero { background: #E4F1FF; }
.sora-ka--vocab .sora-ka__hero::before { background: var(--ka-sky); opacity: .35; }
.sora-ka__noscript { color: var(--ka-muted); }

/* Bars and headings */
.ska-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.ska-back { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px 0 12px; border-radius: 999px; background: var(--ka-surface); border: var(--ka-bw) solid var(--ka-ink); color: var(--ka-ink); font-family: var(--ka-head); font-weight: 600; box-shadow: 0 3px 0 var(--ka-ink); transition: transform .15s; }
.ska-back:hover { transform: translateY(-2px); color: var(--ka-ink); }
.ska-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.ska-h { font-family: var(--ka-head); font-weight: 600; font-size: clamp(26px, 1.6vw + 18px, 48px); line-height: 1.1; margin: 0; color: var(--ka-ink); }
.ska-h:focus { outline: none; }
.ska-head__pic { width: clamp(56px, 5vw, 84px); height: clamp(56px, 5vw, 84px); border-radius: 20px; background: var(--ka-surface); border: var(--ka-bw) solid var(--ka-ink); font-size: clamp(32px, 3vw, 50px); }
.ska-tip { margin: 0 0 18px; color: var(--ka-muted); font-size: 1.05em; }
.ska-tip strong { color: var(--ka-primary); font-family: var(--ka-head); font-weight: 600; }

/* Pictures */
.ska-pic { display: grid; place-items: center; overflow: hidden; line-height: 1; flex: none; }
.ska-pic img { width: 100%; height: 100%; object-fit: contain; display: block; image-rendering: auto; }
.ska-glyph { font-family: var(--ka-emoji); }
.ska-pic--number .ska-glyph { font-family: var(--ka-head); font-weight: 700; color: var(--ka-primary); }
.ska-swatch { width: 78%; height: 78%; border-radius: 26%; border: var(--ka-bw) solid var(--ka-ink); box-shadow: inset 0 -8px 0 rgba(0, 0, 0, .08); }

/* Tiles */
.ska-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: clamp(14px, 1.6vw, 28px); }
.ska-tiles > li { animation: ska-in .4s both; animation-delay: calc(var(--i, 0) * 40ms); }
.ska-tile { position: relative; display: grid; justify-items: center; text-align: center; gap: 6px; padding: 22px 16px 20px; min-height: 100%; border-radius: var(--ka-r); background: var(--ka-surface); border: var(--ka-bw) solid var(--ka-ink); box-shadow: var(--ka-shadow); color: var(--ka-ink); transition: transform .18s ease, box-shadow .18s ease; }
.ska-tile:hover { transform: translateY(-4px) rotate(-.6deg); box-shadow: 0 9px 0 var(--ka-ink); color: var(--ka-ink); }
.ska-tile:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--ka-ink); }
.ska-tile__pic { width: clamp(84px, 7vw, 128px); height: clamp(84px, 7vw, 128px); border-radius: 50%; font-size: clamp(48px, 4.2vw, 76px); margin-bottom: 6px; }
.ska-tile--c0 .ska-tile__pic { background: #FFF0C2; } .ska-tile--c1 .ska-tile__pic { background: #FFE1DD; } .ska-tile--c2 .ska-tile__pic { background: #D8F5EA; } .ska-tile--c3 .ska-tile__pic { background: #E2F0FF; } .ska-tile--c4 .ska-tile__pic { background: #E6E6FB; }
.ska-tile__name { font-family: var(--ka-head); font-weight: 600; font-size: clamp(19px, .6vw + 16px, 26px); line-height: 1.15; }
.ska-tile__meta { color: var(--ka-muted); font-size: .9em; font-weight: 700; }
.ska-tile.is-done { background: #F3FBF7; }
.ska-done { position: absolute; top: -12px; right: -10px; width: 36px; height: 36px; border-radius: 50%; background: var(--ka-mint); color: var(--ka-ink); border: var(--ka-bw) solid var(--ka-ink); display: grid; place-items: center; transform: rotate(8deg); }
.ska-meter { display: block; width: 100%; max-width: 160px; height: 10px; border-radius: 99px; background: var(--ka-base); border: 2px solid var(--ka-ink); overflow: hidden; margin-top: 4px; }
.ska-meter > span { display: block; height: 100%; background: var(--ka-mint); border-radius: 99px; transition: width .4s ease; }
.ska-stars { display: inline-flex; gap: 2px; color: #E7DDBF; }
.ska-star.is-on { color: var(--ka-sun); }
.ska-star svg { display: block; filter: drop-shadow(0 1px 0 rgba(35, 33, 74, .35)); }
.ska-stars--big { gap: 6px; }
.ska-stars--big .ska-star.is-on { animation: ska-star .5s both; }
.ska-stars--big .ska-star:nth-child(2) { animation-delay: .15s; transform: translateY(-10px); }
.ska-stars--big .ska-star:nth-child(3) { animation-delay: .3s; }
.ska-empty { display: grid; justify-items: center; gap: 12px; padding: 40px 20px; text-align: center; color: var(--ka-muted); }
.ska-empty img { width: 160px; height: auto; }

/* Steps */
.ska-steps { list-style: none; margin: 0 0 14px; padding: 6px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; background: var(--ka-surface); border: var(--ka-bw) solid var(--ka-ink); border-radius: 999px; box-shadow: 0 3px 0 var(--ka-ink); }
.ska-step { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 6px 12px; border-radius: 999px; color: var(--ka-ink); transition: background .15s; }
.ska-step:hover { background: var(--ka-base); color: var(--ka-ink); }
.ska-step.is-on { background: var(--ka-primary); color: #fff; }
.ska-step__n { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--ka-soft); color: var(--ka-ink); font-family: var(--ka-head); font-weight: 700; border: 2px solid var(--ka-ink); }
.ska-step.is-done .ska-step__n { background: var(--ka-mint); }
.ska-step.is-on .ska-step__n { background: var(--ka-sun); }
.ska-step__txt { display: grid; line-height: 1.1; min-width: 0; }
.ska-step__fr { font-family: var(--ka-head); font-weight: 600; font-size: 1.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ska-step__en { font-size: .78em; opacity: .8; font-weight: 700; }

/* Stage, cards */
.ska-stage { position: relative; background: var(--ka-surface); border: var(--ka-bw) solid var(--ka-ink); border-radius: calc(var(--ka-r) + 8px); box-shadow: var(--ka-shadow); padding: clamp(18px, 3vw, 44px); min-height: 380px; }
.ska-learn { display: grid; justify-items: center; gap: 18px; }
.ska-learn:focus { outline: none; }
.ska-learn__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(10px, 2vw, 32px); width: 100%; max-width: 760px; }
.ska-flash { margin: 0; display: grid; justify-items: center; gap: 14px; }
.ska-flash__pic { width: clamp(170px, min(24vw, 36vh), 360px); height: clamp(170px, min(24vw, 36vh), 360px); border-radius: 36px; background: var(--ka-base); border: var(--ka-bw) dashed var(--ka-line); font-size: clamp(100px, min(14vw, 22vh), 220px); }
.ska-pic img.emoji { width: .9em !important; height: .9em !important; margin: 0 !important; }
.ska-flash__pic.ska-pic--image { background: #fff; border-style: solid; border-color: var(--ka-line); padding: 10px; }
.ska-flash figcaption { display: grid; justify-items: center; gap: 2px; text-align: center; }
.ska-word { font-family: var(--ka-head); font-weight: 600; font-size: clamp(32px, 2.4vw + 20px, 64px); line-height: 1.1; color: var(--ka-ink); }
.ska-hint { color: var(--ka-muted); font-weight: 700; }
.ska-arrow, .ska-speak { display: grid; place-items: center; border-radius: 50%; border: var(--ka-bw) solid var(--ka-ink); background: var(--ka-surface); color: var(--ka-ink); cursor: pointer; box-shadow: 0 4px 0 var(--ka-ink); transition: transform .12s, box-shadow .12s, background .15s; }
.ska-arrow { width: clamp(56px, 5vw, 76px); height: clamp(56px, 5vw, 76px); }
.ska-arrow:hover:not([disabled]), .ska-speak:hover { background: var(--ka-soft); transform: translateY(-2px); }
.ska-arrow:active:not([disabled]), .ska-speak:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ka-ink); }
.ska-arrow[disabled] { opacity: .3; cursor: default; box-shadow: none; }
.ska-speak { width: 52px; height: 52px; }
.ska-speak--big { width: 76px; height: 76px; background: var(--ka-sun); }
.ska-speak.is-playing { animation: ska-pulse 1s infinite; background: var(--ka-sun); }
.ska-learn__foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; }
.ska-count { font-family: var(--ka-head); font-weight: 600; font-size: 1.3em; min-width: 64px; text-align: center; }
.ska-dots { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.ska-dots span { width: 12px; height: 12px; border-radius: 50%; background: var(--ka-line); border: 2px solid transparent; }
.ska-dots .is-seen { background: var(--ka-mint); }
.ska-dots .is-on { background: var(--ka-primary); transform: scale(1.25); }

/* Buttons */
.ska-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 26px; border-radius: 999px; border: var(--ka-bw) solid var(--ka-ink); background: var(--ka-surface); color: var(--ka-ink); font-family: var(--ka-head); font-weight: 600; font-size: 1.1em; cursor: pointer; box-shadow: 0 4px 0 var(--ka-ink); transition: transform .12s, box-shadow .12s, background .15s; text-align: center; }
.ska-btn:hover { transform: translateY(-2px); color: var(--ka-ink); }
.ska-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ka-ink); }
.ska-btn--go { background: var(--ka-primary); color: #fff; }
.ska-btn--go:hover { background: var(--ka-primary-dark); color: #fff; }
.ska-btn--soft { background: var(--ka-soft); }
.ska-btn--ghost { background: transparent; box-shadow: none; }
.ska-btn--ghost:hover { background: var(--ka-base); }
.ska-btn[aria-pressed="true"] { background: var(--ka-sun); }

/* Game */
.ska-qbar { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; font-family: var(--ka-head); font-weight: 600; color: var(--ka-muted); }
.ska-meter--q { max-width: none; flex: 1; height: 14px; }
.ska-game { display: grid; justify-items: center; gap: clamp(16px, 2vw, 28px); }
.ska-qcard { display: grid; justify-items: center; gap: 10px; }
.ska-q__pic { width: clamp(160px, min(20vw, 30vh), 300px); height: clamp(160px, min(20vw, 30vh), 300px); border-radius: 36px; background: var(--ka-base); font-size: clamp(96px, min(12vw, 19vh), 190px); border: var(--ka-bw) dashed var(--ka-line); }
.ska-q__pic.ska-pic--image { background: #fff; padding: 10px; border-style: solid; }
.ska-word--q { margin: 0; padding: 6px 26px; border-radius: 18px; background: var(--ka-soft); border: var(--ka-bw) solid var(--ka-ink); }
.ska-yns { display: flex; gap: clamp(16px, 3vw, 40px); justify-content: center; flex-wrap: wrap; }
.ska-yn { display: grid; justify-items: center; align-content: center; gap: 2px; width: clamp(130px, 14vw, 190px); min-height: 130px; border-radius: 28px; border: var(--ka-bw) solid var(--ka-ink); cursor: pointer; font-family: var(--ka-head); font-weight: 600; font-size: 1.4em; color: var(--ka-ink); box-shadow: 0 5px 0 var(--ka-ink); transition: transform .12s, box-shadow .12s; }
.ska-yn small { font-family: var(--ka-body); font-size: .55em; font-weight: 700; opacity: .8; }
.ska-yn--yes { background: #CFF3E5; }
.ska-yn--no { background: #FFDCD7; }
.ska-yn:hover:not([disabled]) { transform: translateY(-3px); }
.ska-yn:active:not([disabled]) { transform: translateY(3px); box-shadow: 0 2px 0 var(--ka-ink); }
.ska-yn[disabled] { cursor: default; opacity: .55; }
.ska-yn.is-right, .ska-yn.is-answer { opacity: 1; background: var(--ka-mint); }
.ska-yn.is-wrong { opacity: 1; background: var(--ka-coral); color: #fff; }
.ska-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px; width: 100%; max-width: 900px; }
.ska-choice, .ska-wordbtn, .ska-chipbtn, .ska-mbtn, .ska-vf { border: var(--ka-bw) solid var(--ka-ink); background: var(--ka-surface); color: var(--ka-ink); cursor: pointer; box-shadow: 0 4px 0 var(--ka-ink); transition: transform .12s, box-shadow .12s, background .15s; font-family: var(--ka-head); font-weight: 600; }
.ska-choice { min-height: 76px; padding: 10px 18px; border-radius: 22px; font-size: clamp(22px, 1vw + 16px, 32px); }
.ska-choice:hover:not([disabled]), .ska-wordbtn:hover:not([disabled]), .ska-chipbtn:hover:not([disabled]), .ska-mbtn:hover:not([disabled]), .ska-vf:hover:not([disabled]) { transform: translateY(-2px); background: var(--ka-soft); }
.ska-choice:active:not([disabled]), .ska-wordbtn:active:not([disabled]), .ska-chipbtn:active:not([disabled]), .ska-mbtn:active:not([disabled]), .ska-vf:active:not([disabled]) { transform: translateY(3px); box-shadow: 0 1px 0 var(--ka-ink); }
.ska-choice[disabled], .ska-chipbtn[disabled] { cursor: default; }
.ska-choice.is-right, .ska-wordbtn.is-right, .ska-chipbtn.is-right { background: var(--ka-mint); }
.ska-choice.is-wrong, .ska-wordbtn.is-wrong, .ska-chipbtn.is-wrong { background: #FFDCD7; border-color: var(--ka-danger); box-shadow: 0 4px 0 var(--ka-danger); color: var(--ka-danger); text-decoration: line-through; }
.ska-wordgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 12px; width: 100%; }
.ska-wordbtn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 64px; padding: 8px 14px; border-radius: 18px; font-size: clamp(18px, .6vw + 15px, 24px); }
.ska-wordbtn.is-wrong { text-decoration: none; }
.ska-wordbtn[disabled] { cursor: default; box-shadow: 0 2px 0 var(--ka-ink); }
.ska-wordbtn__pic:empty { display: none; }
.ska-mini { width: 34px; height: 34px; font-size: 28px; border-radius: 8px; }
.ska-qcard--find .ska-q__pic { width: clamp(140px, 16vw, 240px); height: clamp(140px, 16vw, 240px); font-size: clamp(84px, 10vw, 150px); }
.ska-next { margin-top: 4px; }

/* Coach bubble (Zazou) */
.ska-coach { display: flex; align-items: center; gap: 10px; position: absolute; left: clamp(8px, 2vw, 24px); bottom: clamp(8px, 2vw, 20px); max-width: min(380px, 70%); opacity: 0; transform: translateY(10px); transition: opacity .25s, transform .25s; pointer-events: none; }
.ska-coach.is-on { opacity: 1; transform: none; }
.ska-coach__img { width: clamp(56px, 6vw, 92px); height: auto; flex: none; }
.ska-coach__msg { background: var(--ka-surface); border: var(--ka-bw) solid var(--ka-ink); border-radius: 18px 18px 18px 4px; padding: 8px 14px; font-family: var(--ka-head); font-weight: 600; box-shadow: 0 3px 0 var(--ka-ink); }
.ska-coach.is-good .ska-coach__msg { background: #D8F5EA; }
.ska-coach.is-bad .ska-coach__msg { background: #FFE9E5; }
.ska-stage:has(.ska-coach) { padding-bottom: clamp(110px, 10vw, 140px); }

/* Results */
.ska-result { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 3vw, 40px); flex-wrap: wrap; padding: 20px 0; text-align: center; }
.ska-result__img { width: clamp(130px, 14vw, 220px); height: auto; }
.ska-result__txt { display: grid; justify-items: center; gap: 8px; }
.ska-result__title, .ska-end__title { font-family: var(--ka-head); font-weight: 600; font-size: clamp(26px, 1.4vw + 18px, 44px); margin: 0; line-height: 1.1; }
.ska-score { margin: 0; font-weight: 800; color: var(--ka-muted); font-size: 1.1em; }
.ska-score--big { font-size: 1.4em; color: var(--ka-ink); }
.ska-end { position: relative; display: grid; justify-items: center; gap: 12px; text-align: center; padding: clamp(10px, 2vw, 24px) 0; overflow: hidden; }
.ska-end__img { width: clamp(150px, 16vw, 260px); height: auto; animation: ska-bounce 1.6s ease-in-out infinite; }
.ska-end__btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.ska-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ska-confetti i { position: absolute; top: -20px; width: 12px; height: 16px; border-radius: 3px; animation: ska-fall 2.4s cubic-bezier(.2, .6, .4, 1) forwards; }

/* Stories index */
.ska-level { margin-bottom: clamp(28px, 3vw, 48px); }
.ska-level__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.ska-chip { display: inline-grid; place-items: center; min-width: 54px; height: 40px; padding: 0 12px; border-radius: 999px; background: var(--ka-primary); color: #fff; font-family: var(--ka-head); font-weight: 700; font-size: 1.1em; border: var(--ka-bw) solid var(--ka-ink); }
.ska-level--1 .ska-chip { background: var(--ka-mint); color: var(--ka-ink); } .ska-level--2 .ska-chip { background: var(--ka-coral); } .ska-level--3 .ska-chip { background: var(--ka-sky); color: var(--ka-ink); }
.ska-level__name { font-family: var(--ka-head); font-weight: 600; font-size: clamp(24px, 1vw + 18px, 36px); margin: 0; line-height: 1.1; }
.ska-level__name:focus { outline: none; }
.ska-level__desc { color: var(--ka-muted); font-weight: 700; }
.ska-scards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: clamp(14px, 1.6vw, 26px); }
.ska-scards > li { animation: ska-in .4s both; animation-delay: calc(var(--i, 0) * 40ms); }
.ska-scard { position: relative; display: flex; flex-direction: column; gap: 6px; height: 100%; min-height: 170px; padding: 20px; border-radius: var(--ka-r); background: var(--ka-surface); border: var(--ka-bw) solid var(--ka-ink); box-shadow: var(--ka-shadow); color: var(--ka-ink); transition: transform .18s, box-shadow .18s; }
a.ska-scard:hover { transform: translateY(-4px) rotate(.5deg); box-shadow: 0 9px 0 var(--ka-ink); color: var(--ka-ink); }
.ska-scard.is-free { background: #FFFDF6; }
.ska-scard.is-locked { background: #F6F4FB; }
.ska-scard.is-soon { opacity: .7; }
.ska-scard__label { margin: 0; font-size: .82em; font-weight: 800; color: var(--ka-muted); }
.ska-scard__title { font-family: var(--ka-head); font-weight: 600; font-size: clamp(20px, .6vw + 17px, 28px); line-height: 1.15; }
.ska-scard__foot { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-weight: 800; color: var(--ka-muted); }
.ska-freepill, .ska-prempill, .ska-lockpill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: .85em; font-weight: 800; border: 2px solid var(--ka-ink); }
.ska-freepill { background: var(--ka-mint); color: var(--ka-ink); }
.ska-prempill { background: var(--ka-sun); color: var(--ka-ink); }
.ska-lockpill { background: var(--ka-surface); color: var(--ka-ink); }
.ska-go { display: inline-flex; align-items: center; gap: 4px; color: var(--ka-primary); font-family: var(--ka-head); font-weight: 600; font-size: 1.05em; }
.ska-scard__cta { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 10px; padding: 8px 16px; border-radius: 999px; background: var(--ka-primary); color: #fff; font-family: var(--ka-head); font-weight: 600; text-align: center; border: var(--ka-bw) solid var(--ka-ink); box-shadow: 0 3px 0 var(--ka-ink); line-height: 1.2; }
.ska-scard__cta:hover { background: var(--ka-primary-dark); color: #fff; }

/* Story view */
.ska-story { display: grid; gap: 18px; margin-bottom: 26px; }
.ska-story__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ska-book { position: relative; background: var(--ka-surface); border: var(--ka-bw) solid var(--ka-ink); border-radius: calc(var(--ka-r) + 8px); box-shadow: var(--ka-shadow); padding: clamp(20px, 3.4vw, 52px); padding-right: clamp(20px, 14vw, 240px); }
.ska-book__img { position: absolute; right: clamp(-6px, 1vw, 24px); bottom: clamp(-6px, 1vw, 20px); width: clamp(90px, 12vw, 200px); height: auto; }
.ska-text { font-size: clamp(19px, .6vw + 16px, 26px); line-height: 1.75; max-width: 64ch; }
.ska-text p { margin: 0 0 .7em; border-radius: 10px; transition: background .2s; }
.ska-text p:last-child { margin-bottom: 0; }
.ska-text p.ska-dlg { position: relative; display: inline-block; margin-left: 4px; padding: 6px 16px; background: #EEF5FF; border: 2px solid var(--ka-ink); border-radius: 18px 18px 18px 4px; }
.ska-text p.ska-dlg + p:not(.ska-dlg) { margin-top: .4em; }
.ska-text p.ska-dlg { display: table; }
.ska-text p.is-reading { background: var(--ka-soft); box-shadow: 0 0 0 6px var(--ka-soft); }
.ska-text p.ska-dlg.is-reading { background: var(--ka-sun); }
.ska-ex { background: var(--ka-surface); border: var(--ka-bw) solid var(--ka-ink); border-radius: calc(var(--ka-r) + 8px); box-shadow: var(--ka-shadow); padding: clamp(18px, 3vw, 40px); margin-bottom: 24px; }
.ska-ex__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ska-ex__n { display: inline-block; padding: 4px 14px; border-radius: 999px; background: var(--ka-sun); border: 2px solid var(--ka-ink); font-weight: 800; font-size: .85em; }
.ska-ex--2 .ska-ex__n { background: var(--ka-sky); } .ska-ex--3 .ska-ex__n { background: var(--ka-mint); }
.ska-ex__title { font-family: var(--ka-head); font-weight: 600; font-size: clamp(24px, 1vw + 18px, 34px); margin: 0; line-height: 1.1; }
.ska-ex__en { color: var(--ka-muted); font-weight: 700; }
.ska-tip--ex { flex-basis: 100%; margin: 0; }
.ska-tf { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ska-tf__row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 18px; background: var(--ka-base); transition: background .2s; }
.ska-tf__row.is-right { background: #E4F8EF; }
.ska-tf__row.is-wrong { background: #FFECE9; }
.ska-tf__n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--ka-surface); border: 2px solid var(--ka-ink); font-weight: 800; font-size: .9em; }
.ska-tf__s { font-size: 1.05em; font-weight: 700; }
.ska-tf__btns { display: flex; gap: 10px; }
.ska-vf { width: 60px; height: 56px; border-radius: 16px; font-size: 1.4em; }
.ska-vf--v { background: #E4F8EF; } .ska-vf--f { background: #FFECE9; }
.ska-vf[disabled] { cursor: default; opacity: .45; box-shadow: 0 2px 0 var(--ka-ink); }
.ska-vf.is-right, .ska-vf.is-answer { opacity: 1; background: var(--ka-mint); }
.ska-vf.is-wrong { opacity: 1; background: var(--ka-coral); color: #fff; }
.ska-match { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 3vw, 48px); }
.ska-match__col { display: grid; gap: 10px; align-content: start; }
.ska-mbtn { min-height: 60px; padding: 8px 16px; border-radius: 18px; font-size: clamp(17px, .5vw + 15px, 22px); text-align: left; }
.ska-mbtn.is-sel { background: var(--ka-sun); transform: translateY(-2px) scale(1.02); }
.ska-mbtn.is-wrong { background: #FFDCD7; border-color: var(--ka-danger); }
.ska-mbtn[disabled] { cursor: default; box-shadow: 0 2px 0 var(--ka-ink); }
.ska-mbtn.ska-m0 { background: #D8F5EA; } .ska-mbtn.ska-m1 { background: #E2F0FF; } .ska-mbtn.ska-m2 { background: #FFF0C2; } .ska-mbtn.ska-m3 { background: #E6E6FB; } .ska-mbtn.ska-m4 { background: #FFE1DD; }
.ska-mbtn.is-matched::after { content: "\2713"; float: right; font-weight: 800; color: var(--ka-success); }
.ska-ex3 { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: ex3; }
.ska-fill, .ska-order { padding: 14px 16px; border-radius: 18px; background: var(--ka-base); display: grid; gap: 12px; transition: background .2s; }
.ska-fill.is-right, .ska-order.is-right { background: #E4F8EF; }
.ska-fill__s { margin: 0; font-size: 1.15em; font-weight: 700; line-height: 1.9; }
.ska-slot { display: inline-block; min-width: 90px; padding: 0 12px; border-bottom: 4px solid var(--ka-primary); text-align: center; color: var(--ka-primary); font-family: var(--ka-head); font-weight: 600; line-height: 1.3; }
.ska-slot.is-right { color: var(--ka-success); border-color: var(--ka-success); }
.ska-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.ska-chipbtn { min-height: 52px; padding: 6px 18px; border-radius: 999px; font-size: 1.05em; }
.ska-chipbtn.is-placed { background: var(--ka-soft); }
.ska-built { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 68px; padding: 8px 10px; border: var(--ka-bw) dashed var(--ka-ink); border-radius: 18px; background: var(--ka-surface); }
.ska-built.is-wrong { border-color: var(--ka-danger); background: #FFF1EF; }
.ska-order.is-right .ska-built { border-style: solid; border-color: var(--ka-success); }
.ska-built__ph { color: var(--ka-muted); font-weight: 700; font-size: .9em; padding: 0 6px; }
.ska-order__tools { display: flex; justify-content: flex-end; }
.ska-order.is-right .ska-order__tools, .ska-order.is-right > .ska-chips:empty { display: none; }
.ska-order__ok { margin: 0; font-weight: 800; color: var(--ka-success); }
.ska-mini-btn { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: var(--ka-bw) solid var(--ka-ink); background: var(--ka-surface); color: var(--ka-ink); cursor: pointer; }
.ska-mini-btn[disabled] { opacity: .35; cursor: default; }
.ska-finish { margin-top: 8px; }
.ska-finish__todo { display: grid; justify-items: center; gap: 6px; color: var(--ka-muted); font-weight: 700; text-align: center; }
.ska-finish__todo p { margin: 0; }
.ska-finish .ska-end { background: var(--ka-soft); border: var(--ka-bw) solid var(--ka-ink); border-radius: calc(var(--ka-r) + 8px); box-shadow: var(--ka-shadow); padding: clamp(20px, 3vw, 40px); }
.ska-locked { display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); flex-wrap: wrap; background: #F6F4FB; border: var(--ka-bw) solid var(--ka-ink); border-radius: calc(var(--ka-r) + 8px); box-shadow: var(--ka-shadow); padding: clamp(20px, 3vw, 44px); }
.ska-locked > div { flex: 1; min-width: 240px; display: grid; gap: 8px; justify-items: start; }
.ska-locked p { margin: 0; }
.ska-locked__img { width: clamp(120px, 14vw, 220px); height: auto; }
.ska-locked__title { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ka-head); font-weight: 600; font-size: 1.2em; color: var(--ka-primary); }
.ska-loading { display: grid; justify-items: center; gap: 10px; padding: 40px 0; color: var(--ka-muted); font-weight: 700; }
.ska-loading__img { width: 120px; height: auto; animation: ska-bounce 1.2s ease-in-out infinite; }
.ska-error { display: grid; justify-items: center; gap: 12px; padding: 30px; text-align: center; background: #FFECE9; border-radius: var(--ka-r); }
.ska-error p { margin: 0; font-weight: 700; }

/* Hub */
.sora-ka-hub__head { margin-bottom: 20px; }
.sora-ka-hub__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(16px, 2vw, 32px); }
.sora-ka-hub__card { position: relative; display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); padding: clamp(20px, 2.6vw, 40px); border-radius: calc(var(--ka-r) + 10px); border: var(--ka-bw) solid var(--ka-ink); box-shadow: 0 6px 0 var(--ka-ink); color: var(--ka-ink); overflow: hidden; transition: transform .18s, box-shadow .18s; min-height: 220px; }
.sora-ka-hub__card--vocab { background: #E4F1FF; }
.sora-ka-hub__card--stories { background: var(--ka-soft); }
a.sora-ka-hub__card:hover { transform: translateY(-5px) rotate(-.5deg); box-shadow: 0 11px 0 var(--ka-ink); color: var(--ka-ink); }
.sora-ka-hub__card img { width: clamp(110px, 12vw, 200px); height: auto; flex: none; order: 2; margin-left: auto; }
.sora-ka-hub__text { display: grid; gap: 6px; }
.sora-ka-hub__sub { font-weight: 800; color: var(--ka-muted); font-size: .9em; }
.sora-ka-hub__title { font-family: var(--ka-head); font-weight: 600; font-size: clamp(26px, 1.4vw + 18px, 44px); line-height: 1.05; }
.sora-ka-hub__meta { font-weight: 700; color: var(--ka-muted); }
.sora-ka-hub__go { display: inline-flex; align-items: center; gap: 8px; justify-self: start; margin-top: 8px; padding: 10px 20px; border-radius: 999px; background: var(--ka-primary); color: #fff; font-family: var(--ka-head); font-weight: 600; border: var(--ka-bw) solid var(--ka-ink); }

/* Motion */
.is-pop { animation: ska-pop .35s cubic-bezier(.3, 1.6, .5, 1) both; }
.is-shake { animation: ska-shake .45s both; }
@keyframes ska-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes ska-pop { from { transform: scale(.85); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes ska-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } }
@keyframes ska-pulse { 0%, 100% { box-shadow: 0 4px 0 var(--ka-ink), 0 0 0 0 rgba(255, 201, 60, .7); } 50% { box-shadow: 0 4px 0 var(--ka-ink), 0 0 0 14px rgba(255, 201, 60, 0); } }
@keyframes ska-star { from { transform: scale(0) rotate(-40deg); } 70% { transform: scale(1.25) rotate(8deg); } to { transform: scale(1); } }
@keyframes ska-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes ska-fall { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--x), 520px) rotate(var(--r)); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
	.sora-ka *, .sora-ka *::before, .sora-ka *::after { animation: none !important; transition: none !important; }
	.ska-stars--big .ska-star:nth-child(2) { transform: translateY(-10px); }
}

/* Small screens */
@media (max-width: 720px) {
	.sora-ka__hero { padding: 18px; gap: 12px; }
	.sora-ka__hero::before { width: 200px; height: 200px; right: -50px; top: -60px; }
	.ska-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 26px; }
	.ska-step { justify-content: flex-start; min-height: 52px; border-radius: 20px; padding: 6px 8px; gap: 8px; }
	.ska-step__fr { white-space: normal; font-size: .95em; }
	.ska-learn__row { grid-template-columns: 1fr 1fr; }
	.ska-learn__row .ska-flash { grid-column: 1 / -1; grid-row: 1; }
	.ska-learn__row .ska-arrow:first-child { justify-self: end; }
	.ska-learn__row .ska-arrow { width: 64px; height: 64px; }
	.ska-tf__row { grid-template-columns: 30px minmax(0, 1fr); }
	.ska-tf__btns { grid-column: 1 / -1; justify-content: flex-end; }
	.ska-vf { width: 72px; }
	.ska-match { grid-template-columns: 1fr 1fr; gap: 10px; }
	.ska-mbtn { padding: 8px 10px; }
	.ska-book { padding-right: 20px; padding-bottom: 110px; }
	.ska-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ska-tile { padding: 16px 10px; }
	.ska-coach { position: static; max-width: 100%; margin-top: 16px; justify-content: center; }
	.ska-stage:has(.ska-coach) { padding-bottom: clamp(18px, 3vw, 44px); }
	.ska-yn { min-height: 110px; width: calc(50% - 10px); }
	.ska-yns { gap: 16px; width: 100%; flex-wrap: nowrap; }
}
@media (max-width: 400px) {
	.sora-ka__hero-img { width: 96px; }
	.ska-choice { min-height: 64px; }
}
@media (min-width: 1800px) {
	.sora-ka { max-width: 1680px; }
}

/* Story recording (0.1.5) */
.ska-rec-wrap{margin:0 0 16px;padding:10px 14px;border:2px solid #F1E2BC;border-radius:18px;background:#FFF9EC}
.ska-rec{display:block;width:100%;height:44px}

/* 0.3.1: full pages use the same room as Flash Grammaire: wider, with space under the header */
.wp-block-post-content.is-layout-constrained > .sora-ka { max-width: min(1680px, 100%) !important; margin-top: clamp(24px, 3.5vw, 48px) !important; margin-bottom: clamp(32px, 4vw, 56px) !important; }
.ska-scard.is-locked .ska-scard__foot { flex-wrap: nowrap; }
.ska-scard.is-locked .ska-lockpill, .ska-scard .ska-go { white-space: nowrap; }

/* Editors: link to the visual builder */
.ska-editbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; color: var(--ska-muted, #5A5775); font-size: 14px; }
.ska-btn--edit { background: #FFC93C; border-color: #E5A800; color: #23214A; text-decoration: none; min-height: 40px; padding: 8px 16px; font-size: 15px; }
/* Live preview inside the builder: only the activity is shown. */
html.ka-preview-mode { margin-top: 0 !important; scroll-behavior: auto; }
.ka-preview-mode #wpadminbar, .ka-preview-mode .wp-site-blocks > :not(:has(.sora-ka)), .ka-preview-mode .wp-block-post-content > :not(.sora-ka) { display: none !important; }
.ka-preview-mode .wp-site-blocks, .ka-preview-mode .wp-site-blocks > * { margin: 0 !important; padding-top: 0 !important; }
.ka-preview-mode .wp-block-post-content.is-layout-constrained > .sora-ka { margin-top: 16px !important; }