.concept-shell { --world-tray:130px; --friend-size:min(67%,max(140px,calc(100svh - var(--world-tray) - 266px)),465px); }
/* One continuous playable clearing. HUD objects sit on the foreground, not in a separate page column. */
body[data-screen="concept"] .concept-shell { min-height:620px;height:100svh;background-position:center 63%; }
body[data-screen="concept"] .concept-shell::before { background:linear-gradient(#dff7e780 0%,transparent 29%,transparent 83%,#ede5b94d 100%); }
.concept-shell.phase-name { --world-tray:200px; }.concept-shell.phase-memory { --world-tray:205px; }
.concept-shell.phase-reward { --world-tray:240px; }.concept-shell.phase-album { --world-tray:270px; }
.concept-shell.phase-adventures { --world-tray:190px; }.concept-shell.phase-meet { --world-tray:155px; }
.concept-shell.phase-count { --world-tray:170px; }
.concept-top { position:absolute;top:0;left:0;right:0;z-index:20;padding:17px 26px;pointer-events:none; }
.concept-top button { pointer-events:auto; }
.concept-brand { color:#3f7065; }
.concept-brand span { font-size:18px; }
.concept-content { position:absolute;inset:76px 0 0;width:100%;max-width:1200px;padding:0;margin:0 auto;display:block; }
.concept-copy { position:absolute;left:50%;top:0;transform:translateX(-50%);width:min(84%,430px);z-index:8;padding:12px 23px;background:#fffcecd9;border-radius:32px 27px 29px 8px;box-shadow:0 4px 0 #75865320;pointer-events:none; }
.concept-copy::after { content:'';position:absolute;bottom:-10px;left:38%;width:22px;height:22px;background:#fffcecd9;clip-path:polygon(0 0,100% 0,0 100%); }
.concept-kicker { display:none; }
.concept-copy h1,.phase-name .concept-copy h1,.phase-album .concept-copy h1,.phase-adventures .concept-copy h1 { font-size:28px;letter-spacing:-.5px;line-height:1.12;margin:0 0 5px; }
.concept-subtitle { font-size:15px;line-height:1.35;max-width:360px;min-height:0; }
.concept-scene { position:absolute;inset:0;height:100%;min-height:0;width:100%;margin:0; }
.concept-shell .concept-friend { left:50%;top:auto;bottom:calc(var(--world-tray) + 57px);width:var(--friend-size);transform:translateX(-50%); }
.concept-shell .concept-friend:active { transform:translateX(-50%); }
.scene-orbit { display:none; }
.friend-bubble,.pet-hint { display:none; }
.concept-controls { position:absolute;left:50%;bottom:57px;transform:translateX(-50%);width:min(90%,410px);padding:0;gap:9px;z-index:10; }
.concept-bottom { position:absolute;bottom:0;left:50%;transform:translateX(-50%);margin:0;min-height:49px;padding:5px 18px 8px;width:auto;max-width:100%;gap:18px;z-index:12; }
.concept-link { white-space:nowrap;min-height:37px;font-size:12px!important;text-shadow:0 1px #ffffe8; }
.concept-micro { text-shadow:0 1px #fff9df;margin:3px 0 0; }
.concept-primary { width:290px;max-width:100%;min-height:59px;border-radius:34% 29% 31% 27% / 28% 35% 29% 32%!important;background:linear-gradient(175deg,#f5d385,#dcb365)!important;color:#63472e!important;border:2px solid #fae5ad!important;box-shadow:0 5px 0 #9d7845,0 10px 12px #503c2228,inset 0 0 0 2px #bd944840;font-size:20px!important; }
.concept-primary:hover { transform:translateY(-1px) rotate(-.5deg); }
.concept-controls::before { content:'';position:absolute;width:95%;height:20px;border-radius:50%;background:#69542d1c;filter:blur(9px);bottom:-9px;z-index:-1;pointer-events:none; }
.snack-choice { background:radial-gradient(ellipse at 50% 38%,#eae2bf 45%,#cbb98b 72%);border:3px solid #dfcf9f!important;box-shadow:0 5px 0 #9e895e,0 9px 8px #56452a20;border-radius:48% 46% 44% 48%;min-height:106px;max-width:140px; }
.snack-art .concept-art { width:65px;height:65px; }
.snack-choice>span:last-child { font-size:13px; }
.picnic-tray { border-radius:46% 42% 43% 39% / 25% 32% 26% 30%;background:repeating-linear-gradient(8deg,#ddc69b 0 9px,#d8bf9255 10px 12px),#d4ba8b;box-shadow:0 5px 0 #9d8057,0 9px 9px #54402730;border-color:#eed8ab; }
.picnic-leaf { background:transparent; }.picnic-leaf.is-eaten { background:#9eac7840; }
.number-choice { border-radius:43% 39% 44% 38%;background:linear-gradient(150deg,#eae6cc,#c7c6a6);border:2px solid #edecd2!important;box-shadow:0 5px 0 #929c7b;max-width:165px; }
.name-choice { border-radius:29px 16px 25px 19px;background:linear-gradient(140deg,#eee4c2,#ddd0a4);border:2px solid #f8efcc!important;box-shadow:0 4px 0 #a99a72; }
.name-speaker { background:#9fb9a280; }.name-choice:nth-child(2) .name-speaker { background:#c8ad7960; }
.adventure-choice { background:linear-gradient(150deg,#eed7a2,#c8a874);box-shadow:0 5px 0 #94764c;border:2px solid #f1dca9!important;border-radius:23px 19px 28px 20px; }
.adventure-choice:nth-child(2) { transform:rotate(-3deg); }.adventure-choice:nth-child(3) { transform:rotate(2deg); }
.memory-card { background:repeating-linear-gradient(12deg,#87a185 0 15px,#819a7e 16px 18px);border:2px solid #b2c1a1!important;border-radius:20px 15px 18px 14px;box-shadow:0 4px 0 #506e55,0 7px 9px #385e3820; }
.memory-card:nth-child(2n) { transform:rotate(2deg); }.memory-card:nth-child(3n) { transform:rotate(-2deg); }
.memory-card.face-up { background:#e5dcb7;border-color:#f2e7c5!important; }.memory-card.is-matched { background:#bdcc9e;opacity:.75; }
.quest-token { border:none;background:#f0e7c080;box-shadow:inset 0 1px 2px #867b3b30;border-radius:45%; }
.quest-token.is-earned { background:#e8d39b;box-shadow:0 2px 0 #a89b69; }
.reward-ingredients { gap:22px;margin-bottom:0; }.reward-ingredients .concept-art { width:32px;height:32px; }
.reward-rays { inset:8% 8% 25%;opacity:.6; }
.friend-medal { right:20%;top:20%;width:65px;height:65px; }
.depth-0 { right:12%;bottom:47%;width:9%; }
.depth-1 { left:8%;bottom:25%;width:12%; }
.depth-2 { right:5%;bottom:15%;width:15%; }
.garden-bed .bed-shadow { height:9%;filter:blur(7px); }
.garden-bed .bed-earth { background:radial-gradient(ellipse,#b39a6b 20%,#98a16880 66%,transparent 73%);box-shadow:none;border-radius:50%;height:16%; }
.plantable .bed-earth { box-shadow:0 0 0 2px #f0dda66b; }
.plant-invitation>span { background:#dccc9e;border:1px solid #f3e5bb;box-shadow:0 2px 0 #96805b; }
.happy-heart { top:26%;right:28%; }
[data-snack],[data-picnic],[data-concept="water"] { touch-action:none!important; }
.world-drag-ghost { position:fixed;z-index:1000;pointer-events:none;transform:translate(-50%,-50%) rotate(-12deg);width:83px;height:83px;filter:drop-shadow(0 10px 7px #3b46284d); }
.world-drag-ghost>svg { width:100%;height:100%;stroke:none; }
.being-carried { opacity:.35; }
.mouth-drop-guide { display:none;position:absolute;left:40%;bottom:calc(var(--world-tray) + 160px);background:#fff9d6e8;color:#466b47;padding:7px 12px;border-radius:18px;font-size:13px;pointer-events:none;z-index:9; }
.is-carrying:not(.carrying-water) .mouth-drop-guide { display:block; }
.over-drop-target .mouth-drop-guide { background:#d7efb8;transform:scale(1.08); }
.carrying-water .growing-plant { filter:drop-shadow(0 0 9px #e5fbd2); }
@media(max-width:799px) {
 body[data-screen="concept"] .concept-shell { min-height:568px; }
 .concept-content { inset:68px 0 0; }
 .concept-top { padding:12px 18px; }
 .concept-copy { top:4px;padding:11px 17px;width:84%; }
 .concept-copy h1,.phase-name .concept-copy h1,.phase-album .concept-copy h1,.phase-adventures .concept-copy h1 { font-size:25px; }
 .concept-subtitle,.phase-name .concept-subtitle { font-size:14px; }
 .concept-shell .concept-friend { bottom:calc(var(--world-tray) + 62px);width:min(72%,max(135px,calc(100svh - var(--world-tray) - 235px))); }
 .concept-controls { width:90%;bottom:59px; }
 .depth-0 { right:1%;bottom:49%;width:16%; }.depth-1 { left:-2%;bottom:32%;width:19%; }.depth-2 { right:-2%;bottom:21%;width:24%; }
 .friend-medal { right:5%;top:22%; }
 .concept-primary { font-size:19px!important;min-height:55px;width:290px; }
 .snack-choice { min-height:102px; }.snack-art .concept-art { width:55px;height:55px; }
 .adventure-choice { min-height:105px; }.memory-card { min-height:68px; }
 .name-confirm { height:61px; }
 .concept-bottom { gap:16px; }
 .concept-bottom .concept-art { width:25px;height:25px; }
 .mouth-drop-guide { left:24%;bottom:calc(var(--world-tray) + 170px); }
}
@media(max-height:710px) and (max-width:799px) {
 .concept-shell { --world-tray:110px; }
 .concept-shell.phase-meet { --world-tray:123px; }.concept-shell.phase-count { --world-tray:143px; }
 .concept-shell.phase-name { --world-tray:168px; }.concept-shell.phase-memory { --world-tray:162px; }
 .concept-shell.phase-adventures { --world-tray:148px; }.concept-shell.phase-album { --world-tray:218px; }.concept-shell.phase-reward { --world-tray:192px; }
 .concept-content { inset:60px 0 0; }.concept-top { padding:9px 16px; }
 .concept-copy { padding:9px 14px; }.concept-copy h1,.phase-name .concept-copy h1,.phase-album .concept-copy h1,.phase-adventures .concept-copy h1 { font-size:22px; }
 .concept-subtitle,.phase-name .concept-subtitle { font-size:12px; }
 .concept-shell .concept-friend { bottom:calc(var(--world-tray) + 53px);width:min(68%,max(110px,calc(100svh - var(--world-tray) - 210px))); }
 .concept-controls { bottom:50px;gap:7px; }
 .concept-primary { min-height:48px;font-size:17px!important; }.concept-bottom { min-height:43px;padding-bottom:6px; }
 .snack-choice { min-height:82px; }.snack-art .concept-art { width:42px;height:42px; }
 .name-confirm { height:54px; }.name-confirm .concept-primary { min-height:46px; }
 .memory-card { min-height:55px; }.adventure-choice { min-height:87px; }
 .friend-medal { width:51px;height:51px;top:20%; }
 .depth-0 { bottom:52%; }.depth-1 { bottom:37%; }.depth-2 { bottom:26%; }
}

.concept-copy { top:auto;bottom:calc(var(--world-tray) + 82px + min(67vw, max(140px, calc(100svh - var(--world-tray) - 266px)), 465px)); }
@media(max-width:799px) {
 .concept-copy { top:auto;bottom:calc(var(--world-tray) + 84px + min(72vw, max(135px, calc(100svh - var(--world-tray) - 235px)))); }
}
@media(max-height:710px) and (max-width:799px) {
 .concept-copy { top:auto;bottom:calc(var(--world-tray) + 71px + min(68vw, max(110px, calc(100svh - var(--world-tray) - 210px)))); }
}
.world-drag-ghost>svg:not(.concept-art) { stroke:#498b9b;fill:#b4dde6;stroke-width:1.8; }

/* A flower becomes a place to play, with a visitor that waits for the child. */
.garden-visitor { position:absolute;width:64px;height:64px;padding:4px;background:transparent!important;border:0;box-shadow:none;z-index:9;transform:translate(-50%,-50%);touch-action:manipulation;filter:drop-shadow(0 5px 3px #55492840); }
.garden-visitor .concept-art { width:100%;height:100%; }
.garden-visitor:focus-visible { outline:3px solid #fff5c0;outline-offset:3px;border-radius:50%; }
.garden-visitor:active { transform:translate(-50%,-50%) scale(1.12); }
.garden-visitor.is-visiting { transform:translate(calc(-50% + var(--visit-x)),calc(-50% + var(--visit-y))); }
@media(prefers-reduced-motion:no-preference) {
 .garden-visitor .concept-art { animation:visitor-wings 1.1s ease-in-out infinite; }
 .garden-visitor.is-visiting { transition:transform 1.8s cubic-bezier(.2,.8,.3,1); }
 @keyframes visitor-wings { 0%,100% { transform:scaleX(1) rotate(-8deg); } 50% { transform:scaleX(.65) rotate(8deg); } }
}

/* Existing blooms stay rooted while the next flower grows beside them. */
.bouquet-flower { position:absolute;inset:0;pointer-events:none; }
.bouquet-2 .bloom-0,.bouquet-3 .bloom-0 { transform:translate(-19%,2%) scale(.8);transform-origin:50% 92%; }
.bouquet-2 .bloom-1,.bouquet-3 .bloom-1 { transform:translate(18%,-4%) scale(.85);transform-origin:50% 92%; }
.bouquet-3 .bloom-2 { transform:translate(0,9%) scale(.74);transform-origin:50% 92%; }
.garden-bed:has(.bouquet-flower) .bed-sprout { left:48%; }
@media(prefers-reduced-motion:no-preference) {
 .is-growing .new-bloom { animation:bouquet-arrive 1.8s ease-out both; }
 @keyframes bouquet-arrive { from { opacity:0;scale:.2; } to { opacity:1;scale:1; } }
}
.bouquet-flower.flower-color-gold .garden-flower { filter:drop-shadow(3px 5px 2px #425c2428); }
.bouquet-flower.flower-color-rose .garden-flower { filter:hue-rotate(290deg) saturate(.8); }
.bouquet-flower.flower-color-violet .garden-flower { filter:hue-rotate(215deg) saturate(.75); }

/* The invitation shows the actual play object, without requiring the label. */
.adventure-choice .activity-object { display:grid;place-items:center;position:relative;width:72px;height:65px; }
.activity-object.object-meet img { width:76px;height:76px;object-fit:contain;max-width:none; }
.activity-object.object-picnic { border-radius:50%;background:#e8d9ae;box-shadow:0 3px 0 #a98a59; }
.adventure-choice .activity-object.object-picnic .concept-art { width:52px;height:52px; }
.activity-object.object-memory i { display:grid;place-items:center;position:absolute;width:43px;height:53px;background:#ebdeb9;border:2px solid #f9efcf;border-radius:9px;box-shadow:0 3px 0 #a78c61;transform:rotate(-13deg);left:3px; }
.activity-object.object-memory i:last-child { transform:rotate(13deg);left:28px;top:9px; }
.adventure-choice .activity-object.object-memory .concept-art { width:30px;height:36px; }
.number-choice { flex-direction:column;gap:3px;padding:8px; }
.number-choice strong { font-size:18px;order:2; }
.number-choice .choice-horns .concept-art { width:30px;height:43px; }
@media(max-height:710px) and (max-width:799px) {
 .adventure-choice .activity-object { width:60px;height:48px; }
 .activity-object.object-meet img { width:60px;height:60px; }
 .activity-object.object-memory { scale:.8; }
 .adventure-choice .activity-object.object-picnic .concept-art { width:40px;height:40px; }
 .number-choice .choice-horns .concept-art { width:24px;height:34px; }
}
@media(prefers-reduced-motion:no-preference) {
 .concept-controls { animation:objects-arrive .2s ease-out both; }
 @keyframes objects-arrive { from { opacity:.3;translate:0 7px; } to { opacity:1;translate:0 0; } }
}

/* Readable labels and concrete action pictures for children who do not read yet. */
.concept-copy { background:#fffcec; }
.concept-copy::after { background:#fffcec; }
.concept-copy h1 { color:#233f32;text-shadow:none; }
.concept-subtitle { color:#344d3b; }
.concept-brand { background:#fffcec;border-radius:18px;padding:6px 16px;color:#344d3b;letter-spacing:0; }
.concept-brand span { color:#233f32; }
.concept-shell .concept-link,
.concept-shell .concept-help,
.concept-micro,
.plant-guidance,
.growing-message {
 color:#2d4432;background:#fffcec;border-radius:18px;text-shadow:none;
}
.concept-shell .concept-link,.concept-shell .concept-help {
 padding:4px 12px;min-height:48px;font-size:14px!important;box-shadow:0 2px 0 #8b805d;
}
.concept-micro { padding:3px 10px;font-size:13px; }
.plant-guidance,.growing-message { padding:8px 14px; }
.concept-bottom { gap:10px; }
.footer-dot { display:none; }
.concept-shell .concept-link .concept-art { width:34px;height:34px;flex-shrink:0; }
.concept-shell .concept-help .concept-art { width:28px;height:34px; }
.concept-shell .concept-icon .concept-art { width:32px;height:32px; }
.concept-primary { gap:10px;padding:5px 12px;min-height:60px;color:#42301e!important; }
.concept-primary .action-picture { display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;background:#fff5d9;border-radius:50%; }
.concept-primary .action-picture .concept-art { width:42px;height:42px; }
.concept-primary .action-picture img { width:52px;height:52px;object-fit:contain; }
.concept-primary>svg { flex:0 0 22px;width:22px; }
.name-speaker { background:#fff5d9; color:#294b3e; }
.name-choice:nth-child(2) .name-speaker { background:#fff5d9; }
.concept-shell .name-choice.is-selected { outline:3px solid #315940;outline-offset:2px; }
.reward-ingredients>span { background:#fffcec;color:#2d4432;border-radius:14px;padding:4px 9px; }
.concept-shell button:focus-visible { outline:3px solid #233f32;outline-offset:3px; }
@media(max-width:799px) {
 .concept-controls { bottom:65px; }
 .concept-bottom { min-height:56px;padding:4px 8px 6px; }
 .concept-shell .concept-link { gap:5px;padding-inline:8px;font-size:13px!important; }
 .concept-subtitle,.phase-name .concept-subtitle { font-size:14px; }
}
@media(max-height:710px) and (max-width:799px) {
 .concept-brand { padding:4px 12px; }
 .concept-primary { min-height:54px;font-size:16px!important; }
 .concept-primary .action-picture { flex-basis:42px;width:42px;height:42px; }
 .concept-primary .action-picture .concept-art { width:36px;height:36px; }
 .concept-primary .action-picture img { width:46px;height:46px; }
 .name-confirm { height:58px; }
 .concept-micro { font-size:12px; }
}

/* Friends arrive as a clear picture invitation and wait until the child is ready. */
.concept-shell .friend-picker { display:flex;align-items:center;justify-content:center;gap:6px;padding:4px 12px;border:2px solid #e2d3a5;box-shadow:0 3px 0 #879574;min-height:48px; }
.friend-picker>span:last-child { font-size:15px;margin:0; }
.concept-brand .picker-portraits { position:relative;display:block;width:42px;height:40px;margin:0; }
.picker-portraits img { width:40px;height:40px;object-fit:contain; }
.picker-portraits .concept-art { position:absolute;width:18px;height:18px;bottom:0;left:-5px; }
.visitor-invitation { display:flex;align-items:center;justify-content:center;gap:10px;width:290px;max-width:100%;min-height:65px;padding:4px 12px;background:#fffcec;border:2px solid #8ca675!important;border-radius:23px;box-shadow:0 3px 0 #638151;color:#2d4432!important;font-weight:800!important; }
.visitor-picture { position:relative;width:72px;height:58px;flex-shrink:0; }
.visitor-picture img { width:72px;height:62px;object-fit:contain; }
.visitor-picture .concept-art { position:absolute;bottom:0;left:-4px;width:25px;height:25px; }
.visitor-invitation small { display:block;font-size:13px;margin-top:3px; }
.visitor-invitation>svg { width:23px;height:23px; }
.friend-choices { display:flex;justify-content:center;gap:8px;width:100%; }
.friend-choice { flex:1;min-width:0;max-width:130px;display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 4px;background:#fffcec;border:2px solid #c4b68e!important;border-radius:20px;box-shadow:0 4px 0 #998965; }
.friend-choice[aria-pressed="true"] { border-color:#426542!important; }
.friend-choice>img { width:100%;height:90px;object-fit:contain; }
.friend-choice>strong { font-size:13px;color:#2d4432; }
.friend-choice>span { display:flex;gap:5px; }
.friend-choice>span svg { width:22px;height:22px; }
.feature-discovery { display:flex;align-items:center;justify-content:center;gap:12px;width:290px;max-width:100%;min-height:65px;padding:7px 16px;background:#fffcec;border:2px solid #cdb98a!important;border-radius:24px;box-shadow:0 4px 0 #a68e64; }
.feature-discovery>.concept-art { width:52px;height:52px; }
.feature-discovery>svg:last-child { width:24px;height:24px; }
.visitor-feature ellipse { fill:#fff2a420;stroke:#fff4bb;stroke-width:7;stroke-dasharray:15 8; }
.visitor-feature.is-revealed ellipse { fill:#fff2a440;stroke:#fff3a4;stroke-width:10;stroke-dasharray:none; }
.friend-brachiosaurus .mouth-drop-guide { bottom:calc(var(--world-tray) + 240px); }
@media(max-height:710px) and (max-width:799px) {
 .friend-picker>span:last-child { font-size:13px; }
 .concept-shell .friend-picker { padding:3px 8px; }
 .concept-brand .picker-portraits { width:30px;height:32px; }
 .picker-portraits img { width:32px;height:32px; }
 .visitor-invitation { min-height:57px; }
 .visitor-picture { height:48px;width:58px; }
 .visitor-picture img { height:50px;width:58px; }
 .friend-choice>img { height:68px; }
 .friend-choice>strong { font-size:12px; }
 .feature-discovery { min-height:56px; }
}
@media(prefers-reduced-motion:no-preference) {
 .visitor-picture img { animation:visitor-hello 2s ease-in-out 2; }
 .feature-reveal { animation:feature-wiggle .65s ease-in-out 2; }
 @keyframes visitor-hello { 50% { transform:rotate(-7deg); } }
 @keyframes feature-wiggle { 50% { rotate:2deg; } }
}
/* Short landscape screens scroll the clearing instead of crowding the header. */
@media(min-width:800px) and (max-height:600px) {
 body[data-screen="concept"] .concept-shell { min-height:680px; }
}
/* Empty space around the action objects must not block the garden behind it. */
.concept-controls { pointer-events:none; }
.concept-controls button { pointer-events:auto; }