:root { color-scheme: light; --ink:#294c4a; --muted:#6b7e79; --paper:#fffdf6; --cream:#f7edcf; --line:#ddd2b5; --green:#4e9f77; --green-dark:#31755c; --yellow:#efbc4e; --coral:#e97164; --navy:#344f5b; --shadow:0 14px 34px rgba(71,75,50,.13),0 3px 0 rgba(173,153,105,.2); }
* { box-sizing:border-box; }
html { min-width:320px; background:#f7f1dd; }
body { min-width:320px; margin:0; overflow-x:hidden; color:var(--ink); background:radial-gradient(circle at 20% 10%,rgba(255,255,255,.82),transparent 28%),radial-gradient(circle at 85% 27%,rgba(237,197,111,.2),transparent 26%),#f7f1dd; font-family:"Trebuchet MS","Arial Rounded MT Bold",Arial,sans-serif; }
body::before { position:fixed; inset:0; z-index:-1; opacity:.45; background-image:radial-gradient(circle,#e1d4ad 1.2px,transparent 1.6px); background-size:22px 22px; content:""; }
button { font:inherit; }
button:focus-visible { outline:4px solid rgba(84,145,187,.38); outline-offset:3px; }
img { display:block; max-width:100%; }
h1,h2,h3,p { margin-top:0; }
.app { width:min(1120px,calc(100% - 32px)); min-height:100vh; margin:0 auto; padding:22px 0 48px; }
.paper-card { background:var(--paper); border:2px solid var(--line); box-shadow:var(--shadow); }
.topbar { display:flex; min-height:66px; padding:8px 11px; align-items:center; justify-content:space-between; border-radius:24px; }
.brand,.collection-button { display:flex; min-height:48px; padding:5px 9px; align-items:center; color:var(--ink); background:transparent; border:0; border-radius:15px; cursor:pointer; }
.brand { gap:10px; text-align:left; }.brand > span,.collection-button > span { display:grid; flex:0 0 39px; height:39px; place-items:center; background:#fae8ae; border-radius:12px; font-size:21px; }.brand strong,.brand small,.collection-button strong,.collection-button small { display:block; }.brand strong { font-size:18px; }.brand small { margin-left:4px; color:var(--muted); font-size:12px; }.collection-button { gap:8px; text-align:left; }.collection-button > span { color:#fff; background:var(--navy); }.collection-button strong { font-size:13px; }.collection-button small { color:var(--muted); font-size:11px; }
.hero { display:grid; min-height:474px; margin-top:24px; grid-template-columns:minmax(0,1fr) 490px; overflow:hidden; border-radius:42px; }
.hero-copy { z-index:2; padding:58px 35px 45px 56px; }.eyebrow,.card-kicker { display:block; margin-bottom:10px; color:#99702c; font-family:Georgia,serif; font-size:11px; font-weight:700; letter-spacing:.16em; }.hero h1 { margin-bottom:20px; font-size:clamp(48px,6vw,72px); line-height:.93; letter-spacing:-.055em; }.hero-copy > p { max-width:480px; margin-bottom:27px; color:var(--muted); font-size:19px; line-height:1.5; }.hero-actions { display:flex; flex-wrap:wrap; gap:10px; }
.button { min-height:48px; padding:12px 20px; border:2px solid transparent; border-radius:15px; cursor:pointer; font-weight:900; transition:transform 150ms ease,box-shadow 150ms ease,filter 150ms ease; }.button:hover { transform:translateY(-2px); }.button:active { transform:translateY(2px); }.button-primary { color:#fff; background:linear-gradient(#5aac83,#40956e); box-shadow:0 6px 0 #2d7c5d; }.button-soft { color:#76581f; background:#f8e6ad; border-color:#e9cb75; }.button-outline { color:var(--ink); background:#fffdf7; border-color:var(--line); }
.hero-stage { position:relative; min-height:474px; overflow:hidden; background:linear-gradient(#263c4c,#182c38); }.hero-stage::before { position:absolute; top:-20px; left:50%; width:390px; height:430px; background:conic-gradient(from 160deg at 50% 0,transparent 0 34%,rgba(255,236,163,.46) 40% 60%,transparent 66%); content:""; transform:translateX(-50%); }.curtain { position:absolute; z-index:4; top:0; width:82px; height:100%; background:repeating-linear-gradient(90deg,#b94f4f 0 19px,#d8655a 19px 37px); box-shadow:inset -7px 0 12px rgba(91,25,30,.25); }.curtain-left { left:0; border-radius:0 0 60% 0; }.curtain-right { right:0; border-radius:0 0 0 60%; transform:scaleX(-1); }.stage-light { position:absolute; z-index:1; bottom:44px; left:50%; width:320px; height:105px; background:radial-gradient(ellipse,rgba(248,221,132,.65),transparent 68%); transform:translateX(-50%); }.hero-shadow { position:absolute; z-index:2; object-fit:contain; filter:brightness(0) saturate(100%) drop-shadow(0 7px 4px rgba(0,0,0,.25)); }.hero-bat { top:78px; left:107px; width:150px; height:150px; transform:rotate(-8deg); }.hero-octopus { right:83px; bottom:72px; width:145px; height:145px; }.hero-moose { bottom:42px; left:105px; width:170px; height:170px; }.stage-floor { position:absolute; z-index:3; right:0; bottom:0; left:0; height:50px; background:linear-gradient(#93633f,#68462f); border-top:5px solid #d5a35c; }
.section-block { margin-top:48px; }.section-heading { display:flex; margin:0 8px 18px; align-items:end; justify-content:space-between; gap:20px; }.section-heading .eyebrow { margin-bottom:5px; }.section-heading h2,.collection-callout h2 { margin-bottom:0; font-size:31px; letter-spacing:-.03em; }.section-heading > p { max-width:420px; margin-bottom:3px; color:var(--muted); font-size:14px; text-align:right; }
.steps-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:17px; }.step-card { position:relative; min-height:218px; padding:25px; overflow:hidden; border-radius:29px; }.step-number { position:absolute; top:18px; right:18px; display:grid; width:34px; height:34px; place-items:center; color:#755a22; background:#fae8b3; border-radius:50%; font-size:13px; font-weight:900; }.step-symbol { display:grid; width:64px; height:64px; margin-bottom:17px; place-items:center; color:#fff; background:var(--navy); border-radius:50% 50% 44% 56%; box-shadow:0 7px 0 #d6c79f; font-family:Georgia,serif; font-size:32px; }.step-card:nth-child(2) .step-symbol { background:var(--coral); }.step-card:nth-child(3) .step-symbol { color:#6a5020; background:var(--yellow); }.step-card h3 { margin-bottom:8px; font-size:20px; }.step-card p { margin-bottom:0; color:var(--muted); line-height:1.45; }
.level-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }.level-card { overflow:hidden; border-radius:31px; }.level-preview { position:relative; height:205px; overflow:hidden; background:linear-gradient(145deg,color-mix(in srgb,var(--level) 18%,#fff),#f6edd3); border-bottom:2px solid var(--line); }.screen-glow { position:absolute; top:-70px; left:50%; width:280px; height:270px; background:conic-gradient(from 160deg at 50% 0,transparent 0 35%,rgba(255,255,255,.75) 42% 58%,transparent 65%); transform:translateX(-50%); }.level-preview img { position:absolute; z-index:2; bottom:11px; left:calc(7% + var(--i) * 29%); width:39%; height:78%; object-fit:contain; filter:brightness(0) saturate(100%); opacity:calc(.58 + var(--i) * .17); }.level-copy { padding:23px; }.level-label,.level-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; }.level-label { margin-bottom:13px; color:var(--level); font-size:10px; font-weight:900; letter-spacing:.1em; }.level-label b { padding:5px 7px; color:#fff; background:var(--level); border-radius:7px; letter-spacing:0; }.level-copy h3 { margin-bottom:8px; font-size:25px; }.level-copy > p { min-height:43px; margin-bottom:15px; color:var(--muted); font-size:14px; line-height:1.45; }.level-meta { margin-bottom:17px; color:var(--muted); font-size:12px; }.mini-stars span { color:#d9d3c0; }.mini-stars .filled { color:#e6aa24; }.level-copy .button { width:100%; }
.collection-callout { display:grid; margin-top:48px; padding:30px 34px; grid-template-columns:230px 1fr auto; align-items:center; gap:28px; border-radius:35px; }.collection-stack { position:relative; height:145px; }.collection-stack span { position:absolute; display:grid; width:112px; height:112px; place-items:center; background:#f2eddd; border:3px solid #fff; border-radius:25px; box-shadow:0 9px 19px rgba(57,66,46,.15); }.collection-stack span:nth-child(1) { top:17px; left:5px; transform:rotate(-8deg); }.collection-stack span:nth-child(2) { top:0; left:62px; transform:rotate(5deg); }.collection-stack span:nth-child(3) { top:23px; left:117px; transform:rotate(11deg); }.collection-stack img { width:91%; height:91%; object-fit:contain; }.collection-callout p { margin:7px 0 0; color:var(--muted); line-height:1.45; }.parent-note { display:flex; margin-top:24px; padding:20px 24px; align-items:center; gap:15px; color:var(--muted); background:#f4ecd4; border:2px dashed #d8c89f; border-radius:22px; }.parent-note > span { display:grid; flex:0 0 37px; height:37px; place-items:center; color:#fff; background:var(--green); border-radius:50%; font-family:Georgia,serif; font-weight:900; }.parent-note p { margin:0; line-height:1.45; }
.game-shell { margin-top:24px; padding:24px; border-radius:38px; }.game-top { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:15px; text-align:center; }.game-top > div span,.game-top > div strong { display:block; }.game-top > div span { color:var(--muted); font-size:11px; }.game-top > div strong { margin-top:3px; }.back-button,.hint-button { min-height:46px; padding:9px 14px; color:var(--ink); background:#fffdf7; border:2px solid var(--line); border-radius:14px; cursor:pointer; font-weight:900; }.back-button { justify-self:start; }.hint-button { justify-self:end; color:#795b20; background:#fae9b5; border-color:#e8cb7c; }.hint-button span { display:inline-grid; width:25px; height:25px; margin-right:5px; place-items:center; color:#fff; background:#dfad3d; border-radius:9px; }.hint-button:disabled { opacity:.55; cursor:default; }.progress-track { height:9px; margin:17px 2px 22px; overflow:hidden; background:#e8e2cf; border-radius:10px; }.progress-track span { display:block; height:100%; background:linear-gradient(90deg,var(--level),#74bf8f); border-radius:inherit; transition:width .3s ease; }
.play-layout { display:grid; grid-template-columns:minmax(330px,.85fr) minmax(510px,1.15fr); gap:18px; }.shadow-card,.choice-card { min-width:0; min-height:545px; padding:27px; border-radius:31px; }.shadow-card { text-align:center; }.shadow-card h1 { margin-bottom:10px; font-size:32px; letter-spacing:-.03em; }.shadow-stage { position:relative; display:grid; width:min(350px,100%); height:355px; margin:0 auto 8px; place-items:center; overflow:hidden; background:linear-gradient(#344e5b,#213944); border:8px solid #f3d98b; border-radius:175px 175px 24px 24px; box-shadow:inset 0 0 0 4px #fff0c1,0 15px 25px rgba(42,57,61,.18); }.stage-rays { position:absolute; inset:-45%; opacity:.36; background:repeating-conic-gradient(from 0deg,#ffeeb4 0 9deg,transparent 9deg 23deg); animation:slow-spin 20s linear infinite; }.little-curtain { position:absolute; z-index:3; top:0; width:54px; height:100%; background:repeating-linear-gradient(90deg,#b94e50 0 15px,#d7655d 15px 28px); }.little-curtain.left { left:0; border-radius:0 0 45px 0; }.little-curtain.right { right:0; border-radius:0 0 0 45px; transform:scaleX(-1); }.shadow-stage img { position:relative; z-index:2; width:78%; height:78%; object-fit:contain; filter:brightness(0) saturate(100%) drop-shadow(0 9px 4px rgba(0,0,0,.25)); transition:filter .4s ease,transform .4s ease; }.shadow-stage.is-revealed { background:linear-gradient(#f7efcf,#e2eed9); }.shadow-stage.is-revealed img { filter:drop-shadow(0 11px 7px rgba(48,65,50,.18)); transform:scale(1.03); }.light-label { position:absolute; z-index:4; bottom:18px; left:50%; padding:7px 12px; color:#fff; background:var(--green); border:3px solid #dff0df; border-radius:9px; font-size:12px; font-weight:900; white-space:nowrap; transform:translateX(-50%) rotate(-4deg); }.shadow-note { min-height:45px; margin:0; color:var(--muted); line-height:1.45; }
.choice-card { display:flex; flex-direction:column; }.choice-heading { display:flex; align-items:start; justify-content:space-between; gap:12px; }.choice-heading .card-kicker { margin-bottom:5px; }.choice-heading h2 { margin-bottom:0; font-size:27px; }.round-number { display:grid; flex:0 0 47px; height:47px; place-items:center; color:#fff; background:var(--navy); border-radius:15px; font-weight:900; }.choice-grid { display:grid; margin-top:20px; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }.animal-option { position:relative; min-width:0; min-height:273px; padding:9px 8px 13px; color:var(--ink); background:#fbf8ed; border:3px solid #ded5bd; border-radius:23px; cursor:pointer; transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease; }.animal-option:hover:not(:disabled) { border-color:#9ebb9f; box-shadow:0 11px 20px rgba(62,79,53,.13); transform:translateY(-4px); }.animal-option:disabled { cursor:default; }.option-image { display:grid; height:203px; place-items:center; background:linear-gradient(145deg,#f3eedc,#e4edde); border-radius:17px; }.option-image img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 8px 6px rgba(61,71,50,.14)); }.animal-option strong { display:block; margin-top:10px; font-size:14px; line-height:1.2; }.option-mark { position:absolute; z-index:2; top:10px; right:10px; display:none; width:38px; height:38px; place-items:center; color:#fff; border:3px solid #fff; border-radius:50%; font-size:22px; font-weight:900; }.animal-option.is-wrong { border-color:#e68178; background:#fff0eb; }.animal-option.is-wrong .option-mark { display:grid; background:var(--coral); }.animal-option.is-correct { border-color:var(--green); box-shadow:0 0 0 5px rgba(77,158,117,.16); }.animal-option.is-correct .option-mark { display:grid; background:var(--green); }
.feedback-slot { display:flex; flex:1 1 auto; min-height:104px; margin-top:16px; align-items:end; }.feedback { display:flex; width:100%; min-height:88px; padding:14px; align-items:center; gap:11px; background:#f6f2e6; border:2px solid #dfd6bf; border-radius:21px; }.feedback > span { display:grid; flex:0 0 40px; height:40px; place-items:center; background:#e7e2d5; border-radius:13px; font-size:20px; font-weight:900; }.feedback p { flex:1 1 auto; margin:0; font-size:14px; line-height:1.38; }.feedback .button { flex:0 0 auto; }.feedback-try { background:#fff0eb; border-color:#edb0a8; }.feedback-try > span { color:#fff; background:var(--coral); }.feedback-hint { background:#fff5d7; border-color:#e7ca80; }.feedback-hint > span { color:#73581e; background:var(--yellow); }.feedback-success { background:#e7f3e7; border-color:#98c7a7; }.feedback-success > span { color:#fff; background:var(--green); }
.result-card { position:relative; max-width:920px; margin:44px auto 0; padding:48px 48px 44px; overflow:hidden; border-radius:42px; text-align:center; }.result-card::before,.result-card::after { position:absolute; width:230px; height:230px; background:#e2efda; border-radius:50%; content:""; }.result-card::before { top:-150px; left:-90px; }.result-card::after { right:-105px; bottom:-150px; background:#f8e7b6; }.result-card > * { position:relative; z-index:1; }.result-icon { display:grid; width:62px; height:62px; margin:0 auto 16px; place-items:center; color:#6f531c; background:var(--yellow); border:5px solid #fff2ca; border-radius:20px; font-size:31px; transform:rotate(-5deg); }.result-card h1 { margin-bottom:11px; font-size:clamp(39px,5vw,58px); letter-spacing:-.04em; }.result-card > p { max-width:620px; margin:0 auto 13px; color:var(--muted); font-size:18px; line-height:1.48; }.result-stars { margin-bottom:20px; font-size:43px; letter-spacing:7px; }.result-stars span { color:#d8d2bf; }.result-stars .filled { color:#eba928; }.result-stats { display:grid; max-width:650px; margin:0 auto 24px; grid-template-columns:repeat(3,1fr); overflow:hidden; background:#f6f2e6; border:2px solid #dfd7bf; border-radius:22px; }.result-stats span { padding:16px 11px; }.result-stats span + span { border-left:2px solid #dfd7bf; }.result-stats b,.result-stats small { display:block; }.result-stats b { margin-bottom:2px; font-size:25px; }.result-stats small { color:var(--muted); font-size:12px; }.result-strip { display:flex; max-width:760px; margin:0 auto 28px; justify-content:center; flex-wrap:wrap; }.result-strip span { display:grid; width:70px; height:70px; margin:0 -4px 5px; place-items:center; background:#fffdf7; border:2px solid var(--line); border-radius:50%; }.result-strip img { width:92%; height:92%; object-fit:contain; }.result-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; }
.collection-shell { margin-top:24px; padding:32px; border-radius:38px; }.collection-heading { display:grid; margin-bottom:25px; grid-template-columns:1fr auto 1fr; align-items:center; text-align:center; }.collection-heading .back-button { grid-column:1; justify-self:start; }.collection-heading > div { grid-column:2; }.collection-heading .eyebrow { margin-bottom:5px; }.collection-heading h1 { margin-bottom:5px; font-size:clamp(34px,4vw,48px); }.collection-heading p { margin:0; color:var(--muted); }.collection-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }.collection-card { position:relative; min-width:0; overflow:hidden; background:#fffdf7; border:2px solid var(--line); border-radius:23px; box-shadow:0 8px 18px rgba(66,76,52,.08); }.file-number { position:absolute; z-index:3; top:9px; left:9px; padding:5px 7px; color:#fff; background:var(--navy); border-radius:8px; font-size:9px; font-weight:900; letter-spacing:.08em; }.collection-pair { display:grid; aspect-ratio:2/1; grid-template-columns:1fr 1fr; background:linear-gradient(145deg,#324b57 0 50%,#edf2df 50%); }.collection-pair > span { display:grid; min-width:0; place-items:center; }.collection-pair img { width:94%; height:94%; object-fit:contain; }.mini-shadow { filter:brightness(0) saturate(100%); }.collection-card > div:last-child { min-height:105px; padding:14px; }.collection-card strong { display:block; margin-bottom:5px; font-size:16px; }.collection-card p { margin:0; color:var(--muted); font-size:12px; line-height:1.35; }.collection-card.is-locked { border-style:dashed; }.collection-card.is-locked .collection-pair { display:grid; grid-template-columns:1fr; background:#e7e4d9; }.locked-shadow { display:grid; width:60px; height:60px; place-items:center; color:#99968d; background:#f7f4eb; border-radius:50%; font-family:Georgia,serif; font-size:29px; font-weight:900; }
@keyframes slow-spin { to { transform:rotate(360deg); } }
@media (max-width:980px) { .hero { grid-template-columns:minmax(0,1fr) 390px; }.hero-copy { padding-left:40px; }.level-grid { grid-template-columns:1fr; }.level-card { display:grid; grid-template-columns:40% 60%; }.level-preview { height:100%; min-height:265px; border-right:2px solid var(--line); border-bottom:0; }.level-copy > p { min-height:0; }.play-layout { grid-template-columns:minmax(300px,.78fr) minmax(420px,1.22fr); }.game-shell { padding:20px; }.shadow-card,.choice-card { min-height:505px; padding:20px; }.shadow-stage { height:320px; }.animal-option { min-height:238px; }.option-image { height:170px; }.collection-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px) { .app { width:min(100% - 20px,1120px); padding-top:10px; }.topbar { min-height:60px; }.brand small,.collection-button strong { display:none; }.hero { grid-template-columns:1fr; border-radius:34px; }.hero-copy { padding:40px 28px 24px; }.hero-stage { min-height:345px; }.hero-stage::before { height:340px; }.hero-bat { top:48px; left:19%; }.hero-octopus { right:17%; bottom:46px; }.hero-moose { bottom:35px; left:22%; }.section-heading { align-items:flex-start; flex-direction:column; gap:3px; }.section-heading > p { text-align:left; }.steps-grid { grid-template-columns:1fr; }.step-card { min-height:0; padding-right:65px; }.level-card { display:block; }.level-preview { height:215px; min-height:0; border-right:0; border-bottom:2px solid var(--line); }.collection-callout { grid-template-columns:1fr; padding:25px; text-align:center; }.collection-stack { width:230px; margin:0 auto; }.game-top { grid-template-columns:1fr 1fr; }.game-top > div { order:-1; grid-column:1/-1; }.back-button,.hint-button { width:100%; }.play-layout { grid-template-columns:1fr; }.shadow-card,.choice-card { min-height:0; }.choice-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.collection-heading { display:block; }.collection-heading .back-button { display:block; margin-bottom:20px; }.collection-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px) { .brand strong { max-width:178px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; }.collection-button { padding-inline:4px; }.hero-copy { padding:33px 20px 20px; }.hero-copy > p { font-size:17px; }.hero-actions .button { width:100%; }.hero-stage { min-height:300px; }.curtain { width:55px; }.hero-shadow { transform:scale(.85); }.hero-bat { top:35px; left:15%; }.hero-octopus { right:11%; bottom:34px; }.hero-moose { bottom:25px; left:14%; }.section-block { margin-top:38px; }.section-heading h2 { font-size:27px; }.collection-callout { margin-top:38px; }.game-shell { padding:13px; border-radius:28px; }.shadow-card,.choice-card { padding:18px 11px; border-radius:25px; }.shadow-card h1 { font-size:27px; }.shadow-stage { width:278px; height:288px; border-width:7px; }.little-curtain { width:42px; }.choice-heading h2 { font-size:23px; }.round-number { flex-basis:42px; height:42px; }.choice-grid { gap:7px; }.animal-option { min-height:189px; padding:5px 4px 9px; border-width:2px; border-radius:17px; }.option-image { height:133px; border-radius:12px; }.animal-option strong { margin-top:7px; font-size:11px; }.option-mark { top:7px; right:7px; width:31px; height:31px; border-width:2px; font-size:17px; }.feedback { padding:11px; flex-wrap:wrap; }.feedback > span { flex-basis:36px; height:36px; }.feedback .button { width:100%; }.result-card { margin-top:20px; padding:36px 16px 29px; border-radius:31px; }.result-stats { grid-template-columns:1fr; }.result-stats span + span { border-top:2px solid #dfd7bf; border-left:0; }.result-actions .button { width:100%; }.collection-shell { padding:17px 11px; border-radius:28px; }.collection-grid { gap:8px; }.collection-card > div:last-child { min-height:104px; padding:10px; }.collection-card strong { font-size:14px; }.collection-card p { font-size:11px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }