@font-face { font-family: Zpix; src: url('assets/zpix.ttf') format('truetype'); font-display: swap; font-style: normal; font-weight: 400; }
:root { color-scheme: light; --lilac:#c7a9ef; --ink:#4c247f; --pink:#f09fbf; --white:#fffaff; --line:#9975d6; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; }
body { min-height:100svh; display:grid; place-items:center; overflow-x:hidden; background:var(--lilac); font-family:Zpix,monospace; color:var(--ink); }
button,h1,p { font-family:inherit; }
button { color:inherit; -webkit-tap-highlight-color:transparent; touch-action:manipulation; cursor:pointer; font-weight:400; }
button:disabled { opacity:.5; cursor:default; }
button:focus-visible { outline:3px dashed var(--ink); outline-offset:5px; }
h1 { font-weight:400; }
h1:focus { outline:none; }
[hidden] { display:none !important; }
.stage { position:relative; isolation:isolate; width:min(100vw,calc(100svh * 16 / 9)); aspect-ratio:16 / 9; overflow:hidden; background:var(--lilac); container-type:inline-size; }
.background { position:absolute; inset:0; z-index:-1; width:100%; height:100%; object-fit:fill; pointer-events:none; user-select:none; }
.screen { position:absolute; inset:0; }
.profile { position:absolute; top:6.7%; left:4.5%; width:17.6%; display:flex; align-items:center; z-index:3; }
.portrait { z-index:1; width:41%; aspect-ratio:1; flex:0 0 41%; display:grid; place-items:center; background:var(--white); border:3px solid #7952bb; box-shadow:3px 3px 0 #9975d6; clip-path:polygon(8% 0,92% 0,92% 5%,100% 5%,100% 92%,92% 92%,92% 100%,8% 100%,8% 95%,0 95%,0 8%,8% 8%); }
.portrait img { width:115%; height:auto; display:block; }
.hearts { display:flex; gap:6%; align-items:center; justify-content:center; width:61%; margin-left:-2%; padding:5% 3% 5% 6%; color:var(--pink); background:var(--white); border:3px solid #9f78dc; font-size:clamp(16px,2.45cqw,42px); line-height:1; -webkit-text-stroke:1px #9c5384; paint-order:stroke fill; }
.greeting { position:absolute; top:14%; left:50%; width:67%; margin:0; transform:translateX(-50%); text-align:center; color:var(--white); font-size:clamp(24px,4.2cqw,72px); line-height:1.38; letter-spacing:.02em; -webkit-text-stroke:3px var(--ink); paint-order:stroke fill; text-shadow:3px 3px 0 #7950a1; }
.greeting span,.ending-quote span { display:block; white-space:nowrap; }
.welcome-character { position:absolute; left:50%; bottom:27%; width:24.5%; height:auto; transform:translateX(-50%); user-select:none; pointer-events:none; }
.head-link { position:absolute; right:4.3%; bottom:3.5%; width:10.2%; min-width:74px; min-height:44px; padding:0 5px 5px; display:flex; flex-direction:column; align-items:center; gap:7px; background:transparent; border:0; transition:transform 150ms ease; }
.head-link span { font-size:clamp(16px,1.75cqw,28px); line-height:1.3; white-space:nowrap; -webkit-text-stroke:2px var(--white); paint-order:stroke fill; text-shadow:2px 2px 0 #e4d5f8; }
.head-link img { display:block; width:100%; height:auto; user-select:none; }
.head-link:hover { transform:translateY(-4px); }
.head-link:active { transform:translateY(2px) scale(.95); }
.birthday-words { position:absolute; top:15%; left:17.5%; width:65%; text-align:center; opacity:0; transform:translateY(8px); }
.walk-finished .birthday-words { animation:words-in .6s ease both; }
.birthday-words h1 { margin:0 0 .5em; color:var(--white); font-size:clamp(24px,3.2cqw,56px); line-height:1.4; -webkit-text-stroke:2px var(--ink); paint-order:stroke fill; text-shadow:2px 2px 0 #7950a1; }
.birthday-words p { margin:0; font-size:clamp(16px,1.55cqw,26px); line-height:1.8; }
.cake-arrival { position:absolute; left:50%; bottom:12%; width:25%; aspect-ratio:1; transform:translateX(-50%); pointer-events:none; user-select:none; }
.stage[data-screen="birthday"] .cake-arrival { animation:birthday-arrive 4s linear both; }
.birthday-walker { position:absolute; inset:0; }
/* The two original frames have matching head scale but different atlas padding.
   Align their head anchors, rather than letting the whole character jump. */
.birthday-step { position:absolute; inset:0; background-image:url('assets/charlie-cake-walk.png'); background-size:200% 200%; background-repeat:no-repeat; }
.birthday-step-a { left:-2.7%; right:2.7%; background-position:0 0; animation:birthday-step-a .56s steps(1,end) infinite; }
.birthday-step-b { left:9.42%; right:-9.42%; background-position:100% 0; animation:birthday-step-b .56s steps(1,end) infinite; }
.birthday-standing { position:absolute; left:4.5%; top:6.4%; width:90.7%; height:auto; opacity:0; }
.walk-finished .birthday-walker { visibility:hidden; }
.walk-finished .birthday-step { animation:none; }
.walk-finished .birthday-standing { opacity:1; animation:birthday-idle 3s ease-in-out infinite; }
@keyframes birthday-arrive { from { transform:translateX(calc(-100% - 50cqw - 12px)); } to { transform:translateX(-50%); } }
@keyframes birthday-step-a { 0%,100% { opacity:1; } 50% { opacity:0; } }
@keyframes birthday-step-b { 0%,100% { opacity:0; } 50% { opacity:1; } }
@keyframes birthday-idle { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-2px); } }
.cake-sprite { width:100%; height:100%; background-image:url('assets/charlie-cake-walk.png'); background-size:200% 200%; background-position:0 0; animation:cake-walk .6s steps(1) infinite; }
@keyframes cake-walk { 0% { background-position:0 0; transform:translateY(0); } 25% { background-position:100% 0; transform:translateY(-3px); } 50% { background-position:0 100%; transform:translateY(0); } 75% { background-position:100% 100%; transform:translateY(-3px); } }
@keyframes words-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.companion-sprite { display:block; aspect-ratio:1; background-image:url('assets/charlie-companion-atlas.png'); background-size:300% 200%; background-repeat:no-repeat; background-position:0 0; user-select:none; }
.companion-sprite[data-frame="1"] { background-position:50% 0; }
.companion-sprite[data-frame="2"] { background-position:100% 0; }
.companion-sprite[data-frame="3"] { background-position:0 100%; }
.companion-sprite[data-frame="4"] { background-position:50% 100%; }
.companion-sprite[data-frame="5"] { background-position:100% 100%; }
.idle { animation:breath 3s ease-in-out infinite; transform-origin:50% 92%; }
@keyframes breath { 0%,100% { transform:translateY(0) rotate(-.6deg); } 50% { transform:translateY(-5px) rotate(.6deg); } }
.house-menu { position:absolute; z-index:2; left:5%; top:29%; width:23%; display:flex; flex-direction:column; gap:1.4cqw; }
.house-menu button { display:flex; align-items:center; gap:.8em; min-height:56px; padding:1.4cqw 1.1cqw; border:2px solid #9975d6; border-radius:6px; background:#fffaffed; box-shadow:4px 4px 0 #a785da; text-align:left; font-size:clamp(16px,1.65cqw,28px); transition:transform .15s; }
.house-menu button:hover { transform:translateX(4px); }
.house-menu button[aria-current="page"] { background:#f0defb; border-color:var(--ink); box-shadow:4px 4px 0 #8054b5; }
.menu-mark { width:1em; font-size:1.3em; line-height:1; }
.camera-mark { display:inline-block; position:relative; width:1.15em; height:.85em; border:2px solid currentColor; border-radius:3px; flex-shrink:0; }
.camera-mark:before { content:''; position:absolute; width:.4em; height:.15em; top:-.25em; left:.15em; border:2px solid currentColor; border-bottom:0; }
.camera-mark:after { content:''; position:absolute; width:.35em; height:.35em; border:2px solid currentColor; border-radius:50%; top:50%; left:50%; transform:translate(-50%,-50%); }
.room-title { position:absolute; top:13%; left:32%; width:63%; margin:0; text-align:center; font-size:clamp(22px,2.6cqw,46px); line-height:1.6; color:var(--white); -webkit-text-stroke:2px var(--ink); paint-order:stroke fill; text-shadow:2px 2px 0 #7950a1; }
.quote-title { font-size:clamp(19px,2.15cqw,38px); }
.speech { margin:0; background:#fffaffeb; border:2px solid #9c76cb; border-radius:12px; box-shadow:4px 4px 0 #b18de0; padding:1.25em 1.5em; font-size:clamp(16px,1.6cqw,26px); line-height:1.8; }
.house-message { position:absolute; left:43%; top:28%; width:43%; text-align:center; }
.house-companion { position:absolute; left:52%; bottom:13%; width:24%; }
.pixel-button { min-height:44px; padding:.7em 1.15em; border:2px solid #9c76cb; border-radius:4px; background:var(--white); box-shadow:3px 3px 0 #ae8bdd; font-size:clamp(14px,1.25cqw,22px); line-height:1.4; transition:transform .12s; }
.pixel-button:hover:not(:disabled) { transform:translateY(-2px); background:#f3e7fc; }
.pixel-button:active:not(:disabled) { transform:translate(2px,2px); box-shadow:1px 1px 0 #ae8bdd; }
.primary-button { background:#eedafa; border-color:#7952bb; }
.text-link { min-height:44px; border:0; padding:.5em; background:transparent; text-decoration:underline; text-underline-offset:5px; font-size:clamp(14px,1.2cqw,20px); }
.ending-link { position:absolute; left:49%; bottom:4%; }
.doorway-link { position:absolute; left:8%; bottom:9%; }
.small-home { position:absolute; right:5%; bottom:3%; }
.interaction-message { position:absolute; left:35%; top:28%; width:55%; min-height:4em; text-align:center; font-size:clamp(16px,1.4cqw,24px); }
.pet-button { position:absolute; left:51%; bottom:15%; width:23%; aspect-ratio:1; background:transparent; border:0; padding:0; }
.pet-button .companion-sprite { width:100%; }
.pet-button:hover { filter:drop-shadow(0 0 9px #fff8); }
.pet-button.react { animation:pet-react .65s ease; }
@keyframes pet-react { 0%,100% { transform:translateY(0); } 35% { transform:translateY(-15px) rotate(-4deg); } 65% { transform:translateY(-7px) rotate(4deg); } }
.interaction-actions { position:absolute; bottom:7%; left:34%; width:56%; display:flex; justify-content:center; gap:.7cqw; flex-wrap:wrap; }
.wardrobe-screen .room-title { left:27%; width:69%; top:7%; font-size:clamp(21px,3.1cqw,52px); }
.wardrobe-cabinet { position:absolute; left:4%; top:22%; width:53%; bottom:4%; padding:1.15cqw; border:4px double #9871c7; border-radius:8px; background:#eedffbcc; box-shadow:5px 5px 0 #a887d0, inset 0 0 0 4px #fffaff99; }
.cabinet-heart { position:absolute; top:-1.45cqw; left:50%; transform:translateX(-50%); padding:0 .8cqw; background:#e9d8f7; color:#a777c8; font-size:clamp(18px,2cqw,34px); line-height:1.2; -webkit-text-stroke:1px #fffaff; paint-order:stroke fill; }
.outfit-options { width:100%; height:100%; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:repeat(4,minmax(0,1fr)); gap:.8cqw; }
.outfit-button { position:relative; display:grid; place-items:center; min-width:0; min-height:0; width:100%; padding:0; border:2px solid #dfc9f2; border-radius:8px; background:#fffaffdd; box-shadow:2px 2px 0 #d7bfe9; transition:background .15s, border-color .15s; }
.outfit-thumbnail { display:block; width:8.4cqw; max-width:100%; aspect-ratio:1; background-image:url('assets/charlie-outfit-bodies.png'); background-size:400% 400%; background-repeat:no-repeat; pointer-events:none; }
.outfit-button:hover { background:#fffaff; border-color:#ac7dd8; }
.outfit-button[aria-pressed="true"] { background:#f5e9ff; border-color:#9464cb; box-shadow:0 0 0 2px #b891df, inset 0 0 0 3px #fffaff; }
.outfit-button[aria-pressed="true"]::after { content:'♥'; position:absolute; right:5%; top:3%; color:#dd8fb6; font-size:clamp(13px,1.2cqw,20px); text-shadow:1px 1px 0 #fff; }
.wardrobe-preview { position:absolute; left:61%; top:29%; width:32%; }
.wardrobe-preview.outfit-change { animation:outfit-change .42s ease; }
@keyframes outfit-change { 0%,100% { transform:translateY(0) scale(1); } 45% { transform:translateY(-5px) scale(1.025); } }
.wardrobe-message { position:absolute; top:23%; left:61%; width:32%; text-align:center; margin:0; font-size:clamp(14px,1.3cqw,22px); line-height:1.5; }
.wardrobe-back { right:5%; bottom:4%; min-width:12%; }
.photo-title { top:9%; left:27%; width:69%; font-size:clamp(17px,1.8cqw,32px); }
.stage[data-screen="photo"] .house-menu { display:none; }
.photobooth { position:absolute; top:25%; left:4%; right:4%; bottom:10%; display:grid; grid-template-columns:24% minmax(0,1fr) 20%; gap:2cqw; }
.frame-column { min-width:0; min-height:0; padding:1cqw; background:#fffaffd9; border:2px solid #b999dc; border-radius:8px; display:flex; flex-direction:column; gap:.7cqw; }
.frame-column h2 { font-size:clamp(16px,1.4cqw,24px); font-weight:400; margin:0; text-align:center; }
.frame-column p { margin:0; font-size:14px; line-height:1.4; text-align:center; }
.frame-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:start; gap:.6cqw; overflow-y:auto; min-height:0; flex:1; padding:4px; scrollbar-color:#b999dc #f4eafd; }
.frame-button { min-width:0; display:flex; align-items:center; gap:7px; padding:7px 4px; border:2px solid #dfc9f2; border-radius:6px; background:#fffaff; font-size:14px; line-height:1.45; text-align:left; }
.frame-button img { width:28px; height:84px; object-fit:contain; flex-shrink:0; background:repeating-conic-gradient(#eee 0% 25%,#fff 0% 50%) 50%/8px 8px; }
.frame-button span { overflow-wrap:anywhere; }
.frame-button[aria-pressed="true"] { background:#f0defb; border-color:#7952bb; box-shadow:0 0 0 1px #b18de0; }
.frame-button:hover:not(:disabled) { border-color:#9c76cb; }
.free-frame-icon { display:grid; place-items:center; width:28px; height:84px; flex-shrink:0; font-size:24px; background:#eee0fb; }
.camera-column { min-width:0; min-height:0; display:grid; grid-template-rows:minmax(0,1fr) auto auto auto; gap:.8cqw; }
.camera-view { position:relative; aspect-ratio:4/3; min-height:0; height:100%; width:auto; max-width:100%; justify-self:center; overflow:hidden; background:#f1e6fb; border:3px solid #9871c7; border-radius:7px; box-shadow:4px 4px 0 #b18de0; }
.camera-view video,.camera-view>img { display:block; width:100%; height:100%; position:absolute; object-fit:cover; }
.camera-view video { transform:scaleX(-1); }
.camera-empty { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:.6cqw; padding:1cqw; text-align:center; }
.camera-empty>.camera-mark { font-size:38px; margin-bottom:8px; }
.camera-empty p { font-size:clamp(16px,1.35cqw,22px); margin:.3em 0; }
.camera-empty .text-link { font-size:14px; }
.camera-sticker { position:absolute; right:1%; bottom:0; width:29%; pointer-events:none; }
.camera-frame-preview { position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; }
.camera-corner { width:20px; height:20px; position:absolute; pointer-events:none; border-color:#fff; border-style:solid; }
.top-left { top:12px; left:12px; border-width:3px 0 0 3px; }
.bottom-right { bottom:12px; right:12px; border-width:0 3px 3px 0; }
.countdown { position:absolute; inset:0; z-index:1; display:grid; place-items:center; background:#4c247f33; color:#fff; font-size:clamp(50px,6cqw,100px); -webkit-text-stroke:2px #4c247f; paint-order:stroke fill; }
.photo-outfits { display:flex; align-items:center; justify-content:center; gap:.8cqw; font-size:clamp(13px,1cqw,17px); }
.photo-outfits select { font:inherit; color:var(--ink); min-width:0; max-width:65%; min-height:36px; padding:.3em .6em; border:2px solid #9c76cb; border-radius:4px; background:var(--white); }
.photo-actions { display:flex; justify-content:center; gap:.7cqw; }
.photo-actions .pixel-button { padding:.4em 1em; min-height:40px; }
.camera-status { margin:0; font-size:clamp(13px,.95cqw,16px); line-height:1.65; text-align:center; }
.strip-column { display:flex; flex-direction:column; align-items:center; min-height:0; min-width:0; gap:.3cqw; }
.photo-strip { height:calc(100% - 48px); max-width:100%; aspect-ratio:1/3; background:repeating-conic-gradient(#eee7f2 0% 25%,#fffaff 0% 50%) 50%/12px 12px; box-shadow:4px 4px 0 #aa87d0; }
.photo-strip canvas { display:block; width:100%; height:100%; object-fit:contain; }
.strip-heading,.strip-footer { display:block; text-align:center; font-size:clamp(12px,.85cqw,14px); line-height:1.3; }
.strip-heading { font-family:monospace; letter-spacing:.02em; }
.photo-slot { aspect-ratio:4/3; background:#ede0f8; border:1px solid #d1b6e8; display:grid; place-items:center; overflow:hidden; font-size:clamp(14px,1cqw,18px); color:#9c78bd; }
.photo-slot img { width:100%; height:100%; object-fit:cover; display:block; }
.strip-column .text-link { font-size:clamp(14px,1cqw,17px); }
.ending-quote { position:absolute; top:13%; left:10%; width:80%; margin:0; text-align:center; color:var(--white); font-size:clamp(26px,3.8cqw,65px); line-height:1.5; -webkit-text-stroke:2px var(--ink); paint-order:stroke fill; text-shadow:3px 3px 0 #7950a1; animation:words-in .8s ease both; }
.ending-character { position:absolute; bottom:13%; left:50%; transform:translateX(-50%); width:28%; aspect-ratio:1; background:transparent; border:0; padding:0; }
.ending-character .companion-sprite { width:100%; animation:promise-sway 4s ease-in-out infinite; }
@keyframes promise-sway { 0%,100% { transform:rotate(-2deg) translateY(0); } 50% { transform:rotate(2deg) translateY(-8px); } }
.ending-answer { position:absolute; bottom:5%; left:25%; width:50%; text-align:center; font-size:clamp(16px,1.4cqw,24px); margin:0; }
.heart-particles { position:absolute; inset:0; pointer-events:none; z-index:5; overflow:hidden; }
.heart-particle { position:absolute; left:64%; top:52%; color:#f498bb; font-size:clamp(22px,2cqw,36px); animation:heart-rise 1.4s ease-out both; text-shadow:1px 1px 0 #fff; }
@keyframes heart-rise { from { opacity:1; transform:translate(0,0) scale(.7); } to { opacity:0; transform:translate(var(--drift),-110px) scale(1.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; }
@media (max-width:760px) and (max-aspect-ratio:4/3) {
 body { display:block; }
 .stage { width:100%; min-height:900px; height:100svh; aspect-ratio:auto; }
 .background { object-fit:cover; object-position:center; }
 .profile { top:3%; left:5%; width:38%; max-width:220px; }
 .hearts { font-size:24px; }
 .greeting { top:22%; width:95%; font-size:clamp(24px,5.65cqw,44px); line-height:1.65; -webkit-text-stroke:2px var(--ink); }
 .welcome-character { width:65%; max-width:350px; bottom:25%; }
 .head-link { width:24%; max-width:140px; right:6%; bottom:6%; }
 .head-link span { font-size:22px; }
 .birthday-words { top:22%; left:5%; width:90%; }
 .birthday-words h1 { font-size:28px; }
 .birthday-words p { font-size:16px; line-height:1.9; }
 .cake-arrival { width:65%; left:50%; bottom:20%; }
 .stage[data-screen="birthday"] .cake-arrival { animation-duration:3.6s; }
 .house-menu { left:5%; top:17%; width:90%; flex-direction:row; gap:9px; }
 .house-menu button { flex:1; min-width:0; padding:12px 5px; flex-direction:column; gap:8px; font-size:14px; min-height:80px; text-align:center; box-shadow:2px 2px 0 #a785da; }
 .room-title { top:30%; left:5%; width:90%; font-size:25px; }
 .quote-title { font-size:21px; }
 .house-message { top:42%; left:10%; width:80%; font-size:17px; }
 .house-companion { left:22%; width:56%; bottom:14%; }
 .ending-link { left:50%; transform:translateX(-50%); bottom:7%; white-space:nowrap; }
 .doorway-link { left:5%; bottom:1%; }
 .interaction-message { left:7%; width:86%; top:39%; font-size:16px; padding:1em; }
 .pet-button { left:22%; width:56%; bottom:17%; }
 .interaction-actions { bottom:8%; left:5%; width:90%; gap:9px; }
 .pixel-button { font-size:16px; padding:.6em .7em; }
 .small-home { bottom:1%; font-size:16px; }
 .wardrobe-screen .room-title { top:15%; left:5%; width:90%; font-size:24px; }
 .wardrobe-cabinet { top:53%; bottom:7%; left:5%; width:90%; padding:12px; }
 .cabinet-heart { top:-17px; font-size:26px; }
 .outfit-options { gap:8px; }
 .outfit-thumbnail { width:16cqw; }
 .wardrobe-preview { top:22%; left:24%; width:52%; }
 .wardrobe-message { top:20%; left:5%; width:90%; font-size:16px; }
 .wardrobe-back { bottom:1%; }
 .stage[data-screen="photo"] { height:auto; min-height:1320px; }
 .photo-title { top:13%; left:5%; width:90%; font-size:20px; }
 .photobooth { top:22%; bottom:7%; left:5%; right:5%; grid-template-columns:minmax(0,1fr) 30%; grid-template-rows:280px minmax(0,1fr); gap:20px 12px; }
 .frame-column { grid-column:1/-1; padding:12px; gap:8px; }
 .frame-options { grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
 .frame-button { flex-direction:column; text-align:center; gap:5px; padding:5px; font-size:14px; }
 .frame-button img,.free-frame-icon { width:24px; height:72px; }
 .camera-column { display:flex; flex-direction:column; gap:12px; }
 .camera-view { flex:0 0 auto; width:100%; height:auto; }
 .camera-empty { gap:7px; }
 .camera-empty>.camera-mark { font-size:28px; }
 .camera-empty p { font-size:14px; }
 .camera-empty .pixel-button { font-size:14px; }
 .photo-actions { flex-direction:column; gap:9px; }
 .photo-outfits { gap:6px; flex-wrap:wrap; font-size:14px; }
 .photo-outfits select { max-width:100%; width:100%; }
 .camera-status { font-size:14px; }
 .strip-heading { font-size:10px; overflow-wrap:anywhere; }
 .strip-footer { font-size:12px; }
 .photo-strip { height:auto; width:100%; }
 .ending-quote { top:22%; left:2.5%; width:95%; font-size:30px; }
 .ending-character { width:65%; bottom:21%; }
 .ending-answer { left:10%; width:70%; bottom:14%; font-size:16px; }
 .heart-particle { left:50%; }
}
@media (prefers-reduced-motion:reduce) {
 *,*::before,*::after { animation:none !important; transition:none !important; }
 .cake-arrival { transform:translateX(-50%); }
 .birthday-words { opacity:1; transform:none; }
 .birthday-walker { display:none; }
 .birthday-standing { opacity:1; }
}