:root {
color-scheme: light;
--page: #e5e1d8;
--surface: var(--card-surface);
--panel: var(--card-surface);
--card-surface: #f0e7d9;
--line: #7c8796;
--soft-line: rgb(38 49 63 / 7%);
--text: #26313f;
--muted: #303c4b;
--blue: #004360;
--accent: #004360;
--project-accent: #004360;
--link-aaa: #003f5c;
--focus: #005b8f;
--text-secondary: #2c3a4a;
--hero-title: #26313f;
--hero-subtitle: #004360;
--hero-role-color: #004360;
--hero-bio-color: #303c4b;
--hero-surface: var(--card-surface);
--hero-border: rgb(203 213 225 / 70%);
--hero-shadow: 0 10px 30px rgb(26 35 50 / 5%);
--hero-contact-card-bg: var(--card-surface);
--hero-contact-card-border: rgb(203 213 225 / 60%);
--hero-contact-card-shadow: 0 6px 20px rgb(26 35 50 / 4%);
--hero-contact-item-hover: rgb(0 94 135 / 4%);
--hero-tag-bg: var(--pill-bg);
--hero-tag-border: rgb(26 35 50 / 12%);
--hero-tag-text: #26313f;
--hero-btn-primary-bg: #004360;
--hero-btn-primary-text: #fff;
--hero-btn-ghost-text: #004360;
--hero-rail-bg: var(--card-surface);
--hero-rail-border: rgb(26 35 50 / 12%);
--hero-rail-color: #354254;
--hero-action-btn-bg: var(--pill-bg);
--hero-action-btn-border: rgb(26 35 50 / 12%);
--hero-avatar-glow: 0 0 0 3px #005e87, 0 0 24px rgb(0 94 135 / 25%);
--page-background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128'%3E%3Cfilter id='grain' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.16' filter='url(%23grain)'/%3E%3C/svg%3E"),
var(--page);
--card-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128'%3E%3Cfilter id='grain' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.04' filter='url(%23grain)'/%3E%3C/svg%3E");
--card-edge-shadow: inset 0 1px 0 rgb(255 255 255 / 30%);
--card-surface-shadow: var(--card-edge-shadow), 0 3px 12px rgb(26 35 50 / 4%), 0 1px 2px rgb(26 35 50 / 2%);
--hero-gradient: linear-gradient(90deg, #005f88 0%, #0076a8 50%, #005f88 100%);
--contact-bg: rgb(255 255 255 / 10%);
--tag-bg: rgb(255 255 255 / 20%);
--project-bg: var(--card-surface);
--panel-primary-bg: var(--panel);
--panel-secondary-bg: var(--hero-surface);
--employment-card-bg: transparent;
--inner-card: var(--card-surface);
--translucent-card: var(--card-surface);
--cert-card: var(--card-surface);
--pill-bg: #e7ddce;
--date-bg: var(--pill-bg);
--date-text: #354254;
--copy-bg: rgb(255 255 255 / 24%);
--shadow: 0 25px 50px rgb(26 35 50 / 18%);
--logo-bg: #fff;
--button-bg: #004360;
--button-text: #fff;
--target-min: 44px;
--control-radius: 8px;
--border-control: color-mix(in srgb, var(--line) 35%, transparent);
--shadow-control: 0 2px 8px rgb(0 0 0 / 8%);
--sticky-nav-surface: #fbf8f2;
--sticky-nav-shadow: 0 8px 24px rgb(26 35 50 / 18%), 0 2px 6px rgb(26 35 50 / 10%);
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-12: 3rem;
--space-section: clamp(2rem, 4vw, 4.5rem);
--section-rule: color-mix(in srgb, var(--text) 8%, var(--surface));
--navigation-clearance: 112px;
--player-clearance: 24px;
--content-measure: 68ch;
--layout-wide: 90rem;
--text-xs: 0.8125rem;
--text-sm: 0.875rem;
--text-body: 1rem;
--text-lg: 1.25rem;
--text-xl: 1.5rem;
--text-display: clamp(2rem, 4vw, 3rem);
--radius-sm: 0.5rem;
--radius-md: 0.75rem;
--radius-lg: 1rem;
--radius-section: 1rem;
--radius-pill: 999px;
--radius-copy: 7px;
--radius-tooltip: 6px;
--shadow-1: 0 4px 8px rgb(0 0 0 / 13%);
--shadow-2: 0 16px 40px rgb(0 0 0 / 25%);
--shadow-card: 0 3px 12px rgb(26 35 50 / 4%);
--shadow-card-hover: 0 12px 28px rgb(26 35 50 / 12%);
--shadow-preview: 0 12px 24px rgb(0 0 0 / 16%);
--shadow-select: 0 4px 14px rgb(0 0 0 / 8%);
--shadow-select-raised: 0 8px 22px rgb(0 0 0 / 12%);
--shadow-rail: 0 2px 8px rgb(0 0 0 / 6%);
--shadow-control-hover: 0 4px 12px rgb(0 0 0 / 12%);
--shadow-skip-link: 0 4px 12px rgb(0 0 0 / 25%);
--motion-fast: 120ms;
--motion-normal: 180ms;
--motion-slow: 260ms;
--motion-reveal: 320ms;
--motion-language-arrival: 520ms;
--motion-language-sequence: 720ms;
--motion-language-card: 480ms;
--motion-language-stagger: 50ms;
--motion-language-action: 360ms;
--motion-language-action-stagger: 20ms;
--motion-language-detail: 300ms;
--motion-tooltip: 150ms;
--motion-switch: 560ms;
--ease-standard: cubic-bezier(0.25, 0.1, 0.25, 1);
--ease-emphasized: cubic-bezier(0.22, 0.08, 0.22, 1);
--ease-language-arrival: cubic-bezier(0.2, 0.65, 0.3, 1);
--ease-switch: cubic-bezier(0.45, 0, 0.2, 1);
--ease-loop: cubic-bezier(0.45, 0, 0.55, 1);
--ease-tooltip: var(--ease-standard);
--z-navigation: 10;
--z-progress: 11;
--z-popover: 20;
--z-dialog: 1000;
--z-toast: 1100;
--color-text-primary: var(--text);
--color-text-secondary: var(--muted);
--color-surface: var(--surface);
--color-action: var(--blue);
--color-focus: var(--focus);
--color-success: #16794a;
--color-warning: #9a6700;
--color-danger: #b42318;
--tooltip-bg: #0f172a;
--tooltip-text: #f8fafc;
--tooltip-border: 1px solid rgb(15 23 42 / 10%);
--tooltip-shadow: 0 4px 14px rgb(15 23 42 / 24%), 0 1px 3px rgb(15 23 42 / 12%);
}
[data-theme="dark"] {
color-scheme: dark;
--card-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128'%3E%3Cfilter id='grain' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.07' filter='url(%23grain)'/%3E%3C/svg%3E");
--card-edge-shadow: inset 0 1px 0 rgb(255 255 255 / 5%);
--card-surface-shadow: var(--card-edge-shadow), 0 6px 20px rgb(0 0 0 / 18%);
--page: #0d1117;
--surface: #161b22;
--panel: #161b22;
--card-surface: #161b22;
--sticky-nav-surface: #202936;
--sticky-nav-shadow: 0 8px 24px rgb(0 0 0 / 40%), 0 2px 6px rgb(0 0 0 / 24%);
--section-rule: rgb(240 246 252 / 7%);
--logo-bg: #fff;
--line: #6e7681;
--soft-line: rgb(240 246 252 / 6%);
--text: #f0f6fc;
--muted: #cbd5e1;
--blue: #79c0ff;
--accent: #79c0ff;
--project-accent: #79c0ff;
--link-aaa: #79c0ff;
--focus: #388bfd;
--text-secondary: #e2e8f0;
--hero-title: #f0f6fc;
--hero-subtitle: #79c0ff;
--hero-role-color: #79c0ff;
--hero-bio-color: #cbd5e1;
--hero-surface: #0a1120;
--hero-border: rgb(255 255 255 / 8%);
--hero-shadow: 0 15px 35px rgb(0 0 0 / 40%);
--hero-contact-card-bg: #0d172e;
--hero-contact-card-border: rgb(255 255 255 / 8%);
--hero-contact-card-shadow: 0 8px 25px rgb(0 0 0 / 35%);
--hero-contact-item-hover: rgb(255 255 255 / 4%);
--hero-tag-bg: rgb(255 255 255 / 4%);
--hero-tag-border: rgb(255 255 255 / 12%);
--hero-tag-text: #cbd5e1;
--hero-btn-primary-bg: #164fae;
--hero-btn-primary-text: #fff;
--hero-btn-ghost-text: #79c0ff;
--hero-rail-bg: rgb(255 255 255 / 4%);
--hero-rail-border: rgb(255 255 255 / 8%);
--hero-rail-color: #cbd5e1;
--hero-action-btn-bg: rgb(255 255 255 / 5%);
--hero-action-btn-border: rgb(255 255 255 / 8%);
--hero-avatar-glow: 0 0 0 3px #3b82f6, 0 0 30px rgb(59 130 246 / 50%);
--page-background:
radial-gradient(circle at 12% 0%, rgb(121 192 255 / 8%), transparent 36rem),
var(--page);
--hero-gradient: linear-gradient(90deg, #1f242c 0%, #161b22 50%, #1f242c 100%);
--contact-bg: rgb(48 54 61 / 40%);
--tag-bg: rgb(48 54 61 / 60%);
--project-bg: #161b22;
--panel-primary-bg:
linear-gradient(135deg, rgb(56 139 253 / 6%), #161b22 100%),
var(--panel);
--panel-secondary-bg:
linear-gradient(135deg, rgb(48 54 61 / 6%), #161b22 100%),
var(--panel);
--employment-card-bg: transparent;
--inner-card: #0d1117;
--translucent-card: rgb(22 27 34 / 85%);
--cert-card: rgb(56 139 253 / 5%);
--pill-bg: rgb(56 139 253 / 15%);
--date-bg: rgb(48 54 61 / 30%);
--date-text: #cbd5e1;
--copy-bg: rgb(240 246 252 / 10%);
--shadow: 0 25px 50px rgb(0 0 0 / 55%);
--button-bg: #164fae;
--button-text: #fff;
--tooltip-bg: #1e293b;
--tooltip-text: #fff;
--tooltip-border: 1px solid rgb(255 255 255 / 16%);
--tooltip-shadow: 0 6px 18px rgb(0 0 0 / 45%), 0 1px 4px rgb(0 0 0 / 25%);
}
* {
box-sizing: border-box;
}
[hidden] {
display: none !important;
}
details:not([open]) > :not(summary) {
display: none;
}
img,
video,
svg {
max-inline-size: 100%;
block-size: auto;
}
h1,
h2,
h3,
h4,
p,
li,
dd {
overflow-wrap: anywhere;
}
html {
background: var(--page);
scroll-padding-top: var(--navigation-clearance);
scroll-padding-bottom: var(--player-clearance);
}
@media (prefers-reduced-motion: no-preference) {
html[data-scripted] {
scroll-behavior: smooth;
}
}
body {
position: relative;
margin: 0;
background: var(--page-background);
color: var(--text);
font-family: var(--font-ui);
line-height: 1.6;
}
.case-study-section p,
.case-study-hero p,
.panel p {
max-inline-size: 68ch;
}
:where(
.hero-cta,
.copy-button
) {
transition-property: opacity;
transition-duration: var(--motion-fast);
transition-timing-function: var(--ease-standard);
}
body::selection {
color: #fff;
background: var(--blue);
}
@supports (content-visibility: auto) {
@media screen {
.content-grid > .panel:not(.projects-panel),
.narration-library {
content-visibility: auto;
contain-intrinsic-block-size: auto 600px;
}
.content-grid > .panel:target,
.content-grid > .panel:focus-within,
.narration-library:focus-within {
content-visibility: visible;
}
html:has(:target) .content-grid > .panel,
html:has(:target) .narration-library {
content-visibility: visible;
}
}
}
.icon-sprite {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
a {
color: inherit;
cursor: pointer;
text-decoration: none;
transition: color 0s var(--ease-standard);
}
a:hover {
text-decoration: underline;
text-underline-offset: 0.22em;
}
.external-icon {
display: inline-block;
width: 0.86em;
height: 0.86em;
margin-inline-start: 0.32em;
fill: none;
stroke: currentcolor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2.3;
transform: translateY(0.08em);
opacity: 0.58;
pointer-events: none;
transition: opacity var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}
:focus-visible {
outline: 3px solid var(--focus);
outline-offset: 4px;
box-shadow: 0 0 0 5px rgb(0 0 0 / 12%);
}
.resume-shell {
position: relative;
width: auto;
max-width: 1180px;
margin: 0 auto;
padding: clamp(14px, 3vw, 40px);
}
.resume-card {
position: relative;
min-height: calc(100vh - clamp(28px, 6vw, 80px));
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
transition:
background-color 0s var(--ease-standard),
border-color 0s var(--ease-standard),
box-shadow 0s var(--ease-standard);
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap !important;
border: 0;
}
:root {
--font-ui: "Inter Variable", system-ui, sans-serif;
}
html[lang="ar"] {
--font-ui: "Noto Sans Arabic Variable", "Segoe UI", tahoma, sans-serif;
}
button,
input,
select,
textarea {
font: inherit;
}
:where(h1, h2, h3, h4, h5, h6) {
font-family: var(--font-ui);
}
html[lang="ar"] :where(h1, h2, h3, h4, h5, h6) {
font-family: var(--font-ui);
letter-spacing: normal;
}
html[lang="ar"] body,
html[lang="ar"] body * {
font-family: var(--font-ui);
letter-spacing: normal;
}
.embed-help,
.image-fallback {
display: block;
margin: 0;
padding: 12px 16px;
color: var(--text);
background: var(--surface);
font-size: 0.875rem;
line-height: 1.6;
}
.image-unavailable {
display: none;
}
.connection-notice {
margin: 0 0 var(--space-4);
padding: var(--space-3) var(--space-4);
border-inline-start: 3px solid var(--blue);
background: var(--surface);
color: var(--text);
font-size: var(--text-sm);
}
.preview-retry {
margin: var(--space-3) var(--space-4);
}
.feedback-card {
display: grid;
grid-template-columns: 2.25rem minmax(0, 1fr);
align-items: start;
gap: var(--space-3);
padding: var(--space-4);
margin: var(--space-4);
border: 1px solid var(--border-control);
border-radius: var(--radius-md);
background: var(--surface);
color: var(--text);
text-align: start;
}
.feedback-content { display: grid; gap: var(--space-3); min-inline-size: 0; }
.feedback-card .embed-help { padding: 0; background: transparent; }
.feedback-copy { font-size: var(--text-sm); line-height: 1.6; }
.feedback-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.feedback-actions .btn { min-block-size: var(--target-min); margin: 0; }
.feedback-direct { display: inline-flex; align-items: center; min-block-size: var(--target-min); color: var(--blue); text-decoration: underline; text-underline-offset: 0.2em; }
.feedback-mark { position: relative; display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border: 1px solid var(--border-control); border-radius: var(--radius-sm); color: var(--text); font-size: 1.125rem; font-weight: 700; }
.feedback-card[data-state="error"],
.feedback-card[data-state="offline"],
.feedback-card[data-state="slow"] { border-inline-start: 3px solid var(--color-warning); }
.feedback-card[data-state="ready"] .feedback-mark { color: var(--blue); }
.feedback-card.image-fallback { margin: var(--space-3); }
.feedback-card[data-state="loading"] .feedback-mark::after,
.global-audio-player:is([data-state="loading"], [data-state="buffering"]) .audio-player-artwork::after {
content: "";
position: absolute;
inset: 7px;
border: 2px solid currentcolor;
border-inline-end-color: transparent;
border-radius: 50%;
}
.audio-player-artwork { position: relative; }
.audio-player-feedback { margin: 0; padding: var(--space-3); border-inline-start: 3px solid var(--color-warning); background: var(--pill-bg); color: var(--text); font-size: var(--text-sm); line-height: 1.6; }
.copy-toast[data-tone="error"] { border-inline-start: 3px solid var(--color-warning); }
.copy-toast[data-tone="success"] { border-inline-start: 3px solid var(--blue); }
.feedback-inline::before { content: "!"; display: inline-grid; place-items: center; inline-size: 1.25rem; block-size: 1.25rem; margin-inline-end: var(--space-2); font-weight: 700; }
.feedback-inline[data-state="loading"]::before { content: ""; vertical-align: middle; border: 2px solid currentcolor; border-inline-end-color: transparent; border-radius: 50%; }
[aria-busy="true"] {
cursor: progress;
}
@media (prefers-reduced-motion: no-preference) {
:is(dialog[open], .resume-download-menu[open] .resume-download-options) {
animation: dropdown-reveal var(--motion-normal) var(--ease-emphasized);
}
.global-audio-player:not([hidden]),
.walkthrough-step[open] > p {
animation: project-fade-in var(--motion-normal) var(--ease-emphasized);
}
}
.enhanced-select-native {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
border: 0 !important;
white-space: nowrap !important;
}
.select-menu {
position: relative;
display: inline-block;
min-width: 0;
color: var(--text);
}
.select-menu-trigger {
display: flex;
width: 100%;
min-height: 48px;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 8px 16px;
border: 1px solid color-mix(in srgb, var(--line) 78%, var(--blue));
border-radius: var(--radius-md);
background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 94%, var(--blue)), var(--surface));
box-shadow: var(--shadow-select);
color: var(--text);
font: inherit;
font-weight: 700;
line-height: 1.35;
text-align: start;
cursor: pointer;
transition: border-color 0s var(--ease-standard), box-shadow 0s var(--ease-standard);
}
.select-menu-trigger:hover,
.select-menu-trigger:focus-visible,
.select-menu.is-open .select-menu-trigger {
border-color: var(--blue);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 24%, transparent), var(--shadow-select-raised);
}
.select-menu-chevron {
flex: 0 0 9px;
width: 9px;
height: 9px;
margin-inline-end: 2px;
border-inline-end: 2px solid currentcolor;
border-bottom: 2px solid currentcolor;
transform: translateY(-2px) rotate(45deg);
transition: transform var(--motion-normal) var(--ease-standard);
}
.select-menu.is-open .select-menu-chevron {
transform: translateY(2px) rotate(225deg);
}
.select-menu-list {
position: absolute;
z-index: var(--z-popover);
inset-block-start: calc(100% + 8px);
inset-inline: 0;
display: grid;
gap: 4px;
min-width: max(100%, 15rem);
max-width: min(28rem, calc(100vw - 32px));
max-height: min(22rem, 55vh);
padding: 6px;
overflow: auto;
overscroll-behavior: contain;
border: 1px solid color-mix(in srgb, var(--line) 75%, var(--blue));
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--surface) 96%, var(--page));
box-shadow: var(--shadow-2);
scrollbar-width: thin;
scrollbar-color: var(--line) transparent;
transform-origin: top center;
animation: dropdown-reveal var(--motion-normal) var(--ease-emphasized);
}
.select-menu-list[hidden] { display: none; }
.select-menu-option {
position: relative;
display: flex;
width: 100%;
min-height: 44px;
align-items: center;
padding: 9px 40px 9px 12px;
border: 1px solid transparent;
border-radius: var(--radius-sm);
background: transparent;
color: var(--text);
font: inherit;
font-size: 0.9rem;
font-weight: 600;
line-height: 1.4;
text-align: start;
cursor: pointer;
}
[dir="rtl"] .select-menu-option { padding: 9px 12px 9px 40px; }
.select-menu-option:hover,
.select-menu-option:focus-visible {
border-color: color-mix(in srgb, var(--blue) 42%, transparent);
background: var(--pill-bg);
color: var(--link-aaa);
outline: none;
}
.select-menu-option[aria-selected="true"] {
background: color-mix(in srgb, var(--blue) 15%, var(--surface));
color: var(--link-aaa);
font-weight: 750;
}
.select-menu-option[aria-selected="true"]::after {
position: absolute;
inset-inline-end: 14px;
content: "✓";
color: var(--blue);
font-weight: 800;
}
.audio-select-shell .select-menu { min-width: 76px; }
.audio-select-shell .select-menu-trigger {
min-height: 44px;
padding: 6px 10px;
border-radius: var(--radius-sm);
font-size: 0.82rem;
}
.audio-select-shell .select-menu-list {
inset-block: auto calc(100% + 8px);
inset-inline: auto 0;
min-width: 8rem;
transform-origin: bottom center;
}
.lang-toggle,
.print-button {
display: inline-grid;
place-items: center;
width: 44px;
height: 44px;
margin: 0;
padding: 0;
border-radius: 50%;
background: var(--hero-rail-bg);
border: 1px solid var(--hero-rail-border);
color: var(--hero-rail-color);
box-shadow: var(--shadow-rail);
cursor: pointer;
transition:
background-color 0s var(--ease-standard),
border-color 0s var(--ease-standard),
color 0s var(--ease-standard);
}
.lang-toggle:hover,
.print-button:hover,
.lang-toggle:focus-visible,
.print-button:focus-visible {
transform: none;
background: var(--pill-bg);
border-color: var(--blue);
color: var(--blue);
box-shadow: var(--shadow-control-hover);
}
.lang-toggle svg,
.print-button svg {
display: block;
flex: 0 0 auto;
width: 18px;
height: 18px;
fill: none;
stroke: currentcolor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2;
}
.copy-button {
--copy-visual-size: 26px;
position: absolute;
inset-inline-end: 8px;
top: 50%;
transform: translateY(-50%);
display: inline-grid;
place-items: center;
flex: 0 0 auto;
width: 44px;
height: 44px;
padding: 0;
color: var(--text);
background: transparent;
border: 0;
border-radius: var(--radius-copy);
cursor: pointer;
opacity: 1;
z-index: var(--z-popover);
transition:
opacity var(--motion-fast) var(--ease-standard),
transform var(--motion-fast) var(--ease-standard),
background-color 0s var(--ease-standard),
border-color 0s var(--ease-standard),
color 0s var(--ease-standard);
}
.compact-list .copy-button,
.featured .copy-button {
color: var(--text);
background: transparent;
border-color: transparent;
}
.compact-list .copy-button span,
.compact-list .copy-button > span:first-child,
.featured .copy-button > span:first-child {
background: color-mix(in srgb, var(--surface) 70%, transparent);
border-color: var(--line);
}
.copy-button > span:first-child {
display: inline-grid;
place-items: center;
width: var(--copy-visual-size);
height: var(--copy-visual-size);
background: var(--copy-bg);
border: 1px solid rgb(255 255 255 / 18%);
border-radius: var(--radius-copy);
transition:
background-color 0s var(--ease-standard),
border-color 0s var(--ease-standard);
}
.copy-button svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentcolor;
stroke-width: 2;
transition:
transform var(--motion-fast) var(--ease-standard),
color 0s var(--ease-standard);
}
.copy-button:active svg {
transform: scale(0.85);
}
.copy-button.copied {
color: var(--blue) !important;
border-color: var(--blue) !important;
}
.copy-button:hover,
.copy-button:focus-visible,
.compact-list li:hover .copy-button,
.compact-list li:focus-within .copy-button,
.featured article:hover .copy-button,
.featured article:focus-within .copy-button {
opacity: 1;
}
.copy-button:hover,
.copy-button:focus-visible {
transform: translateY(-50%) scale(1.12);
z-index: calc(var(--z-popover) + 1);
}
.copy-button:hover span,
.copy-button:focus-visible span {
background: rgb(255 255 255 / 35%);
border-color: rgb(255 255 255 / 50%);
}
.compact-list .copy-button:hover span,
.featured .copy-button:hover span,
.compact-list .copy-button:focus-visible span,
.featured .copy-button:focus-visible span {
background: color-mix(in srgb, var(--surface) 90%, transparent);
border-color: var(--blue);
}
.panel {
scroll-margin-top: 0;
padding: var(--space-6) 0;
background: transparent;
border: 0;
border-block-start: 1px solid var(--section-rule);
border-radius: 0;
box-shadow: none;
}
.panel:target {
animation: targetPanel 700ms var(--ease-emphasized);
}
.panel h2 {
color: var(--text);
display: flex;
align-items: center;
min-width: 0;
max-width: 100%;
gap: 8px;
margin: 0 0 var(--space-3);
font-size: clamp(1.5rem, 2.5vw, 2rem);
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.01em;
overflow-wrap: anywhere;
}
.panel h2 > [data-translate] {
min-width: 0;
}
.panel h2 svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentcolor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2;
}
.panel p,
.panel li {
color: var(--muted);
font-size: 1rem;
}
.panel p {
max-width: 65ch;
}
.panel p + p,
.timeline-card ul {
margin-top: 1.2em;
}
html[lang="ar"] .panel h2,
html[lang="ar"] .project-header h4,
html[lang="ar"] .credential-meta {
letter-spacing: 0;
}
.pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.pills > span {
padding: 5px 10px;
background: transparent;
border: 1px solid var(--soft-line);
border-radius: var(--radius-sm);
color: var(--text);
font-size: 0.9rem;
font-weight: 500;
transition: background-color 0s var(--ease-standard), border-color 0s var(--ease-standard), color 0s var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}
.skill-item-icon {
display: block;
flex: 0 0 auto;
width: 16px;
height: 16px;
fill: none;
stroke: currentcolor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
opacity: 0.82;
}
.contact-list li:hover .external-icon,
.contact-list li:focus-within .external-icon,
.compact-list li:hover .external-icon,
.compact-list li:focus-within .external-icon,
.li-entity-link:hover .external-icon,
.li-entity-link:focus-visible .external-icon {
opacity: 1;
transform: translate(1px, -1px);
}
.copy-toast {
max-width: calc(100vw - 40px);
overflow-wrap: anywhere;
position: fixed;
inset-inline-end: 20px;
inset-block-end: max(20px, calc(var(--player-clearance, 24px) + var(--update-clearance, 0px)), env(safe-area-inset-bottom));
z-index: var(--z-toast);
padding: 10px 14px;
color: var(--text);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-md);
box-shadow: var(--shadow);
opacity: 0;
transform: translateY(8px);
transition:
opacity var(--motion-normal) var(--ease-standard),
transform var(--motion-normal) var(--ease-standard);
}
.copy-toast.is-visible {
opacity: 1;
transform: translateY(0);
}
.app-update {
position: fixed;
z-index: var(--z-toast);
inset-inline: max(1rem, env(safe-area-inset-left)) max(1rem, env(safe-area-inset-right));
inset-block-end: max(var(--player-clearance, 24px), env(safe-area-inset-bottom));
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
width: min(34rem, calc(100% - 2rem));
margin-inline: auto;
padding: 0.75rem 0.8rem 0.75rem 1rem;
border: 1px solid var(--line);
border-radius: var(--radius-md);
background: var(--surface);
color: var(--text);
box-shadow: var(--shadow-2);
}
.app-update > span {
flex: 1 1 12rem;
min-inline-size: 0;
overflow-wrap: anywhere;
}
.app-update[hidden] {
display: none;
}
.app-update button {
max-inline-size: 100%;
min-inline-size: 0;
min-height: 44px;
padding-inline: 1rem;
border: 0;
border-radius: var(--radius-sm);
background: var(--button-bg);
color: var(--button-text);
font: inherit;
font-weight: 750;
overflow-wrap: anywhere;
white-space: normal;
cursor: pointer;
}
[data-tooltip] {
position: relative;
}
[data-tooltip]::before,
[data-tooltip]::after {
display: none;
}
[data-tooltip]::before {
content: attr(data-tooltip);
position: absolute;
inset: calc(100% + 8px) auto auto 50%;
transform: translateX(-50%) translateY(-4px);
padding: 6px 10px;
background: var(--tooltip-bg, #0f172a);
color: var(--tooltip-text, #f8fafc);
border: var(--tooltip-border, 1px solid rgb(15 23 42 / 10%));
box-shadow: var(--tooltip-shadow);
font-size: 0.75rem;
font-weight: 600;
line-height: 1.3;
letter-spacing: 0.01em;
border-radius: var(--radius-tooltip);
white-space: nowrap;
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 9999;
transition:
opacity var(--motion-tooltip) var(--ease-tooltip),
transform var(--motion-tooltip) var(--ease-tooltip),
visibility var(--motion-tooltip) var(--ease-tooltip);
}
[data-tooltip]::after {
content: "";
position: absolute;
inset: calc(100% + 2px) auto auto 50%;
transform: translateX(-50%) translateY(-4px);
border-width: 0 5px 6px;
border-style: solid;
border-color: transparent transparent var(--tooltip-bg, #0f172a) transparent;
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 9999;
transition:
opacity var(--motion-tooltip) var(--ease-tooltip),
transform var(--motion-tooltip) var(--ease-tooltip),
visibility var(--motion-tooltip) var(--ease-tooltip);
}
[data-tooltip]:is(:hover, :focus, :focus-visible):not([data-tooltip-dismissed])::before,
[data-tooltip]:is(:hover, :focus, :focus-visible):not([data-tooltip-dismissed])::after {
display: block;
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
[data-tooltip]:hover::before,
[data-tooltip]:is(:focus, :focus-visible)::before {
pointer-events: auto;
}
[dir="rtl"] .copy-button[data-tooltip]::before,
html[lang="ar"] .copy-button[data-tooltip]::before {
left: 0;
right: auto;
transform: translateY(-4px);
}
[dir="rtl"] .copy-button[data-tooltip]:is(:hover, :focus, :focus-visible):not([data-tooltip-dismissed])::before,
html[lang="ar"] .copy-button[data-tooltip]:is(:hover, :focus, :focus-visible):not([data-tooltip-dismissed])::before {
transform: translateY(0);
}
[dir="rtl"] .copy-button[data-tooltip]::after,
html[lang="ar"] .copy-button[data-tooltip]::after {
left: 17px;
right: auto;
transform: translateY(-4px);
}
[dir="rtl"] .copy-button[data-tooltip]:is(:hover, :focus, :focus-visible):not([data-tooltip-dismissed])::after,
html[lang="ar"] .copy-button[data-tooltip]:is(:hover, :focus, :focus-visible):not([data-tooltip-dismissed])::after {
transform: translateY(0);
}
[dir="ltr"] .copy-button[data-tooltip]::before,
html[lang="en"] .copy-button[data-tooltip]::before {
right: 0;
left: auto;
transform: translateY(-4px);
}
[dir="ltr"] .copy-button[data-tooltip]:is(:hover, :focus, :focus-visible):not([data-tooltip-dismissed])::before,
html[lang="en"] .copy-button[data-tooltip]:is(:hover, :focus, :focus-visible):not([data-tooltip-dismissed])::before {
transform: translateY(0);
}
[dir="ltr"] .copy-button[data-tooltip]::after,
html[lang="en"] .copy-button[data-tooltip]::after {
right: 17px;
left: auto;
transform: translateY(-4px);
}
[dir="ltr"] .copy-button[data-tooltip]:is(:hover, :focus, :focus-visible):not([data-tooltip-dismissed])::after,
html[lang="en"] .copy-button[data-tooltip]:is(:hover, :focus, :focus-visible):not([data-tooltip-dismissed])::after {
transform: translateY(0);
}
.skip-link {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -100%);
background: var(--blue);
color: var(--page);
padding: 10px 20px;
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
z-index: 9999;
font-weight: 600;
transition: transform var(--motion-normal) var(--ease-standard);
}
.skip-link:focus-visible {
transform: translate(-50%, 0);
outline: none;
box-shadow: var(--shadow-skip-link);
}
[dir="rtl"] .external-icon {
transform: translateY(0.08em) scaleX(-1);
}
.case-study-controls .lang-toggle {
width: auto;
height: 44px;
min-width: 44px;
min-height: 44px;
padding: 0 10px;
gap: 6px;
background: color-mix(in srgb, var(--panel) 80%, transparent);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
color: var(--text);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-sizing: border-box;
font-family: inherit;
font-size: 0.8125rem;
font-weight: 600;
white-space: nowrap;
transition:
background-color 0s var(--ease-standard),
border-color 0s var(--ease-standard),
color 0s var(--ease-standard),
box-shadow 0s var(--ease-standard);
}
.case-study-controls .lang-toggle:hover,
.case-study-controls .lang-toggle:focus-visible {
background: color-mix(in srgb, var(--blue) 15%, transparent);
border-color: var(--blue);
color: var(--blue);
box-shadow: var(--shadow-control);
}
.case-study-controls .lang-toggle > span:first-child {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
.audio-play-btn {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-height: 48px;
inline-size: 48px;
block-size: 48px;
flex: 0 0 48px;
justify-content: center;
max-inline-size: 100%;
padding: 0;
background: var(--button-bg);
border: 1px solid var(--button-bg);
border-radius: var(--radius-sm);
color: var(--button-text);
font-family: inherit;
font-size: var(--text-sm);
font-weight: 700;
line-height: 1.4;
text-align: start;
box-shadow: var(--shadow-control);
cursor: pointer;
box-sizing: border-box;
transition:
background-color 0s var(--ease-standard),
border-color 0s var(--ease-standard),
color 0s var(--ease-standard),
transform var(--motion-normal) var(--ease-standard);
}
.audio-play-btn:hover,
.audio-play-btn:focus-visible {
background: color-mix(in srgb, var(--button-bg) 88%, #000);
border-color: var(--focus);
color: var(--button-text);
}
.audio-play-btn.is-playing {
background: #047857;
color: #fff;
border-color: #047857;
}
.audio-icon {
display: block;
flex: 0 0 auto;
width: 20px;
height: 20px;
stroke: currentcolor;
stroke-width: 2;
fill: none;
}
.audio-play-btn[data-tooltip]::before {
inset-inline: auto 0;
max-inline-size: min(18rem, calc(100vw - 48px));
white-space: normal;
inline-size: max-content;
transform: translateY(-4px);
}
.audio-play-btn[data-tooltip]:is(:hover, :focus, :focus-visible):not([data-tooltip-dismissed])::before {
transform: translateY(0);
}
.global-audio-player {
position: fixed;
z-index: var(--z-popover);
inset: auto auto max(16px, env(safe-area-inset-bottom)) 50%;
display: grid;
grid-template-columns: minmax(0, 1fr);
width: min(680px, calc(100% - 32px));
padding: 16px;
gap: 10px;
overflow: visible;
border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--line));
border-radius: var(--radius-section);
background:
radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--blue) 12%, transparent), transparent 34%),
color-mix(in srgb, var(--panel) 94%, transparent);
color: var(--text);
box-shadow: 0 24px 70px rgb(8 18 35 / 24%), 0 2px 12px rgb(8 18 35 / 10%);
backdrop-filter: blur(18px) saturate(140%);
transform: translateX(-50%);
animation: audioPlayerEnter 220ms var(--ease-standard) both;
}
@keyframes audioPlayerEnter {
from { opacity: 0; transform: translate(-50%, 12px) scale(0.985); }
to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes audioArtworkPulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.04);
}
}
@keyframes waveformBounce {
0%, 100% {
transform: scaleY(0.25);
}
50% {
transform: scaleY(1);
}
}
.global-audio-player[hidden] {
display: none;
}
.audio-player-track[hidden],
.audio-player-settings[hidden],
.audio-expand-toggle[hidden],
.audio-retry[hidden] {
display: none;
}
.audio-live-status {
inset: 0 auto auto 0;
margin: 0;
}
.audio-player-controls,
.audio-player-settings,
.audio-player-speed {
display: flex;
align-items: center;
}
.audio-player-summary {
display: flex;
align-items: center;
gap: 12px;
}
.audio-player-artwork {
display: grid;
place-items: center;
width: 48px;
height: 48px;
border-radius: 15px;
color: #fff;
background: linear-gradient(145deg, color-mix(in srgb, var(--blue) 76%, #6ca9ff), var(--blue));
box-shadow: 0 8px 20px color-mix(in srgb, var(--blue) 28%, transparent);
}
.global-audio-player[data-state="loading"] .audio-player-artwork {
opacity: 0.72;
}
@media (prefers-reduced-motion: no-preference) {
.global-audio-player[data-state="playing"] .audio-player-artwork {
animation: audioArtworkPulse 1.8s var(--ease-loop) infinite;
}
}
.audio-waveform-bars {
display: none;
align-items: flex-end;
justify-content: space-between;
width: 18px;
height: 18px;
gap: 2px;
}
.audio-waveform-bars .bar {
display: block;
flex: 1 1 0;
width: 3px;
border-radius: 2px;
background: currentcolor;
transform-origin: bottom;
will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
.audio-waveform-bars .bar:nth-child(1) {
height: 45%;
animation: waveformBounce 0.8s var(--ease-loop) infinite;
}
.audio-waveform-bars .bar:nth-child(2) {
height: 95%;
animation: waveformBounce 1.1s var(--ease-loop) infinite 0.2s;
}
.audio-waveform-bars .bar:nth-child(3) {
height: 65%;
animation: waveformBounce 0.95s var(--ease-loop) infinite 0.1s;
}
.audio-waveform-bars .bar:nth-child(4) {
height: 85%;
animation: waveformBounce 1.25s var(--ease-loop) infinite 0.35s;
}
}
@media (prefers-reduced-motion: reduce) {
.audio-waveform-bars .bar:nth-child(1) { height: 45%; }
.audio-waveform-bars .bar:nth-child(2) { height: 95%; }
.audio-waveform-bars .bar:nth-child(3) { height: 65%; }
.audio-waveform-bars .bar:nth-child(4) { height: 85%; }
}
.global-audio-player[data-state="playing"] .audio-player-artwork svg {
display: none;
}
.global-audio-player[data-state="playing"] .audio-player-artwork .audio-waveform-bars {
display: flex;
}
.audio-player-artwork svg,
.audio-player-summary .audio-control svg,
.audio-player-controls svg {
display: block;
width: 19px;
height: 19px;
fill: none;
stroke: currentcolor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.audio-player-copy {
display: flex;
flex: 1 1 auto;
min-width: 0;
flex-direction: column;
justify-content: center;
}
.audio-player-copy strong {
overflow: hidden;
color: var(--text);
font-size: 0.95rem;
line-height: 1.35;
text-overflow: ellipsis;
white-space: nowrap;
}
.audio-player-eyebrow {
display: flex;
flex-wrap: wrap;
gap: 0.35em;
color: var(--link-aaa);
font-size: 0.68rem;
font-weight: 750;
letter-spacing: 0.08em;
line-height: 1.4;
text-transform: uppercase;
}
[dir="rtl"] .audio-player-eyebrow {
letter-spacing: 0;
}
.audio-player-time {
flex: 0 0 auto;
color: var(--muted);
font-size: 0.76rem;
font-variant-numeric: tabular-nums;
}
.audio-player-track {
direction: ltr;
display: grid;
grid-template-columns: 3.2em minmax(0, 1fr) 3.2em;
align-items: center;
gap: 10px;
min-height: 36px;
}
.audio-player-progress,
.audio-volume-range {
--audio-progress: 0%;
appearance: none;
direction: ltr;
width: 100%;
height: 6px;
margin: 0;
border-radius: var(--radius-pill);
background: linear-gradient(to right, var(--blue) var(--audio-progress), var(--line) var(--audio-progress));
cursor: pointer;
}
.audio-player-progress::-webkit-slider-thumb {
appearance: none;
width: 18px;
height: 18px;
border: 3px solid var(--panel);
border-radius: 50%;
background: var(--blue);
box-shadow: 0 1px 7px color-mix(in srgb, var(--blue) 38%, transparent);
}
.audio-player-progress::-moz-range-thumb {
width: 13px;
height: 13px;
border: 3px solid var(--panel);
border-radius: 50%;
background: var(--blue);
}
.audio-player-progress:disabled {
cursor: wait;
opacity: 0.62;
}
.audio-player-controls {
justify-content: space-between;
gap: 8px;
}
.audio-player-transport {
direction: ltr;
display: flex;
align-items: center;
gap: 6px;
}
.audio-player-settings {
flex-wrap: wrap;
gap: 12px;
margin-inline-start: auto;
}
.audio-volume-range {
--audio-volume: 100%;
direction: ltr;
width: 88px;
background: linear-gradient(to right, var(--blue) var(--audio-volume), var(--line) var(--audio-volume));
}
.audio-volume-range::-webkit-slider-thumb {
appearance: none;
width: 16px;
height: 16px;
border: 3px solid var(--panel);
border-radius: 50%;
background: var(--blue);
}
.audio-volume-range::-moz-range-thumb {
width: 11px;
height: 11px;
border: 3px solid var(--panel);
border-radius: 50%;
background: var(--blue);
}
.audio-control,
.audio-player-speed select:not(.enhanced-select-native) {
min-height: 44px;
border: 1px solid var(--line);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--surface) 88%, transparent);
color: var(--text);
font: inherit;
}
.audio-control {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-width: 44px;
padding: 0 13px;
cursor: pointer;
transition: background-color 0s var(--ease-standard), border-color 0s var(--ease-standard), color 0s var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}
.audio-control-icon {
width: 44px;
padding: 0;
}
.audio-speed-badge-btn {
font-size: 0.8125rem;
font-weight: 750;
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
padding: 0 4px;
}
.audio-control-primary {
min-width: 100px;
border-color: var(--blue);
background: var(--blue);
color: #fff;
font-size: 0.82rem;
font-weight: 750;
}
.audio-control:hover,
.audio-player-speed select:not(.enhanced-select-native):hover {
border-color: var(--blue);
color: var(--link-aaa);
}
.audio-control-primary:hover,
.audio-control-primary:focus-visible {
background: color-mix(in srgb, var(--blue) 86%, #000);
color: #fff;
transform: translateY(-1px);
}
.audio-control:disabled {
cursor: not-allowed;
opacity: 0.42;
}
.audio-player-speed {
gap: 6px;
color: var(--muted);
font-size: 0.8rem;
}
.audio-speed-label {
display: inline-flex;
align-items: center;
gap: 6px;
}
.audio-speed-label svg {
width: 16px;
height: 16px;
}
.audio-select-shell {
position: relative;
display: inline-grid;
align-items: center;
}
.audio-player-speed select:not(.enhanced-select-native) {
appearance: none;
min-width: 72px;
padding: 0 30px 0 10px;
color-scheme: light;
cursor: pointer;
}
[data-theme="dark"] .audio-player-speed select:not(.enhanced-select-native) {
color-scheme: dark;
}
[dir="rtl"] .audio-player-speed select:not(.enhanced-select-native) {
padding: 0 10px 0 30px;
}
.audio-player-speed option {
background: var(--panel);
color: var(--text);
}
.audio-control-close {
align-self: start;
border-color: transparent;
background: transparent;
}
.audio-expand-toggle svg {
transition: transform var(--motion-normal) var(--ease-standard);
}
.audio-expand-toggle[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.global-audio-player[data-state="error"] .audio-player-artwork {
background: var(--danger, #b42318);
}
.global-audio-player [data-tooltip]::before,
.global-audio-player [data-tooltip]::after {
display: none;
}
.global-audio-player [data-tooltip]::before {
inset: auto auto calc(100% + 8px) 50%;
transform: translateX(-50%) translateY(4px);
}
.global-audio-player [data-tooltip]::after {
inset: auto auto calc(100% + 2px) 50%;
transform: translateX(-50%) translateY(4px);
border-width: 6px 5px 0;
border-style: solid;
border-color: var(--tooltip-bg, #0f172a) transparent transparent transparent;
}
.global-audio-player [data-tooltip]:is(:hover, :focus, :focus-visible):not([data-tooltip-dismissed])::before,
.global-audio-player [data-tooltip]:is(:hover, :focus, :focus-visible):not([data-tooltip-dismissed])::after {
display: block;
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.has-audio-player {
padding-bottom: 180px;
}
.back-to-top-fab {
position: fixed;
z-index: calc(var(--z-popover) - 1);
inset-inline-end: max(20px, env(safe-area-inset-right));
inset-block-end: max(20px, calc(var(--player-clearance, 24px) + var(--update-clearance, 0px)), env(safe-area-inset-bottom));
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 48px;
min-height: 48px;
max-width: calc(100vw - 32px);
padding: 10px 14px;
border: 1px solid color-mix(in srgb, var(--blue) 36%, var(--line));
border-radius: 15px;
background: color-mix(in srgb, var(--panel) 92%, transparent);
color: var(--link-aaa);
box-shadow: 0 12px 34px rgb(8 18 35 / 18%);
backdrop-filter: blur(14px);
cursor: pointer;
font: inherit;
font-size: 0.875rem;
font-weight: 700;
transition: inset-block-end var(--motion-normal) var(--ease-standard), background-color 0s var(--ease-standard), border-color 0s var(--ease-standard), color 0s var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}
.back-to-top-fab[hidden] {
display: none;
}
.back-to-top-fab svg {
display: block;
width: 20px;
height: 20px;
fill: none;
stroke: currentcolor;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
}
.back-to-top-fab:hover,
.back-to-top-fab:focus-visible {
border-color: var(--blue);
background: var(--blue);
color: #fff;
transform: translateY(-2px);
}
.has-audio-player .back-to-top-fab {
inset-block-end: max(174px, calc(var(--player-clearance, 24px) + var(--update-clearance, 0px)));
}
.panel-heading-row,
.panel > h2 {
padding-bottom: 10px;
border-bottom: 0;
}
.btn,
.back-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 44px;
min-height: 44px;
min-width: 44px;
padding: 0 18px;
border-radius: var(--radius-sm);
font-family: inherit;
font-size: 0.92rem;
font-weight: 700;
line-height: 1;
text-decoration: none !important;
cursor: pointer;
box-sizing: border-box;
vertical-align: middle;
border: 2px solid transparent;
transition:
background-color 0s var(--ease-standard),
border-color 0s var(--ease-standard),
color 0s var(--ease-standard),
transform var(--motion-fast) var(--ease-standard),
box-shadow 0s var(--ease-standard);
}
.project-live-link .external-icon {
flex: 0 0 auto;
width: 14px;
height: 14px;
}
.btn-icon:not(svg) {
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
padding: 0 !important;
flex: 0 0 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.btn-icon .external-icon {
margin: 0 !important;
transform: none !important;
width: 18px !important;
height: 18px !important;
opacity: 1 !important;
display: block;
}
.btn-icon:hover .external-icon,
.btn-icon:focus-visible .external-icon {
transform: scale(1.1) !important;
}
.btn-primary {
background: var(--button-bg);
border-color: var(--button-bg);
color: var(--button-text);
box-shadow: 0 2px 6px rgb(0 0 0 / 12%);
}
.btn-primary:hover,
.btn-primary:focus-visible {
background: color-mix(in srgb, var(--button-bg) 85%, #000);
border-color: var(--button-bg);
color: var(--button-text);
box-shadow: 0 4px 12px rgb(0 0 0 / 18%);
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
.btn-primary:hover,
.btn-secondary:hover,
.back-link:hover {
transform: translateY(-1px);
}
}
.back-link {
border-color: var(--blue);
background: transparent;
color: var(--blue);
}
.btn-secondary:hover,
.btn-secondary:focus-visible,
.back-link:hover,
.back-link:focus-visible {
background: color-mix(in srgb, var(--blue) 12%, transparent);
border-color: var(--blue);
color: var(--blue);
box-shadow: 0 4px 10px rgb(0 0 0 / 8%);
}
.btn-secondary:active,
.btn-primary:active,
.back-link:active {
transform: scale(0.98);
}
.btn svg,
.back-link svg {
display: block;
flex: 0 0 auto;
width: 18px;
height: 18px;
fill: none;
stroke: currentcolor;
stroke-width: 2;
}
[dir="rtl"] .back-link svg {
transform: scaleX(-1);
}
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .back-link {
border-color: var(--blue);
color: var(--blue);
}
[data-theme="dark"] .btn-secondary:hover,
[data-theme="dark"] .btn-secondary:focus-visible,
[data-theme="dark"] .back-link:hover,
[data-theme="dark"] .back-link:focus-visible {
background: color-mix(in srgb, var(--blue) 20%, transparent);
}
.btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 44px;
padding: 0 18px;
border-radius: var(--radius-sm);
font-family: inherit;
font-size: 0.92rem;
font-weight: 700;
color: var(--text);
background: color-mix(in srgb, var(--panel) 85%, var(--page));
border: 1.5px solid var(--line);
cursor: pointer;
text-decoration: none;
box-sizing: border-box;
transition: background-color 0s var(--ease-standard), border-color 0s var(--ease-standard), color 0s var(--ease-standard), transform var(--motion-normal) var(--ease-standard);
}
.btn-secondary:hover,
.btn-secondary:focus-visible {
background: var(--pill-bg);
border-color: var(--blue);
color: var(--blue);
transform: none;
}
[data-theme="light"] :is(.btn-secondary, .select-menu-trigger, .back-to-top-fab) {
background: var(--card-surface);
color: var(--blue);
}
.controls-group {
direction: ltr;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
gap: clamp(20px, 5vw, 72px);
}
.control-label {
display: inline-block;
font-size: 0.8125rem;
font-weight: 600;
white-space: nowrap;
color: inherit;
line-height: 1;
}
.control-state {
display: block;
font-size: 0.8125rem;
color: var(--blue);
white-space: nowrap;
}
.language-selector {
direction: ltr;
position: relative;
display: flex;
align-items: center;
gap: 3px;
min-width: 0;
margin: 0;
padding: 3px;
border: 1px solid var(--border-control);
border-radius: var(--radius-md);
background: var(--hero-action-btn-bg);
color: var(--muted);
transition:
background-color 0s var(--ease-standard),
border-color 0s var(--ease-standard);
}
.language-selector-icon {
display: grid;
place-items: center;
width: 30px;
height: 30px;
flex: 0 0 auto;
color: var(--blue);
}
.language-selector-icon svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentcolor;
stroke-width: 2;
}
.language-option {
display: grid;
place-items: center;
min-width: 64px;
min-height: var(--target-min);
padding: 0 10px;
border: 1px solid transparent;
border-radius: var(--control-radius);
color: var(--muted);
font-size: 0.8125rem;
font-weight: 600;
line-height: 1;
cursor: pointer;
box-sizing: border-box;
transition:
background-color 0s var(--ease-standard),
border-color 0s var(--ease-standard),
color 0s var(--ease-standard),
transform var(--motion-fast) var(--ease-standard);
}
.language-option:has(input:checked) {
background: var(--blue);
border-color: var(--blue);
color: #fff;
box-shadow: 0 1px 4px rgb(0 94 135 / 30%);
}
.language-option:hover {
color: var(--text);
background: rgb(0 94 135 / 8%);
}
.language-option:active > span {
transform: scale(0.97);
}
.language-option:has(input:focus-visible) {
outline: 2px solid var(--focus);
outline-offset: 2px;
}
html[lang] .language-selector .language-option[lang="en"] {
font-family: "Inter Variable", system-ui, sans-serif;
}
html[lang] .language-selector .language-option[lang="ar"] {
font-family: "Noto Sans Arabic Variable", "Segoe UI", tahoma, sans-serif;
}
@media (max-width: 700px) {
.language-selector .language-option[lang="en"] { inline-size: 3.375rem; }
.language-selector .language-option[lang="ar"] { inline-size: 2.75rem; }
}
.language-selector[aria-busy="true"]::after {
content: "";
position: absolute;
inset-inline: 6px;
inset-block-end: 1px;
block-size: 2px;
border-radius: 2px;
background: var(--blue);
transform-origin: center;
animation: language-progress 700ms var(--ease-loop) infinite alternate;
pointer-events: none;
}
@keyframes language-progress {
from { transform: scaleX(0.25); opacity: 0.6; }
to { transform: scaleX(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.language-selector[aria-busy="true"]::after { animation: none; }
}
.control-label-short { display: none; }
.theme-control {
width: 9.5rem;
position: relative;
isolation: isolate;
display: none;
grid-template-columns: repeat(2, minmax(44px, 1fr));
gap: 3px;
flex: 0 0 auto;
align-items: stretch;
max-inline-size: 100%;
padding: 3px;
border: 1px solid var(--border-control);
border-radius: var(--radius-md);
background: var(--hero-action-btn-bg);
}
[data-scripted] .theme-control { display: inline-grid; }
[data-scripted]:not([data-theme-ready]) .theme-control { visibility: hidden; }
.theme-control .theme-option {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
inline-size: auto;
block-size: auto;
min-inline-size: 44px;
min-block-size: 44px;
margin: 0;
padding: 0 10px;
border: 1px solid transparent;
border-radius: var(--control-radius);
background: transparent;
color: var(--muted);
box-shadow: none;
font: inherit;
font-size: 0.8125rem;
font-weight: 600;
line-height: 1;
cursor: pointer;
transition: transform 100ms var(--ease-standard);
}
.theme-control .theme-option svg {
inline-size: 16px;
block-size: 16px;
flex-shrink: 0;
fill: none;
stroke: currentcolor;
stroke-width: 1.8;
}
.theme-control .theme-option[aria-checked="true"] {
background: var(--button-bg);
border-color: var(--button-bg);
color: var(--button-text);
box-shadow: 0 1px 4px rgb(0 94 135 / 30%);
}
.theme-control .theme-option > span { font: inherit; }
.theme-control .theme-option[aria-checked="true"] > span { color: #fff; }
.theme-option[aria-checked="true"] svg { animation: theme-choice-settle var(--motion-normal) var(--ease-standard); }
@keyframes theme-choice-settle {
from { opacity: 0.8; transform: scale(0.94); }
to { opacity: 1; transform: scale(1); }
}
.theme-control .theme-option[aria-checked="false"]:hover {
background: var(--pill-bg);
color: var(--text);
}
.theme-control .theme-option:active svg { transform: scale(0.94); }
.theme-control .theme-option:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 700px) {
.theme-control { width: 8.5rem; }
.theme-control .theme-option { gap: 4px; padding-inline: 6px; font-size: 0.75rem; }
}
@media (prefers-reduced-motion: reduce) {
.theme-control .theme-option { transition: none; }
.theme-option[aria-checked="true"] svg { animation: none; }
}
html:has(> .rescue-page) { scroll-padding: 0; scroll-behavior: auto; }
.rescue-page { min-block-size: 100svh; overflow-wrap: anywhere; }
.rescue-page .game-summary-fallback { display: grid; gap: 8px; margin-block: 16px; font-weight: 650; }
.rescue-page .game-summary-fallback textarea { box-sizing: border-box; inline-size: 100%; min-block-size: 180px; padding: 12px; background: var(--surface); color: inherit; border: 2px solid var(--border-control); border-radius: 12px; font: inherit; }
.rescue-comparison-table { inline-size: 100%; table-layout: fixed; border-collapse: collapse; margin-block: 16px; font-size: 14px; }
.rescue-comparison-table :is(th,td) { padding: 8px; text-align: start; border-block-end: 1px solid var(--border-control); overflow-wrap: anywhere; }
.rescue-path-comparison { margin-block-start: 20px; }
.rescue-topbar { max-inline-size: var(--layout-wide); margin-inline: auto; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-6); flex-wrap: wrap; border-block-end: 1px solid var(--border-control); }
.rescue-back { display: inline-flex; align-items: center; min-block-size: var(--target-min); color: var(--blue); font-weight: 650; text-decoration: underline; text-underline-offset: 0.2em; }
.rescue-settings { display: flex; align-items: center; flex-wrap: nowrap; gap: var(--space-3); inline-size: max-content; min-inline-size: 0; max-inline-size: 100%; }
.rescue-settings .language-selector { flex: 0 0 auto; max-inline-size: 100%; }
.rescue-settings .language-option > span { white-space: nowrap; }
.rescue-settings .theme-control { box-sizing: border-box; width: 12rem; min-inline-size: 0; }
.rescue-settings .theme-option > span { white-space: nowrap; }
.rescue-option input { accent-color: var(--blue); inline-size: 1.1rem; block-size: 1.1rem; flex-shrink: 0; }
.rescue-shell { max-inline-size: 1180px; padding: var(--space-8) var(--space-6) var(--space-12); margin-inline: auto; }
.rescue-intro { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; gap: var(--space-12); padding-block: var(--space-8); }
.rescue-intro-copy h1 { font-size: clamp(2.4rem, 6vw, 5rem); line-height: 1.12; margin-block: var(--space-4) var(--space-6); letter-spacing: -0.04em; }
html[lang="ar"] .rescue-intro-copy h1 { letter-spacing: normal; line-height: 1.4; }
.rescue-eyebrow { color: var(--blue); font-weight: 700; font-size: var(--text-xs); margin-block: 0 var(--space-3); }
.rescue-lead { font-size: var(--text-lg); font-weight: 600; color: var(--blue); }
.rescue-note { color: var(--muted); font-size: var(--text-sm); line-height: 1.7; }
.rescue-card, .rescue-scene { background: var(--surface); border: 1px solid var(--border-control); border-radius: var(--radius-section); padding: var(--space-6); box-shadow: var(--shadow-card); }
.rescue-emblem { display: grid; place-items: center; inline-size: 3.5rem; block-size: 3.5rem; border: 1px solid var(--border-control); border-radius: var(--radius-md); background: var(--pill-bg); color: var(--blue); font-size: 2rem; margin-block-end: var(--space-6); }
[dir="rtl"] .rescue-emblem { transform: scaleX(-1); }
.rescue-roadmap { padding-inline-start: var(--space-6); line-height: 2.2; font-weight: 650; }
.rescue-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block: var(--space-6) var(--space-3); }
.rescue-page .btn { display: inline-flex; align-items: center; justify-content: center; block-size: auto; min-block-size: var(--target-min); max-inline-size: 100%; white-space: normal; padding: var(--space-3) var(--space-4); border: 1px solid var(--blue); border-radius: var(--control-radius); font-weight: 650; cursor: pointer; text-align: center; transform: none; }
.rescue-page .btn-primary { background: var(--button-bg); color: var(--button-text); }
.rescue-page .btn-secondary { background: var(--surface); color: var(--blue); }
.rescue-page .btn:is([aria-disabled="true"], :disabled) { border-style: dashed; cursor: default; }
.rescue-page .btn:hover:not(:disabled) { box-shadow: var(--shadow-control-hover); }
.rescue-session-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-block-end: var(--space-6); }
.rescue-steps { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; gap: var(--space-4); color: var(--muted); font-size: var(--text-sm); }
.rescue-steps li { padding-block: var(--space-2); border-block-end: 2px solid var(--border-control); }
.rescue-steps [aria-current], .rescue-steps .is-complete { border-color: var(--blue); color: var(--blue); font-weight: 700; }
.rescue-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.rescue-sidebar { display: grid; gap: var(--space-6); }
.rescue-comparison-controls { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-end: var(--space-3); }
.rescue-comparison-controls .btn[aria-pressed="true"] { border-width: 2px; font-weight: 750; text-decoration: underline; text-underline-offset: 0.2em; }
.rescue-decision h1 { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.35; margin-block: 0 var(--space-4); }
.rescue-decision h2 { font-size: var(--text-body); margin-block: var(--space-4) var(--space-2); }
.rescue-brief { font-size: var(--text-body); line-height: 1.8; }
.rescue-hint { border-block: 1px solid var(--border-control); margin-block: var(--space-6); padding-block: var(--space-2); }
.rescue-hint summary { min-block-size: var(--target-min); align-content: center; color: var(--blue); cursor: pointer; font-weight: 600; }
.rescue-options { display: grid; gap: var(--space-3); border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.rescue-options legend { padding: 0; margin-block-end: var(--space-3); }
.rescue-option { display: flex; gap: var(--space-3); align-items: start; border: 1px solid var(--border-control); border-radius: var(--radius-md); background: var(--pill-bg); padding: var(--space-4); cursor: pointer; }
.rescue-option input { margin-block-start: 0.25em; }
.rescue-option-copy { display: grid; gap: var(--space-2); min-inline-size: 0; }
.rescue-option strong { font-weight: 700; }
.rescue-option-cost { font-size: var(--text-xs); color: var(--blue); font-weight: 700; }
.rescue-option.is-selected { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.rescue-option:focus-within { outline: 2px solid var(--focus); outline-offset: 3px; }
.rescue-notice:empty { display: none; }
.rescue-notice { color: var(--text); border-inline-start: 3px solid var(--blue); padding-inline-start: var(--space-3); font-size: var(--text-sm); }
.rescue-budget { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); border-block-end: 1px solid var(--border-control); padding-block-end: var(--space-4); margin-block-end: var(--space-4); }
.rescue-budget .rescue-eyebrow { margin: 0; }
.rescue-budget-count { font-size: var(--text-lg); }
.rescue-budget-count, .rescue-meter-label strong { direction: ltr; unicode-bidi: isolate; }
html[lang="ar"] :is(.rescue-budget-count, .rescue-meter-label strong) { direction: rtl; }
.rescue-tokens { display: flex; gap: var(--space-1); }
.rescue-token { color: var(--blue); }
.rescue-token.is-spent { color: var(--muted); text-decoration: line-through; }
.rescue-meter { margin-block: var(--space-4); }
.rescue-meter-label { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); font-size: var(--text-sm); }
.rescue-meter meter { display: block; inline-size: 100%; block-size: 0.9rem; margin-block-start: var(--space-2); accent-color: var(--blue); }
.rescue-meter meter::-webkit-meter-bar { background: var(--pill-bg); border: 1px solid var(--border-control); }
.rescue-meter meter::-webkit-meter-optimum-value { background: var(--blue); }
.rescue-meter meter::-moz-meter-bar { background: var(--blue); }
.rescue-scene h2 { margin-block: var(--space-2) var(--space-4); font-size: var(--text-lg); }
.rescue-scene-task { display: grid; gap: var(--space-1); padding: var(--space-3); background: var(--pill-bg); border-radius: var(--radius-sm); margin-block-end: var(--space-3); }
.rescue-scene-row { display: flex; align-items: start; gap: var(--space-2); padding-block: var(--space-3); border-block-end: 1px solid var(--border-control); font-size: var(--text-sm); }
.rescue-scene-row.is-improved { color: var(--blue); font-weight: 650; }
.rescue-scene-mark { flex-shrink: 0; inline-size: 1.25rem; }
.rescue-deltas { display: flex; flex-wrap: wrap; list-style: none; padding: 0; gap: var(--space-2); }
.rescue-deltas li { border: 1px solid var(--border-control); background: var(--pill-bg); border-radius: var(--radius-sm); padding: var(--space-2); font-size: var(--text-xs); }
.rescue-feedback section { border-block-start: 1px solid var(--border-control); }
.rescue-feedback p { line-height: 1.8; }
.rescue-selected-title, .rescue-result-badge { color: var(--blue); font-weight: 700; }
.rescue-evidence { display: inline-flex; align-items: center; min-block-size: var(--target-min); color: var(--blue); text-decoration: underline; text-underline-offset: 0.2em; }
.rescue-evidence-list { display: grid; gap: var(--space-2); }
.rescue-recap { padding-inline-start: var(--space-6); }
.rescue-recap li { margin-block: var(--space-4); }
.rescue-confirm { inline-size: min(34rem, calc(100% - 2rem)); max-block-size: calc(100svh - 2rem); margin: auto; overflow: auto; color: var(--text); }
.rescue-confirm::backdrop { background: rgb(0 0 0 / 55%); }
.rescue-skip { position: fixed; inset-block-start: var(--space-2); inset-inline-start: var(--space-2); inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); z-index: var(--z-dialog); background: var(--surface); }
.rescue-skip:focus { inline-size: auto; block-size: auto; clip-path: none; padding: var(--space-3); }
.rescue-page [tabindex="-1"] { scroll-margin-block: var(--space-6); }
@media (max-width: 980px) {
.rescue-settings { flex-wrap: wrap; }
}
@media (max-width: 800px) {
.rescue-intro, .rescue-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.rescue-shell, .rescue-topbar { padding-inline: var(--space-4); }
.rescue-intro { padding-block: 0; }
.rescue-card, .rescue-scene { padding: var(--space-4); }
}
@media (prefers-reduced-motion: no-preference) {
.rescue-page .btn { transition: scale var(--motion-fast) var(--ease-standard); }
.rescue-page .btn:not(:disabled, [aria-disabled="true"]):active { scale: 0.97; }
}
@media (forced-colors: active) {
.rescue-page { --blue: LinkText; --surface: Canvas; --pill-bg: Canvas; --text: CanvasText; --muted: CanvasText; --border-control: ButtonBorder; --button-bg: ButtonFace; --button-text: ButtonText; }
.rescue-option.is-selected { outline: 2px solid Highlight; }
}
@media print {
.rescue-topbar, .rescue-actions, .rescue-options, .rescue-skip, .rescue-confirm { display: none !important; }
.rescue-intro, .rescue-grid { display: block; }
.rescue-card, .rescue-scene { box-shadow: none; break-inside: avoid; }
}
.lw-page {
--lw-paper: #faf7ef;
--lw-ink: #11231b;
--lw-muted: #2d483b;
--lw-green: #174635;
--lw-line: #c8d0be;
--lw-soft: #edf0e4;
--lw-gold: #c2881a;
background: var(--lw-paper);
color: var(--lw-ink);
font-family: "Inter Variable", "Noto Sans Arabic Variable", sans-serif;
overflow-wrap: normal;
}
html[data-theme="dark"] .lw-page {
--lw-paper: #11201b;
--lw-ink: #f2f7f3;
--lw-muted: #b8cfc3;
--lw-green: #9ee0b0;
--lw-line: #3b5445;
--lw-soft: #1d332a;
--lw-gold: #f4d084;
}
.lw-page [hidden] { display: none !important; }
.lw-page button, .lw-page a { -webkit-tap-highlight-color: transparent; }
.lw-page button { font: inherit; }
.lw-page :is(button, a):focus-visible { outline: 3px solid var(--lw-green); outline-offset: 4px; }
.lw-topbar { max-inline-size: 1440px; padding: 20px 40px; gap: 24px; border-color: var(--lw-line); }
.lw-wordmark { display: flex; align-items: center; gap: 10px; margin-inline-end: auto; color: var(--lw-ink); text-decoration: none; font-weight: 750; font-size: 23px; letter-spacing: -0.06em; min-block-size: 44px; }
.lw-wordmark > span:first-child { font-size: 32px; color: var(--lw-green); }
.lw-page .rescue-settings { gap: 12px; }
.lw-page .language-selector { min-block-size: 44px; padding: 3px; }
.lw-page .language-option > span { min-inline-size: 42px; padding-inline: 10px; }
.lw-page .theme-control { inline-size: auto; min-block-size: 44px; padding: 3px; }
.lw-page .theme-option { min-inline-size: 64px; min-block-size: 44px; }
.lw-page .language-selector, .lw-page .theme-control { background: transparent; box-shadow: none; border-color: var(--lw-line); }
.lw-page :is(.language-option:has(input:checked), .theme-option[aria-checked="true"]) { background: var(--lw-green); color: var(--lw-paper); }
.lw-page .language-option:has(input:checked) { box-shadow: none; }
.lw-portfolio-link { color: var(--lw-ink); font-size: 14px; min-block-size: 44px; display: inline-flex; align-items: center; text-underline-offset: 4px; }
.lw-shell { max-inline-size: 1440px; padding: 0 40px; margin-inline: auto; }
.lw-intro { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; padding-block: clamp(40px, 6vw, 88px); min-block-size: min(760px, 82svh); }
.lw-eyebrow { color: var(--lw-green); font-size: 11px; font-weight: 750; letter-spacing: 0.13em; line-height: 1.6; margin: 0 0 14px; text-transform: uppercase; }
.lw-intro h1 { font-family: Georgia, "Noto Sans Arabic Variable", serif; font-size: clamp(40px, 4.7vw, 68px); font-weight: 400; line-height: 1.06; letter-spacing: -0.055em; white-space: pre-line; margin: 24px 0; }
.lw-lead { max-inline-size: 36ch; font-size: 17px; line-height: 1.8; color: var(--lw-muted); margin-block-end: 30px; }
.lw-button { display: inline-flex; justify-content: center; align-items: center; gap: 8px; padding: 12px 20px; min-block-size: 48px; border: 1px solid var(--lw-line); border-radius: 12px; background: var(--lw-paper); color: var(--lw-ink); font-size: 14px; line-height: 1.45; font-weight: 650; cursor: pointer; text-decoration: none; white-space: normal; max-inline-size: 100%; transition: transform 120ms ease, background-color 120ms ease; }
.lw-primary { background: var(--lw-green); color: var(--lw-paper); border-color: var(--lw-green); }
.lw-mode-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border: 0; padding: 0; margin: 0 0 24px; min-inline-size: 0; }
.lw-mode-choice legend { font-size: 11px; font-weight: 700; padding: 0; margin-block-end: 10px; color: var(--lw-muted); }
.lw-mode-choice label { display: flex; align-items: start; gap: 8px; padding: 12px; border: 1px solid var(--lw-line); border-radius: 12px; cursor: pointer; }
.lw-mode-choice label:has(:checked) { border: 2px solid var(--lw-green); background: var(--lw-soft); padding: 11px; }
.lw-mode-choice input { margin-block-start: 4px; accent-color: var(--lw-green); flex-shrink: 0; }
.lw-mode-choice label:focus-within { outline: 2px solid var(--lw-green); outline-offset: 3px; }
.lw-mode-choice strong { display: block; font-size: 13px; margin-block-end: 5px; }
.lw-mode-choice small { display: block; font-size: 11px; line-height: 1.7; color: var(--lw-muted); }
.lw-game-actions { display: flex; gap: 10px; flex-shrink: 0; }
.lw-chase-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; margin-block: -4px 20px; }
.lw-chase-toolbar > p { margin: 0; font-size: 11px; color: var(--lw-muted); line-height: 1.7; }
.lw-chase-toolbar > .lw-button, #lw-chase-controls > .lw-button { min-block-size: 44px; font-size: 12px; padding: 9px 14px; }
#lw-chase-controls { display: flex; gap: 8px; }
#lw-chase-status { margin-inline-start: auto; font-variant-numeric: tabular-nums; }
.lw-map.is-chasing { aspect-ratio: 15 / 11; background: #f2e6c8; }
.lw-map.is-chasing > :is(#lw-map-art, #lw-destinations, #lw-player, .lw-place) { visibility: hidden; }
.lw-chase-layer, .lw-chase-board, .lw-chase-letters { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.lw-chase-letters { pointer-events: none; }
.lw-maze-floor { fill: #f2e6c8; }
.lw-maze-wall { fill: #718c6c; stroke: #536f54; stroke-width: 2; }
.lw-inkberry { fill: #966230; stroke: #77502d; stroke-width: 2; }
.lw-glowseed { fill: #80b6b3; stroke: #235954; stroke-width: 4; }
.lw-muddle { color: #ac6d59; }
.lw-muddle-1 { color: #756989; }
.lw-muddle-2 { color: #b78a3f; }
.lw-muddle.is-frightened { color: #397d89; }
.lw-muddle.is-stunned { opacity: 0.25; }
.lw-chase-pip.has-glow { filter: drop-shadow(0 0 12px #275c49); }
.lw-chase-pip.is-safe { outline: 3px dashed #275c49; outline-offset: 2px; }
.lw-chomp-mouth { fill: #68432d; opacity: 0; }
.lw-chase-pip.is-eating .lw-chomp-mouth { opacity: 1; }
.lw-chase-letter { position: absolute; transform: translate(-50%, -50%); min-inline-size: 44px; min-block-size: 44px; padding: 5px 8px; border: 1px solid #587451; border-radius: 10px; background: #fff9e9; color: #2a4e38; font: 600 18px Georgia, serif !important; cursor: pointer; pointer-events: auto; }
.lw-chase-letter.is-collected { background: #d9e8c9; border-style: dashed; }
.lw-chase-letter.is-collected::after { content: " ✓"; font: 10px sans-serif; }
.lw-chase-overlay { position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; justify-items: center; gap: 14px; background: #e5ebd6bf; color: #223e35; }
.lw-chase-overlay strong { padding: 8px; background: #faf7ef; border-radius: 8px; font: 25px Georgia, "Noto Sans Arabic Variable", serif; }
@media (max-width: 540px) {
.lw-chase-toolbar { gap: 8px 12px; margin-block-end: 12px; }
.lw-chase-toolbar > p { font-size: 10px; flex: 1 1 130px; }
#lw-chase-status { flex: 1 1 100%; margin-inline-start: 0; }
.lw-chase-letter { font-size: 15px !important; padding-inline: 5px; }
}
@media (forced-colors: active) {
.lw-chase-letter { background: ButtonFace; color: ButtonText; border: 2px solid ButtonText; }
.lw-chase-overlay { background: Canvas; color: CanvasText; }
}
.lw-game-actions > .lw-button { font-size: 12px; padding: 10px 14px; }
.lw-expedition-bar { display: flex; align-items: center; gap: 20px; margin-block: -4px 20px; border-block: 1px solid var(--lw-line); padding-block: 10px; }
.lw-expedition-stats { display: flex; align-items: center; gap: 24px; margin: 0; margin-inline-end: auto; }
.lw-expedition-stats > div { display: flex; align-items: center; gap: 7px; }
.lw-expedition-stats dt { font-size: 10px; color: var(--lw-muted); }
.lw-expedition-stats dd { margin: 0; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
#lw-heart-value { font-size: 16px; color: var(--lw-green); letter-spacing: 2px; direction: ltr; }
.lw-expedition-bar > .lw-button { min-block-size: 44px; font-size: 11px; padding: 8px 12px; }
.lw-expedition-bar > .lw-text-button { font-size: 11px; }
.lw-rank { display: flex; align-items: center; gap: 12px; color: var(--lw-muted); font-size: 11px; }
.lw-rank progress { inline-size: 100%; max-inline-size: 100px; block-size: 6px; accent-color: var(--lw-green); border: 0; }
.lw-rank span { min-inline-size: 95px; }
.lw-player { transition: none !important; }
.lw-path, .lw-path-edge { stroke-linejoin: miter; stroke-linecap: square; }
.lw-path-edge { stroke-width: 38; }
.lw-path { stroke-width: 32; }
.lw-path-dots { stroke-width: 2; stroke-dasharray: 4 12; stroke-linecap: square; }
.lw-trail-gem { position: absolute; z-index: 2; transform: translate(-50%, -50%); color: #996515; font-size: 17px; pointer-events: none; text-shadow: 0 1px #fff; }
.lw-trail-gem.is-collected { display: none; }
.lw-map.is-travelling .lw-player > svg { animation: lw-waddle 300ms ease-in-out infinite alternate; }
@keyframes lw-waddle { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-2px) rotate(2deg); } }
.lw-chapter-link { padding: 6px 0; min-block-size: 44px; color: var(--lw-muted); text-align: start; border: 0; background: transparent; font: inherit; cursor: pointer; }
.lw-chapter-link:disabled { opacity: 0.65; cursor: default; }
.lw-chapters [aria-current] .lw-chapter-link { color: var(--lw-green); font-weight: 750; }
.lw-chapters { gap: 0; }
.lw-mini-collection { flex-wrap: wrap; gap: 5px; }
.lw-mini-collection > span { font-size: 17px; padding: 7px; }
.lw-region-grid, .lw-badge-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-block: 20px; }
.lw-region-card, .lw-note-card { display: flex; flex-direction: column; align-items: start; gap: 8px; padding: 16px; border: 1px solid var(--lw-line); border-radius: 14px; background: var(--lw-soft); color: var(--lw-ink); text-align: start; cursor: pointer; }
.lw-region-card:disabled { opacity: 0.65; cursor: default; }
.lw-region-card small, .lw-region-card > span { font-size: 11px; line-height: 1.7; color: var(--lw-muted); }
.lw-region-card strong { font-size: 15px; }
.lw-region-letters { direction: ltr; letter-spacing: 3px; font-family: Georgia, serif; }
.lw-fact-challenge { border-block-start: 1px solid var(--lw-line); margin-block-start: 16px; padding-block-start: 4px; }
.lw-fact-copy { color: var(--lw-muted); }
.lw-fact-question { font-weight: 650; }
.lw-fact-options { display: grid; gap: 8px; }
.lw-fact-options button { justify-content: start; text-align: start; min-block-size: 48px; padding: 10px 14px; background: var(--lw-soft); font-size: 13px; }
.lw-fact-options [aria-pressed="true"] { border: 2px solid var(--lw-green); background: var(--lw-paper); }
.lw-fact-options .lw-revealed-answer { outline: 2px dashed var(--lw-green); outline-offset: 3px; }
.lw-fact-hint { border: 1px solid var(--lw-line); border-radius: 10px; padding: 0 12px; margin-block: 10px; }
.lw-fact-hint summary { font-size: 12px; min-block-size: 44px; align-content: center; color: var(--lw-green); cursor: pointer; }
.lw-fact-source { display: inline-flex; align-items: center; min-block-size: 44px; margin-inline-start: 12px; color: var(--lw-muted); font-size: 11px; text-underline-offset: 3px; }
.lw-note-link { inline-size: 100%; margin-block-start: 12px; font-size: 12px; }
.lw-camp-modes { margin-block-start: 24px; border-block-start: 1px solid var(--lw-line); }
.lw-camp-modes .lw-button[aria-pressed="true"] { background: var(--lw-soft); border: 2px solid var(--lw-green); }
.lw-journal-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 16px; }
.lw-journal-tabs .lw-button { flex: 1; font-size: 11px; padding-inline: 10px; }
.lw-journal-tabs [aria-pressed="true"] { background: var(--lw-soft); border: 2px solid var(--lw-green); }
.lw-badge-card { padding: 16px; border: 1px dashed var(--lw-line); border-radius: 12px; color: var(--lw-muted); }
.lw-badge-card.is-earned { border-style: solid; background: var(--lw-soft); color: var(--lw-ink); }
.lw-badge-icon { color: var(--lw-green); font-size: 26px; }
.lw-badge-card h3 { font-size: 14px; margin-block: 10px 6px; }
.lw-badge-card p { font-size: 11px; margin: 0; color: var(--lw-muted); }
.lw-note-grid { display: grid; gap: 12px; }
.lw-note-card span { font-size: 12px; line-height: 1.8; color: var(--lw-muted); }
.lw-note-card small { font-size: 10px; color: var(--lw-green); }
.lw-map[data-region="3"] .lw-ground { fill: #cdd8d6; }
.lw-map[data-region="3"] .lw-leaf { fill: #7d9c92; }
.lw-map[data-region="3"] .lw-water { fill: #91b3bc; }
.lw-map[data-region="4"] .lw-ground { fill: #e4ebe2; }
.lw-map[data-region="4"] .lw-water { fill: #91bdc4; }
.lw-map[data-region="5"] .lw-ground { fill: #e5e9cd; }
.lw-map[data-region="5"] .lw-garden-growth { opacity: 1; }
.lw-map[data-region="6"] .lw-ground { fill: #e9dec9; }
.lw-map[data-region="6"] .lw-leaf { fill: #b7ac79; }
.lw-map[data-region="6"] .lw-pine { fill: #8c9a76; }
.lw-button:hover:not(:disabled), .lw-icon-button:hover, .lw-movement button:hover { box-shadow: 0 2px 0 var(--lw-line); }
.lw-button:disabled { opacity: 0.6; cursor: default; border-style: dashed; }
.lw-text-button { border: 0; padding: 10px 0; background: transparent; color: var(--lw-green); min-block-size: 44px; cursor: pointer; text-align: start; text-decoration: underline; text-underline-offset: 4px; font-size: 13px; font-weight: 650; }
.lw-entry-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.lw-meta { font-size: 12px; line-height: 1.7; color: var(--lw-muted); margin: 16px 0 28px; }
.lw-tour-invite { display: flex; flex-direction: column; align-items: start; border-inline-start: 2px solid var(--lw-line); padding-inline-start: 18px; }
.lw-tour-invite > span { font-size: 11px; color: var(--lw-muted); }
.lw-cover { position: relative; aspect-ratio: 0.95; border-radius: 180px 180px 24px 24px; overflow: hidden; border: 1px solid var(--lw-line); background: #e4e9d5; isolation: isolate; transform: rotate(2deg); }
.lw-cover-art { position: absolute; inset: 15% -36% -2% -18%; filter: saturate(0.8); }
.lw-cover-label { position: absolute; inset: 30px 12px auto; text-align: center; font-size: 9px; font-weight: 750; letter-spacing: 0.18em; color: #2b523d; }
.lw-cover-caption { position: absolute; inset: auto 24px 21px; text-align: center; font: italic 17px Georgia, serif; color: #2b523d; }
.lw-cover-letter { position: absolute; inset: 24% auto auto 21%; display: flex; direction: ltr; align-items: baseline; gap: 14px; padding: 8px 25px; border-radius: 13px; background: #fff9e9; color: #315540; font: 82px Georgia, serif; transform: rotate(-10deg); border: 1px solid #9ba88b; box-shadow: 0 9px 0 #435d3c15; }
.lw-cover-letter span { font-size: 62px; }
.lw-cover-pip { position: absolute; inline-size: 116px; inset: auto 14% 14% auto; transform: rotate(-2deg); }
.lw-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; padding-block: 24px; border-block-start: 1px solid var(--lw-line); color: var(--lw-muted); font-size: 11px; }
.lw-footer > p { margin: 0; }
.lw-footer > div { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; }
.lw-footer a { min-block-size: 44px; display: inline-flex; align-items: center; color: var(--lw-muted); text-underline-offset: 4px; }
.lw-footer .lw-text-button { font-size: 11px; }
.lw-game-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 30px 24px; }
.lw-game-heading .lw-eyebrow { margin-block-end: 5px; }
.lw-game-heading h1 { font: 400 clamp(25px, 3vw, 38px) / 1.2 Georgia, "Noto Sans Arabic Variable", serif; letter-spacing: -0.035em; margin: 0; }
.lw-journal-button { flex-shrink: 0; padding: 10px 14px; font-size: 12px; }
.lw-journal-button > span:first-child { font-size: 20px; }
.lw-journal-button > span:last-child { font-size: 11px; color: var(--lw-muted); }
.lw-game-layout { display: grid; grid-template-columns: minmax(0, 1fr) 248px; gap: 30px; align-items: start; }
.lw-map-column { min-inline-size: 0; }
.lw-map { position: relative; aspect-ratio: 1000 / 660; border: 1px solid #adbda0; border-radius: 24px; overflow: hidden; background: #dce5c9; direction: ltr; isolation: isolate; }
.lw-map-art, #lw-map-art, #lw-destinations { position: absolute; inset: 0; }
.lw-garden-art { inline-size: 100%; block-size: 100%; display: block; }
.lw-grass-mark { stroke: #8d9f75; stroke-width: 1.2; opacity: 0.4; }
.lw-contour { stroke: #c6d2b4; stroke-width: 2; stroke-dasharray: 5 7; }
.lw-river-bank { fill: #c2d6ba; }
.lw-water-line { stroke: #6e9e99; stroke-width: 3; stroke-linecap: round; }
.lw-path-edge { stroke: #cfc8a5; stroke-width: 58; stroke-linecap: round; }
.lw-path { stroke: #efe2bc; stroke-width: 52; stroke-linecap: round; }
.lw-path-dots { stroke: #cabf98; stroke-width: 2; stroke-dasharray: 2 15; stroke-linecap: round; }
.lw-shadow { fill: #263e3320; }
.lw-trunk { fill: #997d58; stroke: #725f42; stroke-width: 3; stroke-linecap: round; }
.lw-leaf { fill: #9bae7d; stroke: #657e56; stroke-width: 2; }
.lw-pine { fill: #6e9274; stroke: #476b53; stroke-width: 2; }
.lw-leaf-line { stroke: #36573b; stroke-width: 2.5; stroke-linecap: round; opacity: 0.45; }
.lw-bridge > path:first-child { fill: #c8aa7a; stroke: #8c714d; stroke-width: 3; }
.lw-bridge > path:nth-child(2) { stroke: #9e8059; stroke-width: 2; }
.lw-bridge > path:last-child { stroke: #745d42; stroke-width: 6; stroke-linecap: round; }
.lw-bench { fill: #b58c57; stroke: #775b3a; stroke-width: 2; }
.lw-book-pages { fill: #fff7d9; stroke: #62714f; stroke-width: 2; }
.lw-book-line { stroke: #536b58; stroke-width: 2.5; stroke-linejoin: round; }
.lw-pump-metal { fill: #8eb3a2; stroke: #476f60; stroke-width: 3; }
.lw-stone, .lw-stones { fill: #bbc0a7; stroke: #8c9a7d; stroke-width: 1.5; }
.lw-wall { fill: #efe4bf; stroke: #a58e68; stroke-width: 3; }
.lw-roof { fill: #ac6a4d; stroke: #855037; stroke-width: 3; stroke-linejoin: round; }
.lw-door { fill: #6f9277; stroke: #4e6f55; stroke-width: 3; }
.lw-window { fill: #bfcdc0; stroke: #7c8e73; stroke-width: 2; }
.lw-knob { fill: #ebd7a4; }
.lw-fence { stroke: #aaa886; stroke-width: 5; stroke-linecap: round; }
.lw-flower > path:first-child { stroke: #678d55; stroke-width: 2; }
.lw-flower > path:nth-child(2) { fill: #e7b981; stroke: #b78e54; stroke-width: 1.5; }
.lw-flower > circle { fill: #fbefbd; }
.lw-reading-spot { opacity: 0.25; }
.lw-garden-growth { opacity: 0.12; }
.lw-flow { opacity: 0; }
.lw-library .lw-window { fill: #b2bbaa; }
.is-grove-restored .lw-reading-spot { opacity: 1; }
.is-water-restored .lw-garden-growth, .is-water-restored .lw-flow { opacity: 1; }
.is-library-restored .lw-library .lw-window { fill: #ffdf85; }
.is-library-restored .lw-library .lw-door { fill: #336b51; }
.lw-letter-node, .lw-book-node { position: absolute; transform: translate(-50%, -50%); border: 2px solid #8c6a2d; border-radius: 18px 18px 14px 14px; min-inline-size: 52px; min-block-size: 52px; padding: 7px 9px; background: radial-gradient(circle at 35% 25%, #fff, #fff3cf 65%, #f9e29f); color: #2a4e38; font: 600 20px Georgia, serif !important; cursor: pointer; box-shadow: 0 5px 0 #8b6e34, 0 8px 16px rgb(32 78 63 / 18%); z-index: 2; transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease; }
.lw-letter-node:hover, .lw-book-node:hover { transform: translate(-50%, -50%) translateY(-3px) scale(1.05); box-shadow: 0 7px 0 #7a5a22, 0 12px 20px rgb(32 78 63 / 25%); outline: 2px solid #57754e; outline-offset: 2px; }
.lw-letter-node:is(#lw-letter-a, #lw-letter-e, #lw-letter-i, #lw-letter-o, #lw-letter-u) { background: radial-gradient(circle at 35% 25%, #fff, #ffe7a3 65%, #ffd269); border-color: #b56e17; box-shadow: 0 5px 0 #7b4408, 0 0 14px #ffc13b55, 0 8px 18px rgb(40 70 50 / 22%); }
.lw-letter-node.is-collected { background: radial-gradient(circle at 35% 25%, #f4fbf0, #d3ebb8 70%, #bcdba0); box-shadow: 0 3px 0 #335930; border: 2px solid #4a7746; }
.lw-letter-node.is-locked { background: #dbe0cd; border-style: dashed; color: #4f604b; box-shadow: none; }
.lw-node-check { position: absolute; inset: -8px -6px auto auto; border-radius: 50%; display: grid; place-items: center; inline-size: 20px; block-size: 20px; background: #275c49; color: #fff9e9; font: 12px "Inter Variable", sans-serif; }
.lw-book-node { min-inline-size: 44px; min-block-size: 44px; border-radius: 50%; background: #e8dfc5; font: 20px "Inter Variable", sans-serif !important; }
.lw-book-node.is-ready { background: #275c49; color: #fff9e9; outline: 3px solid #fff9e9; outline-offset: 2px; }
.lw-player { position: absolute; inline-size: clamp(38px, 6%, 65px); z-index: 3; transform: translate(-50%, -50%); pointer-events: none; transition: left 350ms ease, top 350ms ease; }
.lw-place { position: absolute; color: #3e573d; font-size: clamp(8px, 0.8vw, 11px); font-weight: 650; pointer-events: none; background: #e5ebd6c9; border-radius: 4px; padding: 2px 5px; text-align: center; }
.lw-place-grove { left: 22%; top: 90%; }
.lw-place-water { left: 70%; top: 86%; }
.lw-place-library { left: 76%; top: 20%; }
.lw-map-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px 0; }
.lw-map-toolbar > p { max-inline-size: 47ch; margin: 0; color: var(--lw-muted); font-size: 11px; line-height: 1.7; }
.lw-movement { display: flex; flex-shrink: 0; gap: 5px; direction: ltr; }
.lw-movement button { min-inline-size: 44px; min-block-size: 44px; background: var(--lw-soft); color: var(--lw-ink); border: 1px solid var(--lw-line); border-radius: 9px; cursor: pointer; }
.lw-keyboard-hint { color: var(--lw-muted); font-size: 10px; line-height: 1.7; margin-block: 8px 0; }
.lw-field-notes { display: grid; gap: 24px; }
.lw-goal { padding: 24px; border-radius: 18px; background: var(--lw-soft); }
.lw-goal .lw-eyebrow { font-size: 10px; margin-block-end: 10px; }
.lw-goal h2 { font: 400 24px / 1.3 Georgia, "Noto Sans Arabic Variable", serif; margin: 0 0 18px; }
.lw-goal > p:last-child { margin-block: 16px 0; font-size: 12px; color: var(--lw-muted); line-height: 1.8; }
.lw-goal > .lw-button { inline-size: 100%; padding: 10px; font-size: 12px; }
.lw-mini-collection { display: flex; gap: 8px; margin-block: 14px 20px; }
.lw-mini-collection > span { display: flex; gap: 4px; align-items: center; padding: 9px; border: 1px dashed var(--lw-line); border-radius: 8px; color: var(--lw-muted); font: 21px Georgia, serif; }
.lw-mini-collection .is-found { background: var(--lw-paper); color: var(--lw-green); border-style: solid; }
.lw-mini-collection small { font: 10px "Inter Variable", sans-serif; }
.lw-companion { display: flex; align-items: center; gap: 10px; }
.lw-companion > div { inline-size: 65px; flex-shrink: 0; }
.lw-companion p { color: var(--lw-muted); font-size: 12px; line-height: 1.8; margin: 0; }
.lw-chapters { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.lw-chapters li { display: flex; align-items: center; gap: 12px; color: var(--lw-muted); font-size: 11px; }
.lw-chapters li > span:first-child { display: grid; place-items: center; inline-size: 25px; block-size: 25px; border: 1px solid var(--lw-line); border-radius: 50%; flex-shrink: 0; }
.lw-chapters [aria-current] { font-weight: 750; color: var(--lw-green); }
.lw-chapters .is-complete > span:first-child { background: var(--lw-green); color: var(--lw-paper); }
.lw-save-status { color: var(--lw-muted); font-size: 10px; margin: 20px 0; }
.lw-save-status::before { content: "✓ "; }
.lw-tour-banner { display: flex; justify-content: space-between; align-items: center; gap: 20px; background: var(--lw-soft); border-radius: 12px; padding: 12px 20px; margin-block-start: 20px; font-size: 12px; }
.lw-tour-banner p { margin: 4px 0 0; color: var(--lw-muted); line-height: 1.6; }
.lw-tour-banner button { flex-shrink: 0; }
.lw-dialog { inline-size: min(580px, calc(100% - 24px)); max-block-size: calc(100svh - 20px); margin: auto; padding: clamp(14px, 2.5vw, 24px); border: 1px solid var(--lw-line); border-radius: 20px; background: var(--lw-paper); color: var(--lw-ink); overscroll-behavior: contain; }
.lw-dialog::backdrop { background: #172b269c; backdrop-filter: blur(5px); }
.lw-dialog-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.lw-dialog-top .lw-eyebrow { margin: 0; }
.lw-icon-button { display: grid; place-items: center; min-inline-size: 44px; min-block-size: 44px; border: 1px solid var(--lw-line); border-radius: 50%; color: var(--lw-ink); background: transparent; font-size: 24px !important; cursor: pointer; }
.lw-dialog h2 { font: 400 32px / 1.25 Georgia, "Noto Sans Arabic Variable", serif; letter-spacing: -0.03em; margin: 12px 0 20px; }
.lw-dialog h3 { font-size: 16px; margin-block: 20px 8px; }
.lw-dialog p { font-size: 13px; line-height: 1.8; }
.lw-dialog .lw-letter-heading { font: 76px / 1 Georgia, serif; text-align: center; color: var(--lw-green); margin: 0 0 6px; }
.lw-encounter-visual { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--lw-soft); border-radius: 16px; padding: 4px; }
.lw-encounter-visual svg { inline-size: 100px; block-size: 90px; }
.lw-encounter-visual .lw-example-word { margin: 0 0 10px; font-size: 19px; font-weight: 650; }
.lw-sound-description { text-align: center; color: var(--lw-muted); }
.lw-audio-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.lw-audio-actions button { font-size: 12px; padding: 10px 14px; }
.lw-match { border-block-start: 1px solid var(--lw-line); margin-block-start: 8px; }
.lw-match > p { color: var(--lw-muted); margin-block: 6px 12px; }
.lw-match-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.lw-match-options button { font: 34px Georgia, serif; min-block-size: 64px; background: var(--lw-soft); }
.lw-match-options [aria-pressed="true"] { border: 2px solid var(--lw-green); background: var(--lw-paper); }
.lw-inline-status { min-block-size: 24px; color: var(--lw-green); margin-block: 10px; }
.lw-dialog-actions { display: flex; justify-content: end; gap: 10px; flex-wrap: wrap; border-block-start: 1px solid var(--lw-line); margin-block-start: 16px; padding-block-start: 16px; }
.lw-dialog-actions .lw-button { font-size: 12px; }
.lw-form-switch { display: flex; gap: 10px; }
.lw-form-switch .lw-button { flex: 1; font-size: 12px; }
.lw-form-switch [aria-pressed="true"] { background: var(--lw-soft); border: 2px solid var(--lw-green); }
.lw-stroke-label { color: var(--lw-muted); text-align: center; }
.lw-trace-field { display: block; inline-size: 100%; aspect-ratio: 320 / 220; border: 1px solid var(--lw-line); border-radius: 16px; background: var(--lw-soft); touch-action: none; user-select: none; }
.lw-writing-lines { stroke: var(--lw-line); stroke-width: 1; stroke-dasharray: 4 4; }
.lw-trace-guide { stroke: var(--lw-muted); stroke-width: 12; opacity: 0.24; stroke-linecap: round; stroke-linejoin: round; }
.lw-trace-complete, .lw-trace-ink { stroke: var(--lw-green); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.lw-stroke-start { fill: var(--lw-green); }
.lw-stroke-number { fill: var(--lw-paper); font: 11px "Inter Variable", sans-serif; }
.lw-help, .lw-trace-help { color: var(--lw-muted); }
.lw-puzzle-picture { display: flex; justify-content: center; background: var(--lw-soft); border-radius: 16px; padding: 16px; }
.lw-puzzle-picture svg { inline-size: 110px; block-size: 100px; }
.lw-sentence { font-weight: 600; font-size: 17px !important; text-align: center; margin: 16px 0; }
.lw-word-slots, .lw-letter-bank { display: flex; justify-content: center; gap: 12px; margin-block: 20px; }
.lw-word-slots button { min-inline-size: 64px; min-block-size: 72px; font: 32px Georgia, serif; border: 2px solid var(--lw-green); background: var(--lw-soft); }
.lw-letter-bank { flex-wrap: wrap; }
.lw-letter-bank button { min-inline-size: 52px; min-block-size: 52px; font: 28px Georgia, serif; padding: 6px; }
.lw-result-art { aspect-ratio: 1000 / 660; overflow: hidden; border-radius: 16px; }
.lw-word-badge { text-align: center; font: 32px Georgia, serif !important; color: var(--lw-green); }
.lw-earned-stars { text-align: center; letter-spacing: 6px; color: var(--lw-green); font-size: 25px !important; margin: 0; }
.lw-reward-line { text-align: center; color: var(--lw-muted); }
.lw-journal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-block: 24px; }
.lw-journal-card { display: flex; flex-direction: column; align-items: center; justify-content: start; padding: 14px 8px; gap: 6px; background: var(--lw-soft); border: 1px solid var(--lw-line); border-radius: 14px; min-block-size: 180px; color: var(--lw-ink); cursor: pointer; }
.lw-journal-card:disabled { border-style: dashed; cursor: default; opacity: 0.7; }
.lw-journal-card strong { font: 30px Georgia, serif; }
.lw-journal-card small { font-size: 10px; line-height: 1.5; }
.lw-journal-illustration { inline-size: 70px; block-size: 60px; }
.lw-journal-illustration svg { inline-size: 100%; block-size: 100%; }
.lw-journal-badge { color: var(--lw-green); }
.lw-design-note { border-block-start: 1px solid var(--lw-line); padding-block: 4px 12px; }
.lw-design-note p { color: var(--lw-muted); }
.lw-toast { position: fixed; inset: auto 24px 20px auto; z-index: 30; display: flex; align-items: center; gap: 12px; max-inline-size: min(480px, calc(100% - 32px)); padding: 8px 12px 8px 18px; border: 1px solid var(--lw-line); border-radius: 16px; box-shadow: 0 8px 30px #172b2620; background: var(--lw-paper); color: var(--lw-ink); }
.lw-toast > span { color: var(--lw-green); }
.lw-toast p { font-size: 12px; margin: 0; line-height: 1.6; }
.lw-toast .lw-icon-button { min-inline-size: 36px; min-block-size: 44px; border: 0; }
html[lang="ar"] .lw-page :is(h1, h2, .lw-wordmark) { letter-spacing: normal; line-height: 1.5; }
html[lang="ar"] .lw-page .lw-eyebrow { letter-spacing: normal; }
html[lang="ar"] .lw-dialog .lw-letter-heading { font-family: Georgia, serif; line-height: 1; }
@media (max-width: 1100px) {
.lw-topbar, .lw-shell { padding-inline: 24px; }
.lw-intro { gap: 36px; }
.lw-game-layout { grid-template-columns: minmax(0, 1fr) 220px; gap: 20px; }
.lw-goal { padding: 18px; }
.lw-map-toolbar { flex-wrap: wrap; }
}
@media (max-width: 760px) {
.lw-topbar { padding: 12px 16px; gap: 12px; }
.lw-wordmark { font-size: 19px; gap: 5px; }
.lw-wordmark > span:first-child { font-size: 24px; }
.lw-page .rescue-settings { gap: 6px; }
.lw-page .theme-option { min-inline-size: 44px; padding-inline: 6px; font-size: 10px; }
.lw-page .language-option > span { min-inline-size: 32px; padding-inline: 5px; font-size: 11px; }
.lw-portfolio-link { font-size: 11px; }
.lw-shell { padding-inline: 16px; }
.lw-intro { min-block-size: auto; padding-block: 36px; gap: 30px; }
.lw-intro h1 { font-size: 44px; }
.lw-cover { aspect-ratio: 0.8; }
.lw-cover-letter { font-size: 52px; padding: 8px 16px; gap: 6px; }
.lw-cover-letter span { font-size: 42px; }
.lw-cover-label { font-size: 7px; }
.lw-cover-caption { font-size: 13px; }
.lw-cover-pip { inline-size: 75px; }
.lw-game-layout { grid-template-columns: 1fr; gap: 14px; }
.lw-game-heading { padding-block: 20px 16px; }
.lw-game-heading h1 { font-size: 28px; }
.lw-field-notes { grid-template-columns: 1fr 1fr; gap: 16px; }
.lw-goal { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; padding: 16px; }
.lw-goal .lw-eyebrow { grid-column: 1; margin: 0; }
.lw-goal h2 { grid-column: 1; margin: 0; font-size: 22px; }
.lw-mini-collection { grid-column: 2; grid-row: 1 / 3; align-self: center; margin: 0; }
.lw-mini-collection > span { padding: 6px; font-size: 18px; }
.lw-goal > .lw-button { grid-column: 1 / -1; }
.lw-goal > p:last-child { grid-column: 1 / -1; margin: 0; }
.lw-companion { align-items: start; }
.lw-companion > div { inline-size: 48px; }
.lw-companion p { font-size: 11px; }
.lw-chapters { gap: 8px; }
.lw-chapters li { font-size: 10px; gap: 8px; }
.lw-map-toolbar { padding-block-start: 10px; gap: 10px; }
.lw-map-toolbar > p { flex: 1; min-inline-size: 100px; }
.lw-movement { gap: 4px; }
.lw-movement button { min-inline-size: 44px; }
.lw-keyboard-hint { font-size: 9px; }
.lw-tour-banner { padding: 12px; gap: 10px; }
.lw-tour-banner .lw-text-button { font-size: 11px; }
.lw-footer { padding-block: 16px; }
.lw-footer > div { gap: 16px; }
.lw-dialog { padding: 16px 20px 24px; }
.lw-dialog h2 { font-size: 28px; }
}
@media (max-width: 540px) {
.lw-topbar { flex-wrap: wrap; gap: 6px 10px; }
.lw-portfolio-link { order: 2; }
.lw-page .rescue-settings { order: 3; flex-basis: 100%; justify-content: space-between; }
.lw-intro { grid-template-columns: 1fr; padding-block: 32px; gap: 28px; }
.lw-intro-copy { max-inline-size: 440px; }
.lw-intro h1 { margin-block: 12px 20px; font-size: clamp(38px, 10vw, 52px); }
.lw-lead { font-size: 15px; margin-block-end: 24px; }
.lw-cover { inline-size: 100%; aspect-ratio: 1.3; max-inline-size: 440px; border-radius: 120px 120px 20px 20px; }
.lw-cover-art { inset-block-start: 5%; }
.lw-cover-letter { inset-block-start: 27%; font-size: 64px; }
.lw-cover-letter span { font-size: 48px; }
.lw-cover-caption { font-size: 15px; inset-block-end: 14px; }
.lw-cover-pip { inline-size: 84px; inset-block-end: 12%; }
.lw-cover-label { inset-block-start: 17px; font-size: 8px; }
.lw-meta { margin-block: 12px 20px; }
.lw-eyebrow { font-size: 10px; }
.lw-game-heading { gap: 10px; }
.lw-game-heading h1 { font-size: 25px; }
.lw-game-heading .lw-eyebrow { font-size: 9px; }
.lw-journal-button { padding: 8px 10px; min-block-size: 48px; gap: 6px; }
.lw-journal-button > span:first-child { display: none; }
.lw-map { border-radius: 16px; aspect-ratio: 1000 / 760; }
.lw-letter-node { min-inline-size: 44px; min-block-size: 48px; padding: 6px; font-size: 18px !important; }
.lw-book-node { min-inline-size: 44px; min-block-size: 44px; }
.lw-place { font-size: 8px; }
.lw-place-library { top: 17%; left: 72%; }
.lw-map-toolbar > p { font-size: 10px; }
.lw-movement { gap: 6px; margin-inline: auto; }
.lw-map-toolbar { flex-direction: column; align-items: start; }
.lw-keyboard-hint { display: none; }
.lw-goal h2 { font-size: 20px; }
.lw-mini-collection { gap: 4px; }
.lw-mini-collection > span { font-size: 15px; padding: 5px; }
.lw-chapters li { line-height: 1.5; }
.lw-toast { inset-inline: 16px; inset-block-end: 12px; padding: 6px 8px 6px 12px; gap: 8px; }
.lw-toast p { font-size: 11px; }
.lw-toast .lw-text-button { font-size: 11px; }
.lw-journal-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.lw-dialog .lw-letter-heading { font-size: 64px; }
.lw-dialog-actions > .lw-button { flex: 1 1 140px; }
.lw-word-slots { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
.lw-player { transition: none; }
}
@media (forced-colors: active) {
.lw-page :is(button, a):focus-visible { outline-color: Highlight; }
.lw-letter-node, .lw-book-node { border: 2px solid ButtonText; background: ButtonFace; color: ButtonText; box-shadow: none; }
.lw-letter-node.is-collected { border-style: dashed; }
.lw-book-node.is-ready { outline: 3px solid Highlight; }
.lw-trace-guide { stroke: GrayText; opacity: 1; }
.lw-trace-complete, .lw-trace-ink { stroke: Highlight; }
.lw-stroke-start { fill: Highlight; }
.lw-stroke-number { fill: HighlightText; }
.lw-place { color: CanvasText; background: Canvas; }
}
@media (max-width:760px){
#lw-mode-button { display: none; }
.lw-expedition-bar{gap:10px;flex-wrap:wrap;margin-block-end:14px;}
.lw-expedition-stats{gap:14px;}
.lw-expedition-stats>div{flex-direction:column;align-items:start;gap:3px;}
.lw-expedition-bar>.lw-button{padding-inline:10px;}
.lw-rank{grid-column:1/-1;justify-content:space-between;}
.lw-rank progress{max-inline-size:180px;}
.lw-chapters{display:none;}
.lw-field-notes{grid-template-columns:1fr;}
.lw-companion{grid-column:1/-1;}
.lw-game-actions{gap:6px;}
.lw-game-actions>.lw-button{padding:8px 10px;font-size:10px;}
.lw-mini-collection{max-inline-size:170px;}
}
@media (max-width:540px){
.lw-game-heading{align-items:start;flex-wrap:wrap;gap:10px;}
.lw-game-actions{margin-inline-start:auto;}
.lw-game-heading>div:first-child{flex:1 1 160px;}
.lw-expedition-stats{gap:14px;}
.lw-expedition-stats dd{font-size:12px;}
.lw-expedition-bar>.lw-text-button{font-size:10px;}
.lw-expedition-bar>.lw-button{margin-inline-start:auto;}
.lw-mode-choice{gap:8px;}
.lw-mode-choice label{padding:10px;}
.lw-mode-choice label:has(:checked){padding:9px;}
.lw-mode-choice small{font-size:10px;}
.lw-region-grid,.lw-badge-grid{gap:10px;}
.lw-region-card{padding:12px;}
.lw-word-slots{gap:6px;}
.lw-word-slots button{min-inline-size:50px;min-block-size:60px;padding:6px;}
.lw-mini-collection>span{font-size:14px;padding:5px;}
.lw-goal{grid-template-columns:minmax(0,1fr);}
.lw-mini-collection{grid-column:1;grid-row:auto;max-inline-size:none;}
}
@media(prefers-reduced-motion:reduce){.lw-map.is-travelling .lw-player>svg{animation:none;}}
@media(forced-colors:active){.lw-trail-gem{color:Highlight;text-shadow:none;}.lw-revealed-answer{outline-color:Highlight;}.lw-badge-card.is-earned{border:2px solid Highlight;}}
.lw-chase-session .lw-shell{max-inline-size:1200px;}
.lw-chase-session .lw-game-heading{padding-block:20px 14px;}
.lw-chase-session .lw-game-heading h1{font-family:'Inter Variable','Noto Sans Arabic Variable',sans-serif;font-size:23px;font-weight:700;letter-spacing:-.035em;}
.lw-chase-session .lw-game-heading .lw-eyebrow{font-size:9px;}
.lw-chase-session :is(.lw-expedition-bar,.lw-field-notes,#lw-chase-status,#lw-save-status,.lw-keyboard-hint){display:none!important;}
.lw-chase-session .lw-game-layout{grid-template-columns:minmax(0,1fr);}
.lw-chase-session .lw-map-column{inline-size:100%;max-inline-size:920px;margin-inline:auto;}
.lw-chase-session .lw-chase-toolbar{justify-content:end;max-inline-size:920px;margin-inline:auto;margin-block-end:12px;}
.lw-run-hud{display:grid;grid-template-columns:1fr auto;gap:12px 24px;padding:20px 24px;background:#182b3e;border:1px solid #38556d;border-block-end:0;border-radius:20px 20px 0 0;color:#eff5ef;}
.lw-run-heading{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.lw-live-chip{font-size:9px;letter-spacing:.08em;font-weight:750;color:#d5e5e8;border:1px solid #607a87;border-radius:30px;padding:5px 9px;}
.lw-live-chip.is-live{color:#bbefce;border-color:#659b82;}
.lw-run-title{font-size:14px;font-weight:750;}
.lw-run-mode{font-size:10px;color:#bed0da;}
.lw-run-score{grid-column:2;grid-row:1/3;display:flex;flex-direction:column;align-items:end;justify-content:center;gap:4px;}
.lw-run-label{font-size:9px;color:#b6cbd5;}
.lw-run-score-value{font-size:34px;font-weight:750;letter-spacing:-.05em;font-variant-numeric:tabular-nums;line-height:1;}
.lw-run-goals{display:flex;gap:10px 20px;flex-wrap:wrap;align-items:center;}
.lw-run-count{font-size:11px;font-weight:600;color:#e2ebdf;}
.lw-run-goals progress{flex-basis:100%;inline-size:100%;block-size:5px;accent-color:#89cbb5;border:0;}
.lw-run-hearts{font-size:15px;letter-spacing:2px;color:#eebcb0;direction:ltr;}
.lw-run-chain{grid-column:2;text-align:end;font-size:10px;color:#f0cf8b;}
.lw-run-glow{grid-column:1/-1;display:flex;align-items:center;gap:14px;padding-block-start:10px;border-block-start:1px solid #38556d;}
.lw-run-glow span{font-size:10px;color:#c3d6de;min-inline-size:135px;}
.lw-run-glow progress{inline-size:100%;block-size:6px;accent-color:#a2e1c4;border:0;}
.lw-run-hud.is-powered .lw-run-glow span{color:#b8f2d3;font-weight:700;}
.lw-map.is-chasing{border:1px solid #38556d;border-radius:0 0 20px 20px;box-shadow:0 18px 40px #142d3c18;isolation:isolate;}
.lw-maze-floor{fill:#101e30;}
.lw-maze-wall{fill:#263f57;stroke:#577e97;stroke-width:2;}
.lw-inkberry{fill:#f1c27b;stroke:#f1c27b;stroke-width:1;}
.lw-glowseed{fill:#a5e7ce;stroke:#508f83;stroke-width:5;filter:drop-shadow(0 0 8px #8dddbe80);}
.lw-muddle{color:#de8a73;}
.lw-muddle-1{color:#b39acb;}
.lw-muddle-2{color:#e6b45e;}
.lw-muddle.is-frightened{color:#77b9d9;}
.lw-chase-pip.has-glow{filter:drop-shadow(0 0 10px #bbf3cf);}
.lw-chase-pip.is-safe{outline:2px dashed #bbf3cf;outline-offset:2px;}
.lw-chase-letter{background:#f8edcf;border:1px solid #c9b581;box-shadow:0 3px 0 #050c184d;color:#243c35;border-radius:10px;}
.lw-chase-letter.is-collected{background:#a9d4b7;border-color:#c6e8cb;color:#163b30;}
.lw-chase-overlay{background:#0c192cbf;backdrop-filter:blur(3px);}
.lw-chase-overlay strong{background:transparent;color:#f3efdc;font-family:'Inter Variable','Noto Sans Arabic Variable',sans-serif;font-size:24px;font-weight:700;letter-spacing:-.04em;}
.lw-chase-overlay .lw-primary{background:#bce9cd;color:#183c31;border-color:#bce9cd;}
.lw-score-popup{fill:#ffdf9a;font:700 42px 'Inter Variable',sans-serif;paint-order:stroke;stroke:#132438;stroke-width:5;pointer-events:none;animation:lw-score-rise 650ms ease-out both;}
@keyframes lw-score-rise{from{opacity:1;transform:translateY(0);}to{opacity:0;transform:translateY(-35px);}}
.lw-chase-session .lw-map-toolbar{border:1px solid var(--lw-line);border-radius:14px;padding:12px 16px;margin-block-start:14px;background:var(--lw-soft);}
.lw-chase-session .lw-map-toolbar>p{font-size:11px;max-inline-size:38ch;}
.lw-chase-session .lw-movement button{min-inline-size:48px;min-block-size:48px;background:var(--lw-paper);border-radius:10px;font-size:18px;}
.lw-chase-session .lw-movement button:active{background:var(--lw-green);color:var(--lw-paper);}
@media(max-width:540px){
.lw-chase-session .lw-shell{padding-inline:12px;}
.lw-chase-session .lw-topbar{padding-block:8px;}
.lw-chase-session .lw-game-heading{gap:8px;padding-block:14px 10px;align-items:center;}
.lw-chase-session .lw-game-heading>div:first-child{flex:1 1 150px;}
.lw-chase-session .lw-game-heading h1{font-size:20px;}
.lw-chase-session .lw-chase-toolbar{margin-block-end:10px;}
.lw-chase-session #lw-chase-controls{inline-size:100%;justify-content:space-between;}
.lw-chase-session #lw-chase-controls .lw-button{font-size:11px;padding:8px 12px;}
.lw-run-hud{padding:14px 14px 12px;gap:10px 12px;border-radius:16px 16px 0 0;}
.lw-run-heading{gap:6px 8px;}
.lw-run-title{font-size:12px;}
.lw-run-mode{display:none;}
.lw-live-chip{font-size:8px;padding:4px 7px;}
.lw-run-score-value{font-size:28px;}
.lw-run-goals{gap:6px 10px;}
.lw-run-count{font-size:10px;}
.lw-run-chain{font-size:9px;max-inline-size:130px;line-height:1.6;}
.lw-run-glow{gap:8px;padding-block-start:8px;}
.lw-run-glow span{font-size:9px;min-inline-size:115px;}
.lw-map.is-chasing{border-radius:0 0 16px 16px;}
.lw-chase-session .lw-map-toolbar{padding:10px;gap:10px;}
.lw-chase-session .lw-map-toolbar>p{font-size:10px;text-align:center;max-inline-size:none;align-self:center;}
.lw-chase-session .lw-movement{gap:5px;}
.lw-chase-session .lw-movement button{min-inline-size:46px;min-block-size:48px;}
}
@media(prefers-reduced-motion:reduce){.lw-score-popup{animation:none;}}
@media(forced-colors:active){
.lw-run-hud{background:Canvas;color:CanvasText;border-color:CanvasText;}
.lw-run-hud :is(span,strong){color:CanvasText;}
.lw-live-chip{border-color:CanvasText;}
.lw-chase-letter{background:ButtonFace;color:ButtonText;border:2px solid ButtonText;box-shadow:none;}
.lw-chase-overlay{background:Canvas;color:CanvasText;}
.lw-chase-overlay strong{color:CanvasText;}
.lw-score-popup{fill:Highlight;stroke:Canvas;}
}
.lw-chase-board{z-index:1;}
.lw-chase-letters{z-index:2;}
.lw-chase-actors{position:absolute;inset:0;inline-size:100%;block-size:100%;z-index:3;pointer-events:none;}
.lw-run-hearts{letter-spacing:0;font-size:12px;}
.lw-run-hud progress::-webkit-progress-bar{background:#38556d;border-radius:6px;}
.lw-run-hud progress::-webkit-progress-value{background:#89cbb5;border-radius:6px;}
.lw-run-hud progress::-moz-progress-bar{background:#89cbb5;border-radius:6px;}
.lw-run-best{font-size:9px;color:#b6cbd5;font-variant-numeric:tabular-nums;}
.lw-chase-letter{display:flex;align-items:baseline;justify-content:center;gap:3px;background:#f4d58f;border:2px solid #f6d88d;border-radius:50%;box-shadow:0 3px 0 #956732,0 0 0 3px #13243880;color:#263d35;min-inline-size:44px;min-block-size:44px;}
.lw-chase-letter strong{font:700 23px Georgia,serif;line-height:1;}
.lw-chase-letter small{font:600 13px Georgia,serif;}
.lw-letter-orbit{position:absolute;inset:-11px -5px auto auto;color:#ffe49d;font-size:15px;text-shadow:0 1px 3px #14283a;}
.lw-chase-letter.is-collected{background:#9fcbb1;border-color:#c2e8c6;box-shadow:none;opacity:.65;}
.lw-chase-letter.is-collected .lw-letter-orbit{display:none;}
.lw-chase-letter.is-collected::after{position:absolute;inset:-7px -3px auto auto;background:#bce9cd;color:#183c31;border-radius:50%;padding:3px;}
.lw-world-alphabet{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin-block:16px 24px;}
.lw-world-letter{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px 4px;min-block-size:78px;background:var(--lw-soft);border:1px solid var(--lw-line);border-radius:12px;color:var(--lw-ink);cursor:pointer;}
.lw-world-letter strong{font:25px Georgia,serif;direction:ltr;}
.lw-world-letter small{font-size:9px;}
.lw-world-letter.is-locked{opacity:.65;border-style:dashed;}
.lw-world-letter.is-found{border:2px solid var(--lw-green);}
.lw-world-letter.is-available{box-shadow:inset 0 3px var(--lw-gold);}
.lw-capture-art{display:grid;place-items:center;margin:16px auto;inline-size:140px;block-size:140px;border-radius:50%;background:var(--lw-soft);border:3px solid var(--lw-green);box-shadow:0 0 0 8px var(--lw-soft);animation:lw-capture-pop 280ms ease-out both;}
.lw-capture-art svg{inline-size:100px;block-size:100px;}
.lw-capture-message{text-align:center;font-weight:650;}
.lw-sound-toggle,.lw-vibration-toggle{min-block-size:44px;padding:5px 10px;background:transparent;border:1px solid #607a87;color:#e2ebdf;border-radius:20px;font-size:10px;cursor:pointer;}
@keyframes lw-capture-pop{from{transform:scale(.75);opacity:.3;}to{transform:scale(1);opacity:1;}}
@media(max-width:540px){.lw-world-alphabet{grid-template-columns:repeat(4,minmax(0,1fr));}.lw-sound-toggle,.lw-vibration-toggle{padding-inline:8px;font-size:9px;}}
@media(prefers-reduced-motion:reduce){.lw-capture-art{animation:none;}}
@media(forced-colors:active){.lw-chase-letter,.lw-chase-letter.is-collected{background:ButtonFace;color:ButtonText;border-color:ButtonText;opacity:1;}}
.lw-page {
--lw-green: #205c49;
--lw-gold: #f2c66d;
--game-radius: 24px;
--game-shadow: 0 12px 32px #183f3520;
}
.lw-page .lw-primary { box-shadow: 0 4px 0 #143f32; }
.lw-page .lw-button { border-radius: 14px; min-block-size: 48px; }
.lw-page .lw-button:active { transform: scale(0.97); box-shadow: none; }
.lw-page .lw-button:focus-visible,.nn-egg:focus-visible { outline: 3px solid #b56b17; outline-offset: 4px; }
.lw-cover { border-radius: 32px; transform: none; box-shadow: var(--game-shadow); border: 4px solid #fff4d8; }
.lw-cover-art { filter: saturate(1.2); inset: 8% -28% -2% -15%; }
.lw-map { border: 5px solid #fff0cc; box-shadow: var(--game-shadow); }
.lw-leaf { fill: #70a66b; stroke: #396849; }
.lw-pine { fill: #40866c; }
.lw-water-line { stroke: #d4f4eb; }
.lw-player svg,.lw-cover-pip svg { filter: drop-shadow(0 5px 2px #183f3530); }
.lw-maze-wall { fill: #41836a; stroke: #a5ca87; stroke-width: 6px; rx: 24px; filter: drop-shadow(0 7px 0 #255442); }
.lw-maze-floor { fill: #ecdfb7; }
.nn-shell { position: relative; padding: clamp(24px,5vw,56px); margin-block: 24px 48px; border: 1px solid var(--lw-line); border-radius: var(--game-radius); background: var(--lw-soft); box-shadow: var(--game-shadow); }
.nn-title { font-size: clamp(28px,4vw,44px); margin-block: 12px; color: var(--lw-ink); }
.nn-preview { position: absolute; inset-inline-end: 5%; inset-block-start: 20%; font-size: clamp(32px,6vw,76px); font-weight: 800; color: var(--lw-green); pointer-events: none; }
.nn-shell .lw-lead { max-inline-size: 32ch; }
.nn-dialog { text-align: center; }
.nn-dialog > .lw-button:first-child { display: block; margin-inline-start: auto; }
.nn-progress { inline-size: 100%; accent-color: var(--lw-green); }
.nn-nest { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; padding: 32px 20px; margin-block: 24px; border-radius: 45%; background: repeating-linear-gradient(12deg,#b18555 0 5px,#a3794d 5px 9px); border-block-end: 10px solid #795635; }
.nn-egg { inline-size: 48px; block-size: 62px; flex-shrink: 0; border: 2px solid #836b44; border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%; background: radial-gradient(ellipse at 32% 25%,#fffef2,#f5dca6); box-shadow: 2px 5px 0 #563d342b; color: transparent; font-size: 0; cursor: pointer; transition: transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1), background-color 150ms ease; }
.nn-egg:hover:not(:disabled) { transform: translateY(-3px) scale(1.05); }
.nn-egg.is-counted { background: #b5ded9; border-color: #205c49; transform: translateY(-5px); }
.nn-nest.is-complete { outline: 3px solid var(--lw-green); outline-offset: 4px; }
.nn-choices { display: flex; gap: 12px; justify-content: center; }
.nn-choices .lw-button { min-inline-size: 64px; font-size: 26px; font-weight: 750; }
.nn-feedback { min-block-size: 3em; color: var(--lw-ink); }
@media (width <= 600px) { .nn-preview { position: static; margin-block: 16px; opacity: 1; font-size: 36px; } }
@media (prefers-reduced-motion: reduce) { .lw-page .lw-button:active,.nn-egg.is-counted { transform: none; } }
@media (forced-colors: active) { .nn-egg { background: ButtonFace; border-color: ButtonText; } .nn-egg.is-counted { outline: 3px solid Highlight; } }
.lw-shell:has(#lw-game[hidden]) { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; }
.lw-hub-heading { grid-column: 1/-1; text-align: center; padding-block: 24px 16px; }
.lw-hub-heading h1 { font: 600 clamp(30px,4vw,48px)/1.15 Georgia,serif; margin-block: 14px; letter-spacing: -.03em; }
.lw-hub-heading > p:last-child { color: var(--lw-muted); line-height: 1.7; }
.lw-shell:has(#lw-game[hidden]) .lw-footer { grid-column: 1/-1; }
.lw-intro { display: flex; flex-direction: column; padding: 0 0 28px; margin: 0; gap: 0; border: 1px solid var(--lw-line); border-radius: 28px; overflow: hidden; background: var(--lw-soft); box-shadow: var(--game-shadow); }
.lw-intro-copy { padding: 28px 32px 0; }
.lw-intro h2 { font: 650 clamp(28px,3vw,40px)/1.15 "Inter Variable",sans-serif; margin-block: 12px 18px; letter-spacing: -.04em; }
.lw-intro .lw-lead { font-size: 16px; margin-block: 0 24px; }
.lw-intro .lw-meta { margin-block: 22px 0; }
.lw-cover { order: -1; aspect-ratio: 1.9; inline-size: 100%; border: 0; border-radius: 0; box-shadow: none; }
.lw-cover-art { inset: -35% -7% -40%; }
.lw-cover-letter { inset: 12% auto auto 20%; font-size: 58px; padding: 4px 20px; }
.lw-cover-letter span { font-size: 42px; }
.lw-cover-pip { inline-size: 100px; inset: auto 16% 7% auto; }
.nn-shell { margin: 0; padding: 28px 32px; overflow: hidden; }
.nn-cover { height: clamp(170px,20vw,240px); margin: -28px -32px 28px; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 90%,#d9bb82 0 26%,transparent 27%),radial-gradient(ellipse at 20% 20%,#e8efbf,transparent 55%),#c6ded1; border-block-end: 1px solid var(--lw-line); }
.nn-cover svg { inline-size: 150px; filter: drop-shadow(0 12px 2px #274c3920); }
.lw-guided-mission { display: flex; align-items: center; gap: 20px; border: 1px solid var(--lw-line); border-radius: 24px; padding: 20px 28px; margin-block: 16px 28px; background: var(--lw-soft); }
#lw-mission-portrait { flex: 0 0 90px; }
#lw-mission-copy { font-size: 17px; line-height: 1.65; margin-block: 8px 12px; max-inline-size: 70ch; }
.lw-guided-mission .lw-eyebrow { margin: 0; }
.lw-optional-settings { border-block-end: 1px solid var(--lw-line); margin-block-end: 14px; }
.lw-optional-settings summary { cursor: pointer; padding-block: 16px; color: var(--lw-muted); font-size: 13px; min-block-size: 48px; }
.lw-optional-settings .lw-mode-choice { max-inline-size: 650px; }
.lw-game-heading h1 { font-size: clamp(26px,3vw,36px); }
.lw-map { border-width: 6px; background: #b6cc9c; }
.lw-leaf { fill: #609161; stroke: #3d6c48; stroke-width: 2; }
.lw-pine { fill: #3c7d65; stroke: #2e5b4b; stroke-width: 2; }
.lw-world-restoration { opacity: .15; filter: grayscale(1); transition: opacity .4s,filter .4s; }
:is(.is-restored-0,.lw-result-art) .lw-restoration-0,.is-restored-1 .lw-restoration-1,.is-restored-2 .lw-restoration-2,.is-restored-3 .lw-restoration-3,.is-restored-4 .lw-restoration-4,.is-restored-5 .lw-restoration-5,.is-restored-6 .lw-restoration-6 { opacity: 1; filter: none; }
.lw-letter-node.is-next { outline: 3px solid #a76823; outline-offset: 5px; box-shadow: 0 0 0 10px #fff4bd60,0 6px 0 #365e4430; }
.lw-learning-state { color: var(--lw-green); font-weight: 700; }
.lw-pip-eye { transform-box: fill-box; transform-origin: center; animation: lw-blink 7s infinite; }
.is-travelling .lw-player svg { animation: lw-walk .36s infinite alternate; }
.lw-fireflies { animation: lw-shimmer 5s infinite alternate; }
.lw-canopy { filter: drop-shadow(3px 5px 1px #2c533b12); }
.nn-sanctuary { display: flex; flex-wrap: wrap; justify-content: center; min-block-size: 64px; border-radius: 18px; background: var(--lw-soft); margin-block: 16px; }
.nn-resident { inline-size: 72px; }
.nn-board { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 14px; }
.nn-board .nn-nest { min-inline-size: 120px; min-block-size: 100px; margin-block: 20px; align-items: center; }
.nn-nest .nn-egg { font: 700 18px "Inter Variable",sans-serif; color: #264a40; }
.nn-nest .nn-egg:disabled { opacity: 1; cursor: default; }
.nn-nest .nn-egg:nth-child(3n) { transform: rotate(8deg); }
.nn-nest .nn-egg:nth-child(3n + 1) { transform: rotate(-7deg); }
.nn-nest .nn-egg.is-counted { transform: translateY(-5px); }
.nn-empty { color: #fff8e8; padding: 8px; background: #674c32; border-radius: 12px; }
.nn-plus { color: var(--lw-ink); font-size: 32px; }
.nn-instruction,.nn-count { color: var(--lw-muted); line-height: 1.7; }
.nn-choices { flex-wrap: wrap; }
.nn-choices .lw-button { font-size: 18px; }
.nn-learning-summary { text-align: start; line-height: 1.8; padding: 16px; background: var(--lw-soft); border-radius: 18px; }
@keyframes lw-blink { 0%,43%,47%,100% { transform: scaleY(1); } 45% { transform: scaleY(.1); } }
@keyframes lw-walk { from { transform: rotate(-4deg) translateY(-2px); } to { transform: rotate(4deg) translateY(0); } }
@keyframes lw-shimmer { from { opacity: .3; } to { opacity: .95; } }
@media (width <= 700px) {
.lw-shell:has(#lw-game[hidden]) { grid-template-columns: 1fr; gap: 24px; }
.lw-hub-heading { padding-block: 12px 0; }
.lw-intro-copy { padding-inline: 24px; }
.lw-guided-mission { padding: 18px; gap: 12px; align-items: start; }
#lw-mission-portrait { flex-basis: 60px; }
#lw-mission-copy { font-size: 14px; }
.nn-cover { height: 180px; }
.nn-board { gap: 4px; }
.nn-board .nn-nest { padding: 20px 12px; min-inline-size: 90px; gap: 9px; }
.nn-egg { inline-size: 44px; block-size: 55px; }
}
@media (prefers-reduced-motion: reduce) {
.lw-pip-eye,.is-travelling .lw-player svg,.lw-fireflies { animation: none; }
.lw-world-restoration { transition: none; }
.nn-nest .nn-egg.is-counted { transform: none; }
}
@media (forced-colors: active) {
.lw-letter-node.is-next { outline-color: Highlight; }
.nn-nest .nn-egg { color: ButtonText; }
.nn-empty { background: Canvas; color: CanvasText; border: 1px solid CanvasText; }
}
.lw-intro { align-items: stretch; min-block-size: auto; }
.lw-intro-copy { max-inline-size: none; }
.lw-cover,.nn-cover { block-size: clamp(180px,24vw,300px); }
.lw-cover { aspect-ratio: auto; }
.lw-game-heading { padding-block: 12px 18px; }
.lw-guided-mission { margin-block: 12px 14px; padding: 16px 24px; }
@media (width >= 701px) {
.lw-guided-mission > div:last-child { display: grid; grid-template-columns: 1fr auto; column-gap: 24px; align-items: center; inline-size: 100%; }
.lw-guided-mission .lw-eyebrow { grid-column: 1; }
#lw-mission-copy { grid-column: 1; margin-block-end: 0; }
#lw-mission-action { grid-column: 2; grid-row: 1 / 3; }
}
@media (width <= 700px) {
.lw-guided-mission { padding: 14px; }
.lw-guided-mission .lw-eyebrow { display: none; }
#lw-mission-copy { margin-block-start: 0; }
#lw-mission-portrait { flex-basis: 48px; }
}
.lw-game-picker { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-block: 20px 0; }
.lw-game-picker a { display: grid; place-items: center; border: 1px solid var(--lw-line); border-radius: 30px; padding: 10px 20px; min-block-size: 44px; color: var(--lw-green); background: var(--lw-soft); font-size: 13px; font-weight: 650; text-decoration: none; }
#lw-intro,#number-nest { scroll-margin-block-start: 20px; }
.lw-player[data-direction="left"] svg { transform: scaleX(-1); }
.lw-player[data-direction="right"] svg { transform: scaleX(1); }
.lw-player[data-mood="celebrating"] svg { animation: lw-celebrate .65s ease-in-out 2; }
.lw-player[data-direction="left"][data-mood="celebrating"] svg { animation: lw-celebrate-left .65s ease-in-out 2; }
.lw-player[data-mood="thinking"] svg { transform: rotate(-8deg); }
.nn-egg:hover:not(:disabled) { animation: nn-wobble .35s ease-in-out; }
.nn-board.is-complete .nn-nest { outline: 3px solid var(--lw-green); outline-offset: 4px; animation: nn-hatch-glow 1.4s ease-out; }
@keyframes lw-celebrate { 0%,100% { transform: translateY(0) scale(1) rotate(0); } 40% { transform: translateY(-16px) scale(1.12) rotate(8deg); } 70% { transform: translateY(-18px) scale(1.12) rotate(-8deg); } }
@keyframes lw-celebrate-left { 0%,100% { transform: scaleX(-1) translateY(0) rotate(0); } 40% { transform: scaleX(-1) translateY(-16px) scale(1.12) rotate(-8deg); } 70% { transform: scaleX(-1) translateY(-18px) scale(1.12) rotate(8deg); } }
@keyframes nn-wobble { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }
@keyframes nn-hatch-glow { 0% { box-shadow: 0 0 0 rgb(32 92 73 / 0%); } 50% { box-shadow: 0 0 24px rgb(242 198 109 / 70%); } 100% { box-shadow: 0 0 0 rgb(32 92 73 / 0%); } }
@media (prefers-reduced-motion: reduce) {
.lw-player[data-mood="celebrating"] svg,
.lw-player[data-direction="left"][data-mood="celebrating"] svg,
.nn-egg:hover:not(:disabled),
.nn-board.is-complete .nn-nest { animation: none; }
.lw-player[data-mood="thinking"] svg { transform: none; }
}
.nn-dialog[data-mission^="remember"] .nn-nest { justify-content: space-around; gap: 22px; }
.nn-dialog[data-mission^="remember"] .nn-egg:nth-child(2n) { margin-block-start: 24px; }
.lw-chase-session .lw-guided-mission,.lw-chase-session .lw-optional-settings { display: none; }
.game-audience { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 20px auto 12px; padding: 0; border: 0; }
.game-audience legend { font-size: 12px; color: var(--lw-muted); margin-block-end: 10px; }
.game-audience label { display: flex; align-items: center; gap: 10px; padding: 12px 24px; border: 1px solid var(--lw-line); border-radius: 24px; cursor: pointer; }
.game-audience label:has(input:checked) { background: var(--lw-green); color: var(--lw-paper); }
.game-voice-toggle { display: inline-flex; align-items: center; gap: 10px; min-block-size: 44px; cursor: pointer; color: var(--lw-ink); font-size: 13px; }
.game-voice-toggle input,.game-audience input { inline-size: 18px; block-size: 18px; accent-color: var(--lw-green); }
#game-audience-help { font-size: 13px; }
.wt-cover,.wi-cover { block-size: clamp(180px,24vw,300px); margin: -28px -32px 28px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px; color: #f9edce; background: #263e50; }
.wt-cover > span:first-child { font: 80px Georgia,serif; }
.wt-cover > span:last-child { font-size: 11px; letter-spacing: .12em; }
.wi-cover { background: #122b3b; flex-direction: row; }
.wi-cover > span { color: #f3cd85; font-size: 92px; }
.wi-cover strong { text-align: start; font-size: 32px; letter-spacing: .05em; }
body[data-audience="adults"] #word-trail { outline: 3px solid var(--lw-green); outline-offset: 3px; }
.learning-dialog { inline-size: min(760px,calc(100% - 24px)); max-block-size: min(100svh - 16px, 860px); padding: clamp(12px, 2.5vw, 20px); overflow-y: auto; text-align: center; }
.learning-dialog > .lw-button:first-child { display: block; margin-inline-start: auto; }
.learning-dialog h2 { margin-block: 10px 8px; }
.wt-study-card { border-radius: 18px; padding: 14px 18px; background: var(--lw-soft); margin-block: 10px; }
.wt-dialog h2[lang="en"] { font: 600 clamp(24px, 5vw, 42px) "Inter Variable",sans-serif; }
.wt-definition { font-size: 18px !important; margin-block: 6px; }
.wt-collocation { border-block-start: 1px solid var(--lw-line); padding-block-start: 10px; margin-block-start: 10px; font-weight: 750; color: var(--lw-green); }
.wt-example { font-style: italic; margin-block: 6px; }
.wt-question { font-size: 18px !important; line-height: 1.5 !important; margin-block: 12px; padding: 12px; background: var(--lw-soft); border-radius: 14px; }
.wt-options { display: grid; gap: 8px; margin-block: 10px; }
.wt-options .lw-button { font-size: 16px; padding: 10px 14px; }
.wt-feedback,.wi-feedback { min-block-size: 2em; line-height: 1.5; color: var(--lw-ink); margin-block: 6px; }
.game-voice-status { min-block-size: 1.4em; font-size: 12px; color: var(--lw-muted); margin-block: 4px; }
.wi-dialog { inline-size: min(1000px,calc(100% - 24px)); max-block-size: min(100svh - 16px, 860px); }
.wi-settings { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; align-items: center; }
.wi-settings > label { display: flex; align-items: center; gap: 8px; min-block-size: 44px; font-size: 13px; }
.wi-canvas { inline-size: 100%; max-block-size: clamp(190px, 38vh, 340px); aspect-ratio: 3/2; display: block; border: 2px solid var(--lw-line); border-radius: 18px; touch-action: manipulation; }
.wi-question { display: flex; align-items: center; justify-content: center; gap: 12px; margin-block: 10px; padding: 8px 12px; background: var(--lw-soft); border-radius: 14px; }
.wi-definition { font-size: 17px !important; margin: 0; }
.wi-picture { inline-size: 50px; flex-shrink: 0; }
.wi-targets { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-block: 10px; }
.wi-targets .lw-button { padding-inline: 8px; overflow-wrap: anywhere; }
.wi-controls { display: flex; gap: 10px; justify-content: center; margin-block: 6px; }
.wi-hud { font-variant-numeric: tabular-nums; color: var(--lw-green); }
.lw-hands-on .lw-trace-scene { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 6px 12px; background: var(--lw-soft); border-radius: 16px; max-block-size: clamp(38px, 8vh, 60px); }
.lw-trace-scene svg { inline-size: clamp(32px, 7vw, 48px); block-size: clamp(32px, 7vw, 48px); }
.lw-trace-word { font-size: clamp(18px, 4.5vw, 24px) !important; font-weight: 750; margin: 0; }
.lw-hands-on .lw-audio-actions { justify-content: center; margin-block: 6px; gap: 6px; }
.lw-hands-on .lw-trace-field { max-block-size: 250px; }
.lw-hands-on .lw-dialog-actions { justify-content: center; margin-block-start: 6px; padding-block-start: 6px; gap: 6px; }
.lw-hands-on .lw-dialog-actions > .lw-button { padding: 8px 10px; min-block-size: 44px; font-size: 11px; }
.nn-dialog { overflow-y: auto; }
.nn-sanctuary:empty { display: none; }
.nn-dialog .nn-status { font-size: 11px; }
.nn-dialog .nn-board { gap: 6px; }
.nn-dialog .nn-instruction { margin-block: 10px; }
.nn-dialog .nn-nest { padding: 16px 12px; margin-block: 10px; }
@media (width <= 700px) {
.learning-dialog { padding: 16px; }
.wt-cover,.wi-cover { block-size: 180px; }
.wi-definition { font-size: 16px !important; }
.wi-question { margin-block: 8px; }
.wi-dialog h2 { font-size: 24px; }
.wi-dialog .wi-hud { margin-block: 4px; }
.nn-group { flex: 1 1 42%; min-inline-size: 0; }
.nn-dialog .nn-board { flex-wrap: nowrap; align-items: center; }
.nn-board .nn-group .nn-nest { flex-wrap: wrap; min-inline-size: 0; gap: 4px; }
.nn-board .nn-group .nn-egg { inline-size: 44px; block-size: 50px; }
.nn-group > .lw-button { inline-size: 100%; }
.nn-dialog .nn-choices { gap: 8px; }
.nn-dialog .nn-choices .lw-button { font-size: 15px; }
.lw-hands-on .lw-trace-scene { padding: 8px; }
.lw-trace-word { font-size: 30px !important; }
.lw-hands-on .lw-audio-actions .lw-button { padding: 8px; min-block-size: 44px; }
}
@media (forced-colors: active) { .wt-cover,.wi-cover { background: Canvas; color: CanvasText; border: 1px solid CanvasText; } }
.wi-cover canvas { inline-size: 100%; block-size: 100%; object-fit: contain; }
.lw-hub-heading { padding-block: 14px 0; }
.lw-hub-heading h1 { margin-block: 12px; }
.game-audience { margin-block: 14px 6px; }
.lw-game-picker { margin-block: 14px 0; gap: 8px; }
.lw-game-picker a { padding: 10px 14px; }
@media (width <= 700px) {
.lw-hub-heading h1 { font-size: 28px; }
.lw-hub-heading > p:not(.lw-eyebrow) { font-size: 13px; margin-block: 8px; }
.lw-game-picker a { font-size: 12px; padding-inline: 12px; }
.game-audience label { padding: 10px 18px; }
.lw-hub-heading .game-voice-toggle { min-block-size: 36px; }
}
.nn-group-label { margin-block: 6px; font-size: 12px; font-weight: 700; color: var(--lw-green); }
.nn-workspace { min-inline-size: 0; }
.lw-hands-on .lw-audio-status { min-block-size: 18px; margin-block: 4px; font-size: 12px; }
.lw-hands-on .lw-stroke-label { margin-block: 6px; }
.lw-hands-on .lw-dialog-actions { gap: 8px; margin-block-start: 8px; padding-block-start: 8px; }
.lw-hands-on .lw-inline-status:empty { min-block-size: 0; margin: 0; }
@media (width <= 700px) {
.lw-hands-on .lw-trace-field { inline-size: min(100%,280px); margin-inline: auto; }
.lw-hands-on .lw-dialog-actions > .lw-button { flex: 1 1 110px; }
}
.lw-page { --lw-trace-guide-color: #64755d; }
html[data-theme="dark"] .lw-page { --lw-trace-guide-color: #adbfaa; }
.lw-trace-guide { stroke: var(--lw-trace-guide-color); opacity: 1; stroke-width: 10; stroke-dasharray: 3 5; }
.lw-trace-active { stroke-dasharray: 4 7; animation: trace-route 1.8s linear 2; }
@keyframes trace-route { to { stroke-dashoffset: -44; } }
.lw-pattern-picture { inline-size: 130px; margin: auto; }
.lw-pattern-title { font-size: 22px !important; }
.lw-pattern-note { font-size: 12px !important; max-inline-size: 36ch; }
.lw-hub-heading { padding-block: 8px 0; }
.lw-hub-heading .lw-eyebrow { margin-block: 8px; }
.lw-game-picker { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; max-inline-size: 1000px; margin-inline: auto; counter-reset: game; }
.lw-game-picker a { min-block-size: 62px; padding: 10px 18px; font-size: 16px; }
.lw-game-picker a::before { counter-increment: game; content: counter(game); display: grid; place-items: center; inline-size: 24px; block-size: 24px; border-radius: 50%; background: var(--lw-green); color: var(--lw-paper); font-size: 12px; margin-block-end: 5px; }
.game-hub-settings { max-inline-size: 720px; margin: 12px auto 0; }
.game-hub-settings summary { cursor: pointer; padding: 12px; min-block-size: 44px; color: var(--lw-muted); font-size: 13px; }
.lw-cover,.nn-cover,.wt-cover,.wi-cover { block-size: clamp(130px,16vw,220px); }
.lw-intro-copy,.nn-shell { padding-block-start: 20px; }
.nn-cover,.wt-cover,.wi-cover { margin-block-start: -20px; }
.wt-cover { position: relative; gap: 0; overflow: hidden; }
.wt-cover svg { inline-size: 100%; block-size: 100%; }
.wt-cover-caption { position: absolute; inset: auto 12px 7px; text-align: center; font-size: 10px; letter-spacing: .05em; color: #f9edce; }
.wt-typed-form { display: grid; gap: 12px; }
.wt-typed-form label { color: var(--lw-ink); font-size: 14px; }
.wt-recall-input { display: block; inline-size: 100%; min-block-size: 48px; margin-block: 10px; padding: 10px; border: 2px solid var(--lw-green); border-radius: 12px; color: var(--lw-ink); background: var(--lw-paper); font: 20px "Inter Variable",sans-serif; }
.nn-dialog { inline-size: min(820px,calc(100% - 24px)); max-block-size: min(100svh - 16px, 860px); }
.nn-world { position: relative; overflow: hidden; block-size: clamp(65px, 11vh, 90px); border: 2px solid var(--lw-line); border-radius: 18px; margin-block: 6px; }
.nn-landscape { position: absolute; inset: 0; }
.nn-landscape svg { inline-size: 100%; block-size: 100%; object-fit: cover; }
.nn-world-trail { position: absolute; z-index: 1; inset: 0; display: flex; align-items: end; justify-content: space-around; list-style: none; margin: 0; padding: 10px; gap: 6px; }
.nn-home { display: flex; flex-direction: column; align-items: center; flex: 1; min-inline-size: 0; }
.nn-home:nth-child(2n) { padding-block-end: 20px; }
.nn-home .nn-resident { inline-size: clamp(34px, 7vw, 55px); }
.nn-home-outline { font-size: 32px; color: #315d48; line-height: 1.4; }
.nn-home-name { font: 650 10px "Inter Variable",sans-serif; color: #204537; background: #fff5d9; padding: 2px 6px; border-radius: 8px; text-align: center; }
.nn-world-status { color: var(--lw-green); font-weight: 700; margin-block: 4px; font-size: 12px; }
.nn-decoration { position: absolute; pointer-events: none; font-size: 25px; }
.nn-decoration-flowers { inset: auto auto 3px 10px; color: #993e69; }
.nn-decoration-bridge { inset: 55% auto auto 52%; color: #795132; }
.nn-decoration-lanterns { inset: 3px 15px auto auto; color: #815621; }
.nn-world.is-celebrating .nn-resident,.nn-arrival { animation: bird-arrives .6s ease-out both; }
.nn-arrival { inline-size: 60px; margin: 0 auto; }
@keyframes bird-arrives { from { opacity: 0; transform: translateY(-16px) scale(.85); } to { opacity: 1; transform: none; } }
@keyframes nn-egg-pop { 0% { transform: scale(1); } 50% { transform: scale(1.18) rotate(5deg); } 100% { transform: scale(1); } }
@keyframes nn-critter-bounce { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-5px) scale(1.04); } 70% { transform: translateY(-1px) scale(.98); } }
.nn-resident svg { animation: nn-critter-bounce 2.4s ease-in-out infinite; }
.nn-egg:active, .nn-egg.is-counted { animation: nn-egg-pop 250ms ease-out; }
.nn-crafts { margin-block: 8px; border-block-start: 1px solid var(--lw-line); }
.nn-crafts summary { min-block-size: 38px; padding: 6px 4px; cursor: pointer; font-size: 13px; color: var(--lw-green); }
.nn-craft-buttons,.nn-aids { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.nn-aids { margin-block: 8px; }
.nn-aids .lw-button { font-size: 12px; }
.nn-counting-frame { display: grid !important; grid-template-columns: repeat(5,44px); justify-content: center; gap: 5px !important; border-radius: 14px !important; background: var(--lw-soft) !important; border: 2px solid var(--lw-line) !important; padding: 12px !important; }
.nn-counting-frame .nn-empty { grid-column: 1/-1; }
.nn-frame-space { inline-size: 44px; block-size: 50px; border: 1px dashed var(--lw-muted); border-radius: 50%; opacity: .7; }
.nn-counting-frame .nn-egg { inline-size: 44px; block-size: 50px; min-block-size: 50px; padding: 0; margin-block-start: 0 !important; transform: none !important; }
.nn-board:has(.nn-join) { flex-wrap: wrap !important; }
.nn-join { flex-basis: 100%; margin-inline: 18%; }
.nn-dialog .nn-instruction { font-size: 13px; }
.nn-dialog .nn-feedback { min-block-size: 2.5em; margin-block: 10px; }
.nn-dialog .nn-progress { block-size: 8px; }
@media (width <= 700px) {
.lw-game-picker { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.lw-game-picker a { font-size: 14px; min-block-size: 58px; }
.lw-hub-heading h1 { font-size: 26px; }
.lw-cover,.nn-cover,.wt-cover,.wi-cover { block-size: 140px; }
.nn-world { block-size: 78px; margin-block: 4px; }
.nn-world-trail { padding-inline: 5px; gap: 2px; }
.nn-home-name { font-size: 8px; padding: 2px 4px; }
.nn-home-outline { font-size: 24px; }
.nn-home:nth-child(2n) { padding-block-end: 15px; }
.nn-dialog h2 { font-size: 20px; margin-block: 6px; }
.nn-dialog .nn-board { flex-wrap: wrap; }
.nn-counting-frame { padding: 8px !important; gap: 3px !important; }
.nn-aids .lw-button,.nn-craft-buttons .lw-button { min-block-size: 44px; }
}
@media (prefers-reduced-motion: reduce) { .lw-trace-active,.nn-world.is-celebrating .nn-resident,.nn-arrival { animation: none; } }
@media (forced-colors: active) { .lw-trace-guide { stroke: CanvasText; opacity: 1; } .nn-world { border-color: CanvasText; } .nn-home-name { color: CanvasText; background: Canvas; } }
.nn-egg { background-color: #f7e8bb; }
.nn-nest { background-color: #c19b64; }
.nn-board:has(.nn-counting-frame) { flex-wrap: wrap !important; }
.nn-group:has(.nn-counting-frame) { flex: 1 1 100%; }
.nn-counting-frame,.nn-group .nn-counting-frame { grid-template-columns: repeat(5,44px); }
.nn-counting-frame .nn-egg,.nn-group .nn-counting-frame .nn-egg { inline-size: 44px; block-size: 50px; min-block-size: 50px; padding: 0; }
.nn-frame-space,.nn-group .nn-frame-space { inline-size: 44px; block-size: 50px; }
.wi-controls { flex-wrap: wrap; }
.wi-controls[hidden] { display: none; }
.lw-journal-skills { display: block; font-size: 10px; line-height: 1.7; color: var(--lw-muted); }
.lw-page .nn-egg { background-image: radial-gradient(ellipse at 32% 25%,#fffef2,#f5dca6) !important; }
.nn-dialog { padding: 14px 18px; }
@media (width <= 700px) { .nn-dialog { padding: 10px 12px; } }
@media (forced-colors: active) { .lw-page .nn-egg { background-image: none !important; background-color: ButtonFace; } }
.nn-decoration { inline-size: 90px; block-size: 52px; }
.nn-decoration svg { inline-size: 100%; block-size: 100%; }
.nn-decoration-bridge { inset-block-start: 50%; }
.nn-decoration-lanterns { inline-size: 110px; }
@media (width <= 700px) { .nn-decoration { inline-size: 65px; block-size: 38px; } }
.wt-cover-caption { inset-block-end: 0; inset-inline: 0; padding: 5px 8px; background: #263e50; line-height: 1.4; }
.game-choice-toggle { display: inline-flex; align-items: center; gap: 10px; min-block-size: 44px; cursor: pointer; color: var(--lw-ink); font-size: 13px; }
.game-choice-toggle input { inline-size: 18px; block-size: 18px; accent-color: var(--lw-green); }
.game-level-status { color: var(--lw-green); font-size: 13px; font-weight: 750; margin-block: 6px; }
.game-retry-panel { padding: 16px; border: 2px solid var(--lw-green); border-radius: 16px; background: var(--lw-soft); }
.game-summary-fallback,.game-pack-choice,.nn-bird-choice { display: grid; gap: 8px; margin-block: 12px; font-size: 14px; color: var(--lw-ink); }
.game-summary-fallback textarea,.game-pack-choice select,.nn-bird-choice input,.nn-bird-choice select { inline-size: 100%; min-block-size: 44px; padding: 9px; border: 1px solid var(--lw-green); border-radius: 8px; background: var(--lw-paper); color: var(--lw-ink); font: inherit; }
.nn-board .nn-scattered { display: grid; grid-template-columns: repeat(var(--nn-columns,5),44px); justify-content: center; gap: 3px; inline-size: min(100%,260px); padding: 8px; }
.nn-board .nn-scattered .nn-egg { inline-size: 44px; block-size: 50px; min-block-size: 50px; padding: 0; margin: 0; transform: none; }
.lw-route-preview { margin-block: 8px; text-align: start; }
.lw-route-preview summary { min-block-size: 44px; padding: 10px; cursor: pointer; }
.lw-route-preview svg { display: block; inline-size: 100%; max-block-size: 180px; }
.lw-chase-medal { color: var(--lw-green); font-weight: 750; }
.wi-tutorial-canvas { inline-size: min(100%,360px); max-block-size: 210px; object-fit: contain; border-radius: 12px; }
.wi-tutorial-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.learning-dialog :is(p,label,button,select,h2,h3),.nn-dialog :is(p,label,button,select,h2,h3) { overflow-wrap: anywhere; }
.wi-canvas[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
.nn-resident svg,.nn-egg:active,.nn-egg.is-counted { animation: none; }
}
.nq-practice,.lw-quiet-trail { margin-block: 8px; font-size: 13px; }
.nq-practice summary,.lw-quiet-trail summary { min-block-size: 44px; padding: 10px 0; cursor: pointer; color: var(--lw-muted); }
.lw-entry-actions { display: flex; flex-direction: column; align-items: start; }
.nq-cover svg { inline-size: 100%; block-size: 100%; object-fit: cover; }
.nq-dialog { --nq-ink: #eef4e5; --nq-mute: #c3d8cc; box-sizing: border-box; inline-size: min(1120px,calc(100% - 24px)); max-inline-size: none; max-block-size: calc(100dvh - 20px); border: 1px solid #739b8b; border-radius: 22px; padding: 0; color: var(--nq-ink); background: #143a3c; overflow-y: auto; box-shadow: 0 28px 100px #091f2ac0; }
.nq-dialog::backdrop { background: #0c242acc; }
.nq-dialog button,.nq-dialog select,.nq-dialog input { font: inherit; }
.nq-dialog .lw-button { background: #224e4c !important; color: #edf5df; border: 1px solid #86ab92; min-block-size: 44px; border-radius: 12px; font-size: 14px; padding: 10px 18px; box-shadow: 0 3px 0 #092c2b; }
.nq-dialog .lw-primary { background: #e5c480 !important; color: #193c36; border-color: #efdaa9; font-weight: 750; }
.nq-dialog button:focus-visible,.nq-dialog summary:focus-visible { outline: 3px solid #ffe5a4; outline-offset: 3px; }
.nq-header { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-block-end: 1px solid #527b70; flex-wrap: wrap; }
.nq-brand { margin-inline-end: auto; }
.nq-brand h2 { font: 750 22px/1.1 "Inter Variable","Noto Sans Arabic Variable",sans-serif; letter-spacing: -.04em; margin: 4px 0 0; color: #f1ebcf; }
.nq-world { color: #b5cfc0; font-size: 9px; letter-spacing: .15em; font-weight: 700; }
.nq-stats { color: #eddaaa; font: 650 14px/1.6 "Inter Variable","Noto Sans Arabic Variable",sans-serif; margin: 0; font-variant-numeric: tabular-nums; }
.nq-icon { display: grid; place-items: center; inline-size: 44px; block-size: 44px; border: 1px solid #71998a; border-radius: 12px; color: #e5edda; background: #234c49 !important; font-size: 23px !important; cursor: pointer; }
.nq-settings { position: relative; }
.nq-settings > summary { cursor: pointer; display: grid; place-items: center; min-block-size: 44px; border: 1px solid #71998a; border-radius: 12px; padding: 8px 12px; font-size: 12px; }
.nq-settings-panel { position: absolute; z-index: 12; inset: 50px 0 auto auto; inline-size: 250px; padding: 14px; display: grid; gap: 6px; border-radius: 14px; background: #163d3c; border: 1px solid #8eb3a1; box-shadow: 0 12px 40px #071c2b90; }
.nq-settings-panel label { display: flex; align-items: center; min-block-size: 44px; gap: 9px; font-size: 13px; }
.nq-settings-panel input { accent-color: #d9c58f; inline-size: 19px; block-size: 19px; }
.nq-mission-strip { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 18px; background: #1c4643; color: #cce0cb; font-size: 12px; }
.nq-mission-strip progress { inline-size: 120px; block-size: 6px; accent-color: #e2c27c; }
.nq-stage { position: relative; isolation: isolate; background: #285b53; min-block-size: 235px; }
.nq-canvas { display: block; inline-size: 100%; aspect-ratio: 2/1; max-block-size: calc(100dvh - 235px); min-block-size: 235px; object-fit: fill; touch-action: none; }
.nq-overlay { position: absolute; z-index: 5; inset: 0; display: grid; place-items: center center; padding: 16px; background: #123b3c70; overflow-y: auto; }
.nq-overlay[hidden] { display: none; }
.nq-panel { box-sizing: border-box; inline-size: min(100%,490px); padding: 22px; border: 1px solid #d7c58e; border-radius: 20px; color: #193f35; background: #f3eedb; box-shadow: 0 10px 40px #0a242d70; text-align: center; }
.nq-panel h3 { font: 750 clamp(20px,3vw,29px)/1.25 "Inter Variable","Noto Sans Arabic Variable",sans-serif; margin: 6px 0 10px; color: #1b4236; }
.nq-eyebrow { font-size: 10px; color: #45674c; letter-spacing: .1em; font-weight: 750; margin: 0; }
.nq-panel-copy { font-size: 14px; line-height: 1.65; margin: 8px 0; }
.nq-story-goals { text-align: start; font-size: 12px; padding-inline-start: 24px; margin-block: 12px; color: #365c48; }
.nq-panel .lw-button { margin: 5px; }
.nq-panel .lw-primary { background: #205849 !important; color: #f4efd9; border-color: #205849; }
.nq-controls { display: flex; gap: 8px; padding: 6px 18px 10px; align-items: center; flex-wrap: wrap; }
.nq-controls button { min-block-size: 48px; border: 1px solid #7fa28b; border-radius: 12px; padding: 9px 17px; color: #ebf0d8; background: #28574e !important; cursor: pointer; font-size: 14px; font-weight: 650; box-shadow: 0 3px 0 #0b2a2b; touch-action: none; }
.nq-controls .nq-move { font-size: 22px; min-inline-size: 54px; }
.nq-controls .nq-jump { background: #d9bd81 !important; color: #1e4034; }
.nq-controls .nq-interact { margin-inline-start: auto; }
.nq-controls .nq-guide { font-size: 12px; background: transparent !important; border-style: dashed; }
.nq-controls button:disabled { opacity: .6; cursor: default; }
.nq-controls-hint { text-align: center; font-size: 10px; color: #c6d3be; margin: 0; padding: 0 14px 10px; }
.nq-puzzle-visual { display: flex; gap: 7px; justify-content: center; flex-wrap: wrap; padding: 12px; border-radius: 12px; background: #dce4c9; margin: 10px 0; }
.nq-plank-slot { display: grid; place-items: center; inline-size: 28px; block-size: 40px; border: 2px dashed #6a8055; border-radius: 5px; color: #567044; }
.nq-plank-slot.is-filled { background: #a17a48; border: 2px solid #775a32; color: transparent; }
.nq-seed-group { display: flex; gap: 4px; padding: 8px; border: 2px solid #6f875c; border-radius: 10px; align-items: center; flex-wrap: wrap; max-inline-size: 48%; }
.nq-seed { color: #856624; font-size: 17px; }
.nq-puzzle-answers { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; }
.nq-load-count { display: inline-grid; place-items: center; min-inline-size: 44px; font-size: 27px; font-weight: 750; }
.nq-puzzle-feedback { font-size: 13px; color: #385039; min-block-size: 20px; margin: 6px 0; }
.nq-panel > .lw-button:not(.lw-primary) { font-size: 12px; min-block-size: 40px; padding: 8px 12px; }
.nq-level-map { display: grid; gap: 6px; }
.nq-reward { color: #49672d; font-size: 18px; font-weight: 700; }
.lw-chase-session { --arena-base: #0c2c30; --arena-panel: #12393c; --arena-line: #4a8280; --arena-bright: #b9e7d7; background: var(--arena-base); color: #dff6e9; }
.lw-chase-session > .lw-topbar,.lw-chase-session :is(.lw-game-heading,.lw-guided-mission,.lw-optional-settings,.lw-chase-toolbar,.lw-footer) { display: none !important; }
.lw-chase-session .lw-shell { padding: 14px; max-inline-size: 1050px; }
.lw-chase-session #lw-game { padding: 0; }
.lw-chase-session .lw-map-column { inline-size: min(100%,960px); }
.lw-chase-session .lw-game-layout { gap: 0; }
.lw-chase-session .lw-run-hud { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 18px; padding: 13px 16px 10px; border: 1px solid var(--arena-line); border-block-end: 0; border-radius: 20px 20px 0 0; background: var(--arena-panel); color: #e0f6e9; }
.lw-chase-session .lw-run-heading { grid-area: 1/1; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.lw-arena-level { font-size: 10px; color: #a5d5c8; letter-spacing: .08em; }
.lw-chase-session .lw-run-title { font-size: 19px; color: #e5f7ec; }
.lw-chase-session .lw-run-mode,.lw-chase-session .lw-live-chip,.lw-chase-session .lw-run-best,.lw-chase-session .lw-run-label { display: none; }
.lw-chase-session .lw-run-score { grid-area: 2/2; flex-direction: row; align-items: center; gap: 6px; }
.lw-chase-session .lw-run-score::before { content: "◆"; color: #acd9c9; }
.lw-chase-session .lw-run-score-value { font-size: 24px; color: #d8f5e5; }
.lw-chase-session .lw-run-goals { grid-area: 2/1; gap: 8px 16px; }
.lw-chase-session .lw-run-count { color: #cae9da; font-size: 12px; }
.lw-chase-session .lw-run-goals progress { flex-basis: auto; inline-size: 110px; background: #1f5050; accent-color: #a7d8c2; block-size: 5px; }
.lw-chase-session .lw-run-hearts { grid-area: 3/1; color: #c8eddb; font-size: 13px; }
.lw-chase-session .lw-run-chain { grid-area: 3/2; color: #b0dcc9; font-size: 10px; max-inline-size: 250px; }
.lw-chase-session .lw-run-glow { display: none; }
.lw-chase-session .lw-run-hud.is-powered .lw-run-glow { display: flex; grid-area: 4/1/5/3; border-color: #589188; padding-block-start: 5px; }
.lw-chase-session .lw-run-glow span { color: #cffce1; }
.lw-chase-session .lw-arena-actions { grid-area: 1/2; display: flex !important; gap: 6px; align-items: center; inline-size: auto !important; }
.lw-chase-session #lw-chase-exit { display: none; }
.lw-chase-session #lw-chase-pause { font-size: 12px; padding: 8px 12px; min-block-size: 44px; border: 1px solid #6ca89a; border-radius: 12px; background: #20504c !important; color: #dff6e9; }
.lw-arena-exit { border: 1px solid #6ca89a; border-radius: 12px; background: transparent !important; color: #dff6e9; min-block-size: 44px; padding: 8px 12px; cursor: pointer; font-size: 12px; }
.lw-arena-settings { position: relative; }
.lw-arena-settings summary { display: grid; place-items: center; cursor: pointer; min-block-size: 44px; border: 1px solid #6ca89a; border-radius: 12px; padding: 8px 12px; color: #dff6e9; font-size: 12px; }
.lw-arena-settings-body { position: absolute; z-index: 15; inset: 50px 0 auto auto; inline-size: 230px; background: #143e3e; border: 1px solid #74a997; padding: 12px; border-radius: 14px; box-shadow: 0 14px 40px #021d2b; display: grid; gap: 6px; }
.lw-arena-settings-body button { color: #d7efdf; border-color: #7aa99a; background: #234c49 !important; font-size: 12px; min-block-size: 44px; border-radius: 10px; }
.lw-arena-difficulty { display: flex; gap: 8px; align-items: center; min-block-size: 44px; font-size: 12px; color: #d8f0dd; }
.lw-chase-session .lw-map.is-chasing { border-color: var(--arena-line); background: #0b282d; max-block-size: calc(100dvh - 240px); min-block-size: 310px; aspect-ratio: 15/11; border-radius: 0 0 18px 18px; }
.lw-chase-session .lw-maze-floor { fill: #0b282d; }
.lw-chase-session .lw-maze-wall { fill: #1f5150; stroke: #6fafa2; stroke-width: 3; }
.lw-chase-session .lw-inkberry { fill: #b1dfc6; stroke: #b1dfc6; }
.lw-chase-session .lw-glowseed { fill: #dcffea; stroke: #91d5be; filter: drop-shadow(0 0 10px #a7ecd360); }
.lw-chase-session .lw-muddle { color: #6ca799; }
.lw-chase-session .lw-muddle.is-frightened { color: #d4f7e3; }
.lw-chase-session .lw-chase-letter { color: #d9f8e8; background: #245e57 !important; border-color: #b3e9ce; box-shadow: 0 3px 0 #071e25,0 0 0 3px #70b49e30; }
.lw-chase-session .lw-chase-letter.is-collected { color: #acd0bd; background: #1d4844 !important; border-color: #70a88b; opacity: .75; }
.lw-chase-session .lw-letter-orbit { color: #c1f2d8; text-shadow: none; }
.lw-chase-session .lw-chase-pip { filter: saturate(0) sepia(.5) hue-rotate(85deg) brightness(1.2); }
.lw-chase-session .lw-score-popup { fill: #d2f9e2; stroke: #0d2f33; }
.lw-chase-session .lw-chase-overlay { background: #0a2c2eaf; backdrop-filter: none; }
.lw-chase-session .lw-chase-overlay strong { color: #ddf5e7; font-size: 22px; }
.lw-chase-session .lw-chase-overlay .lw-primary { background: #a0d4ba !important; border-color: #bfe6ce; color: #163e36; }
.lw-chase-session .lw-map-toolbar { display: flex; justify-content: center; background: #143b3b; border: 1px solid #477a70; border-radius: 14px; padding: 8px; margin-block-start: 8px; }
.lw-chase-session .lw-map-toolbar > p { display: none; }
.lw-chase-session .lw-movement { display: flex; gap: 7px; }
.lw-chase-session .lw-movement button { background: #24514b !important; border: 1px solid #7ab099; color: #dff7e7; inline-size: 54px; block-size: 48px; border-radius: 12px; }
.lw-chase-session :is(button,a,summary):focus-visible { outline: 3px solid #d7ffe7; outline-offset: 3px; }
.wt-dialog,.wi-dialog { padding: 16px 20px; }
.wt-dialog .wt-study-card { margin-block: 10px; }
.wt-expedition { border-radius: 14px; background: #203f45; padding: 9px 12px; margin-block: 8px; color: #e5ead5; }
.wt-expedition svg { inline-size: 100%; block-size: 44px; display: block; }
.wt-expedition p { color: #d6e2c5; font-size: 11px; margin: 3px 0; }
.wt-expedition strong { color: #f2db9d; }
.wi-dialog .wi-cover { display: none; }
.wi-dialog .wi-settings { gap: 8px; }
.wi-dialog .wi-hud { padding: 7px 12px; border: 1px solid var(--lw-line); border-radius: 12px; margin-block: 8px; font-size: 12px; }
@media (width <= 700px) {
.nq-dialog { inline-size: calc(100% - 10px); max-block-size: calc(100dvh - 10px); border-radius: 16px; }
.nq-header { padding: 10px 12px; gap: 6px; }
.nq-brand { flex: 1; }
.nq-brand h2 { font-size: 20px; }
.nq-stats { order: 5; flex-basis: 100%; font-size: 12px; }
.nq-world { font-size: 8px; }
.nq-mission-strip { padding: 7px 12px; font-size: 10px; }
.nq-mission-strip progress { inline-size: 65px; }
.nq-panel { padding: 15px; border-radius: 16px; }
.nq-panel-copy { font-size: 12px; }
.nq-panel h3 { font-size: 22px; }
.nq-overlay { padding: 10px; align-items: start; }
.nq-controls { padding: 6px 10px 10px; gap: 6px; }
.nq-controls button { padding: 8px 10px; font-size: 12px; }
.nq-controls .nq-move { min-inline-size: 44px; }
.nq-controls .nq-interact { flex: 1; margin: 0; }
.nq-controls .nq-guide { flex: 1 1 100%; min-block-size: 44px; }
.nq-canvas { max-block-size: calc(100dvh - 300px); }
.nq-settings-panel { inset-inline-end: -46px; }
.lw-chase-session .lw-shell { padding: 6px; }
.lw-chase-session .lw-run-hud { padding: 10px 12px; gap: 7px 10px; }
.lw-chase-session .lw-run-title { font-size: 16px; }
.lw-chase-session .lw-arena-actions { gap: 4px; }
.lw-chase-session .lw-arena-actions :is(button,summary) { font-size: 10px; padding: 8px; }
.lw-chase-session .lw-run-heading { flex-direction: column; align-items: start; gap: 3px; }
.lw-chase-session .lw-run-chain { font-size: 9px; max-inline-size: 120px; }
.lw-chase-session .lw-run-goals { gap: 7px; }
.lw-chase-session .lw-run-count { font-size: 10px; }
.lw-chase-session .lw-run-goals progress { inline-size: 74px; }
.lw-chase-session .lw-map.is-chasing { min-block-size: 300px; max-block-size: calc(100dvh - 200px); }
.lw-chase-session .lw-map-toolbar { padding: 7px; }
}
@media (height <= 500px) and (width >= 700px) {
.nq-dialog { inline-size: min(1000px,calc(100% - 10px)); }
.nq-header { padding: 6px 12px; }
.nq-mission-strip,.nq-controls-hint { display: none; }
.nq-canvas { min-block-size: 200px; max-block-size: calc(100dvh - 135px); }
.nq-stage { min-block-size: 200px; }
.nq-controls { padding: 5px 10px 10px; }
.lw-chase-session .lw-map.is-chasing { min-block-size: 220px; }
}
@media (forced-colors: active) {
.nq-dialog,.nq-panel,.nq-header,.nq-overlay,.nq-settings-panel { background: Canvas; color: CanvasText; border-color: CanvasText; }
.nq-dialog :is(h2,h3,p,span,button,summary),.lw-chase-session :is(button,summary) { color: CanvasText; border-color: ButtonText; }
.nq-dialog .lw-button,.nq-dialog .lw-primary,.nq-controls button { background: ButtonFace !important; color: ButtonText; }
.nq-plank-slot { border-color: CanvasText; }
.nq-plank-slot.is-filled { background: Highlight; }
.nq-seed { color: CanvasText; }
.lw-chase-session :is(button,a,summary):focus-visible { outline-color: Highlight; }
}
.lw-chase-session .lw-run-heading { min-inline-size: 0; }
.lw-chase-session .lw-map.is-chasing { inline-size: 100%; }
.lw-chase-session #lw-chase-pause { min-inline-size: 44px; font-size: 20px; padding: 5px; }
@media (width <= 700px) { .lw-chase-session .lw-run-chain { display: none; } .lw-chase-session .lw-run-title { font-size: 15px; } .lw-chase-session .lw-run-heading { min-inline-size: 0; } .lw-chase-session .lw-run-goals { flex-wrap: wrap; } .lw-chase-session .lw-arena-actions { max-inline-size: 165px; } }
body[data-game-route] { overflow: hidden; background: #0d3032; }
body[data-game-route="letterwild"] { overflow-y: auto; background: var(--lw-paper); }
body[data-game-route] > .lw-topbar { display: none; }
body[data-game-route="letterwild"] > .lw-topbar { display: flex; }
body[data-game-route]:not([data-game-route="inkberry-chase"], [data-game-route="letterwild"]) > .lw-shell { visibility: hidden; block-size: 0; overflow: hidden; }
body[data-game-route] :is(button,summary,input,a):focus-visible { outline: 3px solid #e4c66f; outline-offset: 3px; }
body[data-game-route] :is(button,summary) { touch-action: manipulation; }
body[data-game-route] dialog[open]:is(.nq-dialog,.nn-dialog,.wt-dialog,.wi-dialog) { position: fixed; inset: 0; inline-size: 100%; max-inline-size: none; block-size: 100dvh; max-block-size: none; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
body[data-game-route] dialog::backdrop { background: #0d3032; }
.game-lives { display: inline-grid; grid-template-columns: auto auto; gap: 4px 10px; align-items: baseline; color: #c6f2df; font-size: 14px; font-variant-numeric: tabular-nums; line-height: 1.25; }
.game-lives-caption { font-weight: 600; }
.game-lives-count { justify-self: end; font-size: 17px; color: inherit; }
.game-life-icons { display: flex; gap: 5px; grid-column: 1/-1; }
.game-life { display: inline-flex; inline-size: 23px; block-size: 23px; }
.game-life svg { inline-size: 100%; block-size: 100%; overflow: visible; }
.game-life svg > path:first-child { stroke: currentcolor; stroke-width: 1; }
.game-life-cross { display: none; }
.game-life.is-spent { color: #7ca29b; }
.game-life.is-spent svg > path:first-child { fill: transparent; }
.game-life.is-spent .game-life-cross { display: block; }
.game-level-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border: 1px solid #a6c0ae; border-radius: 16px; background: #e4ecdf; color: #194d40; font-size: 16px; }
.game-level-status .game-lives { color: #1a6651; }
.game-level-status .game-life.is-spent { color: #607b70; }
.game-level-label { font-size: 15px; font-weight: 650; }
.game-choice-cards { padding: 0; margin: 10px 0; border: 0; min-inline-size: 0; }
.game-choice-cards legend { padding: 0 0 8px; font-size: 15px; line-height: 1.4; font-weight: 650; color: inherit; }
.game-choice-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.game-choice-card { display: flex; align-items: center; gap: 10px; min-block-size: 54px; padding: 12px 14px; border: 1.5px solid #a3b8a5; border-radius: 12px; color: #264e3e; background: #f8f7ed; cursor: pointer; font-size: 15px; line-height: 1.45; }
.game-choice-card input { accent-color: #205d49; flex: 0 0 18px; inline-size: 18px; block-size: 18px; }
.game-choice-card:has(:checked) { border-color: #245c49; background: #deecdc; box-shadow: inset 0 0 0 1px #245c49; font-weight: 650; }
.game-choice-card:focus-within { outline: 3px solid #b48a30; outline-offset: 2px; }
.game-choice-cards select[hidden] { display: none !important; }
.wt-topic-menu { position: relative; justify-self: end; }
.wt-topic-menu summary { min-block-size: 44px; display: flex; align-items: center; padding: 8px 14px; border: 1px solid #7b9683; border-radius: 12px; cursor: pointer; font-size: 14px; font-weight: 650; }
.wt-topic-menu > .game-choice-cards { position: absolute; inset-inline-end: 0; inset-block-start: 42px; z-index: 20; inline-size: min(400px,calc(100dvw - 32px)); padding: 18px; background: #f4f4e9; color: #173d31; border: 1px solid #8aa48f; border-radius: 16px; box-shadow: 0 12px 36px #0c302b45; }
.wt-topic-menu:not([open]) > .game-choice-cards { display: none; }
.wt-topic-menu .game-choice-options { grid-template-columns: 1fr; }
.lw-chase-session { background: radial-gradient(ellipse at 50% 10%,#214f4b 0,#102f32 65%); }
.lw-chase-session .lw-shell { --chase-width: min(1080px,calc(100dvw - 32px),calc((100dvh - 240px)*15/11)); padding: 16px 0; inline-size: var(--chase-width); max-inline-size: none; }
.lw-chase-session .lw-map-column { inline-size: 100%; max-inline-size: none; }
.lw-chase-session .lw-run-hud { grid-template-columns: minmax(0,1fr) auto auto; grid-template-rows: auto auto; gap: 14px 24px; padding: 18px 22px; background: linear-gradient(120deg,#1d4946,#143d3c); border: 1px solid #67978b; border-block-end: 0; border-radius: 24px 24px 0 0; box-shadow: 0 12px 32px #061f2630; }
.lw-chase-session .lw-run-heading { grid-area: 1/1; display: grid; gap: 4px; align-content: center; }
.lw-chase-session .lw-run-title { font: 750 24px/1.15 "Inter Variable","Noto Sans Arabic Variable",sans-serif; letter-spacing: -.025em; }
.lw-chase-session .lw-arena-level { font-size: 12px; line-height: 1.3; color: #b9dacf; font-weight: 600; }
.lw-chase-session .lw-arena-actions { grid-area: 1/3; gap: 8px; max-inline-size: none; }
.lw-chase-session .lw-arena-actions :is(button,summary) { min-block-size: 46px; border: 1px solid #6c9c8d; border-radius: 13px; padding: 9px 13px; font-size: 14px; line-height: 1.25; color: #e2f9ec; background: #204c46 !important; box-shadow: 0 3px 0 #0b2b2d; }
.lw-chase-session #lw-chase-pause { min-inline-size: 46px; font-size: 21px; }
.lw-chase-session .lw-run-hearts { grid-area: 1/2; font-size: 14px; align-self: center; }
.lw-chase-session .lw-run-score { grid-area: 2/3; align-self: center; justify-content: end; gap: 8px; }
.lw-chase-session .lw-run-score::before { display: none; }
.lw-chase-session .lw-run-score .lw-run-label { display: block; font-size: 12px; color: #b9dacf; }
.lw-chase-session .lw-run-score-value { font-size: 25px; }
.lw-chase-session .lw-run-goals { grid-area: 2/1; gap: 4px 12px; align-self: center; }
.lw-chase-session .lw-run-count { font-size: 13px; line-height: 1.4; font-weight: 600; }
.lw-chase-session .lw-run-goals progress { inline-size: 100%; flex-basis: 100%; block-size: 5px; margin-block-start: 3px; border-radius: 99px; overflow: hidden; }
.lw-letter-track { grid-area: 2/2; display: flex; justify-content: center; align-items: center; gap: 6px; }
.lw-letter-chip { display: grid; place-items: center; position: relative; min-inline-size: 30px; block-size: 34px; padding: 2px 6px; border: 1px solid #719f8e; border-radius: 10px; background: #173a37; color: #e6ffef; font-size: 18px; font-weight: 750; }
.lw-letter-chip.is-collected { background: #a3d8ba; color: #133d32; }
.lw-letter-chip.is-collected::after { content: "✓"; position: absolute; inset: -7px -5px auto auto; display: grid; place-items: center; border-radius: 50%; inline-size: 15px; block-size: 15px; background: #e1ffeb; color: #194c39; font-size: 11px; }
.lw-chase-session .lw-run-chain { display: none; }
.lw-chase-session .lw-run-hud.is-powered .lw-run-glow { grid-area: 3/1/4/4; font-size: 13px; }
.lw-chase-session .lw-map.is-chasing { inline-size: 100%; aspect-ratio: 15/11; min-block-size: 0; max-block-size: none; border: 1px solid #67978b; border-radius: 0 0 22px 22px; box-shadow: 0 20px 60px #031d2440; background: #102f32; }
.lw-chase-session .lw-maze-floor { fill: #102f32; }
.lw-chase-session .lw-maze-wall { fill: #24564f; stroke: #80b4a2; stroke-width: 3; filter: drop-shadow(0 7px 0 #0d272b); }
.lw-chase-session .lw-inkberry { fill: #efc96d; stroke: #efc96d; filter: drop-shadow(0 2px 0 #031c23); }
.lw-chase-session .lw-glowseed { fill: #fff0ae; stroke: #e2b65a; filter: drop-shadow(0 0 14px #f2c86e); }
.lw-chase-session .lw-muddle { color: #b6a0dc; filter: drop-shadow(0 5px 0 #071f25); }
.lw-chase-session .lw-muddle.is-frightened { color: #e4d9ff; }
.lw-chase-session .lw-chase-pip { filter: drop-shadow(0 3px 0 #061f25); }
.lw-chase-session .lw-chase-letter { inline-size: clamp(44px,5vw,64px); block-size: clamp(44px,5vw,64px); color: #f4ecff; background: radial-gradient(circle at 30% 20%,#51416e,#332d4d) !important; border: 2px solid #cbb8f0; box-shadow: 0 4px 0 #1c2238,0 0 18px #b89ee22b; font-family: "Inter Variable",sans-serif; }
.lw-chase-session .lw-chase-letter strong { font-size: clamp(21px,2.4vw,32px); }
.lw-chase-session .lw-chase-letter small { font-size: clamp(14px,1.5vw,20px); }
.lw-chase-session .lw-letter-orbit { display: none; }
.lw-chase-session .lw-chase-letter.is-collected { color: #c4e5d5; background: #214b43 !important; border-color: #91b7a3; border-style: dashed; opacity: .8; }
.lw-chase-session .lw-letter-chip:not(.is-collected) { background: #39324f; border-color: #b4a0d2; color: #eee5ff; }
.lw-chase-session .lw-run-score-value { color: #f7d98e; }
.lw-chase-session .lw-run-hud.is-powered .lw-run-glow span { color: #ffe5a1; }
.lw-chase-session .lw-chase-overlay { background: #082c35a6; backdrop-filter: blur(2px); gap: 16px; }
.lw-chase-session .lw-chase-overlay strong { font-size: 26px; letter-spacing: -.02em; }
.lw-chase-session .lw-chase-overlay .lw-button { padding: 14px 24px; font-size: 17px; border-radius: 14px; box-shadow: 0 4px 0 #0a332b; }
.lw-chase-session .lw-map-toolbar { border: 0; background: transparent; padding: 12px 0 0; margin: 0; }
.lw-chase-session .lw-movement { gap: 8px; }
.lw-chase-session .lw-movement button { inline-size: 54px; block-size: 48px; border-radius: 14px; font-size: 24px; background: linear-gradient(#2c6154,#204a43) !important; border-color: #7dad95; box-shadow: 0 3px 0 #06272b; }
.lw-arena-settings-body { padding: 14px; gap: 8px; border-color: #8fb9a4; background: #17433d; }
.lw-arena-settings-body button { padding: 10px 14px !important; min-block-size: 46px; text-align: start; }
.lw-arena-difficulty { font-size: 14px; line-height: 1.5; gap: 10px; }
.lw-arena-difficulty input { inline-size: 20px; block-size: 20px; accent-color: #aad6ba; }
body[data-game-route="number-nest"] .nq-dialog { display: grid; grid-template-rows: auto auto minmax(0,1fr) auto auto; overflow: hidden; background: #143a3c; padding: 0; }
.nq-dialog > .nq-header { grid-row: 1; }
.nq-dialog > .nq-mission-strip { grid-row: 2; }
.nq-dialog > .nq-stage { grid-row: 3; }
.nq-dialog > .nq-controls { grid-row: 4; }
.nq-dialog > .nq-controls-hint { grid-row: 5; }
.nq-header { gap: 18px; padding: 16px 24px; }
.nq-brand h2 { font-size: 25px; line-height: 1.2; }
.nq-world { font-size: 11px; letter-spacing: .1em; }
.nq-header .nq-icon { flex: 0 0 46px; inline-size: 46px; block-size: 46px; }
.nq-stats { font-size: 15px; line-height: 1.6; }
.nq-lives { margin-inline: 12px; }
.nq-settings > summary { font-size: 14px; min-block-size: 46px; padding: 10px 16px; }
.nq-settings-panel { inline-size: min(310px,calc(100dvw - 32px)); padding: 16px; gap: 10px; background: #193f3b; }
.nq-settings-panel label { font-size: 15px; line-height: 1.5; }
.nq-mission-strip { padding: 10px 24px; font-size: 14px; }
.nq-mission-strip progress { accent-color: #e5c480; block-size: 8px; inline-size: 160px; }
.nq-stage { min-block-size: 0; }
body[data-game-route="number-nest"] .nq-canvas { inline-size: 100%; block-size: 100%; min-block-size: 0; max-block-size: none; aspect-ratio: auto; }
body[data-game-route="number-nest"] .nq-dialog:has(.nq-overlay:not([hidden])) > :is(.nq-controls,.nq-controls-hint) { display: none; }
body[data-game-route="number-nest"] .nq-dialog:has(.nq-puzzle-visual) > .nq-mission-strip { display: none; }
.nq-controls { padding: 12px 24px; gap: 10px; }
.nq-controls button { min-block-size: 50px; padding: 12px 20px; font-size: 16px; border-radius: 14px; }
.nq-controls .nq-guide { font-size: 14px; }
.nq-controls-hint { padding-block-end: 10px; font-size: 12px; }
.nq-overlay { padding: 20px; align-items: center; background: #082c38b0; }
.nq-panel { inline-size: min(100%,660px); max-block-size: 100%; padding: 22px 28px; border: 2px solid #d4bd84; border-radius: 24px; background: #faf6e8; overflow-y: auto; }
.nq-panel h3 { font-size: 28px; line-height: 1.25; margin: 5px 0 10px; }
.nq-panel-copy { font-size: 16px; line-height: 1.5; margin: 8px auto 14px; max-inline-size: 44ch; color: #315746; }
.nq-eyebrow { font-size: 11px; letter-spacing: .08em; line-height: 1.4; }
.nq-story-goals { font-size: 14px; line-height: 1.6; margin-block: 12px; }
.nq-panel .lw-button { min-block-size: 46px; padding: 12px 20px; font-size: 16px; line-height: 1.3; }
.nq-panel > .lw-button:not(.lw-primary) { min-block-size: 44px; font-size: 14px; }
.nq-puzzle-visual { padding: 16px 12px; margin: 14px 0; border: 1px solid #c7d3ad; border-radius: 18px; background: #e8edd7; gap: 12px; }
.nq-bridge-builder { flex-wrap: nowrap; align-items: center; justify-content: center; min-block-size: 110px; background: linear-gradient(#cfe6db 65%,#67a497 65%); border-color: #9ab6a1; gap: 6px; }
.nq-panel .nq-plank-slot { flex: 0 1 52px; inline-size: 52px; block-size: 88px; min-block-size: 60px; border: 2px dashed #476e5b; background: #f8f9e9 !important; border-radius: 7px; color: #40634b; padding: 0; margin: 0; box-shadow: none; font-size: 17px; }
.nq-panel .nq-plank-slot.is-filled { background: repeating-linear-gradient(90deg,#b7894e 0,#b7894e 12px,#a6773c 13px,#b7894e 15px) !important; border: 2px solid #75552f; box-shadow: 0 4px 0 #5e4b35; color: #fff6d4; }
.nq-two-nests { display: grid; grid-template-columns: minmax(0,1fr) 24px minmax(0,1fr); align-items: center; padding: 12px; gap: 8px; }
.nq-two-nests.is-joined { grid-template-columns: minmax(0,1fr); }
.nq-counting-nest { min-inline-size: 0; border-radius: 18px; padding: 10px 8px; border: 1px solid #bcaa7c; border-block-end: 8px solid #af8850; background: #eee0b9; box-shadow: inset 0 -8px 0 #d5b67d; }
.nq-counting-nest h4 { margin: 0 0 8px; color: #49603e; font-size: 13px; line-height: 1.3; font-weight: 650; }
.nq-egg-tray { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.nq-panel .nq-counting-egg { position: relative; display: inline-grid; place-items: center; flex: 0 0 44px; inline-size: 44px; block-size: 56px; min-block-size: 56px; padding: 0; border: 0; margin: 0; border-radius: 48% 48% 42% 42%; background: transparent !important; box-shadow: none; color: #304f39; }
.nq-counting-egg svg { display: block; inline-size: 44px; block-size: 54px; }
.nq-counting-egg[aria-pressed="true"] { outline: 2px solid #38715c; outline-offset: 1px; }
.nq-egg-number { position: absolute; inset: 0; display: grid; place-items: center; padding-block-start: 8px; font-size: 21px; font-weight: 750; color: #274e37; }
.nq-counted { display: block; font-size: 11px; color: #4a5e3b; line-height: 1.4; min-block-size: 16px; margin-block-start: 8px; }
.nq-math-sign { font-size: 27px; color: #496748; font-weight: 700; }
.nq-puzzle-answers { gap: 10px; }
.nq-load-count { font-size: 32px; min-inline-size: 50px; }
.nq-puzzle-answers [data-quest-answer] { min-inline-size: 74px; min-block-size: 60px; font-size: 25px; background: #fffdf0 !important; color: #255b44; border: 2px solid #6a8b63; box-shadow: 0 4px 0 #bccba5; }
.nq-puzzle-answers [data-quest-answer]:disabled { opacity: .5; box-shadow: none; }
.nq-puzzle-feedback { font-size: 14px; line-height: 1.5; margin: 8px 0; min-block-size: 0; }
body[data-game-route] :is(.wt-dialog,.wi-dialog,.nn-dialog) { padding: 22px max(24px,calc((100dvw - 1080px)/2)); background: #f6f4e8; color: #173d31; font-size: 16px; overflow-y: auto; }
body[data-game-route] .nn-dialog { padding-block: 12px; }
body[data-game-route] :is(.wt-dialog,.wi-dialog) > h2 { font-size: 28px; line-height: 1.2; margin: 0 0 12px; letter-spacing: -.03em; }
body[data-game-route] :is(.wt-dialog,.wi-dialog) > .lw-button:first-child { float: inline-end; min-block-size: 46px; font-size: 14px; margin-inline-start: 16px; padding: 10px 16px; }
.wt-dialog .game-voice-toggle { margin: 0; font-size: 14px; min-block-size: 44px; }
.wt-dialog .wt-expedition { padding: 8px 16px; margin: 10px 0; }
.wt-dialog .wt-expedition svg { block-size: 32px; }
.wt-dialog .wt-expedition p { font-size: 13px; line-height: 1.5; }
.wt-dialog :is(.wt-question,.wt-definition,.wt-example,.wt-collocation) { font-size: clamp(18px,2.2vw,25px); line-height: 1.5; margin-block: 14px; }
.wt-dialog .wt-choices { gap: 12px; }
.wt-dialog .wt-choices button { font-size: 17px; min-block-size: 54px; padding: 14px 18px; line-height: 1.4; }
.wt-dialog .wt-study-card { padding: 20px 24px; margin: 12px 0; }
.wi-dialog .wi-life-hud { display: flex; justify-content: end; color: #205c48; }
.wi-dialog .game-lives { color: #205c48; }
.wi-dialog .wi-settings { gap: 12px; padding: 8px 0; align-items: center; }
.wi-dialog .wi-settings label { font-size: 14px; }
.wi-dialog .wi-definition { font-size: 20px; line-height: 1.4; margin: 8px 0; }
.wi-dialog .wi-canvas { max-block-size: calc(100dvh - 350px); inline-size: min(100%,1000px); object-fit: contain; }
.wi-dialog .wi-targets button { min-block-size: 50px; font-size: 17px; }
.game-room-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-block-end: 10px; }
.game-room-header h2 { margin: 0; font: 750 28px/1.25 "Inter Variable","Noto Sans Arabic Variable",sans-serif; letter-spacing: -.025em; color: #173f34; }
.game-room-header h2:focus { outline: none; box-shadow: none; }
.game-room-header > button { margin: 0; min-block-size: 46px; padding: 10px 16px; font-size: 14px; flex-shrink: 0; }
.game-room-preferences { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-block: 8px; }
.game-room-preferences .wt-topic-menu { margin-inline-start: auto; }
.wi-arena-layout { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(260px,1fr); gap: 24px; align-items: start; margin-block-start: 12px; }
.wi-stage-column { min-inline-size: 0; }
.wi-dialog .wi-stage-column .wi-canvas { inline-size: 100%; max-block-size: calc(100dvh - 270px); aspect-ratio: 3/2; }
.wi-task-column { min-inline-size: 0; padding: 18px; background: #e8ecdf; border: 1px solid #bbc9b3; border-radius: 20px; }
.wi-task-column .wi-targets { grid-template-columns: 1fr; gap: 10px; margin-block: 16px; }
.wi-task-column .wi-targets button { font-size: 18px; min-block-size: 54px; }
.wi-task-column .wi-question { background: transparent; padding: 0; }
.wi-task-column .wi-definition { font-size: 20px; }
.wi-dialog .wi-controls { padding-block: 10px; }
.wi-dialog .wi-controls button { min-block-size: 46px; font-size: 16px; }
.wi-dialog .wi-hud { font-size: 14px; text-align: start; margin-block: 4px; }
.wi-dialog .wi-life-hud { margin-block: 4px; }
.wi-dialog > .game-voice-toggle { margin-block: 0; min-block-size: 44px; }
.wi-life-hud .game-lives { display: inline-grid; }
@media (width <= 700px) {
.lw-chase-session .lw-shell { --chase-width: min(calc(100dvw - 16px),calc((100dvh - 248px)*15/11)); padding: 8px 0; }
.lw-chase-session .lw-run-hud { grid-template-columns: minmax(0,1fr) auto; gap: 12px 10px; padding: 14px 12px; border-radius: 20px 20px 0 0; }
.lw-chase-session .lw-run-title { font-size: 19px; line-height: 1.25; }
.lw-chase-session .lw-arena-level { font-size: 11px; }
.lw-chase-session .lw-arena-actions { grid-area: 1/2; gap: 5px; }
.lw-chase-session .lw-arena-actions :is(button,summary) { padding: 8px; min-block-size: 44px; font-size: 12px; }
.lw-chase-session #lw-chase-pause { min-inline-size: 44px; font-size: 20px; }
.lw-chase-session .lw-run-hearts { grid-area: 2/1; justify-self: start; }
.lw-chase-session .lw-run-goals { grid-area: 3/1; gap: 4px 8px; }
.lw-chase-session .lw-run-count { font-size: 11px; }
.lw-chase-session .lw-run-score { grid-area: 2/2; align-self: center; }
.lw-chase-session .lw-run-score-value { font-size: 24px; }
.lw-letter-track { grid-area: 3/2; justify-content: end; gap: 4px; }
.lw-letter-chip { font-size: 17px; min-inline-size: 25px; block-size: 30px; }
.lw-chase-session .lw-run-hud.is-powered .lw-run-glow { grid-area: 4/1/5/3; }
.game-life { inline-size: 21px; block-size: 21px; }
.game-life-icons { gap: 4px; }
.game-lives { font-size: 12px; gap: 4px 8px; }
.game-lives-count { font-size: 15px; }
.lw-chase-session .lw-movement button { inline-size: 50px; block-size: 48px; }
.lw-chase-session .lw-chase-overlay strong { font-size: 23px; }
.nq-header { display: grid; grid-template-columns: minmax(0,1fr) auto auto auto; gap: 8px; padding: 12px; }
.nq-brand { grid-area: 1/1; }
.nq-brand h2 { font-size: 21px; }
.nq-world { font-size: 9px; }
.nq-header > .nq-icon:last-child { grid-area: 1/4; }
.nq-header > .nq-icon:not(:last-child) { grid-area: 1/2; }
.nq-header .nq-settings { grid-area: 1/3; }
.nq-settings > summary { font-size: 12px; min-block-size: 44px; padding: 8px 10px; }
.nq-header .nq-icon { inline-size: 44px; block-size: 44px; }
.nq-lives { grid-area: 2/1; margin: 0; }
.nq-stats { grid-area: 2/2/3/5; margin-inline-start: auto; font-size: 12px; line-height: 1.6; max-inline-size: 160px; }
.nq-mission-strip { padding: 8px 12px; font-size: 12px; line-height: 1.45; gap: 12px; }
.nq-mission-strip progress { inline-size: 70px; flex-shrink: 0; }
.nq-controls { padding: 10px 12px; gap: 8px; }
.nq-controls button { min-block-size: 46px; padding: 10px 12px; font-size: 14px; }
.nq-controls .nq-guide { flex-basis: auto; flex-grow: 1; font-size: 13px; }
.nq-controls .nq-interact { min-inline-size: 130px; }
.nq-controls-hint { display: none; }
.nq-overlay { padding: 12px; }
.nq-panel { padding: 16px; border-radius: 20px; }
.nq-panel h3 { font-size: 24px; margin-block: 4px 8px; }
.nq-panel-copy { font-size: 15px; line-height: 1.45; margin-block: 8px 12px; }
.nq-story-goals { font-size: 13px; line-height: 1.5; padding-inline-start: 20px; }
.nq-puzzle-visual { padding: 10px 6px; gap: 6px; margin-block: 10px; }
.nq-two-nests { grid-template-columns: minmax(0,1fr) 18px minmax(0,1fr); gap: 4px; padding: 8px 4px; }
.nq-counting-nest { padding: 8px 4px; }
.nq-egg-tray { gap: 4px; }
.nq-counting-nest h4 { font-size: 12px; }
.nq-panel .nq-counting-egg { flex-basis: 44px; }
.nq-counted { font-size: 11px; }
.nq-panel .nq-plank-slot { min-inline-size: 0; block-size: 72px; }
.nq-panel .lw-button { font-size: 15px; padding: 10px 14px; }
.nq-puzzle-answers { gap: 7px; }
.nq-puzzle-answers [data-quest-answer] { min-inline-size: 64px; min-block-size: 54px; font-size: 23px; }
.nq-bridge-builder { min-block-size: 96px; }
body[data-game-route] :is(.wt-dialog,.wi-dialog,.nn-dialog) { padding: 16px; }
body[data-game-route] .nn-dialog { padding-block: 10px; }
body[data-game-route] :is(.wt-dialog,.wi-dialog) > h2 { font-size: 24px; }
.game-level-status { padding: 10px 12px; }
.game-choice-options { grid-template-columns: 1fr; }
.wt-dialog .wt-study-card { padding: 16px; }
.wt-dialog :is(.wt-question,.wt-definition,.wt-example,.wt-collocation) { font-size: 18px; line-height: 1.5; margin-block: 10px; }
.wt-dialog .wt-expedition svg { block-size: 26px; }
.wt-dialog .wt-expedition p { font-size: 12px; }
.wi-dialog .wi-definition { font-size: 17px; }
.wi-dialog .wi-canvas { max-block-size: calc(100dvh - 380px); }
.game-room-header { gap: 12px; margin-block-end: 8px; }
.game-room-header h2 { font-size: 23px; }
.game-room-header > button { padding: 8px 12px; font-size: 12px; }
.wi-arena-layout { display: flex; flex-direction: column; gap: 12px; margin-block-start: 8px; }
.wi-stage-column,.wi-task-column { inline-size: 100%; }
.wi-dialog .wi-stage-column .wi-canvas { max-block-size: min(210px,calc(100dvh - 540px)); }
.wi-task-column { padding: 12px; }
.wi-task-column .wi-question { display: flex; align-items: center; gap: 10px; }
.wi-task-column .wi-definition { font-size: 17px; }
.wi-task-column .wi-targets { grid-template-columns: repeat(3,minmax(0,1fr)); margin-block: 10px; }
.wi-task-column .wi-targets button { font-size: 15px; min-block-size: 46px; }
.wi-task-column .wi-feedback { min-block-size: 0; font-size: 13px; }
.wi-task-column .lw-save-status { font-size: 12px; margin-block: 4px; }
.wi-dialog .wi-settings { padding: 4px 0; gap: 8px; }
.wi-dialog .wi-settings .lw-button { min-block-size: 44px; padding: 8px 12px; font-size: 12px; }
.wi-dialog .wi-settings label { font-size: 12px; min-block-size: 44px; }
}
@media (height <= 550px) and (width > 700px) {
body[data-game-route] .wt-dialog { display: grid; grid-template-columns: minmax(220px,.8fr) minmax(0,1.2fr); grid-template-rows: auto auto auto auto minmax(0,1fr); gap: 6px 22px; padding: 10px 18px; align-content: start; }
.wt-dialog .game-room-header { grid-column: 1/-1; margin: 0; }
.wt-dialog .game-room-preferences { grid-column: 1; grid-row: 2; margin: 0; }
.wt-dialog .game-level-status { grid-column: 1; grid-row: 3; padding: 8px 12px; }
.wt-dialog .wt-expedition { grid-column: 1; grid-row: 4; margin: 0; padding: 6px 10px; }
.wt-dialog .wt-expedition svg { block-size: 24px; }
.wt-dialog .wt-expedition p { font-size: 11px; }
.wt-dialog .wt-study-card { grid-column: 2; grid-row: 2/5; padding: 10px 16px; margin: 0; }
.wt-dialog :is(.wt-definition,.wt-example,.wt-collocation) { font-size: 17px; line-height: 1.4; margin-block: 8px; }
.wt-dialog > .game-voice-status { grid-column: 1; grid-row: 5; font-size: 11px; }
.wt-dialog > .lw-primary { grid-column: 2; grid-row: 5; justify-self: center; min-block-size: 44px; padding-block: 8px; }
.lw-chase-session .lw-shell { --chase-width: min(850px,calc((100dvh - 140px)*15/11)); padding: 124px 0 6px; }
.lw-chase-session .lw-run-hud { position: fixed; z-index: 5; inset: 8px 16px auto; padding: 8px 14px; gap: 6px 16px; border-radius: 18px; border-block-end: 1px solid #67978b; }
.lw-chase-session .lw-run-title { font-size: 18px; }
.lw-chase-session .lw-arena-level { font-size: 10px; }
.lw-chase-session .lw-map-toolbar { position: fixed; inset-inline: 0; inset-block-end: 16px; pointer-events: none; padding: 0; }
.lw-chase-session .lw-movement { display: grid; grid-template-columns: repeat(3,48px); grid-template-rows: repeat(3,48px); gap: 5px; inline-size: auto; margin-inline: 16px auto; }
.lw-chase-session .lw-movement button { pointer-events: auto; inline-size: 46px; block-size: 46px; }
.lw-chase-session .lw-movement [data-move="up"] { grid-area: 1/2; }
.lw-chase-session .lw-movement [data-move="left"] { grid-area: 2/1; }
.lw-chase-session .lw-movement [data-move="down"] { grid-area: 2/2; }
.lw-chase-session .lw-movement [data-move="right"] { grid-area: 2/3; }
.lw-chase-session .lw-movement #lw-interact { grid-area: 3/2; }
.nq-header { padding: 8px 18px; }
.nq-brand h2 { font-size: 21px; }
.nq-controls { padding: 6px 18px; }
.nq-mission-strip,.nq-controls-hint { display: none; }
.nq-overlay { padding: 8px; }
.nq-panel { inline-size: min(100%,700px); padding: 12px 18px; }
.nq-panel h3 { font-size: 22px; }
.nq-panel-copy { font-size: 14px; margin-block: 5px; }
.nq-puzzle-visual { margin-block: 7px; padding: 6px; }
.nq-panel:has(.nq-puzzle-visual) { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; align-items: center; }
.nq-panel:has(.nq-puzzle-visual) > :is(.nq-eyebrow,h3,.nq-panel-copy) { grid-column: 1; margin: 0; }
.nq-panel:has(.nq-puzzle-visual) > .nq-puzzle-visual { grid-column: 2; grid-row: 1/5; }
.nq-panel:has(.nq-puzzle-visual) > .nq-puzzle-answers { grid-column: 1; }
.nq-panel:has(.nq-puzzle-visual) > .nq-puzzle-feedback { grid-column: 1/-1; }
.nq-panel > .lw-button:not(.lw-primary) { min-block-size: 44px; }
body[data-game-route] .wi-dialog { padding: 10px 18px; }
.wi-dialog .game-room-header { margin-block-end: 4px; }
.wi-dialog .game-room-header h2 { font-size: 22px; }
.wi-dialog .game-voice-toggle { position: absolute; inset-inline-start: 220px; inset-block-start: 10px; margin: 0; min-block-size: 44px; font-size: 12px; }
.wi-dialog .wi-settings { justify-content: start; padding: 0; gap: 10px; }
.wi-dialog .wi-settings :is(label,.lw-button) { min-block-size: 44px; padding-block: 6px; font-size: 12px; }
.wi-dialog .wi-hud { margin: 4px 0; padding: 6px 12px; font-size: 12px; max-inline-size: 50%; }
.wi-dialog .wi-life-hud { position: absolute; inset-inline-end: 20px; inset-block-start: 108px; margin: 0; }
.wi-dialog .wi-life-hud .game-life { inline-size: 18px; block-size: 18px; }
.wi-dialog .wi-life-hud .game-lives { display: flex; gap: 10px; }
.wi-arena-layout { gap: 16px; margin-block-start: 6px; grid-template-columns: minmax(0,1.5fr) minmax(220px,1fr); }
.wi-dialog .wi-stage-column .wi-canvas { max-block-size: calc(100dvh - 170px); }
.wi-dialog .wi-controls { position: absolute; inset-inline-start: 30px; inset-block-end: 8px; padding: 0; margin: 0; }
.wi-task-column { padding: 10px; }
.wi-task-column .wi-targets { grid-template-columns: repeat(3,minmax(0,1fr)); margin-block: 8px; gap: 6px; }
.wi-task-column .wi-targets button { font-size: 14px; min-block-size: 46px; }
.wi-task-column .wi-definition { font-size: 15px; }
.wi-task-column .wi-feedback { min-block-size: 0; font-size: 12px; }
.wi-task-column .lw-save-status { font-size: 12px; margin-block: 4px; }
}
@media (width <= 360px) and (height <= 700px) {
body[data-game-route] .wi-dialog { padding-block: 12px; }
.wt-dialog .wt-study-card { padding: 12px; margin-block: 8px; }
.wt-dialog .wt-expedition { padding: 6px 12px; margin-block: 8px; }
.wt-dialog .wt-expedition svg { block-size: 20px; }
}
@media (forced-colors: active) {
.game-life svg > path:first-child { stroke: CanvasText; }
.game-life:not(.is-spent) svg > path:first-child { fill: CanvasText; }
.game-life.is-spent svg > path:first-child { fill: Canvas; }
.game-life-cross { stroke: CanvasText; }
.nq-counting-nest,.nq-panel,.game-choice-card { border-color: CanvasText; background: Canvas; color: CanvasText; }
.nq-counting-egg svg path:first-of-type { fill: Canvas; stroke: CanvasText; }
.nq-egg-number,.nq-counted,.nq-counting-nest h4 { color: CanvasText; }
}
body.lw-chase-session { overflow: hidden; background: #102b37; }
.rescue-page .lw-garden-zoom { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; border: 1px solid var(--g-border); border-radius: 14px; background: var(--g-surface); }
.lw-zoom-caption { flex-basis: 100%; font-size: 13px; font-weight: 700; }
.rescue-page .lw-garden-zoom[hidden] { display: none; }
.rescue-page .lw-garden-zoom button { inline-size: 44px; block-size: 44px; padding: 0; border: 0; border-radius: 10px; background: var(--g-raised); color: var(--g-text); font: 700 24px/1 sans-serif; cursor: pointer; }
.rescue-page .lw-garden-zoom button:disabled { color: var(--g-muted); cursor: default; }
.rescue-page .lw-garden-zoom button:focus-visible { outline: 3px solid var(--g-focus); outline-offset: -3px; }
body[data-game-route] :is(button,summary,a) { touch-action: manipulation; }
.lw-chase-session :is(.lw-chase-board,.lw-movement),.nq-session :is(.nq-canvas,.nq-controls) { touch-action: none; overscroll-behavior: none; }
.rescue-page .lw-chase-layer[data-world] { --g-meadow: hsl(var(--garden-hue) 28% 84%); --g-canopy: hsl(var(--garden-hue) 32% 44%); --g-wall: hsl(var(--garden-hue) 28% 39%); --g-floor: hsl(var(--garden-hue) 38% 91%); --g-berry: hsl(calc(var(--garden-hue) + 160) 48% 38%); --g-letter-bg: hsl(calc(var(--garden-hue) + 190) 38% 26%); --g-letter-text: #fff3cc; }
html[data-theme="dark"] .rescue-page .lw-chase-layer[data-world] { --g-meadow: hsl(var(--garden-hue) 24% 17%); --g-canopy: hsl(var(--garden-hue) 28% 29%); --g-wall: hsl(var(--garden-hue) 24% 29%); --g-floor: hsl(var(--garden-hue) 20% 24%); --g-berry: hsl(calc(var(--garden-hue) + 160) 60% 73%); }
html[data-theme="dark"] .rescue-page.lw-chase-session .lw-chase-layer[data-camera="overview"] .lw-maze-wall { stroke: var(--g-wall-edge); stroke-width: 1.5; }
.rescue-page .lw-chase-layer[data-world] .lw-muddle { color: hsl(calc(var(--garden-hue) + 180) 50% 58%); }
.rescue-page .lw-chase-layer[data-world] .lw-muddle.is-frightened { color: var(--g-cyan); }
.rescue-page .lw-chase-layer[data-world] .lw-treasure-rim { fill: hsl(calc(var(--garden-hue) + 200) 60% 80%); stroke: var(--g-reward-edge); }
.rescue-page .lw-chase-layer[data-world] .lw-treasure-core { fill: var(--g-letter-bg); }
.rescue-page:not([data-game-route]) .lw-shell { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; max-inline-size: 1120px; padding-block: 28px 40px; }
.rescue-page:not([data-game-route]) .lw-hub-heading { grid-column: 1/-1; text-align: center; margin: 0; padding: 12px 0; }
.rescue-page:not([data-game-route]) .lw-hub-heading h1 { font: 800 clamp(30px,5vw,48px)/1.2 "Inter Variable","Noto Sans Arabic Variable",sans-serif; margin: 12px 0; }
.rescue-page:not([data-game-route]) .lw-hub-heading > p:last-of-type { margin: 0; font-size: 16px; }
.rescue-page:not([data-game-route]) .game-hub-settings { margin: 16px auto 0; max-inline-size: 480px; }
.rescue-page:not([data-game-route]) :is(#lw-intro,#number-nest) { display: flex; flex-direction: column; min-inline-size: 0; margin: 0; padding: 20px; border: 2px solid var(--g-border); border-radius: 28px; background: var(--g-surface); box-shadow: 0 6px 0 color-mix(in srgb,var(--g-border) 30%,transparent); }
.rescue-page:not([data-game-route]) #lw-intro .lw-cover { order: -1; inline-size: 100%; block-size: 240px; min-block-size: 0; margin: 0 0 18px; border-radius: 20px; overflow: hidden; }
.rescue-page:not([data-game-route]) #lw-intro .lw-intro-copy { display: flex; flex: 1; flex-direction: column; padding: 0; }
.rescue-page:not([data-game-route]) #lw-intro .lw-entry-actions { margin-block-start: auto; }
.rescue-page:not([data-game-route]) #number-nest .nq-practice { margin-block: 0 16px; }
.rescue-page:not([data-game-route]) #lw-intro .lw-intro-copy h2,.rescue-page:not([data-game-route]) #number-nest h2 { font: 800 30px/1.25 "Inter Variable","Noto Sans Arabic Variable",sans-serif; margin-block: 8px 12px; }
.rescue-page:not([data-game-route]) :is(#lw-intro,#number-nest) .lw-lead { font-size: 16px; line-height: 1.6; margin-block: 8px 18px; }
.rescue-page:not([data-game-route]) #number-nest .nn-cover { float: none; inline-size: 100%; block-size: 240px; max-inline-size: none; margin: 0 0 18px; border-radius: 20px; overflow: hidden; }
.rescue-page:not([data-game-route]) #number-nest .nn-cover svg { inline-size: 100%; block-size: 100%; object-fit: cover; }
.rescue-page:not([data-game-route]) :is(#lw-play-chase,[data-quest-launch]) { inline-size: 100%; min-block-size: 52px; border-radius: 16px; font-size: 17px; margin-block-start: auto; }
.rescue-page:not([data-game-route]) .lw-footer { grid-column: 1/-1; margin: 0; padding: 0; }
@media (width <= 700px) {
.rescue-page:not([data-game-route]) .lw-shell { grid-template-columns: minmax(0,1fr); gap: 24px; padding: 16px; }
.rescue-page:not([data-game-route]) #lw-intro .lw-cover,.rescue-page:not([data-game-route]) #number-nest .nn-cover { block-size: 200px; }
}
.lw-chase-session .lw-shell { inline-size: 100%; max-inline-size: none; block-size: 100dvh; margin: 0; padding: 0; }
.lw-chase-session #lw-game { block-size: 100%; min-block-size: 0; }
.lw-chase-session .lw-game-layout { display: block; block-size: 100%; min-block-size: 0; }
.lw-chase-session .lw-map-column { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(0,1fr) auto; inline-size: 100%; max-inline-size: none; block-size: 100%; min-block-size: 0; margin: 0; }
.lw-chase-session .lw-map-column > :is(.lw-keyboard-hint,.lw-save-status) { display: none; }
.lw-chase-session #lw-save-status { display: none; }
.lw-chase-session .lw-run-hud { position: relative; inset: auto; z-index: 5; grid-row: 1; grid-template-columns: minmax(180px,1fr) minmax(150px,1fr) auto auto auto auto; grid-template-rows: auto; align-items: center; gap: 12px 24px; min-inline-size: 0; padding: max(14px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) 14px max(22px,env(safe-area-inset-left)); border: 0; border-block-end: 1px solid #749eaa; border-radius: 0; background: #193f45; box-shadow: 0 5px 22px #04152245; }
.lw-chase-session .lw-run-heading { grid-area: 1/1; min-inline-size: 0; }
.lw-chase-session .lw-run-title { font-size: clamp(20px,1.6vw,27px); line-height: 1.25; letter-spacing: -.025em; }
.lw-chase-session .lw-arena-level { color: #bfddd9; font-size: 12px; }
.lw-chase-session .lw-run-goals { grid-area: 1/2; max-inline-size: 290px; inline-size: 100%; gap: 6px 12px; }
.lw-chase-session .lw-run-count { font-size: 13px; color: #e4f3dc; }
.lw-chase-session .lw-run-score { grid-area: 1/5; min-inline-size: 65px; justify-content: center; }
.lw-chase-session .lw-run-score .lw-run-label { font-size: 12px; }
.lw-chase-session .lw-run-score-value { color: #ffe0a0; font-size: 26px; }
.lw-chase-session .lw-run-hearts { grid-area: 1/4; color: #ffd6c7; }
.lw-chase-session .game-life-icons { color: #ffb9a3; }
.lw-chase-session .game-life.is-spent { color: #c4aab0; }
.lw-chase-session .lw-letter-track { grid-area: 1/3; direction: ltr; }
.lw-chase-session .lw-letter-chip:not(.is-collected) { background: #403453; color: #f8efff; border-color: #d2bdf3; }
.lw-chase-session .lw-arena-actions { grid-area: 1/6; gap: 8px; max-inline-size: none; }
.lw-chase-session .lw-arena-actions :is(button,summary) { min-block-size: 46px; padding: 10px 14px; font-size: 14px; border-color: #9aadc3; background: #244854 !important; box-shadow: 0 3px 0 #0a2638; }
.lw-chase-session .lw-run-hud.is-powered .lw-run-glow { grid-area: 2/1/3/7; margin: 0; padding: 3px 0 0; font-size: 13px; }
.lw-chase-session .lw-map.is-chasing { grid-row: 2; inline-size: 100%; block-size: 100%; min-inline-size: 0; min-block-size: 0; max-block-size: none; aspect-ratio: auto; border: 0; border-radius: 0; background: #102f36; box-shadow: none; }
.lw-chase-session .lw-maze-floor { fill: #102f36; }
.lw-chase-session .lw-maze-wall { fill: #28584a; stroke: #a3c7af; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; filter: none; }
.lw-chase-session .lw-inkberry { fill: #f5cf79; stroke: #f5cf79; filter: drop-shadow(0 2px 0 #061b25); }
.lw-chase-session .lw-glowseed { fill: #c6f7ff; stroke: #73d8ec; filter: drop-shadow(0 0 12px #70d2ed); }
.lw-chase-session .lw-muddle { color: #f3b29c; }
.lw-chase-session .lw-muddle.is-frightened { color: #d8ffe1; }
.lw-chase-session .lw-chase-letter { inline-size: clamp(44px,4vw,72px); block-size: clamp(44px,4vw,72px); color: #f8efff; background: #403453 !important; border-color: #d2bdf3; font-family: "Inter Variable","Noto Sans Arabic Variable",sans-serif !important; }
.lw-chase-session .lw-chase-letter :is(strong,small) { font-family: inherit; }
.lw-chase-session .lw-chase-letter.is-collected { background: #214c41 !important; color: #d2eddf; border-color: #a0c4ae; opacity: .85; }
.lw-chase-session .lw-chase-letter { display: grid; place-items: center; inline-size: clamp(52px,4.8vw,80px); block-size: clamp(52px,4.8vw,80px); padding: 0; border: 0; border-radius: 14px; background: transparent !important; box-shadow: none; color: #fff2c8; }
.lw-treasure-seal { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; filter: drop-shadow(0 3px 0 #18212e); }
.lw-treasure-rim { fill: #e7c173; stroke: #ffe5a3; stroke-width: 1.5; }
.lw-treasure-core { fill: #403453; stroke: #a58bb8; stroke-width: 1; }
.lw-treasure-etch { fill: none; stroke: #c1a1d2; stroke-width: 1.8; stroke-linecap: round; }
.lw-treasure-letters { position: relative; display: flex; align-items: baseline; justify-content: center; gap: 1px; padding-block-end: 3px; }
.lw-chase-session .lw-treasure-letters strong { font-size: clamp(24px,2.6vw,38px); line-height: 1; }
.lw-chase-session .lw-treasure-letters small { font-size: clamp(13px,1.3vw,19px); line-height: 1; }
.lw-treasure-star { position: absolute; inset: -7px -4px auto auto; font-size: 18px; line-height: 1; color: #fff0b2; text-shadow: 0 1px 3px #10232c; }
.lw-treasure-value { position: absolute; inset-inline: 7px; inset-block-end: -5px; display: grid; place-items: center; min-block-size: 15px; border: 1px solid #eccb81; border-radius: 5px; background: #f5d78e; color: #352940; font: 750 clamp(9px,.85vw,12px)/1.2 "Inter Variable",sans-serif; box-shadow: 0 2px 0 #10232c; }
.lw-chase-session .lw-chase-letter.is-collected { background: transparent !important; opacity: .8; }
.lw-chase-letter.is-collected .lw-treasure-rim { fill: #315b4c; stroke: #a0c4ae; stroke-dasharray: 4 3; }
.lw-chase-letter.is-collected .lw-treasure-core { fill: #24483e; stroke: #91b5a1; }
.lw-chase-letter.is-collected :is(.lw-treasure-value,.lw-treasure-star,.lw-treasure-etch) { display: none; }
.lw-chase-session .lw-chase-letter.is-collected::after { position: absolute; inset: -3px -3px auto auto; display: grid; place-items: center; inline-size: 18px; block-size: 18px; border-radius: 50%; background: #c9ecd7; color: #173f34; font: 750 13px/1 sans-serif; }
.lw-capture-reward { display: block; padding: 12px 16px; border: 1px solid #b99646; border-radius: 14px; background: #f7e9bd; color: #49371e; font-size: 15px; font-weight: 700; line-height: 1.5; text-align: center; margin-block: 10px; }
@media (forced-colors: active) {
.lw-treasure-rim { fill: ButtonFace; stroke: ButtonText; }
.lw-treasure-core { fill: ButtonFace; stroke: ButtonText; }
.lw-treasure-etch { stroke: ButtonText; }
.lw-chase-session .lw-chase-letter { color: ButtonText; }
.lw-treasure-value,.lw-capture-reward { background: Canvas; color: CanvasText; border-color: CanvasText; }
}
.lw-chase-session .lw-map-toolbar { position: relative; grid-row: 3; inset: auto; justify-content: center; align-items: center; padding: 10px max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); margin: 0; border: 0; border-block-start: 1px solid #597f91; border-radius: 0; background: #193f45; pointer-events: auto; }
.lw-chase-session .lw-movement { display: flex; flex-wrap: nowrap; justify-content: center; inline-size: auto; gap: 10px; margin: 0; direction: ltr; }
.lw-chase-session .lw-movement button { grid-area: auto; inline-size: clamp(52px,5vw,76px); block-size: 52px; min-inline-size: 48px; min-block-size: 48px; font-size: 25px; border-color: #9dc2d1; background: #2b5261 !important; box-shadow: 0 3px 0 #081c2a; }
.lw-chase-session .lw-movement #lw-interact { background: #4c3b61 !important; border-color: #d3b5e8; color: #fff0cb; }
.lw-chase-session .lw-arena-settings-body { position: fixed; z-index: 30; inset: 74px 16px auto auto; max-block-size: calc(100dvh - 90px); overflow-y: auto; inline-size: min(280px,calc(100dvw - 32px)); background: #203849; border-color: #a9b7ce; }
[dir="rtl"] .lw-chase-session .lw-arena-settings-body { inset-inline: 16px auto; }
.lw-chase-session .lw-arena-settings-body button { background: #30495f !important; color: #f1f5ff; border-color: #9cadc7; }
.lw-chase-session .lw-arena-settings-body input { accent-color: #e5c98b; }
.lw-chase-session .lw-score-popup { font-size: 20px; stroke-width: 3px; }
@media (width < 1200px) and (height > 550px) {
.lw-chase-session .lw-run-hud { grid-template-columns: minmax(0,1fr) auto auto; grid-template-rows: auto auto; gap: 10px 18px; padding: 12px 18px; }
.lw-chase-session .lw-run-heading { grid-area: 1/1; }
.lw-chase-session .lw-run-hearts { grid-area: 1/2; }
.lw-chase-session .lw-arena-actions { grid-area: 1/3; }
.lw-chase-session .lw-run-goals { grid-area: 2/1; }
.lw-chase-session .lw-letter-track { grid-area: 2/2; }
.lw-chase-session .lw-run-score { grid-area: 2/3; justify-content: end; }
.lw-chase-session .lw-run-hud.is-powered .lw-run-glow { grid-area: 3/1/4/4; }
}
@media (width <= 700px) {
.lw-chase-session .lw-run-hud { grid-template-columns: minmax(0,1fr) auto; grid-template-rows: auto auto auto; gap: 10px; padding: max(12px,env(safe-area-inset-top)) 12px 12px; }
.lw-chase-session .lw-run-title { font-size: 19px; }
.lw-chase-session .lw-arena-level { font-size: 11px; }
.lw-chase-session .lw-arena-actions { grid-area: 1/2; gap: 5px; }
.lw-chase-session .lw-arena-actions :is(button,summary) { font-size: 12px; padding: 8px; min-block-size: 44px; }
.lw-chase-session .lw-run-hearts { grid-area: 2/1; }
.lw-chase-session .lw-run-score { grid-area: 2/2; }
.lw-chase-session .lw-run-goals { grid-area: 3/1; gap: 4px 8px; }
.lw-chase-session .lw-run-count { font-size: 11px; }
.lw-chase-session .lw-letter-track { grid-area: 3/2; }
.lw-chase-session .lw-run-hud.is-powered .lw-run-glow { grid-area: 4/1/5/3; }
.lw-chase-session .lw-map-toolbar { padding-block: 10px max(12px,env(safe-area-inset-bottom)); }
.lw-chase-session .lw-movement { gap: 8px; }
.lw-chase-session .lw-movement button { inline-size: 52px; block-size: 50px; }
}
@media (height <= 550px) and (width > 550px) {
.lw-chase-session .lw-map-column { grid-template-columns: 280px minmax(0,1fr); grid-template-rows: minmax(0,1fr) auto; }
.lw-chase-session .lw-run-hud { grid-area: 1/1; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 14px; padding: 12px 16px; border: 0; border-inline-end: 1px solid #6b8d9f; box-shadow: none; }
.lw-chase-session .lw-run-title { font-size: 20px; }
.lw-chase-session .lw-arena-level { font-size: 11px; }
.lw-chase-session .lw-arena-actions { order: 1; justify-content: start; gap: 6px; }
.lw-chase-session .lw-arena-actions :is(button,summary) { font-size: 12px; padding: 8px; min-block-size: 44px; }
.lw-chase-session .lw-run-heading { order: 0; }
.lw-chase-session .lw-run-hearts { order: 2; align-self: start; }
.lw-chase-session .lw-run-goals { order: 3; }
.lw-chase-session .lw-letter-track { order: 4; justify-content: start; }
.lw-chase-session .lw-run-score { order: 5; align-self: start; }
.lw-chase-session .lw-run-score-value { font-size: 22px; }
.lw-chase-session .lw-run-count { font-size: 12px; }
.lw-chase-session .lw-run-hud.is-powered .lw-run-glow { order: 6; padding-block: 0; font-size: 12px; }
.lw-chase-session .lw-map.is-chasing { grid-area: 1/2/3/3; }
.lw-chase-session .lw-map-toolbar { grid-area: 2/1; padding: 8px 12px max(10px,env(safe-area-inset-bottom)); border-inline-end: 1px solid #6b8d9f; }
.lw-chase-session .lw-movement { flex-wrap: nowrap; max-inline-size: none; gap: 6px; }
.lw-chase-session .lw-movement button { min-inline-size: 46px; min-block-size: 46px; inline-size: 46px; block-size: 46px; font-size: 22px; }
.lw-chase-session .lw-arena-settings-body { inset: 76px auto auto 12px; max-block-size: calc(100dvh - 90px); }
[dir="rtl"] .lw-chase-session .lw-arena-settings-body { inset-inline: 12px auto; }
}
@media (height <= 420px) and (width > 550px) {
.lw-chase-session .lw-run-hud { gap: 6px; padding-block: 8px; }
.lw-chase-session .lw-run-score { position: absolute; inset-inline-end: 16px; inset-block-end: 16px; }
.lw-chase-session .lw-map-toolbar { padding-block: 6px 10px; }
}
@media (width <= 360px) {
.lw-chase-session .lw-map-toolbar { padding-inline: 12px; }
.lw-chase-session .lw-movement button { inline-size: 48px; }
}
@media (forced-colors: active) {
.rescue-page .lw-chase-layer[data-world] { --g-letter-bg: Canvas; --g-letter-text: CanvasText; --g-floor: Canvas; --g-wall: Canvas; }
.rescue-page .lw-chase-layer[data-world] .lw-treasure-rim { fill: Canvas; stroke: CanvasText; }
.lw-chase-session .lw-maze-floor { fill: Canvas; }
.lw-chase-session .lw-maze-wall { fill: Canvas; stroke: CanvasText; }
.lw-chase-session :is(.lw-inkberry,.lw-glowseed) { fill: CanvasText; stroke: CanvasText; }
.lw-chase-session .lw-muddle { color: CanvasText; }
.lw-chase-session .lw-chase-letter { background: ButtonFace !important; color: ButtonText; border-color: ButtonText; }
}
:is(button, .btn, summary, select, .select-menu-trigger, .select-menu-panel,
.language-selector, .language-option, .theme-control, .theme-option,
.portfolio-header, .project-card, .skill-group,
.compact-list > li, .tag-pill, .pills > span, .recordings-tags > span,
.section-nav, .section-nav > a, .case-section-nav, .case-section-link,
.case-nav-back-pill, .case-brief, .case-meta-grid, .case-accordion,
.case-callout, .provenance-card, .case-metric-card, .pagination-card,
.walkthrough-step, .comparison-table caption, .comparison-table th,
.case-device-card, .device-carousel-shell, .device-carousel-toolbar,
.recordings-entry, .recordings-hero, .recording-card, .recordings-index,
.contact-invitation, .feedback-card, .device-carousel-feedback,
.connection-notice, .copy-toast, .app-update, .global-audio-player,
.audio-player-feedback, .resume-download-options, dialog,
.skill-dialog-card, .live-embed-bar, .site-footer, .rescue-card,
.rescue-scene, .rescue-option, .rescue-theme, .rescue-locale,
.rescue-scene-task, .rescue-deltas li, .rescue-emblem) {
background-image: var(--card-grain) !important;
background-repeat: repeat;
}
@media (forced-colors: active), (prefers-contrast: more), print {
:root, [data-theme="dark"] { --card-grain: none; }
}
.rescue-page {
color-scheme: light;
--g-page: #fff4d6;
--g-surface: #fff9e9;
--g-soft: #e5efc9;
--g-raised: #f1f5d9;
--g-text: #152b23;
--g-muted: #344b3e;
--g-accent: #164c38;
--g-primary: #174b38;
--g-on-primary: #fffef8;
--g-border: #566f5c;
--g-focus: #794700;
--g-reward-bg: #ffe09a;
--g-reward-text: #493416;
--g-reward-edge: #805b12;
--g-letter-bg: #e8d0ff;
--g-letter-text: #352542;
--g-letter-edge: #725681;
--g-danger: #8c322c;
--g-floor: #fff1cd;
--g-wall: #3e794b;
--g-wall-edge: #17462f;
--g-gold: #79520b;
--g-berry: #9c3f68;
--g-cyan: #00778b;
--g-safe: #225339;
--g-egg: #f8e8bd;
--g-egg-text: #293a24;
--page: var(--g-page);
--surface: var(--g-surface);
--card-surface: var(--g-surface);
--panel: var(--g-surface);
--pill-bg: var(--g-soft);
--text: var(--g-text);
--muted: var(--g-muted);
--blue: var(--g-accent);
--accent: var(--g-accent);
--link-aaa: var(--g-accent);
--focus: var(--g-focus);
--line: var(--g-border);
--border-control: var(--g-border);
--button-bg: var(--g-primary);
--button-text: var(--g-on-primary);
--lw-paper: var(--g-page);
--lw-ink: var(--g-text);
--lw-muted: var(--g-muted);
--lw-green: var(--g-accent);
--lw-line: var(--g-border);
--lw-soft: var(--g-soft);
--lw-gold: var(--g-reward-text);
--card-grain: none;
color: var(--g-text);
background: var(--g-page);
}
html[data-theme="dark"] .rescue-page {
color-scheme: dark;
--g-page: #081f24;
--g-surface: #102d2c;
--g-soft: #183b32;
--g-raised: #193932;
--g-text: #f2f8ed;
--g-muted: #c4d9c7;
--g-accent: #c0ecd1;
--g-primary: #c4ecd3;
--g-on-primary: #152c20;
--g-border: #9ab9a3;
--g-focus: #ffe2a0;
--g-reward-bg: #473512;
--g-reward-text: #ffe3a1;
--g-reward-edge: #e9c77c;
--g-letter-bg: #3a2053;
--g-letter-text: #f4ebff;
--g-letter-edge: #d3bce8;
--g-danger: #ffc6b7;
--g-floor: #0c2832;
--g-wall: #286445;
--g-wall-edge: #a9d37e;
--g-gold: #f8d58a;
--g-berry: #ed94b7;
--g-cyan: #60d3e5;
--g-safe: #c1ecd0;
--g-egg: #3a3020;
--g-egg-text: #fff0c9;
--lw-paper: var(--g-page);
--lw-ink: var(--g-text);
--lw-muted: var(--g-muted);
--lw-green: var(--g-accent);
--lw-line: var(--g-border);
--lw-soft: var(--g-soft);
--lw-gold: var(--g-reward-text);
}
body.rescue-page:is([data-game-route],.lw-chase-session),
.rescue-page :is(.rescue-shell,.rescue-topbar,.lw-topbar) { background-color: var(--g-page); color: var(--g-text); }
.rescue-page :is(dialog,.learning-dialog,.nn-dialog,.nq-dialog,.wt-dialog,.wi-dialog,.arc-campaign-dialog,.arc-images-dialog,.rescue-confirm) { background: var(--g-surface) !important; color: var(--g-text); border-color: var(--g-border); }
.rescue-page dialog::backdrop { background: rgb(4 15 12 / 75%); }
.rescue-page :is(.lw-dialog,.learning-dialog,.nn-dialog,.nq-dialog,.wt-dialog,.wi-dialog) :is(h1,h2,h3,h4,p,label,legend,output,li,dd,dt) { color: var(--g-text); }
.rescue-page :is(.game-room-header,.nq-header,.nq-brand,.lw-dialog-top) :is(h1,h2,h3,strong,span) { color: var(--g-text); }
.rescue-page :is(.lw-eyebrow,.lw-help,.lw-inline-status,.lw-audio-status,.lw-save-status,.game-voice-status,.nn-status,.nn-world-status,.nq-world,.nq-eyebrow,.nq-controls-hint,.lw-keyboard-hint,.lw-fact-copy,.lw-route-preview summary) { color: var(--g-muted); }
.rescue-page :is(.wt-question,.wt-study-card,.wi-question,.wi-task-column,.game-level-status,.game-retry-panel,.nn-counting-frame,.nn-counting-frame .nn-frame-space,.nn-aids,.lw-fact-hint,.lw-trace-scene,.lw-journal-card,.lw-badge-card,.lw-region-card,.lw-goal,.rescue-card,.arc-live-product,.arc-hud>div,.arc-product-mock) { background: var(--g-soft); color: var(--g-text); border-color: var(--g-border); }
.rescue-page :is(.wt-question,.wt-definition,.wt-example,.wt-translation,.wt-collocation,.wi-definition,.wi-feedback,.wt-feedback,.nn-instruction,.nn-feedback,.lw-fact-question,.lw-fact-copy,.lw-word-help,.lw-word-hint,.nn-world-status) { color: var(--g-text); }
.rescue-page :is(.wt-options,.wi-targets,.nn-choices,.lw-fact-options,.lw-match-options) button { background: var(--g-raised) !important; color: var(--g-text); border-color: var(--g-border); }
.rescue-page :is(.lw-button,.lw-icon-button,.lw-arena-exit,.nq-icon,.nq-controls button,.rescue-button,.rescue-option,.arc-control,.arc-answer) { background: var(--g-raised) !important; background-image: none !important; color: var(--g-text); border-color: var(--g-border); }
.rescue-page :is(.lw-button,.nq-controls button,.rescue-button,.arc-control,.arc-answer):not(:disabled):hover { background: var(--g-soft) !important; color: var(--g-text); }
.rescue-page :is(.lw-primary,.nq-panel .lw-primary,.rescue-primary,.btn-primary),
.rescue-page .nq-controls .nq-jump { background: var(--g-primary) !important; color: var(--g-on-primary) !important; border-color: var(--g-border); }
.rescue-page .lw-primary:not(:disabled):hover { background: var(--g-primary) !important; color: var(--g-on-primary) !important; }
.rescue-page :is(button:disabled,a[aria-disabled="true"],.lw-journal-card:disabled) { opacity: 1; border-style: dashed; }
.rescue-page :is(.lw-button:disabled,.nq-controls button:disabled) { color: var(--g-muted); background: var(--g-soft) !important; }
.rescue-page :is(button,a,summary,input,select,textarea):focus-visible { outline: 3px solid var(--g-focus) !important; outline-offset: 3px; box-shadow: 0 0 0 1px var(--g-page); }
.rescue-page :is(input,select,textarea) { color: var(--g-text); background-color: var(--g-surface); border-color: var(--g-border); accent-color: var(--g-accent); caret-color: var(--g-text); }
.rescue-page input::placeholder,.rescue-page textarea::placeholder { color: var(--g-muted); opacity: 1; }
.rescue-page :is(.game-choice-cards,.wt-topic-menu>.game-choice-cards,.nq-settings-panel,.lw-arena-settings-body) { background: var(--g-surface); color: var(--g-text); border-color: var(--g-border); }
.rescue-page .game-choice-card { color: var(--g-text); background: var(--g-raised); border-color: var(--g-border); }
.rescue-page .game-choice-card:has(:checked) { color: var(--g-text); background: var(--g-soft); border-color: var(--g-accent); box-shadow: inset 0 0 0 1px var(--g-accent); }
.rescue-page :is(.nq-settings>summary,.lw-arena-settings>summary,.wt-topic-menu>summary,.game-theme-setting summary) { background: var(--g-raised); color: var(--g-text); border-color: var(--g-border); }
.rescue-page :is(.nq-settings-panel,.lw-arena-settings-body) :is(button,label,span) { color: var(--g-text); background-color: transparent; }
.rescue-page :is(.nq-settings-panel,.lw-arena-settings-body) button { background: var(--g-raised) !important; color: var(--g-text); border-color: var(--g-border); }
.rescue-page :is(.wt-expedition,.nq-mission-strip,.wi-hud,.nn-world,.nn-home,.nn-sanctuary,.nn-arrival,.lw-companion,.lw-rank) { background: var(--g-soft); color: var(--g-text); border-color: var(--g-border); }
.rescue-page :is(.wt-expedition p,.wt-expedition strong,.game-lives,.game-lives-count,.game-level-label,.nq-stats,.nn-home-name,.nn-group-label,.nn-world-trail,.lw-journal-badge,.lw-chase-medal) { color: var(--g-accent); }
.rescue-page .game-life-icons { color: var(--g-danger); }
.rescue-page .game-life.is-spent { color: var(--g-muted); }
.rescue-page :is(.lw-capture-reward,.nq-reward,.arc-mission-stars) { background: var(--g-reward-bg); color: var(--g-reward-text); border-color: var(--g-reward-edge); }
.rescue-page :is(.nq-panel,.nq-overlay .nq-panel,.nq-puzzle-answers [data-quest-answer]) { color: var(--g-text); background: var(--g-surface) !important; border-color: var(--g-border); }
.rescue-page .nq-overlay { background: rgb(4 15 12 / 72%); }
.rescue-page :is(.nq-puzzle-visual,.nq-bridge-builder,.nq-two-nests) { color: var(--g-text); background: var(--g-soft); border-color: var(--g-border); }
.rescue-page .nq-counting-nest { background: var(--g-reward-bg); border-color: var(--g-reward-edge); box-shadow: none; }
.rescue-page :is(.nq-counting-nest h4,.nq-counted,.nq-math-sign) { color: var(--g-reward-text); }
.rescue-page .nq-counting-egg svg path:first-of-type { fill: var(--g-egg); stroke: var(--g-reward-edge); }
.rescue-page .nq-egg-number { color: var(--g-egg-text); }
.rescue-page .nq-panel .nq-plank-slot { background: var(--g-raised) !important; color: var(--g-text); border-color: var(--g-border); }
.rescue-page .nq-panel .nq-plank-slot.is-filled { background: var(--g-reward-bg) !important; color: var(--g-reward-text); border-color: var(--g-reward-edge); box-shadow: 0 3px 0 var(--g-reward-edge); }
.rescue-page .nn-nest { background: var(--g-reward-bg); border-color: var(--g-reward-edge); }
.rescue-page .nn-nest .nn-egg { color: var(--g-egg-text); background: var(--g-egg) !important; border-color: var(--g-reward-edge); }
.rescue-page progress { accent-color: var(--g-accent); color: var(--g-accent); }
.rescue-page :is(.rescue-eyebrow,.rescue-title,.rescue-progress-copy,.rescue-scene-title,.rescue-result-badge,.arc-sector-kicker,.arc-plan-status,.arc-product-label) { color: var(--g-accent); }
.rescue-page.lw-chase-session :is(.lw-run-hud,.lw-map-toolbar) { background: var(--g-surface); color: var(--g-text); border-color: var(--g-border); }
.rescue-page.lw-chase-session :is(.lw-run-title,.lw-run-count,.lw-run-score-value,.lw-chase-overlay strong) { color: var(--g-text); }
.rescue-page.lw-chase-session :is(.lw-arena-level,.lw-run-label,.lw-run-glow span) { color: var(--g-muted); }
.rescue-page.lw-chase-session :is(.lw-arena-actions button,.lw-arena-actions summary,.lw-movement button) { background: var(--g-raised) !important; color: var(--g-text); border-color: var(--g-border); }
.rescue-page.lw-chase-session .lw-movement #lw-interact { background: var(--g-letter-bg) !important; color: var(--g-letter-text); border-color: var(--g-letter-edge); }
.rescue-page.lw-chase-session .lw-maze-floor { fill: var(--g-floor); }
.rescue-page.lw-chase-session .lw-maze-wall { fill: var(--g-wall); stroke: var(--g-wall-edge); }
.rescue-page.lw-chase-session .lw-inkberry { fill: var(--g-berry); stroke: var(--g-berry); filter: none; }
.rescue-page.lw-chase-session .lw-glowseed { fill: var(--g-cyan); stroke: var(--g-cyan); filter: none; }
.rescue-page.lw-chase-session .lw-muddle { color: var(--g-danger); }
.rescue-page.lw-chase-session .lw-muddle.is-frightened { color: var(--g-safe); }
.rescue-page.lw-chase-session .lw-letter-chip:not(.is-collected) { color: var(--g-letter-text); background: var(--g-letter-bg); border-color: var(--g-letter-edge); }
.rescue-page.lw-chase-session .lw-chase-letter { color: var(--g-letter-text); }
.rescue-page .lw-treasure-rim { fill: var(--g-reward-bg); stroke: var(--g-reward-edge); }
.rescue-page .lw-treasure-core { fill: var(--g-letter-bg); stroke: var(--g-letter-edge); }
.rescue-page .lw-treasure-etch { stroke: var(--g-letter-edge); }
.rescue-page .lw-treasure-value { background: var(--g-reward-bg); color: var(--g-reward-text); border-color: var(--g-reward-edge); }
.rescue-page .lw-treasure-star { color: var(--g-gold); text-shadow: none; }
.rescue-page .lw-chase-letter.is-collected { color: var(--g-text); opacity: 1; }
.rescue-page .lw-chase-letter.is-collected .lw-treasure-core { fill: var(--g-soft); stroke: var(--g-border); }
.rescue-page .lw-chase-letter.is-collected .lw-treasure-rim { fill: var(--g-soft); stroke: var(--g-accent); }
.rescue-page.lw-chase-session .lw-chase-overlay { background: var(--g-page); backdrop-filter: none; }
.rescue-page.lw-chase-session .lw-chase-overlay .lw-primary { background: var(--g-primary) !important; color: var(--g-on-primary); border-color: var(--g-border); }
.rescue-page .lw-score-popup { fill: var(--g-text); stroke: var(--g-page); }
.game-theme-setting { margin: 8px 0; padding: 0; border: 0; min-inline-size: 0; color: var(--g-text); }
.game-theme-setting legend { font-size: 13px; font-weight: 650; margin-block-end: 6px; }
.game-theme-options { display: flex; gap: 6px; }
.game-theme-options label { display: flex; align-items: center; justify-content: center; gap: 8px; min-block-size: 44px; padding: 8px 12px; border: 1px solid var(--g-border); border-radius: 10px; background: var(--g-raised); color: var(--g-text); cursor: pointer; font-size: 13px; flex: 1; }
.game-theme-options label:has(:checked) { outline: 1px solid var(--g-accent); outline-offset: -2px; background: var(--g-soft); }
.game-theme-options input { inline-size: 18px; block-size: 18px; margin: 0; }
.game-appearance-menu { position: relative; }
.game-appearance-menu>summary { min-block-size: 44px; padding: 8px 14px; border: 1px solid var(--g-border); border-radius: 10px; color: var(--g-text); background: var(--g-raised); cursor: pointer; font-size: 13px; }
.game-appearance-menu .game-theme-setting { position: absolute; inset: 46px 0 auto auto; inline-size: 240px; z-index: 40; border: 1px solid var(--g-border); border-radius: 12px; padding: 12px; background: var(--g-surface); box-shadow: 0 8px 24px rgb(0 0 0 / 20%); }
.wt-topic-menu .game-settings-panel { position: absolute; inset: 46px 0 auto auto; z-index: 40; inline-size: min(360px,calc(100dvw - 32px)); padding: 16px; border: 1px solid var(--g-border); border-radius: 14px; background: var(--g-surface); color: var(--g-text); box-shadow: 0 8px 24px rgb(0 0 0 / 20%); }
.wt-topic-menu .game-settings-panel > .game-choice-cards { position: static; inline-size: auto; margin: 0 0 12px; padding: 0; border: 0; box-shadow: none; }
.wt-topic-menu .game-settings-panel .game-theme-setting { position: static; inline-size: auto; }
@media (forced-colors: active) {
.rescue-page { --g-page: Canvas; --g-surface: Canvas; --g-soft: Canvas; --g-raised: ButtonFace; --g-text: CanvasText; --g-muted: CanvasText; --g-accent: LinkText; --g-primary: ButtonFace; --g-on-primary: ButtonText; --g-border: CanvasText; --g-focus: Highlight; }
.rescue-page .lw-treasure-core,.rescue-page .lw-treasure-rim { fill: Canvas; stroke: CanvasText; }
.rescue-page .lw-chase-letter { color: ButtonText; }
}
@media (hover: hover) {
.rescue-page :is(button,a,summary,.game-choice-card,.game-theme-options label):not(:disabled):hover { text-decoration: underline; text-underline-offset: .2em; border-color: var(--g-accent); }
.rescue-page button:not(:disabled):hover { box-shadow: inset 0 0 0 1px var(--g-accent); }
}
.rescue-page :is(button,summary):not(:disabled):active { box-shadow: inset 0 0 0 2px var(--g-accent); }
.rescue-page :is(button,a,summary,label):has(input:focus-visible) { outline: 3px solid var(--g-focus); outline-offset: 3px; }
.rescue-page :is(button:disabled,[aria-disabled="true"]) { cursor: not-allowed; }
.rescue-page :is(.game-theme-options,.game-choice-options) label:has(:checked)::after { content: "✓"; font-weight: 800; }
@media (prefers-reduced-motion: reduce) {
.rescue-page *, .rescue-page *::before, .rescue-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.rescue-page .ks-cover { color: var(--g-letter-text); background: var(--g-letter-bg); }
.ks-cover svg { block-size: 120px; inline-size: 160px; }
body.rescue-page .ks-dialog[open] { display: flex; flex-direction: column; gap: 12px; inline-size: 100%; max-inline-size: none; block-size: 100dvh; max-block-size: none; margin: 0; padding: clamp(12px,2vw,24px); border: 0; border-radius: 0; overflow: hidden auto; box-sizing: border-box; text-align: start; }
.ks-dialog * { box-sizing: border-box; }
.rescue-page .ks-dialog .ks-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: nowrap; margin: 0; }
.ks-brand { min-inline-size: 0; }
.ks-brand .lw-eyebrow { margin: 0 0 4px; font-size: 11px; }
.rescue-page .ks-brand h2 { font-size: clamp(21px,3vw,30px); line-height: 1.2; margin: 0; }
.ks-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: end; }
.ks-actions :is(button,summary) { min-block-size: 44px; padding: 8px 12px; font-size: 14px; }
.ks-settings { position: relative; }
.ks-settings>summary { border: 1px solid var(--g-border); border-radius: 12px; background: var(--g-raised); color: var(--g-text); cursor: pointer; }
.ks-settings-panel { position: absolute; inset: 52px 0 auto auto; z-index: 30; inline-size: min(320px,calc(100dvw - 24px)); max-block-size: calc(100dvh - 100px); overflow-y: auto; padding: 16px; border: 1px solid var(--g-border); border-radius: 14px; color: var(--g-text); background: var(--g-surface); box-shadow: 0 12px 28px rgb(0 0 0 / 20%); }
.rescue-page .ks-dialog .ks-settings-panel .game-voice-toggle { position: static; margin: 0; min-block-size: 44px; font-size: 14px; }
.ks-how { font-size: 14px; line-height: 1.7; }
.ks-status-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; border-block: 1px solid var(--g-border); padding-block: 10px; }
.rescue-page .ks-dialog .ks-hud { padding: 0; margin: 0; font-size: 15px; max-inline-size: none; color: var(--g-text); background: none; }
.rescue-page .ks-dialog .wi-life-hud { position: static; margin: 0; }
.ks-dialog .game-lives { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rescue-page .ks-dialog .game-life { inline-size: 22px; block-size: 22px; }
.ks-content { flex: 1; min-block-size: 0; display: grid; grid-template-columns: minmax(220px,.85fr) minmax(0,1.7fr); grid-template-rows: 1fr auto auto; gap: 12px 24px; align-items: center; }
.ks-task { grid-area: 1/1; padding: clamp(16px,2vw,28px); border: 1px solid var(--g-border); border-radius: 20px; background: var(--g-soft); }
.ks-task .lw-eyebrow { font-size: 12px; line-height: 1.5; }
.rescue-page .ks-dialog .ks-prompt { font-size: clamp(20px,2.5vw,32px) !important; line-height: 1.5; margin: 10px 0; color: var(--g-text); }
.ks-instruction { margin-block: 10px 0; font-size: 15px; line-height: 1.6; }
.ks-picture { inline-size: 70px; margin-block-end: 12px; }
.ks-picture svg { display: block; inline-size: 100%; }
.ks-sky { grid-area: 1/2/4/3; align-self: stretch; min-block-size: 220px; display: flex; flex-direction: column; justify-content: center; gap: 24px; padding: clamp(12px,2vw,28px); border-radius: 24px; border: 1px solid var(--g-border); background: var(--g-letter-bg); }
.rescue-page .ks-books { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(8px,1.5vw,20px); margin: 0; }
.rescue-page .ks-books .ks-book { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-inline-size: 0; padding: clamp(10px,2vw,24px) 8px; min-block-size: 150px; background: var(--g-surface) !important; color: var(--g-text); border: 2px solid var(--g-letter-edge); border-radius: 18px; box-shadow: 0 5px 0 var(--g-letter-edge); }
.ks-book-art { display: block; inline-size: clamp(48px,9vw,110px); color: var(--g-letter-text); }
.ks-book-art svg { inline-size: 100%; display: block; }
.ks-book-word { font-size: clamp(20px,2.5vw,30px); line-height: 1.3; overflow-wrap: anywhere; }
.ks-book-action { font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.ks-books .ks-book[data-incorrect] { border-style: dashed; }
.ks-books .ks-book[data-incorrect] .ks-book-action { text-decoration: line-through; }
.ks-glider { inline-size: 150px; align-self: center; color: var(--g-letter-text); }
.ks-glider svg { inline-size: 100%; display: block; }
.rescue-page .ks-dialog .ks-feedback { grid-area: 2/1; min-block-size: 0; font-size: 15px; line-height: 1.6; margin: 0; }
.ks-tools { grid-area: 3/1; display: flex; flex-wrap: wrap; gap: 8px; }
.ks-tools button { min-block-size: 44px; font-size: 14px; padding: 8px 12px; }
.ks-library { border-block-start: 1px solid var(--g-border); padding-block-start: 10px; display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; font-size: 14px; }
.ks-library progress { inline-size: 110px; block-size: 10px; }
.ks-shelf-books { display: flex; flex-wrap: wrap; gap: 5px; flex: 1 1 200px; }
.ks-spine { padding: 4px 8px; border-inline-start: 3px solid var(--g-reward-edge); border-radius: 3px; background: var(--g-reward-bg); color: var(--g-reward-text); font-size: 13px; }
.ks-collected,.ks-content>.game-retry-panel { grid-column: 1/-1; grid-row: 1/-1; justify-self: center; text-align: center; max-inline-size: 660px; padding: 24px; }
.ks-book-seal { color: var(--g-reward-text); background: var(--g-reward-bg); border: 2px solid var(--g-reward-edge); border-radius: 50%; inline-size: 110px; padding: 16px; margin: 0 auto 14px; }
.ks-book-seal svg { display: block; inline-size: 100%; }
.ks-collected h3 { font-size: clamp(22px,3vw,32px); line-height: 1.4; }
.ks-example { font-size: 20px; line-height: 1.6; }
.ks-points { font-size: 20px; font-weight: 750; }
.ks-content:has(>.ks-collected),.ks-content:has(>.game-retry-panel),.ks-content:not(:has(.ks-task)) { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; }
@media (width <= 640px) {
body.rescue-page .ks-dialog[open] { gap: 10px; padding: 12px; }
.ks-brand .lw-eyebrow { display: none; }
.rescue-page .ks-dialog .ks-header { flex-wrap: wrap; gap: 8px; }
.ks-actions { gap: 6px; }
.ks-actions :is(button,summary) { font-size: 13px; padding: 8px 10px; }
.ks-status-bar { padding-block: 8px; }
.rescue-page .ks-dialog .ks-hud { font-size: 14px; }
.ks-content { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 10px; flex: 1 0 auto; }
.ks-task { padding: 12px 14px; position: relative; }
.ks-task .lw-eyebrow { margin: 0; font-size: 11px; }
.rescue-page .ks-dialog .ks-prompt { font-size: 21px !important; margin-block: 6px; }
.ks-instruction { font-size: 14px; margin-block: 4px 0; }
.ks-picture { inline-size: 46px; float: inline-end; margin: 0 0 8px 12px; }
.ks-sky { min-block-size: 0; padding: 12px; gap: 6px; }
.rescue-page .ks-books .ks-book { min-block-size: 118px; gap: 4px; padding: 8px 5px; border-radius: 12px; }
.ks-book-art { inline-size: 48px; }
.ks-book-word { font-size: 20px; }
.ks-book-action { font-size: 12px; }
.ks-glider { inline-size: 70px; }
.ks-tools { justify-content: center; }
.ks-library { font-size: 13px; }
.ks-shelf-books { flex-basis: 100%; }
}
@media (height <= 500px) and (width > 640px) {
body.rescue-page .ks-dialog[open] { gap: 6px; padding: 8px 16px; }
.ks-brand .lw-eyebrow,.ks-glider,.ks-book-action,.ks-picture { display: none; }
.rescue-page .ks-brand h2 { font-size: 22px; }
.ks-status-bar { padding-block: 4px; }
.ks-content { gap: 6px 16px; }
.ks-task { padding: 10px 14px; }
.ks-task .lw-eyebrow { margin: 0; }
.rescue-page .ks-dialog .ks-prompt { font-size: 20px !important; margin-block: 4px; }
.ks-sky { min-block-size: 130px; padding: 12px; }
.rescue-page .ks-books .ks-book { min-block-size: 120px; padding: 10px 6px; }
.ks-book-art { inline-size: 50px; }
.ks-collected { padding: 8px; }
.ks-book-seal { display: none; }
.ks-collected :is(h3,p) { margin: 4px; }
.ks-library { padding-block-start: 6px; }
}
@media (forced-colors: active) {
html[data-theme] .rescue-page { --g-page: Canvas; --g-surface: Canvas; --g-soft: Canvas; --g-raised: ButtonFace; --g-text: CanvasText; --g-muted: CanvasText; --g-accent: LinkText; --g-primary: ButtonFace; --g-on-primary: ButtonText; --g-border: CanvasText; --g-focus: Highlight; --g-reward-bg: Canvas; --g-reward-text: CanvasText; --g-reward-edge: CanvasText; --g-letter-bg: Canvas; --g-letter-text: CanvasText; --g-letter-edge: CanvasText; }
}
body.rescue-page[data-game-route] :is(.wt-dialog,.wi-dialog,.nn-dialog) { color: var(--g-text); }
.rescue-page .nn-home-name { color: var(--g-reward-text); background: var(--g-reward-bg); }
.rescue-page .theme-option[aria-checked="true"] { color: var(--g-on-primary); background: var(--g-primary); }
.rescue-page :is(.theme-option[aria-checked="true"],.btn-primary) span { color: inherit; }
.rescue-page .ks-dialog .ks-hud { border: 0; }
@media (width <= 640px) and (height <= 700px) {
.rescue-page .ks-glider { display: none; }
.rescue-page .ks-actions { inline-size: 100%; flex-wrap: nowrap; }
.rescue-page .ks-actions > :is(button,details) { flex: 1 1 0; min-inline-size: 0; }
.rescue-page .ks-actions :is(button,summary) { inline-size: 100%; }
}
.rescue-page .language-option:has(input:checked) { color: var(--g-on-primary); background: var(--g-primary); }
.rescue-page .language-option:has(input:checked)>span { color: var(--g-on-primary); }
.rescue-page .btn-secondary { color: var(--g-text); background: var(--g-raised); border-color: var(--g-border); }
.rescue-page .btn-primary { color: var(--g-on-primary); background: var(--g-primary); border-color: var(--g-border); }
@media (width <= 640px) {
.ks-settings-panel { position: fixed; inset: 112px 12px auto; inline-size: auto; max-block-size: calc(100dvh - 136px); }
}
@media (prefers-reduced-motion: reduce) {
.rescue-page :is(.lw-button,.nn-egg):active { transform: none; }
.rescue-page :is(.lw-letter-node,.lw-book-node):hover { transform: translate(-50%,-50%); }
.rescue-page .nn-egg:hover { transform: none; }
}
.rescue-page :is(button.lw-primary,button.rescue-primary,button.btn-primary,button.nq-jump):not(:disabled):hover { color: var(--g-on-primary) !important; background: var(--g-primary) !important; }
.rescue-page :is(button.lw-primary,button.rescue-primary,button.btn-primary,button.nq-jump):disabled { color: var(--g-muted) !important; background: var(--g-soft) !important; }
.rescue-page .lw-letter-node,.rescue-page .lw-book-node { color: var(--g-letter-text); background: var(--g-letter-bg) !important; border-color: var(--g-letter-edge); opacity: 1; }
.rescue-page :is(.lw-letter-node,.lw-book-node):is(.is-collected,.is-locked) { color: var(--g-text); background: var(--g-soft) !important; border-color: var(--g-border); opacity: 1; }
.rescue-page .lw-place { color: var(--g-text); background: var(--g-surface); }
.rescue-page .lw-node-check { color: var(--g-on-primary); background: var(--g-primary); }
.rescue-page :is(.btn-primary,.rescue-primary,.lw-primary):not(:disabled):is(:hover,:focus-visible,:active) { color: var(--g-on-primary) !important; background: var(--g-primary) !important; background-image: none !important; }
.rescue-page :is(.btn-secondary,.theme-option[aria-checked="false"]):not(:disabled):is(:hover,:focus-visible,:active) { color: var(--g-text) !important; background: var(--g-soft) !important; background-image: none !important; }
.rescue-page .theme-option[aria-checked="true"]:is(:hover,:focus-visible,:active),.rescue-page .language-option:has(input:checked):is(:hover,:active) { color: var(--g-on-primary) !important; background: var(--g-primary) !important; }
.rescue-page .theme-option>span,.rescue-page .language-option>span { color: inherit !important; }
.wt-topic-menu .game-settings-panel,.game-appearance-menu .game-theme-setting,.lw-arena-settings-body,.nq-settings-panel { inset-inline: auto 0; }
@media (width > 640px) { .ks-settings-panel { inset-inline: auto 0; } }
@media (width <= 400px) and (height <= 700px) {
body.rescue-page .ks-dialog[open] { gap: 7px; padding-block: 10px; }
.ks-dialog .ks-status-bar { padding-block: 6px; }
.ks-dialog .ks-content { gap: 7px; }
.ks-dialog .ks-task { padding: 10px 12px; }
.ks-dialog .ks-task>.lw-eyebrow { padding-inline-end: 38px; }
.ks-dialog .ks-picture { position: absolute; inset-block-start: 10px; inset-inline-end: 12px; inline-size: 30px; margin: 0; }
.ks-dialog .ks-sky { padding: 10px; gap: 0; }
.rescue-page .ks-dialog .ks-books .ks-book { min-block-size: 106px; padding-block: 7px; }
.ks-dialog .ks-book-art { inline-size: 40px; }
.ks-dialog .ks-glider { display: none; }
.ks-dialog .ks-library { gap: 5px 12px; padding-block-start: 8px; }
}
.rescue-page .lw-run-title { margin: 0; }
.rescue-page .ks-bank-label { margin: 3px 0; font-size: 13px; color: var(--g-muted); }
.rescue-page :is(.ks-due-review,.ks-review-offer) { grid-column: 1 / -1; inline-size: min(100%,650px); justify-self: center; }
.rescue-page .ks-review-choices { display: flex; flex-wrap: wrap; gap: 10px; margin-block: 12px; }
.rescue-page .ks-review-sentence { font-size: 20px; line-height: 1.6; }
.rescue-page .game-continue { padding: 16px; border: 1px solid var(--g-border); border-radius: 16px; margin-block: 16px; color: var(--g-text); background: var(--g-soft); }
.rescue-page .game-continue h2 { font-size: 20px; }
.rescue-page .game-continue-links { display: flex; flex-wrap: wrap; gap: 8px; }
.rescue-page :is(.wt-sentence-practice,.arc-transfer) { margin-block: 16px; padding: 12px; color: var(--g-text); background: var(--g-soft); border: 1px solid var(--g-border); border-radius: 12px; }
.rescue-page :is(.wt-sentence-practice,.arc-transfer) > summary { min-block-size: 44px; padding: 10px; cursor: pointer; }
.rescue-page :is(.wt-sentence-practice,.arc-transfer) p { line-height: 1.6; }
.rescue-page :is(.wt-sentence-practice,.rescue-reason-label) textarea { box-sizing: border-box; inline-size: 100%; min-block-size: 88px; padding: 12px; color: var(--g-text); background: var(--g-surface); border: 1px solid var(--g-border); border-radius: 8px; font: inherit; }
.rescue-page .decision-scenarios { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 16px; padding: 12px; border: 1px solid var(--g-border); }
.rescue-page .decision-scenarios label { min-block-size: 44px; padding: 8px; display: flex; align-items: center; gap: 8px; }
.rescue-page :is(.rescue-scenario-goal,.rescue-reason-label) { display: block; margin-block: 12px; }
.rescue-page .nn-egg.nn-seed { border-radius: 50%; background: #cfad59; aspect-ratio: 1; }
@media (forced-colors: active) {
.rescue-page .nn-egg.nn-seed { background: Canvas; color: CanvasText; border-color: CanvasText; }
}
.inkberry-only #lw-game:not(:has(.lw-chase-layer)) { display: none; }
.rescue-page :is(.game-learning-progress,.game-rehearsal,.wt-story,.ks-restoration,.arc-mission-rehearsal,.lw-muddle-guide) { min-inline-size: 0; max-inline-size: 100%; color: var(--g-text); text-align: start; }
.rescue-page :is(.game-learning-progress,.game-rehearsal,.wt-story,.ks-restoration,.arc-mission-rehearsal,.lw-muddle-guide) > summary { display: list-item; box-sizing: border-box; min-block-size: 44px; padding: 10px 12px; border: 1px solid var(--g-border); border-radius: 10px; background: var(--g-raised); color: var(--g-text); font-size: 14px; line-height: 1.5; cursor: pointer; }
.rescue-page :is(.game-learning-progress,.game-rehearsal,.wt-story,.ks-restoration,.arc-mission-rehearsal,.lw-muddle-guide) > summary:hover { color: var(--g-text); background: var(--g-soft); }
.rescue-page :is(.game-learning-progress,.game-rehearsal,.wt-story,.ks-restoration,.arc-mission-rehearsal,.lw-muddle-guide) > summary:focus-visible { outline: 3px solid var(--g-focus); outline-offset: 3px; }
.rescue-page :is(.game-learning-progress,.game-rehearsal,.wt-story,.ks-restoration,.arc-mission-rehearsal,.lw-muddle-guide)[open] { padding-block-end: 12px; background: var(--g-surface); color: var(--g-text); }
.rescue-page .game-learning-progress dl { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 16px; padding: 12px; margin: 0; }
.rescue-page .game-learning-progress :is(dt,dd) { margin: 0; font-size: 14px; line-height: 1.5; }
.rescue-page :is(.game-learning-progress,.game-rehearsal,.wt-story,.ks-restoration,.arc-mission-rehearsal,.lw-muddle-guide) p { margin: 12px; font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.rescue-page .game-story-stones { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; }
.rescue-page .game-story-stones span { flex: 1 1 90px; padding: 8px; border: 2px dashed var(--g-border); border-radius: 8px; color: var(--g-text); background: var(--g-surface); font-size: 14px; line-height: 1.5; }
.rescue-page .game-story-stones .is-restored { color: var(--g-reward-text); background: var(--g-reward-bg); border-style: solid; border-color: var(--g-reward-edge); }
.rescue-page .ks-restoration { grid-column: 1/-1; }
.rescue-page .ks-restoration:not([open]) > summary { min-block-size: 44px; padding-block: 10px; }
.rescue-page .ks-typed-form { padding: 12px; background: var(--g-soft); color: var(--g-text); }
.rescue-page .ks-typed-form[hidden],.rescue-page .ks-books[hidden],.rescue-page .nq-worked-example[hidden] { display: none; }
.rescue-page .ks-tools { flex-wrap: wrap; }
.rescue-page .ks-tools button { min-block-size: 44px; }
.rescue-page .nq-worked-example { grid-column: 1/-1; padding: 12px; border: 2px solid var(--g-border); border-radius: 12px; background: var(--g-soft); color: var(--g-text); }
.rescue-page .nq-worked-example p { font-size: 15px; line-height: 1.6; }
.rescue-page .ks-world-change { font-size: 15px; line-height: 1.5; }
.rescue-page .wt-story { margin-block-start: 8px; }
.rescue-page .wt-dialog .game-room-preferences { flex-wrap: wrap; align-items: start; }
.rescue-page .wt-dialog .game-room-preferences > .game-voice-toggle { flex: 0 0 auto; max-inline-size: 100%; }
.rescue-page .wt-dialog .game-room-preferences > .wt-topic-menu { flex: 0 0 auto; }
.rescue-page .wt-dialog .game-room-preferences > .game-learning-progress { flex: 1 0 100%; inline-size: 100%; }
.rescue-page .wt-topic-menu .game-learning-progress { inline-size: 100%; margin-block: 10px; }
@media (width <= 400px) and (height <= 700px) {
.rescue-page .wt-expedition > svg { display: none; }
.rescue-page .wt-story { margin-block-start: 4px; }
.rescue-page .wt-dialog .wt-expedition { margin-block: 4px; padding-block: 4px; }
.rescue-page .wt-dialog .wt-study-card { margin-block: 4px; padding-block: 8px; }
}
@media (forced-colors: active) {
.rescue-page :is(.game-story-stones span,.nq-worked-example,.ks-typed-form) { color: CanvasText; background: Canvas; border-color: CanvasText; }
.rescue-page .game-story-stones .is-restored { color: CanvasText; background: Canvas; border-color: Highlight; }
}
.rescue-page .ks-sky[hidden] { display: none; }
.rescue-page .ks-typed-form { grid-area: 1/2/4/3; }
.rescue-page .ks-restoration { flex: 1 1 220px; }
.rescue-page .ks-library:has(.ks-restoration:not([open])) progress { display: none; }
@media (width <= 700px) {
.rescue-page .ks-typed-form { grid-area: auto; }
}
.rescue-page .wt-topic-menu .game-settings-panel { max-block-size: min(72dvh,calc(100dvh - 130px)); overflow-y: auto; overscroll-behavior: contain; }
.rescue-page { --g-meadow: #c1dd92; --g-canopy: #669953; --g-pine: #337c60; --g-tree-edge: #365f3a; --g-stream: #56bdc8; --g-stream-edge: #246f78; --g-timber: #d9b77c; --g-timber-edge: #77572f; }
html[data-theme="dark"] .rescue-page { --g-meadow: #224934; --g-canopy: #39724d; --g-pine: #2f6752; --g-tree-edge: #97bd83; --g-stream: #347f8a; --g-stream-edge: #7fc4c3; --g-timber: #997140; --g-timber-edge: #ead29a; }
.rescue-page .lw-storybook-scenery { pointer-events: none; }
.rescue-page .lw-story-meadow { fill: var(--g-meadow); }
.rescue-page .lw-story-grass { fill: none; stroke: var(--g-tree-edge); stroke-width: 1; opacity: .2; }
.rescue-page .lw-storybook-scenery .lw-canopy { filter: none; }
.rescue-page .lw-storybook-scenery .lw-leaf { fill: var(--g-canopy); stroke: var(--g-tree-edge); stroke-width: 1.5; }
.rescue-page .lw-storybook-scenery .lw-pine { fill: var(--g-pine); stroke: var(--g-tree-edge); stroke-width: 1; }
.rescue-page .lw-story-path-marks { fill: #aa874d; opacity: .45; }
.rescue-page .lw-story-water path { fill: none; stroke-linecap: round; }
.rescue-page .lw-story-bank { stroke: var(--g-meadow); stroke-width: calc(var(--story-unit,64px)*.42); }
.rescue-page .lw-story-stream { stroke: var(--g-stream); stroke-width: calc(var(--story-unit,64px)*.26); }
.rescue-page .lw-story-ripple { stroke: #d5f3df; stroke-width: 1.5; stroke-dasharray: 8 72; opacity: .7; }
.rescue-page .lw-story-bridge rect { fill: var(--g-timber); stroke: var(--g-timber-edge); stroke-width: 1.5; }
.rescue-page .lw-story-plank { fill: none; stroke: var(--g-timber-edge); stroke-width: 1; }
.rescue-page .lw-story-rail { fill: none; stroke: var(--g-timber-edge); stroke-width: 3; stroke-linecap: round; }
.rescue-page .lw-story-boundary { stroke: var(--g-wall-edge); stroke-width: 2; }
.rescue-page .lw-story-mushroom path:first-child { fill: #fff1d1; stroke: #79503d; stroke-width: 1; }
.rescue-page .lw-story-mushroom path:nth-child(2) { fill: #bd7154; stroke: #79503d; stroke-width: 1; }
.rescue-page .lw-story-mushroom circle { fill: #ffdfad; }
.rescue-page.lw-chase-session .lw-inkberry { stroke: var(--g-floor); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
@media (forced-colors: active) {
.rescue-page .lw-storybook-scenery { display: none; }
}
.rescue-page.lw-chase-session .lw-map.is-chasing { background: var(--g-meadow); }
.rescue-page .lw-chase-layer { overflow: hidden; }
.rescue-page .lw-chase-letter[hidden] { display: none !important; }
.rescue-page .lw-berry-leaf { fill: var(--g-canopy); stroke: var(--g-tree-edge); stroke-width: 1; }
.rescue-page .lw-garden-map-button { position: absolute; z-index: 7; inset-inline-end: 12px; inset-block-end: 12px; display: grid; justify-items: center; gap: 6px; min-inline-size: 112px; min-block-size: 56px; padding: 8px 12px; border: 2px solid var(--g-border); border-radius: 16px; color: var(--g-text); background: var(--g-surface); font: 650 13px/1.3 "Inter Variable","Noto Sans Arabic Variable",sans-serif; box-shadow: 0 3px 0 rgb(16 42 32 / 20%); cursor: pointer; }
.rescue-page .lw-garden-map-button:hover { color: var(--g-text); background: var(--g-soft); }
.rescue-page .lw-garden-map-button:focus-visible { outline: 3px solid var(--g-focus); outline-offset: 3px; }
.rescue-page .lw-garden-map-button[aria-pressed="true"] { border-color: var(--g-accent); }
.rescue-page .lw-garden-room-dots { display: flex; gap: 10px; }
.rescue-page .lw-garden-room-dots i { inline-size: 12px; block-size: 12px; border-radius: 50%; border: 2px solid var(--g-border); background: var(--g-surface); }
.rescue-page .lw-garden-room-dots .is-visited { background: var(--g-soft); }
.rescue-page .lw-garden-room-dots .is-current { background: var(--g-primary); outline: 2px solid var(--g-accent); outline-offset: 2px; }
@media (forced-colors: active) {
.rescue-page .lw-garden-map-button { color: ButtonText; background: ButtonFace; border-color: ButtonText; }
.rescue-page .lw-garden-room-dots .is-current { background: Highlight; }
}
.rescue-page.lw-chase-session .lw-maze-wall { stroke: none; }
.rescue-page .lw-story-trail-edge,.rescue-page .lw-story-trail { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.rescue-page .lw-story-trail-edge { stroke: #a98a4f; stroke-width: 78; }
.rescue-page .lw-story-trail { stroke: var(--g-floor); stroke-width: 74; }
html[data-theme="dark"] .rescue-page .lw-story-trail-edge { stroke: #90ad79; }
.rescue-page.lw-chase-session .lw-letter-chip { display: inline-grid; place-items: center; min-inline-size: 44px; min-block-size: 44px; padding: 4px; cursor: pointer; font: 750 17px/1 "Inter Variable",sans-serif; }
.rescue-page.lw-chase-session .lw-letter-chip:not(.is-collected):hover { background: var(--g-letter-bg); color: var(--g-letter-text); outline: 2px solid var(--g-letter-edge); outline-offset: 1px; }
.rescue-page.lw-chase-session .lw-letter-chip:focus-visible { outline: 3px solid var(--g-focus); outline-offset: 3px; }
.rescue-page .lw-garden-map-button { border-width: 1px; min-block-size: 48px; border-radius: 12px; }
@media (forced-colors: active) {
.rescue-page.lw-chase-session .lw-maze-wall { stroke: CanvasText; }
}
.rescue-page .lw-storybook-scenery { fill: none; }
.rescue-page .lw-story-trail-edge { stroke: var(--g-floor); }
html[data-theme="dark"] .rescue-page .lw-story-trail-edge { stroke: var(--g-floor); }
.rescue-page .lw-story-forest .lw-canopy { filter: drop-shadow(0 3px 0 rgb(22 58 32 / 10%)); }
.rescue-page.lw-chase-session .lw-run-hud.is-powered .lw-run-glow span { color: var(--g-muted); font-size: 12px; }
.rescue-page.lw-chase-session .lw-run-goals { max-inline-size: 320px; }
.rescue-page.lw-chase-session .lw-next-objective { font-size: 13px; line-height: 1.4; font-weight: 750; }
.rescue-page.lw-chase-session .lw-run-hud .lw-letter-chip.is-next-goal { outline: 2px solid var(--g-letter-edge); outline-offset: 2px; }
.rescue-page .lw-letter-track { flex-wrap: wrap; gap: 8px; }
.rescue-page .lw-muddle-role { fill: var(--g-floor); stroke: var(--g-danger); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.rescue-page .lw-energy-ring { stroke: var(--g-cyan); stroke-width: 4; stroke-linecap: round; }
.rescue-page.lw-chase-session .lw-run-hud.is-powered .lw-run-glow { gap: 10px; border: 0; }
.rescue-page.lw-chase-session .lw-run-hud.is-powered .lw-run-glow span { min-inline-size: 0; font-size: 12px; }
.rescue-page .lw-garden-map-button { max-inline-size: 190px; }
@media (width <= 700px) {
.rescue-page.lw-chase-session .lw-run-hud { gap: 8px 10px; }
.rescue-page.lw-chase-session .lw-run-hud.is-powered .lw-run-glow { grid-area: 3/1; display: grid; grid-template-columns: minmax(0,1fr); gap: 3px; margin: 0; padding: 0; }
.rescue-page.lw-chase-session .lw-run-hud.is-powered .lw-run-glow span { white-space: nowrap; }
.rescue-page.lw-chase-session .lw-run-hud.is-powered .lw-run-goals { visibility: hidden; }
.rescue-page.lw-chase-session .lw-letter-track { max-inline-size: 156px; }
.rescue-page.lw-chase-session .lw-run-count { font-size: 13px; line-height: 1.35; }
}
html:has(body.lw-chase-session) { overflow: hidden; }
body.rescue-page.lw-chase-session { position: fixed; inset: 0; inline-size: 100%; block-size: 100dvh; overflow: clip; overscroll-behavior: none; }
.rescue-page.lw-chase-session .lw-chase-overlay { inset: 12px 12px auto; inline-size: fit-content; max-inline-size: calc(100% - 24px); margin-inline: auto; padding: 12px 16px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 16px; border: 2px solid var(--g-border); border-radius: 16px; background: var(--g-surface); box-shadow: 0 4px 16px rgb(0 0 0 / 18%); }
.rescue-page.lw-chase-session .lw-chase-overlay strong { margin: 0; padding: 0; font-size: 18px; line-height: 1.4; background: transparent; }
.rescue-page.lw-chase-session .lw-chase-overlay button { min-block-size: 44px; padding: 8px 12px; line-height: 1.5; }
.rescue-page .lw-chase-layer[data-camera="overview"] :is(.lw-storybook-scenery,.lw-score-popup) { display: none; }
@media (width <= 700px) and (height > 550px) {
.rescue-page.lw-chase-session .lw-run-hud { grid-template-columns: minmax(0,1fr) auto; grid-template-rows: repeat(4,auto); gap: 6px 12px; padding: max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left)); }
.rescue-page.lw-chase-session .lw-run-title { font-size: 18px; }
.rescue-page.lw-chase-session .lw-run-hearts { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; }
.rescue-page.lw-chase-session .lw-run-hearts .game-lives-caption { display: none; }
.rescue-page.lw-chase-session .lw-run-hearts .game-lives-count { font-size: 13px; white-space: nowrap; flex-shrink: 0; }
.rescue-page.lw-chase-session .lw-run-hearts .game-life-icons { flex-shrink: 0; }
.rescue-page.lw-chase-session .lw-run-heading { gap: 0; }
.rescue-page.lw-chase-session .lw-letter-track { grid-area: 3/1/4/3; display: flex; flex-wrap: nowrap; justify-content: center; max-inline-size: none; gap: 8px; }
.rescue-page.lw-chase-session .lw-run-goals { grid-area: 4/1/5/3; flex-flow: row wrap; justify-content: space-between; gap: 4px 12px; max-inline-size: none; }
.rescue-page.lw-chase-session .lw-run-goals progress { display: none; }
.rescue-page.lw-chase-session .lw-run-hud.is-powered .lw-run-glow { grid-area: 4/1/5/3; display: flex; flex-direction: row; align-items: center; gap: 8px; }
.rescue-page.lw-chase-session .lw-run-score-value { font-size: 21px; }
}
@media (width <= 360px) and (height > 550px) {
.rescue-page.lw-chase-session .lw-run-hud { row-gap: 3px; padding-block: max(6px,env(safe-area-inset-top)) 6px; }
.rescue-page.lw-chase-session .lw-run-title { font-size: 16px; }
.rescue-page.lw-chase-session .lw-arena-level { font-size: 10px; letter-spacing: 0; }
.rescue-page.lw-chase-session .lw-run-count { font-size: 12px; }
}
.rescue-page .game-effects-volume { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 4px 12px; padding: 8px 0; color: var(--g-text); font-size: 13px; }
.rescue-page .game-effects-volume input { grid-column: 1/-1; inline-size: 100%; min-inline-size: 0; block-size: 44px; margin: 0; padding: 0; accent-color: var(--g-accent); touch-action: pan-y; }
.game-effects-volume output { color: var(--g-text); font-variant-numeric: tabular-nums; }
.rescue-page .game-effects-sound { display: flex; align-items: center; gap: 10px; min-block-size: 44px; }
.rescue-page :is(.lesson-word,.lesson-spelling,.lw-letter-heading,.lw-match-options button,.lw-word-slots button,.lw-letter-bank button,.ks-book-word) { font-family: "Inter Variable",sans-serif !important; font-variant-ligatures: none; }
.lesson-word { text-align: center; min-inline-size: 0; }
.rescue-page .lesson-word-text { font-size: clamp(32px,5vw,48px); font-weight: 750; line-height: 1.2; letter-spacing: .01em; margin: 0; overflow-wrap: normal; }
.lesson-word-text mark { padding: 0 1px; border-radius: 5px; background: var(--g-reward-bg); color: var(--g-reward-text); text-decoration: underline; text-underline-offset: .14em; }
.rescue-page .lesson-spelling { color: var(--g-muted); font-size: clamp(16px,2.5vw,20px); line-height: 1.4; font-weight: 600; letter-spacing: .03em; margin: 8px 0 0; text-align: center; direction: ltr; }
.lesson-auto-next { display: flex; align-items: center; justify-content: center; gap: 8px; min-block-size: 44px; font-size: 13px; line-height: 1.4; color: var(--g-muted); cursor: pointer; }
.lesson-auto-next input { inline-size: 20px; block-size: 20px; flex: 0 0 auto; accent-color: var(--g-accent); }
.lesson-word-actions { display: flex; justify-content: center; margin-block-start: 10px; }
.rescue-page #lw-dialog[data-lesson] { inline-size: min(760px,calc(100dvw - 24px)); max-block-size: calc(100dvh - 24px); padding: 16px 24px; border: 2px solid var(--g-border); border-radius: 24px; box-shadow: 0 16px 70px #051e2b55; overflow-y: auto; }
#lw-dialog[data-lesson] #lw-dialog-body { min-inline-size: 0; }
.rescue-page #lw-dialog[data-lesson] .lw-letter-heading { font-size: clamp(48px,9vh,76px); font-weight: 650; line-height: 1.1; letter-spacing: .04em; margin: 0; }
.rescue-page #lw-dialog[data-lesson] .lw-dialog-actions { justify-content: center; margin-block-start: 8px; padding-block-start: 10px; }
#lw-dialog[data-lesson] .lw-dialog-actions button { flex: 1; min-block-size: 44px; font-size: 14px; }
#lw-dialog[data-lesson] :is(.lw-audio-status,.lw-inline-status):empty { min-block-size: 0; margin: 0; }
#lw-dialog[data-lesson] :is(.lw-audio-status,.lw-help) { text-align: center; margin-block: 4px; font-size: 13px; line-height: 1.5; }
.lesson-example { display: grid; grid-template-columns: minmax(100px,.8fr) minmax(0,1.2fr); align-items: center; gap: 0 20px; padding: 14px 24px; margin-block: 10px; border: 1px solid var(--g-border); border-radius: 20px; background: var(--g-soft); }
.lesson-example .lw-capture-art { grid-area: 1/1/3/2; inline-size: clamp(90px,17vh,140px); block-size: clamp(90px,17vh,140px); margin: 8px auto; box-shadow: none; }
.lesson-example .lw-capture-art svg { inline-size: 80%; block-size: 80%; }
.rescue-page .lesson-example-label { grid-area: 1/2; text-align: center; align-self: end; margin: 0 0 6px; color: var(--g-muted); font-size: 15px; font-weight: 600; }
.lesson-example .lesson-word { grid-area: 2/2; align-self: start; }
.rescue-page #lw-dialog[data-lesson] .lw-capture-reward { padding: 8px 12px; margin-block: 8px; font-size: 14px; line-height: 1.4; }
#lw-dialog[data-lesson="match"] .lw-encounter-visual { flex-direction: row; gap: 24px; padding: 12px; }
#lw-dialog[data-lesson="match"] .lw-match h3 { margin-block: 10px 4px; }
#lw-dialog[data-lesson="match"] .lw-match-options button { min-block-size: 48px; font-size: 32px; }
#lw-dialog[data-lesson="trace"] .lw-trace-scene { max-block-size: none; padding: 6px 12px; }
.rescue-page #lw-dialog[data-lesson="trace"] .lesson-word-text { font-size: 27px; }
.rescue-page #lw-dialog[data-lesson="trace"] .lesson-spelling { margin: 2px 0 0; font-size: 15px; }
#lw-dialog[data-lesson="trace"] .lw-trace-field { inline-size: min(100%,300px); max-block-size: min(220px,26dvh); margin-inline: auto; }
.rescue-page #lw-dialog[data-lesson="trace"] h2 { margin: 2px 0 6px; font: 650 28px/1.2 "Inter Variable",sans-serif; text-align: center; }
.rescue-page #lw-dialog[data-lesson="trace"] .lw-help { font-size: 12px; line-height: 1.4; }
body[data-game-route="word-trail"] .wt-dialog { display: flex; flex-direction: column; gap: 8px; padding: 16px max(20px,calc((100dvw - 1000px)/2)); text-align: start; }
.wt-dialog .game-room-header { flex: 0 0 auto; margin: 0; }
.wt-dialog .game-room-preferences { margin: 0; }
.wt-dialog .wt-expedition { margin: 0; }
.wt-dialog .wt-expedition > p { margin: 4px 0; }
.wt-dialog .wt-study-card { display: flex; flex-direction: column; justify-content: center; flex: 1; margin: 0; border: 1px solid var(--g-border); border-radius: 20px; background: var(--g-soft); padding: clamp(12px,2.5vh,24px) clamp(16px,3vw,32px); }
.wt-dialog[data-lesson="word"] #wt-heading { font: 750 clamp(28px,5vw,42px)/1.2 "Inter Variable",sans-serif; letter-spacing: .01em; }
.wt-dialog .wt-study-card > :is(.wt-definition,.wt-example,.wt-collocation) { margin-block: 8px; font-size: clamp(18px,2.2vw,24px); line-height: 1.45; }
.wt-dialog .wt-study-card > .lesson-spelling { margin: 0 0 8px; text-align: start; }
.wt-dialog .wt-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.wt-dialog .wt-options button { font: 650 clamp(18px,2.1vw,24px)/1.35 "Inter Variable",sans-serif; min-block-size: 58px; border-radius: 16px; padding: 12px; background: var(--g-soft) !important; border: 2px solid var(--g-border); }
.wt-dialog .wt-question { padding: 18px 24px; border: 1px solid var(--g-border); border-radius: 20px; background: var(--g-soft); margin: 0; font-family: "Inter Variable",sans-serif; }
.wt-dialog > :is(.game-voice-status,.wt-feedback):empty { min-block-size: 0; margin: 0; }
.wt-dialog > .lw-primary { align-self: center; min-inline-size: min(100%,280px); }
.ks-collected .lesson-word-text { font-size: clamp(28px,4vw,40px); }
.ks-collected .lesson-auto-next { margin-block-start: 6px; }
.ks-collected .game-voice-status:empty { display: none; }
@media (width <= 600px) {
.rescue-page #lw-dialog[data-lesson] { padding: 10px 14px; border-radius: 20px; }
.lesson-example { padding: 12px; gap: 0 12px; grid-template-columns: minmax(70px,.7fr) minmax(0,1.3fr); }
.lesson-example .lw-capture-art { inline-size: 80px; block-size: 80px; }
.rescue-page .lesson-word-text { font-size: clamp(27px,7.5vw,40px); }
.rescue-page .lesson-spelling { font-size: 16px; letter-spacing: 0; }
#lw-dialog[data-lesson] .lw-audio-actions { gap: 6px; }
#lw-dialog[data-lesson] .lw-audio-actions button { padding: 8px 10px; min-block-size: 44px; }
.rescue-page #lw-dialog[data-lesson] .lw-letter-heading { font-size: 54px; }
.lesson-auto-next { font-size: 12px; }
body[data-game-route="word-trail"] .wt-dialog { padding: 12px; gap: 6px; }
.wt-dialog .game-level-status { padding: 6px 10px; margin: 0; font-size: 12px; }
.wt-dialog .wt-expedition { padding: 6px 10px; }
.wt-dialog .wt-expedition > svg { block-size: 20px; }
.wt-dialog .wt-study-card > :is(.wt-definition,.wt-example,.wt-collocation) { font-size: 18px; margin-block: 6px; }
.wt-dialog .wt-options { grid-template-columns: 1fr; gap: 8px; }
.wt-dialog .wt-options button { min-block-size: 48px; padding: 8px 12px; }
}
@media (height <= 550px) and (width > 550px) {
.rescue-page #lw-dialog[data-lesson] { inline-size: min(900px,calc(100dvw - 16px)); padding: 8px 16px; max-block-size: calc(100dvh - 12px); }
#lw-dialog[data-lesson="capture"] #lw-dialog-body { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0 18px; align-items: center; }
#lw-dialog[data-lesson="capture"] h2 { grid-area: 1/1; }
#lw-dialog[data-lesson="capture"] .lesson-example { grid-area: 2/1/7/2; margin: 0; padding: 8px; }
#lw-dialog[data-lesson="capture"] .lw-capture-reward { grid-area: 1/2; margin: 0; }
#lw-dialog[data-lesson="capture"] .lw-help { grid-area: 2/2; }
#lw-dialog[data-lesson="capture"] .lw-audio-actions { grid-area: 3/2; }
#lw-dialog[data-lesson="capture"] .lw-audio-status { grid-area: 4/2; }
#lw-dialog[data-lesson="capture"] .lw-dialog-actions { grid-area: 5/2; }
#lw-dialog[data-lesson="capture"] .lesson-auto-next { grid-area: 6/2; }
.rescue-page #lw-dialog[data-lesson] .lw-letter-heading { font-size: 42px; }
.lesson-example .lw-capture-art { inline-size: 70px; block-size: 70px; }
#lw-dialog[data-lesson="trace"] #lw-dialog-body { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 4px 18px; align-items: center; }
#lw-dialog[data-lesson="trace"] #lw-dialog-body > :is(h2,.lw-trace-scene,.lw-audio-actions,.lw-audio-status,.lw-help) { grid-column: 1; margin: 0; }
#lw-dialog[data-lesson="trace"] .lw-form-switch { grid-area: 1/2; }
#lw-dialog[data-lesson="trace"] .lw-stroke-label { grid-area: 2/2; margin: 0; }
#lw-dialog[data-lesson="trace"] .lw-trace-field { grid-area: 3/2/6/3; max-block-size: 140px; inline-size: auto; max-inline-size: 100%; }
#lw-dialog[data-lesson="trace"] .lw-inline-status { grid-area: 6/2; }
#lw-dialog[data-lesson="trace"] .lw-dialog-actions { grid-column: 1/-1; margin: 0; padding-block-start: 6px; }
body[data-game-route="word-trail"] .wt-dialog[data-lesson="word"] { display: grid; grid-template-columns: minmax(200px,.8fr) minmax(0,1.2fr); grid-template-rows: auto auto auto minmax(0,1fr) auto; gap: 4px 16px; padding: 8px 16px; }
.wt-dialog[data-lesson="word"] .game-room-header { grid-area: 1/1/2/3; }
.wt-dialog[data-lesson="word"] .game-room-preferences { grid-area: 2/1; }
.wt-dialog[data-lesson="word"] .game-level-status { grid-area: 3/1; margin: 0; }
.wt-dialog[data-lesson="word"] .wt-expedition { grid-area: 4/1; align-self: start; }
.wt-dialog[data-lesson="word"] .wt-study-card { grid-area: 2/2/5/3; padding: 8px 16px; }
.wt-dialog[data-lesson="word"] .wt-study-card > :is(.wt-definition,.wt-example,.wt-collocation) { margin: 4px 0; font-size: 17px; }
.wt-dialog[data-lesson="word"] > .game-voice-status { grid-area: 5/1; font-size: 12px; margin: 0; }
.wt-dialog[data-lesson="word"] > .lw-primary { grid-area: 5/2; padding-block: 8px; }
.wt-dialog[data-lesson="word"] > .lesson-auto-next { grid-area: 6/1/7/3; }
}
@media (forced-colors: active) {
.lesson-word-text mark { color: HighlightText; background: Highlight; }
}
@media (height <= 550px) and (width > 550px) {
.rescue-page #lw-dialog[data-lesson="capture"] .lesson-example { grid-area: 2/1; padding: 6px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-reward { grid-area: 3/1; font-size: 11px; line-height: 1.3; margin: 4px 0 0; padding: 4px 6px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-help { grid-area: 4/1; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-audio-actions { grid-area: 1/2; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-audio-status { grid-area: 2/2; align-self: start; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-dialog-actions { grid-area: 3/2; margin: 0; padding: 0; border: 0; flex-wrap: nowrap; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-dialog-actions button { min-inline-size: 0; padding: 8px; font-size: 13px; line-height: 1.3; }
.rescue-page #lw-dialog[data-lesson="capture"] .lesson-auto-next { grid-area: 4/2; }
.rescue-page #lw-dialog[data-lesson="capture"] .lesson-word-text { font-size: 28px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lesson-spelling { font-size: 15px; margin-block-start: 5px; }
}
.rescue-page #lw-dialog[data-lesson] { max-inline-size: none; }
@media (height <= 700px) and (width <= 550px) {
.rescue-page #lw-dialog[data-lesson="trace"] { padding: 8px 12px; inline-size: calc(100dvw - 16px); max-block-size: calc(100dvh - 12px); }
.rescue-page #lw-dialog[data-lesson="trace"] h2 { font-size: 24px; margin: 0 0 4px; }
.rescue-page #lw-dialog[data-lesson="trace"] .lw-trace-scene { padding: 4px 8px; }
.rescue-page #lw-dialog[data-lesson="trace"] .lw-audio-actions { flex-wrap: nowrap; margin: 4px 0; }
.rescue-page #lw-dialog[data-lesson="trace"] .lw-audio-actions button { padding: 6px 8px; font-size: 12px; }
.rescue-page #lw-dialog[data-lesson="trace"] .lw-audio-status { margin: 0; font-size: 12px; }
.rescue-page #lw-dialog[data-lesson="trace"] .lw-form-switch button { min-block-size: 44px; padding: 6px 8px; }
.rescue-page #lw-dialog[data-lesson="trace"] .lw-stroke-label { margin: 2px 0; font-size: 12px; }
.rescue-page #lw-dialog[data-lesson="trace"] .lw-trace-field { max-block-size: 125px; inline-size: auto; max-inline-size: 100%; }
.rescue-page #lw-dialog[data-lesson="trace"] .lw-help { margin: 2px 0; font-size: 11px; line-height: 1.3; }
.rescue-page #lw-dialog[data-lesson="trace"] .lw-dialog-actions { flex-wrap: nowrap; gap: 6px; padding-block-start: 6px; margin-block-start: 4px; }
.rescue-page #lw-dialog[data-lesson="trace"] .lw-dialog-actions button { min-inline-size: 0; flex: 1 1 0; padding: 6px; font-size: 11px; line-height: 1.3; }
}
@media (height <= 550px) and (width > 550px) {
.rescue-page #lw-dialog[data-lesson="trace"] h2 { font-size: 22px; }
.rescue-page #lw-dialog[data-lesson="trace"] .lw-trace-scene { padding: 4px 8px; }
.rescue-page #lw-dialog[data-lesson="trace"] .lesson-word-text { font-size: 24px; }
.rescue-page #lw-dialog[data-lesson="trace"] .lesson-spelling { font-size: 13px; }
.rescue-page #lw-dialog[data-lesson="trace"] .lw-audio-actions { flex-wrap: nowrap; }
.rescue-page #lw-dialog[data-lesson="trace"] .lw-audio-actions button { padding: 6px 8px; font-size: 12px; min-block-size: 44px; }
.rescue-page #lw-dialog[data-lesson="trace"] .lw-form-switch button { padding: 6px 8px; min-block-size: 44px; }
.rescue-page #lw-dialog[data-lesson="trace"] .lw-trace-field { max-block-size: 110px; }
.rescue-page #lw-dialog[data-lesson="trace"] .lw-help { font-size: 11px; line-height: 1.3; }
.rescue-page #lw-dialog[data-lesson="trace"] .lw-dialog-actions { padding-block-start: 5px; margin: 0; }
.rescue-page #lw-dialog[data-lesson="trace"] .lw-dialog-actions button { padding: 6px 8px; font-size: 12px; min-block-size: 44px; }
}
.rescue-page #lw-dialog[data-lesson] { background: #fffdfa; color: #152b23; }
.rescue-page #lw-dialog[data-lesson] :is(.lesson-example,.lw-trace-scene,.lw-encounter-visual) { background: #f8f7f3; border-color: #b5bcb7; }
.rescue-page #lw-dialog[data-lesson] .lw-capture-art { border: 0; background: transparent; }
body[data-game-route="word-trail"] .wt-dialog { background: #fffdfa; }
.wt-dialog :is(.wt-study-card,.wt-question) { background: #f8f7f3; }
html[data-theme="dark"] .rescue-page #lw-dialog[data-lesson] { background: #172d36; color: var(--g-text); }
html[data-theme="dark"] .rescue-page #lw-dialog[data-lesson] :is(.lesson-example,.lw-trace-scene,.lw-encounter-visual) { background: #203b44; border-color: var(--g-border); }
html[data-theme="dark"] body[data-game-route="word-trail"] .wt-dialog { background: #172d36; }
html[data-theme="dark"] .wt-dialog :is(.wt-study-card,.wt-question) { background: #203b44; }
@media (height <= 550px) and (width > 550px) {
.rescue-page #lw-dialog[data-lesson="trace"] #lw-dialog-body { grid-template-rows: 30px 54px 44px 20px auto 44px; gap: 3px 16px; }
.rescue-page #lw-dialog[data-lesson="trace"] #lw-dialog-body > h2 { grid-area: 1/1; }
.rescue-page #lw-dialog[data-lesson="trace"] .lw-trace-scene { grid-area: 2/1; }
.rescue-page #lw-dialog[data-lesson="trace"] .lw-audio-actions { grid-area: 3/1; }
.rescue-page #lw-dialog[data-lesson="trace"] .lw-audio-status { grid-area: 4/1; }
.rescue-page #lw-dialog[data-lesson="trace"] .lw-help { grid-area: 5/1; }
.rescue-page #lw-dialog[data-lesson="trace"] .lw-form-switch { grid-area: 1/2/3/3; align-self: start; }
.rescue-page #lw-dialog[data-lesson="trace"] .lw-stroke-label { grid-area: 2/2; align-self: end; }
.rescue-page #lw-dialog[data-lesson="trace"] .lw-trace-field { grid-area: 3/2/6/3; max-block-size: 94px; }
.rescue-page #lw-dialog[data-lesson="trace"] .lw-inline-status { grid-area: 5/2; }
.rescue-page #lw-dialog[data-lesson="trace"] .lw-dialog-actions { grid-area: 6/1/7/3; padding: 0; border: 0; }
}
.rescue-page #lw-dialog[data-lesson] { --lc-paper: #fffdf5; --lc-panel: #f7f5eb; --lc-art: #eaf2dc; --lc-edge: #c4d1b8; background: var(--lc-paper); border-radius: 30px; box-shadow: 0 7px 0 #174738, 0 26px 80px #031e2b45; }
html[data-theme="dark"] .rescue-page #lw-dialog[data-lesson] { --lc-paper: #142e30; --lc-panel: #1b3838; --lc-art: #244437; --lc-edge: #7f9e8b; }
.rescue-page #lw-dialog[data-lesson="capture"] { inline-size: min(660px,calc(100dvw - 24px)); padding: 22px 28px; border: 2px solid var(--g-border); background: radial-gradient(ellipse at 95% 0,color-mix(in srgb,var(--g-reward-bg) 28%,transparent),transparent 55%),var(--lc-paper); }
.rescue-page #lw-dialog[data-lesson="capture"]::backdrop { background: #0b2929a6; backdrop-filter: blur(5px); }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-dialog-top { gap: 12px; margin-block-end: 10px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-dialog-top .lw-eyebrow { margin: 0; color: var(--g-reward-text); background: var(--g-reward-bg); border: 1px solid var(--g-reward-edge); border-radius: 14px; padding: 10px 16px; font-size: 14px; font-weight: 800; letter-spacing: .01em; line-height: 1.4; box-shadow: 0 3px 0 color-mix(in srgb,var(--g-reward-edge) 50%,var(--lc-paper)); }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-icon-button { flex: 0 0 44px; border-color: var(--lc-edge); box-shadow: 0 2px 0 var(--lc-edge); }
.rescue-page #lw-dialog[data-lesson="capture"] #lw-dialog-body { display: flex; flex-direction: column; gap: 12px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-hero { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; padding-block: 2px 6px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-chapter { margin: 0; color: var(--g-muted); font-size: 11px; font-weight: 650; letter-spacing: .02em; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-kicker { margin: 0; color: var(--g-muted); font-size: 14px; font-weight: 600; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-letter-heading { font-size: 80px; font-weight: 800; letter-spacing: -.04em; line-height: 1.05; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-lowercase { color: var(--g-accent); font-size: .82em; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-hero::before,.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-hero::after { content: "✦"; position: absolute; color: var(--g-reward-edge); font-size: 22px; inset-inline-start: 18%; inset-block-start: 55%; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-hero::after { inset-inline: auto 17%; inset-block-start: 25%; font-size: 14px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lesson-example { grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: stretch; gap: 14px; margin: 0; padding: 0; border: 0; background: transparent; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-art { grid-area: auto; inline-size: 100%; block-size: 180px; min-inline-size: 0; max-inline-size: none; padding: 12px; margin: 0; background: var(--lc-art); border: 1px solid var(--lc-edge); border-radius: 22px; box-shadow: 0 3px 0 color-mix(in srgb,var(--lc-edge) 50%,transparent); }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-art .game-image { inline-size: 100%; block-size: 100%; border-radius: 14px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-art img { object-fit: cover; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-word { display: flex; flex-direction: column; justify-content: center; min-inline-size: 0; text-align: center; background: var(--lc-panel); border: 1px solid var(--lc-edge); border-radius: 22px; padding: 12px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lesson-example-label { align-self: stretch; margin: 0 0 10px; font-size: 13px; color: var(--g-muted); }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-word .lesson-word { align-self: stretch; }
.rescue-page #lw-dialog[data-lesson="capture"] .lesson-word-text { font-size: clamp(26px,5vw,44px); font-weight: 800; letter-spacing: -.025em; overflow-wrap: anywhere; }
.rescue-page #lw-dialog[data-lesson="capture"] .lesson-word-text mark { border-radius: 8px; padding: 1px 3px; text-decoration: none; box-decoration-break: clone; }
.rescue-page #lw-dialog[data-lesson="capture"] .lesson-spelling { font-size: 14px; margin: 8px 0 0; letter-spacing: .06em; overflow-wrap: anywhere; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-translation { color: var(--g-muted); font-size: 15px; font-weight: 600; margin: 10px 0 0; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-audio-actions { display: grid; grid-template-columns: 1.25fr 1fr; gap: 10px; margin: 2px 0 0; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-audio-actions button { min-inline-size: 0; min-block-size: 46px; border-radius: 24px; font-size: 13px; font-weight: 650; line-height: 1.3; padding: 8px 12px; box-shadow: none; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-audio-actions button:first-child { background: var(--g-primary) !important; color: var(--g-on-primary); border-color: var(--g-primary); }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-reward { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; border: 0; background: transparent; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-reward span { display: inline-flex; align-items: center; padding: 7px 14px; border: 1px solid var(--g-reward-edge); border-radius: 30px; color: var(--g-reward-text); background: var(--g-reward-bg); font-size: 13px; font-weight: 700; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-reward span + span { background: var(--lc-art); color: var(--g-text); border-color: var(--g-border); }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-progress { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; font-size: 12px; color: var(--g-muted); padding-inline: 2px; }
.rescue-page #lw-dialog[data-lesson="capture"] progress { appearance: none; inline-size: 120px; block-size: 9px; border: 0; border-radius: 8px; overflow: hidden; background: var(--lc-edge); accent-color: var(--g-accent); }
.rescue-page #lw-dialog[data-lesson="capture"] progress::-moz-progress-bar { border-radius: 8px; background: var(--g-accent); }
.rescue-page #lw-dialog[data-lesson="capture"] progress::-webkit-progress-bar { border-radius: 8px; background: var(--lc-edge); }
.rescue-page #lw-dialog[data-lesson="capture"] progress::-webkit-progress-value { border-radius: 8px; background: var(--g-accent); }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-dialog-actions { flex-wrap: nowrap; gap: 12px; margin: 0; padding: 12px 0 0; border-color: var(--lc-edge); }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-dialog-actions button { min-inline-size: 0; min-block-size: 48px; padding: 10px; border-radius: 15px; font-weight: 750; font-size: 15px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lesson-auto-next { margin: 0; font-size: 12px; }
.rescue-page #lw-dialog[data-lesson="trace"] .lw-trace-scene { border-radius: 18px; background: var(--lc-art); }
.rescue-page #lw-dialog[data-lesson="trace"] .lw-trace-field { border-radius: 20px; border-color: var(--g-border); }
@media (width <= 550px) {
.rescue-page #lw-dialog[data-lesson="capture"] { padding: 16px 16px max(12px,env(safe-area-inset-bottom)); border-radius: 28px; }
.rescue-page #lw-dialog[data-lesson="capture"] #lw-dialog-body { gap: 10px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-letter-heading { font-size: 68px; }
.rescue-page #lw-dialog[data-lesson="capture"] #lw-dialog-body .lesson-example { gap: 10px; padding: 0; margin: 0; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-art { block-size: 156px; padding: 8px; border-radius: 18px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-word { padding: 10px 8px; border-radius: 18px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lesson-example-label { font-size: 12px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-audio-actions button { font-size: 12px; padding: 8px; }
}
@media (height <= 700px) and (width <= 550px) {
.rescue-page #lw-dialog[data-lesson="capture"] { padding: 10px 12px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-dialog-top { margin-block-end: 6px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-dialog-top .lw-eyebrow { font-size: 12px; padding: 7px 10px; }
.rescue-page #lw-dialog[data-lesson="capture"] #lw-dialog-body { gap: 6px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-hero { gap: 3px; padding: 0; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-kicker { display: none; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-letter-heading { font-size: 46px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-art { block-size: 112px; padding: 6px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-word { padding: 8px 6px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lesson-example-label { margin-block-end: 4px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lesson-spelling { margin-block-start: 4px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-translation { margin-block-start: 4px; font-size: 13px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-reward span { padding: 5px 9px; font-size: 11px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-audio-actions button { min-block-size: 44px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-dialog-actions { padding-block-start: 6px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-dialog-actions button { min-block-size: 44px; }
}
@media (height <= 550px) and (width > 550px) {
.rescue-page #lw-dialog[data-lesson="capture"] { inline-size: min(840px,calc(100dvw - 16px)); padding: 8px 16px; border-radius: 24px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-dialog-top { margin-block-end: 4px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-dialog-top .lw-eyebrow { padding: 6px 12px; font-size: 12px; }
.rescue-page #lw-dialog[data-lesson="capture"] #lw-dialog-body { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: 4px 16px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-hero { grid-area: 1/1; display: flex; justify-content: space-between; gap: 8px; padding: 0; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-hero::before,.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-hero::after,.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-kicker { display: none; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-letter-heading { font-size: 40px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lesson-example { grid-area: 2/1/7/2; padding: 0; gap: 8px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-art { block-size: 126px; padding: 6px; border-radius: 16px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-word { padding: 8px 6px; border-radius: 16px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lesson-example-label { font-size: 11px; margin-block-end: 4px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lesson-word-text { font-size: 26px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-audio-actions { grid-area: 1/2; gap: 6px; margin: 0; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-audio-actions button { font-size: 11px; min-block-size: 44px; padding: 6px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-audio-status { grid-area: 2/2; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-reward { grid-area: 3/2; gap: 6px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-reward span { font-size: 11px; padding: 4px 8px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-progress { grid-area: 4/2; font-size: 11px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-dialog-actions { grid-area: 5/2; border: 0; padding: 0; gap: 8px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-dialog-actions button { min-block-size: 44px; font-size: 13px; padding: 8px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lesson-auto-next { grid-area: 6/2; }
}
@media (forced-colors: active) {
.rescue-page #lw-dialog[data-lesson] { box-shadow: none; border-color: CanvasText; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-hero::before,.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-hero::after { display: none; }
}
.rescue-page #lw-dialog[data-lesson] { scrollbar-width: thin; scroll-padding-block: 76px 24px; }
.rescue-page #lw-dialog[data-lesson="capture"] { inline-size: min(820px,calc(100dvw - 24px)); padding: 28px 32px; border: 3px solid var(--g-border); background: radial-gradient(ellipse at 0 0,color-mix(in srgb,var(--lc-art) 65%,transparent),transparent 58%),var(--lc-paper); box-shadow: 0 8px 0 #174738,0 28px 90px #031e2b66; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-dialog-top { margin-block-end: 20px; }
.rescue-page #lw-dialog[data-lesson="capture"] #lw-dialog-body { gap: 20px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-hero { display: grid; gap: 12px; padding: 0; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-kicker { display: none; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-chapter { font-size: 12px; padding: 6px 14px; border: 1px solid var(--lc-edge); border-radius: 24px; background: var(--lc-art); }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-letter-heading { font-size: 86px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lesson-example { gap: 20px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-art { block-size: 220px; padding: 14px; border-radius: 26px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-word { padding: 22px 14px; border-radius: 26px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lesson-word-text { white-space: nowrap; overflow-wrap: normal; }
.rescue-page #lw-dialog[data-lesson="capture"] .lesson-word[data-word-length="long"] .lesson-word-text { font-size: clamp(20px,3.2vw,34px); }
.rescue-page #lw-dialog[data-lesson="trace"] .lesson-word[data-word-length="long"] .lesson-word-text { font-size: 22px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-audio-actions button { min-block-size: 50px; font-size: 14px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-progress { gap: 12px; }
.lw-discovery-trail { display: flex; justify-content: center; gap: 12px; flex-basis: 100%; direction: ltr; }
.lw-discovery-token { position: relative; display: grid; place-items: center; inline-size: 46px; block-size: 46px; border: 2px dashed var(--g-border); border-radius: 15px; color: var(--g-muted); background: var(--lc-panel); font: 750 23px/1 "Inter Variable",sans-serif; }
.lw-discovery-token.is-found { border-style: solid; background: var(--g-primary); color: var(--g-on-primary); box-shadow: 0 3px 0 var(--g-border); }
.lw-discovery-token[aria-current] { outline: 2px solid var(--g-reward-edge); outline-offset: 3px; }
.lw-discovery-token small { position: absolute; inset: -6px -6px auto auto; border-radius: 50%; inline-size: 18px; block-size: 18px; background: var(--g-reward-bg); color: var(--g-reward-text); font-size: 12px; display: grid; place-items: center; }
.lw-card-guide { display: flex; align-items: center; gap: 14px; inline-size: 100%; min-inline-size: 0; max-inline-size: 440px; margin-inline: auto; text-align: start; background: transparent; }
.lw-card-guide-pip { flex: 0 0 72px; }
.lw-card-guide-pip svg { display: block; inline-size: 100%; block-size: 80px; }
.lw-card-guide-copy { position: relative; flex: 1; min-inline-size: 0; padding: 12px 16px; background: var(--lc-art); color: var(--g-text); border: 1px solid var(--lc-edge); border-radius: 18px 18px 18px 4px; }
[dir="rtl"] .lw-card-guide-copy { border-radius: 18px 18px 4px; }
.lw-card-guide-copy strong { display: block; color: var(--g-muted); font-size: 12px; margin-block-end: 4px; }
.lw-card-guide-copy p { font-size: 14px; line-height: 1.6; margin: 0; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-dialog-actions { position: sticky; inset-block-end: 0; z-index: 2; padding-block: 14px 10px; background: var(--lc-paper); box-shadow: 0 -8px 12px var(--lc-paper); }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-dialog-actions button { min-block-size: 52px; }
.rescue-page #lw-dialog[data-lesson="capture"][data-returning="true"] .lw-capture-reward::before { content: "✓"; color: var(--g-accent); align-self: center; }
.rescue-page #lw-dialog[data-lesson="trace"] #lw-dialog-body > .lw-card-guide { margin-block: 12px; }
.rescue-page #lw-dialog[data-lesson="complete"] { padding: 28px; background: radial-gradient(ellipse at top,var(--lc-art),transparent 70%),var(--lc-paper); text-align: center; }
.rescue-page #lw-dialog[data-lesson="complete"] #lw-dialog-title { font: 800 clamp(24px,4vw,36px)/1.3 "Inter Variable","Noto Sans Arabic Variable",sans-serif; }
.rescue-page #lw-dialog[data-lesson="complete"] .lw-card-guide-pip { flex-basis: 96px; }
.rescue-page #lw-dialog[data-lesson="complete"] .lw-card-guide-pip svg { block-size: 110px; }
.rescue-page #lw-dialog[data-lesson="complete"] .lw-word-badge { border-radius: 18px; background: var(--g-reward-bg); color: var(--g-reward-text); padding: 18px; font: 800 26px/1.4 "Inter Variable","Noto Sans Arabic Variable",sans-serif; }
@media (width >= 1000px) and (height > 700px) {
.rescue-page #lw-dialog[data-lesson="capture"] { inline-size: min(920px,calc(100dvw - 64px)); padding: 28px 36px; }
.rescue-page #lw-dialog[data-lesson="capture"] #lw-dialog-body { display: grid; grid-template-columns: minmax(230px,.8fr) minmax(0,1.2fr); gap: 22px 32px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-hero { grid-area: 1/1/4/2; align-content: center; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-hero .lw-card-guide { flex-direction: column; gap: 6px; text-align: center; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-hero .lw-card-guide-copy { flex: auto; inline-size: 100%; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-letter-heading { font-size: 100px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lesson-example { grid-area: 1/2; gap: 14px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-audio-actions { grid-area: 2/2; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-audio-status { grid-area: 3/2; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-reward { grid-area: 4/1/5/3; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-progress { grid-area: 5/1/6/3; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-dialog-actions { grid-area: 6/1/7/3; }
.rescue-page #lw-dialog[data-lesson="capture"] .lesson-auto-next { grid-area: 7/1/8/3; }
}
@media (width <= 550px) {
.rescue-page #lw-dialog[data-lesson="capture"] { inline-size: calc(100dvw - 20px); padding: 20px 18px; border-radius: 28px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-dialog-top { margin-block-end: 12px; }
.rescue-page #lw-dialog[data-lesson="capture"] #lw-dialog-body { gap: 14px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-hero { gap: 10px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-letter-heading { font-size: 68px; }
.rescue-page #lw-dialog[data-lesson="capture"] #lw-dialog-body .lesson-example { gap: 12px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-art { block-size: 160px; padding: 8px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-word { padding: 16px 8px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-audio-actions { gap: 10px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-audio-actions button { font-size: 12px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lesson-word[data-word-length="long"] .lesson-word-text { font-size: 20px; }
.lw-discovery-trail { gap: 10px; }
.lw-discovery-token { inline-size: 38px; block-size: 40px; font-size: 20px; }
.rescue-page #lw-dialog[data-lesson="trace"] .lw-dialog-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.rescue-page #lw-dialog[data-lesson="trace"] .lw-dialog-actions button { font-size: 13px; padding: 10px; }
}
@media (height <= 550px) and (width > 550px) {
.rescue-page #lw-dialog[data-lesson="capture"] { padding: 14px 20px; }
.rescue-page #lw-dialog[data-lesson="capture"] #lw-dialog-body { gap: 14px 20px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-hero { display: flex; grid-area: 1/1; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-hero .lw-card-guide { display: none; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-letter-heading { font-size: 48px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-art { block-size: 170px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-discovery-token { inline-size: 32px; block-size: 32px; font-size: 17px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-dialog-actions { padding: 0; }
.rescue-page #lw-dialog[data-lesson="trace"] #lw-dialog-body > .lw-card-guide { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
.rescue-page #lw-dialog[open][data-lesson="capture"]:not([data-returning="true"]) .lw-card-guide-pip { animation: lw-guide-arrive 260ms ease-out both; }
}
@keyframes lw-guide-arrive { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (forced-colors: active) {
.rescue-page #lw-dialog[data-lesson] { box-shadow: none; }
.lw-discovery-token[aria-current] { outline-color: Highlight; }
}
.rescue-page #lw-dialog[data-lesson="capture"] { --lc-glyph: #21634d; --lc-glyph-edge: #103c32; --lc-purple: #79529c; --lc-purple-edge: #4b3269; --lc-gold: #87501a; --lc-gold-edge: #593412; }
html[data-theme="dark"] .rescue-page #lw-dialog[data-lesson="capture"] { --lc-glyph: #c0ecd1; --lc-glyph-edge: #4c8267; --lc-purple: #dcc2fb; --lc-purple-edge: #775d97; --lc-gold: #ffe3a1; --lc-gold-edge: #a37b39; }
.rescue-page #lw-dialog[data-lesson="capture"] #lw-dialog-body .lesson-example { align-items: center; gap: 18px; padding: 16px; background: var(--lc-art); border: 2px solid var(--lc-edge); border-radius: 28px; box-shadow: 0 4px 0 color-mix(in srgb,var(--lc-edge) 70%,transparent); }
.rescue-page #lw-dialog[data-lesson="capture"] .lesson-example .lw-capture-art { padding: 0; background: transparent; border: 0; border-radius: 20px; box-shadow: none; }
.rescue-page #lw-dialog[data-lesson="capture"] .lesson-example .lw-capture-word { padding: 12px 4px; background: transparent; border: 0; border-radius: 0; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-letter-heading { font-weight: 900; letter-spacing: -.03em; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-capital { color: var(--lc-glyph); text-shadow: 0 1px 0 var(--lc-glyph-edge),0 2px 0 var(--lc-glyph-edge),0 3px 0 var(--lc-glyph-edge),0 4px 0 var(--lc-glyph-edge),0 7px 0 #132f2420; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-lowercase { color: var(--lc-purple); text-shadow: 0 1px 0 var(--lc-purple-edge),0 2px 0 var(--lc-purple-edge),0 3px 0 var(--lc-purple-edge),0 4px 0 var(--lc-purple-edge),0 7px 0 #132f2420; }
.rescue-page #lw-dialog[data-lesson="capture"] .lesson-word-text { font-size: clamp(30px,4.2vw,48px); font-weight: 900; line-height: 1.35; letter-spacing: .005em; color: var(--lc-glyph); }
.rescue-page #lw-dialog[data-lesson="capture"] .lesson-word-text > span { color: var(--lc-glyph); text-shadow: 0 1px 0 var(--lc-glyph-edge),0 2px 0 var(--lc-glyph-edge),0 4px 0 #132f2415; }
.rescue-page #lw-dialog[data-lesson="capture"] .lesson-word-text > span:nth-child(3n) { color: var(--lc-purple); text-shadow: 0 1px 0 var(--lc-purple-edge),0 2px 0 var(--lc-purple-edge),0 4px 0 #132f2415; }
.rescue-page #lw-dialog[data-lesson="capture"] .lesson-word-text > mark { padding: 0; color: var(--lc-gold); background: transparent; border-radius: 0; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .15em; text-shadow: 0 1px 0 var(--lc-gold-edge),0 2px 0 var(--lc-gold-edge); }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-chapter { padding: 0; background: transparent; border: 0; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-card-guide-copy { padding: 8px 4px; background: transparent; border: 0; }
@media (width <= 550px) {
.rescue-page #lw-dialog[data-lesson="capture"] #lw-dialog-body .lesson-example { gap: 12px; padding: 12px; border-radius: 22px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lesson-example .lw-capture-art { block-size: 150px; }
}
@media (height <= 550px) and (width > 550px) {
.rescue-page #lw-dialog[data-lesson="capture"] #lw-dialog-body .lesson-example { padding: 12px; gap: 10px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lesson-example .lw-capture-art { block-size: 150px; }
}
@media (forced-colors: active) {
.rescue-page #lw-dialog[data-lesson="capture"] :is(.lw-capture-capital,.lw-capture-lowercase,.lesson-word-text > span,.lesson-word-text > mark) { color: CanvasText; text-shadow: none; }
}
.game-image { position: relative; display: block; inline-size: 100%; aspect-ratio: 1; overflow: hidden; isolation: isolate; border-radius: 16px; }
.game-image > img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.game-image--scene > img { transform: scale(1.12); transform-origin: center top; }
.game-image--cutout { border-radius: 0; }
.game-image--cutout > img { object-fit: contain; }
.game-image > svg { display: none; }
.game-image.is-image-error > svg { display: block; inline-size: 100%; block-size: 100%; }
.lw-encounter-visual > .game-image { inline-size: clamp(90px,16vh,150px); flex: 0 0 auto; }
.lw-trace-scene > .game-image { inline-size: 54px; block-size: 54px; aspect-ratio: 1; border-radius: 10px; flex: 0 0 auto; }
.lesson-example .lw-capture-art { overflow: hidden; border-radius: 16px; inline-size: clamp(110px,20vh,180px); block-size: clamp(110px,20vh,180px); }
.lw-capture-art .game-image { inline-size: 100%; block-size: 100%; }
.lw-journal-illustration .game-image { block-size: 100%; border-radius: 8px; }
.lesson-practice-photo { inline-size: min(180px,30vh); margin: 8px auto; }
.lw-result-art > .game-image { block-size: 100%; aspect-ratio: auto; }
.lw-result-art > .game-image img { object-fit: contain; }
.wt-study-card { position: relative; }
.wt-context-image { float: inline-end; inline-size: clamp(90px,18vw,180px); block-size: auto; margin-inline-start: 16px; margin-block-end: 8px; }
.wt-study-card:has(.wt-context-image) { display: block; }
.wt-study-card .wt-definition { font-weight: 650; }
.ks-cover { overflow: hidden; }
.rescue-page .ks-cover > .game-image { inline-size: 100%; block-size: 100%; aspect-ratio: auto; border-radius: 18px; }
.ks-book-seal > .game-image { inline-size: 100%; block-size: 100%; border-radius: 12px; }
.ks-picture > .game-image { border-radius: 10px; }
.nn-cover > .game-image { inline-size: 100%; block-size: 100%; aspect-ratio: auto; }
.nn-resident > .game-image,.nn-arrival > .game-image { inline-size: 100%; block-size: 100%; }
.nq-brand { position: relative; padding-inline-start: 60px; }
.nq-brand-photo { position: absolute; inset-inline-start: 0; inset-block-start: 0; inline-size: 48px; block-size: 48px; border-radius: 12px; }
.nq-counting-nest { position: relative; isolation: isolate; }
.counting-nest-photo { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; opacity: .15; z-index: -1; pointer-events: none; }
.counting-nest-photo img { object-fit: contain; }
.nq-counting-egg,.nn-egg { position: relative; }
.counting-egg-photo { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; pointer-events: none; }
.nq-counting-egg > svg { opacity: 0; }
.nq-egg-number,.nn-count-marker { position: relative; z-index: 1; }
.nn-egg:has(.counting-egg-photo) { background: transparent !important; border: 0; box-shadow: none; }
.nn-egg.is-counted .nn-count-marker { display: grid; place-items: center; inline-size: 28px; block-size: 28px; border-radius: 50%; background: var(--g-primary); color: var(--g-on-primary); }
.rescue-intro-photo,.arc-intro-photo { inline-size: min(100%,420px); max-block-size: 420px; place-self: center center; }
.rescue-scenario-photo { float: inline-end; inline-size: clamp(80px,12vw,140px); margin: 0 0 12px 16px; }
[dir="rtl"] .rescue-scenario-photo { margin: 0 16px 12px 0; }
@media (width <= 600px) {
.lesson-example .lw-capture-art { inline-size: 100px; block-size: 100px; }
.wt-context-image { inline-size: 90px; margin-inline-start: 10px; }
.rescue-intro-photo,.arc-intro-photo { inline-size: min(100%,240px); max-block-size: 240px; }
.rescue-scenario-photo { inline-size: 80px; }
}
@media (height <= 550px) and (width > 550px) {
.lesson-example .lw-capture-art { inline-size: 80px; block-size: 80px; }
.lw-trace-scene > .game-image { inline-size: 40px; block-size: 40px; }
.wt-context-image { inline-size: 76px; margin-inline-start: 8px; }
.nq-brand-photo { inline-size: 38px; block-size: 38px; }
.nq-brand { padding-inline-start: 48px; }
}
@media (forced-colors: active) {
.game-image { outline: 1px solid CanvasText; }
.nq-counting-egg > svg { opacity: 1; }
.counting-egg-photo,.counting-nest-photo { display: none; }
}
@media (height <= 700px) and (width <= 550px) {
.rescue-page #lw-dialog[data-lesson="capture"] .lesson-example { padding: 8px 10px; margin: 6px 0; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-art { margin: 0; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-letter-heading { font-size: 48px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-dialog-actions { flex-wrap: nowrap; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-dialog-actions button { padding: 8px; min-inline-size: 0; font-size: 13px; line-height: 1.3; }
}
.arc-briefing-photo { float: inline-end; inline-size: 90px; margin-inline-start: 12px; }
@media (height <= 550px) and (width > 550px) {
.rescue-page #lw-dialog[data-lesson="trace"] { padding-block: 4px; }
}
.rescue-page .wt-dialog .game-room-header { gap: 8px; }
.rescue-page .wt-dialog .game-room-header > button { inline-size: 44px; min-inline-size: 44px; padding: 6px; font-size: 22px; }
.rescue-page .wt-dialog .game-room-header .game-room-preferences { margin: 0; margin-inline-start: auto; }
.rescue-page .wt-dialog .wt-study-card { background: #f8f7f3; color: #17343b; }
html[data-theme="dark"] .rescue-page .wt-dialog .wt-study-card { background: #203b44; color: var(--g-text); }
.rescue-page .wt-dialog .lesson-discovery-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px 8px; }
.lesson-discovery-actions > .lesson-auto-next { grid-column: 1/-1; }
.rescue-page .wt-dialog .lesson-discovery-actions button { min-inline-size: 0; min-block-size: 44px; padding: 8px; font-size: 14px; }
.rescue-page .wt-dialog .wt-topic-menu .game-voice-toggle { margin-block: 8px; }
@media (height <= 700px) and (width <= 550px) {
.rescue-page .wt-dialog .game-level-status { padding: 6px 10px; min-block-size: 40px; }
.rescue-page .wt-dialog .game-level-status .game-life { inline-size: 16px; block-size: 16px; }
.rescue-page .wt-dialog .wt-expedition { padding: 0; margin: 0; }
.rescue-page .wt-dialog > .wt-expedition > :is(svg,p) { display: none; }
.rescue-page .wt-dialog .wt-study-card { margin: 0; padding: 10px 14px; }
.rescue-page .wt-dialog .wt-study-card > :is(.wt-definition,.wt-example,.wt-collocation) { margin: 6px 0; font-size: 17px; line-height: 1.4; }
.rescue-page .wt-dialog .wt-collocation { padding-block-start: 6px; }
.rescue-page .wt-dialog .wt-study-card > .lesson-spelling { margin-block-end: 4px; }
.rescue-page .wt-dialog .wt-context-image { inline-size: 80px; }
}
@media (height <= 550px) and (width > 550px) {
.rescue-page .wt-dialog[data-lesson="word"] { grid-template-rows: auto auto minmax(0,1fr) auto; }
.rescue-page .wt-dialog[data-lesson="word"] .game-room-header { grid-area: 1/1/2/3; }
.rescue-page .wt-dialog[data-lesson="word"] .game-level-status { grid-area: 2/1; }
.rescue-page .wt-dialog[data-lesson="word"] .wt-study-card { grid-area: 2/2/5/3; }
.rescue-page .wt-dialog[data-lesson="word"] .lesson-discovery-actions { grid-area: 3/1; align-self: end; }
.rescue-page .wt-dialog[data-lesson="word"] > .game-voice-status { grid-area: 4/1; }
}
@media (width <= 640px) and (height <= 700px) {
body.rescue-page .ks-dialog[open] { padding: 8px 10px; gap: 6px; }
.rescue-page .ks-dialog .ks-header { gap: 4px; }
.rescue-page .ks-brand h2 { font-size: 21px; }
.rescue-page .ks-brand .ks-bank-label { margin: 0; font-size: 12px; }
.rescue-page .ks-dialog .ks-status-bar { padding: 4px 0; }
.rescue-page .ks-dialog .ks-content { flex: 1 1 auto; gap: 6px; }
.rescue-page .ks-dialog .ks-task { padding: 8px 12px; }
.rescue-page .ks-dialog .ks-prompt { font-size: 19px !important; line-height: 1.4; }
.rescue-page .ks-dialog .ks-instruction { font-size: 12px; }
.rescue-page .ks-dialog .ks-sky { padding: 8px; }
.rescue-page .ks-dialog .ks-books .ks-book { min-block-size: 90px; gap: 3px; }
.rescue-page .ks-dialog .ks-book-art { inline-size: 35px; }
.rescue-page .ks-dialog .ks-book-word { font-size: 20px; }
.rescue-page .ks-dialog .ks-glider { display: none; }
.rescue-page .ks-dialog .ks-library { padding-block-start: 4px; }
.rescue-page .ks-dialog .ks-shelf-books:has(> span:only-child:not(.ks-spine)) { display: none; }
.rescue-page .ks-dialog .ks-restoration > summary { padding-block: 6px; }
}
@media (height <= 500px) and (width > 640px) {
.rescue-page .ks-dialog .ks-content { gap: 6px 16px; }
.rescue-page .ks-dialog .ks-task { padding: 8px 12px; }
.rescue-page .ks-dialog .ks-sky { min-block-size: 100px; }
.rescue-page .ks-dialog .ks-library { padding-block-start: 2px; }
.rescue-page .ks-dialog .ks-restoration > summary { min-block-size: 44px; padding-block: 6px; }
}
@media (height <= 500px) and (width > 640px) {
.rescue-page .ks-dialog .ks-task { padding-block: 6px; }
.rescue-page .ks-dialog .ks-status-bar { padding-block: 2px; }
}
@media (height <= 550px) and (width > 550px) {
.rescue-page .wt-dialog[data-lesson="word"] .wt-study-card > :is(.wt-definition,.wt-example,.wt-collocation) { font-size: 16px; line-height: 1.35; }
.rescue-page .wt-dialog[data-lesson="word"] .lesson-discovery-actions button { padding: 6px; font-size: 13px; }
}
.rescue-page .wt-dialog .wt-study-card:has(.wt-context-image) { display: grid; grid-template-columns: minmax(0,1fr) clamp(80px,15vw,160px); gap: 8px 16px; align-content: center; }
.rescue-page .wt-dialog .wt-context-image { grid-area: 1/2/4/3; float: none; inline-size: 100%; margin: 0; align-self: center; }
.rescue-page .wt-dialog .wt-study-card > .lesson-spelling { grid-area: 1/1; min-inline-size: 0; margin: 0; }
.rescue-page .wt-dialog .wt-study-card > .lw-eyebrow { grid-area: 2/1; margin: 0; }
.rescue-page .wt-dialog .wt-study-card > .wt-definition { grid-area: 3/1; margin: 0; }
.rescue-page .wt-dialog .wt-study-card > :is(.wt-translation,.wt-collocation,.wt-example) { grid-column: 1/-1; margin: 0; }
.rescue-page .wt-dialog :is(.wt-study-card [lang="en"],.lesson-spelling) { font-family: "Inter Variable",sans-serif !important; }
@media (height <= 700px) and (width <= 550px) {
.rescue-page .wt-dialog .wt-study-card:has(.wt-context-image) { grid-template-columns: minmax(0,1fr) 80px; gap: 6px 10px; }
.rescue-page .wt-dialog .wt-study-card > .wt-translation { margin: 0; }
.rescue-page .wt-dialog .wt-study-card > .lesson-spelling { font-size: 15px; line-height: 1.4; }
}
.rescue-intro-copy > .rescue-intro-photo { float: inline-end; inline-size: 160px; block-size: 160px; margin-inline-start: 20px; margin-block-end: 12px; }
.arc-poster > .arc-intro-photo { margin-inline: auto; }
@media (width <= 600px) {
.rescue-intro-copy > .rescue-intro-photo { inline-size: 110px; block-size: 110px; margin-inline-start: 12px; }
}
@media (width <= 340px) {
.nq-brand { padding-inline-start: 0; }
.nq-brand-photo { display: none; }
}
body.rescue-page[data-game-route="word-trail"] .wt-dialog { --wt-paper: #fffdfa; --wt-panel: #f4f3ee; --wt-ink: #183b40; --wt-line: #a5b6b2; --wt-accent: #1c5048; --wt-soft: #e5eeeb; --wt-gold: #f5d694; --wt-gold-ink: #513d1b; background: var(--wt-paper) !important; color: var(--wt-ink); }
html[data-theme="dark"] body.rescue-page[data-game-route="word-trail"] .wt-dialog { --wt-paper: #152d35; --wt-panel: #203c44; --wt-ink: #edf6f2; --wt-line: #90aaa8; --wt-accent: #d4f3e4; --wt-soft: #2d4e52; --wt-gold: #f1d28f; --wt-gold-ink: #403018; }
.rescue-page .wt-dialog .game-room-header { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 10px; }
.rescue-page .wt-dialog .game-room-header h2 { font-size: clamp(22px,2.6vw,30px); line-height: 1.2; letter-spacing: -.025em; color: var(--wt-ink); }
.rescue-page .wt-dialog .game-room-header .game-room-preferences { grid-area: 1/2; display: block; margin: 0; min-inline-size: 0; }
.rescue-page .wt-dialog .game-room-header > button { grid-area: 1/3; }
.rescue-page .wt-dialog .wt-topic-menu { position: relative; }
.rescue-page .wt-dialog .wt-topic-menu > summary { min-inline-size: 44px; min-block-size: 44px; padding: 10px; font-size: 12px; line-height: 1.4; border-radius: 12px; background: var(--wt-panel); color: var(--wt-ink); }
.rescue-page .wt-dialog .game-level-status { display: flex; align-items: center; padding: 8px 12px; margin: 0; min-block-size: 42px; background: transparent; border: 0; border-block-end: 1px solid var(--wt-line); border-radius: 0; box-shadow: none; color: var(--wt-ink); }
.rescue-page .wt-dialog .wt-question-panel { display: grid; grid-template-columns: minmax(100px,1fr) minmax(0,1.35fr); align-items: stretch; gap: 0; flex: 1; min-block-size: 150px; overflow: hidden; border: 1px solid var(--wt-line); border-radius: 22px; background: var(--wt-panel); margin-block: 8px; }
.wt-question-photo { border-radius: 0; inline-size: 100%; block-size: 100%; aspect-ratio: auto; min-block-size: 100%; }
.wt-question-photo img { object-fit: cover; }
.wt-question-copy { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: clamp(18px,3vw,32px); min-inline-size: 0; }
.rescue-page .wt-dialog .wt-task-kicker { margin: 0; font-size: 11px; font-weight: 750; line-height: 1.5; letter-spacing: .08em; color: var(--wt-accent); }
.rescue-page .wt-dialog .wt-question { margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; font: 550 clamp(22px,2.8vw,36px)/1.65 "Inter Variable",sans-serif; font-size: clamp(22px,2.8vw,36px) !important; letter-spacing: -.02em; color: var(--wt-ink); }
.wt-sentence-gap { display: inline-block; min-inline-size: 3.2em; padding: 0 .3em; border: 0; border-block-end: 3px solid #9c6c20; border-radius: 7px 7px 0 0; background: var(--wt-gold); color: var(--wt-gold-ink); font-weight: 750; text-align: center; line-height: 1.25; }
.wt-sentence-gap.is-filled { min-inline-size: 0; border-color: var(--wt-accent); background: var(--wt-soft); color: var(--wt-ink); }
.rescue-page .wt-dialog .wt-task-instruction { margin: 0; font-size: 14px; line-height: 1.5; color: var(--wt-ink); }
.rescue-page .wt-dialog .wt-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 0; }
.rescue-page .wt-dialog .wt-options > button { position: relative; display: flex; align-items: center; gap: 12px; justify-content: start; min-block-size: 76px; padding: 14px; background: var(--wt-paper) !important; color: var(--wt-ink); border: 1px solid var(--wt-line); border-block-end-width: 4px; border-radius: 16px; text-align: start; font: 650 20px/1.3 "Inter Variable",sans-serif; box-shadow: 0 4px 10px #102f3520; transition: background-color 120ms ease,transform 120ms ease; }
.wt-answer-key { flex: 0 0 auto; display: grid; place-items: center; inline-size: 30px; block-size: 30px; border-radius: 9px; background: var(--wt-soft); color: var(--wt-ink); font-size: 13px; font-weight: 750; }
.wt-answer-key::before { content: attr(data-key); }
.wt-answer-arrow::before { content: "↗"; }
.wt-answer-word { flex: 1; overflow-wrap: anywhere; }
.wt-answer-arrow { flex: 0 0 auto; font-size: 18px; color: var(--wt-accent); }
.rescue-page .wt-dialog .wt-options > button:not(:disabled):hover { transform: translateY(-2px); background: var(--wt-soft) !important; border-color: var(--wt-accent); }
.rescue-page .wt-dialog .wt-options > button[data-answer-state="correct"] { background: var(--wt-soft) !important; border: 3px solid var(--wt-accent); }
.rescue-page .wt-dialog .wt-options > button[data-answer-state="correct"] .wt-answer-arrow::before { content: "✓"; }
.rescue-page .wt-dialog .wt-options > button[data-answer-state="correct"] .wt-answer-arrow { font-size: 0; }
.rescue-page .wt-dialog .wt-options > button[data-answer-state="correct"] .wt-answer-arrow::before { font-size: 22px; }
.rescue-page .wt-dialog .wt-options > button[data-answer-state="retry"] { border-style: dashed; box-shadow: none; }
.rescue-page .wt-dialog .wt-options > button[data-answer-state="retry"] .wt-answer-word { text-decoration: line-through; }
.rescue-page .wt-dialog .wt-feedback { font-size: 15px; line-height: 1.55; color: var(--wt-ink); margin: 0; }
.rescue-page .wt-dialog .wt-feedback:not(:empty) { padding: 12px 16px; border-inline-start: 4px solid var(--wt-accent); border-radius: 0 12px 12px 0; background: var(--wt-soft); }
.wt-question-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-start: 4px; }
.rescue-page .wt-dialog .wt-clue-action { min-block-size: 44px; padding: 8px 12px; border: 0; box-shadow: none; background: transparent !important; text-decoration: underline; text-underline-offset: 4px; color: var(--wt-accent); }
.rescue-page .wt-dialog .wt-question-actions .lw-primary { min-block-size: 48px; padding: 10px 20px; border-radius: 12px; }
@media (width <= 600px) {
.rescue-page .wt-dialog .game-room-header { gap: 8px; }
.rescue-page .wt-dialog .game-room-header h2 { font-size: 21px; }
.rescue-page .wt-dialog .wt-question-panel { grid-template-columns: 1fr; grid-template-rows: minmax(100px,1fr) auto; min-block-size: 0; flex: 1; margin: 4px 0; border-radius: 18px; }
.wt-question-photo { min-block-size: 0; }
.wt-question-photo img { object-position: center 43%; }
.wt-question-copy { padding: 14px 18px; gap: 10px; }
.rescue-page .wt-dialog .wt-question { font-size: 25px !important; line-height: 1.65; }
.rescue-page .wt-dialog .wt-task-instruction { font-size: 13px; }
.rescue-page .wt-dialog .wt-options { grid-template-columns: 1fr; gap: 8px; }
.rescue-page .wt-dialog .wt-options > button { min-block-size: 52px; padding: 8px 12px; font-size: 20px; border-block-end-width: 3px; box-shadow: 0 3px 6px #102f3510; }
.wt-answer-key { inline-size: 28px; block-size: 28px; }
.rescue-page .wt-dialog .wt-task-kicker { font-size: 10px; }
}
@media (height <= 700px) and (width <= 550px) {
.rescue-page .wt-dialog[data-lesson="question"] { gap: 6px; padding-block: 10px; }
.rescue-page .wt-dialog .wt-question-panel { grid-template-rows: 50px auto; }
.wt-question-copy { padding: 10px 14px; gap: 6px; }
.rescue-page .wt-dialog .wt-question { font-size: 21px !important; line-height: 1.55; }
.rescue-page .wt-dialog .wt-task-instruction { font-size: 12px; }
.rescue-page .wt-dialog .wt-options > button { min-block-size: 48px; padding: 6px 10px; }
}
@media (height <= 550px) and (width > 550px) {
body.rescue-page[data-game-route="word-trail"] .wt-dialog[data-lesson="question"] { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); grid-template-rows: auto auto minmax(0,1fr) auto; padding: 8px 16px; gap: 6px 18px; }
.rescue-page .wt-dialog[data-lesson="question"] .game-room-header { grid-area: 1/1/2/3; }
.rescue-page .wt-dialog[data-lesson="question"] .game-level-status { grid-area: 2/1/3/3; padding: 4px 8px; min-block-size: 30px; }
.rescue-page .wt-dialog[data-lesson="question"] .wt-question-panel { grid-area: 3/1; grid-template-columns: 1fr; grid-template-rows: 36px auto; min-block-size: 0; margin: 0; }
.rescue-page .wt-dialog[data-lesson="question"] .wt-options { grid-area: 3/2; grid-template-columns: 1fr; align-content: center; gap: 7px; }
.rescue-page .wt-dialog[data-lesson="question"] .wt-options > button { min-block-size: 46px; padding: 6px 10px; font-size: 19px; }
.rescue-page .wt-dialog[data-lesson="question"] .wt-question-copy { padding: 8px 12px; gap: 4px; }
.rescue-page .wt-dialog[data-lesson="question"] .wt-question { font-size: 20px !important; line-height: 1.55; }
.rescue-page .wt-dialog[data-lesson="question"] .wt-task-kicker { font-size: 9px; }
.rescue-page .wt-dialog[data-lesson="question"] .wt-task-instruction { font-size: 12px; }
.rescue-page .wt-dialog[data-lesson="question"] .wt-feedback { grid-area: 4/1; }
.rescue-page .wt-dialog[data-lesson="question"] .wt-question-actions { grid-area: 4/2; }
}
@media (prefers-reduced-motion: reduce) {
.rescue-page .wt-dialog .wt-options > button { transition: none; }
.rescue-page .wt-dialog .wt-options > button:not(:disabled):hover { transform: none; }
}
@media (forced-colors: active) {
body.rescue-page[data-game-route="word-trail"] .wt-dialog { --wt-paper: Canvas; --wt-panel: Canvas; --wt-ink: CanvasText; --wt-line: CanvasText; --wt-accent: LinkText; --wt-soft: ButtonFace; --wt-gold: Highlight; --wt-gold-ink: HighlightText; }
}
.rescue-page .wt-dialog .wt-topic-menu > summary { display: grid; place-items: center; inline-size: 44px; padding: 0; font-size: 26px; line-height: 1; list-style: none; border-radius: 50%; border-color: var(--wt-line); }
.rescue-page .wt-dialog .wt-topic-menu > summary::-webkit-details-marker { display: none; }
.rescue-page .wt-dialog .wt-exit-control { border-radius: 50%; box-shadow: none; background: transparent !important; }
.rescue-page .wt-dialog[data-compact-controls] .game-room-header { grid-template-columns: minmax(0,1fr) auto auto auto; grid-template-rows: auto 3px; gap: 6px 10px; padding-block-end: 6px; }
.wt-session-identity { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px 12px; min-inline-size: 0; }
.wt-session-identity > strong { font-size: 17px; line-height: 1.25; font-weight: 750; }
.wt-session-step { color: var(--wt-accent); font-size: 12px; font-weight: 650; direction: ltr; }
.rescue-page .wt-dialog[data-compact-controls] .game-room-header .game-level-status { grid-area: 1/2; min-block-size: 0; padding: 0; border: 0; margin: 0; }
.rescue-page .wt-dialog[data-compact-controls] .game-level-status .game-level-label { display: none; }
.rescue-page .wt-dialog[data-compact-controls] .game-lives-caption { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.rescue-page .wt-dialog[data-compact-controls] .game-life:not(:first-child) { display: none; }
.rescue-page .wt-dialog[data-compact-controls] .game-lives { display: flex; flex-direction: row-reverse; align-items: center; gap: 6px; }
.rescue-page .wt-dialog[data-compact-controls] .game-life { inline-size: 18px; block-size: 18px; }
.rescue-page .wt-dialog[data-compact-controls] .game-lives-count { font-size: 13px; }
.rescue-page .wt-dialog[data-compact-controls] .game-room-header .game-room-preferences { grid-area: 1/3; }
.rescue-page .wt-dialog[data-compact-controls] .game-room-header > button { grid-area: 1/4; }
.wt-session-progress { grid-area: 2/1/3/5; display: block; inline-size: 100%; block-size: 3px; border: 0; border-radius: 2px; overflow: hidden; background: var(--wt-soft); accent-color: var(--wt-accent); }
.wt-session-progress::-webkit-progress-bar { background: var(--wt-soft); }
.wt-session-progress::-webkit-progress-value { background: var(--wt-accent); }
.wt-session-progress::-moz-progress-bar { background: var(--wt-accent); }
@media (height <= 550px) and (width > 550px) {
.rescue-page .wt-dialog[data-compact-controls] .wt-question-panel { grid-area: 2/1/4/2; }
.rescue-page .wt-dialog[data-compact-controls] .wt-options { grid-area: 2/2/4/3; }
.rescue-page .wt-dialog[data-compact-controls] { grid-template-rows: auto minmax(0,1fr) auto auto; }
}
body.rescue-page[data-game-route="word-trail"] .wt-dialog[data-lesson="word"] { display: flex; flex-direction: column; gap: 10px; padding: 16px max(20px,calc((100dvw - 1000px)/2)); }
.rescue-page .wt-dialog .wt-study-card.wt-discovery { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); grid-template-rows: minmax(0,1fr); gap: 0; flex: 1; min-block-size: 0; margin: 4px 0; padding: 0; border: 1px solid var(--wt-line); border-radius: 22px; overflow: hidden; background: var(--wt-panel); color: var(--wt-ink); text-align: start; }
.rescue-page .wt-dialog .wt-discovery .wt-discovery-scene { grid-area: 1/1; align-self: stretch; float: none; min-block-size: 0; block-size: 100%; inline-size: 100%; aspect-ratio: auto; margin: 0; border-radius: 0; }
.wt-discovery-scene img { object-fit: cover; object-position: center; }
.wt-discovery-content { display: flex; flex-direction: column; justify-content: center; gap: 24px; min-inline-size: 0; padding: clamp(20px,3vw,36px); overflow-y: auto; overscroll-behavior: contain; }
.wt-discovery-word-header { min-inline-size: 0; }
.rescue-page .wt-dialog .wt-discovery-topic { display: inline-block; padding: 5px 9px; border-radius: 6px; background: var(--wt-soft); color: var(--wt-accent); font: 750 11px/1.3 "Inter Variable",sans-serif; letter-spacing: .06em; }
.rescue-page .wt-dialog .wt-discovery-word { font: 750 clamp(30px,4vw,44px)/1.15 "Inter Variable",sans-serif; letter-spacing: -.025em; color: var(--wt-ink); margin: 12px 0 6px; overflow-wrap: anywhere; }
.rescue-page .wt-dialog .wt-discovery .lesson-spelling { text-align: start; font-size: 16px; font-weight: 550; line-height: 1.5; letter-spacing: .02em; color: var(--wt-accent); margin: 0; }
.wt-discovery-meaning,.wt-discovery-usage { min-inline-size: 0; }
.rescue-page .wt-dialog .wt-discovery-label { font-size: 12px; line-height: 1.4; font-weight: 650; color: var(--wt-accent); margin: 0 0 8px; }
.rescue-page .wt-dialog .wt-discovery .wt-definition { font-size: 21px !important; line-height: 1.45; font-weight: 550; margin: 0; color: var(--wt-ink); }
.rescue-page .wt-dialog .wt-discovery .wt-translation { text-align: start; font: 16px/1.6 "Noto Sans Arabic Variable",sans-serif; color: var(--wt-ink); margin: 8px 0 0; }
.wt-discovery-usage { padding-block-start: 18px; border-block-start: 1px solid var(--wt-line); }
.rescue-page .wt-dialog .wt-discovery .wt-collocation { border: 0; padding: 0; margin: 0 0 10px; font: 700 21px/1.4 "Inter Variable",sans-serif; color: var(--wt-ink); }
.rescue-page .wt-dialog .wt-discovery .wt-example { margin: 0; font: 450 19px/1.6 "Inter Variable",sans-serif; color: var(--wt-ink); }
.wt-discovery .wt-example mark { padding: 1px 3px; border-radius: 4px; background: var(--wt-gold); color: var(--wt-gold-ink); font-weight: 650; }
.rescue-page .wt-dialog[data-lesson="word"] > .game-voice-status { flex: 0 0 auto; min-block-size: 20px; font-size: 12px; line-height: 1.5; margin: 0; color: var(--wt-accent); }
.rescue-page .wt-dialog[data-lesson="word"] > .game-voice-status:empty { display: none; }
.rescue-page .wt-dialog .lesson-discovery-actions { flex: 0 0 auto; grid-template-columns: minmax(0,1fr) minmax(0,1.3fr); }
.rescue-page .wt-dialog .lesson-discovery-actions button { border-radius: 12px; min-block-size: 48px; font-size: 15px; }
.rescue-page .wt-dialog .lesson-auto-next { margin: 0; color: var(--wt-ink); }
@media (width <= 600px) {
body.rescue-page[data-game-route="word-trail"] .wt-dialog[data-lesson="word"] { gap: 6px; padding: 12px; }
.rescue-page .wt-dialog .wt-study-card.wt-discovery { grid-template-columns: 1fr; grid-template-rows: minmax(100px,1fr) auto; border-radius: 18px; }
.rescue-page .wt-dialog .wt-discovery .wt-discovery-scene { grid-area: 1/1; }
.wt-discovery-content { grid-area: 2/1; gap: 16px; padding: 18px 20px; }
.rescue-page .wt-dialog .wt-discovery-word { font-size: 34px; margin: 8px 0 4px; }
.rescue-page .wt-dialog .wt-discovery .wt-definition { font-size: 19px !important; }
.rescue-page .wt-dialog .wt-discovery .wt-example { font-size: 18px; line-height: 1.5; }
.rescue-page .wt-dialog .wt-discovery .wt-collocation { font-size: 19px; margin-block-end: 6px; }
.rescue-page .wt-dialog .lesson-discovery-actions button { font-size: 14px; }
}
@media (width <= 550px) and (height <= 700px) {
body.rescue-page[data-game-route="word-trail"] .wt-dialog[data-lesson="word"] { padding: 8px 12px; gap: 5px; }
.rescue-page .wt-dialog .wt-study-card.wt-discovery { grid-template-rows: minmax(60px,1fr) auto; margin: 0; }
.wt-discovery-content { padding: 10px 14px; gap: 9px; }
.rescue-page .wt-dialog .wt-discovery-word { font-size: 29px; margin: 5px 0 3px; }
.rescue-page .wt-dialog .wt-discovery .lesson-spelling { font-size: 14px; line-height: 1.4; }
.rescue-page .wt-dialog .wt-discovery-topic { display: none; }
.rescue-page .wt-dialog .wt-discovery .wt-definition { font-size: 18px !important; line-height: 1.4; }
.rescue-page .wt-dialog .wt-discovery-label { font-size: 11px; margin-block-end: 4px; }
.rescue-page .wt-dialog .wt-discovery .wt-translation { font-size: 13px; line-height: 1.45; margin-block-start: 4px; }
.wt-discovery-usage { padding-block-start: 8px; }
.rescue-page .wt-dialog .wt-discovery .wt-collocation { font-size: 18px; line-height: 1.3; margin-block-end: 4px; }
.rescue-page .wt-dialog .wt-discovery .wt-example { font-size: 17px; line-height: 1.4; }
.rescue-page .wt-dialog .lesson-discovery-actions button { min-block-size: 44px; padding: 6px; }
}
@media (height <= 550px) and (width > 550px) {
body.rescue-page[data-game-route="word-trail"] .wt-dialog[data-lesson="word"] { padding: 8px 16px; gap: 4px; }
.rescue-page .wt-dialog .wt-study-card.wt-discovery { grid-template-columns: minmax(0,.45fr) minmax(0,1.55fr); margin: 0; }
.wt-discovery-content { grid-area: 1/2; padding: 8px 16px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 6px 16px; align-content: center; }
.wt-discovery-word-header { grid-area: 1/1; }
.wt-discovery-meaning { grid-area: 2/1; }
.wt-discovery-usage { grid-area: 1/2/3/3; padding-block-start: 0; padding-inline-start: 12px; border-block-start: 0; border-inline-start: 1px solid var(--wt-line); }
.rescue-page .wt-dialog .wt-discovery-word { font-size: 28px; margin: 5px 0 2px; }
.rescue-page .wt-dialog .wt-discovery .lesson-spelling { font-size: 13px; }
.rescue-page .wt-dialog .wt-discovery .wt-definition { font-size: 16px !important; line-height: 1.35; }
.rescue-page .wt-dialog .wt-discovery .wt-translation { font-size: 12px; margin-block-start: 4px; }
.rescue-page .wt-dialog .wt-discovery-label { margin-block-end: 4px; font-size: 11px; }
.rescue-page .wt-dialog .wt-discovery .wt-collocation { font-size: 17px; margin-block-end: 6px; }
.rescue-page .wt-dialog .wt-discovery .wt-example { font-size: 16px; line-height: 1.45; }
.rescue-page .wt-dialog[data-lesson="word"] .lesson-discovery-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.rescue-page .wt-dialog[data-lesson="word"] .lesson-discovery-actions button { flex: 1; min-block-size: 44px; }
.rescue-page .wt-dialog[data-lesson="word"] .lesson-auto-next { flex: 1.5; min-block-size: 44px; font-size: 11px; }
}
@media (height <= 350px) and (550px < width <= 700px) {
.rescue-page .wt-dialog .wt-study-card.wt-discovery { grid-template-columns: 64px minmax(0,1fr); }
.wt-discovery-content { padding: 6px 12px; gap: 4px 12px; align-content: start; }
.rescue-page .wt-dialog .wt-discovery-topic { display: none; }
.rescue-page .wt-dialog .wt-discovery-word { font-size: 26px; margin: 3px 0 2px; }
.rescue-page .wt-dialog .wt-discovery .lesson-spelling { font-size: 12px; }
.rescue-page .wt-dialog .wt-discovery .wt-translation { line-height: 1.4; margin-block-start: 3px; }
}
.rescue-page :is(.lw-dialog,.nn-dialog,.nq-dialog) { box-sizing: border-box; min-inline-size: 0; max-inline-size: calc(100dvw - 20px); max-block-size: calc(100dvh - 20px); overscroll-behavior: contain; }
.rescue-page :is(.lw-dialog-body,.nq-panel,.nq-settings-panel,.lw-arena-settings-body) { min-inline-size: 0; overflow-wrap: anywhere; }
.rescue-page :is(.nq-overlay,.lw-dialog-body) { overscroll-behavior: contain; }
.rescue-page .nq-overlay { align-items: safe center; scrollbar-gutter: stable; }
.rescue-page .nq-panel { max-inline-size: 100%; margin-block: auto; }
.rescue-page .nq-panel .lw-button { min-inline-size: 44px; min-block-size: 44px; max-inline-size: 100%; white-space: normal; }
.rescue-page .nq-obstacle-puzzle { display: grid; justify-items: center; gap: 12px; }
.rescue-page .nq-mechanism-clue { font-size: clamp(24px,5vw,38px); letter-spacing: .08em; direction: ltr; }
.rescue-page .nq-puzzle-answers { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.rescue-page .nq-puzzle-answers button { margin: 0; min-inline-size: 48px; min-block-size: 48px; }
.rescue-page .nq-puzzle-answers :is(.is-lit,[aria-pressed="true"]) { background: var(--g-reward-bg) !important; color: var(--g-reward-text); border-color: var(--g-reward-edge); }
.rescue-page :is(.lw-region-grid,.lw-journal-grid,.game-choice-cards,.lw-camp-grid) { max-inline-size: 100%; min-inline-size: 0; }
.rescue-page .nq-settings-panel { position: fixed; inset-inline: auto 12px; inset-block: 80px auto; inline-size: min(340px,calc(100dvw - 24px)); max-block-size: calc(100dvh - 100px); overflow-y: auto; box-sizing: border-box; overscroll-behavior: contain; }
[dir="rtl"] .rescue-page .nq-settings-panel { inset-inline: 12px auto; }
.rescue-page :is(.nq-settings,.lw-arena-settings) > .game-settings-trigger { display: grid; place-items: center; box-sizing: border-box; inline-size: 44px; block-size: 44px; min-block-size: 44px; padding: 0; border-radius: 14px; list-style: none; }
.game-settings-trigger::-webkit-details-marker { display: none; }
.game-menu-icon { display: inline-flex; flex: 0 0 22px; inline-size: 22px; block-size: 22px; vertical-align: middle; }
.game-menu-icon svg { inline-size: 100%; block-size: 100%; }
.rescue-page :is(.nq-settings-panel,.lw-arena-settings-body).game-menu { position: fixed; z-index: 41; inset-inline: auto max(10px,env(safe-area-inset-right)); box-sizing: border-box; inline-size: min(330px,calc(100dvw - 20px)); display: grid; grid-template-rows: auto auto minmax(0,1fr) auto; gap: 10px; padding: 12px; overflow: hidden; border-radius: 20px; box-shadow: 0 16px 48px #0005; }
[dir="rtl"] .rescue-page :is(.nq-settings-panel,.lw-arena-settings-body).game-menu { inset-inline: auto max(10px,env(safe-area-inset-left)); }
.game-menu-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.game-menu-title { display: grid; padding-inline-start: 4px; line-height: 1.25; }
.rescue-page .game-menu-title > span { color: var(--g-muted); font-size: 12px; }
.game-menu-heading strong { font-size: 18px; }
.rescue-page .game-menu .game-menu-close { display: grid; place-items: center; flex: 0 0 44px; inline-size: 44px; min-block-size: 44px; padding: 0 !important; border: 1px solid var(--g-border); border-radius: 12px; cursor: pointer; }
.game-menu-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; }
.rescue-page .game-menu .game-menu-tab { display: flex; justify-content: center; align-items: center; gap: 5px; min-inline-size: 0; min-block-size: 44px; padding: 7px 4px !important; border: 1px solid var(--g-border); border-radius: 12px; font-size: 12px; font-weight: 700; cursor: pointer; }
.rescue-page .game-menu .game-menu-tab[aria-selected="true"] { background: var(--g-primary) !important; color: var(--g-on-primary); border-color: var(--g-primary); }
.rescue-page .game-menu .game-menu-tab[aria-selected="true"] span { color: inherit; }
.game-menu-page { display: grid; align-content: start; gap: 8px; min-inline-size: 0; min-block-size: 0; padding: 3px 4px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.game-menu-page[hidden] { display: none !important; }
.rescue-page .game-menu .game-menu-page > label { margin: 0; font-size: 13px; line-height: 1.4; }
.rescue-page .game-menu .game-menu-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-block-size: 44px; padding: 6px 10px; box-sizing: border-box; border: 1px solid var(--g-border); border-radius: 12px; font-size: 13px; }
.rescue-page .game-menu-toggle input[type="checkbox"] { appearance: none; flex: 0 0 36px; inline-size: 36px; block-size: 22px; order: 2; margin: 0; border: 1px solid var(--g-border); border-radius: 20px; background: var(--g-raised); cursor: pointer; }
.rescue-page .game-menu-toggle input[type="checkbox"]::before { content: ""; display: block; inline-size: 14px; block-size: 14px; margin: 3px; border-radius: 50%; background: var(--g-text); }
.rescue-page .game-menu-toggle input[type="checkbox"]:checked { background: var(--g-primary); }
.rescue-page .game-menu-toggle input[type="checkbox"]:checked::before { background: var(--g-on-primary); translate: 14px; }
[dir="rtl"] .rescue-page .game-menu-toggle input[type="checkbox"]:checked::before { translate: -14px; }
.rescue-page .game-menu-toggle[aria-pressed]::after { content: ""; box-sizing: border-box; flex: 0 0 36px; inline-size: 36px; block-size: 22px; border: 1px solid var(--g-border); border-radius: 20px; background: radial-gradient(circle at 10px 10px,var(--g-text) 0 7px,transparent 7.5px) var(--g-raised); }
.rescue-page .game-menu-toggle[aria-pressed="true"]::after { background: radial-gradient(circle at 24px 10px,var(--g-on-primary) 0 7px,transparent 7.5px) var(--g-primary); }
.rescue-page .game-menu .game-effects-volume { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 0 8px; min-block-size: 0; padding: 0 2px; font-size: 13px; }
.rescue-page .game-menu .game-effects-volume input[type="range"] { grid-column: 1/-1; inline-size: 100%; block-size: 44px; min-block-size: 44px; margin: 0; padding: 0; }
.game-menu .game-audio-layers { display: grid; gap: 8px; }
.rescue-page .game-menu .game-menu-resume { margin: 0; min-block-size: 44px; text-align: center; background: var(--g-primary) !important; color: var(--g-on-primary); border-color: var(--g-primary); }
.rescue-page .game-menu .game-menu-page > button { inline-size: 100%; margin: 0; font-size: 13px; }
.game-menu .lw-help { margin: 0; font-size: 12px; }
.rescue-page .nq-dialog[data-auto-run="true"] .nq-controls :is(.nq-move,.nq-guide) { display: none; }
.rescue-page.game-controls-open .nq-dialog[data-auto-run="true"] .nq-controls :is(.nq-move,.nq-guide) { display: block; }
.rescue-page #nq-dialog .game-controls-toggle { display: grid; }
.rescue-page:not(.game-focus) #nq-dialog .nq-header { display: flex; flex-wrap: wrap; gap: 8px; }
.nq-ready-cue { position: absolute; z-index: 6; inset: 24% auto auto 50%; translate: -50% 0; padding: 12px 22px; border: 2px solid var(--g-border); border-radius: 18px; background: var(--g-surface); color: var(--g-text); font-size: clamp(20px,5vw,30px); font-weight: 800; box-shadow: 0 6px 20px #0003; pointer-events: none; }
.nq-ready-cue[hidden],.lw-turn-cue[hidden] { display: none; }
.lw-turn-cue { position: absolute; z-index: 5; translate: -50% 0; max-inline-size: 170px; padding: 5px 10px; border: 1px solid var(--g-border); border-radius: 12px; background: var(--g-surface); color: var(--g-text); font-size: 12px; font-weight: 750; white-space: nowrap; pointer-events: none; box-shadow: 0 3px 10px #0003; }
.lw-turn-cue[data-state="queued"] { border-style: dashed; }
.lw-turn-cue[data-state="blocked"] { color: var(--g-danger); border-color: currentcolor; }
.lw-turn-announcement { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.game-focus .nq-touch-lesson { flex-wrap: wrap; gap: 12px; }
@media (forced-colors: active) {
.rescue-page .game-menu-toggle input[type="checkbox"] { appearance: auto; }
.rescue-page .game-menu-toggle input[type="checkbox"]::before { display: none; }
}
@media (width <= 700px) {
.rescue-page :is(.lw-dialog,.nn-dialog) { inline-size: calc(100dvw - 16px); max-inline-size: calc(100dvw - 16px); }
.rescue-page .nq-panel { padding: 16px 12px; }
.rescue-page .nq-panel h3 { font-size: clamp(19px,5vw,24px); }
.rescue-page .nq-panel-copy { font-size: 14px; }
.rescue-page .nq-puzzle-visual { padding: 10px 6px; }
.rescue-page .nq-controls .nq-interact { white-space: normal; max-inline-size: 55%; }
.rescue-page .lw-dialog-actions { flex-wrap: wrap; }
}
@media (height <= 550px) {
.rescue-page .nq-overlay { align-items: start; padding: 8px; }
.rescue-page .nq-panel { margin-block: 0; }
.rescue-page .nq-settings-panel { inset-block-start: 68px; max-block-size: calc(100dvh - 80px); }
}
.rescue-page #lw-dialog[open][data-lesson="capture"] { display: grid; grid-template-rows: 44px minmax(0,1fr); gap: 8px; inline-size: min(960px,calc(100dvw - 24px)); block-size: min(760px,calc(100dvh - 24px)); max-block-size: calc(100dvh - 24px); padding: 14px 20px; overflow: hidden; border: 3px solid var(--g-border); border-radius: 30px 30px 24px 24px; background: radial-gradient(ellipse at 0 0,var(--g-soft),transparent 65%),var(--lc-paper) !important; box-shadow: 0 7px 0 var(--g-accent),0 24px 70px #031e2b66,inset 0 0 0 4px var(--lc-paper); }
.rescue-page #lw-dialog[data-lesson="capture"]::before,.rescue-page #lw-dialog[data-lesson="capture"]::after { content: ""; position: absolute; z-index: 0; inline-size: 64px; block-size: 28px; inset: auto auto 40px 8px; border-radius: 0 100%; background: hsl(var(--card-hue,100) 35% 45% / 16%); transform: rotate(-28deg); box-shadow: 0 -34px 0 hsl(var(--card-hue,100) 35% 45% / 12%); pointer-events: none; }
.rescue-page #lw-dialog[data-lesson="capture"]::after { inset: 65px 8px auto auto; transform: rotate(28deg); }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-dialog-top { position: relative; z-index: 1; margin: 0; min-block-size: 0; align-items: center; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-dialog-top .lw-eyebrow { padding: 5px 10px; font-size: 12px; border-radius: 8px 16px; box-shadow: 0 3px 0 var(--g-reward-edge); }
.rescue-page #lw-dialog[data-lesson="capture"] #lw-dialog-body { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: 100px minmax(100px,1fr) 36px 52px; gap: 8px; min-block-size: 0; overflow: visible; padding: 0; }
.rescue-page #lw-dialog[data-lesson="capture"] #lw-dialog-body > * { grid-area: auto; min-block-size: 0; min-inline-size: 0; margin: 0; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-hero { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 20px minmax(0,1fr); gap: 4px 16px; padding: 0; align-items: center; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-chapter { grid-area: 1/1/2/4; margin: 0; padding: 0; border: 0; background: none; font-size: 12px; line-height: 1.4; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-letter-heading { grid-area: 2/2; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 48px; line-height: 1; margin: 0; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-letter-heading span { display: grid; place-items: center; inline-size: 70px; block-size: 70px; border: 2px solid var(--g-border); border-radius: 24px; color: var(--g-accent); background: linear-gradient(145deg,var(--g-surface),var(--g-soft)); box-shadow: inset 0 3px 0 #ffffff40,0 5px 0 var(--g-border),0 8px 12px #082d2520; text-shadow: 0 2px 0 var(--g-surface); }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-letter-heading .lw-capture-lowercase { background: linear-gradient(145deg,var(--g-surface),var(--g-letter-bg)); color: var(--g-letter-text); font-size: .9em; transform: rotate(5deg); }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-kicker,.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-hero::before,.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-hero::after { display: none; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-hero .lw-card-guide { grid-area: 2/3; display: block; margin: 0; padding: 0; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-card-guide-pip,.rescue-page #lw-dialog[data-lesson="capture"] .lw-card-guide-pip svg { inline-size: 56px; block-size: 64px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-card-guide-copy { display: none; }
.rescue-page #lw-dialog[data-lesson="capture"] #lw-dialog-body .lesson-example { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); grid-template-rows: minmax(0,1fr); gap: 12px; padding: 10px; border: 2px solid var(--lc-edge); border-radius: 22px; align-items: stretch; align-self: stretch; box-sizing: border-box; block-size: 100%; background: var(--lc-art); box-shadow: 0 4px 0 color-mix(in srgb,var(--g-border) 50%,transparent); overflow: hidden; }
.rescue-page #lw-dialog[data-lesson="capture"] .lesson-example .lw-capture-art { grid-area: 1/1; position: relative; block-size: 100%; min-block-size: 0; max-block-size: 100%; padding: 0; margin: 0; border: 0; border-radius: 14px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-art > .game-image { position: absolute; inset: 0; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-art :is(.game-image,img,svg) { block-size: 100%; min-block-size: 0; max-block-size: 100%; }
.rescue-page #lw-dialog[data-lesson="capture"] .lesson-example .lw-capture-word { grid-area: 1/2; padding: 4px 0; justify-content: center; gap: 8px; border: 0; background: none; }
.rescue-page #lw-dialog[data-lesson="capture"] .lesson-example-label { margin: 0; font-size: 12px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lesson-word-text { font-size: clamp(28px,4.4vw,52px); line-height: 1.3; white-space: nowrap; overflow-wrap: normal; }
.rescue-page #lw-dialog[data-lesson="capture"] .lesson-word[data-word-length="long"] .lesson-word-text { font-size: clamp(20px,3vw,36px); }
.rescue-page #lw-dialog[data-lesson="capture"] .lesson-spelling { font-size: 12px; line-height: 1.4; margin: 2px 0 0; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-translation { margin: 0; font-size: 14px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-audio-actions { display: flex; justify-content: center; margin: 0; padding: 0; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-audio-actions button { inline-size: min(160px,100%); min-block-size: 44px; padding: 6px 10px; border: 2px solid var(--g-border); border-radius: 24px; font-size: 13px; line-height: 1.3; box-shadow: 0 3px 0 var(--g-border); }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-audio-status { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-summary { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-reward { display: flex; flex-direction: column; align-items: start; gap: 0; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-reward span { padding: 0; border: 0; background: transparent; font-size: 11px; line-height: 1.4; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-progress { display: block; padding: 0; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-progress > span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-progress progress { display: none; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-discovery-trail { display: flex; gap: 4px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-discovery-token { inline-size: 24px; block-size: 24px; border-radius: 8px; font-size: 12px; border-width: 1px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-discovery-token small { display: none; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-dialog-actions { position: relative; display: grid; grid-template-columns: auto minmax(0,1fr); gap: 10px; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-dialog-actions > button { min-block-size: 48px; padding: 6px 12px; border-radius: 16px; font-size: 15px; box-shadow: 0 4px 0 var(--g-border),inset 0 2px 0 #ffffff30; }
.lw-card-options { position: relative; min-inline-size: 0; }
.lw-card-options:not([open]) > .lw-card-options-panel { display: none; }
.rescue-page .lw-card-options > summary { display: grid; place-items: center; list-style: none; min-block-size: 48px; padding: 0 12px; cursor: pointer; border: 1px solid var(--g-border); border-radius: 16px; background: var(--g-soft); color: var(--g-text); font-size: 13px; font-weight: 650; }
.lw-card-options > summary::-webkit-details-marker { display: none; }
.rescue-page .lw-card-options-panel { position: absolute; z-index: 10; inset-block-end: 60px; inset-inline-start: 0; display: grid; gap: 8px; inline-size: 270px; max-inline-size: calc(100dvw - 48px); padding: 12px; box-sizing: border-box; border: 2px solid var(--g-border); border-radius: 20px; background: var(--g-surface); color: var(--g-text); box-shadow: 0 8px 24px #031e2b55; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-card-options-panel button { min-block-size: 44px; inline-size: 100%; padding: 6px 10px; margin: 0; font-size: 13px; border-radius: 12px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lesson-auto-next { display: flex; align-items: center; gap: 8px; min-block-size: 44px; margin: 0; font-size: 12px; line-height: 1.4; cursor: pointer; }
.rescue-page #lw-dialog[data-lesson="capture"] .lesson-auto-next input { inline-size: 20px; block-size: 20px; flex: 0 0 20px; }
.rescue-page #lw-dialog[open][data-lesson="trace"] { display: grid; grid-template-rows: 44px minmax(0,1fr); gap: 6px; inline-size: min(960px,calc(100dvw - 16px)); block-size: min(740px,calc(100dvh - 16px)); padding: 12px; overflow: hidden; }
.rescue-page #lw-dialog[data-lesson="trace"] .lw-dialog-top { margin: 0; }
.rescue-page #lw-dialog[data-lesson="trace"] #lw-dialog-body { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: 32px 44px 44px 20px minmax(70px,1fr) 24px 94px; gap: 5px 10px; min-block-size: 0; overflow: hidden; padding: 0; }
.rescue-page #lw-dialog[data-lesson="trace"] #lw-dialog-body > * { margin: 0; min-block-size: 0; }
.rescue-page #lw-dialog[data-lesson="trace"] #lw-dialog-body > h2 { grid-area: 1/1; font-size: 28px; }
.rescue-page #lw-dialog[data-lesson="trace"] #lw-dialog-body > .lw-card-guide { display: none; }
.rescue-page #lw-dialog[data-lesson="trace"] .lw-trace-scene { grid-area: 1/2/3/3; display: flex; align-items: center; justify-content: center; padding: 4px; overflow: hidden; }
.rescue-page #lw-dialog[data-lesson="trace"] .lw-trace-scene > .game-image { inline-size: 48px; block-size: 48px; flex: 0 0 48px; }
.rescue-page #lw-dialog[data-lesson="trace"] .lw-trace-scene .lesson-word-text { font-size: 20px; }
.rescue-page #lw-dialog[data-lesson="trace"] .lw-trace-scene .lesson-spelling { font-size: 10px; }
.rescue-page #lw-dialog[data-lesson="trace"] .lw-audio-actions { grid-area: 2/1; display: flex; gap: 4px; }
.rescue-page #lw-dialog[data-lesson="trace"] .lw-audio-actions button { flex: 1; padding: 4px; min-block-size: 44px; font-size: 12px; }
.rescue-page #lw-dialog[data-lesson="trace"] .lw-audio-status { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.rescue-page #lw-dialog[data-lesson="trace"] .lw-form-switch { grid-area: 3/1/4/3; display: flex; gap: 8px; justify-content: center; }
.rescue-page #lw-dialog[data-lesson="trace"] .lw-form-switch button { min-block-size: 44px; margin: 0; padding: 4px 16px; }
.rescue-page #lw-dialog[data-lesson="trace"] .lw-stroke-label { grid-area: 4/1/5/3; font-size: 12px; }
.rescue-page #lw-dialog[data-lesson="trace"] .lw-trace-field { grid-area: 5/1/6/3; inline-size: 100%; block-size: 100%; max-block-size: none; min-block-size: 0; margin: 0; }
.rescue-page #lw-dialog[data-lesson="trace"] .lw-inline-status { grid-area: 6/1/7/3; font-size: 12px; }
.rescue-page #lw-dialog[data-lesson="trace"] .lw-help { display: none; }
.rescue-page #lw-dialog[data-lesson="trace"] .lw-dialog-actions { grid-area: 7/1/8/3; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; position: static; padding: 0; border: 0; }
.rescue-page #lw-dialog[data-lesson="trace"] .lw-dialog-actions button { min-block-size: 44px; margin: 0; padding: 4px; font-size: 12px; line-height: 1.3; }
.rescue-page .nq-overlay:has(.nq-panel[data-puzzle]) { position: fixed; inset: 8px; z-index: 40; display: grid; place-items: center; padding: 0; overflow: hidden; background: transparent; }
.rescue-page .nq-panel[data-puzzle] { display: grid; grid-template-rows: auto minmax(0,1fr) auto; gap: 10px; inline-size: min(100%,960px); block-size: min(740px,100%); min-block-size: 0; margin: 0; padding: 18px; overflow: hidden; }
.rescue-page .nq-panel[data-puzzle] .nq-puzzle-heading { display: grid; gap: 5px; }
.rescue-page .nq-panel[data-puzzle] .nq-puzzle-heading > * { margin: 0; }
.rescue-page .nq-panel[data-puzzle] .nq-puzzle-heading h3 { font-size: clamp(20px,3vw,30px); }
.rescue-page .nq-panel[data-puzzle] .nq-puzzle-heading > p { font-size: 14px; line-height: 1.45; }
.rescue-page .nq-panel[data-puzzle]:has(.nq-worked-example:not([hidden])) .nq-puzzle-heading > p:not(.nq-eyebrow) { display: none; }
.nq-puzzle-workspace { display: grid; align-content: center; min-block-size: 0; }
.rescue-page .nq-panel[data-puzzle] .nq-puzzle-visual { margin: 0; padding: 12px; min-block-size: 0; }
.rescue-page .nq-panel[data-puzzle] .nq-puzzle-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; }
.rescue-page .nq-panel[data-puzzle] .nq-puzzle-actions > :is(.nq-puzzle-answers,.nq-puzzle-feedback,.nq-join) { flex-basis: 100%; margin: 0; }
.rescue-page .nq-panel[data-puzzle] .nq-puzzle-feedback:empty { display: none; }
.rescue-page .nq-panel[data-puzzle] .nq-puzzle-feedback { font-size: 12px; line-height: 1.4; }
.rescue-page .nq-panel[data-puzzle] .nq-puzzle-actions > button { margin: 0; padding: 7px 10px; font-size: 13px; min-block-size: 44px; }
.rescue-page .nq-panel[data-puzzle] .nq-puzzle-answers { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; inline-size: 100%; }
.rescue-page .nq-panel[data-puzzle] .nq-puzzle-answers button { min-inline-size: 0; min-block-size: 44px; margin: 0; padding: 6px; font-size: 20px; line-height: 1.3; }
.rescue-page .nq-panel[data-puzzle="wind"] .nq-puzzle-answers button { font-size: 13px; }
.rescue-page .nq-panel[data-puzzle="switches"] .nq-puzzle-answers { grid-template-columns: repeat(5,minmax(0,1fr)); }
.rescue-page .nq-panel[data-puzzle] .nq-puzzle-answers > .lw-primary { grid-column: 1/-1; font-size: 13px; }
.rescue-page .nq-panel[data-puzzle] .nq-worked-example:not([hidden]) { font-size: 12px; line-height: 1.4; margin: 4px 0 0; padding: 4px; }
.rescue-page .nq-panel[data-puzzle] .nq-worked-example .nq-counting-nest { display: none; }
.rescue-page .nq-panel[data-puzzle] .nq-worked-example p { margin: 0; }
.rescue-page .nq-counting-nest { padding: 10px 10px 6px; border: 0; border-radius: 16px; background: transparent; box-shadow: none; }
.rescue-page .nq-counting-nest h4 { color: var(--g-text); font-size: 14px; margin: 0 0 4px; }
.nq-nest-bowl { position: relative; padding: 4px 10px 30px; min-block-size: 104px; isolation: isolate; }
.nq-woven-nest { position: absolute; inline-size: 100%; block-size: 70px; inset: auto 0 0; z-index: -1; }
.rescue-page .nq-egg-tray { position: relative; gap: 4px; align-items: end; }
.rescue-page .nq-panel .nq-counting-egg { inline-size: 48px; block-size: 64px; min-block-size: 64px; flex: 0 0 48px; border: 0; border-radius: 12px; outline: 0; background: transparent !important; box-shadow: none; }
.rescue-page .nq-counting-egg > svg { opacity: 1; inline-size: 48px; block-size: 60px; filter: drop-shadow(0 2px 1px #60401d20); }
.rescue-page .nq-counting-egg .nq-egg-number { position: absolute; inset: auto -2px -6px auto; display: grid; place-items: center; min-inline-size: 22px; block-size: 22px; padding: 0 3px; border-radius: 50%; background: var(--g-primary); color: var(--g-on-primary); font: 750 13px/1 sans-serif; }
.rescue-page .nq-egg-number:empty { display: none; }
.rescue-page .nq-counting-egg[aria-pressed="true"] { outline: 0; transform: translateY(-3px); }
.rescue-page .nq-counted { min-block-size: 16px; margin: 4px 0 0; color: var(--g-muted); }
@media (width <= 600px) {
.rescue-page .nq-panel[data-puzzle] { padding: 12px; gap: 8px; }
.rescue-page .nq-panel[data-puzzle] .nq-puzzle-visual { padding: 8px 4px; gap: 4px; }
.rescue-page .nq-counting-nest { padding: 4px 2px; }
.rescue-page .nq-counting-nest h4 { font-size: 12px; }
.rescue-page .nq-nest-bowl { padding: 4px 0 18px; min-block-size: 90px; }
.rescue-page .nq-counted { font-size: 10px; line-height: 1.2; }
.rescue-page .nq-panel .nq-counting-egg { flex-basis: 44px; inline-size: 44px; }
}
@media (height <= 550px) and (width > 550px) {
.rescue-page #lw-dialog[data-lesson="trace"] #lw-dialog-body { grid-template-rows: 32px 44px 20px minmax(40px,1fr) 44px; gap: 4px 12px; }
.rescue-page #lw-dialog[data-lesson="trace"] #lw-dialog-body > h2 { grid-area: 1/1; }
.rescue-page #lw-dialog[data-lesson="trace"] .lw-trace-scene { grid-area: 2/1/4/2; }
.rescue-page #lw-dialog[data-lesson="trace"] .lw-audio-actions { grid-area: 4/1; }
.rescue-page #lw-dialog[data-lesson="trace"] .lw-form-switch { grid-area: 1/2/3/3; align-self: center; }
.rescue-page #lw-dialog[data-lesson="trace"] .lw-stroke-label { grid-area: 3/2; }
.rescue-page #lw-dialog[data-lesson="trace"] .lw-trace-field { grid-area: 4/2; }
.rescue-page #lw-dialog[data-lesson="trace"] .lw-inline-status { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.rescue-page #lw-dialog[data-lesson="trace"] .lw-dialog-actions { grid-area: 5/1/6/3; grid-template-columns: repeat(4,minmax(0,1fr)); }
.rescue-page .nq-panel[data-puzzle] { grid-template-columns: minmax(0,1fr) minmax(0,1fr); grid-template-rows: auto minmax(0,1fr); gap: 8px 16px; padding: 12px; }
.rescue-page .nq-panel[data-puzzle] .nq-puzzle-heading { grid-area: 1/2; }
.rescue-page .nq-panel[data-puzzle] .nq-puzzle-heading > .nq-eyebrow { display: none; }
.rescue-page .nq-panel[data-puzzle] .nq-puzzle-workspace { grid-area: 1/1/3/2; }
.rescue-page .nq-panel[data-puzzle] .nq-puzzle-actions { grid-area: 2/2; align-content: center; }
.rescue-page .nq-panel[data-puzzle] .nq-puzzle-heading h3 { font-size: 20px; }
.rescue-page .nq-panel[data-puzzle] .nq-puzzle-heading > p { font-size: 12px; }
.rescue-page .nq-panel[data-puzzle] .nq-two-nests { grid-template-columns: minmax(0,1fr); gap: 2px; padding: 4px; }
.rescue-page .nq-panel[data-puzzle] .nq-counting-nest { padding: 0; }
.rescue-page .nq-panel[data-puzzle] .nq-math-sign { font-size: 18px; line-height: 1; }
.rescue-page .nq-panel[data-puzzle] .nq-counted { display: none; }
.rescue-page .nq-panel[data-puzzle] .nq-nest-bowl { min-block-size: 70px; padding-block: 0 12px; }
.rescue-page .nq-panel[data-puzzle] .nq-counting-egg { block-size: 50px; min-block-size: 50px; }
.rescue-page .nq-panel[data-puzzle] .nq-counting-egg > svg { block-size: 48px; }
}
@media (forced-colors: active) {
.rescue-page .nq-counting-egg svg path:first-of-type { fill: Canvas !important; stroke: CanvasText; }
.rescue-page .nq-counting-egg .nq-egg-number { background: Highlight; color: HighlightText; }
}
.rescue-page .nq-panel[data-puzzle] { border: 3px solid var(--g-border); border-radius: 28px; box-shadow: 0 6px 0 var(--g-accent),0 20px 50px #031e2b44,inset 0 0 0 4px var(--g-soft); }
.rescue-page .nq-panel[data-puzzle] .nq-puzzle-heading { position: relative; grid-template-columns: minmax(0,1fr); grid-template-rows: 44px auto auto; gap: 5px; }
.rescue-page .nq-panel[data-puzzle] .nq-puzzle-heading > .nq-eyebrow { display: flex; align-items: center; padding-inline-end: 100px; font-size: 11px; }
.rescue-page .nq-panel[data-puzzle] .nq-puzzle-heading h3 { padding-inline-start: 56px; min-block-size: 44px; display: flex; align-items: center; }
.rescue-page .nq-card-bird { position: absolute; inset-block-start: 46px; inset-inline-start: 0; inline-size: 50px; block-size: 48px; }
.nq-card-bird svg { inline-size: 100%; block-size: 100%; }
.rescue-page .nq-card-tools { position: absolute; inset-block-start: 0; inset-inline-end: 0; display: flex; gap: 6px; }
.rescue-page .nq-panel[data-puzzle] .nq-card-tools button { display: grid; place-items: center; inline-size: 44px; block-size: 44px; padding: 0; margin: 0; border-radius: 50%; border: 1px solid var(--g-border); background: var(--g-soft); font: 700 23px/1 "Inter Variable",sans-serif; box-shadow: 0 2px 0 var(--g-border); }
.rescue-page .nq-panel[data-puzzle] .nq-puzzle-visual { border: 2px solid var(--g-border); border-radius: 24px; background: radial-gradient(ellipse at top,var(--g-raised),var(--g-soft)); box-shadow: inset 0 3px 0 #ffffff20,0 4px 0 color-mix(in srgb,var(--g-border) 45%,transparent); }
.rescue-page .nq-panel[data-puzzle] .nq-plank-slot { border-radius: 10px; border-width: 2px; box-shadow: 0 4px 0 var(--g-border); }
.rescue-page .nq-panel[data-puzzle] .nq-puzzle-answers button { border-radius: 14px; box-shadow: 0 3px 0 var(--g-border); }
.rescue-page .nq-panel[data-puzzle] .nq-join { border-radius: 16px; box-shadow: 0 4px 0 var(--g-border); }
@media (width <= 600px) {
.rescue-page #lw-dialog[open][data-lesson="capture"] { inline-size: calc(100dvw - 16px); block-size: calc(100dvh - 16px); max-block-size: calc(100dvh - 16px); padding: 10px 12px; gap: 6px; }
.rescue-page #lw-dialog[data-lesson="capture"] #lw-dialog-body { grid-template-rows: 84px minmax(100px,1fr) 36px 52px; gap: 7px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-letter-heading { font-size: 38px; gap: 10px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-letter-heading span { inline-size: 52px; block-size: 52px; border-radius: 18px; }
.rescue-page #lw-dialog[data-lesson="capture"] #lw-dialog-body .lesson-example { padding: 7px; gap: 8px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lesson-example .lw-capture-word { gap: 5px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lesson-word-text { font-size: 28px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lesson-spelling { font-size: 10px; letter-spacing: 0; }
.rescue-page #lw-dialog[data-lesson="capture"] .lesson-example-label { font-size: 11px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-reward span { font-size: 10px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-discovery-token { inline-size: 22px; block-size: 22px; }
}
@media (width <= 600px) and (height >= 650px) {
.rescue-page #lw-dialog[data-lesson="capture"] #lw-dialog-body .lesson-example { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr) auto; }
.rescue-page #lw-dialog[data-lesson="capture"] .lesson-example .lw-capture-art { grid-area: 1/1; }
.rescue-page #lw-dialog[data-lesson="capture"] .lesson-example .lw-capture-word { grid-area: 2/1; padding-block: 4px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lesson-word-text { font-size: 34px; }
}
@media (height <= 550px) {
.rescue-page .lw-card-options-panel { position: fixed; inset: 50% auto auto 50%; transform: translate(-50%,-50%); }
}
@media (height <= 550px) and (width > 550px) {
.rescue-page #lw-dialog[open][data-lesson="capture"] { inline-size: min(960px,calc(100dvw - 16px)); block-size: calc(100dvh - 16px); max-block-size: calc(100dvh - 16px); padding: 8px 12px; gap: 4px; }
.rescue-page #lw-dialog[data-lesson="capture"] #lw-dialog-body { grid-template-columns: minmax(0,1fr) minmax(0,1fr); grid-template-rows: minmax(80px,1fr) 36px 52px; gap: 7px 14px; }
.rescue-page #lw-dialog[data-lesson="capture"] #lw-dialog-body > .lesson-example { grid-area: 1/1/4/2; grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr) auto; gap: 2px; padding: 6px; }
.rescue-page #lw-dialog[data-lesson="capture"] #lw-dialog-body > .lw-capture-hero { grid-area: 1/2; grid-template-columns: 1fr; grid-template-rows: 20px minmax(0,1fr); gap: 4px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-chapter { grid-area: 1/1; font-size: 11px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-letter-heading { grid-area: 2/1; font-size: 38px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-letter-heading span { inline-size: 54px; block-size: 54px; border-radius: 18px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-hero .lw-card-guide { display: none; }
.rescue-page #lw-dialog[data-lesson="capture"] #lw-dialog-body > .lw-capture-summary { grid-area: 2/2; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-reward { display: none; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-progress { margin-inline: auto; }
.rescue-page #lw-dialog[data-lesson="capture"] #lw-dialog-body > .lw-dialog-actions { grid-area: 3/2; gap: 6px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-dialog-actions > button { font-size: 12px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lesson-example-label,.rescue-page #lw-dialog[data-lesson="capture"] .lesson-spelling { display: none; }
.rescue-page #lw-dialog[data-lesson="capture"] .lesson-example .lw-capture-word { grid-area: 2/1; gap: 1px; padding: 0; }
.rescue-page #lw-dialog[data-lesson="capture"] .lesson-word-text { font-size: 26px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-audio-actions button { min-block-size: 44px; font-size: 12px; }
}
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-hero.is-letter-question .lw-letter-heading { visibility: hidden; }
.rescue-page #lw-dialog[data-lesson="capture"] #lw-dialog-body .lesson-example.is-letter-question { display: grid; grid-template: auto auto auto auto / minmax(0,1fr); align-content: center; justify-items: center; gap: 4px; padding: 5px; background: var(--g-soft); }
.lw-letter-question-prompt,.lw-letter-question-feedback { margin: 0; text-align: center; color: var(--g-text); font-size: 13px; line-height: 1.35; }
.lw-letter-question-feedback:empty { display: none; }
.lw-question-clue { color: var(--g-accent); font-weight: 800; }
.lw-letter-question-choices { display: flex; justify-content: center; gap: 8px; }
.rescue-page .lw-letter-question-choices button { min-inline-size: 52px; min-block-size: 44px; padding: 0 8px; border: 2px solid var(--g-letter-edge); border-radius: 12px; background: var(--g-letter-bg); color: var(--g-letter-text); box-shadow: 0 3px 0 var(--g-letter-edge); font-size: 25px; font-weight: 800; }
.rescue-page .lw-letter-question-choices button[data-answer-state="correct"] { border-color: var(--g-accent); background: var(--g-primary); color: var(--g-on-primary); }
.rescue-page .lw-letter-question-choices button[data-answer-state="retry"] { border-style: dashed; border-color: var(--g-danger); }
.rescue-page #lw-dialog[data-lesson="capture"]:has(.is-letter-question) #lw-dialog-body { grid-template-rows: 24px minmax(150px,1fr) 36px 52px; }
@media (height <= 550px) and (width > 550px) {
.rescue-page #lw-dialog[data-lesson="capture"]:has(.is-letter-question) #lw-dialog-body { grid-template-rows: minmax(40px,1fr) 36px 52px; }
}
.rescue-page :is(.lw-button,.lw-movement button,.lw-letter-chip,.nq-controls button,.nq-encounter button,.game-end-actions button,.nq-plank-slot,.nq-power-seed,.nq-ferry-seat) { transition: translate 100ms ease-out,box-shadow 100ms ease-out; -webkit-tap-highlight-color: transparent; }
.rescue-page :is(.lw-button,.lw-movement button,.lw-letter-chip,.nq-controls button,.nq-encounter button,.game-end-actions button,.nq-plank-slot,.nq-power-seed,.nq-ferry-seat):active:not(:disabled) { translate: 0 2px; box-shadow: 0 1px 0 var(--g-border); }
.rescue-page .lw-letter-chip.is-collected { animation: game-pickup 240ms ease-out; }
.rescue-page :is(.nq-plank-slot.is-filled,.nq-power-seed.is-loaded,.nq-ferry-seat.is-loaded) { animation: game-piece 180ms ease-out; }
.rescue-page .game-end-scene { animation: game-reveal 260ms ease-out; }
@keyframes game-pickup { 0% { scale: .84; } 65% { scale: 1.08; } 100% { scale: 1; } }
@keyframes game-piece { from { scale: .9; } to { scale: 1; } }
@keyframes game-reveal { from { opacity: .4; translate: 0 5px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) {
.rescue-page :is(.lw-button,.lw-movement button,.lw-letter-chip,.nq-controls button,.nq-encounter button,.game-end-actions button,.nq-plank-slot,.nq-power-seed,.nq-ferry-seat) { transition: none; }
.rescue-page :is(.lw-letter-chip.is-collected,.nq-plank-slot.is-filled,.nq-power-seed.is-loaded,.nq-ferry-seat.is-loaded,.game-end-scene) { animation: none; }
}
@media (width <= 700px) {
.rescue-page .nq-controls:has(.nq-interact[hidden]) { display: grid; grid-template-columns: 44px 44px minmax(60px,.65fr) minmax(88px,1fr); gap: 6px; }
.rescue-page .nq-controls:has(.nq-interact[hidden]) button { min-inline-size: 0; inline-size: 100%; padding-inline: 6px; font-size: 12px; }
}
.nq-encounter[hidden],.lw-return-home[hidden] { display: none !important; }
.rescue-page .nq-encounter { position:absolute; z-index:8; inset:auto 12px 12px; margin-inline:auto; inline-size:min(500px,calc(100% - 24px)); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; padding:12px; border:2px solid var(--g-border); border-radius:20px; background:var(--g-surface); color:var(--g-text); box-shadow:0 4px 0 var(--g-border); }
.nq-encounter > p { grid-column:1/-1; margin:0; font-size:14px; line-height:1.4; }
.rescue-page .nq-encounter button { min-block-size:44px; margin:0; padding:6px 10px; font-size:13px; }
.game-field-notice { position: absolute; z-index: 7; inset: 10px 12px auto; display: grid; justify-items: center; pointer-events: none; }
.game-field-notice[data-position="bottom"] { inset-block: auto 90px; }
.game-field-notice-banner { display: flex; align-items: center; gap: 9px; max-inline-size: min(100%,450px); padding-block: 7px; padding-inline: 8px 12px; border: 1px solid var(--g-border); border-radius: 16px; background: var(--g-surface); color: var(--g-text); box-shadow: 0 3px 0 var(--g-border),0 6px 18px #0003; font-size: 13px; font-weight: 700; line-height: 1.35; }
.game-field-notice-banner[hidden] { display: none; }
.game-field-notice-mark { display: grid; place-items: center; flex: 0 0 26px; inline-size: 26px; block-size: 26px; border-radius: 9px; background: var(--g-reward-bg); color: var(--g-reward-text); border: 1px solid var(--g-reward-edge); }
.game-field-notice-banner[data-kind="caution"] .game-field-notice-mark { background: var(--g-surface); color: var(--g-danger); border-color: currentcolor; }
.game-field-notice-banner[data-kind="tool"] .game-field-notice-mark { background: var(--g-primary); color: var(--g-on-primary); border-color: var(--g-primary); }
.game-field-notice-copy { min-inline-size: 0; overflow-wrap: anywhere; }
.rescue-page .lw-return-home { pointer-events: auto; position:absolute; transform:translate(-50%,-50%); inline-size:48px; block-size:48px; padding:0; border:3px solid var(--g-reward-edge); border-radius:50%; color:var(--g-reward-text); background:var(--g-reward-bg); font-size:30px; }
.rescue-page .lw-next-objective { color:var(--g-text); background:var(--g-soft); border:1px solid var(--g-border); border-radius:10px; padding:4px 8px; min-block-size:44px; font:inherit; cursor:pointer; }
.nq-ferry-passengers { display:flex; justify-content:center; gap:18px; inline-size:100%; text-align:center; font-size:12px; }
.nq-ferry-passengers > div { display:grid; gap:2px; }
.nq-passenger-birds { display:flex; justify-content:center; }
.nq-passenger-birds svg { inline-size:26px; block-size:26px; }
.rescue-page :is(.nq-interact,.lw-supply-cache,.lw-garden-shortcut,.lw-route-tool)[hidden] { display: none !important; }
.rescue-page :is(.lw-supply-cache,.lw-garden-shortcut,.lw-route-tool) { position: absolute; pointer-events: auto; transform: translate(-50%,-50%); inline-size: 48px; block-size: 48px; min-inline-size: 48px; min-block-size: 48px; padding: 2px; border: 2px solid var(--g-reward-edge); border-radius: 14px; color: var(--g-text); background: var(--g-surface); cursor: pointer; }
.rescue-page .lw-supply-cache svg { display: block; inline-size: 100%; block-size: 100%; }
.rescue-page .lw-supply-cache[data-guarded="true"] { border-style: double; border-width: 4px; }
.rescue-page .lw-garden-shortcut { background: var(--g-letter-bg); font-size: 30px; }
.rescue-page .lw-route-tool { background: transparent; border: 0; border-radius: 50%; }
.rescue-page .lw-chase-letters > .lw-chase-letter { z-index: 2; }
.rescue-page .lw-return-home { z-index: 3; }
.nq-seed-tray,.nq-ferry-seats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; inline-size: 100%; }
.rescue-page :is(.nq-power-seed,.nq-ferry-seat) { display: grid; place-items: center; inline-size: 48px; block-size: 48px; min-inline-size: 48px; min-block-size: 48px; margin: 0; padding: 3px; border: 2px dashed var(--g-border); border-radius: 12px; background: var(--g-surface); color: var(--g-text); font-size: 25px; }
.rescue-page :is(.nq-power-seed,.nq-ferry-seat).is-loaded { border-style: solid; background: var(--g-reward-bg); box-shadow: 0 3px 0 var(--g-reward-edge); }
.nq-ferry-seat svg { inline-size: 36px; block-size: 36px; opacity: .3; }
.nq-ferry-seat.is-loaded svg { opacity: 1; }
.rescue-page .nq-ferry-seats { gap: 4px; }
.rescue-page .nq-ferry-seat { inline-size: 44px; min-inline-size: 44px; block-size: 44px; min-block-size: 44px; }
.rescue-page .nq-panel[data-puzzle="lift"] .nq-load-count { grid-column: 1/-1; font-size: 14px; line-height: 1.4; min-block-size: 22px; }
.rescue-page .nq-panel .nq-mechanism-load { grid-column: 1/-1; text-align: center; color: var(--g-text); font-size: 14px; font-weight: 700; }
.rescue-page .nq-counting-egg.is-loaded { outline: 2px solid var(--g-accent); outline-offset: -3px; background: var(--g-soft); }
.rescue-page [data-feedback="missing"] .nq-plank-slot:not(.is-filled) { outline: 3px solid var(--g-focus); outline-offset: -4px; }
@media (width <= 700px) and (height > 550px) {
.rescue-page.lw-chase-session .lw-run-hud { grid-template-rows: auto 44px auto; gap: 5px 8px; padding-block: max(6px,env(safe-area-inset-top)) 6px; }
.rescue-page.lw-chase-session .lw-run-heading { grid-area: 1/1; padding-block-end: 18px; }
.rescue-page.lw-chase-session .lw-run-title { display: none; }
.rescue-page.lw-chase-session .lw-run-hearts { grid-area: 1/1; align-self: end; gap: 0; }
.rescue-page.lw-chase-session .lw-run-hearts .game-life-icons { display: none; }
.rescue-page.lw-chase-session .lw-letter-track { grid-area: 2/1/3/3; gap: 4px; }
.rescue-page.lw-chase-session .lw-run-goals { grid-area: 3/1/4/3; display: block; visibility: visible; }
.rescue-page.lw-chase-session .lw-next-objective { inline-size: 100%; font-size: 12px; line-height: 1.35; }
.rescue-page.lw-chase-session :is(.lw-run-score,.lw-run-goals > span,.lw-run-hud.is-powered .lw-run-glow) { display: none; }
.rescue-page.lw-chase-session .lw-run-hud.is-powered .lw-run-goals { visibility: visible; }
}
@media (height <= 550px) and (width > 550px) {
.rescue-page .nq-panel[data-puzzle] .nq-puzzle-workspace { align-content: center; }
.rescue-page .nq-panel:is([data-puzzle="spring"],[data-puzzle="ferry"]) .nq-puzzle-visual.nq-obstacle-puzzle > .nq-route-preview { block-size: 44px; }
.rescue-page .nq-panel:is([data-puzzle="spring"],[data-puzzle="ferry"]) .nq-obstacle-puzzle { grid-auto-rows: auto; }
.rescue-page .nq-panel[data-puzzle="lift"] .nq-puzzle-visual { grid-template-columns: minmax(0,1fr) 18px minmax(0,1fr); }
}
.rescue-page #lw-dialog [data-playing="true"] { opacity: 1; border-style: solid; }
.rescue-page #lw-dialog[data-narration="letter"] .lw-letter-heading span { outline: 3px solid var(--g-focus); outline-offset: 3px; }
.rescue-page #lw-dialog[data-narration="word"] .lesson-word-text { outline: 3px solid var(--g-focus); outline-offset: 4px; border-radius: 8px; }
.nq-route-preview { position: relative; inline-size: 100%; block-size: 106px; min-block-size: 0; overflow: hidden; border-radius: 14px; }
.nq-route-preview svg { display: block; inline-size: 100%; block-size: 100%; }
.rescue-page .nq-panel[data-puzzle] .nq-obstacle-puzzle { gap: 6px; }
.rescue-page .nq-panel[data-puzzle] .nq-two-nests > .nq-route-preview { grid-column: 1/-1; block-size: 46px; }
.rescue-page .nq-panel[data-puzzle="bridge"] .nq-bridge-builder { position: relative; display: grid; grid-template-columns: repeat(var(--plank-count,3),minmax(0,1fr)); gap: 4px; padding: 32px 17% 26px; min-block-size: 162px; isolation: isolate; }
.rescue-page .nq-bridge-builder > .nq-route-preview { position: absolute; inset: 0; z-index: -1; block-size: 100%; border-radius: inherit; }
.rescue-page .nq-bridge-builder > .nq-route-preview svg { object-fit: fill; }
.rescue-page .nq-panel[data-puzzle] .nq-plank-slot { min-inline-size: 44px; inline-size: 100%; block-size: 94px; color: var(--g-text); background: color-mix(in srgb,var(--g-surface) 75%,transparent) !important; border: 2px dashed var(--g-border); box-shadow: none; }
.rescue-page .nq-panel[data-puzzle] .nq-plank-slot.is-filled { border-style: solid; background: repeating-linear-gradient(0deg,transparent 0 22px,color-mix(in srgb,var(--g-reward-edge) 22%,transparent) 23px 25px),var(--g-reward-bg) !important; color: var(--g-reward-text); box-shadow: 0 4px 0 var(--g-reward-edge); }
.rescue-page #lw-dialog[open]:is([data-lesson="complete"],[data-lesson="retry"]) { display: grid; grid-template-rows: 44px minmax(0,1fr); gap: 8px; inline-size: min(960px,calc(100dvw - 24px)); block-size: min(720px,calc(100dvh - 24px)); max-block-size: calc(100dvh - 24px); padding: 14px 20px; overflow: hidden; border: 3px solid var(--g-border); border-radius: 28px; background: radial-gradient(ellipse at top,var(--g-soft),transparent 70%),var(--g-surface) !important; box-shadow: 0 6px 0 var(--g-accent),0 24px 70px #031e2b66; }
.rescue-page #lw-dialog:has(.game-end-card) .lw-dialog-top { margin: 0; }
.rescue-page .nq-overlay:has(.game-end-card) { position: fixed; inset: 8px; z-index: 40; display: grid; place-items: center; padding: 0; overflow: hidden; background: transparent; }
.rescue-page .nq-panel.game-end-card { inline-size: min(900px,100%); block-size: min(660px,100%); margin: 0; padding: 18px; border: 3px solid var(--g-border); border-radius: 28px; background: var(--g-surface) !important; box-shadow: 0 6px 0 var(--g-accent),0 20px 50px #031e2b44,inset 0 0 0 4px var(--g-soft); }
.rescue-page .game-end-card,.rescue-page #lw-dialog #lw-dialog-body.game-end-card { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(60px,1fr) auto 50px; gap: 12px; min-inline-size: 0; min-block-size: 0; overflow: visible; text-align: center; }
.rescue-page .game-end-heading > * { margin: 0; }
.rescue-page .game-end-heading :is(h2,h3):focus { outline: none; }
.rescue-page .game-end-heading { padding-block: 4px; }
.rescue-page .game-end-heading :is(h2,h3),.rescue-page #lw-dialog[data-lesson="complete"] #lw-dialog-title { font-size: clamp(20px,3vw,30px); line-height: 1.3; }
.rescue-page #lw-dialog .game-end-heading h2 { font: 800 clamp(20px,3vw,30px)/1.5 "Inter Variable","Noto Sans Arabic Variable",sans-serif; }
.rescue-page:lang(ar) .game-end-heading :is(h2,h3),.rescue-page:lang(ar) #lw-dialog .game-end-heading h2 { line-height: 1.7; }
.rescue-page .game-end-heading .nq-eyebrow { margin-block-end: 5px; }
.game-end-scene { position: relative; display: grid; place-items: center; min-block-size: 0; overflow: hidden; border: 2px solid var(--g-border); border-radius: 24px; background: var(--g-soft); box-shadow: 0 4px 0 color-mix(in srgb,var(--g-border) 45%,transparent); }
.game-end-scene > svg { display: block; inline-size: 100%; block-size: 100%; min-block-size: 0; max-block-size: 100%; }
.game-end-scene > :is(.nq-route-preview,.lw-result-art) { block-size: 100%; inline-size: 100%; max-block-size: 100%; margin: 0; }
.game-end-scene > .lw-result-art svg { block-size: 100%; inline-size: 100%; }
.game-end-mascot { position: absolute; inset-block-end: 8px; inset-inline-start: 12px; inline-size: min(100px,30%); block-size: min(110px,80%); }
.game-end-mascot svg { inline-size: 100%; block-size: 100%; }
.rescue-page .game-end-summary { min-inline-size: 0; min-block-size: 0; }
.rescue-page .game-end-summary > * { margin: 4px 0; }
.rescue-page .game-end-summary > p { font-size: 14px; line-height: 1.5; }
.rescue-page .game-end-summary :is(.lw-word-badge,.nq-reward) { padding: 6px 10px; border-radius: 16px; font-size: 18px; }
.rescue-page .game-end-summary .lw-word-badge { font: 800 18px/1.5 "Inter Variable","Noto Sans Arabic Variable",sans-serif !important; }
.rescue-page .game-end-summary .lw-chase-medal { padding: 4px 8px; font-size: 12px; border-radius: 12px; color: var(--g-reward-text); background: var(--g-reward-bg); }
.rescue-page .game-end-actions { display: flex; align-items: stretch; justify-content: center; gap: 10px; min-inline-size: 0; }
.rescue-page .game-end-actions > button { flex: 1; min-inline-size: 0; min-block-size: 48px; margin: 0; padding: 6px 10px; border-radius: 16px; font-size: 14px; box-shadow: 0 4px 0 var(--g-border); }
.game-end-options { min-inline-size: 80px; }
.rescue-page .game-end-options > summary { display: grid; place-items: center; min-block-size: 48px; padding: 0 12px; list-style: none; border: 1px solid var(--g-border); border-radius: 16px; color: var(--g-text); background: var(--g-soft); font-size: 13px; cursor: pointer; }
.game-end-options > summary::-webkit-details-marker { display: none; }
.game-end-options:not([open]) > .game-end-options-panel { display: none; }
.rescue-page .game-end-options-panel { position: fixed; z-index: 20; inset: 50% auto auto 50%; transform: translate(-50%,-50%); display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; inline-size: min(560px,calc(100dvw - 48px)); max-block-size: calc(100dvh - 40px); box-sizing: border-box; padding: 12px; border: 2px solid var(--g-border); border-radius: 20px; color: var(--g-text); background: var(--g-surface); box-shadow: 0 8px 30px #031e2b66; text-align: start; }
.rescue-page .game-end-options-panel > :is(p,details) { grid-column: 1/-1; }
.rescue-page .game-end-options-panel :is(button,summary) { min-block-size: 44px; min-inline-size: 0; margin: 0; padding: 6px; font-size: 13px; line-height: 1.3; }
.rescue-page .game-end-options-panel :is(p,dl) { margin: 6px 0; font-size: 12px; line-height: 1.4; }
.rescue-page .game-end-options-panel p:empty { display: none; }
.rescue-page .game-end-options-panel details { margin: 0; padding: 0; }
.rescue-page .game-end-options-panel:has(> details[open]) > :not(details[open]) { display: none; }
.rescue-page .game-end-options-panel details > summary { display: flex; align-items: center; }
.rescue-page .game-end-options-panel .lw-route-preview svg { max-block-size: 100px; inline-size: 100%; }
.rescue-page .game-end-options-panel .game-rehearsal button { inline-size: 100%; }
@media (width <= 600px) {
.rescue-page #lw-dialog[open]:is([data-lesson="complete"],[data-lesson="retry"]) { inline-size: calc(100dvw - 16px); block-size: calc(100dvh - 16px); max-block-size: calc(100dvh - 16px); padding: 10px 12px; }
.rescue-page .nq-panel.game-end-card { padding: 12px; }
.rescue-page .nq-panel.game-end-card[data-end-state="success"] { block-size: min(430px,100%); }
.rescue-page .game-end-card,.rescue-page #lw-dialog #lw-dialog-body.game-end-card { gap: 8px; }
.rescue-page .game-end-summary > p { font-size: 13px; }
.rescue-page .nq-panel[data-puzzle] .nq-two-nests > .nq-route-preview { block-size: 32px; }
.rescue-page .nq-panel[data-puzzle] .nq-obstacle-puzzle > .nq-route-preview { block-size: 78px; }
}
@media (height <= 550px) and (width > 550px) {
.rescue-page .game-end-card,.rescue-page #lw-dialog #lw-dialog-body.game-end-card { grid-template-columns: minmax(0,1fr) minmax(0,1fr); grid-template-rows: auto minmax(0,1fr) 48px; gap: 8px 14px; }
.game-end-heading { grid-area: 1/2; }
.game-end-scene { grid-area: 1/1/4/2; }
.game-end-summary { grid-area: 2/2; align-self: center; }
.game-end-actions { grid-area: 3/2; }
.rescue-page .game-end-heading :is(h2,h3),.rescue-page #lw-dialog[data-lesson="complete"] #lw-dialog-title { font-size: 20px; }
.rescue-page .game-end-summary > p { font-size: 12px; }
.rescue-page .game-end-summary :is(.lw-word-badge,.nq-reward) { font-size: 14px; padding: 3px 6px; }
.rescue-page .game-end-summary .lw-word-badge { font-size: 14px !important; }
.rescue-page .game-end-actions > button { font-size: 12px; }
.rescue-page .nq-panel[data-puzzle] .nq-two-nests > .nq-route-preview { block-size: 32px; }
.rescue-page .nq-panel[data-puzzle] .nq-obstacle-puzzle > .nq-route-preview { block-size: 78px; }
}
.rescue-page .game-memory-invite { min-block-size: 44px; border: 2px solid var(--g-reward-edge); border-block-end-width: 4px; font-size: 13px; background: var(--g-reward-bg); color: var(--g-reward-text); }
.game-memory-offer { margin-block-start: 8px; }
.rescue-page #lw-dialog[open][data-lesson="memory"] { display: grid; grid-template-rows: 44px minmax(0,1fr); gap: 6px; inline-size: min(680px,calc(100dvw - 16px)); block-size: min(560px,calc(100dvh - 16px)); max-block-size: calc(100dvh - 16px); padding: 10px; overflow: hidden; border: 3px solid var(--g-reward-edge); border-radius: 28px; background: var(--g-surface) !important; box-shadow: inset 0 0 0 3px var(--g-reward-bg),0 6px 0 var(--g-reward-edge),0 24px 70px #031e2b66; }
.rescue-page #lw-dialog[data-lesson="memory"] #lw-dialog-body { display: grid; grid-template-rows: 26px minmax(0,1fr); gap: 4px; min-block-size: 0; padding: 0; overflow: hidden; }
.rescue-page #lw-dialog[data-lesson="memory"] #lw-dialog-body > h2 { margin: 0; font-size: 16px; line-height: 1.4; font-weight: 750; text-align: center; color: var(--g-reward-text); }
.rescue-page .nq-overlay:has(.nq-memory-host) { position: fixed; inset: 8px; z-index: 40; display: grid; place-items: center; padding: 0; overflow: hidden; background: #0d3029b8; border-radius: 24px; }
.rescue-page .nq-panel.nq-memory-host { display: grid; grid-template-rows: 18px 26px minmax(0,1fr); gap: 4px; inline-size: min(680px,100%); block-size: min(560px,100%); max-block-size: 100%; padding: 12px; margin: 0; overflow: hidden; border: 3px solid var(--g-reward-edge); border-radius: 28px; background: var(--g-surface); box-shadow: inset 0 0 0 3px var(--g-reward-bg),0 6px 0 var(--g-reward-edge),0 24px 70px #031e2b66; }
.rescue-page .nq-memory-host > :is(h3,p) { margin: 0; font-size: 16px; line-height: 1.4; color: var(--g-reward-text); }
.rescue-page .nq-memory-host > .nq-eyebrow { font-size: 11px; }
.rescue-page .game-memory-card { display: grid; grid-template-rows: auto minmax(0,1fr) 52px minmax(44px,auto) auto; gap: 8px; min-inline-size: 0; min-block-size: 0; inline-size: 100%; block-size: 100%; text-align: center; color: var(--g-text); }
.rescue-page .game-memory-card > h3 { margin: 0; color: var(--g-text); font-size: clamp(16px,2.2vw,22px); font-weight: 800; line-height: 1.35; }
.game-memory-scene { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; gap: clamp(8px,3vw,24px); min-block-size: 0; padding: 12px; border: 3px solid #537b58; border-radius: 22px; background: #e5efd0; overflow: hidden; box-shadow: inset 0 3px 0 #fff6cf; }
.game-memory-grove { position: absolute; inset: 0; z-index: -1; inline-size: 100%; block-size: 100%; pointer-events: none; }
.game-memory-lantern { flex: 0 0 auto; inline-size: clamp(52px,10vw,88px); }
.game-memory-lantern svg { display: block; inline-size: 100%; block-size: auto; overflow: visible; }
.game-lantern-light { opacity: .12; transition: opacity .25s ease; }
[data-memory-solved="true"] .game-lantern-light { opacity: 1; }
[data-memory-solved="true"] .game-memory-lantern { filter: drop-shadow(0 0 8px #ffda70); }
.game-memory-clue { display: grid; place-items: center; min-inline-size: 90px; padding: 10px 16px; border: 3px solid #795995; border-radius: 20px; background: linear-gradient(145deg,#f3e8ff,#d9b9f4); box-shadow: 0 6px 0 #795995,inset 0 3px 0 #fff9; font-size: clamp(38px,9vw,84px); font-weight: 850; line-height: 1.1; color: #402b53; text-shadow: 0 3px 0 #b590cb; }
.game-memory-friend { position: absolute; inset-inline-start: 10px; inset-block-end: 8px; inline-size: clamp(38px,8vh,66px); pointer-events: none; }
.game-memory-friend svg { display: block; inline-size: 100%; }
.game-memory-art { display: grid; place-items: center; inline-size: 44%; block-size: 100%; min-block-size: 0; overflow: hidden; }
.game-memory-art > svg { display: block; inline-size: 100%; block-size: 100%; max-block-size: 200px; filter: drop-shadow(0 6px 0 #3c593022); }
.game-memory-scene:has(.game-memory-art) { display: grid; grid-template: minmax(0,1fr) auto / minmax(0,1fr) 48px; gap: 8px; }
.game-memory-scene:has(.game-memory-art) .game-memory-art { grid-area: 1/1/2/3; inline-size: 100%; }
.game-memory-scene:has(.game-memory-art) .game-memory-clue { min-inline-size: 0; padding: 4px 8px; font-size: clamp(22px,5.5vw,38px); }
.game-memory-scene:has(.game-memory-art) .game-memory-lantern { inline-size: 38px; }
.game-memory-scene:has(.game-memory-art) .game-memory-friend { inset-block: 8px auto; }
.game-memory-choices,.game-memory-actions { display: flex; justify-content: center; gap: 10px; min-inline-size: 0; }
.rescue-page .game-memory-choices > button { position: relative; inline-size: 76px; min-inline-size: 44px; min-block-size: 44px; margin: 0; padding: 2px 8px; font-size: 30px; font-weight: 800; line-height: 1.1; border: 2px solid var(--g-letter-edge); border-block-end-width: 5px; border-radius: 14px; background: var(--g-letter-bg); color: var(--g-letter-text); box-shadow: inset 0 2px 0 #fff5; transition: transform .12s ease; }
.rescue-page .game-memory-choices > button:active { transform: translateY(2px); }
.rescue-page .game-memory-choices > [data-answer-state="correct"] { background: var(--g-reward-bg); color: var(--g-reward-text); border-color: var(--g-reward-edge); border-style: solid; opacity: 1; }
.game-memory-check { font-size: 16px; }
.game-memory-match { font-size: .4em; font-weight: 700; text-shadow: none; }
.game-memory-operator { font-size: 24px; font-weight: 800; color: #284e37; }
.game-memory-scene:has(.nq-counting-nest) { gap: 4px; padding: 6px; }
.game-memory-scene:has(.nq-counting-nest,.game-memory-pattern) .game-memory-lantern { position: absolute; inset-block-start: 4px; inset-inline-end: 6px; inline-size: 30px; }
.rescue-page .game-memory-choices > .is-memory-clue { outline: 3px solid var(--g-focus); outline-offset: 2px; }
.rescue-page .game-memory-clue,.rescue-page .game-memory-choices > button { font-family: "Trebuchet MS", "Segoe UI", sans-serif; }
.rescue-page .game-memory-choices > [data-answer-state="retry"] { border-style: dashed; }
.rescue-page .game-memory-choices > button:disabled:not([data-answer-state="retry"]) { border-style: solid; }
.rescue-page .game-memory-feedback { display: grid; place-content: center; min-block-size: 44px; margin: 0; color: var(--g-text); font-size: 14px; line-height: 1.35; }
.rescue-page .game-memory-feedback bdi { font-size: 18px; font-weight: 800; }
.rescue-page .game-memory-actions > button { flex: 1; min-inline-size: 0; min-block-size: 44px; margin: 0; padding: 4px 8px; font-size: 14px; line-height: 1.3; border-block-end-width: 4px; }
.rescue-page .game-memory-scene .nq-counting-nest { flex: 1; max-inline-size: 300px; padding: 4px; border: 0; box-shadow: none; background: transparent; }
.rescue-page .game-memory-scene .nq-counting-nest h4 { margin: 0 0 4px; color: #284e37; font-size: 12px; }
.rescue-page .game-memory-scene .nq-nest-bowl { min-block-size: 0; padding: 6px 0 20px; }
.rescue-page .game-memory-scene .nq-egg-tray { gap: 2px; }
.rescue-page .game-memory-scene .nq-counting-egg { flex: 0 0 26px; display: inline-grid; inline-size: 26px; block-size: 34px; min-block-size: 0; background: transparent !important; box-shadow: none; }
.rescue-page .game-memory-scene .nq-counting-egg > svg { inline-size: 26px; block-size: 34px; opacity: 1; }
.rescue-page .game-memory-scene .nq-woven-nest { block-size: 54px; }
.game-memory-scene .nq-counted,.game-memory-scene .nq-counting-egg::before { display: none; }
.game-memory-pattern { display: flex; gap: 8px; direction: ltr; }
.game-memory-pattern-token { position: relative; display: grid; place-items: end center; inline-size: 64px; block-size: 100px; }
.game-memory-pattern-art { position: absolute; inset: 0; }
.game-memory-pattern-art svg { inline-size: 100%; block-size: 100%; }
.game-memory-pattern-number { position: relative; display: grid; place-items: center; inline-size: 40px; block-size: 40px; border: 2px solid #654b2a; border-radius: 12px; background: #ffebaf; color: #493416; font-size: 26px; font-weight: 850; }
.rescue-page .nn-egg:has(.game-egg-art) { border: 0; background: transparent !important; box-shadow: none; }
.rescue-page .nn-egg > .game-egg-art { inline-size: 100%; block-size: 100%; }
@media (height >= 650px) {
.rescue-page .game-memory-scene .nq-counting-egg { flex-basis: 40px; inline-size: 40px; block-size: 52px; }
.rescue-page .game-memory-scene .nq-counting-egg > svg { inline-size: 40px; block-size: 52px; }
.rescue-page .game-memory-scene .nq-nest-bowl { padding: 10px 0 36px; min-block-size: 106px; }
.rescue-page .game-memory-scene .nq-woven-nest { block-size: 88px; }
.game-memory-scene:has(.nq-counting-nest,.game-memory-pattern) .game-memory-lantern { inline-size: 48px; }
.rescue-page .game-memory-scene > .nq-counting-nest:only-of-type .nq-counting-egg { flex-basis: 56px; inline-size: 56px; block-size: 72px; }
.rescue-page .game-memory-scene > .nq-counting-nest:only-of-type .nq-counting-egg > svg { inline-size: 56px; block-size: 72px; }
}
@media (height <= 550px) and (width > 550px) {
.rescue-page .game-memory-card { grid-template: auto 52px minmax(44px,1fr) 44px / minmax(0,1fr) minmax(0,1fr); gap: 4px 12px; }
.rescue-page .game-memory-card > h3 { grid-column: 1/-1; }
.game-memory-scene { grid-area: 2/1/5/2; padding: 4px; }
.game-memory-choices { grid-area: 2/2; }
.game-memory-feedback { grid-area: 3/2; }
.game-memory-actions { grid-area: 4/2; }
.rescue-page .game-memory-actions > button { font-size: 12px; }
.game-memory-lantern { inline-size: 42px; }
.game-memory-clue { min-inline-size: 60px; padding: 4px 8px; }
.game-memory-friend { inline-size: 32px; }
.game-memory-scene:has(.game-memory-art) .game-memory-lantern { inline-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
.game-lantern-light,.rescue-page .game-memory-choices > button { transition: none; }
}
@media (forced-colors: active) {
.game-memory-scene,.game-memory-pattern-number { border-color: CanvasText; background: Canvas; color: CanvasText; }
.game-memory-clue,.game-memory-lantern { color: CanvasText; text-shadow: none; filter: none; }
.game-memory-grove { display: none; }
}
.rescue-page #lw-dialog[open]:is([data-lesson="capture"],[data-lesson="complete"],[data-lesson="retry"]),
.rescue-page .nq-panel:is([data-puzzle],.game-end-card) { border-color: var(--g-reward-edge); box-shadow: inset 0 0 0 3px var(--g-reward-bg),0 6px 0 var(--g-reward-edge),0 24px 70px #031e2b66; }
.rescue-page :is(.lw-dialog-actions,.nq-puzzle-actions,.game-end-actions,.game-memory-actions) .lw-primary { border-block-end-width: 4px; }
.rescue-page .lw-letter-question-choices > .is-memory-clue { outline: 3px solid var(--g-focus); outline-offset: 2px; }
.rescue-page .lesson-practice-photo > svg { display: block; inline-size: 100%; block-size: auto; }
.rescue-page .lw-result-art > svg { display: block; inline-size: 100%; block-size: 100%; }
@media (height <= 300px) {
.rescue-page #lw-dialog[open]:is([data-lesson="capture"],[data-lesson="memory"],[data-lesson="complete"],[data-lesson="retry"]),
.rescue-page .nq-panel:is([data-puzzle],.nq-memory-host,.game-end-card) { overflow-y: auto; }
.rescue-page #lw-dialog[open]:is([data-lesson="capture"],[data-lesson="memory"]) #lw-dialog-body,
.rescue-page .nq-memory-host > .game-memory-card { min-block-size: 230px; }
}
.game-controls-toggle,.nq-focus-level,.game-touch-hint { display: none; }
.game-focus .game-controls-toggle { display: grid; }
.game-focus .game-touch-hint { position: absolute; display: block; z-index: 2; inset: auto 12px 8px; inline-size: fit-content; max-inline-size: calc(100% - 24px); margin: auto; padding: 5px 10px; border-radius: 12px; color: var(--g-text); background: var(--g-surface); font-size: 12px; text-align: center; pointer-events: none; }
.game-focus .game-touch-hint[hidden],.game-focus [data-touch-used="true"] > .game-touch-hint { display: none; }
.rescue-page.game-focus #nq-dialog[open] { position: fixed; inset: 0; display: grid; grid-template-rows: auto minmax(0,1fr); inline-size: 100dvw; block-size: 100dvh; max-block-size: 100dvh; margin: 0; border: 0; border-radius: 0; overflow: hidden; }
.rescue-page.game-focus #nq-dialog .nq-header { display: flex; gap: 8px; align-items: center; padding: max(4px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) 4px max(8px,env(safe-area-inset-left)); min-block-size: 52px; }
.rescue-page.game-focus #nq-dialog :is(.nq-brand,.nq-mission-strip,.nq-controls-hint,.nq-header > .nq-icon:not(.game-controls-toggle)) { display: none; }
.rescue-page.game-focus #nq-dialog .nq-header > button[aria-label]:first-of-type { display: grid; }
.rescue-page.game-focus #nq-dialog .nq-focus-level { display: block; font-size: 14px; font-weight: 800; margin-inline-end: auto; }
.rescue-page.game-focus #nq-dialog .nq-lives { margin: 0; }
.rescue-page.game-focus #nq-dialog .nq-lives :is(.game-lives-caption,.game-life-icons) { display: none; }
.rescue-page.game-focus #nq-dialog .nq-stats { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.rescue-page.game-focus #nq-dialog .nq-stage { grid-row: 2; min-block-size: 0; block-size: 100%; }
.rescue-page.game-focus #nq-dialog .nq-canvas { display: block; inline-size: 100%; block-size: 100%; max-block-size: none; min-block-size: 0; aspect-ratio: auto; touch-action: none; }
.rescue-page.game-focus #nq-dialog .nq-controls { display: none; }
.rescue-page.game-focus.game-controls-open #nq-dialog .nq-controls { position: absolute; z-index: 8; inset: auto 8px max(8px,env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; justify-content: center; padding: 8px; border: 1px solid var(--g-border); border-radius: 16px; background: var(--g-surface); }
.rescue-page.game-focus #nq-dialog .nq-encounter { inset: auto 8px max(8px,env(safe-area-inset-bottom)); inline-size: auto; max-inline-size: none; padding: 6px; border-radius: 14px; transform: none; display: flex; justify-content: center; gap: 6px; }
.rescue-page.game-focus #nq-dialog .nq-encounter[hidden] { display: none; }
.rescue-page.game-focus #nq-dialog .nq-encounter > p { display: none; }
.rescue-page.game-focus #nq-dialog .nq-encounter button { margin: 0; min-block-size: 44px; font-size: 13px; }
.rescue-page.game-focus.lw-chase-session .lw-run-hud { display: flex; gap: 8px; padding: max(4px,env(safe-area-inset-top)) 8px 4px; align-items: center; min-block-size: 52px; }
.rescue-page.game-focus.lw-chase-session .lw-run-hud::before { content: attr(data-focus-progress); font-size: 14px; font-weight: 800; white-space: nowrap; margin-inline-end: auto; }
.rescue-page.game-focus.lw-chase-session .lw-run-hud > :is(.lw-run-heading,.lw-run-score,.lw-run-goals,.lw-letter-track,.lw-run-glow) { display: none; }
.rescue-page.game-focus.lw-chase-session .lw-run-hearts :is(.game-lives-caption,.game-life-icons) { display: none; }
.rescue-page.game-focus.lw-chase-session .lw-arena-actions { display: flex; gap: 5px; flex-wrap: nowrap; }
.rescue-page.game-focus.lw-chase-session .lw-arena-actions > :is(#lw-chase-exit,.lw-arena-exit,#lw-chase-start) { display: none; }
.rescue-page.game-focus.lw-chase-session .lw-arena-actions :is(button,summary) { min-inline-size: 44px; min-block-size: 44px; padding: 7px; font-size: 12px; }
.rescue-page.game-focus.lw-chase-session .lw-map-column { grid-template-rows: auto minmax(0,1fr); }
.rescue-page.game-focus.lw-chase-session .lw-map-toolbar { display: none; }
.rescue-page.game-focus.game-controls-open.lw-chase-session .lw-map-toolbar { position: absolute; z-index: 8; inset: auto 8px max(8px,env(safe-area-inset-bottom)); display: flex; inline-size: auto; border: 1px solid var(--g-border); border-radius: 16px; padding: 6px; background: var(--g-surface); }
.game-focus .lw-chase-layer { touch-action: none; }
.game-focus-setting { display: flex; align-items: center; gap: 8px; min-block-size: 44px; font-size: 13px; }
.game-focus-setting input { inline-size: 20px; block-size: 20px; flex: 0 0 auto; }
.rescue-page #lw-dialog[data-lesson="capture"] #lw-dialog-body .lesson-example.is-letter-question { grid-template: minmax(0,1fr) / minmax(0,1fr) minmax(0,1fr); gap: 12px; padding: 8px; align-items: center; }
.lw-question-content { display: grid; justify-items: center; align-content: center; gap: 8px; min-block-size: 0; min-inline-size: 0; }
.rescue-page #lw-dialog[data-lesson="capture"] .is-letter-question .lw-capture-art { inline-size: 100%; block-size: 100%; min-block-size: 70px; border-radius: 14px; overflow: hidden; }
.lw-chase-pip.is-drinking .lw-chomp-mouth { fill: #8fd5dc; opacity: 1; }
.rescue-page .lw-water-stop { fill: #8fd5dc; stroke: none; }
.game-audio-layers { display: grid; gap: 6px; inline-size: 100%; }
@media (width <= 550px) and (height > 550px) {
.rescue-page #lw-dialog[data-lesson="capture"] #lw-dialog-body .lesson-example.is-letter-question { grid-template: minmax(60px,1fr) auto / minmax(0,1fr); gap: 6px; }
}
.rescue-page.game-focus.lw-chase-session .lw-garden-map-button { min-inline-size: 44px; inline-size: 48px; min-block-size: 44px; padding: 4px; inset-inline-end: 8px; inset-block-end: max(8px,env(safe-area-inset-bottom)); }
.rescue-page.game-focus.lw-chase-session .lw-garden-room-name { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.rescue-page.game-focus.lw-chase-session .game-touch-hint { inset-block-end: 60px; }
.nq-touch-lesson { display: none; }
.game-focus .nq-touch-lesson { display: flex; justify-content: center; gap: 24px; margin-block: 10px; }
.game-focus .nq-touch-lesson span { display: grid; place-items: center; inline-size: 62px; block-size: 62px; margin: auto; border: 2px solid var(--g-border); border-radius: 18px; background: var(--g-soft); color: var(--g-text); font: 800 38px/1 sans-serif; }
.game-focus .nq-touch-lesson p { margin: 6px 0 0; font-size: 14px; font-weight: 750; }
.game-focus .nq-panel > :is(.nq-story-goals,.nq-level-mechanic) { display: none; }
.game-focus :is(.nq-lives,.lw-run-hearts) .game-lives-count::before { content: "♥ "; color: var(--g-accent); }
.game-memory-art > .game-image { inline-size: 100%; block-size: 100%; aspect-ratio: auto; border: 2px solid #537b58; border-radius: 16px; }
.game-memory-art > .game-image img { inline-size: 100%; block-size: 100%; object-fit: cover; }
[data-reward="discover"] { outline: 2px solid var(--g-accent, #997521); outline-offset: -2px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-hero[data-reward="discover"] { border-radius: 20px; background: radial-gradient(ellipse at center,var(--g-reward-bg),transparent 75%); box-shadow: 0 0 20px color-mix(in srgb,var(--g-reward-edge) 25%,transparent); }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-hero[data-reward="discover"] .lw-letter-heading span { border-color: var(--g-reward-edge); box-shadow: 0 5px 0 var(--g-reward-edge),0 0 18px color-mix(in srgb,var(--g-reward-edge) 35%,transparent); }
.game-reasoning { display: contents; }
.game-reasoning-panel { box-sizing: border-box; inline-size: min(640px,calc(100dvw - 32px)); max-block-size: calc(100dvh - 48px); overflow-y: auto; padding: 20px; border: 2px solid var(--g-border, #70948b); border-radius: 20px; background: var(--g-surface, #f5f1dc); color: var(--g-text, #173e35); text-align: start; font-size: 16px; line-height: 1.5; box-shadow: 0 12px 48px #0006; }
.game-reasoning-panel::backdrop { background: #0d3032a6; }
.game-reasoning-panel > h3 { margin-block: 0 10px; }
.game-reasoning-panel > button { margin-block-start: 16px; }
.game-reasoning-prompt { margin-block: 10px; }
.game-reasoning-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.game-reasoning-choices .lw-button { flex: 1 1 100px; min-block-size: 44px; white-space: normal; }
.game-reasoning-choices [data-answer-state="correct"]::after { content: " ✓"; }
.rescue-page .game-reasoning-panel .game-reasoning-choices button[data-answer-state="correct"] { opacity: 1; background: var(--g-primary) !important; color: var(--g-on-primary) !important; border-color: var(--g-accent); border-style: solid; }
.game-reasoning-choices [data-answer-state="retry"] { text-decoration: line-through; }
.game-reasoning-feedback { margin-block: 8px 0; }
.game-reasoning-feedback:empty { display: none; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-capture-hero.is-letter-question { display: none; }
.rescue-page #lw-dialog[data-lesson="capture"]:has(.is-letter-question) #lw-dialog-body { grid-template: minmax(0,1fr) 36px 52px / minmax(0,1fr); }
.rescue-page #lw-dialog[data-lesson="capture"]:has(.is-letter-question) #lw-dialog-body > .lesson-example { grid-area: 1/1; grid-template: minmax(0,1fr) / minmax(0,.75fr) minmax(0,1.25fr); gap: 16px; padding: 12px; align-items: stretch; }
.rescue-page #lw-dialog[data-lesson="capture"]:has(.is-letter-question) #lw-dialog-body > .lw-capture-summary { grid-area: 2/1; }
.rescue-page #lw-dialog[data-lesson="capture"]:has(.is-letter-question) #lw-dialog-body > .lw-dialog-actions { grid-area: 3/1; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-question-content { display: grid; grid-template-columns: minmax(0,1fr); grid-auto-rows: max-content; align-content: safe center; place-items: center center; gap: 14px; padding: clamp(12px,2vw,28px); border: 2px solid var(--g-letter-edge); border-radius: 20px; background: var(--g-surface); color: var(--g-text); overflow-y: auto; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-question-content > * { grid-area: auto; max-inline-size: 100%; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-question-step { margin: 0; padding: 5px 10px; border-radius: 999px; background: var(--g-reward-bg); color: var(--g-reward-text); font-size: 12px; line-height: 1.4; font-weight: 800; letter-spacing: .04em; text-align: center; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-letter-question-prompt { margin: 0; color: var(--g-text); font-size: clamp(24px,3vw,36px); font-weight: 800; line-height: 1.2; text-align: center; text-wrap: balance; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-question-instruction { margin: 0; color: var(--g-text); font-size: 16px; line-height: 1.5; text-align: center; text-wrap: balance; }
.rescue-page #lw-dialog[data-lesson="capture"] .lesson-example[data-question-result] :is(.lw-question-step,.lw-question-instruction) { display: none; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-letter-question-choices { display: flex; justify-content: center; gap: 12px; inline-size: 100%; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-letter-question-choices button { flex: 0 1 90px; min-inline-size: 52px; min-block-size: 72px; margin: 0; padding: 4px; font-size: 42px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-letter-question-choices button[data-answer-state="correct"] { background: var(--g-primary) !important; color: var(--g-on-primary) !important; border-style: solid; border-color: var(--g-accent); }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-letter-question-choices button[data-answer-state="retry"] { text-decoration: line-through; }
.lw-answer-check { font-size: .45em; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-letter-question-feedback { color: var(--g-text); font-size: 16px; font-weight: 700; line-height: 1.4; }
.rescue-page #lw-dialog[data-card-step="question"] .lw-dialog-actions > .lw-primary { background: var(--g-soft) !important; color: var(--g-text) !important; font-size: 13px; }
@media (width <= 600px) and (height > 650px) {
.rescue-page #lw-dialog[data-lesson="capture"]:has(.is-letter-question) #lw-dialog-body > .lesson-example { grid-template: minmax(60px,.6fr) minmax(0,1.4fr) / minmax(0,1fr); gap: 8px; padding: 8px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-question-content { grid-area: 2/1; gap: 10px; padding: 14px; }
}
@media (height <= 650px) {
.rescue-page #lw-dialog[data-lesson="capture"]:has(.is-letter-question) #lw-dialog-body > .lesson-example { grid-template: minmax(0,1fr) / minmax(0,.4fr) minmax(0,1.6fr); gap: 6px; padding: 4px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-question-content { gap: 6px; padding: 8px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-letter-question-prompt { font-size: 22px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-question-step { font-size: 10px; padding: 3px 6px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-question-instruction { font-size: 13px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-letter-question-choices { gap: 6px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-letter-question-choices button { min-block-size: 52px; font-size: 32px; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-letter-question-feedback { font-size: 13px; }
}
@media (width <= 550px) and (height <= 500px) {
.rescue-page #lw-dialog[data-lesson="capture"] .lw-question-content { gap: 5px; padding: 6px 8px; }
}
@media (height <= 400px) and (width > 550px) {
.rescue-page #lw-dialog[data-lesson="capture"]:has(.is-letter-question) #lw-dialog-body { grid-template-rows: minmax(0,1fr) 48px; }
.rescue-page #lw-dialog[data-lesson="capture"]:has(.is-letter-question) #lw-dialog-body > .lw-capture-summary { display: none; }
.rescue-page #lw-dialog[data-lesson="capture"]:has(.is-letter-question) #lw-dialog-body > .lw-dialog-actions { grid-area: 2/1; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-question-step,.rescue-page #lw-dialog[data-lesson="capture"] .lw-question-instruction { display: none; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-question-content { grid-template-columns: minmax(0,1fr) auto; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-question-content > .lw-letter-question-prompt { grid-area: 1/1/2/3; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-question-content > .lw-letter-question-choices { grid-area: 2/1; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-question-content > .lw-audio-actions { grid-area: 2/2; }
.rescue-page #lw-dialog[data-lesson="capture"] .lw-question-content > .lw-letter-question-feedback { grid-area: 3/1/4/3; }
}
.rescue-page .nq-overlay:has(.nq-panel[data-puzzle],.game-end-card) { inset: 0; padding: 8px; background: #041b2766; backdrop-filter: blur(5px); }
.rescue-page :is(.nq-panel,.game-end-card,.game-memory-card,.nn-dialog,.game-reasoning-panel) { overflow-wrap: break-word; }
.rescue-page :is(.nq-panel,.game-end-card,.game-memory-card,.nn-dialog,.game-reasoning-panel) :is(h2,h3,p) { max-inline-size: 100%; }
.rescue-page :is(.nq-puzzle-heading,.game-end-heading) :is(h2,h3) { text-wrap: balance; }
.rescue-page :is(.nq-puzzle-actions,.game-end-actions,.game-memory-actions,.lw-dialog-actions) button { white-space: normal; overflow-wrap: break-word; line-height: 1.35; }
.rescue-page .nq-puzzle-heading > p:not(.nq-eyebrow) { text-wrap: pretty; }
.rescue-page .game-end-summary { max-inline-size: 65ch; justify-self: center; }
.rescue-page .nq-puzzle-actions[hidden] { display: none !important; }
.rescue-page .nq-panel[data-puzzle="ferry"] .nq-ferry-counting { display: grid; grid-template-columns: minmax(0,1fr); justify-items: center; gap: 8px; }
.rescue-page .nq-panel[data-puzzle="ferry"] .nq-ferry-step { margin: 0; color: var(--g-text); font-weight: 750; font-size: 14px; line-height: 1.4; text-align: center; }
.rescue-page .nq-ferry-groups { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 10px; inline-size: 100%; }
.rescue-page .nq-ferry-group { padding: 10px; border: 1px solid var(--g-border); border-radius: 16px; background: var(--g-surface); }
.rescue-page .nq-ferry-group:first-child { border-block-end: 5px solid var(--g-reward-edge); border-end-start-radius: 28px; border-end-end-radius: 28px; }
.rescue-page .nq-ferry-group:last-child { border-block-end: 5px solid var(--g-accent); }
.rescue-page .nq-panel[data-puzzle="ferry"] .nq-ferry-group h4 { margin: 0 0 8px; font-size: 14px; line-height: 1.4; color: var(--g-text); text-align: center; }
.nq-ferry-bird-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.rescue-page .nq-panel[data-puzzle="ferry"] .nq-ferry-count-bird { position: relative; inline-size: 54px; min-inline-size: 44px; block-size: 64px; min-block-size: 44px; margin: 0; padding: 2px; border: 1px dashed var(--g-border); border-radius: 12px; background: var(--g-raised) !important; color: var(--g-text); box-shadow: none; }
.nq-ferry-count-bird svg { display: block; inline-size: 100%; block-size: 46px; }
.rescue-page .nq-panel[data-puzzle="ferry"] .nq-ferry-count-bird[aria-pressed="true"] { border-style: solid; background: var(--g-reward-bg) !important; }
.nq-ferry-count-label { position: absolute; inset: auto -2px -2px auto; display: grid; place-items: center; min-inline-size: 22px; block-size: 22px; padding: 0 2px; border-radius: 50%; background: var(--g-primary); color: var(--g-on-primary); font-size: 14px; font-weight: 800; }
.nq-ferry-count-label:empty { display: none; }
.rescue-page .nq-panel[data-puzzle="ferry"] .nq-ferry-counting-status { margin: 0; min-block-size: 32px; max-inline-size: 50ch; font-size: 14px; line-height: 1.4; color: var(--g-text); text-align: center; }
.rescue-page .nq-panel[data-puzzle="ferry"] .nq-ferry-equation { margin: 0; font-size: 24px; line-height: 1.3; font-weight: 800; color: var(--g-text); }
.rescue-page .nq-panel[data-puzzle="ferry"] .nq-ferry-seats { gap: 8px; }
.rescue-page .nq-panel[data-puzzle="ferry"] .nq-ferry-seat { position: relative; inline-size: 54px; block-size: 54px; padding: 4px; color: var(--g-text); background: var(--g-surface) !important; }
.rescue-page .nq-panel[data-puzzle="ferry"] .nq-ferry-seat svg { inline-size: 36px; block-size: 36px; opacity: 1; }
.nq-seat-check { position: absolute; inset: -4px -4px auto auto; display: none; place-items: center; inline-size: 20px; block-size: 20px; background: var(--g-primary); color: var(--g-on-primary); border-radius: 50%; font-size: 13px; }
.rescue-page .nq-panel[data-puzzle="ferry"] .nq-ferry-seat.is-loaded { background: var(--g-reward-bg) !important; color: var(--g-reward-text); }
.nq-ferry-seat.is-loaded .nq-seat-check { display: grid; }
.rescue-page .nq-panel:is([data-puzzle="lantern"],[data-puzzle="stones"]) .nq-order-scene { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0,1fr); justify-items: center; gap: 14px; padding: 22px 20px 16px; overflow: hidden; border-radius: 24px; background: radial-gradient(ellipse at 85% 0%,color-mix(in srgb,var(--g-reward-bg) 55%,transparent),transparent 45%),var(--g-soft); }
.nq-order-landscape { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.nq-order-landscape::before { content: ""; position: absolute; inset: 55% -20% -30%; border-radius: 50% 50% 0 0; background: color-mix(in srgb,var(--g-accent) 9%,transparent); transform: rotate(-8deg); }
.nq-order-landscape::after { content: "✦  ·  ✦"; position: absolute; inset: 16% 8% auto auto; color: var(--g-reward-edge); opacity: .35; font-size: 18px; letter-spacing: 24px; }
.nq-order-friend { position: absolute; inline-size: 44px; block-size: 44px; inset: auto auto 52px 14px; transition: translate 250ms ease-out; }
.nq-order-friend svg { inline-size: 100%; block-size: 100%; }
[data-lit-count="1"] .nq-order-friend { translate: 12px -4px; }
[data-lit-count="2"] .nq-order-friend { translate: 26px -7px; }
.rescue-page .nq-panel[data-puzzle] .nq-order-rule { margin: 0; padding: 5px 14px; border: 1px solid color-mix(in srgb,var(--g-reward-edge) 35%,transparent); border-radius: 999px; background: var(--g-surface); color: var(--g-text); font-size: 14px; font-weight: 750; line-height: 1.4; }
.rescue-page .nq-panel[data-puzzle] .nq-order-controls { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: center; gap: 14px; inline-size: min(480px,100%); }
.rescue-page .nq-panel[data-puzzle] .nq-order-controls .nq-order-object { position: relative; display: grid; place-items: center; inline-size: 100%; min-inline-size: 44px; block-size: 180px; margin: 0; padding: 0; background: transparent !important; color: var(--g-reward-edge); border: 0; border-radius: 20px; box-shadow: none; cursor: pointer; transition: scale 150ms ease-out; }
.rescue-page .nq-panel[data-puzzle] .nq-order-controls .nq-order-object:not(:disabled):hover { background: color-mix(in srgb,var(--g-reward-bg) 22%,transparent) !important; scale: 1.035; }
.nq-order-object-art { position: absolute; inset: 0; }
.nq-order-object-art svg { display: block; inline-size: 100%; block-size: 100%; overflow: visible; }
.rescue-page .nq-panel[data-puzzle] .nq-order-number { position: absolute; inset: 43% 0 auto; color: var(--g-text); font-size: 38px; line-height: 1.2; font-weight: 850; text-align: center; }
.nq-order-check { position: absolute; inset: 0 8px auto auto; display: none; place-items: center; inline-size: 26px; block-size: 26px; border-radius: 50%; background: var(--g-primary); color: var(--g-on-primary); font-size: 16px; }
.nq-lantern-flame { opacity: 0; }
.rescue-page .nq-panel[data-puzzle] .nq-order-object.is-lit { opacity: 1; color: var(--g-reward-edge); filter: drop-shadow(0 0 14px color-mix(in srgb,var(--g-reward-bg) 70%,transparent)); }
.nq-order-object.is-lit .nq-lantern-glass { fill: var(--g-reward-bg); }
.nq-order-object.is-lit .nq-lantern-flame { opacity: .3; }
.nq-order-object.is-lit .nq-order-check { display: grid; }
.nq-order-object.is-lit .nq-order-number { color: var(--g-reward-text); }
.nq-order-trail { display: flex; align-items: center; gap: 10px; }
.nq-order-token { display: grid; place-items: center; inline-size: 34px; block-size: 34px; border: 1px dashed var(--g-border); border-radius: 10px; background: var(--g-surface); color: var(--g-muted); font-size: 18px; font-weight: 750; }
.nq-order-token.is-filled { border-style: solid; background: var(--g-reward-bg); color: var(--g-reward-text); }
.nq-order-arrow { color: var(--g-muted); }
.rescue-page .nq-panel[data-puzzle] .nq-order-status { min-block-size: 40px; max-inline-size: 48ch; margin: 0; font-size: 14px; line-height: 1.4; text-align: center; }
@media (width <= 600px) {
.rescue-page .nq-panel[data-puzzle="ferry"] .nq-panel-copy { display: none; }
.rescue-page .nq-panel[data-puzzle="ferry"] .nq-ferry-group { padding: 6px; }
.rescue-page .nq-panel[data-puzzle="ferry"] .nq-ferry-group h4 { font-size: 12px; margin-block-end: 4px; }
.rescue-page .nq-panel[data-puzzle="ferry"] .nq-ferry-count-bird { inline-size: 44px; block-size: 48px; }
.rescue-page .nq-panel[data-puzzle="ferry"] .nq-ferry-count-bird svg { block-size: 38px; }
.rescue-page .nq-panel[data-puzzle="ferry"] .nq-ferry-counting { gap: 5px; }
.rescue-page .nq-panel[data-puzzle="ferry"] .nq-ferry-step,.rescue-page .nq-panel[data-puzzle="ferry"] .nq-ferry-counting-status { font-size: 12px; }
.rescue-page .nq-panel[data-puzzle="ferry"] .nq-ferry-counting-status { min-block-size: 0; }
.rescue-page .nq-panel[data-puzzle="ferry"] .nq-ferry-seat { inline-size: 44px; block-size: 44px; }
.rescue-page .nq-panel[data-puzzle="ferry"] .nq-ferry-seats { gap: 4px; }
.rescue-page .nq-panel:is([data-puzzle="lantern"],[data-puzzle="stones"]) .nq-order-scene { gap: 10px; padding: 14px 10px; }
.rescue-page .nq-panel[data-puzzle] .nq-order-controls { gap: 6px; }
.rescue-page .nq-panel[data-puzzle] .nq-order-controls .nq-order-object { block-size: 138px; }
.rescue-page .nq-panel[data-puzzle] .nq-order-number { font-size: 30px; }
.nq-order-friend { inline-size: 32px; block-size: 32px; inset-inline-start: 6px; }
}
@media (height <= 550px) {
.rescue-page .nq-panel[data-puzzle="ferry"] .nq-panel-copy { display: none; }
.rescue-page .nq-panel[data-puzzle="ferry"] .nq-ferry-counting-status { min-block-size: 0; font-size: 11px; }
.rescue-page .nq-panel[data-puzzle="ferry"] .nq-ferry-equation { font-size: 19px; }
.rescue-page .nq-panel:is([data-puzzle="lantern"],[data-puzzle="stones"]) .nq-order-scene { gap: 6px; padding: 8px; }
.rescue-page .nq-panel[data-puzzle] .nq-order-controls .nq-order-object { block-size: 105px; }
.rescue-page .nq-panel[data-puzzle] .nq-order-rule { font-size: 12px; padding: 3px 8px; }
.rescue-page .nq-panel[data-puzzle] .nq-order-number { font-size: 26px; }
.rescue-page .nq-panel[data-puzzle] .nq-order-status { min-block-size: 32px; font-size: 12px; }
.nq-order-token { inline-size: 26px; block-size: 26px; font-size: 15px; }
.nq-order-friend { display: none; }
}
@media (height <= 550px) and (width > 550px) {
.rescue-page .nq-panel[data-puzzle="ferry"] { grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(0,1fr) auto; gap: 6px; padding: 10px; }
.rescue-page .nq-panel[data-puzzle="ferry"] .nq-puzzle-heading { grid-area: 1/1; grid-template-rows: auto; min-block-size: 44px; }
.rescue-page .nq-panel[data-puzzle="ferry"] .nq-puzzle-heading > .nq-eyebrow,.rescue-page .nq-panel[data-puzzle="ferry"] .nq-card-bird { display: none; }
.rescue-page .nq-panel[data-puzzle="ferry"] .nq-puzzle-heading h3 { padding-inline: 0 104px; font-size: 20px; min-block-size: 44px; margin: 0; }
.rescue-page .nq-panel[data-puzzle="ferry"] .nq-puzzle-workspace { grid-area: 2/1; align-content: center; }
.rescue-page .nq-panel[data-puzzle="ferry"] .nq-puzzle-actions { grid-area: 3/1; }
.rescue-page .nq-panel[data-puzzle="ferry"] .nq-ferry-counting { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: auto auto auto; gap: 4px 10px; padding: 6px; }
.rescue-page .nq-panel[data-puzzle="ferry"] .nq-ferry-step:first-child { grid-area: 1/1; }
.rescue-page .nq-panel[data-puzzle="ferry"] .nq-ferry-groups { grid-area: 2/1; gap: 4px; }
.rescue-page .nq-panel[data-puzzle="ferry"] .nq-ferry-counting-status { grid-area: 3/1; font-size: 10px; }
.rescue-page .nq-panel[data-puzzle="ferry"] .nq-ferry-equation { grid-area: 3/2; font-size: 18px; }
.rescue-page .nq-panel[data-puzzle="ferry"] .nq-ferry-step:nth-of-type(4) { grid-area: 1/2; }
.rescue-page .nq-panel[data-puzzle="ferry"] .nq-ferry-seats { grid-area: 2/2; align-self: center; gap: 2px; }
.rescue-page .nq-panel[data-puzzle="ferry"] .nq-ferry-group { padding: 3px; }
.rescue-page .nq-panel[data-puzzle="ferry"] .nq-ferry-group h4 { font-size: 10px; margin: 0 0 2px; }
.rescue-page .nq-panel[data-puzzle="ferry"] .nq-puzzle-answers { grid-template-columns: auto minmax(0,1fr); align-items: center; }
.rescue-page .nq-panel[data-puzzle="ferry"] .nq-puzzle-answers > .lw-primary { grid-area: 1/2; }
.rescue-page .nq-panel[data-puzzle="ferry"] .nq-mechanism-load { grid-area: 1/1; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
.nq-order-friend,.rescue-page .nq-panel[data-puzzle] .nq-order-controls .nq-order-object { transition: none; }
}
@media (width < 700px) and (height >= 700px) {
.rescue-page .nq-panel[data-puzzle] { block-size: auto; max-block-size: calc(100dvh - 32px); grid-template-rows: auto auto auto; gap: 14px; padding: 14px; }
.rescue-page .nq-panel[data-puzzle] .nq-puzzle-workspace { align-content: start; }
.rescue-page .nq-panel[data-puzzle] .nq-obstacle-puzzle > .nq-route-preview { inline-size: min(320px,100%); block-size: 140px; max-block-size: none; }
}
@media (width >= 700px) and (height >= 650px) {
.rescue-page .nq-overlay:has(.nq-panel[data-puzzle]) { inset: 0; padding: 20px; }
.rescue-page .nq-panel[data-puzzle] { inline-size: min(760px,100%); block-size: auto; max-block-size: min(720px,100%); grid-template-rows: auto auto auto; gap: 18px; padding: 24px; }
.rescue-page .nq-panel[data-puzzle] .nq-puzzle-heading { text-align: start; }
.rescue-page .nq-panel[data-puzzle] .nq-puzzle-heading h3 { font-size: clamp(26px,2.5vw,32px); line-height: 1.25; }
.rescue-page .nq-panel[data-puzzle] .nq-puzzle-heading > p:not(.nq-eyebrow) { max-inline-size: 62ch; font-size: 16px; line-height: 1.5; }
.rescue-page .nq-panel[data-puzzle] .nq-puzzle-workspace { align-content: start; gap: 8px; }
.rescue-page .nq-panel[data-puzzle] .nq-puzzle-visual { padding: 16px; }
.rescue-page .nq-panel[data-puzzle] .nq-obstacle-puzzle > .nq-route-preview { inline-size: min(420px,100%); block-size: 170px; max-block-size: none; }
.rescue-page .nq-panel[data-puzzle] .nq-puzzle-actions { align-content: start; }
.rescue-page .nq-panel[data-puzzle] .nq-puzzle-answers button { min-block-size: 52px; }
}
.nq-brand-emblem { display: block; inline-size: 62px; block-size: 58px; float: inline-start; margin-inline-end: 10px; }
.nq-brand-emblem svg,.nq-focus-emblem svg { inline-size: 100%; block-size: 100%; }
.nq-focus-emblem { display: none; }
.game-focus .nq-focus-emblem { display: block; flex: 0 0 34px; inline-size: 34px; block-size: 40px; }
.rescue-page .nq-cover { display: grid; place-items: center; align-content: center; background: radial-gradient(ellipse at center,#a9c493,#245c50); }
.rescue-page .nq-cover > svg { inline-size: min(180px,50%); block-size: auto; max-block-size: 90%; }
.game-story-goals { display: flex; flex-wrap: wrap; gap: 5px 12px; padding: 8px 12px; border: 1px solid var(--g-border); border-radius: 14px; background: var(--g-surface); color: var(--g-text); font-size: 12px; line-height: 1.4; box-sizing: border-box; }
.game-goal-item { min-inline-size: 0; }
.game-goal-item > strong { display: inline-block; margin-inline-end: 4px; color: var(--g-accent); }
.nq-story-goals-live { position: absolute; z-index: 3; inset: 8px 12px auto; pointer-events: none; }
.nq-stage:not([data-phase="playing"]) .nq-story-goals-live,.nq-stage:not([data-phase="playing"]) .nq-peck { display: none; }
.lw-story-goals-live { position: absolute; z-index: 3; inset: 8px 12px auto; pointer-events: none; }
.rescue-page :is(#lw-map,.nq-stage):has(.game-field-notice-banner:not([hidden])) > .game-story-goals { visibility: hidden; }
body:has(#lw-dialog[open]) .lw-story-goals-live { visibility: hidden; }
.rescue-page .nq-peck { position: absolute; z-index: 7; inset: auto 14px 16px auto; display: grid; place-items: center; min-inline-size: 68px; min-block-size: 56px; padding: 8px 14px; border: 2px solid var(--g-reward-edge); border-radius: 50% 50% 40% 40%; background: var(--g-reward-bg) !important; color: var(--g-reward-text); box-shadow: 0 4px 0 var(--g-reward-edge); font-size: 15px; font-weight: 800; touch-action: manipulation; }
.rescue-page .nq-peck:active { translate: 0 2px; box-shadow: 0 2px 0 var(--g-reward-edge); }
.rescue-page .nq-peck::after { content: ""; position: absolute; inset: auto 12px 5px; block-size: 3px; border-radius: 999px; background: currentcolor; transform: scaleX(var(--peck-ready,1)); transform-origin: center; pointer-events: none; }
.rescue-page .nq-stage > .nq-jump { position: absolute; z-index: 7; inset: auto auto max(16px,env(safe-area-inset-bottom)) 14px; min-inline-size: 68px; min-block-size: 60px; border: 2px solid var(--g-border); border-radius: 50%; background: var(--g-primary) !important; color: var(--g-on-primary); font-size: 14px; font-weight: 800; padding: 10px; touch-action: none; }
.nq-stage:not([data-phase="playing"]) > .nq-jump { display: none; }
.game-focus .nq-stage > .game-touch-hint { inset-block-end: 86px; }
.rescue-page .nq-peck[aria-disabled="true"] { border-style: dashed; }
.nq-creature-guide { text-align: start; padding: 8px; border: 1px solid var(--g-border); border-radius: 12px; margin-block-start: 8px; }
.nq-creature-guide summary { cursor: pointer; min-block-size: 44px; align-content: center; font-weight: 700; }
.nq-creature-guide p,.nq-story-summary { font-size: 14px; line-height: 1.5; }
.nq-creature-guide p { margin-block: 8px; }
.nq-creature-guide[open] { max-block-size: 38dvh; overflow-y: auto; }
.nq-creature-entry { display: flex; align-items: center; gap: 8px; }
.nq-creature-entry canvas { flex: 0 0 60px; inline-size: 60px; block-size: 45px; }
.rescue-page .nq-overlay:has(> .nq-panel:not([data-puzzle],.game-end-card)) { align-items: safe center; overflow-y: auto; }
@media (width <= 700px) {
.game-story-goals { padding: 6px 8px; gap: 4px 10px; font-size: 12px; border-radius: 10px; }
.game-story-goals > .game-goal-item:first-child { flex-basis: 100%; font-size: 12px; font-weight: 650; }
.rescue-page .nq-peck { min-inline-size: 60px; min-block-size: 52px; right: max(10px,env(safe-area-inset-right)); bottom: max(16px,env(safe-area-inset-bottom)); }
}
@media (height <= 450px) {
.game-story-goals { padding: 4px 8px; font-size: 12px; }
.game-story-goals > .game-goal-item:first-child { flex-basis: auto; font-size: 12px; }
.rescue-page .nq-peck { min-block-size: 46px; min-inline-size: 54px; padding: 6px; font-size: 13px; right: max(10px,env(safe-area-inset-right)); bottom: max(10px,env(safe-area-inset-bottom)); }
}
.rescue-page .nq-panel[data-puzzle] {
inline-size: min(820px,100%);
block-size: auto;
display: flex;
flex-direction: column;
align-items: stretch;
max-block-size: min(720px,calc(100dvh - 32px));
padding: clamp(14px,3vw,26px);
gap: 16px;
border: 2px solid var(--g-border);
border-radius: 28px;
box-shadow: 0 18px 64px #102e3559,inset 0 2px 0 #ffffff50;
}
.rescue-page .nq-panel[data-puzzle] .nq-puzzle-heading { position: relative; flex: 0 0 auto; padding-inline-end: 104px; min-block-size: 70px; }
.rescue-page .nq-panel[data-puzzle] .nq-puzzle-heading h3 { padding: 0; font-size: clamp(22px,3vw,32px); line-height: 1.2; }
.rescue-page .nq-panel[data-puzzle] .nq-puzzle-heading > p:not(.nq-eyebrow) { display: block; font-size: 15px; line-height: 1.5; max-inline-size: 60ch; }
.rescue-page .nq-panel[data-puzzle] .nq-card-bird { display: none; }
.rescue-page .nq-panel[data-puzzle] .nq-card-tools { position: absolute; inset: 0 0 auto auto; display: flex; gap: 8px; }
[dir="rtl"] .rescue-page .nq-panel[data-puzzle] .nq-card-tools { inset-inline: auto 0; }
.rescue-page .nq-panel[data-puzzle] .nq-puzzle-workspace { display: block; flex: 0 1 auto; align-content: start; overflow: auto; overscroll-behavior: contain; min-block-size: 0; scrollbar-width: thin; padding: 2px; }
.rescue-page .nq-panel[data-puzzle] .nq-puzzle-visual { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; padding: 0; border: 0; background: transparent; }
.rescue-page .nq-panel[data-puzzle] .nq-puzzle-visual > .nq-workshop { flex: 0 0 100%; grid-column: 1/-1; }
.rescue-page .nq-panel[data-puzzle] .nq-puzzle-actions { flex: 0 0 auto; padding-block-start: 12px; border-block-start: 1px solid var(--g-border); }
.rescue-page .nq-panel[data-puzzle] .nq-puzzle-answers { gap: 10px; }
.rescue-page .nq-panel[data-puzzle] .nq-puzzle-answers button { min-block-size: 48px; border-radius: 14px; font-size: 18px; }
.rescue-page .nq-panel[data-puzzle] .nq-puzzle-answers > .lw-primary { font-size: 16px; }
.rescue-page .nq-panel[data-puzzle] .nq-worked-example:not([hidden]) { padding: 12px; font-size: 14px; }
.rescue-page .nq-panel[data-puzzle] .nq-puzzle-feedback:not(:empty) { margin: 10px 0 2px; padding: 8px 10px; border: 1px solid var(--g-border); border-inline-start: 4px solid var(--g-danger); border-radius: 10px; background: var(--g-soft); font-size: 14px; }
.rescue-page [data-needs-adjustment] { outline: 3px dashed var(--g-danger); outline-offset: -3px; }
.nq-workshop { inline-size: 100%; min-inline-size: 0; }
.nq-workshop-art { border: 1px solid #6d8567; border-radius: 20px; overflow: hidden; background: #d9e6ce; }
.nq-workshop-art > svg { display: block; inline-size: 100%; block-size: auto; max-block-size: 310px; }
.rescue-page .nq-workshop-caption { margin: 10px 0 0; font-size: 14px; line-height: 1.4; text-align: center; color: var(--g-text); }
.nq-installed-plank { opacity: 0; translate: 0 -50px; transform-box: fill-box; transform-origin: center; rotate: -8deg; transition: opacity 180ms,translate 360ms cubic-bezier(.2,.8,.3,1.1),rotate 360ms; }
.nq-installed-plank.is-installed { opacity: 1; translate: 0 0; rotate: 0deg; }
.nq-workshop-traveler { transition: translate 1000ms 300ms ease-in-out; }
.nq-workshop.is-complete .nq-workshop-traveler { animation: workshop-cross 1400ms ease-in-out both; }
.nq-scale-arm { transform-origin: 320px 87px; transition: transform 500ms cubic-bezier(.25,.8,.3,1.2); }
.nq-scale-left,.nq-scale-right { transform-box: fill-box; transform-origin: top center; }
.nq-spring-coil { transform-origin: 187px 250px; transition: scale 250ms ease-out; }
.nq-flight-path { opacity: 0; }
.nq-workshop.is-complete .nq-flight-path { opacity: 1; }
.nq-workshop.is-complete .nq-spring-passenger { animation: workshop-launch 1100ms ease-out both; }
.nq-vane-arrow { transform-origin: 320px 97px; transition: rotate 350ms ease-in-out; }
.nq-valve-wheel { transform-origin: 398px 100px; transition: rotate 500ms; }
.nq-water-level { transition: translate 700ms ease-in-out; }
.nq-workshop-gate { transition: translate 700ms ease-in-out; }
.nq-workshop.is-complete .nq-workshop-gate { translate: 0 -150px; }
.nq-workshop.is-complete .nq-circuit { stroke: #f7e2a0; stroke-dasharray: none; }
.nq-home-bird { opacity: 0; }
.nq-workshop.is-complete .nq-home-bird { opacity: 1; }
.rescue-page .nq-timber-rack { display: flex; flex-wrap: wrap; justify-content: center; inline-size: 100%; gap: 10px; padding: 12px; border-radius: 16px; background: var(--g-soft); border: 1px solid var(--g-border); }
.rescue-page .nq-panel[data-puzzle="bridge"] .nq-plank-slot {
position: relative;
display: grid;
place-items: center;
flex: 0 0 56px;
inline-size: 56px;
block-size: 64px;
min-block-size: 44px;
margin: 0;
padding: 0;
border: 2px solid #674b30;
border-radius: 5px;
color: #3d2c1c;
background: linear-gradient(90deg,#d9ae70,#f1cf94 22%,#c99759 90%) !important;
box-shadow: 0 4px 0 #7f5836,inset 0 2px 0 #fff0c8;
transition: translate 150ms,opacity 180ms,box-shadow 150ms;
}
.nq-timber-grain { position: absolute; inset: 9px 7px; border-inline: 2px solid #9a693c; border-radius: 35%; opacity: .45; }
.nq-timber-number { position: relative; font-size: 17px; font-weight: 800; }
.nq-timber-check { display: none; position: absolute; inset: -8px -6px auto auto; inline-size: 22px; block-size: 22px; border-radius: 50%; background: var(--g-primary); color: var(--g-on-primary); font: 800 14px/22px sans-serif; }
.rescue-page .nq-panel[data-puzzle="bridge"] .nq-plank-slot.is-filled { translate: 0 3px; box-shadow: 0 1px 0 #7f5836; color: #3d2c1c; background: #ead9b5 !important; }
.nq-plank-slot.is-filled .nq-timber-check { display: block; }
.rescue-page .nq-panel[data-puzzle="bridge"] .nq-plank-slot:focus-visible { outline: 3px solid var(--g-text); outline-offset: 4px; }
.rescue-page .nq-panel[data-puzzle="bridge"] .nq-plank-slot::after { content: none; }
.rescue-page .nq-counting-egg.is-loaded { opacity: .4; translate: 0 -8px; }
.rescue-page .nq-panel[data-puzzle="ferry"] .nq-ferry-seats { display: flex; flex-wrap: wrap; justify-content: center; inline-size: 100%; padding: 14px 12px 24px; border-radius: 12px 12px 40% 40%; border: 3px solid #735134; border-block-end-width: 10px; background: repeating-linear-gradient(0deg,#c79d65 0 19px,#a97c49 20px 22px); }
.rescue-page .nq-panel[data-puzzle="ferry"] .nq-ferry-seat { background: #f7e7c6 !important; color: #493720; border-color: #705336; }
.rescue-page .nq-panel[data-puzzle="ferry"] .nq-ferry-seat.is-loaded { background: #d5ecd1 !important; }
.rescue-page .nq-panel[data-puzzle="ferry"] .nq-ferry-group { background: var(--g-soft); border-radius: 18px; padding: 12px; }
.rescue-page .nq-panel[data-puzzle="ferry"] .nq-ferry-group h4 { font-size: 14px; }
.rescue-page .nq-panel[data-puzzle="ferry"] .nq-ferry-counting-status { font-size: 14px; min-block-size: 0; }
.rescue-page .nq-panel[data-puzzle="ferry"] .nq-ferry-counting { gap: 12px; }
.rescue-page .nq-panel:is([data-puzzle="lantern"],[data-puzzle="stones"]) .nq-workshop { display: none; }
.rescue-page .nq-panel[data-puzzle="nest"] .nq-workshop { display: none; }
.rescue-page .game-end-scene .nq-workshop { max-inline-size: 640px; }
.rescue-page .nq-level-map { max-block-size: 48dvh; overflow: auto; }
.rescue-page .lw-region-grid { max-block-size: 55dvh; overflow: auto; }
.rescue-page .game-hub-card,.rescue-page #lw-intro { border: 1px solid var(--g-border); border-radius: 28px; overflow: hidden; box-shadow: 0 8px 0 color-mix(in srgb,var(--g-border) 20%,transparent),0 18px 36px #163e3512; }
.rescue-page .game-hub-card :is(.lw-primary,.nq-primary),.rescue-page #lw-play-chase { min-block-size: 52px; border-radius: 16px; }
@keyframes workshop-cross { from { translate: 0 0; } to { translate: 460px 0; } }
@keyframes workshop-launch { 0% { translate: 0 0; } 55% { translate: 170px -78px; } 100% { translate: 340px 14px; } }
@media (width <= 600px) {
.rescue-page .nq-panel[data-puzzle] { max-block-size: calc(100dvh - 16px); padding: 14px; gap: 12px; border-radius: 22px; }
.rescue-page .nq-panel[data-puzzle] .nq-puzzle-heading { padding-inline-end: 96px; }
.rescue-page .nq-panel[data-puzzle] .nq-puzzle-heading > p:not(.nq-eyebrow) { font-size: 14px; grid-column: 1/-1; }
.rescue-page .nq-timber-rack { padding: 10px 8px; gap: 8px; }
.rescue-page .nq-panel[data-puzzle="bridge"] .nq-plank-slot { flex-basis: 48px; inline-size: 48px; block-size: 54px; }
.rescue-page .nq-workshop-caption { font-size: 13px; }
}
@media (height <= 550px) {
.rescue-page .nq-panel[data-puzzle] { max-block-size: calc(100dvh - 16px); gap: 8px; padding: 12px; }
.rescue-page .nq-panel[data-puzzle] .nq-puzzle-heading { min-block-size: 44px; }
.rescue-page .nq-panel[data-puzzle] .nq-puzzle-heading h3 { font-size: 21px; }
.rescue-page .nq-panel[data-puzzle] .nq-puzzle-heading > p:not(.nq-eyebrow) { display: none; }
.rescue-page .nq-panel[data-puzzle] .nq-puzzle-answers button { min-block-size: 44px; }
}
@media (prefers-reduced-motion: reduce) {
.nq-workshop *,.nq-plank-slot { animation: none !important; transition: none !important; }
.nq-workshop.is-complete .nq-workshop-traveler { translate: 460px 0; }
.nq-workshop.is-complete .nq-spring-passenger { translate: 340px 14px; }
}
@media (forced-colors: active) {
.nq-timber-rack,.nq-workshop-art,.rescue-page .nq-panel[data-puzzle="bridge"] .nq-plank-slot { border: 2px solid CanvasText; }
}
.rescue-page .nq-panel[data-puzzle] .nq-puzzle-heading h3 { text-align: start; }
.nq-scale-left,.nq-scale-right { transition: transform 500ms cubic-bezier(.25,.8,.3,1.2); }
.rescue-page .nq-panel[data-puzzle="switches"] .nq-branch-switch { border: 2px solid #6d5438; border-block-end-width: 7px; background: #e9d5a8 !important; color: #3e3525; border-radius: 10px; box-shadow: inset 0 2px 0 #fff1cc; }
.rescue-page .nq-panel[data-puzzle="switches"] .nq-branch-switch[aria-pressed="true"] { border-color: #2b5b49; background: #c9e7c9 !important; color: #173d2d; translate: 0 3px; border-block-end-width: 4px; }
.rescue-page .nq-panel[data-puzzle="spring"] .nq-seed-tray { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 14px; background: var(--g-soft); border: 1px solid var(--g-border); border-radius: 18px; }
.rescue-page .nq-panel[data-puzzle="spring"] .nq-power-seed { min-inline-size: 48px; min-block-size: 48px; border-radius: 50% 50% 45% 45%; border: 2px solid #75573a; color: #493824; background: #e4be78 !important; box-shadow: inset -4px -5px 0 #b3864e; }
.rescue-page .nq-panel[data-puzzle="spring"] .nq-power-seed.is-loaded { background: #d5e6af !important; border-color: #426348; color: #23442f; box-shadow: inset -3px -4px 0 #afc68a; }
.rescue-page .game-campaign-skills { color: var(--g-text); font-size: 14px; font-weight: 650; line-height: 1.5; }
.rescue-page .nq-panel[data-puzzle="ferry"] .nq-puzzle-visual { display: flex; flex-flow: column nowrap; align-items: stretch; justify-content: start; }
.rescue-page .nq-panel[data-puzzle="ferry"] .nq-puzzle-visual > .nq-workshop { flex: 0 0 auto; }
.rescue-page .nq-panel:is([data-puzzle="ferry"],[data-puzzle="spring"]) .nq-workshop-art > svg { max-block-size: 190px; }
.rescue-page .nq-panel[data-puzzle="ferry"] .nq-puzzle-answers { grid-template-columns: auto minmax(0,1fr); align-items: center; }
.rescue-page .nq-panel[data-puzzle="ferry"] .nq-puzzle-answers > .lw-primary { grid-area: 1/2; }
.rescue-page .nq-panel[data-puzzle="ferry"] .nq-mechanism-load { grid-area: 1/1; }
@media (height <= 550px) {
.rescue-page .nq-panel[data-puzzle]:not([data-puzzle="ferry"]) .nq-puzzle-heading > p:not(.nq-eyebrow) { display: block; font-size: 12px; }
}
@media (height <= 550px) and (width > 550px) {
.rescue-page .nq-panel[data-puzzle="ferry"] .nq-puzzle-heading h3 { padding: 0; min-block-size: 0; }
.rescue-page .nq-panel:is([data-puzzle="ferry"],[data-puzzle="spring"]) .nq-workshop-art > svg { max-block-size: 126px; }
}