@font-face { font-family: system-rounded; src: local("Arial Rounded MT Bold"); font-display: swap; }
:root { color-scheme: light; --paper: #faf6ee; --ink: #3d3b55; --muted: #817c91; --purple: #7956bb; --purple-dark: #62429e; --line: #e8e1d5; font-family: "Trebuchet MS", system-ui, sans-serif; color: var(--ink); background: var(--paper); }
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; background: radial-gradient(#bdb3a020 .7px, transparent .8px) 0 0 / 8px 8px, var(--paper); }
body, dialog { -webkit-user-select: none; user-select: none; }
input, textarea, [contenteditable]:not([contenteditable="false"]) { -webkit-user-select: text; user-select: text; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; color: inherit; touch-action: manipulation; }
button:disabled { cursor: default; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid #3085bf; outline-offset: 4px; }
button svg { width: 22px; height: 22px; flex: 0 0 auto; }
.button-art { display: block; width: 26px; height: 26px; object-fit: contain; flex: 0 0 auto; pointer-events: none; }
.drawn-icon { --icon-cycle: .6s; display: inline-grid; vertical-align: middle; }
.drawn-icon > .icon-frame { display: block; grid-area: 1 / 1; width: 100%; height: 100%; object-fit: contain; opacity: 0; animation: drawn-icon-frame var(--icon-cycle) step-end infinite; animation-delay: calc(var(--frame) * var(--icon-cycle) / -2); }
.drawn-icon > .icon-frame:first-child { opacity: 1; }
:root[data-quality="low"] .drawn-icon { --icon-cycle: 1s; }
@keyframes drawn-icon-frame { 0%, 49.999% { opacity: 1; } 50%, 100% { opacity: 0; } }
.header { max-width: 1320px; margin: auto; display: flex; gap: 16px; align-items: center; padding: max(25px, env(safe-area-inset-top)) max(36px, env(safe-area-inset-right)) 22px max(36px, env(safe-area-inset-left)); }
.brand { background: none; border: 0; padding: 0; text-align: center; display: flex; flex-direction: column; align-items: center; }
.brand-word { display: block; font: 900 35px/1 system-rounded, "Trebuchet MS", sans-serif; letter-spacing: -2px; }
.brand-word span { display: inline-block; color: hsl(calc(var(--letter) * 47 + 270), 48%, 48%); transform: rotate(calc((var(--letter) - 3) * 1deg)); }
.brand-sub { font-size: 11px; letter-spacing: 3.8px; line-height: 2; color: #756c80; }
.header nav { margin-left: auto; display: flex; gap: 9px; }
.icon-button { border: 1px solid var(--line); background: #ffffffb0; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 0 #e8e1d577; }
.icon-button:hover { background: #ece5f6; border-color: #d5c6e9; }
.icon-button[data-muted] { opacity: .5; background: #efebe4; }
.home { max-width: 1200px; margin: 28px auto 0; padding: 0 36px; display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 14px 35px; }
.eyebrow { font-weight: 700; font-size: 12px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--purple); line-height: 1.7; }
.tiny-star { color: #e4ac35; margin-right: 8px; font-size: 20px; vertical-align: -2px; }
.hero-copy h1 { font-family: system-rounded, "Trebuchet MS", sans-serif; font-size: clamp(36px, 4.1vw, 58px); letter-spacing: -2px; line-height: 1.15; margin: 24px 0 23px; font-weight: 900; }
.hero-copy h1 span { color: var(--purple); position: relative; }
.hero-copy h1 span::after { content: ""; position: absolute; bottom: -8px; left: 0; width: 100%; border-bottom: 6px solid #e8b447; border-radius: 50%; transform: rotate(-2deg); }
.hero-description { line-height: 1.7; color: #777284; font-size: 17px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px; margin: 30px 0; }
.primary-button, .secondary-button, .text-button { min-height: 49px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; border-radius: 16px; padding: 14px 25px; font-weight: 700; border: 0; }
.primary-button { color: #fff; background: var(--purple); box-shadow: 0 5px 0 var(--purple-dark), 0 8px 20px #7956bb20; transition: transform .15s; }
.primary-button:hover { background: #8662c4; transform: translateY(-2px); }
.primary-button:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--purple-dark); }
.secondary-button { background: #fffdf8; border: 1px solid var(--line); box-shadow: 0 3px 0 #e8e1d5; }
.secondary-button:hover { background: #f1eafa; }
.text-button { background: transparent; color: #7c6d91; }
.text-button:hover { background: #f3edf9; }
.home-facts { display: flex; gap: 25px; font-size: 11px; color: #8d8593; margin-top: 34px; }
.home-facts span { display: flex; flex-direction: column; gap: 6px; }
.home-facts b { font-size: 19px; color: #6c657b; }
.hero-art { position: relative; min-height: 430px; }
.art-orbit { position: absolute; width: 360px; height: 350px; background: #f0e9dc url("assets/textures/colorstripeslight.jpg") center / cover; border: 1px dashed #ddcfb8; border-radius: 45% 53% 44% 51%; top: 40px; left: calc(50% - 180px); transform: rotate(-8deg); }
.mascot { width: 64px; height: 179px; position: relative; flex: 0 0 auto; transform-origin: bottom center; }
.mascot img { position: absolute; display: block; pointer-events: none; }
.pencil-body { inset: 0; width: 100%; height: 100%; }
.pencil-eyes { width: 125%; height: auto; left: -12.5%; top: 16.5%; animation: blink 6s infinite; }
.pencil-mouth { width: 100%; height: auto; left: 0; top: 50%; }
.hero-pencil { width: 100px; height: 280px; padding: 0; border: 0; background: transparent; position: absolute; left: calc(50% - 40px); top: 125px; transform: rotate(-12deg); animation: pencil-bob 4s ease-in-out infinite; filter: drop-shadow(8px 10px 6px #584c4720); }
.speech-bubble { position: absolute; top: 45px; left: 27%; background: #fffefb; border: 1px solid #e6ddcf; padding: 17px 25px; border-radius: 22px 22px 22px 3px; font-size: 16px; line-height: 1.45; transform: rotate(-5deg); box-shadow: 0 5px 15px #57413008; z-index: 2; }
.floating-picture { position: absolute; width: 115px; height: 115px; object-fit: contain; filter: drop-shadow(2px 7px 3px #5741300a); }
.goat { left: 2%; top: 170px; transform: rotate(-12deg); }
.apple { right: 7%; top: 125px; width: 90px; height: 90px; transform: rotate(15deg); }
.rocket { right: 0; bottom: 10px; width: 125px; height: 125px; transform: rotate(17deg); }
.doodle { position: absolute; font-size: 36px; color: #dbac40; }
.star-one { right: 10%; top: 50px; transform: rotate(-8deg); }
.star-two { left: 15%; bottom: 20px; font-size: 23px; color: #a796c5; }
.curl { left: 2%; top: 85px; font-size: 50px; color: #8ca479; transform: rotate(50deg); }
.how-it-works { grid-column: 1 / -1; border-top: 1px dashed #ded6c9; border-bottom: 1px dashed #ded6c9; display: flex; align-items: center; justify-content: center; gap: 60px; padding: 26px 15px; margin-top: 30px; }
.how-it-works > div { display: flex; gap: 12px; align-items: center; }
.how-it-works p { font-size: 13px; color: #8d8493; }
.how-it-works b { color: #645e76; }
.step-number { border: 1px solid #d1c3e6; color: #7956bb; border-radius: 50%; width: 35px; height: 35px; display: grid; place-items: center; background: #f1eaf9; font-weight: bold; }
.how-it-works > div:nth-child(2) .step-number { background: #eff3e6; color: #839557; border-color: #d7dfc4; }
.how-it-works > div:nth-child(3) .step-number { background: #fff2d8; color: #b69547; border-color: #ead8b6; }
.footer { max-width: 1200px; margin: 22px auto; display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 11px; color: #a097a7; padding-bottom: env(safe-area-inset-bottom); }
.footer .icon-button { width: 32px; height: 32px; }
.footer svg, .footer .button-art { width: 17px; height: 17px; }
.levels-page { max-width: 1250px; margin: 20px auto 45px; padding: 0 36px; }
.page-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 28px; }
.page-heading h1 { font-size: clamp(25px, 3vw, 36px); margin: 7px 0; letter-spacing: -1px; }
.page-heading p:not(.eyebrow) { font-size: 14px; color: var(--muted); }
.star-counter { display: flex; align-items: center; gap: 6px; border: 1px solid #eadcc4; background: #fff6df; color: #d3a136; border-radius: 18px; padding: 13px 20px; font-size: 24px; white-space: nowrap; }
.star-counter .star-limit { font-size: 13px; color: #a79169; margin-left: 2px; }
.level-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.level-card { position: relative; padding: 13px 13px 0; background: var(--card-color); border: 1px solid #bcae981b; border-radius: 20px; transition: transform .15s, box-shadow .15s; overflow: hidden; }
.level-card:hover:not(:disabled) { transform: translateY(-4px); box-shadow: 0 5px 0 #ad94c2; }
.level-card > img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; border-radius: 10px; }
.level-number { position: absolute; left: 11px; top: 10px; border-radius: 50%; width: 25px; height: 25px; display: grid; place-items: center; background: #ffffffe0; font-size: 10px; font-weight: bold; z-index: 1; }
.level-card-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 3px; padding: 13px 0; font-size: 13px; font-weight: 700; }
.level-card-footer svg, .level-card-footer .button-art { width: 22px; height: 22px; opacity: .6; }
.locked { opacity: .55; }
.locked img { filter: saturate(.4); }
.card-stars { font-size: 14px; color: #c5bbc9; white-space: nowrap; }
.card-stars .earned { color: #c58b27; }
.card-stars { display: inline-flex; align-items: center; gap: 2px; }
.star-art { display: block; width: 18px; height: 18px; object-fit: contain; }
.card-stars span:not(.earned) .star-art, .finish-stars > span:not(.earned) .star-art { filter: grayscale(1); opacity: .35; }
.resume-badge { position: absolute; right: 8px; top: 10px; font-size: 9px; background: #7956bb; color: white; padding: 5px 8px; border-radius: 12px; }
.game-page { height: 100vh; height: 100dvh; max-width: 1600px; margin: auto; display: flex; flex-direction: column; padding: max(10px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); gap: 10px; }
.game-header { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.game-header nav { display: flex; gap: 7px; margin-left: auto; }
.game-heading h1 { font-size: 22px; margin: 0; }
.game-heading > span { font-size: 11px; color: var(--muted); }
.progress-track { height: 8px; width: 150px; border-radius: 8px; background: #e7dece; overflow: hidden; }
.progress-track span { display: block; height: 100%; background: #a8b778; border-radius: inherit; transition: width .3s; }
.game-body { display: flex; gap: 13px; flex: 1 1 auto; min-height: 0; container-type: size; }
.scene-wrap { position: relative; flex: 1; min-width: 0; min-height: 0; border-radius: 20px; background: #f0e7d7; border: 2px solid #e6dbca; box-shadow: inset 0 0 14px #907d4c11; overflow: hidden; display: grid; place-items: center; }
#picture { display: block; max-width: 100%; max-height: 100%; aspect-ratio: auto; object-fit: fill; width: auto; height: 100%; }
.scene-label { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); background: #fffcf0ec; border: 1px solid #e9dec5; color: #94816a; font-size: 11px; padding: 8px 15px; border-radius: 20px; white-space: nowrap; max-width: 95%; overflow: hidden; text-overflow: ellipsis; }
.scene-label.celebrating { color: #6d558d; background: #f1e5ff; border-color: #c8b0e1; }
.scene-loading { position: absolute; inset: 0; display: grid; place-items: center; background: #faf6eef0; color: var(--purple); font-size: 18px; }
/* Grow into the width left by a 1024:720 canvas, capped by space for three square choices. */
.picture-choices { width: 148px; width: clamp(148px, calc(100cqw - 142.222cqh - 9px), clamp(148px, calc(33.333cqh + 12px), 260px)); flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; background: #f1ebdf; border: 1px solid #e5dacc; border-radius: 20px; padding: 8px; }
.picture-choices > p { font-size: 11px; font-weight: bold; color: #84748d; margin: 4px 0 8px; }
.picture-choices { background-image: url("assets/atlases/sidebackground.png"); }
#choices { display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; gap: 8px; width: 100%; flex: 1 1 auto; min-height: 0; container-type: size; }
.picture-choice { position: relative; width: min(100%, 200px, calc((100cqh - 24px) / 3)); min-height: 44px; aspect-ratio: 1; flex: 0 0 auto; background: #fffdf7; border: 2px solid transparent; border-radius: 16px; padding: 7px; box-shadow: 0 3px 0 #dbd2c4; }
.picture-choice.selected { border-color: #aa8cc7; background: #f7f0ff; }
.picture-choice img { height: 100%; width: 100%; object-fit: contain; display: block; }
.choice-check { position: absolute; bottom: -2px; right: -4px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #e9dff5; color: #7956bb; }
.choice-check svg { width: 13px; height: 13px; }
.choice-check .button-art { width: 17px; height: 17px; }
.donek-character { position: absolute; padding: 0; border: none; background: transparent; z-index: 2; transform-origin: 50% 100%; cursor: pointer; touch-action: manipulation; filter: drop-shadow(2px 4px 3px #584c4720); }
.donek-character img { display: block; position: absolute; pointer-events: none; }
.donek-character .pencil-eyes { left: -9.375%; top: 16.201%; animation: none; }
.donek-character .pencil-mouth { top: 50.279%; animation: none; }
.donek-character:focus-visible { outline: 2px dashed var(--purple); outline-offset: 5px; border-radius: 12px; }
.scene-loading { z-index: 3; }
.scene-label { z-index: 3; pointer-events: none; }
.puzzle { flex: 0 0 auto; border: 1px solid #e4daca; background: #fffdf7; padding: 10px 15px 12px; border-radius: 20px; min-height: 180px; }
.word-instructions { display: flex; justify-content: center; align-items: center; gap: 16px; color: var(--muted); font-size: 12px; margin-bottom: 7px; }
.listen-button { border: none; background: #f1eaf8; color: #7956bb; border-radius: 15px; min-height: 36px; display: flex; gap: 6px; align-items: center; padding: 6px 12px; font-size: 11px; font-weight: 700; }
.listen-button svg { width: 15px; height: 15px; }
.listen-button .button-art { width: 18px; height: 18px; }
.word-slots { display: flex; gap: clamp(3px, .5vw, 8px); align-items: center; justify-content: center; margin-bottom: 14px; }
.word-slot { border: 2px dashed #d6c9df; border-radius: 8px; background: #f7f2fc; position: relative; width: min(58px, calc((100vw - 65px) / var(--slots) - 6px)); aspect-ratio: 1; padding: 0; min-width: 16px; }
.word-slot.active-slot { border-color: #9f7fbd; background: #ede2f6; }
.word-slot.filled { border: none; box-shadow: 0 3px 0 #a68faf; opacity: 1; }
.slot-dot { font-size: 12px; color: #c3b6d2; }
.tile-bank { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; max-width: 1000px; margin: auto; }
.letter-tile { position: relative; width: 54px; height: 54px; padding: 0; border: none; border-radius: 7px; box-shadow: 0 4px 0 #c4bda9, 0 6px 8px #6b5b3c0a; touch-action: none; user-select: none; transition: transform .12s, box-shadow .12s; }
.letter-tile:hover { transform: translateY(-3px) rotate(-3deg); box-shadow: 0 7px 0 #c4bda9; }
.letter-tile:active { transform: translateY(2px); box-shadow: 0 2px 0 #c4bda9; }
.tile-art { position: absolute; inset: 0; border-radius: inherit; background-image: url("assets/atlases/spritefont.png"); background-size: 800% 800%; background-repeat: no-repeat; pointer-events: none; }
.dragging { opacity: .3; }
.drag-ghost { position: fixed; z-index: 100; pointer-events: none; transform: translate(-50%, -50%) rotate(-7deg) scale(1.1); box-shadow: 0 8px 20px #41354355; transition: none; }
.drop-target { outline: 3px solid #acb773; outline-offset: 2px; background: #edf4d5; }
.wrong { animation: shake .35s; }
.choose-prompt { text-align: center; color: #9784a9; padding: 20px 15px; font-size: 15px; }
dialog { border: 1px solid #e0d4c4; border-radius: 28px; background: #fffcf6; color: var(--ink); padding: 28px 35px; max-width: min(500px, calc(100vw - 28px)); max-height: calc(100dvh - 28px); overflow: auto; box-shadow: 0 20px 80px #49395430; text-align: center; }
dialog::backdrop { background: #40374968; backdrop-filter: blur(4px); }
.dialog-top { display: flex; justify-content: flex-end; margin: -12px -14px 0 0; }
.dialog-heading h2 { font-size: 29px; letter-spacing: -1px; margin: 12px 0; }
.dialog-heading p { color: var(--muted); line-height: 1.6; font-size: 14px; }
.dialog-actions { display: flex; flex-direction: column; gap: 16px; margin: 25px auto 0; max-width: 320px; }
.finish-stars { display: flex; justify-content: center; gap: 10px; padding: 10px 0; font-size: 65px; color: #e2d9c8; }
.finish-stars .earned { color: #e6b042; text-shadow: 0 4px 0 #c58b22; }
.finish-stars .star-art { width: clamp(52px, 18vw, 72px); height: clamp(52px, 18vw, 72px); }
.credits-logo { display: block; width: 170px; max-width: 100%; height: auto; margin: 0 auto 12px; }
.help-steps { text-align: left; padding-left: 25px; line-height: 1.65; font-size: 14px; color: #797080; }
.help-steps li { padding-left: 5px; margin: 15px 0; }
.small-note { font-size: 11px; color: #968a9c; line-height: 1.65; }
.credits { display: grid; grid-template-columns: 1fr 1.3fr; gap: 15px; text-align: left; margin: 25px 0; font-size: 12px; line-height: 1.6; }
.credits dt { color: #9b8ca2; }
.credits dd { margin: 0; }
.credits a { color: #7956bb; }
dialog[data-kind="credits"] { width: 500px; }
.credits { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.credits dd { min-width: 0; }
.credit-name { display: block; }
.credit-link { display: block; max-width: 100%; min-height: 44px; margin-top: 2px; padding: 6px 0; border: 0; border-radius: 4px; background: transparent; color: var(--purple); font: inherit; line-height: 1.5; text-align: left; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 480px) {
  .credits { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .credits dd { margin-bottom: 12px; }
}
.music-credits { text-align: left; color: #9b8ca2; font-size: 11px; margin-bottom: 20px; }
.music-credits p { line-height: 1.7; }
#toast { position: fixed; top: max(8px, env(safe-area-inset-top)); left: 50%; transform: translate(-50%, -15px); padding: 13px 20px; background: #44374bef; color: #fff; border-radius: 18px; z-index: 120; opacity: 0; transition: opacity .15s, transform .15s; pointer-events: none; max-width: min(500px, calc(100vw - 25px)); font-size: 13px; text-align: center; }
#toast.visible { transform: translate(-50%, 0); opacity: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.boot-error { display: grid; place-content: center; min-height: 100dvh; text-align: center; padding: 30px; }
.boot-logo { width: 84px; height: auto; justify-self: center; }
@keyframes pencil-bob { 50% { transform: rotate(-9deg) translateY(-10px); } }
@keyframes blink { 0%, 45%, 48%, 100% { transform: scaleY(1); } 46% { transform: scaleY(.1); } }
@keyframes shake { 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
@media (min-aspect-ratio: 2/1) { #picture { width: 100%; height: auto; } }
@media (max-width: 1050px) { .home { margin-top: 5px; gap: 10px; } .hero-copy h1 { font-size: 43px; } .hero-art { min-height: 400px; } .hero-description { font-size: 15px; } .level-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .how-it-works { gap: 25px; } .tile-bank { gap: 7px; } }
@media (max-width: 680px) {
  .header { padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) 15px max(18px, env(safe-area-inset-left)); gap: 10px; }
  .brand-word { font-size: 28px; } .brand-sub { font-size: 9px; letter-spacing: 2.8px; } .header nav { gap: 6px; } .header nav .icon-button { width: 37px; height: 37px; } .header nav .icon-button[data-action="fullscreen"] { display: none; }
  .home { padding: 0 23px; grid-template-columns: 1fr; } .hero-copy { text-align: center; } .hero-copy .eyebrow { font-size: 10px; margin: 10px 0; } .hero-copy h1 { font-size: 39px; margin: 13px 0 20px; } .hero-description { font-size: 14px; margin: 12px 0; }
  .hero-actions { justify-content: center; margin: 23px 0; } .home-facts { justify-content: center; gap: 25px; margin: 24px 0 0; } .hero-art { min-height: 290px; max-width: 350px; width: 100%; margin: 15px auto 0; } .art-orbit { width: 260px; height: 250px; left: calc(50% - 130px); top: 15px; }
  .hero-pencil { width: 67px; height: 187px; top: 90px; left: calc(50% - 27px); } .speech-bubble { top: 15px; left: 30%; font-size: 12px; padding: 12px 20px; } .floating-picture { width: 85px; height: 85px; } .goat { left: 0; top: 120px; } .apple { right: 0; top: 85px; width: 65px; height: 65px; } .rocket { width: 87px; height: 87px; bottom: 0; right: 0; } .star-one { right: 5%; top: 5px; font-size: 26px; } .curl { top: 30px; left: 0; font-size: 35px; }
  .how-it-works { gap: 8px; margin-top: 16px; padding: 15px 0; } .how-it-works > div { flex-direction: column; gap: 1px; flex: 1; text-align: center; } .how-it-works p { font-size: 10px; line-height: 1.5; } .how-it-works b { display: block; } .step-number { width: 28px; height: 28px; font-size: 12px; } .footer { font-size: 9px; gap: 8px; }
  .levels-page { padding: 0 18px; margin-top: 5px; } .page-heading { margin-bottom: 18px; } .page-heading h1 { font-size: 23px; } .page-heading p:not(.eyebrow) { font-size: 11px; } .star-counter { font-size: 18px; padding: 10px; } .star-counter .star-limit { display: none; }
  .level-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .level-card { padding: 8px 8px 0; border-radius: 15px; } .level-card-footer { padding: 9px 0; font-size: 11px; gap: 4px; } .card-stars { font-size: 11px; } .level-number { width: 20px; height: 20px; font-size: 9px; left: 6px; top: 6px; }
  .game-page { padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); gap: 8px; } .game-heading h1 { font-size: 18px; } .game-heading > span { font-size: 10px; } .game-header { gap: 8px; } .game-header nav { gap: 5px; } .game-header .icon-button { width: 38px; height: 38px; } .progress-track { display: none; }
  .game-body { flex-direction: column; gap: 8px; } .scene-wrap { border-radius: 16px; } #picture { width: 100%; height: auto; } .scene-label { font-size: 9px; padding: 5px 10px; bottom: 5px; }
  .picture-choices { flex-direction: row; width: 100%; height: 83px; padding: 6px 9px; border-radius: 15px; gap: 8px; } .picture-choices > p { width: 65px; line-height: 1.5; font-size: 10px; margin: 0; } #choices { flex-direction: row; justify-content: center; gap: 8px; } .picture-choice { max-width: 68px; width: 68px; height: 68px; flex: 0 1 68px; padding: 5px; border-radius: 12px; } .choice-check { width: 20px; height: 20px; }
  .puzzle { padding: 8px 7px 10px; min-height: 220px; border-radius: 16px; } .word-instructions { font-size: 11px; margin-bottom: 8px; } .word-slots { gap: 4px; margin-bottom: 12px; } .word-slot { width: min(49px, calc((100vw - 40px) / var(--slots) - 5px)); } .tile-bank { gap: 8px; max-width: 365px; } .letter-tile { width: 47px; height: 47px; } dialog { padding: 23px; } .dialog-heading h2 { font-size: 26px; }
}
@media (max-height: 650px) and (min-width: 681px) {
  .game-page { gap: 6px; padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: max(6px, env(safe-area-inset-bottom)); } .game-header .icon-button { width: 36px; height: 36px; } .game-heading h1 { font-size: 17px; } .puzzle { min-height: 127px; padding: 5px 10px 8px; } .word-instructions { font-size: 10px; margin-bottom: 4px; } .listen-button { min-height: 28px; } .word-slots { margin-bottom: 7px; } .word-slot { width: 38px; } .letter-tile { width: 43px; height: 43px; } .picture-choices { width: 105px; width: clamp(105px, calc(100cqw - 142.222cqh - 9px), clamp(105px, calc(33.333cqh + 12px), 180px)); padding: 5px; } .picture-choices > p { font-size: 9px; margin: 0 0 5px; } .picture-choice { width: min(100%, 96px, calc((100cqh - 21px) / 3)); min-height: 0; padding: 3px; border-radius: 10px; }  #choices { gap: 7px; } .scene-label { font-size: 9px; padding: 5px 10px; bottom: 5px; }
}
@media (max-height: 630px) and (max-width: 680px) { .puzzle { min-height: 195px; } .letter-tile { width: 44px; height: 44px; } .picture-choices { height: 65px; } .picture-choice { width: 52px; height: 52px; flex-basis: 52px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* A bright, touchable welcome for little readers, built from the original crayon artwork. */
.home-screen { position: relative; isolation: isolate; min-height: 100dvh; overflow: clip; background: radial-gradient(ellipse at 0 20%, #ffd9dc 0, transparent 42%), radial-gradient(ellipse at 100% 45%, #c3edf0 0, transparent 48%), linear-gradient(145deg, #fff4dc, #fff8ed 48%, #e7edff); }
.home-screen::before, .home-screen::after { content: ""; position: absolute; z-index: -1; width: 260px; height: 260px; border: 20px solid #ffffff50; border-radius: 50%; pointer-events: none; }
.home-screen::before { top: -140px; right: 15%; } .home-screen::after { bottom: -160px; left: 8%; }
.home-screen .header { max-width: 1280px; padding: 22px 28px 12px; }
.home-screen .brand-word { font-size: 43px; text-shadow: 0 3px 0 #fff; }
.home-screen .brand-word span { color: hsl(calc(var(--letter) * 49 + 280), 65%, 47%); }
.home-screen .brand-sub { font-size: 12px; letter-spacing: 3px; color: #67557e; }
.home-screen .header nav { gap: 10px; }
.home-screen .icon-button { width: 50px; height: 50px; border: 2px solid #fff; box-shadow: 0 4px 0 #bf9dac45; background: #f8dce9; }
.home-screen .icon-button:nth-child(2) { background: #d8f1df; } .home-screen .icon-button:nth-child(3) { background: #fff0bc; } .home-screen .icon-button:nth-child(4) { background: #e8defc; }
.home-screen .home { max-width: 1240px; margin: 12px auto 0; padding: 0 28px; grid-template-columns: .95fr 1.05fr; gap: 22px 36px; }
.home-screen .hero-copy { padding: 12px 0 10px 12px; }
.welcome-tag { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; margin: 0; border: 2px solid #fff; border-radius: 24px; color: #84506d; background: #ffe4e8; font-size: 17px; font-weight: 700; rotate: -2deg; }
.welcome-tag .star-art { width: 24px; height: 24px; }
.home-screen .hero-copy h1 { font-size: clamp(48px, 5.6vw, 72px); line-height: 1.06; letter-spacing: -2px; margin: 18px 0; color: #7149a7; text-shadow: 0 4px 0 #fff; }
.home-screen .hero-copy h1 span { color: #d45372; }
.home-screen .hero-copy h1 span::after { bottom: -9px; border: 0; height: 8px; background: linear-gradient(90deg, #ef9ebd 0 33%, #ffcf61 33% 66%, #8bd5cc 66%); border-radius: 8px; rotate: -2deg; }
.home-screen .hero-description { font-size: 22px; line-height: 1.4; font-weight: 700; color: #6d5a81; margin: 24px 0 0; }
.home-screen .hero-actions { flex-direction: column; align-items: flex-start; gap: 15px; margin: 24px 0 18px; }
.home-screen .home-start { min-height: 82px; padding: 12px 30px 12px 18px; gap: 15px; border: 3px solid #fff2b9; border-radius: 26px; background: linear-gradient(#ffe58a, #ffd05a); color: #65407e; box-shadow: 0 8px 0 #dfa635, 0 12px 24px #dda64c25; font-size: 29px; font-weight: 900; }
.home-screen .home-start:hover { background: linear-gradient(#ffedb4, #ffdc77); }
.home-screen .home-start:active { box-shadow: 0 3px 0 #dfa635; }
.start-icon { display: grid; place-items: center; width: 48px; height: 48px; border: 2px solid #fff; border-radius: 50%; background: #fffbe2; }
.start-icon .button-art { width: 35px; height: 35px; animation: home-play 3s ease-in-out infinite; }
.home-screen .home-resume { min-height: 52px; padding: 10px 18px; border: 2px solid #fff; border-radius: 19px; background: #e4dcff; color: #65458a; box-shadow: 0 4px 0 #c0aadf; font-size: 17px; }
.home-screen .home-resume .button-art { transform: none; }
.home-rewards { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; color: #8b6946; }
.home-rewards .star-art { width: 34px; height: 34px; rotate: -8deg; }
.home-screen .hero-art { min-height: 0; height: clamp(400px, 53dvh, 520px); width: 100%; }
.home-screen .art-orbit { inset: 13% 5% 5%; width: auto; height: auto; border: 4px solid #fff9d6; border-radius: 45% 51% 44% 49%; background: #fff0a9 url("assets/textures/colorstripeslight.jpg") center / cover; background-blend-mode: soft-light; box-shadow: 0 9px 0 #e6bd7050; transform: rotate(-5deg); }
.home-screen .hero-pencil { width: 96px; height: 269px; top: 25%; left: calc(50% - 48px); z-index: 3; }
.home-screen .speech-bubble { top: 0; left: 24%; padding: 13px 17px; border: 3px solid #dfb6dc; border-radius: 25px 25px 25px 5px; background: #fff9fd; color: #785094; box-shadow: 0 5px 0 #d6b6d150; transform: rotate(-3deg); font-size: 19px; font-weight: 900; line-height: 1.25; z-index: 5; }
.home-screen .speech-bubble span { display: block; font-size: 15px; font-weight: 700; margin-top: 4px; color: #a16885; }
.home-toy { position: absolute; z-index: 2; border: 0; cursor: pointer; animation: home-float 5s ease-in-out infinite; }
.home-toy:is(:hover, :focus-visible) { animation-play-state: paused; }
.home-picture { width: 126px; height: 126px; padding: 9px; border: 3px solid #fff; border-radius: 25px; box-shadow: 0 5px 0 #a88bb340, 0 8px 15px #78524e10; }
.home-picture img { display: block; width: 100%; height: 80%; object-fit: contain; pointer-events: none; }
.home-picture > span { display: block; font-size: 16px; font-weight: 900; line-height: 1.2; color: #69557c; }
.home-goat { left: 0; top: 42%; background: #d7f0d7; transform: rotate(-10deg); animation-delay: -.7s; }
.home-apple { right: 0; top: 19%; width: 112px; height: 112px; background: #ffddd7; transform: rotate(9deg); animation-delay: -2.3s; }
.home-rocket { right: 3%; bottom: 7%; background: #dce9fc; transform: rotate(7deg); animation-delay: -3.2s; }
.home-letter { width: 70px; height: 70px; padding: 0; border-radius: 10px; background: transparent; box-shadow: 0 5px 0 #8d6b8a55, 0 8px 12px #6b534920; }
.home-letter-0 { left: 8%; top: 14%; transform: rotate(-13deg); animation-delay: -1.4s; }
.home-letter-1 { left: 21%; bottom: 6%; transform: rotate(10deg); animation-delay: -3.8s; }
.home-letter-2 { right: 18%; top: 48%; transform: rotate(-7deg); animation-delay: -2.6s; }
.home-cloud { position: absolute; z-index: 0; width: 90px; height: 32px; background: #ffffffe0; border-radius: 40px; animation: home-cloud 8s ease-in-out infinite; }
.home-cloud::before, .home-cloud::after { content: ""; position: absolute; background: inherit; border-radius: 50%; }
.home-cloud::before { width: 40px; height: 40px; left: 14px; top: -19px; } .home-cloud::after { width: 48px; height: 48px; right: 12px; top: -23px; }
.cloud-one { left: 3%; top: 5%; } .cloud-two { right: 1%; top: 7%; scale: .8; animation-delay: -3s; }
.home-rainbow { position: absolute; right: 2%; top: -6%; width: 118px; height: 72px; border-radius: 100% 100% 0 0 / 100% 100% 0 0; opacity: .8; rotate: 8deg; background: radial-gradient(ellipse at 50% 100%, transparent 39%, #8ed4d8 40% 49%, #a9d88b 50% 59%, #ffd062 60% 69%, #f794a2 70% 79%, #c0a2e7 80% 89%, transparent 90%); }
.home-spark { position: absolute; z-index: 1; animation: home-star 4s ease-in-out infinite; }
.home-spark .star-art { width: 31px; height: 31px; }
.spark-one { left: 2%; bottom: 9%; } .spark-two { right: 27%; top: 22%; animation-delay: -1s; } .spark-three { right: 28%; bottom: 1%; animation-delay: -2.5s; }
.toy-hint { position: absolute; bottom: -15px; left: 50%; translate: -50% 0; margin: 0; white-space: nowrap; padding: 6px 12px; background: #fff8e7; border: 2px solid #fff; border-radius: 18px; color: #796290; font-size: 15px; font-weight: 700; }
.toy-cheer > img, .toy-cheer > .tile-art { animation: home-cheer .55s ease-in-out; }
.toy-cheer::after { content: ""; position: absolute; right: -10px; top: -14px; width: 32px; height: 32px; background: url("assets/ui/star-0.png") center / contain no-repeat; pointer-events: none; animation: home-pop .6s ease-out both; }
.home-screen .how-it-works { gap: 16px; border: 0; border-top: 1px dashed #d8c9d8; padding: 12px 0 0; margin-top: 18px; }
.home-screen .how-it-works > div { position: relative; flex: 1; justify-content: center; gap: 13px; min-height: 105px; padding: 14px 18px; border: 0; border-radius: 0; background: transparent; box-shadow: none; rotate: none; cursor: default; }
.home-screen .how-it-works p { margin: 0; font-size: 18px; line-height: 1.35; font-weight: 700; color: #76586e; }
.home-screen .how-it-works b { color: #67497d; }
.home-screen .how-it-works .step-number { position: static; flex: 0 0 auto; width: auto; height: auto; border: 0; border-radius: 0; background: transparent; color: #8d749d; font-size: 17px; }
.step-picture { width: 60px; height: 65px; object-fit: contain; }
.step-block { position: relative; display: block; width: 53px; height: 53px; border-radius: 8px; rotate: -8deg; }
.home-screen .footer { justify-content: space-between; max-width: 1240px; margin: 24px auto 0; padding: 0 28px max(20px, env(safe-area-inset-bottom)); font-size: 13px; color: #907490; }
.home-help { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; border: 2px solid #fff; padding: 7px 14px; border-radius: 18px; color: #7b5a93; background: #ffffff90; font-size: 15px; font-weight: 700; }
@keyframes home-float { 50% { translate: 0 -9px; } }
@keyframes home-cloud { 50% { translate: 10px 0; } }
@keyframes home-star { 50% { rotate: 15deg; scale: 1.18; } }
/* Alternate the original drawings like a small hand-drawn flipbook. */
.drawn-star { --star-cycle: .9s; display: inline-grid; flex: 0 0 auto; width: clamp(18px, 3.2dvh, 24px); height: clamp(18px, 3.2dvh, 24px); vertical-align: middle; pointer-events: none; }
.home-screen .home-rewards .drawn-star { width: clamp(18px, 4dvh, 34px); height: clamp(18px, 4dvh, 34px); }
.home-screen .home-spark .drawn-star { width: 31px; height: 31px; }
.drawn-star > .star-art { grid-area: 1 / 1; width: 100%; height: 100%; opacity: 0; animation: drawn-star-frame var(--star-cycle) step-end infinite; animation-delay: calc(var(--frame) * var(--star-cycle) / -3); }
.drawn-star > .star-art:first-child { opacity: 1; }
:root[data-quality="low"] .drawn-star { --star-cycle: 1.5s; }
@media (max-width: 680px), (max-height: 600px) {
  .home-screen .home-rewards .drawn-star { width: 18px; height: 18px; }
}
.home-screen:has(.hero-art[data-paused="true"]) .drawn-star > .star-art,
.home-screen:has(.hero-art[data-paused="true"]) .drawn-icon > .icon-frame,
.hero-art[data-paused="true"] .home-spark { animation-play-state: paused; }
@keyframes drawn-star-frame {
  0%, 33.332% { opacity: 1; }
  33.333%, 100% { opacity: 0; }
}
@keyframes home-play { 75% { translate: 0 0; } 85% { translate: 5px 0; } 95% { translate: 0 0; } }
@keyframes home-cheer { 30% { rotate: -8deg; scale: 1.12; } 70% { rotate: 7deg; scale: 1.06; } }
@keyframes home-pop { from { opacity: 1; translate: 0 5px; scale: .5; } to { opacity: 0; translate: 0 -25px; scale: 1.1; } }
@media (max-width: 760px) {
  .home-screen .header { padding: 15px 16px 8px; gap: 10px; }
  .home-screen .brand-word { font-size: 33px; } .home-screen .brand-sub { font-size: 10px; letter-spacing: 2.2px; }
  .home-screen .header nav { gap: 6px; } .home-screen .header .icon-button { width: 44px; height: 44px; }
  .home-screen .home { grid-template-columns: 1fr; padding: 0 18px; margin-top: 7px; gap: 24px; }
  .home-screen .hero-copy { padding: 0; text-align: center; }
  .welcome-tag { font-size: 15px; padding: 5px 10px; }
  .home-screen .hero-copy h1 { font-size: clamp(39px, 10vw, 52px); margin: 14px 0 19px; }
  .home-screen .hero-description { font-size: 18px; margin-top: 16px; }
  .home-screen .hero-actions { align-items: center; margin: 19px 0 14px; }
  .home-screen .home-start { min-height: 72px; font-size: 25px; padding: 9px 23px 9px 12px; border-radius: 24px; }
  .start-icon { width: 44px; height: 44px; } .start-icon .button-art { width: 31px; height: 31px; }
  .home-rewards { justify-content: center; font-size: 15px; }
  .home-screen .hero-art { max-width: 400px; height: 340px; margin: 4px auto 0; }
  .home-screen .hero-pencil { width: 82px; height: 229px; top: 22%; left: calc(50% - 41px); }
  .home-screen .speech-bubble { font-size: 16px; left: 24%; padding: 10px 12px; }
  .home-screen .speech-bubble span { font-size: 13px; }
  .home-picture { width: 106px; height: 106px; padding: 7px; border-radius: 22px; }
  .home-picture > span { font-size: 14px; }
  .home-apple { width: 94px; height: 94px; }
  .home-letter { width: 58px; height: 58px; border-radius: 8px; }
  .home-letter-2 { right: 17%; top: 48%; }
  .home-screen .how-it-works { gap: 9px; margin-top: 16px; }
  .home-screen .how-it-works > div { flex-direction: column; min-width: 0; gap: 5px; padding: 16px 6px 11px; min-height: 130px; border-radius: 20px; }
  .home-screen .how-it-works p { font-size: 14px; line-height: 1.25; }
  .step-picture { width: 45px; height: 48px; } .step-block { width: 40px; height: 40px; }
  .home-screen .footer { margin: 18px 18px 0; padding-inline: 0; gap: 8px; font-size: 11px; }
  .home-help { font-size: 13px; padding: 6px 9px; gap: 5px; } .home-help .button-art { width: 22px; height: 22px; }
}
@media (max-width: 350px) {
  .home-screen .header { padding: 12px 10px 7px; gap: 7px; }
  .home-screen .brand-word { font-size: 27px; } .home-screen .brand-sub { font-size: 9px; letter-spacing: 1.6px; }
  .home-screen .header .icon-button { width: 44px; height: 44px; } .home-screen .header nav { gap: 5px; }
  .home-screen .home { padding: 0 12px; } .home-screen .home-start { font-size: 23px; gap: 10px; padding-right: 17px; }
  .home-screen .hero-description { font-size: 16px; } .home-rewards { font-size: 14px; }
  .home-screen .hero-art { height: 300px; }
  .home-screen .hero-pencil { width: 72px; height: 201px; left: calc(50% - 36px); top: 23%; }
  .home-screen .speech-bubble { font-size: 14px; left: 22%; padding: 8px 9px; }
  .home-picture { width: 90px; height: 90px; padding: 5px; } .home-picture > span { font-size: 13px; }
  .home-apple { width: 78px; height: 78px; } .home-letter { width: 50px; height: 50px; }
  .home-letter-0 { left: 3%; } .home-letter-1 { left: 16%; } .home-letter-2 { right: 12%; }
  .home-screen .how-it-works > div { padding-inline: 4px; } .home-screen .how-it-works p { font-size: 12px; }
  .home-screen .footer { margin-inline: 12px; flex-wrap: wrap; justify-content: center; }
}
@media (max-height: 500px) and (min-width: 560px) {
  .home-screen .header { padding-top: 10px; padding-bottom: 6px; }
  .home-screen .home { grid-template-columns: 1fr 1fr; gap: 14px 20px; margin-top: 5px; }
  .home-screen .hero-copy { text-align: left; }
  .home-screen .hero-copy h1 { font-size: 40px; margin: 10px 0; }
  .home-screen .hero-description { font-size: 17px; margin-top: 14px; }
  .welcome-tag { font-size: 13px; padding: 4px 8px; } .welcome-tag .star-art { width: 20px; height: 20px; }
  .home-screen .hero-actions { align-items: flex-start; margin: 14px 0 12px; }
  .home-screen .home-start { min-height: 65px; font-size: 23px; padding: 8px 15px; gap: 10px; }
  .home-rewards { justify-content: flex-start; font-size: 13px; }
  .home-screen .hero-art { height: clamp(210px, 65dvh, 285px); align-self: start; }
  .home-screen .hero-pencil { --pencil-width: clamp(60px, 18dvh, 72px); width: var(--pencil-width); height: calc(var(--pencil-width) * 179 / 64); top: 15%; left: calc(50% - var(--pencil-width) / 2); }
  .home-screen .speech-bubble { font-size: 14px; padding: 8px 10px; }
  .home-picture { width: 88px; height: 88px; padding: 5px; } .home-picture > span { font-size: 13px; }
  .home-apple { width: 78px; height: 78px; } .home-letter { width: 50px; height: 50px; }
  .home-screen .how-it-works { margin-top: 12px; }
}

/* Reserve space for the header, instructions and footer; the artwork takes the remaining height. */
.home-screen { height: 100dvh; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px; }
.home-screen .header { width: 100%; margin: 0 auto; padding-top: max(6px, 2dvh, env(safe-area-inset-top)); padding-bottom: 4px; }
.home-screen .home { width: 100%; height: 100%; min-height: 0; margin: 0 auto; grid-template-rows: minmax(0, 1fr) auto; gap: 12px 28px; }
.home-screen .hero-copy { min-width: 0; padding: 0; }
.home-screen .hero-copy h1 { font-size: clamp(28px, min(5.6vw, 8dvh), 72px); margin: clamp(6px, 1.5dvh, 18px) 0; }
.home-screen .hero-description { font-size: clamp(14px, 2.6dvh, 22px); margin-top: clamp(6px, 2dvh, 24px); }
.home-screen .hero-actions { gap: clamp(6px, 1.8dvh, 15px); margin: clamp(8px, 2dvh, 24px) 0 clamp(6px, 1.5dvh, 18px); }
.home-screen .home-start { min-height: clamp(48px, 8dvh, 82px); font-size: clamp(18px, 3.5dvh, 29px); padding: 6px 16px; }
.home-screen .start-icon { width: clamp(26px, 6dvh, 48px); height: clamp(26px, 6dvh, 48px); }
.home-screen .start-icon .button-art { width: 70%; height: 70%; }
.home-screen .home-resume { min-height: 44px; padding: 6px 12px; font-size: clamp(12px, 2dvh, 17px); background: #ffffffb0; box-shadow: none; }
.home-screen .home-rewards { font-size: clamp(12px, 2dvh, 17px); }
.home-screen .home-rewards .star-art { width: clamp(18px, 4dvh, 34px); height: clamp(18px, 4dvh, 34px); }
.home-screen .hero-art { height: 100%; min-height: 0; max-width: none; margin: 0; align-self: stretch; container-type: size; pointer-events: none; }
.home-screen .hero-art button { pointer-events: auto; }
.home-screen .art-orbit, .home-screen .home-cloud, .home-screen .home-rainbow, .home-screen .home-spark, .home-screen .speech-bubble, .home-screen .toy-hint { pointer-events: none; }
.home-screen .home-rainbow { display: none; }
.home-screen .hero-pencil { --pencil-width: max(44px, min(96px, 25cqw, 23cqh)); width: var(--pencil-width); height: calc(var(--pencil-width) * 179 / 64); left: calc(50% - var(--pencil-width) / 2); top: 20%; }
.home-screen .home-toy { animation: none; }
.home-screen .home-picture { --toy-size: clamp(48px, min(18cqw, 23cqh), 90px); width: var(--toy-size); height: var(--toy-size); padding: 2px; border-radius: 50%; overflow: hidden; background: #fff7e9; border: 2px solid #ffffffc0; box-shadow: 0 3px 10px #9c77952b; will-change: transform; }
.home-screen .home-picture img { height: 100%; object-fit: cover; border-radius: 50%; mask-image: radial-gradient(circle closest-side, #000 78%, #0000 100%); transition: opacity .28s ease, transform .28s ease, filter .28s ease; }
.home-screen .picture-changing img { opacity: 0; transform: scale(.82); filter: blur(2px); }
.home-screen .home-letter { --letter-size: clamp(48px, min(14cqw, 20cqh), 60px); width: var(--letter-size); height: var(--letter-size); box-shadow: 0 3px 0 #8d6b8a30; }
.home-screen .home-letter-0 { left: 5%; top: 0; }
.home-screen .home-letter-1 { left: auto; right: 5%; bottom: auto; top: 0; }
.home-screen .hero-art[data-compact="true"] .home-letter { display: none; }
.home-screen .hero-art[data-compact="true"] .speech-bubble { display: none; }
.home-screen .speech-bubble { left: 50%; translate: -50% 0; max-width: calc(100% - 112px); padding: 6px 9px; font-size: clamp(12px, 4cqw, 19px); }
.home-screen .speech-bubble span { font-size: clamp(11px, 3cqw, 15px); }
.home-screen .toy-hint { bottom: 0; }
.home-screen .how-it-works { margin: 0; gap: 9px; }
.home-screen .how-it-works > div { min-height: clamp(48px, 11dvh, 105px); min-width: 0; flex-direction: row; gap: 6px; padding: 6px; }
.home-screen .how-it-works p { font-size: clamp(10px, 2dvh, 18px); }
.home-screen .step-number { width: clamp(18px, 4dvh, 30px); height: clamp(18px, 4dvh, 30px); font-size: clamp(12px, 2dvh, 17px); top: -8px; left: 4px; }
.home-screen .step-picture { width: clamp(24px, 6dvh, 60px); height: clamp(28px, 6.5dvh, 65px); }
.home-screen .step-block { width: clamp(24px, 6dvh, 53px); height: clamp(24px, 6dvh, 53px); }
.home-screen .footer { width: 100%; margin: 0 auto; min-height: 48px; padding: 0 28px max(4px, env(safe-area-inset-bottom)); font-size: clamp(9px, 1.6dvh, 13px); }
.home-screen .home-help { min-height: 44px; }
.home-screen .footer-info { min-width: 0; display: flex; align-items: center; gap: 12px; }
.home-screen .footer-info > span, .home-screen .footer-credits { white-space: nowrap; }
.home-screen .footer-info .home-rewards { flex: 0 0 auto; white-space: nowrap; }
.home-screen .app-version { flex: none; margin-left: auto; color: #65596d; font-size: 10px; line-height: 1.4; font-variant-numeric: tabular-nums; white-space: nowrap; }
.home-screen .footer-info .home-rewards { display: none; }

@media (orientation: portrait) and (max-width: 760px) {
  .home-screen { gap: 6px; }
  .home-screen .header { padding: max(6px, 1dvh, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 4px max(12px, env(safe-area-inset-left)); }
  .home-screen .home { gap: 6px; padding: 0 12px; grid-template-rows: auto auto minmax(0, 1fr) auto auto auto; }
  .home-screen .hero-copy { display: contents; }
  .home-screen .welcome-tag { display: none; }
  .home-screen .hero-copy h1 { grid-row: 1; text-align: center; font-size: clamp(23px, 7.5vw, 36px); margin: 0 0 8px; letter-spacing: -1px; }
  .home-screen .hero-copy h1 br { display: none; }
  .home-screen .hero-description { grid-row: 2; text-align: center; font-size: clamp(14px, 2dvh, 18px); margin: 0; }
  .home-screen .hero-art { grid-row: 3; max-width: 400px; margin: 0 auto; }
  .home-screen .hero-actions { grid-row: 4; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; margin: 0; gap: 6px; }
  .home-screen .home-start { font-size: clamp(16px, 5vw, 23px); padding: 4px 6px; gap: 5px; }
  .home-screen .home-resume { padding: 4px 5px; font-size: clamp(11px, 3.4vw, 14px); gap: 4px; }
  .home-screen .home-resume .button-art { width: 20px; height: 20px; }
  .home-screen .home-rewards { grid-row: 5; justify-content: center; margin-top: 10px; font-size: clamp(12px, 1.8dvh, 15px); }
  .home-screen .home-rewards .star-art { width: 18px; height: 18px; }
  .home-screen .how-it-works { grid-row: 6; margin-top: 4px; }
  .home-screen .how-it-works > div { min-height: clamp(48px, 9dvh, 76px); padding: 4px; gap: 4px; }
  .home-screen .how-it-works p { font-size: clamp(10px, 1.6dvh, 13px); }
  .home-screen .step-picture, .home-screen .step-block { width: 24px; height: 28px; }
  .home-screen .hero-pencil { --pencil-width: max(44px, min(82px, 17cqw, 22cqh)); top: 22%; }
  .home-screen .home-picture { --toy-size: clamp(48px, min(16cqw, 22cqh), 64px); }
  .home-screen .home-letter { --letter-size: clamp(48px, min(14cqw, 20cqh), 56px); }
  .home-screen .home-cloud, .home-screen .home-rainbow, .home-screen .toy-hint { display: none; }
  .home-screen .footer { padding-inline: 12px; gap: 6px; flex-wrap: nowrap; }
  .home-screen .home-help { padding: 4px 6px; font-size: 12px; }
}

@media (orientation: landscape) and (max-height: 600px) {
  .home-screen { gap: 4px; }
  .home-screen .header { padding-top: max(4px, env(safe-area-inset-top)); padding-bottom: 0; }
  .home-screen .brand-word { font-size: 27px; }
  .home-screen .brand-sub { font-size: 9px; }
  .home-screen .header .icon-button { width: 44px; height: 44px; }
  .home-screen .home { gap: 10px 20px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .home-screen .hero-copy { display: grid; gap: 4px; text-align: left; align-content: center; }
  .home-screen .welcome-tag { justify-self: start; font-size: 12px; padding: 2px 6px; }
  .home-screen .welcome-tag .star-art { width: 18px; height: 18px; }
  .home-screen .hero-copy h1 { font-size: clamp(23px, 4vw, 32px); margin: 0 0 6px; letter-spacing: -1px; }
  .home-screen .hero-copy h1 br { display: none; }
  .home-screen .hero-description { font-size: 14px; margin: 0; }
  .home-screen .hero-actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; margin: 0; gap: 6px; }
  .home-screen .home-start { min-height: 48px; font-size: 17px; padding: 4px 6px; gap: 5px; }
  .home-screen .start-icon { width: 26px; height: 26px; }
  .home-screen .home-resume { font-size: 12px; padding: 4px; gap: 3px; }
  .home-screen .home-resume .button-art { width: 20px; height: 20px; }
  .home-screen .hero-copy > .home-rewards { display: none; }
  .home-screen .footer-info .home-rewards { display: flex; font-size: 13px; justify-content: flex-start; margin: 0; }
  .home-screen .home-rewards .star-art { width: 18px; height: 18px; }
  .home-screen .hero-pencil { top: 15%; }
  .home-screen .hero-art .home-cloud, .home-screen .hero-art .home-rainbow, .home-screen .toy-hint { display: none; }
  .home-screen .how-it-works > div { min-height: 48px; }
  .home-screen .footer { min-height: 44px; padding-bottom: max(0px, env(safe-area-inset-bottom)); }
}

@media (orientation: landscape) and (max-height: 350px) {
  .home-screen .welcome-tag, .home-screen .hero-description { display: none; }
}
@media (orientation: landscape) and (max-height: 300px) {
  .home-screen .how-it-works { display: none; }
  .home-screen .home { grid-template-rows: minmax(0, 1fr); }
}

/* A crayon world around the live toys; decorative layers never intercept a tap. */
.home-screen {
  background: linear-gradient(180deg, #fffdf224, #fffdf28c 35%, #fffdf275 68%, #fffdf218),
    url("assets/ui/home-world-v1.webp") center / cover no-repeat, #fff9e9;
}
.home-screen::before, .home-screen::after { display: none; }
.home-screen .welcome-tag { background: #fff4cb; border-color: #fffcf1; color: #866138; }
.home-screen .hero-copy .home-title {
  --title-size: clamp(28px, min(6.4vw, 8.5dvh), 64px);
  max-width: 100%;
  font-size: clamp(24px, min(4.8vw, 6.4dvh), 44px);
  line-height: 1.05;
  letter-spacing: -.8px;
  color: #72249c;
  text-shadow: 0 2px 0 #fff9;
}
.home-screen .hero-copy .home-title span::after { content: none; }
.home-screen .hero-copy .home-title .sr-only { position: absolute; }
.home-screen .home-title-tiles {
  display: flex;
  align-items: center;
  gap: clamp(2px, .5vw, 6px);
  width: min(100%, calc(var(--title-size) * var(--title-letters, 7) + 36px));
  padding: 3px 2px 6px;
}
.home-screen .home-title-tile {
  position: relative;
  display: block;
  flex: 1 1 0;
  min-width: 0;
  max-width: var(--title-size);
  aspect-ratio: 1;
  border-radius: 8%;
  transform: rotate(var(--title-tilt, 0deg));
  box-shadow: 0 3px 0 #6a409a1c;
}
.home-screen .hero-copy .home-title .home-title-tile > .tile-art { position: absolute; inset: 0; }
.home-screen .hero-copy .home-title .home-title-name {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-top: 5px;
  padding-bottom: 11px;
  color: #72249c;
}
.home-screen .hero-copy .home-title .home-title-name::after {
  content: "";
  position: absolute;
  left: 1%;
  bottom: 0;
  width: 98%;
  height: 5px;
  border: 0;
  border-radius: 45% 35% 50% 25%;
  background: linear-gradient(165deg, #f8c747, #efab29 75%, #f8d16d);
  transform: rotate(-1deg);
  rotate: none;
}
.home-screen .hero-description { color: #67486f; text-shadow: 0 1px 0 #fff9; }
.home-screen .home-start {
  color: #632787;
  background: linear-gradient(175deg, #fff0a1, #ffd54e);
  border-color: #fff7cc;
  border-radius: 22px 20px 24px 20px;
  box-shadow: 0 5px 0 #d99a28, 0 8px 0 #fff7;
}
.home-screen .home-start:hover { background: linear-gradient(175deg, #fff5bb, #ffdf70); }
.home-screen .home-start:active { box-shadow: 0 2px 0 #d99a28; }
.home-screen .start-icon { background: #fff9df; border-color: #fffefa; }
.home-screen .home-resume { color: #654780; background: #fffdf3e6; border-color: #d9c7e5; }
.home-screen .home-resume:hover { background: #f4e9fb; }
.home-screen .art-orbit {
  border: 2px dashed #a6bb8180;
  border-radius: 46% 51% 47% 49%;
  background: linear-gradient(165deg, #fffef3ed, #fff7ddbf),
    url("assets/textures/colorstripeslight.jpg") center / cover;
  background-blend-mode: normal;
  box-shadow: inset 0 0 0 5px #fffdf15c, 0 5px 0 #94a9661c;
  transform: rotate(-4deg);
}
.home-screen .speech-bubble { background: #fffdf0; border-color: #d9bc8f; color: #774190; box-shadow: 0 4px 0 #c8ad7926; }
.home-screen .speech-bubble span { color: #8b6269; }
.home-screen .home-picture { background: #fffdf0; border-color: #fffcf4; box-shadow: 0 3px 0 #baa77845, 0 5px 9px #765d3020; }
.home-screen .how-it-works { border-top-color: #a4a76e73; }
.home-screen .how-it-works > div {
  border: 1px solid #e6d6aa94;
  border-radius: 15px 19px 14px 17px;
  background: #fff8ded9;
}
.home-screen .how-it-works > div:nth-child(2) { background: #f0f7e6dc; border-color: #bad19a9c; }
.home-screen .how-it-works > div:nth-child(3) { background: #fff0e9de; border-color: #e5b6a195; }
.home-screen .how-it-works p { color: #765b61; }
.home-screen .how-it-works b { color: #694381; }
.home-screen .how-it-works .step-number { color: #8b673e; }
.home-screen .footer { color: #594557; background: #fffdf0eb; border-radius: 12px 12px 0 0; }
.home-screen .app-version { color: #67565c; }
.home-screen .hero-copy > .home-rewards {
  width: fit-content;
  max-width: 100%;
  justify-self: start;
  justify-content: flex-start;
  margin-left: 5px;
  color: #583570;
  background: #fffdf0dd;
  border-radius: 8px;
  box-shadow: 0 0 0 5px #fffdf0dd, 0 3px 0 5px #d8c6a233;
}

@media (orientation: portrait) and (max-width: 760px) {
  .home-screen .hero-copy .home-title {
    --title-size: clamp(24px, min(11vw, 5.4dvh), 46px);
    font-size: clamp(21px, 6.5vw, 30px);
    margin-bottom: 3px;
  }
  .home-screen .home-title-tiles { margin-inline: auto; justify-content: center; }
  .home-screen .hero-copy .home-title .home-title-name { margin: 2px auto 0; padding-bottom: 9px; }
  .home-screen .hero-copy .home-title .home-title-name::after { height: 4px; }
  .home-screen .how-it-works > div { border-radius: 12px 15px 11px 14px; }
}
@media (orientation: portrait) and (max-width: 760px) and (max-height: 600px) {
  .home-screen .hero-copy .home-title {
    --title-size: clamp(22px, 4.8dvh, 28px);
    font-size: 20px;
    margin-bottom: 0;
  }
  .home-screen .home-title-tiles { padding-block: 1px 3px; }
  .home-screen .hero-copy .home-title .home-title-name { margin-top: 0; padding-bottom: 7px; }
}
@media (orientation: landscape) and (max-height: 600px) {
  .home-screen .hero-copy .home-title {
    --title-size: clamp(22px, 8dvh, 42px);
    font-size: clamp(20px, 6.5dvh, 29px);
    margin-bottom: 2px;
  }
  .home-screen .home-title-tiles { padding-block: 1px 4px; gap: 3px; }
  .home-screen .hero-copy .home-title .home-title-name { margin-top: 1px; padding-bottom: 7px; }
  .home-screen .hero-copy .home-title .home-title-name::after { height: 3px; }
}
@media (orientation: landscape) and (max-height: 420px) {
  .home-screen .welcome-tag { display: none; }
  .home-screen .hero-copy { gap: 2px; }
  .home-screen .hero-copy .home-title { margin-bottom: 0; }
  .home-screen .hero-copy .home-title .home-title-name { padding-bottom: 5px; }
  .home-screen .hero-copy .home-start, .home-screen .hero-copy .home-resume { min-height: 48px; }
}

/* Publisher identity is separate from the game icon and Donek artwork. */
.publisher-signature { display: inline-flex; align-items: center; gap: 7px; color: #803d77; }
.publisher-symbol { display: block; width: 26px; height: 26px; flex: 0 0 26px; object-fit: contain; }