/* RT-TXT-066 — 한글 단어 조합기. "자모 놀이터": night-indigo stage, coral consonants,
 * mint vowels, lemon blanks. Loaded on this page only, after tool-page.css.
 *
 * Contrast: every bright fill (coral, mint, lemon, peach) carries DARK ink
 * (--kj-ink), never white — white on coral is ~2.8:1. Light text sits only on
 * the night stage (≥ 9:1). Korean wraps between words (word-break: keep-all).
 * Motion is decorative and off under prefers-reduced-motion. */

.kj {
    --kj-night: #15113a;
    --kj-night-2: #241a5c;
    --kj-ink: #1b1530;
    --kj-ink-soft: #4f4a63;
    --kj-cream: #fff8ef;
    --kj-paper: #ffffff;
    --kj-line: #ece6f7;
    --kj-coral: #ff5c7a;
    --kj-coral-deep: #c81e4a;
    --kj-mint: #2ee6b6;
    --kj-lemon: #ffd43b;
    --kj-peach: #ffa36b;
    --kj-sky: #7aa2ff;
    --kj-violet: #8b5cf6;
    --kj-on-night: #ffffff;
    --kj-on-night-soft: #cfc9f5;
    --kj-radius: 22px;
    font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Pretendard", system-ui, -apple-system, sans-serif;
    color: var(--kj-ink);
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.kj *, .kj *::before, .kj *::after { box-sizing: border-box; }
.kj-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── family switcher ─────────────────────────────────────────────────── */
.kj-family {
    display: flex; gap: .5rem; margin: .25rem 0 1rem; padding: .25rem 0 .5rem;
    overflow-x: auto; scrollbar-width: none;
}
.kj-family::-webkit-scrollbar { display: none; }
.kj-family__item {
    flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px;
    padding: .4rem .95rem; border-radius: 999px; border: 2px solid var(--kj-line);
    background: var(--kj-paper); color: var(--kj-ink); font-weight: 700; font-size: .9rem;
    text-decoration: none; transition: transform .15s ease, border-color .15s ease;
}
.kj-family__item:hover { border-color: var(--kj-coral); transform: translateY(-1px); }
.kj-family__item.is-here { background: var(--kj-night); border-color: var(--kj-night); color: var(--kj-on-night); }

/* ── stage ───────────────────────────────────────────────────────────── */
.kj .kj-stage {
    position: relative; overflow: hidden; isolation: isolate;
    padding: clamp(1.25rem, 4vw, 2.25rem);
    border: 0; border-radius: 28px;
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(255, 92, 122, .38) 0%, rgba(255, 92, 122, 0) 55%),
        radial-gradient(90% 80% at 0% 100%, rgba(139, 92, 246, .45) 0%, rgba(139, 92, 246, 0) 60%),
        linear-gradient(160deg, var(--kj-night) 0%, var(--kj-night-2) 100%);
    color: var(--kj-on-night);
    box-shadow: 0 24px 60px -28px rgba(21, 17, 58, .65);
}
.kj-stage__deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.kj-stage__deco span {
    position: absolute; font-weight: 900; color: rgba(255, 255, 255, .07);
    font-size: clamp(3rem, 9vw, 5.5rem); line-height: 1; animation: kj-float 9s ease-in-out infinite;
}
.kj-stage__deco span:nth-child(1) { top: 6%; right: 6%; animation-delay: -1s; }
.kj-stage__deco span:nth-child(2) { top: 38%; right: 18%; animation-delay: -3s; color: rgba(46, 230, 182, .09); }
.kj-stage__deco span:nth-child(3) { bottom: 8%; right: 4%; animation-delay: -5s; }
.kj-stage__deco span:nth-child(4) { top: 14%; right: 32%; animation-delay: -2s; color: rgba(255, 212, 59, .08); }
.kj-stage__deco span:nth-child(5) { bottom: 26%; right: 36%; animation-delay: -6s; }
.kj-stage__deco span:nth-child(6) { top: 58%; right: 2%; animation-delay: -4s; color: rgba(255, 92, 122, .1); }
.kj-stage__deco span:nth-child(7) { bottom: 2%; right: 22%; animation-delay: -7s; }
.kj-stage__deco span:nth-child(8) { top: 2%; right: 50%; animation-delay: -8s; color: rgba(46, 230, 182, .07); }
.kj-stage__deco span::before { content: attr(data-j); }
@keyframes kj-float { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-10px) rotate(4deg); } }

.kj-kicker {
    display: inline-block; margin: 0 0 .75rem; padding: .3rem .75rem; border-radius: 999px;
    background: var(--kj-lemon); color: var(--kj-ink); font-size: .8rem; font-weight: 800; letter-spacing: .04em;
    transform: rotate(-2deg);
}
.kj-kicker--dark { background: var(--kj-ink); color: var(--kj-lemon); }
.kj-title {
    margin: 0 0 .6rem; color: var(--kj-on-night); font-weight: 900; letter-spacing: -.03em; line-height: 1.15;
    font-size: clamp(1.75rem, 5.5vw, 2.85rem);
}
.kj-br { display: none; }
@media (max-width: 520px) { .kj-br { display: inline; } }
.kj-lede { margin: 0 0 1.25rem; max-width: 34rem; color: var(--kj-on-night-soft); font-size: 1rem; line-height: 1.65; }

/* input */
.kj-field {
    display: flex; align-items: center; gap: .4rem; padding: .35rem .35rem .35rem 1.1rem;
    border-radius: 999px; background: var(--kj-paper); box-shadow: 0 0 0 4px rgba(255, 255, 255, .12);
    transition: box-shadow .2s ease;
}
.kj-field:focus-within { box-shadow: 0 0 0 4px var(--kj-lemon); }
.kj-input {
    flex: 1 1 auto; min-width: 0; height: 48px; border: 0; outline: 0; background: transparent;
    color: var(--kj-ink); font: inherit; font-size: 1.25rem; font-weight: 700; letter-spacing: .02em;
}
.kj-input::placeholder { color: #8e88a3; font-weight: 500; font-size: 1rem; }
.kj-clear {
    flex: 0 0 auto; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
    background: #f1edf9; color: var(--kj-ink); font-size: 1.3rem; line-height: 1;
}
.kj-go {
    flex: 0 0 auto; height: 48px; padding: 0 1.4rem; border: 0; border-radius: 999px; cursor: pointer;
    background: var(--kj-coral); color: var(--kj-ink); font: inherit; font-weight: 900; font-size: 1.05rem;
    box-shadow: 0 4px 0 var(--kj-coral-deep); transition: transform .1s ease, box-shadow .1s ease;
}
.kj-go:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--kj-coral-deep); }
.kj-go--dark { background: var(--kj-ink); color: var(--kj-lemon); box-shadow: 0 4px 0 #000; }
.kj-go:disabled { opacity: .55; cursor: default; }
.kj-hint { margin: .6rem .25rem 0; color: var(--kj-on-night-soft); font-size: .85rem; }
.kj-hint kbd {
    display: inline-block; min-width: 1.4em; padding: 0 .35em; border-radius: 6px; text-align: center;
    background: var(--kj-lemon); color: var(--kj-ink); font: inherit; font-weight: 800;
}

/* tiles — the rack reserves its height so typing never pushes the page */
.kj-rack { display: flex; flex-wrap: wrap; gap: .4rem; min-height: 52px; margin: 1rem 0 .25rem; align-content: flex-start; }
/* Before anything is typed the reserved space says what it is for. */
.kj-rack:empty::before {
    content: "자모 타일이 여기에 놓여요"; display: flex; align-items: center; width: 100%; min-height: 52px; padding: 0 1rem;
    border: 2px dashed rgba(255, 255, 255, .22); border-radius: 14px; color: var(--kj-on-night-soft); font-size: .88rem; font-weight: 700;
}
.kj-tile {
    display: inline-grid; place-items: center; width: 42px; height: 46px; border-radius: 12px;
    font-weight: 900; font-size: 1.3rem; line-height: 1; color: var(--kj-ink);
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .18), 0 3px 0 rgba(0, 0, 0, .25);
    animation: kj-pop .28s cubic-bezier(.2, 1.4, .4, 1) both;
}
.kj-tile--consonant { background: var(--kj-coral); }
.kj-tile--vowel { background: var(--kj-mint); }
.kj-tile--blank { background: var(--kj-lemon); }
.kj-tile--over { background: #9a94b0; text-decoration: line-through; }
@keyframes kj-pop { from { transform: scale(.4) rotate(-10deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* controls */
.kj-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem; margin-top: .75rem; }
.kj-seg { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .12); }
.kj-seg__btn {
    min-height: 44px; padding: 0 1rem; border: 0; border-radius: 999px; cursor: pointer;
    background: transparent; color: var(--kj-on-night); font: inherit; font-weight: 800; font-size: .95rem;
}
.kj-seg__btn.is-on { background: var(--kj-lemon); color: var(--kj-ink); }
.kj-switch { display: inline-flex; align-items: center; gap: .5rem; min-height: 40px; cursor: pointer; color: var(--kj-on-night); font-weight: 700; font-size: .92rem; }
.kj-switch small { color: var(--kj-on-night-soft); font-weight: 600; }
.kj-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kj-switch__track {
    position: relative; width: 44px; height: 26px; border-radius: 999px; background: rgba(255, 255, 255, .22); transition: background .2s ease;
}
.kj-switch__track::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
    background: #fff; transition: transform .2s ease;
}
.kj-switch input:checked + .kj-switch__track { background: var(--kj-mint); }
.kj-switch input:checked + .kj-switch__track::after { transform: translateX(18px); }
.kj-switch input:focus-visible + .kj-switch__track { outline: 3px solid var(--kj-lemon); outline-offset: 2px; }
.kj-switch input:disabled + .kj-switch__track { opacity: .4; }

.kj-chip {
    min-height: 40px; padding: 0 .9rem; border-radius: 999px; cursor: pointer;   /* critique 2026-10-02: was 36px */
    border: 2px solid rgba(255, 255, 255, .25); background: transparent; color: var(--kj-on-night);
    font: inherit; font-weight: 700; font-size: .88rem;
}
.kj-chip.is-on { background: var(--kj-on-night); border-color: var(--kj-on-night); color: var(--kj-ink); }
.kj-chip--ghost { border-style: dashed; }
.kj-chip--dark { border-color: rgba(27, 21, 48, .35); color: var(--kj-ink); }
.kj-chip--dark:disabled { opacity: .5; cursor: default; }

.kj-msg { min-height: 1.4em; margin: .75rem .25rem 0; font-size: .92rem; color: var(--kj-on-night-soft); }
.kj-msg--warn { color: var(--kj-lemon); font-weight: 700; }
.kj-msg--info { color: var(--kj-on-night-soft); }

/* filters + results */
.kj-filters { display: flex; flex-wrap: wrap; gap: .6rem 1.1rem; margin: 1.25rem 0 0; padding-top: 1.1rem; border-top: 1px dashed rgba(255, 255, 255, .2); }
.kj-filters[hidden] { display: none; }
.kj-filter { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.kj-filter__label { color: var(--kj-on-night-soft); font-weight: 800; font-size: .8rem; margin-right: .2rem; }
.kj-switch--small { font-size: .88rem; }

.kj-results { margin-top: 1rem; }
.kj-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .6rem; color: var(--kj-on-night-soft); margin-bottom: .9rem; }
.kj-summary strong { color: var(--kj-on-night); font-size: 1.35rem; font-weight: 900; }
.kj-summary__full { padding: .15rem .6rem; border-radius: 999px; background: var(--kj-lemon); color: var(--kj-ink); font-weight: 800; font-size: .8rem; }
.kj-summary__ms { margin-left: auto; font-size: .8rem; }
.kj-empty { color: var(--kj-on-night-soft); }
.kj-group + .kj-group { margin-top: 1.1rem; }
.kj-group__title { display: flex; align-items: center; gap: .5rem; margin: 0 0 .55rem; color: var(--kj-on-night); font-size: 1rem; font-weight: 900; }
.kj-group__count { padding: .05rem .5rem; border-radius: 999px; background: rgba(255, 255, 255, .14); color: var(--kj-on-night-soft); font-size: .78rem; }
.kj-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .5rem; }
.kj-card {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .15rem;
    min-height: 64px; padding: .6rem .7rem .55rem 1rem; border: 0; border-radius: 14px; cursor: pointer; text-align: left;
    background: var(--kj-paper); color: var(--kj-ink); font: inherit;
    box-shadow: 0 3px 0 rgba(0, 0, 0, .22); transition: transform .12s ease;
}
.kj-card::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 5px; border-radius: 0 4px 4px 0; background: #b7b1c9; }
.kj-card--l1::before { background: var(--kj-mint); }
.kj-card--l2::before { background: var(--kj-sky); }
.kj-card--l3::before { background: var(--kj-coral); }
.kj-card:hover { transform: translateY(-2px) rotate(-.6deg); }
.kj-card:focus-visible { outline: 3px solid var(--kj-lemon); outline-offset: 2px; }
.kj-card__word { font-size: 1.15rem; font-weight: 900; letter-spacing: -.01em; }
.kj-card__meta { font-size: .75rem; color: var(--kj-ink-soft); font-weight: 700; }
.kj-card.is-full { background: linear-gradient(135deg, #fffbe6, #fff); box-shadow: 0 0 0 2px var(--kj-lemon), 0 3px 0 rgba(0, 0, 0, .22); }
.kj-card__badge {
    position: absolute; top: -8px; right: -4px; padding: .1rem .45rem; border-radius: 999px;
    background: var(--kj-lemon); color: var(--kj-ink); font-size: .7rem; font-weight: 900; transform: rotate(4deg);
}
.kj-more {
    display: block; margin: 1rem auto 0; min-height: 44px; padding: 0 1.4rem; border-radius: 999px; cursor: pointer;
    border: 2px solid var(--kj-on-night); background: transparent; color: var(--kj-on-night); font: inherit; font-weight: 800;
}

/* ── word sheet ──────────────────────────────────────────────────────── */
.kj-sheet {
    /* margin: auto restores the UA centring of a modal <dialog>; the site's
       CSS reset zeroes every margin, which pinned the sheet to the top-left. */
    margin: auto;
    width: min(520px, calc(100% - 24px)); max-height: 85vh; padding: 0; border: 0; border-radius: 26px;
    background: var(--kj-cream); color: var(--kj-ink); box-shadow: 0 30px 80px -20px rgba(21, 17, 58, .6);
}
.kj-sheet::backdrop { background: rgba(21, 17, 58, .55); backdrop-filter: blur(3px); }
.kj-sheet__inner { position: relative; padding: 1.6rem 1.4rem 1.4rem; }
.kj-sheet__close {
    position: absolute; top: .8rem; right: .8rem; width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer;
    background: #efe7da; color: var(--kj-ink); font-size: 1.4rem;
}
.kj-sheet__meta { margin: 0 0 .25rem; color: var(--kj-ink-soft); font-weight: 700; font-size: .85rem; }
.kj-sheet__word { margin: 0 0 .9rem; font-size: 2.3rem; font-weight: 900; letter-spacing: -.03em; color: var(--kj-ink); }
.kj-sheet__tiles { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1rem; }
.kj-sheet__tiles .kj-tile { width: 34px; height: 38px; font-size: 1.05rem; animation: none; }
.kj-sheet__def { margin: 0 0 1.1rem; font-size: 1.02rem; line-height: 1.7; color: var(--kj-ink); }
.kj-sheet__link { display: inline-block; color: var(--kj-coral-deep); font-weight: 800; text-decoration: none; border-bottom: 2px solid currentColor; }
@media (max-width: 560px) {
    .kj-sheet { margin: auto auto 0; width: 100%; max-width: 100%; border-radius: 26px 26px 0 0; }
}

/* ── daily puzzle ────────────────────────────────────────────────────── */
.kj-puzzle {
    position: relative; margin: 1.75rem 0; padding: clamp(1.25rem, 4vw, 2rem); border-radius: 28px;
    background: linear-gradient(135deg, var(--kj-lemon) 0%, var(--kj-peach) 100%); color: var(--kj-ink);
    min-height: 290px;   /* reserved: the tiles arrive after the word list loads */
}
.kj-puzzle__head { display: block; }
.kj-puzzle__head .kj-kicker { display: table; }   /* its own line, only as wide as its words */
.kj-puzzle__title { display: inline; margin: 0 .75rem 0 0; font-size: clamp(1.5rem, 4.5vw, 2.1rem); font-weight: 900; letter-spacing: -.03em; color: var(--kj-ink); }
.kj-puzzle__date { display: inline-block; margin: 0; color: var(--kj-ink); font-weight: 700; font-size: .9rem; opacity: .85; }
.kj-puzzle__tiles { display: flex; flex-wrap: wrap; gap: .45rem; min-height: 54px; margin: 1.1rem 0; }
.kj-puzzle__tiles .kj-tile { width: 46px; height: 50px; font-size: 1.45rem; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .18), 0 4px 0 rgba(27, 21, 48, .35); }
.kj-puzzle__tiles.is-solved .kj-tile { animation: kj-cheer .6s ease both; }
.kj-puzzle__tiles.is-solved .kj-tile:nth-child(2n) { animation-delay: .06s; }
.kj-puzzle__tiles.is-shake { animation: kj-shake .35s ease; }
@keyframes kj-cheer { 0% { transform: none; } 40% { transform: translateY(-12px) rotate(-6deg); } 100% { transform: none; } }
@keyframes kj-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.kj-puzzle__form { display: flex; gap: .5rem; flex-wrap: wrap; }
.kj-puzzle__input {
    flex: 1 1 200px; min-width: 0; height: 50px; padding: 0 1.1rem; border: 3px solid var(--kj-ink); border-radius: 999px;
    background: #fff; color: var(--kj-ink); font: inherit; font-size: 1.15rem; font-weight: 800;
}
.kj-puzzle__input:disabled { opacity: .6; }
.kj-puzzle__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .8rem; }
.kj-puzzle__streak { margin-left: auto; font-weight: 900; }
.kj-puzzle__msg { min-height: 1.5em; margin: .9rem 0 0; font-weight: 700; line-height: 1.6; color: var(--kj-ink); }

