/* Critter Quest: a readable arcade interface; creature sprites remain deferred. */
:root {
  color-scheme: dark;
  --forest: #c1f66b;
  --forest-dark: #171f32;
  --ink: #edf3ff;
  --muted: #aab8d0;
  --cream: #0b0f1a;
  --paper: #141c2d;
  --line: #2c3953;
  --sage: #1e2c38;
  --lime: #c1f66b;
  --rust: #ffb980;
  --cyan: #74f3dd;
  --violet: #b5a0ff;
  --display: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: var(--display);
  font-family: var(--sans);
  background: var(--cream);
  color: var(--ink);
}
body {
  background-color: var(--cream);
  background-image: linear-gradient(#23314a30 1px, transparent 1px), linear-gradient(90deg,#23314a30 1px, transparent 1px);
  background-size: 40px 40px;
}
::selection { background: #c1f66b; color: #111a22; }
h1,h2,h3 { font-family: var(--display); font-weight: 700; letter-spacing: -1.3px; }
h1 { line-height: 1.15; }
h2 { font-size: 26px; }
h3 { font-size: 21px; }
em { font-style: normal; }
button,a,input,select,summary,textarea { outline-color: var(--cyan); }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,textarea:focus-visible { outline: 3px solid var(--cyan); outline-offset: 5px; }
input,select,textarea { background: #0c1321; color: var(--ink); border: 1px solid #455674; border-radius: 2px; font-size: 16px; }
label,legend { color: var(--ink); }
details { color: var(--muted); }
mark { background: #283b34; color: var(--lime); border-radius: 0; }
.eyebrow { color: var(--cyan); font-family: var(--display); font-size: 11px; letter-spacing: 1.5px; font-weight: 600; }
.button { border-radius: 2px; font-family: var(--display); font-weight: 700; font-size: 13px; min-height: 48px; }
.primary,.audio-button { background: var(--lime); color: #111c21; border: 1px solid var(--lime); box-shadow: 3px 3px 0 #596e3d; }
.primary:hover:not(:disabled),.audio-button:hover:not(:disabled) { background: var(--lime); color: #111c21; }
/* Shared pixel wipe: lime actions use lavender; other actions can opt in. */
:is(.button.primary,.button.secondary,.audio-button,.welcome-tamer-option,.pixel-wipe) {
  --pixel-wipe-fill:#b9a2f5;
  --pixel-wipe-edge:48px;
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
/* The isolated negative layer keeps both bare text and icons above the fill. */
:is(.button.primary,.button.secondary,.audio-button,.welcome-tamer-option,.pixel-wipe)::before {
  content:'';
  position:absolute;
  inset:0 auto 0 0;
  width:calc(100% + var(--pixel-wipe-edge));
  z-index:-1;
  background:var(--pixel-wipe-fill);
  pointer-events:none;
  /* A solid body and repeating pixel-alpha edge carry fully past the button. */
  -webkit-mask-image:linear-gradient(#000,#000),url('/public/button-pixel-wipe.svg?v=1');
  mask-image:linear-gradient(#000,#000),url('/public/button-pixel-wipe.svg?v=1');
  -webkit-mask-size:calc(100% - var(--pixel-wipe-edge)) 100%,var(--pixel-wipe-edge) var(--pixel-wipe-edge);
  mask-size:calc(100% - var(--pixel-wipe-edge)) 100%,var(--pixel-wipe-edge) var(--pixel-wipe-edge);
  -webkit-mask-position:left top,right top;
  mask-position:left top,right top;
  -webkit-mask-repeat:no-repeat,repeat-y;
  mask-repeat:no-repeat,repeat-y;
  -webkit-mask-composite:source-over;
  mask-composite:add;
  mask-mode:alpha;
  transform:translateX(-100%);
  transition:transform .48s steps(16,end);
}
:is(.button.primary,.button.secondary,.audio-button,.welcome-tamer-option,.pixel-wipe):focus-visible:not(:disabled):not([aria-disabled="true"])::before { transform:translateX(0); }
.button.secondary,.pixel-wipe.pixel-wipe-cyan { --pixel-wipe-fill:var(--cyan); }
:is(.button.secondary,.pixel-wipe-cyan):focus-visible:not(:disabled):not([aria-disabled="true"]) { color:#111c21; }
@media(hover:hover) {
  :is(.button.primary,.button.secondary,.audio-button,.welcome-tamer-option,.pixel-wipe):hover:not(:disabled):not([aria-disabled="true"])::before { transform:translateX(0); }
  :is(.button.secondary,.pixel-wipe-cyan):hover:not(:disabled):not([aria-disabled="true"]) { color:#111c21; }
}
.welcome-page:is([data-motion="paused"],[data-motion="off"]) :is(.button.primary,.button.secondary,.audio-button,.welcome-tamer-option,.pixel-wipe)::before { transition:none; }
@media(prefers-reduced-motion:reduce) {
  :is(.button.primary,.button.secondary,.audio-button,.welcome-tamer-option,.pixel-wipe)::before { transition:none; }
}
.secondary { background: #182236; color: var(--ink); border-color: #43536f; box-shadow: 3px 3px 0 #070b12; }
.secondary:hover:not(:disabled) { background: #223048; border-color: var(--cyan); }
.text { color: var(--cyan); box-shadow: none; }
.pill,.pill.light { border-radius: 0; background: #23323c; border: 1px solid #395b62; color: var(--cyan); font-family: var(--display); font-size: 10px; }
.panel,.today-card,.companion-card,.stat-card,.creature-card,.modal,.lesson-card,.backup-panel,.correction-card,.reviewed-story { background: var(--paper); border-color: var(--line); border-radius: 3px; box-shadow: 4px 4px 0 #070b13; }
.page-heading p,.hero-copy p,.hero-action>span,.card-bottom,.stage-label,.section-note,.trail-footnote,.creature-card p,.panel>p,.form-note,.guide-panel ol,.empty-journal,.empty-journal p,.backup-panel p,.parent-footnote,.parent-help p,.activity-subtitle,.input-caption,.guided-word p,.guided-word small,.parent-read-note,.session-footer,.celebration>p,.draft-meta,.writing-tip,.writing-tip p,.correction-note,.writing-limit,.writing-limit>p,.review-type,.reviewed-story small,.audio-status,.queued-words p,.family-empty p,.family-content>p,.parent-label,.next-pattern p,.celebration-note,.parent-profile-pattern,.parent-profile-summary,.avatar-option small { color: var(--muted); }
.form-note { font-size: 12px; line-height: 1.8; }
.page-heading p { font-size: 14px; }
.page-heading h1 { font-size: 31px; }
.app-shell { background: #0b0f1ae8; }
.sidebar { background: #101625; border-right: 1px solid #2b3a52; color: var(--ink); }
.brand { color: var(--ink); gap: 10px; }
.brand>span { font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: -.5px; }
.brand small { color: var(--cyan); font-family: var(--display); font-size: 8px; letter-spacing: 2px; }
.brand>svg { width: 35px; height: 35px; }
.sidebar-caption { color: #8b9ab8; font-family: var(--display); font-size: 9px; }
.nav-item { border-radius: 2px; color: #b8c4dc; font-family: var(--display); font-size: 12px; }
.nav-item:hover { background: #1a253a; }
.nav-item.active { background: #1e3037; color: var(--cyan); box-shadow: inset 3px 0 var(--cyan); }
.nav-dot { background: var(--cyan); border-radius: 0; }
.keeper-note,.keeper-note>svg { color: var(--violet); }
.keeper-note p { font-family: var(--display); font-size: 13px; font-style: normal; line-height: 1.8; }
.family-switch { color: var(--ink); background: #172033; border-color: #344563; border-radius: 2px; }
.family-switch small,.local-label { color: #9cadc8; font-size: 10px; }
.local-label>span { background: var(--cyan); border-radius: 0; }
.topbar { border-bottom-color: var(--line); }
.breadcrumb { color: #a5b5d0; font-family: var(--display); font-size: 10px; letter-spacing: 1px; }
.breadcrumb>span { color: var(--cyan); }
.berry-count,.berry-count>svg,.large-berries { color: var(--lime); }
.berry-count { font-family: var(--display); font-size: 12px; }
.profile-pill { color: var(--ink); font-size: 13px; }
.avatar { color: var(--cyan); background: #1c2940; border-radius: 2px; }
.caret,.heading-leaf,.mini-icon,.day-label,.day-label>svg { color: var(--cyan); }
.heading-leaf { transform: none; }
.hero { background: #151e2c; border: 1px solid #3b4c64; border-radius: 3px; box-shadow: 5px 5px 0 #060a11; grid-template-columns: 48% 52%; min-height: 350px; }
.hero-copy { padding: 35px 18px 32px 32px; }
.hero-copy h2 { font-size: 43px; line-height: 1.13; letter-spacing: -2px; margin: 24px 0 20px; }
.hero-copy h2 em { color: var(--cyan); text-shadow: 2px 1px 0 #b5a0ff45; }
.hero-copy p { font-size: 15px; }
.hero-action>.button { font-size: 13px; }
.hero-action>span { font-size: 11px; margin-top: 15px; }
.hero-landscape { border-left: 1px solid #334962; background: #101726; }
.hero-landscape>.landscape { width: 100%; min-width: 330px; transform: none; height: 100%; max-height: none; object-fit: cover; }
.art-caption { right: 15px; bottom: 14px; font-family: var(--display); font-style: normal; font-size: 10px; color: var(--cyan); background: #0b1021d9; padding: 7px 10px; }
.today-card,.companion-card { padding: 24px; }
.today-card h3 { font-size: 19px; line-height: 1.5; }
.step { color: var(--cyan); }.step>svg { color: var(--cyan); background: #203342; border-radius: 2px; }
.step.done>svg { color: var(--lime); background: #273c35; }.step>span { color: #bdc8dd; font-size: 12px; }.step-line { border-color: #3c526d; }
.card-bottom { border-color: var(--line); font-size: 12px; }
.companion-card { background: #191f35; }.companion-card h3 { font-size: 25px; color: var(--violet); }
.companion-card .button { font-size: 12px; }.stage-label { font-size: 12px; }
.next-pattern { background: #131e2c; }.next-pattern .pattern-badge { color: var(--lime); background: #26362b; border: 1px solid #40583f; border-radius: 1px; font-family: var(--sans); }
.next-pattern .eyebrow { color: var(--lime); }.next-pattern p { font-size: 14px; }.next-pattern h2 { font-size: 24px; }
.app-footer { border-color: var(--line); color: #95a6c1; font-family: var(--display); font-size: 10px; }
.sanctuary-count { color: var(--violet); font-size: 12px; }.sanctuary-banner { background: #1c2938; border: 1px solid #3b5063; border-radius: 2px; color: var(--cyan); }.sanctuary-banner h3 { color: var(--cyan); }.sanctuary-banner p { font-size: 13px; color: var(--muted); }
.creature-portrait { background: #0c1423; border-radius: 2px; border: 1px solid #263951; }.creature-card h2 { color: var(--ink); font-size: 26px; }.creature-card p { font-size: 13px; }.creature-species { color: var(--cyan); font-size: 12px; }.bond-row { color: var(--muted); font-size: 12px; }.bond-track { background: #28364c; border-radius: 0; }.bond-track span { background: var(--cyan); border-radius: 0; }.undiscovered { background: #111928; opacity: .8; }.unlock-note { color: #c2cde0; border-color: var(--line); font-size: 12px; }.tiny-badge { color: var(--lime); background: #293b30; border-radius: 0; }
.parent-shell { background: #0e1420; }.parent-label { font-family: var(--display); }.parent-profile-card { background: #151f30; color: var(--ink); border-color: #33435d; border-radius: 2px; }.parent-profile-card:hover { border-color: var(--cyan); }.parent-profile-card.selected { background: #1d303b; border-color: var(--cyan); }.parent-profile-heading>strong { font-size: 19px; }.parent-profile-heading>svg,.parent-profile-link { color: var(--cyan); }.parent-profile-avatar { background: #0f1727; border-radius: 2px; }.parent-profile-pattern { font-size: 12px; }.parent-profile-summary { font-size: 11px; }.parent-profile-summary strong { color: var(--lime); }.parent-profile-link { font-size: 12px; }.parent-empty>svg { color: var(--cyan); }.stat-card>span { color: var(--cyan); }.stat-card>strong { color: var(--ink); }.stat-card p { color: var(--muted); font-size: 12px; }.guide-panel ol { font-size: 14px; }.guide-panel strong { color: var(--ink); }
.filter-group { background: #0f1726; border-color: #344760; border-radius: 2px; }.filter { color: var(--muted); border-radius: 0; }.filter.selected { background: #29404a; color: var(--cyan); }.empty-journal h3 { color: var(--ink); }.journal table th,.journal table td { border-color: #2b3a54; }thead th { color: #a8bbd7; background: #101a2b; }tbody th { color: var(--ink); }.status { color: var(--cyan); background: #1f3a3c; border-radius: 2px; }.status.practice { color: #ffd09f; background: #3b302a; }.history-dot { background: #2d354c; color: #b5a0ff; }.history-dot.yes { background: #294735; color: var(--lime); }
.history-dot.missed { background: #453024; color: #ffd17b; }
.history-dot.unknown { background: #25313d; color: #bdc7d5; }
.word-history-legend { display:flex; flex-wrap:wrap; gap:12px 24px; list-style:none; padding:0; margin:18px 0 24px; color:var(--muted); font-size:12px; }
.word-history-legend li { display:flex; align-items:center; gap:8px; }
.word-history-legend .history-dot { flex-shrink:0; }.parent-footnote a { color: var(--cyan); }
.onboarding { background: #0f1625; }.welcome-art { background: #101a2c; border-right: 1px solid #34425e; }.welcome-art .landscape { border: 1px solid #354d65; }.welcome-brand { color: var(--ink); }.welcome-brand>span { font-family: var(--display); }.welcome-copy h1 { font-size: 38px; }.welcome-copy>p { color: var(--muted); }.avatar-option>span { background: #0d1627; border-color: #34445e; border-radius: 2px; }.avatar-option input:checked+span { background: #20343c; border-color: var(--cyan); }.avatar-option input:focus-visible+span { outline-color: var(--cyan); }.avatar-option small { font-size: 10px; }.privacy-line { color: var(--muted); }
.modal-backdrop { background: #020610c7; backdrop-filter: blur(5px); }.modal { border-color: #526987; }.modal h2 { font-size: 29px; }.modal p { color: var(--muted); }.close-button { background: #1d2a40; color: var(--ink); border-radius: 2px; }.detail-focus { color: var(--cyan); }.example-pair { background: #172738; color: var(--ink); border-color: var(--line); }.pair-divider { color: var(--violet); }.profile-choice { color: var(--ink); background: #121e30; border-color: #34465f; }.profile-choice.selected { background: #23404a; }.profile-choice small { color: var(--muted); }.profile-choice>svg { color: var(--cyan); }
.session-shell { background: #0d1421; }.session-header { border-color: var(--line); background: #111a2b; }.session-brand { color: var(--cyan); font-family: var(--display); }.session-brand .pixel-logo { width: 25px; height: 25px; }.session-name { color: var(--muted); }.progress-track { background: #2a364c; border-radius: 0; }.progress-track>span { background: var(--cyan); border-radius: 0; }.session-progress>span { color: #b7c7e0; font-family: var(--display); font-size: 11px; }
.activity { max-width: 820px; }.activity h1 { font-size: 35px; }.lesson-rule { font-family: var(--sans); color: var(--ink); font-size: 20px; line-height: 1.7; }.teaching-word,.reading-word { color: var(--ink); font-family: var(--sans); font-weight: 600; }.teaching-word mark { color: var(--lime); }.word-chip { color: var(--ink); background: #1a2b40; border: 1px solid #49627e; border-radius: 2px; font-family: var(--sans); }.word-chip>svg { color: var(--cyan); }.session-parent-note { background: #182638; color: #bbcce5; border-color: #35475f; border-radius: 2px; }.parent-help summary { color: var(--muted); font-size: 12px; }.parent-help { border-color: #344760; }.activity-subtitle { font-size: 16px; }.audio-button { border-radius: 2px; }.spelling-input { background: #0a1322; border: 2px solid #49647e; color: var(--ink); font-family: var(--sans); border-radius: 2px; }.spelling-input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px #74f3dd18; }.input-caption { font-size: 12px; }.letter-key { color: var(--ink); background: #1e2c43; border: 1px solid #4c5e7b; border-radius: 2px; box-shadow: 0 3px 0 #050a13; font-family: var(--sans); }.letter-key:hover { background: #2c405c; border-color: var(--cyan); }.backspace { color: var(--cyan); background: #1d2941; }.guided-word { background: #1c2d38; border-color: #405b61; border-radius: 2px; }.guided-word strong>span { color: var(--lime); background: #293e36; border-radius: 2px; font-family: var(--sans); }.feedback { border-radius: 2px; }.feedback.correct { color: #d4fba6; background: #253d31; border: 1px solid #58724c; }.feedback.retry { color: #ffdbb4; background: #392b26; border: 1px solid #77563e; }.choice { color: var(--ink); background: #1a293e; border-color: #4c617f; border-radius: 2px; font-family: var(--sans); }.choice:hover:not(:disabled) { background: #244349; border-color: var(--cyan); }.passage { color: var(--ink); background: #141e2e; border-color: #384d68; border-radius: 2px; font-family: var(--sans); }.reward-pill { color: var(--lime); background: #263a2d; border-color: #576f44; border-radius: 2px; font-family: var(--display); }.celebration-stats strong { color: var(--ink); }.celebration-stats span { color: var(--muted); }.toast { color: var(--ink); background: #24384c; border: 1px solid #597a94; border-radius: 2px; }.save-warning { color: #ffe2b7; background: #3a2c23; border-color: #84623e; }.loading { color: var(--cyan); }
.studio-badge { color: var(--cyan); }.story-editor .writing-prompt { color: #d4e0f4; background: #1b2c41; border-color: var(--violet); font-family: var(--sans); font-size: 17px; }textarea { font-family: var(--sans); font-size: 19px; line-height: 1.8; }.draft-meta { font-size: 11px; }.prompt-option { color: #c1cee3; background: #162238; border-color: #384c68; border-radius: 2px; font-size: 13px; }.prompt-option.selected { color: var(--cyan); background: #20383f; border-color: #4b8c8b; }.writing-tip h3 { color: var(--violet); }.writing-tip p { font-size: 13px; }.correction-card { background: #172236; }.correction-card.resolved { background: #20372f; }.original-word { color: #ffbf89; }.sentence-context { color: #bac9df; font-family: var(--sans); font-size: 16px; }.suggestion { color: var(--cyan); background: #1e3442; border-color: #466578; border-radius: 2px; font-size: 13px; }.correction-note { font-size: 13px; }.correction-card>.button { color: #b5c4dc; font-size: 12px; }.writing-limit { border-color: var(--line); font-size: 13px; }.writing-limit>p { font-size: 12px; }.reviewed-story { background: #1d352f; border-color: #426b56; }.reviewed-story p { color: #e1f4d3; font-family: var(--sans); }.audio-status { font-size: 12px; }.queued-words p { font-size: 13px; }
.family-home { background: radial-gradient(ellipse at 50% 38%,#1e283f88,transparent 65%); position: relative; }
.family-header { border-bottom-color: #2c3953; background: #0c121fdd; padding: 25px 5vw; }
.family-header .brand { color: var(--ink); }.family-header .brand>span { font-size: 20px; letter-spacing: -.8px; }.family-header .brand>svg { background: none; border-radius: 0; padding: 0; width: 40px; height: 40px; }.family-header .button { font-size: 12px; }
.family-content#main-content { max-width: 1200px; padding-top: 68px; }.family-content>.eyebrow { color: var(--cyan); background: #1a2b35; border: 1px solid #365453; padding: 7px 13px; width: fit-content; margin: auto; font-size: 10px; }.family-content>h1 { font-size: 46px; letter-spacing: -2px; margin: 23px 0 16px; text-shadow: 2px 0 #74f3dd25,-2px 0 #b5a0ff25; }.family-content>p { font-size: 16px; }
.explorer-grid { gap: 24px; margin-top: 43px; }.explorer-card { background: #151e2e; border: 1px solid #45536f; border-radius: 2px; padding: 18px 20px 25px; position: relative; box-shadow: 6px 6px 0 #040810; transition: transform .15s,border-color .15s; }.explorer-card::before { content: ''; position: absolute; left: -1px; top: -1px; width: 32px; height: 4px; background: var(--lime); }.explorer-card:nth-child(2n)::before { background: var(--violet); }.explorer-card:nth-child(3n)::before { background: var(--cyan); }.explorer-card:hover { border-color: var(--cyan); background: #1c2a3c; transform: translate(-2px,-3px); box-shadow: 8px 9px 0 #040810; }.player-card-label { display: flex; justify-content: space-between; align-items: center; width: 100%; color: #a7b9d4; font-family: var(--display); font-size: 10px; letter-spacing: 1px; }.player-card-label>svg { color: var(--cyan); }
.explorer-picture { width: 178px; height: 178px; border-radius: 0; background: #0c1423; border: 1px solid #2b3d55; margin: 20px 0; }.explorer-picture .creature-art { width: 170px; max-height: 170px; }.explorer-card>strong { color: var(--ink); font-family: var(--display); font-size: 23px; letter-spacing: -.8px; }.explorer-play { font-family: var(--display); color: var(--lime); font-size: 12px; margin-top: 20px; }.family-footer { color: #94a6c3; font: 10px/1.7 var(--display); letter-spacing: 1.2px; border-top: 1px solid #24334a; padding: 24px; }.family-empty h2 { font-size: 25px; }
@media(min-width:1450px) { .hero-copy h2 { font-size: 50px; }.hero { min-height: 385px; }.brand>span { font-size: 16px; } }
@media(max-width:1100px) { .brand>span { font-size: 13px; }.brand>svg { width: 30px; height: 30px; }.hero-copy { padding-left: 24px; }.hero-copy h2 { font-size: 35px; }.hero-copy p { font-size: 13px; }.hero-action>.button { font-size: 12px; }.hero-action>span { font-size: 10px; }.hero-landscape>.landscape { min-width: 280px; }.breadcrumb { font-size: 9px; } }
@media(max-width:800px) { .brand>span { font-size: 13px; }.brand small { font-size: 7px; }.sidebar { border-right: 0; border-bottom: 1px solid #34445d; }.nav-item { font-size: 11px; }.welcome-brand>span { font-size: 17px; }.welcome-art { border-right: 0; border-bottom: 1px solid #34425e; }.hero-copy h2 { font-size: 37px; }.family-content#main-content { padding-top: 45px; } }
@media(max-width:560px) { .family-header { padding: 18px 16px; gap: 15px; }.family-header .brand>span { font-size: 14px; }.family-header .brand small { font-size: 7px; letter-spacing: 1px; }.family-header .brand>svg { width: 31px; height: 31px; }.family-header .button { font-size: 10px; padding: 10px; }.family-header .button>svg { display: none; }.family-content#main-content { padding: 35px 18px 40px; }.family-content>h1 { font-size: 31px; letter-spacing: -1px; }.family-content>p { font-size: 14px; }.family-content>.eyebrow { font-size: 8px; letter-spacing: 1px; }.explorer-card { flex-basis: 260px; min-width: 220px; }.explorer-grid { gap: 23px; margin-top: 30px; }.family-footer { font-size: 9px; }.nav-item { font-size: 0; }.sidebar .brand>span { font-size: 12px; }.breadcrumb { font-size: 8px; }.page-heading h1 { font-size: 27px; }.page-heading p { font-size: 13px; }.hero-copy { padding: 25px 25px 0; }.hero-copy h2 { font-size: 36px; }.hero-copy p { font-size: 14px; }.hero-landscape { border-left: 0; border-top: 1px solid #334962; height: 225px; }.hero-landscape>.landscape { min-width: 0; height: 100%; transform: none; }.hero-action>.button { font-size: 12px; }.hero-action>span { font-size: 10px; }.art-caption { font-size: 9px; }.companion-card { padding-right: 140px; }.companion-card h3 { font-size: 22px; }.companion-image { right: 8px; }.next-pattern .eyebrow { font-size: 9px; }.next-pattern p { font-size: 13px; }.activity h1 { font-size: 28px; }.lesson-rule { font-size: 18px; }.activity-subtitle { font-size: 14px; }.audio-controls>.secondary { color: var(--cyan); }.passage { font-size: 23px; }.form-note { font-size: 12px; }.draft-meta { font-size: 10px; }.welcome-copy h1 { font-size: 33px; }.avatar-option small { font-size: 9px; } }
@media(prefers-reduced-motion:reduce) { .explorer-card,.button { transition: none; }.explorer-card:hover { transform: none; } }
.session-parent-note { padding: 12px 16px; border: 1px solid #35475f; }
.session-parent-note p { font-size: 13px; line-height: 1.6; }
.prompt-option>svg:first-child { margin-left: 0; }
.prompt-option>svg:not(:first-child):last-child { margin-left: auto; }
input::placeholder,textarea::placeholder { color: #9aabc4; opacity: 1; }

/* Static pixel creature portraits. */
.pixel-creature{object-fit:contain;image-rendering:pixelated;aspect-ratio:1;height:auto}.pixel-creature.is-mirrored{scale:-1 1}.creature-portrait .pixel-creature{width:100%;height:100%}.family-profile-picture .pixel-creature,.parent-profile-avatar .pixel-creature,.picture-avatar .pixel-creature{width:100%;height:100%;object-fit:contain}.avatar-option .pixel-creature{max-height:100%}.companion-card h3{overflow-wrap:anywhere;font-size:clamp(18px,2vw,25px)}

.story-practice-words { display:flex; flex-wrap:wrap; gap:.5rem; margin:1rem 0 1.5rem; }
.story-practice .form-note { margin-top:1.25rem; }

.story-practice > p { font-size:1rem; line-height:1.6; }

/* Readable parent journal: status and attempt evidence share the available space. */
.journal .table-scroll { overflow-x:auto; }
.journal table { width:100%; min-width:0; table-layout:fixed; }
.journal thead th { font-size:14px; line-height:1.5; letter-spacing:.02em; padding:14px 10px; }
.journal thead th:first-child { width:25%; }
.journal thead th:nth-child(2) { width:35%; }
.journal thead th:last-child { width:40%; }
.journal tbody th { font-size:24px; overflow-wrap:anywhere; }
.journal tbody th,.journal tbody td { padding:18px 10px; vertical-align:middle; }
.journal .status { display:inline-flex; align-items:center; gap:8px; font-size:14px; line-height:1.4; padding:8px 10px; }
.journal .status>.pixel-icon { flex-shrink:0; }
.journal .history { flex-wrap:wrap; gap:8px; }
.journal .history-dot { width:28px; height:28px; flex-shrink:0; }
.journal .history-dot>.pixel-icon { width:16px; height:16px; }
.journal .word-history-legend { font-size:14px; gap:14px 24px; }
.journal .filter { font-size:13px; min-height:40px; padding:10px 14px; }
.journal .form-note { font-size:14px; line-height:1.7; }
@media(max-width:600px) {
  .journal table,.journal tbody { display:block; }
  .journal thead { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  .journal tbody tr { display:grid; grid-template-columns:minmax(0,1fr); gap:14px; padding:20px 0; border-bottom:1px solid var(--line); }
  .journal tbody th { font-size:24px; }
  .journal tbody th,.journal tbody td { display:block; padding:0; border:0; }
  .journal tbody td::before { display:block; color:var(--muted); font-size:13px; line-height:1.5; margin-bottom:7px; }
  .journal tbody td:nth-child(2)::before { content:'Progress'; }
  .journal tbody td:last-child::before { content:'Recent spelling attempts'; }
  .journal .status { font-size:14px; padding:8px 10px; }
  .journal .history { gap:8px; }
  .journal .word-history-legend { gap:12px 18px; }
}