/* Kids Learning Arcade home: the same warm paper as the games, big picture tiles, nothing moving. */
:root { --paper: #fff3dc; --card: #fffdf7; --ink: #3b2a1a; --soft: #7a6047; --blue: #3f7fc4; --red: #d65a55; color-scheme: light; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { min-height: 100dvh; background: var(--paper); color: var(--ink); font: 500 18px/1.4 'Fredoka', system-ui, sans-serif; overscroll-behavior: none; }
button { font: inherit; color: inherit; cursor: pointer; }
.top { display: flex; align-items: center; gap: 10px; padding: max(10px, env(safe-area-inset-top)) 16px 6px; min-height: 64px; }
.grow { flex: 1; }
.logo { display: inline-flex; gap: 3px; }
.logo b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; color: #fff; font-size: 20px; box-shadow: inset 0 -3px 0 #0003; }
.logo .c { background: var(--blue); }
.logo .v { background: var(--red); }
.round { min-height: 48px; min-width: 48px; border: 3px solid var(--ink); border-radius: 16px; background: var(--card); box-shadow: 0 4px 0 var(--ink); display: inline-grid; place-items: center; padding: 6px; }
main { max-width: 1600px; margin: 0 auto; padding: 0 16px calc(28px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
/* Off center on phones (Doug, Oct 3): Google's full-width ad sized itself to the screen inside the padded card and
   pushed the page wider than the phone, so every card ran off the right edge. Nothing in main may be wider than it. */
main > * { min-width: 0; }
.ad-card { overflow: hidden; }
.ad-card ins { max-width: 100%; }
.hero { text-align: center; }
.hero h1 { margin: 4px 0 0; font-size: clamp(30px, 8vw, 46px); line-height: 1.1; }
.lede { margin: 6px 0 0; color: var(--soft); font-size: 20px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 14px; }
.tile-card { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 16px 12px; border: 3px solid var(--ink); border-radius: 22px; background: var(--card); box-shadow: 0 6px 0 var(--ink); color: var(--ink); text-decoration: none; }
.tile-card:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink); }
.tile-card img { width: 96px; height: 96px; }
.tile-card .n { font-weight: 700; font-size: 24px; }
.tile-card .a { font-size: 15px; color: var(--soft); }
.tile-card .l { font-size: 16px; }
.soon { display: grid; gap: 10px; }
.soon h2 { margin: 0; font-size: 20px; color: var(--soft); }
.soon-card { opacity: .7; box-shadow: none; border-style: dashed; }
.soon-card img { width: 64px; height: 64px; }
.grownups { background: var(--card); border: 3px solid var(--ink); border-radius: 20px; padding: 14px 16px; }
.grownups summary { font-weight: 700; cursor: pointer; }
.grownups p { margin: 10px 0 0; }
.small { font-size: 14px; color: var(--soft); }
.mission { background: #fff8e6; border: 2px dashed #b98345; border-radius: 18px; padding: 12px 16px; }
.mission h2 { margin: 0 0 4px; font-size: 20px; }
.mission p { margin: 0; }
.mission .dedication { margin-top: 10px; font-style: italic; color: #7a5528; }
.tile-card .learn { font-size: 14px; color: #2a7a36; background: #e7f4e8; border-radius: 999px; padding: 2px 10px; }
/* Until Google fills the ad: a dashed "Ad space" box with its height reserved (Doug, Oct 6). Filled: the label shows. */
.ad-card { position: relative; width: 100%; max-width: 100%; min-height: 280px; background: var(--card); border: 2px dashed #e2d4b8; border-radius: 16px; padding: 8px 12px 12px; }
@media (min-width: 768px) { .ad-card { min-height: 250px; } }
.ad-card[hidden] { display: none; }
.ad-label { display: none; margin: 0 0 6px; font-size: 12px; color: var(--soft); text-transform: uppercase; letter-spacing: .06em; }
.ad-space { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--soft); pointer-events: none; }
.ad-card:has(ins[data-ad-status="filled"]) { border-style: solid; }
.ad-card:has(ins[data-ad-status="filled"]) .ad-space { display: none; }
.ad-card:has(ins[data-ad-status="filled"]) .ad-label { display: block; }
/* SEO pass (Oct 2): brand line over the H1, rows of links by age and skill, and visible questions for grown-ups. */
.kicker { margin: 0; font-weight: 600; color: var(--soft); font-size: 18px; }
.pick-row { display: grid; gap: 8px; }
.pick-row h2 { margin: 0; font-size: 20px; }
.chip-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip-links a { display: inline-flex; align-items: center; min-height: 48px; padding: 4px 16px; border: 3px solid var(--ink); border-radius: 999px; background: var(--card); color: var(--ink); font-weight: 600; text-decoration: none; }
.faq { background: var(--card); border: 3px solid var(--ink); border-radius: 20px; padding: 14px 16px; display: grid; gap: 6px; }
.faq h2 { margin: 0; font-size: 22px; }
.faq h3 { margin: 8px 0 0; font-size: 18px; }
.faq p { margin: 0; }
.faq a { color: #24598f; }
.parents-links { margin: 0; font-size: 16px; color: var(--soft); }
.parents-links a { color: #24598f; }
/* Helps for every child (ADR-023): a box for grown-ups like the questions, with the switches inside. */
.helps-link { margin: 6px 0 0; }
.helps-link a { display: inline-flex; align-items: center; min-height: 48px; padding: 4px 16px; border: 3px solid var(--ink); border-radius: 999px; background: var(--card); color: var(--ink); font-weight: 600; text-decoration: none; }
.helps-home { background: var(--card); border: 3px solid var(--ink); border-radius: 20px; padding: 14px 16px; display: grid; gap: 8px; }
.helps-home h2 { margin: 0; font-size: 22px; }
.helps-home h3 { margin: 6px 0 0; font-size: 19px; }
.helps-home p, .helps-home ul, .helps-home ol { margin: 0; }
.helps-home ul, .helps-home ol { padding-left: 22px; display: grid; gap: 6px; }
.helps-home a { color: #24598f; }
.helps-home .helps-panel { margin-top: 4px; }
.helps-home .helps-more { display: none; }
/* Short home (Doug, Oct 3): grown-up boxes that open in place, two to a row on wide screens. */
.more-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; align-items: start; }
.more-box { background: var(--card); border: 3px solid var(--ink); border-radius: 20px; box-shadow: 0 4px 0 var(--ink); }
.more-box[open] { grid-column: 1 / -1; }
.more-box > summary { list-style: none; cursor: pointer; min-height: 56px; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 700; font-size: 19px; }
.more-box > summary::-webkit-details-marker { display: none; }
.more-box > summary::after { content: '+'; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border: 2px solid var(--ink); border-radius: 999px; font-size: 22px; line-height: 1; }
.more-box[open] > summary::after { content: '\2212'; }
.more-in { padding: 0 16px 16px; display: grid; gap: 8px; }
.more-in p, .more-in ul, .more-in ol, .more-in h3 { margin: 0; }
.more-in h3 { margin-top: 6px; font-size: 19px; }
.more-in ul, .more-in ol { padding-left: 22px; display: grid; gap: 6px; }
.more-in .chip-links { padding-left: 0; display: flex; }
.more-in a { color: #24598f; }
.more-in .pick-row h2 { font-size: 18px; }
.more-in .share h2 { display: none; }
.grown-games { background: #eef5ff; border: 2px dashed #3f7fc4; border-radius: 16px; padding: 12px 14px; display: grid; gap: 8px; margin-top: 6px; }
.grown-games .go-btn { display: inline-flex; align-items: center; min-height: 48px; padding: 4px 18px; border: 3px solid var(--ink); border-radius: 999px; background: #3f7fc4; color: #fff; font-weight: 700; text-decoration: none; box-shadow: 0 3px 0 var(--ink); }
.rp-badge { margin: 8px auto 0; display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; border: 2px solid #b98345; border-radius: 999px; background: #fff8e6; color: #7a5528; font-weight: 600; font-size: 16px; }
/* Phones: two game tiles to a row, so the games fit in a short scroll (Doug, Oct 3: "a very long scroll"). */
@media (max-width: 600px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tile-card { padding: 12px 8px; border-radius: 18px; }
  .tile-card img { width: 72px; height: 72px; }
  .tile-card .n { font-size: 19px; line-height: 1.15; }
  .tile-card .a { font-size: 14px; }
  .tile-card .l, .tile-card .learn { display: none; }
}
.more-in > .share > h2, .more-in > .my-voice-ad > h2 { display: none; }
.more-in > .share, .more-in > .my-voice-ad { border: 0; padding: 0; background: none; box-shadow: none; }
/* Heart behind the family dedication (Doug, Oct 3: "some kind of cute heart shape outline ... in the background of the
   dedication to the family. Create a few mockup options"). Four looks; the home uses the one Doug picks
   (class heart-a to heart-d on .mission). Still, no motion. */
.mission[class*='heart-'] { position: relative; overflow: hidden; isolation: isolate; }
.mission[class*='heart-'] .dedication { position: relative; }
/* A: one big soft heart outline right behind the dedication */
.mission.heart-a .dedication { max-width: 224px; margin: 12px auto 0; padding: 62px 0 104px; text-align: center; font-size: 16px; line-height: 1.35; }
.mission.heart-a .dedication::before { content: ''; position: absolute; z-index: -1; inset: 0 -64px; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 90'%3E%3Cpath d='M50 84C20 62 6 46 6 28 6 15 16 6 28 6c9 0 16 5 22 13 6-8 13-13 22-13 12 0 22 9 22 22 0 18-14 34-44 56z' fill='%23fff1f3' stroke='%23e8889a' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E"); }
/* B: the dedication in its own heart-outlined note, a small solid heart on top */
.mission.heart-b .dedication { margin-top: 14px; padding: 26px 18px 18px; text-align: center; border: 3px dashed #e8889a; border-radius: 26px; background: #fff1f3; }
.mission.heart-b .dedication::before { content: ''; position: absolute; left: 50%; top: -16px; width: 34px; height: 30px; transform: translateX(-50%); background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 90'%3E%3Cpath d='M50 84C20 62 6 46 6 28 6 15 16 6 28 6c9 0 16 5 22 13 6-8 13-13 22-13 12 0 22 9 22 22 0 18-14 34-44 56z' fill='%23e05a6f' stroke='%233b2a1a' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E"); }
/* C: a light scatter of tiny heart outlines across the box */
.mission.heart-c { background-color: #fff8e6; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='none' stroke='%23e8889a' stroke-width='2' opacity='.35' stroke-linejoin='round'%3E%3Cpath d='M20 30c-8-6-12-10-12-15 0-4 3-6 6-6 3 0 5 2 6 4 1-2 3-4 6-4 3 0 6 2 6 6 0 5-4 9-12 15z'/%3E%3Cpath d='M64 74c-6-4-9-8-9-11 0-3 2-5 5-5 2 0 3 1 4 3 1-2 2-3 4-3 3 0 5 2 5 5 0 3-3 7-9 11z'/%3E%3C/g%3E%3C/svg%3E"); }
.mission.heart-c .dedication { font-size: 19px; }
/* D: the names wrapped in one heart: a wooden-toy heart (style B) beside the line */
.mission.heart-d .dedication { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; }
.mission.heart-d .dedication::before { content: ''; width: 64px; height: 58px; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 90'%3E%3Cpath d='M50 86C19 63 4 47 4 28 4 14 15 4 28 4c9 0 16 5 22 13 6-8 13-13 22-13 13 0 24 10 24 24 0 19-15 35-46 58z' fill='%23d65a55' stroke='%233b2a1a' stroke-width='5' stroke-linejoin='round'/%3E%3Cpath d='M26 18c-8 1-12 7-12 13' fill='none' stroke='%23fff' stroke-width='6' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E"); }

/* Phase 1: Reading level picker (Kids Learning Arcade) */
.level-picker { border: 0; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
.level-picker legend { display: none; }
.level-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.level-chip { min-height: 80px; border: 3px solid var(--ink); border-radius: 16px; background: var(--card); padding: 10px; display: grid; grid-template-rows: auto 1fr; gap: 4px; align-items: start; font-weight: 600; cursor: pointer; transition: all 0.4s ease; }
.level-chip:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--ink); }
.level-chip.selected { background: #dff3e1; border-color: #2b7a37; }
.level-chip .label { font-size: 18px; color: var(--ink); }
.level-chip .desc { font-size: 13px; color: var(--soft); font-weight: 500; }
.level-feedback { margin: 0; font-size: 15px; color: #2b7a37; font-weight: 600; opacity: 0; transition: opacity 0.4s ease; }
.level-feedback.show { opacity: 1; }

/* Arcade footer */
.arcade-footer { text-align: center; margin-top: 20px; padding: 16px 0; font-size: 14px; color: var(--soft); }
.arcade-footer a { color: var(--soft); text-decoration: underline; }
.arcade-footer a:visited { color: var(--soft); }
/* The RightPlace badge keeps its own colors in the footer, and links to RightPlace's site. */
.arcade-footer a.rp-badge, .arcade-footer a.rp-badge:visited { color: #7a5528; text-decoration: none; min-height: 44px; }
.arcade-footer a.rp-badge:hover { text-decoration: underline; }

/* TV optimizations: larger text, bigger tiles, increased padding for distance viewing */
@media (min-width: 1400px) {
  body { font-size: 22px; line-height: 1.6; }
  .hero h1 { font-size: 56px; line-height: 1.2; }
  .lede { font-size: 26px; }
  .kicker { font-size: 22px; }
  .tiles { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 20px; }
  .tile-card { padding: 20px 16px; border: 4px solid var(--ink); border-radius: 26px; gap: 8px; }
  .tile-card img { width: 120px; height: 120px; }
  .tile-card .n { font-size: 28px; }
  .tile-card .a { font-size: 18px; }
  .tile-card .l { font-size: 18px; }
  .tile-card .learn { font-size: 16px; padding: 4px 14px; }
  button { min-height: 52px; padding: 8px 20px; }
  .level-chip { min-height: 90px; font-size: 18px; }
  .level-chip .label { font-size: 22px; }
  .level-chip .desc { font-size: 15px; }
  main { padding: 0 20px calc(32px + env(safe-area-inset-bottom)); gap: 24px; }
  .hero { margin-bottom: 10px; }
  .mission { padding: 16px 20px; }
  .mission h2 { font-size: 24px; }
  .chip-links a { min-height: 52px; padding: 6px 20px; font-size: 18px; }
}