/* ── reading sections ────────────────────────────────────────────────── */
.kj-h2 { margin: 0 0 1.1rem; font-size: clamp(1.4rem, 4vw, 1.85rem); font-weight: 900; letter-spacing: -.03em; color: var(--kj-ink); }
.kj .tool-section { margin: 2rem 0; }

.kj-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .9rem; }
.kj-step { display: flex; gap: .85rem; padding: 1.1rem; border-radius: var(--kj-radius); background: var(--kj-cream); border: 2px solid #f3e7d6; }
.kj-step:nth-child(2) { transform: rotate(.4deg); }
.kj-step:nth-child(3) { transform: rotate(-.4deg); }
.kj-step__n {
    flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
    background: var(--kj-coral); color: var(--kj-ink); font-weight: 900; font-size: 1.15rem; box-shadow: 0 3px 0 var(--kj-coral-deep);
}
.kj-step:nth-child(2) .kj-step__n { background: var(--kj-mint); box-shadow: 0 3px 0 #13a37f; }
.kj-step:nth-child(3) .kj-step__n { background: var(--kj-lemon); box-shadow: 0 3px 0 #c9a400; }
.kj-step:nth-child(4) .kj-step__n { background: var(--kj-sky); box-shadow: 0 3px 0 #4a6fd6; }
.kj-step h3 { margin: .1rem 0 .35rem; font-size: 1.05rem; font-weight: 900; color: var(--kj-ink); }
.kj-step p { margin: 0; font-size: .95rem; line-height: 1.65; color: var(--kj-ink-soft); }

.kj-read { max-width: 46rem; }
.kj-read h3 { margin: 1.75rem 0 .6rem; font-size: 1.2rem; font-weight: 900; color: var(--kj-ink); }
.kj-read h3::before { content: "■"; margin-right: .45rem; color: var(--kj-coral); font-size: .7em; vertical-align: .15em; }
.kj-read p { margin: 0 0 .95rem; font-size: 1.02rem; line-height: 1.85; color: var(--kj-ink); }
.kj .kj-quote {
    margin: 1.6rem 0; padding: 1.2rem 1.4rem; border: 0; border-radius: var(--kj-radius);
    background: var(--kj-night); color: var(--kj-on-night); position: relative;
}
.kj .kj-quote p { margin: 0; color: var(--kj-on-night); font-size: 1.2rem; font-weight: 800; line-height: 1.6; }
.kj .kj-quote::before { content: "“"; position: absolute; top: -.35em; left: .4em; font-size: 4rem; color: var(--kj-coral); line-height: 1; }

.kj-facts__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .9rem; }
.kj .kj-fact {
    margin: 0; padding: 1.1rem 1.1rem 1.15rem; border: 0; border-radius: var(--kj-radius);
    background: var(--kj-paper); box-shadow: 0 0 0 2px var(--kj-line), 0 6px 0 var(--kj-line);
    transition: transform .15s ease;
}
.kj .kj-fact:nth-child(4n+1) { transform: rotate(-.6deg); }
.kj .kj-fact:nth-child(4n+3) { transform: rotate(.6deg); }
.kj .kj-fact:hover { transform: translateY(-3px); }
.kj-fact__n {
    display: inline-block; margin-bottom: .45rem; padding: .1rem .55rem; border-radius: 8px;
    background: var(--kj-night); color: var(--kj-lemon); font-weight: 900; font-size: .85rem;
}
.kj .kj-fact:nth-child(3n+2) .kj-fact__n { color: var(--kj-mint); }
.kj .kj-fact:nth-child(3n) .kj-fact__n { color: #ff9eb0; }
.kj .kj-fact p { margin: 0; font-size: .97rem; line-height: 1.7; color: var(--kj-ink); }

.kj-faq .faq-question { font-weight: 800; }
.kj-faq .faq-item { border-radius: 16px; }
.kj-faq .faq-answer-inner { line-height: 1.8; }

.kj-credit { margin: 2rem 0; padding: 1.1rem 1.25rem; border-radius: 18px; border: 2px dashed #d9d1ea; background: #faf8fe; }
.kj-credit__title { margin: 0 0 .5rem; font-size: 1rem; font-weight: 900; color: var(--kj-ink); }
.kj-credit p { margin: 0 0 .5rem; font-size: .88rem; line-height: 1.7; color: var(--kj-ink-soft); }
.kj-credit p:last-child { margin-bottom: 0; }
.kj-credit a { color: #5b3fd6; font-weight: 700; }

/* ── mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 520px) {
    /* The language row scrolls sideways on a phone; the fade says so. */
    .kj-family { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
    .kj .kj-stage { border-radius: 22px; }
    .kj-field { padding-left: .9rem; }
    .kj-input { font-size: 1.1rem; }
    .kj-go { padding: 0 1.05rem; }
    .kj-tile { width: 36px; height: 40px; font-size: 1.1rem; border-radius: 10px; }
    .kj-cards { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
    .kj-summary__ms { margin-left: 0; }
    .kj-puzzle__tiles .kj-tile { width: 40px; height: 44px; font-size: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    .kj-stage__deco span, .kj-tile, .kj-puzzle__tiles.is-solved .kj-tile, .kj-puzzle__tiles.is-shake { animation: none !important; }
    .kj-card, .kj-family__item, .kj .kj-fact, .kj-step { transition: none; transform: none !important; }
}