:root {
  --ink: #13233a;
  --ink-soft: #435269;
  --navy: #102a43;
  --navy-2: #163f5c;
  --teal: #0d766e;
  --teal-dark: #075b55;
  --teal-soft: #e7f5f2;
  --paper: #fffdf8;
  --paper-deep: #f5f0e6;
  --white: #ffffff;
  --line: #dce2e8;
  --line-strong: #bac5cf;
  --yellow: #f4c95d;
  --yellow-soft: #fff6d9;
  --orange: #dd7b38;
  --coral: #ef5d7d;
  --coral-soft: #fff0f3;
  --red: #b94545;
  --red-soft: #fff0ef;
  --green: #2f7d4b;
  --green-soft: #eaf7ee;
  --blue-soft: #edf5ff;
  --shadow-sm: 0 1px 2px rgba(16, 42, 67, .05), 0 4px 18px rgba(16, 42, 67, .05);
  --shadow-md: 0 10px 35px rgba(16, 42, 67, .11);
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --content: 1180px;
  --reading: 760px;
  --header-h: 74px;
  --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-editorial: Georgia, "Times New Roman", serif;
  --transition: 180ms ease;
}

* { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--white);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--teal-dark); text-underline-offset: 3px; }
a:hover { color: var(--navy); }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button, [role="button"], a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid rgba(13,118,110,.35);
  outline-offset: 3px;
}
::selection { background: #cdebe5; color: var(--navy); }

.skip-link {
  position: fixed; left: 18px; top: -80px; z-index: 9999;
  background: var(--navy); color: white; padding: 10px 14px; border-radius: 0 0 8px 8px;
  text-decoration: none; font-weight: 800;
}
.skip-link:focus { top: 0; }

.container { width: min(calc(100% - 40px), var(--content)); margin-inline: auto; }
.reading-width { width: min(calc(100% - 40px), var(--reading)); margin-inline: auto; }
.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.hidden { display: none !important; }
.no-scroll { overflow: hidden; }

.utility-bar { background: var(--navy); color: rgba(255,255,255,.9); font-size: .82rem; }
.utility-inner { min-height: 34px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.utility-links { display:flex; gap:18px; }
.utility-bar a { color: white; text-decoration:none; }
.utility-bar a:hover { text-decoration:underline; }

.site-header {
  position: sticky; top: 0; z-index: 70; background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--line); backdrop-filter: saturate(1.15) blur(14px);
}
.header-inner { min-height: var(--header-h); display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:30px; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--navy); min-width:max-content; }
.brand-mark { width:46px; height:46px; display:grid; place-items:center; flex:none; }
.brand-mark img { width:100%; height:100%; object-fit:contain; display:block; }
.brand-copy strong { display:block; font-family:var(--font-editorial); font-size:1.36rem; letter-spacing:.01em; line-height:1; }
.brand-copy small { display:block; color:var(--ink-soft); font-size:.68rem; letter-spacing:.06em; margin-top:5px; text-transform:uppercase; }
.main-nav { display:flex; justify-content:center; align-items:center; gap:5px; }
.main-nav a, .nav-trigger { border:0; background:transparent; color:var(--ink); text-decoration:none; font-size:.91rem; font-weight:700; padding:11px 12px; border-radius:8px; cursor:pointer; }
.main-nav a:hover, .main-nav a[aria-current="page"], .nav-trigger:hover { background:var(--teal-soft); color:var(--teal-dark); }
.header-actions { display:flex; align-items:center; gap:8px; }
.icon-btn { min-width:42px; height:42px; border:1px solid var(--line); background:white; border-radius:10px; display:grid; place-items:center; cursor:pointer; transition:var(--transition); }
.icon-btn:hover { border-color:var(--line-strong); background:var(--paper); transform:translateY(-1px); }
.icon { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.mobile-menu-btn { display:none; }

.nav-panel { position:absolute; left:0; right:0; top:100%; background:white; border-bottom:1px solid var(--line); box-shadow:var(--shadow-md); padding:24px 0 28px; display:none; }
.nav-panel.is-open { display:block; }
.nav-panel-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.nav-panel-card { padding:16px; border:1px solid var(--line); border-radius:12px; text-decoration:none; color:var(--ink); }
.nav-panel-card:hover { border-color:var(--teal); background:var(--teal-soft); }
.nav-panel-card strong { display:block; margin-bottom:3px; }
.nav-panel-card span { font-size:.82rem; color:var(--ink-soft); }

.search-dialog, .modal, .settings-dialog, .word-list-dialog { border:0; padding:0; border-radius:18px; box-shadow:0 25px 80px rgba(16,42,67,.28); width:min(680px, calc(100% - 28px)); }
.search-dialog::backdrop, .modal::backdrop, .settings-dialog::backdrop, .word-list-dialog::backdrop { background:rgba(9,22,34,.6); backdrop-filter:blur(3px); }
.dialog-inner { padding:24px; }
.dialog-head { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin-bottom:18px; }
.dialog-head h2 { margin:0; font-family:var(--font-editorial); font-size:1.6rem; }
.dialog-help { margin:4px 0 0; color:var(--ink-soft); font-size:.8rem; }
.search-field { position:relative; }
.search-field input { width:100%; min-height:54px; border:1px solid var(--line-strong); border-radius:12px; padding:0 48px 0 16px; font-size:1rem; }
.search-field svg { position:absolute; right:16px; top:17px; color:var(--ink-soft); }
.search-results { margin-top:14px; max-height:55vh; overflow:auto; }
.search-result { display:grid; grid-template-columns:44px 1fr auto; gap:12px; align-items:center; padding:12px 8px; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink); }
.search-result:hover, .search-result:focus-visible, .search-result.is-active { background:var(--paper); outline:0; }
.search-result:focus-visible { box-shadow:inset 3px 0 0 var(--teal); }
.result-icon { width:40px; height:40px; border-radius:9px; background:var(--teal-soft); display:grid; place-items:center; color:var(--teal-dark); font-size:.7rem; font-weight:900; letter-spacing:.03em; }
.result-copy { min-width:0; }
.result-copy strong { display:block; margin-bottom:3px; }
.result-copy .result-meta { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.result-kind { color:var(--teal-dark); font-size:.66rem; font-weight:850; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
.result-meta { color:var(--ink-soft); font-size:.78rem; }
.search-shortcuts { display:flex; justify-content:flex-end; align-items:center; gap:5px; margin:12px 0 0; color:var(--ink-soft); font-size:.68rem; }
.search-shortcuts kbd { min-width:22px; padding:2px 5px; border:1px solid var(--line-strong); border-bottom-width:2px; border-radius:5px; background:white; color:var(--ink); font:inherit; font-weight:800; text-align:center; }
.empty-state { padding:28px 12px; text-align:center; color:var(--ink-soft); }
.confirm-dialog { width:min(480px, calc(100% - 28px)); }
.confirm-message { margin:0; color:var(--ink-soft); font-size:.95rem; line-height:1.65; }
.confirm-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:24px; }

.btn { min-height:46px; padding:0 18px; border-radius:10px; border:1px solid transparent; display:inline-flex; align-items:center; justify-content:center; gap:9px; font-weight:800; text-decoration:none; cursor:pointer; transition:var(--transition); white-space:nowrap; }
.btn:hover { transform:translateY(-1px); text-decoration:none; }
.btn-primary { background:var(--teal); color:white; box-shadow:0 5px 14px rgba(13,118,110,.18); }
.btn-primary:hover { background:var(--teal-dark); color:white; }
.btn-dark { background:var(--navy); color:white; }
.btn-dark:hover { background:#071c2d; color:white; }
.btn-secondary { border-color:var(--line-strong); background:white; color:var(--navy); }
.btn-secondary:hover { border-color:var(--navy); background:var(--paper); }
.btn-quiet { border-color:transparent; background:transparent; color:var(--ink-soft); }
.btn-quiet:hover { background:var(--paper-deep); color:var(--ink); }
.btn-danger { background:var(--red); color:white; }
.btn-sm { min-height:38px; padding-inline:13px; font-size:.84rem; border-radius:8px; }
.btn-icon { width:18px; height:18px; flex:none; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

.hero { overflow:hidden; border-bottom:1px solid #f0dfe2; background:linear-gradient(106deg,#fff 0%,#fff 44%,#fff8f8 100%); }
.hero-inner { min-height:520px; display:grid; grid-template-columns:minmax(0,.94fr) minmax(480px,1.06fr); align-items:center; gap:28px; }
.hero-copy, .hero-art { min-width:0; }
.hero h1 { margin:0 0 24px; max-width:640px; font-family:var(--font-editorial); font-size:clamp(2.9rem,4.8vw,5.05rem); line-height:1.02; letter-spacing:-.04em; color:#16222c; }
.hero h1 em { color:#ed5577; font-weight:inherit; }
.hero p { margin:0; max-width:620px; font-size:1.12rem; color:var(--ink-soft); }
.hero-actions { margin-top:26px; display:flex; gap:12px; flex-wrap:wrap; }
.hero-trust { display:flex; gap:24px; flex-wrap:wrap; margin-top:26px; color:var(--ink-soft); font-size:.86rem; }
.hero-trust span { display:flex; align-items:center; gap:7px; }
.hero-art { position:relative; align-self:stretch; min-height:520px; margin:0 -7vw 0 0; display:flex; align-items:center; }
.hero-art::before { content:""; position:absolute; z-index:0; width:560px; height:560px; right:-60px; top:-92px; border-radius:50%; background:radial-gradient(circle,rgba(255,221,226,.7),rgba(255,245,246,0) 69%); }
.hero-art img { position:relative; z-index:1; width:100%; max-width:100%; height:520px; object-fit:cover; object-position:center; mix-blend-mode:multiply; }

.proof-strip { border-bottom:1px solid var(--line); background:white; }
.proof-grid { min-height:78px; display:grid; grid-template-columns:repeat(4,1fr); }
.proof-item { display:flex; align-items:center; justify-content:center; gap:12px; padding:14px; border-right:1px solid var(--line); }
.proof-item:last-child { border-right:0; }
.proof-item strong { display:block; font-size:.88rem; }
.proof-item span { display:block; font-size:.76rem; color:var(--ink-soft); }
.proof-icon { width:46px; height:42px; color:var(--teal); object-fit:contain; flex:none; }

.section { padding:66px 0; }
.section-tight { padding:42px 0; }
.section-paper { background:var(--paper); border-block:1px solid var(--line); }
.section-head { display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:12px 24px; margin-bottom:26px; }
.section-head > :first-child { flex:1 1 340px; min-width:0; }
.section-head h2 { margin:0; font-family:var(--font-editorial); font-size:clamp(2rem,3.4vw,3rem); line-height:1.05; color:var(--navy); }
.section-head p { max-width:660px; color:var(--ink-soft); margin:8px 0 0; }
.text-link { font-weight:800; text-decoration:none; white-space:nowrap; }
.text-link:hover { text-decoration:underline; }

.category-rail { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:0; padding:6px; border:1px solid #f0e9e7; border-radius:20px; background:white; box-shadow:0 12px 30px rgba(35,34,43,.08); }
.category-tile { min-height:118px; padding:15px 9px; border:0; border-radius:14px; text-align:center; text-decoration:none; color:var(--ink); background:transparent; transition:var(--transition); }
.category-tile:hover { transform:translateY(-3px); background:#fff6f7; box-shadow:0 6px 14px rgba(216,99,124,.13); }
.category-icon { width:64px; height:58px; margin:0 auto 7px; display:grid; place-items:center; }
.category-icon img { width:100%; height:100%; object-fit:contain; display:block; }
.category-tile strong { display:block; font-size:.9rem; }
.category-tile span { display:block; color:var(--ink-soft); font-size:.74rem; margin-top:4px; }

.home-layout { display:grid; grid-template-columns:minmax(0,1fr) 310px; gap:28px; align-items:start; }
.puzzle-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.puzzle-card { position:relative; display:flex; flex-direction:column; min-width:0; border:1px solid var(--line); border-radius:var(--radius); background:white; overflow:hidden; transition:var(--transition); }
.puzzle-card:hover { border-color:var(--line-strong); box-shadow:var(--shadow-md); transform:translateY(-3px); }
.card-preview { position:relative; min-height:178px; overflow:hidden; background:linear-gradient(145deg,var(--paper),#edf5f3); display:grid; place-items:center; padding:16px; border-bottom:1px solid var(--line); }
.card-preview-art { padding:0; }
.card-preview-image { width:100%; height:100%; min-height:178px; object-fit:cover; }
.title-sticker[src*="coloring-v2"] { filter:grayscale(1) contrast(1.25); }
.card-body { padding:17px 17px 14px; flex:1; display:flex; flex-direction:column; }
.card-kicker { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:8px; }
.card-type { font-size:.69rem; color:var(--teal-dark); font-weight:900; text-transform:uppercase; letter-spacing:.07em; }
.badge { display:inline-flex; align-items:center; min-height:24px; border-radius:999px; padding:0 8px; font-size:.68rem; font-weight:800; }
.badge-easy { background:var(--green-soft); color:var(--green); }
.badge-medium { background:var(--yellow-soft); color:#8b5c00; }
.badge-hard { background:var(--red-soft); color:var(--red); }
.puzzle-card h3 { margin:0 0 7px; font-family:var(--font-editorial); font-size:1.24rem; line-height:1.14; }
.puzzle-card h3 a { color:var(--navy); text-decoration:none; }
.puzzle-card p { margin:0 0 15px; color:var(--ink-soft); font-size:.86rem; }
.card-meta { margin-top:auto; display:flex; justify-content:space-between; align-items:center; gap:10px; color:var(--ink-soft); font-size:.75rem; }
.card-actions { margin-top:13px; display:flex; gap:8px; }
.card-actions .btn { flex:1; }
.save-btn { width:38px; height:38px; border:1px solid var(--line); background:white; border-radius:9px; display:grid; place-items:center; cursor:pointer; }
.save-btn[aria-pressed="true"] { color:var(--teal); background:var(--teal-soft); border-color:#a7d6ce; }

.sidebar-stack { display:grid; gap:18px; }
.side-panel { border:1px solid var(--line); border-radius:var(--radius); background:white; padding:20px; }
.side-panel h3 { margin:0 0 12px; font-family:var(--font-editorial); font-size:1.35rem; }
.side-panel p { margin:0 0 16px; color:var(--ink-soft); font-size:.86rem; }
.daily-panel { background:var(--yellow-soft); border-color:#ead79a; }
.daily-date { display:flex; align-items:center; justify-content:space-between; font-size:.78rem; color:#72570e; margin-bottom:14px; }
.quick-list { list-style:none; margin:0; padding:0; }
.quick-list li + li { border-top:1px solid var(--line); }
.quick-list a { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 2px; color:var(--ink); text-decoration:none; font-weight:750; font-size:.86rem; }
.quick-list a:hover { color:var(--teal); }
.newsletter-form { display:grid; gap:9px; }
.newsletter-form input { width:100%; min-height:46px; border:1px solid var(--line-strong); border-radius:9px; padding:0 12px; }

.guide-list { display:grid; gap:0; border-top:1px solid var(--line); }
.guide-row { display:grid; grid-template-columns:110px 1fr auto; gap:18px; align-items:center; padding:18px 14px; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink); transition:background var(--transition),transform var(--transition); }
.guide-row:hover { color:var(--ink); background:linear-gradient(90deg,var(--coral-soft),#fff 62%); transform:translateX(3px); }
.guide-thumb { aspect-ratio:4/3; border-radius:10px; background:linear-gradient(145deg,var(--coral-soft),#fff); border:1px solid #f5cbd4; display:grid; place-items:center; color:var(--coral); }
.guide-sticker { width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.guide-row h3 { margin:0 0 5px; font-family:var(--font-editorial); font-size:1.22rem; color:var(--navy); }
.guide-row p { margin:0; color:var(--ink-soft); font-size:.85rem; }
.guide-meta { font-size:.74rem; color:var(--ink-soft); white-space:nowrap; }

.ad-slot { display:grid; place-items:center; min-height:108px; border:1px dashed #c9cfd6; background:#fbfcfd; color:#7c8794; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; margin:28px 0; border-radius:10px; position:relative; overflow:hidden; }
.ad-slot::before { content:"Advertisement"; }
.ad-slot[data-size="leaderboard"] { min-height:112px; }
.ad-slot[data-size="rectangle"] { min-height:260px; }
.ad-slot.is-unfilled { display:none; }
.ad-slot.is-filled { border-color:transparent; background:transparent; }
html[data-environment="demo"] .ad-slot:not(.live-ad) { display:none; }

.breadcrumbs { padding:18px 0 0; color:var(--ink-soft); font-size:.78rem; }
.breadcrumbs ol { list-style:none; padding:0; margin:0; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.breadcrumbs li:not(:last-child)::after { content:"/"; margin-left:8px; color:#9ba4ad; }
.breadcrumbs a { color:var(--ink-soft); text-decoration:none; }
.breadcrumbs a:hover { color:var(--teal-dark); }

.page-hero { padding:50px 0 38px; border-bottom:1px solid var(--line); background:var(--paper); }
.page-hero-grid { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:30px; align-items:end; }
.page-hero h1 { margin:0; max-width:820px; font-family:var(--font-editorial); font-size:clamp(2.4rem,4.8vw,4rem); line-height:1.02; letter-spacing:-.035em; color:var(--navy); }
.page-hero p { max-width:760px; margin:16px 0 0; color:var(--ink-soft); font-size:1.05rem; }
.page-eyebrow { display:inline-flex; align-items:center; gap:8px; margin-bottom:14px; color:var(--coral); font-size:.72rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.page-eyebrow::before { content:""; width:26px; height:2px; border-radius:99px; background:currentColor; }
.branded-title { display:flex; align-items:center; gap:18px; max-width:900px; }
.branded-title > div { min-width:0; }
.branded-title .page-eyebrow { margin-bottom:8px; }
.title-sticker { width:112px; height:100px; flex:0 0 auto; object-fit:contain; filter:drop-shadow(0 8px 10px rgba(16,42,67,.1)); transform:rotate(-3deg); }
.page-hero-illustrated { position:relative; overflow:hidden; padding:34px 0; background:linear-gradient(105deg,#fff 0%,#fff 52%,#fff3f5 100%); }
.page-hero-illustrated::after { content:""; position:absolute; right:-70px; bottom:-110px; width:230px; height:230px; border-radius:50%; background:rgba(239,93,125,.07); pointer-events:none; }
.page-hero-illustrated .page-hero-grid { grid-template-columns:minmax(0,1fr) minmax(330px,470px); align-items:center; gap:48px; }
.page-hero-illustrated .page-hero-grid > * { min-width:0; }
.page-hero-copy { min-width:0; }
.page-hero-media { position:relative; z-index:1; width:100%; min-width:0; aspect-ratio:1.5/1; overflow:hidden; border:8px solid #fff; border-radius:22px; background:#f7efea; box-shadow:0 20px 55px rgba(49,38,34,.14); transform:rotate(-1.1deg); }
.page-hero-media img { width:100%; height:100%; object-fit:cover; }
.page-hero-illustrated .page-hero-actions { justify-content:flex-start; margin-top:22px; }
.page-hero-illustrated .library-search { margin-top:24px; }
.hero-meta { display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.meta-chip { display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:0 10px; border:1px solid var(--line); border-radius:8px; background:white; font-size:.76rem; color:var(--ink-soft); }

.filter-bar { position:sticky; top:var(--header-h); z-index:30; padding:12px 0; background:rgba(255,255,255,.96); border-bottom:1px solid var(--line); backdrop-filter:blur(12px); }
.filter-shell { display:flex; align-items:center; gap:12px; min-width:0; }
.filter-inner { display:flex; gap:10px; align-items:center; overflow-x:auto; scrollbar-width:none; padding-bottom:1px; min-width:0; flex:1; }
.filter-inner::-webkit-scrollbar { display:none; }
@media (min-width:861px) { .filter-inner .filter-btn:nth-child(n+9) { display:none; } }
.filter-btn { min-height:38px; border:1px solid var(--line); background:white; border-radius:999px; padding:0 14px; cursor:pointer; white-space:nowrap; font-size:.81rem; font-weight:750; }
.filter-btn:hover, .filter-btn[aria-pressed="true"] { border-color:var(--teal); background:var(--teal-soft); color:var(--teal-dark); }
.filter-more-btn { min-height:40px; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--line-strong); border-radius:10px; background:white; padding:0 13px; color:var(--navy); font-size:.8rem; font-weight:850; cursor:pointer; }
.filter-more-btn:hover { border-color:var(--teal); background:var(--teal-soft); color:var(--teal-dark); }
.filter-more-btn [data-active-filter-count] { min-width:22px; height:22px; display:grid; place-items:center; border-radius:999px; background:var(--teal); color:white; font-size:.67rem; }
.library-filter-dialog { width:min(720px,calc(100% - 24px)); border:0; border-radius:18px; padding:0; box-shadow:0 25px 80px rgba(16,42,67,.28); }
.library-filter-dialog::backdrop { background:rgba(9,22,34,.6); backdrop-filter:blur(3px); }
.dialog-kicker { margin:0 0 2px; color:var(--teal-dark); font-size:.68rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.facet-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.filter-dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }
.active-filter-row { display:flex; gap:8px; flex-wrap:wrap; margin:-14px 0 18px; }
.active-filter-chip { min-height:34px; display:inline-flex; align-items:center; gap:8px; border:1px solid #a7d6ce; border-radius:999px; background:var(--teal-soft); color:var(--teal-dark); padding:0 10px; font-size:.75rem; font-weight:850; cursor:pointer; }
.active-filter-chip:hover { border-color:var(--teal); background:#d9eee9; }
.library-summary { margin-bottom:18px; color:var(--ink-soft); font-size:.88rem; }

.game-shell { padding:42px 0 78px; background:linear-gradient(180deg,#fff 0,#fffaf8 44%,#f7fbfa 100%); }
.game-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:28px; align-items:start; }
.game-main { min-width:0; container-type:inline-size; }
.game-panel { position:relative; border:1px solid #dfe5e4; border-radius:20px; background:white; box-shadow:0 18px 55px rgba(16,42,67,.1); overflow:hidden; }
.game-panel::before { content:""; position:absolute; inset:0 0 auto; height:4px; z-index:2; background:linear-gradient(90deg,var(--coral),#ff9b9f 48%,var(--teal) 48%); }
.game-toolbar { min-height:68px; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:12px 14px 10px; background:linear-gradient(180deg,#fffdf9,#f8f4ed); border-bottom:1px solid #e8e1d8; }
.game-status-line { min-height:42px; display:flex; align-items:center; gap:10px; padding:9px 16px; border-bottom:1px solid #dcebea; background:#f2faf8; color:var(--ink); font-size:.79rem; font-weight:760; }
.game-status-line::before { content:""; width:9px; height:9px; flex:0 0 auto; border-radius:50%; background:var(--coral); box-shadow:0 0 0 4px #ffe5e5; }
.toolbar-group { display:flex; align-items:center; gap:8px; min-width:0; }
.toolbar-scroll { flex:1; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); }
.toolbar-scroll .tool-btn { grid-column:span 2; }
.toolbar-scroll .tool-btn:nth-last-child(-n+2) { grid-column:span 3; }
.toolbar-stat { min-width:86px; padding:6px 10px; border-right:1px solid #ddd6cc; }
.toolbar-stat:last-child { border-right:0; }
.toolbar-stat strong { display:block; font-size:.9rem; line-height:1.1; }
.toolbar-stat span { display:block; color:var(--ink-soft); font-size:.64rem; text-transform:uppercase; letter-spacing:.06em; }
.tool-btn { min-width:0; width:100%; min-height:40px; border:1px solid #d8d5cf; border-radius:10px; background:#fff; padding:0 9px; display:inline-flex; align-items:center; justify-content:center; gap:7px; font-size:.79rem; font-weight:800; cursor:pointer; white-space:nowrap; box-shadow:0 2px 0 rgba(16,42,67,.04); transition:transform .16s,border-color .16s,background .16s; }
.tool-btn:hover, .tool-btn[aria-pressed="true"] { border-color:var(--teal); background:var(--teal-soft); color:var(--teal-dark); transform:translateY(-1px); }
.game-board-wrap { position:relative; padding:36px 28px 34px; display:grid; place-items:center; overflow:auto; overscroll-behavior-x:contain; background:radial-gradient(circle at 8% 12%,rgba(241,91,110,.1) 0 3px,transparent 4px),linear-gradient(145deg,#fffdf9,#f4faf8); background-size:22px 22px,auto; }
body[data-puzzle-type="word-search"] .game-board-wrap { background-image:url('/assets/stickers/word-search-v2.webp'),linear-gradient(145deg,#fffdf9,#f4faf8); }
body[data-puzzle-type="sudoku"] .game-board-wrap { background-image:url('/assets/stickers/sudoku-v2.webp'),linear-gradient(145deg,#fffdf9,#f4faf8); }
body[data-puzzle-type="maze"] .game-board-wrap { background-image:url('/assets/stickers/maze-v2.webp'),linear-gradient(145deg,#fffdf9,#f4faf8); }
body[data-puzzle-type="trivia"] .game-board-wrap { background-image:url('/assets/stickers/trivia-v2.webp'),linear-gradient(145deg,#fffdf9,#f4faf8); }
body[data-puzzle-type="bingo"] .game-board-wrap { background-image:url('/assets/stickers/bingo-v2.webp'),linear-gradient(145deg,#fffdf9,#f4faf8); }
body[data-puzzle-type="rebus"] .game-board-wrap { background-image:url('/assets/stickers/rebus-v2.webp'),linear-gradient(145deg,#fffdf9,#f4faf8); }
body[data-puzzle-type="riddle"] .game-board-wrap { background-image:url('/assets/stickers/riddle-v2.webp'),linear-gradient(145deg,#fffdf9,#f4faf8); }
body[data-puzzle-type] .game-board-wrap { background-repeat:no-repeat;background-position:right 14px top 12px,0 0;background-size:76px auto,auto; }
.game-loading, .game-error { width:min(620px,100%); min-height:280px; display:grid; place-items:center; align-content:center; gap:10px; padding:28px; text-align:center; color:var(--ink-soft); }
.game-loading strong, .game-error strong { color:var(--navy); font-family:var(--font-editorial); font-size:1.35rem; }
.game-loading span:last-child, .game-error p { max-width:430px; margin:0; line-height:1.6; }
.game-loading-spinner { width:32px; height:32px; border:3px solid var(--line); border-top-color:var(--teal); border-radius:50%; animation:game-spin .8s linear infinite; }
.game-error { min-height:240px; border:1px solid #e8c2bd; border-radius:12px; background:#fff8f7; }
@keyframes game-spin { to { transform:rotate(360deg); } }
.game-instructions { padding:18px 24px 23px; border-top:1px solid var(--line); background:#fcfdfd; color:var(--ink-soft); font-size:.86rem; }
.game-instructions strong { color:var(--ink); }
.game-aside { display:grid; gap:18px; position:sticky; top:calc(var(--header-h) + 18px); }
.game-aside > *, .info-panel { min-width:0; max-width:100%; }
.info-panel { border:1px solid #dfe5e4; border-top:3px solid #ff8b93; border-radius:14px; background:linear-gradient(180deg,#fff,#fffdfa); padding:18px; box-shadow:0 10px 28px rgba(16,42,67,.06); }
.info-panel h2, .info-panel h3 { margin:0 0 10px; font-family:var(--font-editorial); font-size:1.3rem; }
.info-panel p { margin:0 0 12px; color:var(--ink-soft); font-size:.84rem; }
.download-stack { display:grid; gap:9px; }
.download-stack .btn { width:100%; }
.word-bank { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px 10px; }
.word-bank li { font-size:.74rem; font-weight:800; overflow:hidden; text-overflow:ellipsis; padding:4px 6px; border-radius:6px; background:#f6f8f7; }
.word-bank li.is-found { color:var(--green); text-decoration:line-through; }
.mobile-word-list-control { display:none; }
.word-list-dialog { width:min(520px, calc(100% - 22px)); }
.word-list-dialog .dialog-inner { max-height:min(82vh,720px); overflow:auto; }
.word-list-dialog .word-bank { grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px 14px; margin-top:16px; }
.word-list-dialog .word-bank li { min-width:0; font-size:.76rem; }
.word-list-dialog > .dialog-inner > .btn { width:100%; margin-top:20px; }
.progress-bar { height:7px; background:#e9edf1; border-radius:999px; overflow:hidden; margin-bottom:14px; }
.progress-bar span { display:block; height:100%; width:0; background:var(--teal); transition:width 240ms ease; }

.word-grid { --grid-size:15; width:min(650px,100%); aspect-ratio:1; display:grid; grid-template-columns:repeat(var(--grid-size),1fr); border:3px solid var(--navy); border-radius:5px; background:white; box-shadow:0 14px 34px rgba(16,42,67,.14),0 0 0 7px rgba(255,255,255,.88); user-select:none; touch-action:none; overflow:hidden; }
.word-cell { position:relative; aspect-ratio:1; border:0; border-right:1px solid #edf0f2; border-bottom:1px solid #edf0f2; background:transparent; display:grid; place-items:center; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:clamp(.66rem,1.45vw,1.05rem); font-weight:800; cursor:crosshair; padding:0; }
.word-cell.is-preview { background:#d9eee9; color:var(--teal-dark); }
.word-cell.is-found { background:#bfe5dc; color:#064e49; }
.word-cell.is-answer { box-shadow:inset 0 0 0 2px var(--orange); }
.word-cell:focus-visible { z-index:2; outline-offset:-3px; }

.sudoku-board { width:min(620px,100%); aspect-ratio:1; display:grid; grid-template-columns:repeat(9,1fr); border:3px solid var(--navy); background:white; box-shadow:0 14px 34px rgba(16,42,67,.14),0 0 0 7px rgba(255,255,255,.88); }
.mini-coloring { display:block; width:100%; height:100%; min-height:0; object-fit:cover; border-radius:2px; }
.coloring-preview { display:flex; justify-content:center; padding:20px; background:var(--paper); border-bottom:1px solid var(--line); }
.coloring-preview img { width:min(100%,520px); height:auto; max-height:none; object-fit:contain; border:1px solid var(--line); box-shadow:var(--shadow-md); }
.crossword-wrap { display:flex; flex-direction:column; gap:20px; align-items:center; width:100%; }
.crossword-grid { display:grid; grid-template-columns:repeat(var(--cw-cols),minmax(0,1fr)); grid-template-rows:repeat(var(--cw-rows),minmax(0,1fr)); width:min(560px,100%); aspect-ratio:var(--cw-cols)/var(--cw-rows); border:2px solid var(--navy); background:var(--line); gap:1px; }
.cw-cell { position:relative; background:white; }
.cw-cell.cw-blank { background:var(--navy); }
.cw-cell.is-active { background:var(--teal-soft); }
.cw-cell input { width:100%; height:100%; border:0; text-align:center; text-transform:uppercase; font-weight:800; font-size:clamp(.7rem,2.4vw,1.1rem); background:transparent; }
.cw-cell input:focus-visible { outline:2px solid var(--teal); outline-offset:-2px; }
.cw-number { position:absolute; top:1px; left:2px; font-size:.55rem; font-weight:800; color:var(--ink-soft); pointer-events:none; }
.crossword-clues { display:grid; grid-template-columns:1fr 1fr; gap:0 24px; width:100%; max-width:560px; }
.cw-clue-group h3 { font-size:.9rem; margin:0 0 8px; }
.cw-clue { display:block; width:100%; text-align:left; background:none; border:0; padding:5px 6px; border-radius:6px; font-size:.82rem; cursor:pointer; }
.cw-clue:hover, .cw-clue.is-active { background:var(--teal-soft); }
@media (max-width:560px) { .crossword-clues { grid-template-columns:1fr; } }
.sudoku-cell { position:relative; aspect-ratio:1; border:0; border-right:1px solid #a9b2bb; border-bottom:1px solid #a9b2bb; background:white; display:grid; place-items:center; font-size:clamp(1rem,2.5vw,1.65rem); font-weight:700; cursor:pointer; padding:0; }
.sudoku-cell:nth-child(3n) { border-right:3px solid var(--navy); }
.sudoku-cell:nth-child(9n) { border-right:0; }
.sudoku-cell:nth-child(n+19):nth-child(-n+27), .sudoku-cell:nth-child(n+46):nth-child(-n+54) { border-bottom:3px solid var(--navy); }
.sudoku-cell:nth-child(n+73) { border-bottom:0; }
.sudoku-cell.is-given { background:#f0f3f5; color:var(--navy); }
.sudoku-cell.is-selected { background:#dff2ee; }
.sudoku-cell.is-related:not(.is-selected) { background:#f2faf8; }
.sudoku-cell.is-conflict { background:#ffe3e1; color:var(--red); }
.sudoku-cell.is-same { color:var(--teal-dark); font-weight:900; }
.notes-grid { position:absolute; inset:4px; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); font-size:clamp(.37rem,.8vw,.58rem); color:var(--ink-soft); font-weight:600; }
.notes-grid span { display:grid; place-items:center; }
.number-pad { display:grid; grid-template-columns:repeat(9,1fr); gap:7px; margin-top:18px; width:min(620px,100%); }
.number-btn { min-height:48px; border:1px solid var(--line-strong); background:white; border-radius:10px; font-weight:900; cursor:pointer; box-shadow:0 3px 0 #d9e1e0; }
.number-btn:hover { background:var(--teal-soft); border-color:var(--teal); }

.trivia-stage { width:min(760px,100%); padding:clamp(24px,5vw,48px); border:1px solid #e5ded5; border-radius:18px; background:rgba(255,255,255,.94); box-shadow:0 14px 34px rgba(16,42,67,.1); }
.quiz-count { color:var(--teal-dark); font-size:.78rem; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.quiz-question { margin:10px 0 22px; font-family:var(--font-editorial); font-size:clamp(1.8rem,4vw,2.8rem); line-height:1.12; }
.choice-list { display:grid; gap:10px; }
.choice-btn { min-height:58px; text-align:left; padding:12px 16px; border:1px solid var(--line-strong); border-radius:12px; background:white; cursor:pointer; font-weight:750; display:flex; align-items:center; gap:12px; box-shadow:0 4px 0 #e8eceb; transition:transform .15s,border-color .15s; }
.choice-btn:hover:not(:disabled) { border-color:var(--teal); background:var(--teal-soft); }
.choice-btn.is-correct { border-color:var(--green); background:var(--green-soft); color:#225c37; }
.choice-btn.is-wrong { border-color:var(--red); background:var(--red-soft); color:#8d3030; }
.choice-btn.is-chosen { border-color:var(--teal); background:var(--teal-soft); color:var(--teal-dark); }
.choice-letter { width:30px; height:30px; border-radius:50%; border:1px solid currentColor; display:grid; place-items:center; flex:0 0 auto; }
.explanation { margin-top:16px; padding:14px 16px; background:var(--blue-soft); border-left:4px solid #4b7eb6; border-radius:0 9px 9px 0; }
.quiz-next { margin-top:18px; display:flex; justify-content:flex-end; }

.maze-board { --maze-cols:13; --maze-rows:13; width:min(650px,100%); aspect-ratio:1; display:grid; grid-template-columns:repeat(var(--maze-cols),1fr); grid-template-rows:repeat(var(--maze-rows),1fr); border:3px solid var(--navy); background:white; box-shadow:0 14px 34px rgba(16,42,67,.14),0 0 0 7px rgba(255,255,255,.88); touch-action:none; }
.dots-board-wrap { width:min(560px,100%); }
.dots-board { width:100%; aspect-ratio:1; background:white; border:2px solid var(--line); border-radius:var(--radius); touch-action:manipulation; }
.dots-path { stroke:var(--teal); stroke-width:4; stroke-linejoin:round; stroke-linecap:round; }
.dots-dot circle { fill:white; stroke:var(--navy); stroke-width:3; cursor:pointer; }
.dots-dot text { font-size:22px; font-weight:800; fill:var(--navy); text-anchor:middle; pointer-events:none; }
.dots-dot.is-joined circle { fill:var(--teal); stroke:var(--teal-dark); }
.dots-dot.is-joined text { fill:var(--ink-soft); }
a.dots-dot:focus-visible circle, .dots-dot a:focus-visible circle { outline:3px solid var(--teal); outline-offset:2px; }
.maze-cell { position:relative; min-width:0; min-height:0; background:white; }
.maze-cell.is-path { background:#dff2ee; }
.maze-cell.is-solution { background:#ffe3a5; }
.maze-cell[data-wall-n="1"] { border-top:2px solid var(--navy); }
.maze-cell[data-wall-e="1"] { border-right:2px solid var(--navy); }
.maze-cell[data-wall-s="1"] { border-bottom:2px solid var(--navy); }
.maze-cell[data-wall-w="1"] { border-left:2px solid var(--navy); }
.maze-player { position:absolute; inset:22%; border-radius:50%; background:var(--teal); box-shadow:0 0 0 3px white,0 2px 7px rgba(16,42,67,.3); z-index:3; }
.maze-start::after { content:"S"; position:absolute; inset:0; display:grid; place-items:center; color:var(--green); font-size:.58rem; font-weight:900; }
.maze-end::after { content:"★"; position:absolute; inset:0; display:grid; place-items:center; color:var(--orange); font-size:.75rem; }
.dpad { width:190px; display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:18px auto 0; }
.dpad button { min-height:50px; border:1px solid var(--line-strong); background:white; border-radius:9px; cursor:pointer; }
.dpad button[data-move="up"] { grid-column:2; }
.dpad button[data-move="left"] { grid-column:1; grid-row:2; }
.dpad button[data-move="down"] { grid-column:2; grid-row:2; }
.dpad button[data-move="right"] { grid-column:3; grid-row:2; }

.bingo-wrap { width:min(700px,100%); }
.bingo-head { display:grid; grid-template-columns:repeat(5,1fr); background:linear-gradient(110deg,var(--navy),#174f52); color:white; border-radius:13px 13px 0 0; overflow:hidden; box-shadow:0 10px 28px rgba(16,42,67,.15); }
.bingo-head span { text-align:center; font-family:var(--font-editorial); font-size:clamp(1.3rem,4vw,2.1rem); font-weight:900; padding:8px; }
.bingo-board { display:grid; grid-template-columns:repeat(5,1fr); border:2px solid var(--navy); border-top:0; }
.bingo-cell { min-height:100px; border:0; border-right:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); background:white; padding:7px; font-size:.72rem; line-height:1.2; font-weight:750; cursor:pointer; display:grid; place-items:center; text-align:center; }
.bingo-cell:nth-child(5n) { border-right:0; }
.bingo-cell.is-marked { background:var(--teal-soft); color:var(--teal-dark); }
.bingo-cell.is-marked::before { content:"✓"; position:absolute; font-size:2rem; opacity:.22; }
.bingo-cell { position:relative; }

.rebus-grid, .riddle-list { display:grid; gap:14px; width:min(760px,100%); }
.rebus-card, .riddle-card { border:1px solid #e4ded5; border-radius:15px; background:rgba(255,255,255,.96); padding:20px; box-shadow:0 9px 25px rgba(16,42,67,.07); }
.rebus-display { min-height:122px; display:grid; place-items:center; background:linear-gradient(145deg,#fff9f4,#f5fbf9); border:1px dashed #d6a2a5; border-radius:12px; white-space:pre-line; text-align:center; font-size:1.5rem; font-weight:900; letter-spacing:.06em; margin-bottom:14px; }
.answer-area { display:none; margin-top:12px; padding:12px; background:var(--green-soft); border-radius:8px; color:#255f3a; }
.answer-area.is-visible { display:block; }
.answer-area p { margin:6px 0 0; color:inherit; font-size:.82rem; line-height:1.45; }
.riddle-card h3 { margin:0 0 12px; font-family:var(--font-editorial); font-size:1.25rem; }
.riddle-answer-row { display:flex; gap:8px; }
.riddle-answer-row input { min-width:0; flex:1; min-height:44px; border:1px solid var(--line-strong); border-radius:8px; padding:0 11px; }
.riddle-feedback { min-height:24px; margin-top:8px; font-size:.82rem; font-weight:750; }
.riddle-feedback.is-correct { color:var(--green); }
.riddle-feedback.is-wrong { color:var(--red); }
.hint-text { display:none; color:var(--ink-soft); font-size:.84rem; margin-top:8px; }
.hint-text.is-visible { display:block; }

.generator-layout { display:grid; grid-template-columns:360px minmax(0,1fr); gap:28px; align-items:start; }
.generator-form { border:1px solid var(--line); border-radius:var(--radius); background:white; padding:20px; position:sticky; top:calc(var(--header-h) + 18px); }
.field { display:grid; gap:7px; margin-bottom:16px; }
.field label { font-weight:800; font-size:.84rem; }
.field small { color:var(--ink-soft); font-size:.72rem; }
.field input, .field select, .field textarea { width:100%; border:1px solid var(--line-strong); border-radius:9px; padding:10px 11px; background:white; }
.field textarea { min-height:190px; resize:vertical; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.generator-output { min-height:560px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--paper); padding:24px; display:grid; place-items:center; }
.generator-empty { width:min(100%,520px); overflow:hidden; border:1px solid var(--line); border-radius:18px; background:#fff; text-align:center; color:var(--ink-soft); box-shadow:var(--shadow-sm); }
.generator-empty-art { width:100%; aspect-ratio:1.75/1; object-fit:cover; }
.generator-empty-copy { padding:22px 26px 26px; }
.generator-empty svg { width:56px; height:56px; margin:0 auto 14px; color:var(--teal); }
.print-sheet { width:min(720px,100%); background:white; box-shadow:var(--shadow-md); padding:34px; }
.print-sheet h2 { text-align:center; margin:0 0 18px; font-family:var(--font-editorial); }

.completion-drawer { position:fixed; right:20px; bottom:20px; z-index:80; width:min(400px,calc(100% - 40px)); background:var(--navy); color:white; border-radius:16px; box-shadow:0 18px 55px rgba(16,42,67,.34); padding:20px; transform:translateY(calc(100% + 40px)); opacity:0; transition:260ms cubic-bezier(.2,.8,.2,1); }
.completion-drawer.is-visible { transform:translateY(0); opacity:1; }
.completion-drawer h2 { margin:0 0 7px; font-family:var(--font-editorial); }
.completion-drawer p { margin:0 0 15px; color:rgba(255,255,255,.75); font-size:.86rem; }
.completion-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.completion-actions .btn { min-height:42px; }
.close-completion { position:absolute; right:10px; top:10px; background:transparent; border:0; color:white; cursor:pointer; }

.focus-mode .utility-bar, .focus-mode .site-header, .focus-mode .breadcrumbs, .focus-mode .page-hero, .focus-mode .game-aside, .focus-mode .site-footer, .focus-mode .ad-slot, .focus-mode .related-section { display:none!important; }
.focus-mode .game-shell { padding:0; }
.focus-mode .container { width:100%; max-width:none; }
.focus-mode .game-layout { display:block; }
.focus-mode .game-panel { min-height:100vh; border:0; border-radius:0; }
.focus-mode .game-toolbar { position:sticky; top:0; z-index:50; }
.focus-mode .game-status-line { position:sticky; top:64px; z-index:45; }
.focus-mode .game-board-wrap { min-height:calc(100vh - 65px); }

.article-layout { display:grid; grid-template-columns:minmax(0,var(--reading)) 290px; justify-content:space-between; gap:48px; align-items:start; }
.article { font-family:var(--font-editorial); font-size:1.08rem; line-height:1.78; }
.article h2, .article h3 { color:var(--navy); line-height:1.17; }
.article h2 { margin:2.2em 0 .65em; font-size:2rem; }
.article h3 { margin:1.8em 0 .55em; font-size:1.45rem; }
.article p { margin:0 0 1.15em; }
.article .lead { font-size:1.25rem; color:var(--ink-soft); }
.article-callout { padding:18px 20px; border-left:4px solid var(--teal); background:var(--teal-soft); font-family:var(--font-ui); font-size:.91rem; margin:28px 0; }
.article-aside { position:sticky; top:calc(var(--header-h) + 20px); display:grid; gap:18px; }
.toc { border:1px solid var(--line); border-radius:var(--radius); padding:18px; }
.toc h2 { font-family:var(--font-editorial); font-size:1.2rem; margin:0 0 9px; }
.toc a { display:block; padding:5px 0; text-decoration:none; font-size:.82rem; }

.site-footer { background:var(--navy); color:rgba(255,255,255,.78); padding:52px 0 0; }
.footer-grid { display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:44px; }
.footer-brand .brand { color:white; }
.footer-brand .brand-copy small { color:rgba(255,255,255,.65); }
.footer-brand p { max-width:330px; font-size:.84rem; }
.footer-col h2 { color:white; font-size:.86rem; text-transform:uppercase; letter-spacing:.08em; margin:0 0 13px; }
.footer-col a { display:block; color:rgba(255,255,255,.76); text-decoration:none; padding:4px 0; font-size:.83rem; }
.footer-col a:hover { color:white; text-decoration:underline; }
.footer-bottom { margin-top:42px; min-height:68px; border-top:1px solid rgba(255,255,255,.13); display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:.75rem; }
.footer-bottom-links { display:flex; gap:16px; flex-wrap:wrap; }
.footer-bottom a { color:rgba(255,255,255,.76); }

.toast-region { position:fixed; z-index:100; left:50%; bottom:24px; transform:translateX(-50%); display:grid; gap:8px; pointer-events:none; width:min(440px,calc(100% - 24px)); }
.toast { width:100%; background:#0c263d; color:white; border-radius:10px; box-shadow:var(--shadow-md); padding:11px 11px 11px 15px; font-size:.84rem; opacity:0; transform:translateY(10px); animation:toast-in .22s forwards; display:grid; grid-template-columns:minmax(0,1fr) 34px; align-items:center; gap:10px; pointer-events:none; }
.toast.is-leaving { opacity:0; transform:translateY(8px); transition:opacity .18s ease, transform .18s ease; }
.toast-close { width:34px; height:34px; border:0; border-radius:7px; background:rgba(255,255,255,.1); color:white; font-size:1.1rem; cursor:pointer; pointer-events:auto; }
.toast-close:hover, .toast-close:focus-visible { background:rgba(255,255,255,.2); outline:2px solid rgba(255,255,255,.85); outline-offset:1px; }
@keyframes toast-in { to { opacity:1; transform:translateY(0); } }

.mobile-nav { display:none; }

@media (max-width: 1080px) {
  .main-nav { display:none; }
  .mobile-menu-btn { display:grid; }
  .header-inner { grid-template-columns:auto 1fr auto; }
  .page-hero-illustrated .page-hero-grid { grid-template-columns:minmax(0,1fr) minmax(300px,410px); gap:32px; }
  .page-hero-illustrated .page-hero-media { transform:none; }
  .article-layout { grid-template-columns:minmax(0,1fr); }
  .article-aside { position:static; order:-1; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero-inner { grid-template-columns:1fr 420px; }
  .hero h1 { font-size:3.5rem; }
  .category-rail { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .puzzle-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer-grid { grid-template-columns:1.4fr repeat(2,1fr); }
  .footer-grid .footer-col:last-child { display:none; }
  .mobile-nav { display:block; position:fixed; z-index:90; inset:0 auto 0 0; width:min(360px,88vw); background:white; transform:translateX(-105%); visibility:hidden; pointer-events:none; transition:transform 260ms cubic-bezier(.2,.8,.2,1), visibility 0s linear 260ms; box-shadow:var(--shadow-md); overflow:auto; }
  .mobile-nav.is-open { transform:translateX(0); visibility:visible; pointer-events:auto; transition-delay:0s; }
  .mobile-nav-head { min-height:74px; display:flex; align-items:center; justify-content:space-between; padding:0 18px; border-bottom:1px solid var(--line); }
  .mobile-nav-links { padding:14px; }
  .mobile-nav-links a { display:flex; align-items:center; justify-content:space-between; color:var(--ink); text-decoration:none; font-weight:800; padding:13px 10px; border-bottom:1px solid var(--line); }
  .nav-backdrop { position:fixed; inset:0; z-index:85; background:rgba(9,22,34,.56); opacity:0; visibility:hidden; transition:var(--transition); }
  .nav-backdrop.is-visible { opacity:1; visibility:visible; }
}

@media (max-width: 860px) {
  :root { --header-h:66px; }
  .utility-bar { display:none; }
  .container, .reading-width { width:min(calc(100% - 28px),var(--content)); }
  .header-inner { min-height:66px; gap:12px; }
  .brand-mark { width:38px; height:38px; }
  .brand-copy strong { font-size:1.17rem; }
  .brand-copy small { display:none; }
  .hero-inner { grid-template-columns:1fr; min-height:0; gap:0; }
  .hero-copy { padding:48px 0 38px; }
  .hero h1 { font-size:clamp(2.7rem,12vw,4rem); }
  .hero-art { min-height:360px; margin-inline:-14px; }
  .hero-art img { height:360px; object-position:center; }
  .proof-grid { grid-template-columns:repeat(2,1fr); }
  .proof-item:nth-child(2) { border-right:0; }
  .proof-item:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .category-rail { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .home-layout, .game-layout, .article-layout, .generator-layout { grid-template-columns:1fr; }
  .game-layout > *, .game-main, .game-panel { min-width:0; max-width:100%; }
  .puzzle-about { grid-template-columns:1fr; }
  .game-aside { position:static; grid-template-columns:1fr 1fr; }
  .game-toolbar { flex-direction:column; align-items:stretch; overflow:visible; }
  .game-toolbar > .toolbar-group:first-child { width:100%; justify-content:flex-start; }
  .game-toolbar > .toolbar-scroll { width:100%; }
  .mobile-word-list-control { display:inline-flex; }
  .article-aside { position:static; grid-template-columns:minmax(0,1fr); }
  .article-aside > :not(.toc) { display:none; }
  .toc { display:flex; align-items:center; gap:8px; overflow-x:auto; padding:11px; scrollbar-width:thin; }
  .toc h2 { flex:none; margin:0 4px 0 0; font-family:var(--font-ui); font-size:.78rem; white-space:nowrap; }
  .toc a { flex:none; padding:7px 10px; border:1px solid var(--line); border-radius:999px; background:white; white-space:nowrap; }
  .generator-form { position:static; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-brand { grid-column:1/-1; }
  .page-hero-grid { grid-template-columns:1fr; }
  .page-hero-illustrated .page-hero-grid { grid-template-columns:1fr; gap:28px; }
  .page-hero-illustrated .page-hero-media { transform:none; }
  .page-hero-actions { display:flex; gap:8px; flex-wrap:wrap; }
  .filter-bar { position:static; }
  .filter-inner { display:none; }
  .filter-more-btn { width:100%; min-height:46px; }
}

@media (max-width: 600px) {
  .confirm-actions { display:grid; grid-template-columns:1fr; }
  .confirm-actions .btn { width:100%; }
  body { font-size:15px; }
  .container, .reading-width { width:min(calc(100% - 22px),var(--content)); }
  .header-inner { grid-template-columns:auto 1fr auto; }
  .brand-copy strong { font-size:1.06rem; }
  .header-actions { gap:5px; }
  .icon-btn { min-width:40px; height:40px; }
  .hero-copy { padding:38px 0 30px; }
  .hero h1 { margin-bottom:18px; font-size:clamp(2.05rem,9.2vw,2.35rem); line-height:1.045; letter-spacing:-.038em; }
  .hero p { font-size:1rem; }
  .hero-actions { display:grid; grid-template-columns:minmax(0,1fr); }
  .hero-actions .btn { width:100%; min-width:0; }
  .hero-trust { gap:12px 18px; font-size:.8rem; }
  .hero-art { min-height:0; margin-inline:-11px; align-self:auto; }
  .hero-art::before { width:310px; height:310px; right:-45px; top:-65px; }
  .hero-art img { display:block; width:100%; height:auto; min-height:0; aspect-ratio:1672/941; object-fit:contain; object-position:center; }
  .proof-grid { grid-template-columns:1fr 1fr; }
  .proof-item { justify-content:flex-start; padding:12px 10px; gap:9px; }
  .proof-icon { width:34px; height:32px; flex:none; }
  .proof-item span { display:block; min-width:0; font-size:.66rem; line-height:1.3; }
  .proof-item strong { font-size:.74rem; line-height:1.2; }
  .section { padding:34px 0; }
  .section-head { flex-direction:column; align-items:flex-start; gap:9px; margin-bottom:16px; }
  .section-head > :first-child { flex:0 1 auto; width:100%; }
  .section-head h2 { font-size:2rem; line-height:1.02; }
  .section-head p { margin-top:6px; line-height:1.48; }
  .text-link { font-size:.82rem; }
  .category-rail { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .category-tile { min-height:112px; padding:14px 8px; }
  .puzzle-grid { grid-template-columns:1fr; }
  .puzzle-card { display:flex; min-height:0; }
  .card-preview { min-height:0; aspect-ratio:1000/560; padding:0; border-right:0; border-bottom:1px solid var(--line); }
  .card-preview-image { min-height:0; object-position:center; }
  .card-body { padding:14px 13px 12px; }
  .puzzle-card h3 { font-size:1.1rem; }
  .puzzle-card p { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:10px; font-size:.8rem; }
  .card-actions .btn { min-height:36px; padding:0 10px; font-size:.75rem; }
  .save-btn { width:36px; height:36px; }
  .sidebar-stack { gap:12px; }
  .guide-row { grid-template-columns:86px 1fr; gap:12px; }
  .guide-meta { display:none; }
  .guide-row h3 { font-size:1.05rem; }
  .guide-row p { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .page-hero { padding:34px 0 28px; }
  .page-hero h1 { font-size:2rem; line-height:1.02; letter-spacing:-.025em; overflow-wrap:anywhere; }
  .branded-title h1 { font-size:clamp(1.68rem,7.2vw,2rem); }
  .page-hero p { font-size:.95rem; }
  .branded-title { gap:8px; align-items:flex-start; }
  .title-sticker { width:58px; height:54px; transform:none; }
  .page-eyebrow { font-size:.68rem; letter-spacing:.08em; }
  .hero-meta { gap:7px; margin-top:16px; }
  .meta-chip { min-height:34px; padding:5px 10px; font-size:.74rem; }
  .filter-bar { top:66px; }
  .game-shell { padding:18px 0 48px; }
  .game-panel { border-radius:12px; }
  .game-toolbar { position:static; min-height:0; padding:10px; overflow:visible; flex-direction:column; align-items:stretch; gap:8px; }
  .game-toolbar > .toolbar-group:first-child { width:100%; display:flex; justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:8px; }
  .game-toolbar > .toolbar-scroll { width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; overflow:visible; }
  .game-toolbar > .toolbar-scroll .tool-btn { grid-column:auto; }
  .game-status-line { min-height:36px; padding:8px 10px; font-size:.73rem; line-height:1.4; }
  .focus-mode .game-status-line { position:static; }
  .toolbar-stat { min-width:0; flex:1 1 0; padding:4px 7px; text-align:center; }
  .toolbar-stat strong { font-size:.8rem; }
  .toolbar-stat span { font-size:.55rem; }
  .tool-btn { min-height:42px; width:100%; justify-content:center; padding:0 9px; }
  .tool-btn .tool-label { display:inline; }
  .game-board-wrap { padding:14px 8px 18px; }
  .coloring-preview { padding:12px; }
  .game-instructions { padding:14px; font-size:.78rem; }
  .game-aside { grid-template-columns:1fr; }
  .download-stack .btn { white-space:normal; line-height:1.25; text-align:center; }
  .word-grid { width:100%; }
  .word-cell { font-size:clamp(.58rem,3.1vw,.82rem); }
  .word-bank { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .word-bank li { font-size:.65rem; }
  .word-list-dialog .word-bank { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 12px; }
  .word-list-dialog .word-bank li { font-size:.72rem; }
  .sudoku-cell { font-size:clamp(.95rem,6vw,1.35rem); }
  .number-pad { gap:4px; }
  .number-btn { min-height:42px; padding:0; }
  .quiz-question { font-size:2rem; }
  .choice-btn { min-height:52px; font-size:.88rem; }
  .dpad { width:170px; }
  .bingo-cell { min-height:67px; font-size:clamp(.52rem,2.35vw,.68rem); padding:4px 2px; overflow-wrap:anywhere; }
  .bingo-head span { font-size:1.45rem; padding:5px; }
  .rebus-card, .riddle-card { padding:14px; }
  .riddle-answer-row { display:grid; grid-template-columns:1fr auto; }
  .generator-output { min-height:360px; padding:10px; }
  .generator-form { padding:15px; }
  .form-grid { grid-template-columns:1fr; }
  .facet-grid { grid-template-columns:1fr; }
  .filter-dialog-actions { display:grid; grid-template-columns:1fr; }
  .filter-dialog-actions .btn { width:100%; }
  .print-sheet { padding:18px 10px; box-shadow:none; }
  .completion-drawer { left:10px; right:10px; bottom:10px; width:auto; }
  .completion-actions { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:28px 20px; }
  .footer-bottom { align-items:flex-start; flex-direction:column; padding:20px 0; }
  .search-result { grid-template-columns:40px 1fr; }
  .search-result .result-kind { grid-column:2; justify-self:start; }
  .search-shortcuts { display:none; }
}

@media (max-width: 380px) {
  .brand-copy strong { font-size:.95rem; }
  .page-hero h1 { font-size:1.82rem; }
  .title-sticker { width:50px; height:47px; }
  .header-actions .save-header { display:none; }
  .category-tile strong { font-size:.82rem; }
  .word-bank { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bingo-cell { min-height:59px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}


.print-only { display:none; }

@media print {
  @page { margin: 12mm; size: auto; }
  body { background:white!important; color:black!important; font-family:Arial,sans-serif; }
  .utility-bar, .site-header, .breadcrumbs, .page-hero, .game-toolbar, .game-aside, .game-instructions, .related-section, .site-footer, .ad-slot, .completion-drawer, .toast-region, .no-print, .dpad, .number-pad, .generator-form, .section-paper { display:none!important; }
  .container { width:100%!important; max-width:none!important; }
  .game-shell { padding:0!important; }
  .game-layout { display:block!important; }
  .game-panel { border:0!important; box-shadow:none!important; }
  .game-board-wrap { padding:0!important; overflow:visible!important; min-height:0!important; }
  .word-grid, .sudoku-board, .maze-board, .bingo-wrap { width:180mm!important; max-width:100%!important; break-inside:avoid; }
  .word-cell { font-size:10pt!important; }
  .print-only { display:block!important; }
  .generator-layout { display:block!important; }
  .generator-output { min-height:0!important; border:0!important; background:white!important; padding:0!important; }
  .print-sheet { width:100%!important; max-width:none!important; box-shadow:none!important; padding:0!important; }
  .answer-key-page { break-before:page; page-break-before:always; }
  a[href]::after { content:none!important; }
}

.force-reduced-motion *, .force-reduced-motion *::before, .force-reduced-motion *::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }

.library-search { display:grid; grid-template-columns:minmax(210px,1fr) auto auto; gap:8px; align-items:center; min-width:min(430px,100%); }
.library-search input { min-height:46px; border:1px solid var(--line-strong); border-radius:10px; padding:0 13px; min-width:0; }
[inert] { user-select:none; }
@media (max-width:860px) { .library-search { min-width:0; width:100%; } }
@media (max-width:520px) { .library-search { grid-template-columns:1fr auto; } .library-search input { grid-column:1/-1; } .library-search .btn-primary { grid-column:1; } }

@media (max-width:600px) {
  .icon-btn { min-width:44px; width:44px; height:44px; }
  .tool-btn { min-height:44px; }
  .filter-btn { min-height:42px; }
  .number-btn { min-height:44px; }
  .card-actions .btn, .save-btn { min-height:40px; }
}

.section-soft { background:#f7f9fb; border-block:1px solid var(--line); }
.collection-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.collection-card {
  display:flex; flex-direction:column; min-height:0; padding:0; overflow:hidden;
  color:var(--ink); text-decoration:none; background:var(--white);
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm);
  transition:transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.collection-card:hover { color:var(--ink); transform:translateY(-2px); border-color:var(--teal); box-shadow:var(--shadow-md); }
.collection-card-art { display:block; aspect-ratio:1.72/1; overflow:hidden; background:#f6eeee; }
.collection-card-art img { width:100%; height:100%; object-fit:cover; transition:transform 420ms ease; }
.collection-card:hover .collection-card-art img { transform:scale(1.045); }
.collection-card-body { min-height:216px; padding:19px 20px 20px; display:flex; flex-direction:column; }
.collection-card-count { color:var(--teal-dark); font-size:.75rem; font-weight:850; letter-spacing:.04em; text-transform:uppercase; }
.collection-card h3 { margin:12px 0 8px; font-family:var(--font-editorial); font-size:1.45rem; line-height:1.12; }
.collection-card p { margin:0 0 18px; color:var(--ink-soft); font-size:.9rem; }
.collection-card .text-link { margin-top:auto; }
.collection-intro { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr); gap:32px; align-items:start; margin-bottom:42px; padding:28px; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); }
.collection-intro h2 { margin:0 0 8px; font-family:var(--font-editorial); font-size:2rem; }
.collection-intro p { margin:0; color:var(--ink-soft); }
.collection-steps { display:grid; gap:10px; }
.collection-steps span { display:flex; align-items:center; gap:10px; padding:11px 12px; background:white; border:1px solid var(--line); border-radius:10px; font-size:.86rem; font-weight:750; }
.collection-steps strong { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:var(--teal-soft); color:var(--teal-dark); }
.collection-group + .collection-group { margin-top:54px; padding-top:46px; border-top:1px solid var(--line); }
.faq-panel { margin-top:52px; padding:28px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); }
.faq-panel h2 { margin-top:0; font-family:var(--font-editorial); font-size:2rem; }
.faq-panel details { border-top:1px solid var(--line); }
.faq-panel details:last-child { border-bottom:1px solid var(--line); }
.faq-panel summary { cursor:pointer; padding:16px 0; font-weight:800; }
.faq-panel details p { margin:0 0 16px; color:var(--ink-soft); }

@media (max-width: 980px) {
  .collection-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .collection-intro { grid-template-columns:1fr; }
}
@media (max-width: 600px) {
  .collection-grid { grid-template-columns:1fr; }
  .collection-card { min-height:0; }
  .collection-card-body { min-height:0; padding:18px; }
  .collection-intro { padding:18px; margin-bottom:32px; }
  .collection-group + .collection-group { margin-top:38px; padding-top:34px; }
  .faq-panel { padding:18px; }
}


.puzzle-card[hidden] { display:none!important; }
.library-tools { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:18px; }
.library-tools .library-summary { margin:0; }
.sort-field { display:flex; align-items:center; gap:9px; color:var(--ink-soft); font-size:.78rem; font-weight:800; }
.sort-field select { min-height:42px; border:1px solid var(--line-strong); border-radius:9px; background:white; color:var(--ink); padding:0 34px 0 11px; font:inherit; }
.progressive-actions { display:flex; justify-content:space-between; margin-top:28px; }
.library-empty { max-width:560px; margin:26px auto 0; padding:34px 24px; border:1px dashed var(--line-strong); border-radius:var(--radius); text-align:center; background:var(--paper); }
.library-empty h2 { margin:0 0 8px; font-family:var(--font-editorial); font-size:1.8rem; }
.library-empty p { margin:0 0 18px; color:var(--ink-soft); }
.no-script-note { margin-top:22px; padding:14px 16px; border-left:3px solid var(--teal); background:var(--teal-soft); color:var(--ink-soft); }

@media (max-width: 700px) {
  .library-tools { align-items:stretch; flex-direction:column; gap:11px; }
  .sort-field { justify-content:space-between; }
  .sort-field select { flex:1; max-width:230px; }
  .progressive-actions { align-items:stretch; flex-direction:column; gap:10px; }
  .progressive-actions .btn { width:100%; }
}

.puzzle-about {
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);
  gap:28px;
  align-items:start;
  margin-top:26px;
  padding:26px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--paper);
}
.puzzle-about h2 { margin:0 0 9px; font-family:var(--font-editorial); font-size:2rem; }
.puzzle-about p { margin:0 0 12px; color:var(--ink-soft); }
.puzzle-about p:last-child { margin-bottom:0; }
.puzzle-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0; }
.puzzle-facts div { padding:12px; border:1px solid var(--line); border-radius:10px; background:white; }
.puzzle-facts div:last-child:nth-child(odd) { grid-column:1/-1; }
.puzzle-facts dt { color:var(--ink-soft); font-size:.68rem; font-weight:850; letter-spacing:.06em; text-transform:uppercase; }
.puzzle-facts dd { margin:3px 0 0; color:var(--navy); font-weight:850; }
.section-paper .faq-panel { margin-top:0; background:white; }
#game { scroll-margin-top:calc(var(--header-h) + 24px); }

@container (max-width: 720px) {
  .puzzle-about { grid-template-columns:1fr; padding:18px; gap:18px; }
  .puzzle-about h2 { font-size:1.7rem; }
}
@media (max-width: 430px) {
  .puzzle-facts { grid-template-columns:1fr; gap:7px; }
  .puzzle-facts div { padding:10px; }
}

.proof-icon {
  stroke:currentColor;
  fill:none;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.field-label-row { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.field-count { color:var(--teal-dark); font-size:.72rem; font-weight:850; white-space:nowrap; }
.field [aria-invalid="true"] { border-color:var(--red); box-shadow:0 0 0 3px rgba(180,44,44,.1); }
.form-message { margin:-4px 0 14px; padding:10px 12px; border:1px solid rgba(180,44,44,.28); border-radius:9px; background:#fff3f1; color:#8d2020; font-size:.8rem; line-height:1.45; }
.generator-submit-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; }
.generator-submit-row .btn { min-height:44px; }
.draft-status { min-height:20px; margin:10px 0 0; color:var(--ink-soft); font-size:.72rem; }
.generator-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.generator-actions[hidden] { display:none!important; }
.generator-output:focus-visible { outline:3px solid rgba(13,118,110,.25); outline-offset:4px; }
.generated-heading { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; margin-bottom:18px; border-bottom:1px solid var(--line); padding-bottom:14px; }
.generated-heading h2 { margin:2px 0 0; text-align:left; }
.generated-heading > span { color:var(--ink-soft); font-size:.76rem; font-weight:750; text-align:right; }
.generated-kicker { color:var(--teal-dark); font-size:.68rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.generated-word-grid { width:min(100%,620px); margin-inline:auto; }
.generated-word-bank { margin-top:20px; }
.generated-bingo-card { margin-bottom:30px; }
.generated-bingo-card h3 { text-align:center; }
.caller-sheet { break-before:page; margin-top:28px; }
.caller-sheet ol { columns:2; column-gap:34px; padding-left:24px; }
.caller-sheet li { break-inside:avoid; margin-bottom:7px; }

@media (max-width: 600px) {
  .generator-submit-row { grid-template-columns:1fr; }
  .generator-actions { display:grid; grid-template-columns:1fr; }
  .generator-actions .btn { width:100%; }
  .generated-heading { display:grid; gap:5px; }
  .generated-heading > span { text-align:left; }
  .caller-sheet ol { columns:1; }
}

.generated-maze {
  width: min(100%, 680px);
  margin-inline: auto;
  touch-action: auto;
  pointer-events: none;
  box-shadow: 0 10px 28px rgba(16, 42, 67, .08);
}
.generated-maze-note {
  margin: 16px auto 0;
  max-width: 680px;
  color: var(--muted);
  font-size: .92rem;
  text-align: center;
}
@media (max-width: 520px) {
  .generated-maze { border-width: 2px; }
  .generated-maze .maze-cell[data-wall-n="1"] { border-top-width: 1px; }
  .generated-maze .maze-cell[data-wall-e="1"] { border-right-width: 1px; }
  .generated-maze .maze-cell[data-wall-s="1"] { border-bottom-width: 1px; }
  .generated-maze .maze-cell[data-wall-w="1"] { border-left-width: 1px; }
}
@media print {
  .generated-maze {
    width: 175mm !important;
    box-shadow: none !important;
  }
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.tool-card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 10px 30px rgba(16, 42, 67, .05);
}
.tool-card > div { min-width:0; }
.tool-card h2 {
  margin: 0 0 8px;
  font-size: clamp(1.22rem, 1.7vw, 1.55rem);
}
.tool-card h2 a { color: var(--navy); text-decoration: none; }
.tool-card p { margin: 0 0 14px; color: var(--muted); }
.tool-card-icon {
  width: 72px;
  height: 66px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
}
.tool-sticker { width:100%; height:100%; object-fit:contain; }
.tool-card-icon .icon { width: 26px; height: 26px; }
.check-list {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
  color: var(--text);
  font-size: .92rem;
}
.check-list li {
  position: relative;
  padding-left: 22px;
}
.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 900;
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.trust-grid h2 { margin-top: 0; font-size: 1.2rem; }
.trust-grid p { margin-bottom: 0; color: var(--muted); }
@media (max-width: 1100px) {
  .tools-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tool-card:last-child:nth-child(odd) { grid-column:1/-1; }
}
@media (max-width: 900px) {
  .tools-grid { grid-template-columns: 1fr; }
  .tool-card, .tool-card:last-child:nth-child(odd) { grid-column:auto; grid-template-columns:48px minmax(0,1fr); }
  .trust-grid { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 520px) {
  .branded-title { gap:10px; align-items:flex-start; }
  .title-sticker { width:72px; height:66px; }
  .card-sticker { width:58px; height:52px; }
  .tool-card { padding:16px 14px; gap:10px; grid-template-columns:42px minmax(0,1fr); }
  .tool-card-icon { width: 42px; height: 42px; border-radius: 12px; }
  .tool-card .btn { width: 100%; }
  .tool-card h2 { font-size:1.12rem; overflow-wrap:anywhere; }
  .tool-card p, .check-list { font-size:.84rem; }
}

.puzzle-hero-actions {
  display: grid;
  gap: 9px;
  min-width: min(100%, 430px);
  align-self: end;
}
.hero-action-row,
.hero-utility-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.hero-action-row .btn { flex: 1 1 190px; }
.hero-utility-actions > a,
.hero-utility-actions > button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--teal-dark);
  font: inherit;
  font-size: .78rem;
  font-weight: 850;
  text-decoration: none;
  cursor: pointer;
}
.hero-utility-actions > a:hover,
.hero-utility-actions > button:hover {
  background: var(--teal-soft);
  text-decoration: none;
}
.hero-utility-actions > :focus-visible { outline-offset: 2px; }
.collection-hero-actions { max-width: 360px; }
.collection-hero-actions .btn { width: 100%; }

@media (max-width: 860px) {
  .puzzle-hero-actions { width: 100%; min-width: 0; }
  .hero-action-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-action-row .btn { width: 100%; }
  .hero-utility-actions { justify-content: flex-start; }
  .collection-hero-actions { max-width: none; }
}
@media (max-width: 600px) {
  .hero-action-row { grid-template-columns: 1fr; }
  .hero-utility-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-utility-actions > a,
  .hero-utility-actions > button { min-height: 44px; padding: 0 7px; font-size: .75rem; }
  .word-grid { touch-action: pan-y; }
}

.complete-directory {
  margin-top: 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.complete-directory summary {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  cursor: pointer;
  font-weight: 850;
  color: var(--navy);
}
.complete-directory summary > span:last-child {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 750;
}
.complete-directory ul {
  margin: 0;
  padding: 4px 16px 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 22px;
}
.complete-directory li {
  display: grid;
  gap: 2px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.complete-directory li a { font-weight: 750; color: var(--navy); }
.complete-directory li span { font-size: .72rem; color: var(--muted); }
.collection-index-group + .collection-index-group { margin-top: 48px; }
@media (max-width: 860px) {
  .complete-directory ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .complete-directory ul { grid-template-columns: 1fr; }
  .complete-directory summary { align-items: flex-start; }
}

.route-strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #eef8f6;
}
.route-strip[hidden], .active-route-card[hidden] { display: none !important; }
.route-strip-inner {
  min-height: 72px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 340px);
  align-items: center;
  gap: 28px;
  padding-block: 12px;
}
.route-strip-copy { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 12px; min-width: 0; }
.route-eyebrow {
  grid-row: 1 / span 2;
  align-self: center;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--teal);
  color: white;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.route-strip-copy strong { color: var(--navy); font-size: .92rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.route-strip-copy > span:last-child { color: var(--muted); font-size: .76rem; }
.route-strip-progress { display: grid; grid-template-columns: minmax(100px, 1fr) auto; align-items: center; gap: 14px; }
.route-meter { height: 8px; overflow: hidden; border-radius: 999px; background: rgba(16,42,67,.12); }
.route-meter > span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--teal); transition: width 240ms ease; }
.active-route-card {
  margin-bottom: 34px;
  padding: 22px;
  border: 1px solid #b8dfd9;
  border-radius: 16px;
  background: linear-gradient(135deg, #f2fbf9 0%, #fffdf8 100%);
}
.active-route-head, .active-route-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.active-route-head h2 { margin: 0; font-size: 1.35rem; }
.active-route-card > p { margin: 10px 0 16px; color: var(--muted); }
.active-route-card .route-meter { margin-bottom: 18px; }
.active-route-actions { justify-content: flex-start; flex-wrap: wrap; }

@media (max-width: 700px) {
  .route-strip-inner { grid-template-columns: 1fr; gap: 10px; padding-block: 12px; }
  .route-strip-copy { grid-template-columns: auto minmax(0, 1fr); }
  .route-strip-progress { grid-template-columns: 1fr auto; }
  .route-strip .text-link { white-space: nowrap; }
  .active-route-head { align-items: flex-start; }
}
@media (max-width: 420px) {
  .route-eyebrow { grid-row: auto; width: max-content; }
  .route-strip-copy { grid-template-columns: 1fr; }
  .route-strip-copy strong { white-space: normal; }
  .route-strip-progress { grid-template-columns: 1fr; }
  .active-route-head { display: grid; }
  .active-route-head .btn { justify-self: start; }
  .active-route-actions { display: grid; }
  .active-route-actions .btn { width: 100%; }
}

.challenge-profile {
  margin: 18px 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.challenge-profile li {
  display: grid;
  grid-template-columns: minmax(120px, .34fr) minmax(0, 1fr);
  gap: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.challenge-profile strong { color: var(--navy); font-size: .8rem; }
.challenge-profile span { color: var(--muted); font-size: .82rem; line-height: 1.55; }
@media (max-width: 560px) {
  .challenge-profile li { grid-template-columns: 1fr; gap: 3px; }
}