/* V1.16.0: scoped presentation; original themes and learning geometry remain intact. */
.duffy-only{display:none}
.df-friend{display:block;position:relative;width:120px;aspect-ratio:1;flex-shrink:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;transform-origin:50% 85%;isolation:isolate}
.df-art{display:block;width:100%;height:100%;background:url('assets/duffy-friends.webp') no-repeat;background-size:300% 300%;background-position:calc(var(--df-col)*50%) calc(var(--df-row)*50%);filter:drop-shadow(0 4px 3px #58310a15)}
.df-friend:focus-visible{outline:3px solid var(--focus);outline-offset:-4px;border-radius:28px}
.theme-choice.duffy-choice{grid-column:1/-1;display:flex;align-items:center;text-align:left;gap:10px;padding:10px 14px;background:linear-gradient(110deg,var(--hero-a),var(--mint-a));overflow:hidden;min-height:115px}
.duffy-choice .df-choice-scene{display:block;position:relative;flex:0 0 47%;height:98px;max-width:230px}
.df-choice-scene .df-friend{position:absolute;width:70%;bottom:-7px}.df-mini-duffy{left:15%;z-index:1}.df-mini-cookie{left:-13%;z-index:2}.df-mini-lina{right:-14%;z-index:2}
.df-choice-copy{flex:1;min-width:0}.theme-choice.duffy-choice b{font-size:clamp(21px,5vw,29px);margin:0 0 5px}.theme-choice.duffy-choice small{font-size:13px;line-height:1.5}.duffy-choice .theme-swatches{display:none}
/* The fixed spacer remains exclusively in top-offset.css. */
:root[data-character=duffy]{--bg:#fff9eb;--card:#fffdf5;--text:#52260f;--muted:#866347;--line:#edcdad;--accent:#8860ab;--accent2:#c187aa;--primary-bg:#d85e91;--title-blue:#52260f;--surface:#fff0dc;--surface-soft:#fff9ed;--accent-soft:#f3e1f1;--accent-line:#eccdaf;--focus:#8860ab;--hero-a:#fff0bd;--hero-b:#fff3d5;--hero-c:#ffe8b1;--rose-a:#ffe3e7;--rose-b:#ffd4da;--rose-line:#f3b7c7;--mint-a:#e8f9df;--mint-b:#dcf7dd;--mint-line:#b3dcb7;--purple-a:#f5eafd;--purple-b:#f0e2fc;--purple-line:#d8bde9;--peach-a:#fff5d8;--peach-b:#ffedbc;--peach-line:#eed098;--violet-bg:#f0e2fc;--violet-text:#704278;--nav-bg:#fff9eb;--good-bg:#e3f8df;--good:#267b47;--bad-bg:#ffe9db;--bad:#984320;--warm-bg:#fff0bd;--warm-text:#785019;--warm-line:#e4c695;--target-bg:#ffe2a6;--target-text:#7b3813;--progress-track:#edddcf;--df-tint:transparent;--df-gloss:#fff9}
@media(prefers-color-scheme:dark){:root[data-character=duffy]{--bg:#271d22;--card:#382b30;--text:#fff2d7;--muted:#dcc3b4;--line:#8b6651;--accent:#d6b4fa;--accent2:#d5a0cb;--primary-bg:#b94c7b;--title-blue:#fff2d7;--surface:#49343d;--surface-soft:#352931;--accent-soft:#61445c;--accent-line:#8b6651;--focus:#d6b4fa;--hero-a:#51452d;--hero-b:#4d3b2e;--hero-c:#5c472a;--rose-a:#65434b;--rose-b:#553940;--rose-line:#b27b87;--mint-a:#405844;--mint-b:#344b3b;--mint-line:#8ebd99;--purple-a:#564062;--purple-b:#4d3b5c;--purple-line:#a58bb6;--peach-a:#5d492b;--peach-b:#4e3c25;--peach-line:#bb9c66;--violet-bg:#514059;--violet-text:#f3dfff;--nav-bg:#271d22;--good-bg:#304d3a;--good:#a7edb2;--bad-bg:#594032;--bad:#ffc6a3;--warm-bg:#51452d;--warm-text:#ffe0ad;--warm-line:#a78155;--target-bg:#725032;--target-text:#fff2d7;--progress-track:#6f5358;--df-tint:#1b163b38;--df-gloss:#ffffff18}}
:root[data-character=duffy],:root[data-character=duffy] body{background:var(--bg)!important;overscroll-behavior-y:none}
:root[data-character=duffy] .app{padding-top:0}
:root[data-character=duffy] .duffy-only{display:block}
:root[data-character=duffy] #screen-home>.welcome{display:none}
:root[data-character=duffy] .brand-decoration,:root[data-character=duffy] .brand-logo>*,:root[data-character=duffy] .appearance-open>*,:root[data-character=duffy] .practice-decoration,:root[data-character=duffy] .story-decor,:root[data-character=duffy] .sunshine{display:none!important}
:root[data-character=duffy] .brand-logo::after{content:'★';color:#f0bd42;font-size:29px;-webkit-text-stroke:1px #be8f32;transform:rotate(-12deg)}
:root[data-character=duffy] .appearance-open::after{content:'✿';font-size:39px;line-height:1;color:#e6819a;text-shadow:0 2px #a5557333}
:root[data-character=duffy] .storybook-brand{min-height:59px;padding-top:2px}
:root[data-character=duffy] .brand-subtitle{font-size:12px;letter-spacing:.06em}
:root[data-character=duffy] #homeCloudStatus{margin:0 auto 5px}
:root[data-character=duffy] #homeCloudTitle{font-size:12px}
:root[data-character=duffy] .df-hero{height:clamp(272px,72vw,400px);position:relative;margin:0 -8px 12px;border-radius:0 0 32px 32px;isolation:isolate;overflow:clip;background:linear-gradient(var(--df-tint),var(--df-tint)),url('assets/duffy-garden.webp') center 53%/cover}
.df-hero::before{content:'';position:absolute;inset:0 0 auto;height:32%;background:linear-gradient(var(--bg),transparent);pointer-events:none;z-index:1}
.df-hero h2{position:absolute;top:10px;left:7%;z-index:4;margin:0;line-height:1.25;font-size:clamp(27px,7.4vw,42px);transform:rotate(-4deg);color:#55260d;text-shadow:0 1px 6px #fff8e6}
@media(prefers-color-scheme:dark){.df-hero h2{color:#fff2d7;text-shadow:0 2px 7px #34214f}}
.df-hero-friends{position:absolute;inset:0}.df-hero-friends .df-friend{position:absolute;bottom:0}.df-hero-duffy{width:53%;left:24%;z-index:2}.df-hero-friends .df-hero-cookie{width:47%;left:-3%;bottom:-3%;z-index:3}.df-hero-friends .df-hero-lina{width:47%;right:-4%;bottom:-3%;z-index:3}
.df-spark{position:absolute;z-index:4;pointer-events:none;font-size:25px;color:#ffe36b;text-shadow:0 0 4px #fff8}.df-s1{top:12%;right:28%}.df-s2{right:5%;top:35%}
:root[data-character=duffy] #screen-home>.hero{position:relative;border-radius:25px;padding:12px 12px 10px;margin-bottom:12px;background:linear-gradient(125deg,var(--card),var(--hero-b));overflow:visible}
.df-progress-friend{position:absolute;right:-2px;top:-30px;width:92px;z-index:3;pointer-events:none}
:root[data-character=duffy] #screen-home>.hero .progress-heading{padding-right:64px;min-height:40px}
:root[data-character=duffy] .progress-heading h3{font-size:clamp(20px,5.5cqw,29px)}
:root[data-character=duffy] #screen-home>.hero .hero-scope{position:absolute;right:13px;bottom:9px;font-size:10px;max-width:34%}
:root[data-character=duffy] #screen-home>.hero .progress-foot{padding-right:31%;font-size:11px}
:root[data-character=duffy] .progress-heading .art-icon{display:inline-block!important}
:root[data-character=duffy] .scope-drawer{border-radius:21px;margin-bottom:14px}
:root[data-character=duffy] .scope-drawer summary strong svg{display:inline-block!important}
:root[data-character=duffy] .scope-drawer>summary{min-height:52px}
:root[data-character=duffy] #screen-home>.practice-title{margin:12px 4px 10px}
:root[data-character=duffy] .practice-title h3>.theme-art{display:none}
:root[data-character=duffy] #screen-home .actions{gap:10px 8px}
:root[data-character=duffy] #screen-home .action-card{border-radius:23px;min-height:82px;height:82px;padding:3px 5px 3px 0;border-color:var(--df-gloss);box-shadow:inset 0 2px 4px var(--df-gloss),0 3px 0 #b8863c26}
:root[data-character=duffy] #screen-home .action-card b{gap:0;font-size:clamp(16px,4.65cqw,25px);letter-spacing:-.02em}
:root[data-character=duffy] .practice-art{background-image:url('assets/duffy-friends.webp');background-size:300% 300%;width:20cqw;height:20cqw;flex-basis:20cqw;max-width:96px;max-height:96px;transform-origin:50% 85%}
:root[data-character=duffy] .art-0{background-position:100% 50%}:root[data-character=duffy] .art-1{background-position:50% 50%}:root[data-character=duffy] .art-2{background-position:100% 0}:root[data-character=duffy] .art-3{background-position:0 100%}:root[data-character=duffy] .art-4{background-position:50% 0}:root[data-character=duffy] .art-5{background-position:0 0}:root[data-character=duffy] .art-6{background-position:0 50%}:root[data-character=duffy] .art-7{background-position:0 100%}
:root[data-character=duffy] [data-character-image]{background:url('assets/duffy-friends.webp') no-repeat;background-size:300% 300%;background-position:calc(var(--df-col,2)*50%) calc(var(--df-row,0)*50%);object-fit:contain;aspect-ratio:1}
:root[data-character=duffy] .quiz-card::after{background-image:url('assets/duffy-friends.webp')!important;background-size:300% 300%!important;background-position:100% 0!important;aspect-ratio:1}
:root[data-character=duffy] .quiz-card.finished::after{display:none}
.df-family{position:relative;height:clamp(190px,58cqw,310px);max-width:530px;margin:0 auto 14px;background:linear-gradient(var(--df-tint),var(--df-tint)),url('assets/duffy-garden.webp') center/cover;border-radius:25px;overflow:hidden}
.df-family .df-friend{position:absolute;width:29%;bottom:3%}.df-final-3{left:12%;bottom:32%!important}.df-final-6{right:18%;bottom:32%!important}.df-final-5{left:0;bottom:10%!important}.df-final-4{right:0;bottom:16%!important}.df-family .df-final-0{left:31%;width:37%;z-index:2}.df-final-1{left:11%;bottom:-2%!important;z-index:3}.df-final-2{right:8%;bottom:-2%!important;z-index:3}
:root[data-character=duffy] .df-family~.finish-mascot,:root[data-character=duffy] .empty:has(.df-family)>.finish-mascot,:root[data-character=duffy] .empty:has(.df-family)>.empty-mascot{display:none}
.df-party{position:fixed;right:8px;bottom:calc(80px + env(safe-area-inset-bottom));width:160px;height:125px;pointer-events:none;z-index:50}.df-party .df-friend{position:absolute;width:115px;bottom:0}.df-party .df-friend:first-child{left:-16px}.df-party .df-friend:last-child{right:-17px}
.df-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit;z-index:6}.df-confetti i{position:absolute;top:-18px;left:var(--x);width:8px;height:13px;background:var(--c);border-radius:3px;animation:df-fall 1.8s var(--delay) ease-in both}
.df-greeting{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);max-width:90%;padding:6px 13px;background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:22px;font-size:14px;white-space:nowrap;z-index:7;pointer-events:none;box-shadow:0 2px 9px #0001}
:root[data-character=duffy][data-motion=on] .df-friend.df-visible{animation:df-sway 4.8s ease-in-out infinite}:root[data-character=duffy][data-motion=on] .df-hero-duffy.df-visible{animation:df-breathe 4.2s ease-in-out infinite}:root[data-character=duffy][data-motion=on] .df-hero-cookie{animation-delay:-1s!important}:root[data-character=duffy][data-motion=on] .df-hero-lina{animation-delay:-2.4s!important}
:root[data-character=duffy][data-motion=on] .df-tapped,:root[data-character=duffy][data-motion=on] .df-party .df-friend{animation:df-jump .6s ease-in-out 2!important}
:root[data-character=duffy][data-motion=on] .df-spark{animation:df-twinkle 4s ease-in-out infinite}
:root[data-df-paused=true] .df-friend,:root[data-df-paused=true] .df-spark{animation-play-state:paused!important}
@keyframes df-sway{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(2deg) translateY(-4px)}}
@keyframes df-breathe{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-6px) rotate(1.5deg)}}
@keyframes df-jump{0%,100%{transform:translateY(0)}40%{transform:translateY(-12px) rotate(5deg)}70%{transform:translateY(-2px) rotate(-3deg)}}
@keyframes df-twinkle{0%,100%{opacity:.55;transform:translateY(0)}50%{opacity:1;transform:translateY(-6px) rotate(15deg)}}
@keyframes df-fall{0%{opacity:0;transform:translateY(0)}15%{opacity:1}100%{opacity:0;transform:translate(var(--drift),250px) rotate(220deg)}}
@media(min-width:900px) and (orientation:landscape){:root[data-character=duffy] .app{max-width:1100px;padding-left:20px;padding-right:20px}:root[data-character=duffy] #screen-home.active{grid-template-columns:43% 1fr;grid-template-rows:auto auto auto;gap:14px 20px}:root[data-character=duffy] .df-hero{grid-column:1;grid-row:1/3;height:350px;margin:0;border-radius:30px}:root[data-character=duffy] .df-hero h2{font-size:33px}:root[data-character=duffy] #screen-home>.hero{grid-column:2;grid-row:1;margin:0;align-self:stretch}:root[data-character=duffy] #screen-home>.scope-drawer{grid-column:2;grid-row:2;margin:0}:root[data-character=duffy] #screen-home>.practice-title{grid-column:1/-1;grid-row:3;margin:0}:root[data-character=duffy] #screen-home>.actions{grid-column:1/-1;grid-row:4;margin-top:-14px;grid-template-columns:repeat(4,minmax(0,1fr))}:root[data-character=duffy] .brand-subtitle{font-size:15px}:root[data-character=duffy] #screen-home .action-card{height:95px;min-height:95px}:root[data-character=duffy] #screen-home .action-card b{font-size:23px}:root[data-character=duffy] .practice-art{width:90px;height:90px;flex-basis:90px}:root[data-character=duffy] .progress-heading h3{font-size:29px}:root[data-character=duffy] #screen-home>.hero .hero-scope{font-size:12px}.df-progress-friend{width:110px;top:-23px}.theme-choice.duffy-choice{min-height:140px}}
@media(max-width:360px){:root[data-character=duffy] #screen-home .action-card{height:72px;min-height:72px}:root[data-character=duffy] .df-hero h2{font-size:26px}.df-progress-friend{width:80px;top:-22px}.theme-choice.duffy-choice{padding:8px;gap:6px}.theme-choice.duffy-choice small{font-size:11px}.df-party{width:135px;height:100px}.df-party .df-friend{width:95px}}
@media(prefers-reduced-motion:reduce){.df-friend,.df-spark,.df-confetti i{animation:none!important}.df-confetti{display:none}}