:root { --purple:#65368c; --deep:#502967; --pink:#ff65b0; --soft:#fff5ff; --shadow:0 16px 44px rgba(115,58,127,.14); color-scheme:light; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; min-width:280px; min-height:100vh; font-family:ui-rounded,"Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif; background:linear-gradient(120deg,#f9e1fa,#fef4fa 45%,#e8f9fc); color:var(--deep); }
button { font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button:focus-visible { outline:4px solid #3c90cb; outline-offset:4px; }
.site-shell { min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; }
.site-header { height:76px; padding:12px clamp(15px,4vw,60px); display:flex; align-items:center; justify-content:space-between; gap:12px; background:#ffffffba; backdrop-filter:blur(16px); border-bottom:1px solid #ffffffc9; position:relative; z-index:10; }
.brand { display:flex; align-items:center; gap:8px; border:0; padding:0; background:none; color:var(--purple); font-weight:900; font-size:clamp(15px,2.4vw,21px); text-align:left; }
.brand img { width:41px; height:41px; background:#fff; border-radius:14px; padding:5px; box-shadow:0 4px 14px #b17ba13d; }
.sound-button { display:flex; align-items:center; gap:7px; background:white; border:2px solid #efd9f1; border-radius:999px; padding:11px 16px; font-size:14px; font-weight:800; color:var(--purple); }
.sound-button:active,.primary-button:active { transform:translateY(2px) scale(.985); }
main { width:100%; max-width:1160px; margin:0 auto; flex:1; display:flex; flex-direction:column; padding:clamp(12px,3vw,32px); }
.view { display:none; flex:1; min-height:580px; position:relative; }
.view.is-active { display:flex; }
.home-view { align-items:center; justify-content:flex-start; flex-direction:column; background:linear-gradient(160deg,#fffafd,#fff4fb 40%,#e8fbff 83%); border-radius:36px; overflow:hidden; border:4px solid white; box-shadow:var(--shadow); isolation:isolate; text-align:center; padding-top:34px; }
.hero-content { position:relative; z-index:5; padding:0 20px; }
.eyebrow { display:inline-block; background:#fff; border:1px solid #f2d5ea; border-radius:50px; padding:9px 17px; font-size:12px; letter-spacing:.04em; font-weight:900; text-transform:uppercase; color:#b04c8f; box-shadow:0 5px 22px #c887be24; }
h1 { font-size:clamp(36px,6vw,70px); letter-spacing:-.05em; line-height:1.05; color:#64398b; margin:20px 0 12px; text-shadow:0 3px 0 #ffffffbd; }
h1 span { color:#e752a5; }
.home-description { font-size:clamp(15px,2.1vw,19px); line-height:1.5; max-width:570px; margin:0 auto 22px; font-weight:650; color:#866291; }
.primary-button { background:linear-gradient(135deg,#ff69b4,#ef4094); color:white; font-size:clamp(20px,3vw,26px); font-weight:900; border:4px solid white; border-radius:23px; padding:15px 34px; box-shadow:0 7px 0 #bc3981,0 14px 28px #e774b170; transition:transform .13s; min-height:64px; }
.guide-pills { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:25px; }
.guide-pills span { background:#fffdfa; padding:9px 12px; border-radius:30px; font-size:12px; font-weight:900; color:#966b9d; box-shadow:0 3px 13px #bb82a32b; }
.scene { position:relative; flex:1; width:100%; min-height:270px; max-height:395px; margin-top:12px; overflow:hidden; }
.sun { position:absolute; right:15%; top:20px; width:94px; height:94px; border-radius:50%; background:#ffe59c; box-shadow:0 0 0 17px #ffeab844,0 0 0 38px #ffeabb22; }
.cloud,.play-cloud { position:absolute; width:122px; height:37px; background:#ffffffcb; border-radius:999px; filter:drop-shadow(0 6px 6px #e8c8ed55); }
.cloud:before,.play-cloud:before { content:""; position:absolute; width:54px; height:54px; background:inherit; border-radius:50%; left:22px; bottom:12px; }
.cloud:after,.play-cloud:after { content:""; position:absolute; width:61px; height:61px; background:inherit; border-radius:50%; right:15px; bottom:3px; }
.cloud-one { left:15%; top:43px; } .cloud-two { right:29%; top:103px; transform:scale(.58); }
.hill { position:absolute; width:140%; left:-20%; border-radius:50% 50% 0 0; }
.back-hill { height:185px; bottom:-104px; background:#b7e4cf; transform:rotate(-6deg); }
.front-hill { height:140px; bottom:-99px; background:#87d8b9; transform:rotate(5deg); }
.castle { position:absolute; z-index:1; height:218px; width:304px; bottom:18px; left:50%; transform:translateX(-50%); filter:drop-shadow(0 15px 15px #aa6b9b41); }
.castle-tower { position:absolute; height:137px; width:72px; bottom:0; border-radius:10px 10px 0 0; background:linear-gradient(90deg,#efb9ea,#c98cdf); border:5px solid #fbeaff; }
.tower-left { left:13px; }.tower-right { right:13px; }
.tower-roof { width:0; height:0; border-left:47px solid transparent; border-right:47px solid transparent; border-bottom:83px solid #a86bd0; position:absolute; bottom:calc(100% - 4px); left:-16px; }
.tower-window { position:absolute; width:23px; height:37px; background:#fff6a5; border-radius:17px 17px 4px 4px; top:33px; left:20px; border:4px solid #a76abf; }
.castle-main { position:absolute; z-index:2; left:70px; right:70px; bottom:0; height:130px; background:linear-gradient(110deg,#ffdbf0,#f3ade1); border:5px solid #fef0ff; border-radius:8px 8px 0 0; }
.castle-roof { width:0; height:0; border-left:93px solid transparent; border-right:93px solid transparent; border-bottom:71px solid #f5a4ce; position:absolute; bottom:calc(100% - 2px); left:-16px; }
.castle-window { position:absolute; width:29px; height:37px; left:58px; top:8px; border:4px solid #b671b5; background:#fff2a4; border-radius:20px 20px 3px 3px; }
.castle-door { position:absolute; width:62px; height:73px; bottom:-4px; left:41px; background:#925eaa; border:5px solid #fff4ce; border-radius:34px 34px 0 0; }
.flower { position:absolute; font-size:39px; bottom:19px; z-index:4; }.flower-left { left:13%; }.flower-right { right:13%; }
.princess-character { z-index:6; position:absolute; left:calc(50% + 165px); bottom:15px; display:flex; flex-direction:column; align-items:center; gap:0; }
.princess-halo { position:absolute; width:110px; height:110px; top:17px; background:#fff7b2ba; border-radius:50%; z-index:-1; box-shadow:0 0 0 12px #fffad666; }
.princess-emoji { font-size:120px; line-height:1.25; filter:drop-shadow(0 9px 3px #8f72a63b); animation:float 3.6s ease-in-out infinite; }
.princess-name { background:white; padding:8px 13px; border-radius:20px; color:#b34489; font-size:13px; font-weight:900; box-shadow:0 6px 15px #7d56733b; white-space:nowrap; }
.sparkle { position:absolute; z-index:4; color:#f3b93f; animation:twinkle 2.8s ease-in-out infinite; }.sparkle-one { top:20%; left:8%; font-size:31px; }.sparkle-two { top:31%; right:12%; font-size:24px; animation-delay:-.7s; }.sparkle-three { top:55%; left:17%; font-size:19px; animation-delay:-1.6s; }
.bottom-note { width:100%; background:#ffffffc9; padding:10px; color:#9b669b; font-size:12px; font-weight:800; position:relative; z-index:8; }
.site-footer { font-size:12px; text-align:center; font-weight:700; color:#99769f; padding:18px 8px; }
.site-footer span { color:#ee579e; }
.game-view { flex-direction:column; padding:16px clamp(8px,2.5vw,24px); background:#fffafd; border:4px solid white; border-radius:33px; box-shadow:var(--shadow); }
.game-topline { display:flex; align-items:center; gap:12px; margin-bottom:15px; }
.mini-princess { font-size:45px; width:66px; height:66px; display:grid; place-items:center; background:#fff0d9; border-radius:20px; }
.game-heading { flex:1; }.game-heading h2 { margin:0 0 2px; font-size:clamp(20px,3vw,29px); color:var(--purple); }.game-heading p { margin:0; font-size:13px; color:#98769d; font-weight:800; }
.plain-button { background:#fff; border:2px solid #f5d9ed; color:var(--purple); border-radius:16px; padding:12px 17px; font-weight:900; white-space:nowrap; }
.hud { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.hud-box { display:flex; align-items:center; gap:12px; background:#fff; border:2px solid #f4e7f8; border-radius:22px; padding:10px 16px; box-shadow:0 3px 15px #9e6e9920; }
.hud-icon { font-size:32px; }.hud-label { display:block; font-size:12px; font-weight:800; color:#ab7fad; }.hud-box strong { font-size:29px; line-height:1.1; color:#753b8d; font-variant-numeric:tabular-nums; }
.timer-track { height:11px; margin:15px 0; background:#f5dcea; border-radius:20px; overflow:hidden; }.timer-progress { height:100%; width:100%; background:linear-gradient(90deg,#ffba72,#ff69ad); border-radius:20px; transition:width .4s linear; }
.play-area { flex:1; position:relative; isolation:isolate; min-height:340px; height:min(56vh,550px); max-height:560px; border-radius:26px; overflow:hidden; touch-action:manipulation; background:linear-gradient(#b7ebff,#e2f9ff 62%,#d6f7cb 62%,#a1e6a2); border:4px solid white; outline:2px solid #e3d8f6; }
.play-cloud { opacity:.72; z-index:-1; }.play-cloud-one { left:10%; top:18%; }.play-cloud-two { right:11%; top:30%; transform:scale(.8); }
.game-hill { position:absolute; bottom:-110px; width:130%; left:-15%; height:210px; border-radius:50%; background:#83d69d; z-index:-1; }
.tap-hint { position:absolute; top:47%; left:50%; transform:translate(-50%,-50%); background:#ffffffc4; color:#9e68a9; border-radius:22px; font-size:26px; font-weight:900; padding:16px 25px; pointer-events:none; transition:opacity .4s; }
.tap-hint.is-hidden { opacity:0; }
.tap-target { position:absolute; display:grid; place-items:center; border:4px solid #fff; border-radius:50%; background:radial-gradient(circle at 25% 20%,#fff,#ffeaf7 48%,#f7c7eb); box-shadow:0 7px 0 #cba5d9,0 13px 20px #7d5b9b55; padding:0; line-height:1; z-index:2; animation:bob 1.4s ease-in-out infinite alternate; will-change:transform; user-select:none; -webkit-user-select:none; }
.tap-target:nth-child(3n) { animation-delay:-.7s; }.tap-target:nth-child(4n) { animation-delay:-.35s; }
.tap-target.is-popped { animation:pop .23s ease-out forwards; pointer-events:none; }
.pop-effect { position:absolute; color:#e13f9a; font-size:25px; font-weight:1000; z-index:4; pointer-events:none; text-shadow:0 2px white; animation:rise .7s ease-out forwards; }
.game-footer { margin:12px auto 0; font-size:clamp(12px,2.5vw,15px); font-weight:900; color:#b66a9e; text-align:center; }
.finish-view { background:radial-gradient(circle at center 35%,#fff,#fff0fa 45%,#e8e7ff); border:4px solid white; border-radius:33px; box-shadow:var(--shadow); align-items:center; justify-content:center; flex-direction:column; gap:12px; overflow:hidden; text-align:center; padding:20px; }
.celebration-crown { font-size:92px; filter:drop-shadow(0 7px 0 #f8d98a); animation:float 2.8s ease-in-out infinite; }.finish-tag { font-size:13px; font-weight:1000; letter-spacing:.13em; color:#c35ba3; }.finish-view h2 { font-size:clamp(34px,7vw,61px); color:#70338b; margin:0; letter-spacing:-.05em; }.finish-view p { color:#a7609a; font-size:21px; font-weight:800; margin:0; }.final-stars { font-size:39px; }.final-score-card { display:flex; flex-direction:column; align-items:center; width:min(300px,95%); background:#fff; border:2px solid #f3d5ec; border-radius:26px; box-shadow:0 8px 23px #bb86b63f; padding:17px; font-weight:900; color:#995f9d; }.final-score-card strong { font-size:65px; line-height:1.15; color:#ed4da0; }.finish-view .primary-button { margin-top:16px; }.text-button { border:0; background:transparent; color:#97669e; font-size:15px; font-weight:900; padding:10px; text-decoration:underline; }.confetti-area { position:absolute; inset:0; overflow:hidden; pointer-events:none; }.confetti-piece { position:absolute; width:11px; height:20px; top:-10%; border-radius:3px; animation:confettiFall var(--duration,3s) linear var(--delay,0s) forwards; }
@keyframes float { 50% { transform:translateY(-9px); } } @keyframes twinkle { 50% { opacity:.4; transform:scale(.65) rotate(23deg); } } @keyframes bob { to { transform:translateY(-11px) rotate(4deg); } } @keyframes pop { to { opacity:0; transform:scale(1.5); } } @keyframes rise { to { opacity:0; transform:translateY(-65px) scale(1.25); } } @keyframes confettiFall { to { transform:translateY(110vh) rotate(900deg); } }
@media(max-width:700px) {
  .site-header { height:65px; }.brand-tail { display:none; }.brand img { width:36px; height:36px; }.sound-button { padding:10px; }.sound-button #soundText { display:none; }
  main { padding:10px; }.view { min-height:calc(100dvh - 130px); }.home-view { border-radius:23px; padding-top:24px; }.eyebrow { font-size:10px; padding:9px; }.home-description { padding:0 6px; }.guide-pills { margin-top:15px; }.scene { min-height:240px; margin-top:6px; }.castle { transform:translateX(-50%) scale(.79); transform-origin:bottom center; }.princess-character { left:auto; right:3%; transform:scale(.74); transform-origin:bottom right; }.flower-left { left:5%; }.flower-right { right:4%; }.sun { right:13%; top:30px; width:65px; height:65px; }.cloud-one { left:5%; }
  .game-view { padding:10px 8px; border-radius:24px; }.game-topline { gap:8px; }.mini-princess { width:48px; height:48px; font-size:31px; }.game-heading p { font-size:11px; }.plain-button { padding:11px; font-size:12px; }.hud { gap:7px; }.hud-box { padding:9px; border-radius:17px; gap:6px; }.hud-icon { font-size:25px; }.hud-box strong { font-size:23px; }.hud-label { font-size:10px; }.play-area { min-height:310px; height:auto; }.finish-view { border-radius:24px; }
}
@media(max-height:720px) and (max-width:700px) { .home-view { padding-top:17px; }.eyebrow { font-size:9px; } h1 { margin:11px 0 7px; font-size:32px; }.home-description { margin-bottom:11px; font-size:13px; }.primary-button { padding:11px 24px; min-height:56px; font-size:19px; }.guide-pills { margin-top:13px; }.scene { min-height:190px; }.game-topline { margin-bottom:5px; }.timer-track { margin:9px 0; }.game-footer { margin-top:8px; } }
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { animation-duration:.001ms!important; transition-duration:.001ms!important; } }

/* 3D Aubrey character; displays the princess placeholder until assets/aubrey.glb is added. */
.header-actions { display:flex; align-items:center; gap:8px; }
.aubrey-stage { position:relative; width:100%; height:100%; display:grid; place-items:center; pointer-events:none; isolation:isolate; }
.aubrey-render-host { position:absolute; inset:0; overflow:hidden; z-index:2; pointer-events:none; }
.aubrey-render-host canvas { width:100%!important; height:100%!important; display:block; pointer-events:none; }
.aubrey-fallback { display:grid; place-items:center; position:absolute; inset:0; z-index:1; font-size:clamp(70px,12vw,122px); filter:drop-shadow(0 9px 3px #8f72a63b); animation:float 3.6s ease-in-out infinite; }
.aubrey-stage.has-model .aubrey-fallback { display:none; }
.home-aubrey-stage { width:200px; height:225px; }
.game-aubrey-stage { height:clamp(146px,28vw,240px); width:clamp(105px,24vw,195px); }
.finish-aubrey-stage { flex:none; height:220px; width:200px; z-index:2; }
.aubrey-game-corner { position:absolute; right:0; bottom:0; z-index:3; width:clamp(120px,30vw,220px); pointer-events:none; display:flex; align-items:center; flex-direction:column; }
.encouragement-bubble { position:relative; background:#fffdfdeb; border:3px solid #f9bbdb; color:#a14391; border-radius:24px; padding:9px 11px; text-align:center; font-size:clamp(11px,1.6vw,16px); font-weight:900; max-width:100%; box-shadow:0 4px 14px #b06b963b; transition:transform .2s ease; }
.encouragement-bubble.is-cheering { transform:scale(1.06); }
@media(max-width:700px) {
 .header-actions { gap:6px; } .sound-button { min-width:43px; justify-content:center; }
 .princess-character { right:1%; }
 .home-aubrey-stage { width:155px; height:185px; }
 .aubrey-game-corner { right:-4px; width:125px; }
 .game-aubrey-stage { height:150px; width:116px; }
 .finish-aubrey-stage { width:160px; height:185px; }
}

/* Friendly welcome audio invitation. Browsers require a tap before audio starts. */
.welcome-button { background:linear-gradient(110deg,#fffefa,#fff0fb); border:2px solid #edc1eb; border-radius:22px; padding:10px 19px; color:#7e458d; display:flex; align-items:center; justify-content:center; gap:12px; min-height:61px; margin:0 auto 12px; box-shadow:0 7px 17px #b779b534; }
.welcome-button-icon { font-size:27px; }
.welcome-button-label { display:flex; flex-direction:column; align-items:flex-start; gap:1px; text-align:left; }
.welcome-button-label strong { font-size:15px; font-weight:900; }
.welcome-button-label small { font-size:11px; color:#a467a5; font-weight:750; }
.welcome-caption { min-height:0; display:none; width:fit-content; max-width:92%; margin:0 auto 12px; padding:7px 14px; border-radius:15px; background:#fdf2ff; border:1px solid #f3cce9; color:#8d488d; font-size:13px; font-weight:900; }
.welcome-caption.is-visible { display:block; }
.primary-button:disabled { cursor:wait; opacity:.82; }
@media(max-width:700px) { .welcome-button { padding:8px 14px; min-height:51px; margin-bottom:8px; } .welcome-button-icon { font-size:24px; } .welcome-button-label strong { font-size:13px; } .welcome-button-label small { font-size:10px; } .welcome-caption { font-size:11px; padding:5px 9px; margin-bottom:8px; } }
@media(max-height:720px) and (max-width:700px) { .welcome-button { padding:5px 12px; min-height:43px; margin-bottom:5px; } .welcome-caption { margin-bottom:4px; } }

/* Photo-backed Princess Aubrey fallback when 3D cannot load. */
.aubrey-fallback img { display:block; height:100%; width:100%; object-fit:contain; filter:drop-shadow(0 8px 6px #995f9250); }
.princess-character { min-width:175px; }
@media(max-width:700px){.princess-character { min-width:138px; }}

/* Larger Princess Aubrey in the gameplay scene (desktop + phones). */
/* The character grows inside the play field; the fruit-spawning code avoids this corner. */
.aubrey-game-corner {
  width: clamp(210px, 31vw, 275px);
  right: 6px;
  bottom: 0;
}
.game-aubrey-stage {
  width: clamp(205px, 28vw, 260px);
  height: clamp(275px, 36vw, 345px);
}
@media (max-width: 700px) {
  .aubrey-game-corner {
    width: clamp(160px, 46vw, 205px);
    right: -2px;
  }
  .game-aubrey-stage {
    width: clamp(155px, 43vw, 190px);
    height: clamp(215px, 31vh, 260px);
  }
  .encouragement-bubble {
    font-size: clamp(12px, 3vw, 15px);
    padding: 7px 9px;
  }
}
@media (max-height: 620px) and (max-width: 700px) {
  .game-aubrey-stage { height: 185px; }
}