body[data-screen="concept"] { margin:0; padding:0; background:#c7e0d1; color:#244e46; }
body[data-screen="concept"] > .topbar,body[data-screen="concept"] > .play-dock { display:none; }
body[data-screen="concept"] #app { max-width:none; padding:0; margin:0; }
.concept-shell { --ink:#214e47; --cream:#fffcf0; --stage-height:510px; position:relative; isolation:isolate; width:100%; min-height:100svh; overflow:hidden; background:#c3e9db url('./public/concept/garden.png') center 58%/cover no-repeat; font-family:Arial,sans-serif; display:flex; flex-direction:column; }
.concept-shell::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(180deg,#dcf6e9d9 0%,#ddf6e970 19%,transparent 42%,#fff3da15 67%,#fff7e6e8 95%); }
.concept-shell button { font:inherit; color:inherit; border:0; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.concept-shell button:focus-visible { outline:4px solid #215d71; outline-offset:5px; }
.concept-shell svg { width:24px; height:24px; flex-shrink:0; }
.concept-shell .concept-art { display:block; width:48px; height:48px; filter:drop-shadow(0 2px 1px #685e2920); }
.concept-top { display:flex; align-items:center; justify-content:space-between; width:min(100%,1140px); margin:0 auto; padding:22px 36px; z-index:5; }
.concept-icon { display:grid;place-items:center;width:48px;height:48px;border-radius:17px;background:#fffdf0cc;box-shadow:0 3px 0 #688f6525; }
.concept-brand { text-align:center;font-size:12px;font-weight:700;letter-spacing:1px;color:#51786c; }
.concept-brand span { display:block;font-size:21px;letter-spacing:0;color:#214e47;margin-top:4px; }
/* The scene and controls occupy different grid cells. The character can never grow outside its cell. */
.concept-content { display:grid;grid-template-columns:minmax(280px,.85fr) minmax(0,1.15fr);grid-template-rows:auto auto;align-items:center; width:min(100%,1140px);margin:auto;padding:18px 32px 12px;gap:0 36px; }
.concept-copy { grid-column:1; text-align:center;align-self:end;padding-bottom:16px;z-index:2; }
.concept-kicker { font-size:14px;font-weight:700;display:inline-block;padding:7px 15px;background:#fffdf3b8;border-radius:40px; }
.concept-copy h1 { color:var(--ink);font-size:clamp(34px,4vw,54px);font-weight:900;letter-spacing:-1.4px;line-height:1.12;margin:18px 0 12px;text-wrap:balance;text-shadow:0 2px 0 #fff9; }
.concept-subtitle { font-size:18px;line-height:1.5;margin:0 auto;max-width:350px;font-weight:600;color:#426659;text-wrap:balance; }
.concept-scene { grid-column:2;grid-row:1/3;position:relative;height:var(--stage-height);min-height:var(--stage-height);width:100%;align-self:center; }
.concept-friend { position:absolute;left:50%;top:50%;width:min(73%,calc(var(--stage-height) - 32px));max-width:490px;aspect-ratio:1;transform:translate(-50%,-50%);background:none;padding:0;z-index:2; }
.concept-friend>img { display:block;width:100%;height:auto;pointer-events:none;user-select:none;transform-origin:50% 92%;filter:drop-shadow(0 12px 9px #5b411b24); }
.scene-orbit { position:absolute;width:55%;height:6%;background:#65744026;filter:blur(10px);border-radius:50%;bottom:12%;left:23%; }
.friend-bubble { position:absolute;z-index:3;right:2%;top:10%;padding:12px 18px;background:#fffdf0;border-radius:23px 23px 5px 23px;font-size:21px;font-weight:bold;transform:rotate(6deg);box-shadow:0 4px 0 #335e3820;display:flex;align-items:center;gap:6px;pointer-events:none; }
.friend-bubble .concept-art { width:23px;height:23px; }
.pet-hint { position:absolute;bottom:4%;left:37%;font-size:12px;font-weight:700;color:#527151;pointer-events:none; }
.concept-controls { grid-column:1;display:flex;flex-direction:column;align-items:center;gap:12px;align-self:start;padding:14px 0 10px; }
.concept-primary { display:flex;align-items:center;justify-content:center;gap:20px;width:100%;max-width:360px;min-height:66px;padding:14px 24px;border-radius:23px!important;background:linear-gradient(#ffe38c,#ffd064)!important;box-shadow:0 6px 0 #cc913b,0 10px 18px #856b2420,inset 0 2px 0 #fff3;color:#584122!important;font-size:22px!important;font-weight:800!important;transition:transform .13s,box-shadow .13s; }
.concept-primary:hover { transform:translateY(-2px); }
.concept-primary:active { transform:translateY(4px);box-shadow:0 2px 0 #cc913b; }
.concept-primary svg { width:26px;height:26px; }
.concept-micro { font-size:12px;line-height:1.5;color:#5c7867;text-align:center;margin-top:5px; }
.concept-bottom { width:min(100%,650px);margin:10px auto 0;display:flex;align-items:center;justify-content:center;gap:26px;min-height:73px;padding:10px 22px max(16px,env(safe-area-inset-bottom));z-index:4; }
.concept-link { display:flex;align-items:center;gap:8px;background:transparent;min-height:44px;font-size:13px!important;font-weight:700!important; }
.concept-link svg { width:19px;height:19px; }
.footer-dot { width:4px;height:4px;background:#9da76b;border-radius:50%; }
.quest-progress { display:flex;align-items:center;gap:14px;direction:rtl; }
.quest-token { position:relative;display:grid;place-items:center;width:44px;height:44px;border:1px solid #aca78944;border-radius:16px;background:#fff8e56b; }
.quest-token>.concept-art { width:30px;height:30px;filter:grayscale(1);opacity:.32; }
.quest-token.is-earned { background:#fff9dd;border-color:#d8b866;box-shadow:0 2px 0 #cab77b44; }
.quest-token.is-earned>.concept-art { filter:none;opacity:1; }
.quest-token i { position:absolute;right:-4px;bottom:-4px;display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:#579577;color:white;border:2px solid #fff9e7; }
.quest-token i svg { width:10px;height:10px; }
.concept-replay { display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fffcf0b0; }
/* Trace the horns themselves; keep labels and counters away from his face. */
.concept-friend .horn-overlay { position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible; }
.horn-highlight { fill:#fff3aa38;stroke:#fff0b6;stroke-width:8;stroke-linejoin:round;opacity:0;filter:drop-shadow(0 0 9px #fff3bc);transition:opacity .2s; }
.horn-highlight.is-counted { opacity:1; }
.counting-tray { display:flex;justify-content:center;gap:12px;height:35px; }
.counted-horn .concept-art { width:32px;height:32px;filter:grayscale(1);opacity:.25; }
.counted-horn.lit .concept-art { opacity:1;filter:drop-shadow(0 2px 0 #fff9); }
.count-choices,.food-choices,.name-choices { display:flex;align-items:stretch;justify-content:center;gap:16px;width:100%;max-width:370px; }
.number-choice { flex:1;min-height:98px;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:12px;background:#fffdf0;border-radius:23px;box-shadow:0 5px 0 #c8bfa0; }
.number-choice strong { font-size:44px;font-weight:800;line-height:1;color:#3c7264; }
.choice-horns { display:flex;align-items:center;gap:0; }
.choice-horns .concept-art { width:23px;height:37px; }
.number-choice:active,.snack-choice:active { transform:translateY(3px); }
.concept-help { background:none;display:flex;align-items:center;gap:8px;font-size:13px!important;min-height:35px; }
.snack-choice { flex:1;min-height:123px;padding:12px;border-radius:25px;background:#fffdf0;box-shadow:0 5px 0 #c6bb9c;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-weight:700!important; }
.snack-art .concept-art { width:64px;height:64px; }
.hinted { outline:3px solid #93b885!important;outline-offset:2px;background:#f4ffd9!important; }
.name-choice { position:relative;background:#fffcf1;box-shadow:0 4px 0 #c9be9d;border-radius:22px;padding:13px 10px;flex:1;display:flex;align-items:center;flex-direction:column;gap:8px;font-size:17px!important;font-weight:700!important; }
.name-speaker { display:grid;place-items:center;background:#d7e6da;border-radius:50%;width:45px;height:45px; }
.name-choice:nth-child(2) .name-speaker { background:#f1dfbd; }
.name-speaker svg { width:26px;height:26px; }
.name-choice.is-selected { outline:3px solid #588d74;outline-offset:1px; }
.name-choice>svg { position:absolute;right:6px;top:6px;width:17px;height:17px;background:#53846b;color:white;border-radius:50%;padding:3px; }
.name-confirm { height:68px;width:100%;display:flex;align-items:center;justify-content:center; }
.name-confirm .concept-primary { min-height:60px;font-size:20px!important; }
.reward-ingredients { display:flex;align-items:center;gap:28px;margin:0 0 10px; }
.reward-ingredients>span { display:flex;flex-direction:column;align-items:center;gap:6px; }
.reward-ingredients .concept-art { width:43px;height:43px; }
.reward-ingredients small { font-size:13px;font-weight:700; }
.reward-rays { position:absolute;inset:0;background:repeating-conic-gradient(from 0deg,#fff1aa70 0deg 10deg,transparent 10deg 30deg);border-radius:50%;mask-image:radial-gradient(black,transparent 70%);pointer-events:none; }
.friend-medal { position:absolute;right:3%;top:10%;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;width:78px;height:78px;background:#ffe084;color:#956128;border:5px solid #fff0bd;border-radius:50%;transform:rotate(9deg);box-shadow:0 4px 0 #bd8e43;pointer-events:none; }
.friend-medal .concept-art { width:35px;height:35px; }
.friend-medal span { font-size:12px;font-weight:800; }
/* Three permanent beds flank the path. Scale, elevation and layering establish depth. */
.garden-layer { position:absolute;inset:0;pointer-events:none; }
.garden-bed { position:absolute;display:block;aspect-ratio:.8;background:transparent!important;padding:0;isolation:isolate;transform-origin:50% 92%;pointer-events:none; }
.garden-bed.planted-flower,.garden-bed.plantable { pointer-events:auto; }
.depth-0 { width:17%;right:0%;bottom:34%;z-index:1;filter:saturate(.82); }
.depth-1 { width:21%;left:-2%;bottom:17%;z-index:1; }
.depth-2 { width:25%;right:-3%;bottom:0%;z-index:3; }
.bed-shadow { position:absolute;bottom:1%;left:0;width:100%;height:12%;border-radius:50%;background:#4f643541;filter:blur(5px);transform:rotate(-9deg);z-index:-2; }
.bed-earth { position:absolute;bottom:5%;left:5%;width:90%;height:18%;border-radius:48% 60% 42% 50%;background:radial-gradient(ellipse at 45% 12%,#79985388,transparent 64%),radial-gradient(ellipse at 70% 65%,#826649,transparent 65%),#9a8056;box-shadow:inset 0 -4px 3px #65503830;transform:rotate(-6deg);z-index:-1; }
.bed-earth::before,.bed-earth::after { content:'';position:absolute;bottom:0;width:17%;height:40%;border-radius:48%;background:#a3ab80;box-shadow:inset -2px -2px 0 #77835d; }
.bed-earth::before { left:1%;transform:rotate(-20deg); }.bed-earth::after { right:0%;width:12%;background:#b8b49a; }
.bed-grass { position:absolute;bottom:9%;width:8%;height:16%;border-radius:90% 0 80% 0;background:#7e9a57;z-index:2;transform:rotate(-22deg); }
.grass-a { left:8%; }.grass-b { right:7%;transform:rotate(36deg);height:12%;background:#9caf6c; }
.garden-bed .garden-flower { position:absolute;bottom:10%;left:2%;width:96%;height:88%;object-fit:contain;transform-origin:50% 98%;filter:drop-shadow(3px 5px 2px #425c2428);pointer-events:none; }
.depth-0 .garden-flower { opacity:.94;filter:drop-shadow(2px 3px 2px #425c2420); }
.bed-sprout { position:absolute;bottom:17%;left:20%;width:60%;height:50%;display:grid;place-items:end center; }
.bed-sprout .concept-art { width:100%;height:100%; }
.plantable { min-width:56px;min-height:70px;cursor:pointer; }
.plantable .bed-earth { background:#b29463;box-shadow:0 0 0 3px #fff4c2b0,inset 0 -3px 0 #90784f; }
.plant-invitation { position:absolute;inset:0 0 12%;display:flex;align-items:center;justify-content:end;flex-direction:column;gap:3px; }
.plant-invitation .concept-art { width:35px;height:35px; }
.plant-invitation>span { font-size:12px;font-weight:700;background:#fff6d6;padding:3px 11px;border-radius:10px;box-shadow:0 2px 0 #977b4640; }
.plantable .garden-flower { opacity:.25; }
.plant-guidance { min-height:66px;display:flex;align-items:center;gap:12px;font-size:16px;font-weight:700; }
.plant-guidance .concept-art { width:30px;height:30px; }
.phase-grow .concept-primary { background:linear-gradient(#a9e1e8,#7cc8d8)!important;box-shadow:0 6px 0 #4d97ac,0 10px 18px #49869126;color:#245361!important; }
.growing-message { min-height:66px;display:grid;place-items:center;font-size:18px;font-weight:bold;color:#4e7e58; }
.water-drops { position:absolute;top:-10%;left:14%;display:flex;align-items:center;transform:rotate(-15deg);pointer-events:none; }
.water-drops .concept-art { width:20px;height:28px; }
.happy-heart { position:absolute;top:15%;right:4%;transform:rotate(13deg);z-index:3;pointer-events:none; }
.happy-heart .concept-art { width:43px;height:43px; }
.concept-particles { position:absolute;inset:0;pointer-events:none;z-index:6; }
.concept-particles>span { position:absolute;left:50%;top:45%;opacity:0;animation:concept-spark 1.3s calc(var(--i)*.03s) ease-out both; }
.concept-particles .concept-art { width:26px;height:26px; }
@keyframes concept-spark { 0% { opacity:0;transform:translate(0,0) scale(.4); } 20% { opacity:1; } 100% { opacity:0;transform:translate(var(--drift),-100px) rotate(35deg) scale(1.1); } }
@keyframes concept-bounce { 0%,100% { transform:translateY(0) rotate(0); } 35% { transform:translateY(-8px) rotate(-2deg); } 70% { transform:translateY(-3px) rotate(2deg); } }
@keyframes concept-breathe { 50% { transform:translateY(-3px) rotate(-.5deg); } }
@keyframes concept-feed { to { transform:translateY(-90px) scale(.1);opacity:0; } }
@keyframes sunflower-grow { from{transform:scale(.08) rotate(-15deg);opacity:.4;} 70%{transform:scale(1.08) rotate(5deg);opacity:1;} to{transform:scale(1) rotate(0);} }
@keyframes gentle-sway { 50%{transform:rotate(3deg);} }
@media(prefers-reduced-motion:no-preference) {
 .phase-welcome .concept-friend>img { animation:concept-breathe 3.2s ease-in-out infinite; }
 .concept-friend.is-bouncing>img,.flower-dance .garden-flower { animation:concept-bounce .65s ease-in-out 2!important; }
 .is-feeding .snack-art { animation:concept-feed .65s ease-in both; }
 .is-growing>.garden-flower { animation:sunflower-grow 1.6s cubic-bezier(.22,.75,.4,1) both; }
 .water-drops { animation:concept-spark 1.4s ease-in both;--drift:20px; }
 .planted-flower .garden-flower { animation:gentle-sway 5s ease-in-out infinite; }
 .depth-1 .garden-flower { animation-delay:-2s; }
}
@media(min-width:800px) {
 .concept-shell { background-size:100% auto;background-position:center 61%; }
 .concept-shell::before { background:linear-gradient(90deg,#dcf4de05,#f5f5d9b0 55%,#eff7dbcc); }
}
@media(max-width:799px) {
 .concept-shell { --stage-height:clamp(180px,35svh,360px); }
 .concept-top { padding:14px 20px 9px; }
 .concept-content { display:flex;flex-direction:column;width:100%;padding:6px 20px 0;gap:0;margin:auto;flex:none; }
 .concept-copy { padding:0;align-self:stretch; }
 .concept-kicker { font-size:12px;padding:5px 12px; }
 .concept-copy h1 { font-size:33px;letter-spacing:-.8px;margin:11px 0 8px; }
 .concept-subtitle { font-size:15px;max-width:310px;line-height:1.4;min-height:21px; }
 .concept-scene { flex:none;width:calc(100% + 40px);margin:8px -20px 4px;height:var(--stage-height);min-height:var(--stage-height); }
 .concept-friend { width:min(73%,calc(var(--stage-height) - 26px)); }
 .friend-bubble { right:4%;top:10%;font-size:17px;padding:9px 13px; }
 .friend-bubble .concept-art { width:20px;height:20px; }
 .pet-hint { bottom:1%;left:38%;font-size:10px; }
 .concept-controls { width:100%;padding:12px 0 9px;align-self:center;gap:10px; }
 .concept-primary { min-height:60px;max-width:340px;font-size:21px!important;border-radius:21px!important; }
 .concept-bottom { min-height:62px;margin:8px auto 0;gap:20px;padding:8px 20px max(12px,env(safe-area-inset-bottom)); }
 .concept-link { font-size:12px!important;gap:6px; }
 .concept-link svg { width:17px;height:17px; }
 .phase-meet { --stage-height:clamp(170px,32svh,335px); }
 .phase-name { --stage-height:clamp(155px,28svh,305px); }
 .phase-name .concept-copy h1 { font-size:31px; }
 .phase-name .concept-subtitle { font-size:14px; }
 .name-choice { padding:10px;font-size:16px!important;gap:5px; }
 .name-speaker { width:38px;height:38px; }
 .name-speaker svg { width:23px;height:23px; }
 .name-confirm { height:62px; }
 .name-confirm .concept-primary { min-height:54px;font-size:19px!important; }
 .number-choice { min-height:83px;gap:10px; }
 .number-choice strong { font-size:37px; }
 .choice-horns .concept-art { width:20px;height:30px; }
 .snack-choice { min-height:101px;padding:9px; }
 .snack-art .concept-art { width:54px;height:54px; }
 .quest-token { width:38px;height:38px;border-radius:14px; }
 .quest-token>.concept-art { width:26px;height:26px; }
 .reward-ingredients { margin-bottom:4px;gap:24px; }
 .reward-ingredients .concept-art { width:35px;height:35px; }
 .reward-ingredients small { font-size:12px; }
 .friend-medal { width:64px;height:64px;border-width:4px;right:5%; }
 .friend-medal .concept-art { width:29px;height:29px; }
 .friend-medal span { font-size:10px; }
 .depth-0 { width:16%;right:2%;bottom:38%; }
 .depth-1 { width:19%;left:0%;bottom:18%; }
 .depth-2 { width:24%;right:-1%;bottom:1%; }
 .plant-guidance { font-size:14px;min-height:60px; }
}
@media(max-height:710px) and (max-width:799px) {
 .concept-shell { --stage-height:clamp(160px,32svh,220px); }
 .phase-meet { --stage-height:clamp(150px,29svh,205px); }
 .phase-name { --stage-height:clamp(145px,27svh,190px); }
 .concept-top { padding-top:9px;padding-bottom:5px; }
 .concept-icon { width:42px;height:42px;border-radius:14px; }
 .concept-brand { font-size:10px; }.concept-brand span { font-size:17px; }
 .concept-copy h1,.phase-name .concept-copy h1 { font-size:27px;margin:9px 0 6px; }
 .concept-subtitle,.phase-name .concept-subtitle { font-size:13px; }
 .concept-primary { min-height:53px;font-size:18px!important;padding:11px 20px; }
 .concept-micro { font-size:10px; }
 .concept-controls { gap:8px;padding:10px 0 6px; }
 .concept-bottom { min-height:53px;margin-top:5px;padding-top:6px;padding-bottom:9px; }
 .quest-token { width:33px;height:33px;border-radius:12px; }.quest-token>.concept-art { width:24px;height:24px; }
 .name-choice { padding:8px;font-size:14px!important; }.name-speaker { width:32px;height:32px; }
 .name-confirm { height:56px; }.name-confirm .concept-primary { min-height:49px;font-size:17px!important; }
 .snack-choice { min-height:85px; }.snack-art .concept-art { width:43px;height:43px; }
 .number-choice { min-height:70px; }.number-choice strong { font-size:33px; }
 .counting-tray { height:27px; }.counted-horn .concept-art { width:26px;height:26px; }
 .reward-ingredients .concept-art { width:29px;height:29px; }
 .plant-guidance { min-height:53px; }.growing-message { min-height:53px;font-size:16px; }
 .concept-help { min-height:30px;font-size:12px!important; }
 .friend-medal { width:55px;height:55px;right:3%;top:3%; }
 .friend-bubble { right:2%;top:5%;font-size:15px; }
}
@media(prefers-reduced-motion:reduce) { .concept-particles>span { animation:none;opacity:0; }.concept-shell * { transition:none!important; } }
/* Keep the scene's positioning transform intact during a press. */
.concept-shell .concept-friend:active { transform:translate(-50%,-50%); }
.concept-shell .concept-art { stroke:none; }
.garden-bed:not(.planted-flower):not(.plantable):not(.growing-plant) { visibility:hidden; }
.planted-flower .bed-earth,.is-growing .bed-earth { opacity:0; }
.planted-flower .bed-grass,.is-growing .bed-grass { display:none; }
/* Short, replayable adventures retain the same clear scene/control separation. */
.adventure-choices { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%;max-width:410px; }
.adventure-choice { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:15px 8px;min-height:133px;background:#fffbed;border-radius:22px;box-shadow:0 5px 0 #c8bda0; }
.adventure-choice strong { font-size:15px; }.adventure-choice>span { font-size:11px;color:#6d8166; }
.saved-seed { display:flex;align-items:center;justify-content:center;gap:7px;background:#fffbdf;border-radius:16px;padding:7px 14px;font-size:13px!important;min-height:44px;margin-top:4px; }
.saved-seed .concept-art { width:25px;height:25px; }
.memory-board { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;max-width:350px; }
.memory-card { min-height:86px;background:#708f78;border-radius:20px;box-shadow:0 4px 0 #456c58;display:grid;place-items:center;padding:10px; }
.memory-card .card-back { width:100%;height:100%;border:1px solid #e7f2d95e;border-radius:12px;display:grid;place-items:center; }
.card-back .concept-art { opacity:.55;filter:brightness(1.5); }
.memory-card.face-up { background:#fffbeb;box-shadow:0 4px 0 #c6b990; }
.memory-card.is-matched { background:#e2eccf;box-shadow:0 3px 0 #a7bd89; }
.memory-card img { width:58px;height:58px;object-fit:contain; }
.picnic-tray { display:flex;justify-content:center;gap:9px;padding:14px;background:#fff6df;border:2px solid #e0c799;border-radius:28px;width:100%;max-width:365px;box-shadow:0 5px 0 #bc9f6f; }
.picnic-leaf { display:grid;place-items:center;min-width:48px;min-height:65px;flex:1;background:#f0e8cc;border-radius:18px; }
.picnic-leaf.is-eaten { background:#dae6c6;color:#71945c; }
.picnic-leaf .concept-art { width:46px;height:46px; }
.album-cards { display:flex;flex-direction:column;gap:10px;width:100%;max-width:360px; }
.album-card { display:flex;align-items:center;gap:14px;padding:9px 14px;min-height:62px;background:#fffbed;box-shadow:0 3px 0 #d3c6a6;border-radius:19px;text-align:right; }
.album-card>.concept-art,.album-card>img { width:42px;height:42px;object-fit:contain; }.album-card>svg:last-child { margin-right:auto;width:20px;height:20px; }
.seed-palette { display:flex;gap:12px;justify-content:center;margin:0 0 4px; }
.seed-color { background:#fff7e3;border-radius:18px;padding:6px;width:58px;height:62px;border:2px solid transparent!important; }
.seed-color img { width:100%;height:100%;object-fit:contain; }
.seed-color.chosen { border-color:#5e8a62!important;background:#e8efd5;box-shadow:0 2px 0 #a0b27f; }
.flower-color-rose .garden-flower,.seed-color.flower-color-rose img { filter:hue-rotate(290deg) saturate(.8); }
.flower-color-violet .garden-flower,.seed-color.flower-color-violet img { filter:hue-rotate(215deg) saturate(.75); }
@media(max-width:799px) {
 .phase-adventures,.phase-album,.phase-memory { --stage-height:clamp(150px,26svh,275px); }
 .phase-reward { --stage-height:clamp(150px,29svh,300px); }
 .adventure-choice { min-height:111px;padding:12px 5px; }.adventure-choice strong { font-size:13px; }.adventure-choice .concept-art { width:38px;height:38px; }
 .memory-card { min-height:73px;padding:8px;border-radius:17px; }.memory-card img { width:48px;height:48px; }.memory-card .concept-art { width:42px;height:42px; }
 .album-card { min-height:54px;padding:6px 12px; }.album-card>.concept-art,.album-card>img { width:35px;height:35px; }
 .phase-album .concept-copy h1,.phase-adventures .concept-copy h1 { font-size:30px; }
}
@media(max-height:710px) and (max-width:799px) {
 .phase-memory,.phase-adventures,.phase-album { --stage-height:130px; }
 .phase-reward { --stage-height:140px; }
 .adventure-choice { min-height:89px;gap:5px; }.adventure-choice strong { font-size:12px; }.adventure-choice .concept-art { width:28px;height:28px; }
 .memory-card { min-height:60px;padding:6px; }.memory-card img { width:38px;height:38px; }.memory-card .concept-art { width:34px;height:34px; }
 .memory-board { gap:8px; }.album-card { min-height:44px; }.album-card>.concept-art,.album-card>img { width:28px;height:28px; }
 .seed-color { width:48px;height:49px; }.seed-palette { gap:10px;margin:0; }
 .picnic-tray { padding:10px; }.picnic-leaf { min-height:54px;min-width:42px; }.picnic-leaf .concept-art { width:36px;height:36px; }
}
@keyframes friendly-stomp { 0%,100%{transform:rotate(0) translateY(0);}25%{transform:rotate(-3deg) translateY(-4px);}50%{transform:rotate(0) translateY(2px);}75%{transform:rotate(3deg) translateY(-4px);} }
@media(prefers-reduced-motion:no-preference) { .concept-friend.is-stomping>img { animation:friendly-stomp .7s ease-in-out 2!important; } }

/* All friends share the home clearing; the camera moves without shrinking their targets. */
.concept-shell.phase-welcome .concept-copy { top:12px;bottom:auto; }
.home-clearing { position:absolute;inset:112px 0 calc(var(--world-tray) + 73px);z-index:3;min-height:0; }
.home-herd { width:100%;height:100%;overflow-x:auto;overflow-y:hidden;direction:ltr;overscroll-behavior-x:contain;touch-action:pan-x pan-y;scrollbar-width:thin;scrollbar-color:#678761 #fffcec80;scroll-padding-inline:38px; }
.home-herd-track { display:flex;align-items:flex-end;justify-content:center;width:max-content;min-width:100%;height:100%;gap:12px;padding:10px 42px 10px;box-sizing:border-box; }
.concept-shell .home-dino { direction:rtl;position:relative;display:flex;flex:none;flex-direction:column;align-items:center;justify-content:flex-end;width:clamp(185px,27vw,320px);height:100%;max-height:390px;background:transparent;padding:0 4px 5px;touch-action:pan-x pan-y;user-select:none;border-radius:30px; }
.home-dino>img { display:block;width:100%;min-height:0;flex:1;object-fit:contain;object-position:center bottom;pointer-events:none;filter:drop-shadow(0 9px 5px #4c572539); }
.home-dino-label { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:66px;min-width:136px;padding:6px 12px;background:#fffcec;border:2px solid #c5bd92;border-radius:22px;box-shadow:0 3px 0 #8d9069;color:#233f32; }
.home-dino-label strong { font-size:16px; }
.home-dino-status { display:flex;align-items:center;justify-content:center;gap:6px;height:27px; }
.concept-shell .home-dino-status .concept-art,.home-dino-status>svg { width:25px;height:25px; }
.home-dino-status>img { width:28px;height:28px;object-fit:contain;filter:grayscale(1) contrast(1.35);opacity:.8; }
.home-dino-status>img.is-grown { filter:none;opacity:1; }
.home-dino[aria-pressed="true"] .home-dino-label { border-color:#3d6b43;background:#f3ffde;box-shadow:0 0 0 3px #f8ffcc,0 5px 0 #648354; }
.home-dino.is-locked>img { filter:grayscale(.5) saturate(.65) opacity(.75) drop-shadow(0 8px 4px #4c572524); }
.concept-shell .home-dino.is-locked { cursor:default; }
.home-dino.is-visitor .home-dino-label { border-color:#628848;background:#fff8cf; }
.concept-shell .home-camera { direction:ltr;unicode-bidi:isolate;position:absolute;top:50%;transform:translateY(-50%);width:46px;height:56px;display:grid;place-items:center;font-size:42px;line-height:1;background:#fffcec;border:2px solid #b3bb87;border-radius:22px;color:#33593b;box-shadow:0 3px 0 #78905d;z-index:4; }
.concept-shell .home-camera[hidden] { display:none; }
.home-camera-left { left:5px; }.home-camera-right { right:5px; }
.concept-shell .home-camera:disabled { opacity:.4;cursor:default; }
@media(max-width:799px) {
 .home-clearing { top:106px;bottom:calc(var(--world-tray) + 78px); }
 .concept-shell .home-dino { width:clamp(180px,43vw,260px); }
 .home-herd-track { gap:4px;padding-inline:34px; }
 .home-dino-label { min-width:130px;padding:5px 9px; }
 .home-dino-label strong { font-size:15px; }
}
@media(max-height:710px) and (max-width:799px) {
 .home-clearing { top:100px;bottom:calc(var(--world-tray) + 73px);min-height:0; }
 .home-dino-label { min-height:56px;gap:1px; }
 .home-dino-label strong { font-size:14px; }
 .home-herd-track { padding-top:4px;padding-bottom:8px; }
}