/* ===== v7.1 day-one polish (Flow review) ===== */
/* 2: home = 2x3 grid above a reserved bottom bar (pod centre, sound/gear corners) */
#logo{margin:calc(env(safe-area-inset-top) + 66px) auto 0;width:min(64vw,280px)}
#home .logoimg{background:none;box-shadow:none;padding:0}
#home .bigbtns{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:repeat(2,auto);gap:30px 6vw;align-content:center;justify-content:center;padding:8px 12px calc(112px + env(safe-area-inset-bottom))}
#home .big{--t:min(37vw,calc((100dvh - 150px - 112px - 110px) / 3),180px);width:var(--t);height:var(--t);border-radius:36px}
#home .big .tlbl{bottom:-12px;font-size:15px;padding:3px 12px}
@media (orientation:landscape) and (max-height:900px){#logo{margin-top:8px;width:min(36vw,220px)}#home .bigbtns{grid-template-columns:repeat(3,auto);padding-bottom:100px}#home .big{--t:min(24vh,22vw,150px)}}
/* idle invite on Slime (first launch) */
#goSlime.invite{animation:invite 2s ease-in-out 3}@keyframes invite{0%,100%{transform:scale(1)}50%{transform:scale(1.06);box-shadow:0 0 0 8px #fff8,0 10px 0 #0002}}
/* 7: contrast — white text needs >=4.5:1 */
.txt.go,.donebtn{background:#c2417f;color:#fff}
.avb.on,.lvb.on{border-color:#c2417f}
/* 5: pour palette wraps 5 per row, soft progress dots instead of "3 of 5" */
.prrow{flex-direction:column;gap:2px;padding:0 0 calc(6px + env(safe-area-inset-bottom))}
#prpal{width:100%}
.prdots{display:flex;gap:8px;justify-content:center;padding:2px 0 4px}.prdots i{width:12px;height:12px;border-radius:50%;border:2px solid #8e6c8a;background:transparent}.prdots i.on{background:#8e6c8a}
/* 6: pottery glazes full strength at rest; only the top bar fades while shaping */
#pottery .pal,#pottery.playing .pal{opacity:1}
#potpal .sw{border-color:#fff;box-shadow:0 0 0 1px #0002}
/* 9: Paint Pod reveal stage */
.dstage .rglow{position:absolute;left:50%;top:44%;width:min(100vmin,600px);height:min(100vmin,600px);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#ffd9a899 0,#ffd9a899 28%,#ffe3ef66 45%,#ffffff00 62%);animation:glow 3s ease-in-out infinite;pointer-events:none}
@keyframes glow{50%{transform:translate(-50%,-50%) scale(1.06);opacity:.85}}
.dstage .reveal,.dstage h2,.dstage .dhint,.dstage .drow{position:relative}
.dstage.pop .reveal{animation:popin .5s cubic-bezier(.3,1.6,.5,1),hop .55s ease-out .45s}
@keyframes hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-26px) scale(1.03,.97)}70%{transform:translateY(0) scale(.98,1.03)}}
.dstage h2.rname{color:#b83a76;animation:fadeup .5s ease-out .5s both}@keyframes fadeup{from{opacity:0;transform:translateY(8px)}}
/* NTH: wiggle goal message sits in the top bar, not over play */
body.onwiggle #saved{top:calc(env(safe-area-inset-top) + 84px);font-size:16px;padding:8px 16px;transform:translate(-50%,0) scale(0)}
body.onwiggle #saved.show{transform:translate(-50%,0) scale(1)}
/* NTH: reduced motion covers every animation (CSS); JS uses window.RM */
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.15s!important;transition-property:opacity!important}
 .dstage.pop .reveal,.dstage h2.rname{animation:fadein .4s ease both!important}@keyframes fadein{from{opacity:0}}
 .dstage .rglow{animation:none!important}
 .steam{display:none}
 .fridge.in,.fridge.out{transform:translate(-50%,-50%)}
}

/* v7.1b: one sparkle after the hop (static when reduced motion) */
.dstage .rspark{position:absolute;left:calc(50% + min(22vmin,130px));top:calc(44% - min(26vmin,150px));width:44px;height:44px;opacity:0;animation:spark 1.2s ease-out 1s both;pointer-events:none}
@keyframes spark{0%{opacity:0;transform:scale(.3) rotate(0)}40%{opacity:1;transform:scale(1.1) rotate(20deg)}100%{opacity:.9;transform:scale(1) rotate(0)}}
@media (prefers-reduced-motion:reduce){.dstage .rspark{animation:none!important;opacity:.9}}
/* Fact buddy */
#stage{position:relative}
#stage.hasbuddy{padding-top:130px}
#fpal{position:absolute;right:8px;top:6px;left:8px;justify-content:flex-end;height:122px;z-index:6;display:flex;flex-direction:row;align-items:flex-start;gap:4px;pointer-events:none}
#fpal[hidden]{display:none}
#fpal .fp-crit{pointer-events:auto;width:92px;height:92px;padding:0;border:0;background:none;border-radius:46px;filter:drop-shadow(0 4px 8px #6a4a9040);animation:fpwig 9s ease-in-out infinite;transform-origin:50% 100%;-webkit-tap-highlight-color:transparent}
#fpal .fp-crit svg{width:100%;height:100%;display:block}
#fpal .fp-crit:active{transform:scale(.94)}
#fpal .fp-mouth{opacity:0;transform-origin:60px 88px}
#fpal.talk .fp-mouth{opacity:1;animation:fptalk .26s ease-in-out infinite alternate}
#fpal.talk .fp-smile{opacity:0}
#fpal.talk .fp-crit{animation:none;filter:drop-shadow(0 0 14px #ffd9a8) drop-shadow(0 4px 8px #6a4a9040)}
#fpal .fp-bub{pointer-events:auto;position:relative;margin-top:10px;background:#fff;border:3px solid #2b2240;border-radius:18px;padding:6px 12px;font:800 20px system-ui;color:#2b2240;box-shadow:0 4px 12px #6a4a9030;max-width:min(calc(100% - 104px),460px);max-height:118px;overflow:auto;box-sizing:border-box}
#fpal .fp-bub:after{content:'';position:absolute;right:-10px;top:16px;border:8px solid transparent;border-left-color:#2b2240}
#fpal .fp-txt{display:none;font:700 14px/1.25 system-ui}
#fpal.open .fp-dots{display:none}#fpal.open .fp-txt{display:block}
#fpal.open .fp-bub{padding:7px 12px;margin-top:2px}
@keyframes fpwig{0%,88%,100%{transform:rotate(0)}91%{transform:rotate(-7deg)}94%{transform:rotate(6deg)}97%{transform:rotate(-3deg)}}
@keyframes fptalk{from{transform:scaleY(.35)}to{transform:scaleY(1.05)}}

@media (prefers-reduced-motion:reduce){#fpal .fp-crit,#fpal.talk .fp-mouth{animation:none}}
/* Wide/landscape: buddy sits in the side gap next to the picture instead of reserving a top strip */
@media (min-aspect-ratio:5/4){
#stage.hasbuddy{padding-top:0}
#fpal{left:auto;right:10px;top:8px;width:min(230px,calc((100% - 100vh * .62) / 2));height:auto;flex-direction:column-reverse;align-items:flex-end}
#fpal .fp-bub{max-width:100%;max-height:none;overflow:visible;margin-top:6px}
#fpal .fp-bub:after{right:30px;top:-10px;border-left-color:transparent;border-bottom-color:#2b2240}
#fpal .fp-txt{font:700 16px/1.3 system-ui}
}
@media (max-width:400px) and (max-aspect-ratio:5/4){#fpal{left:4px;right:4px}#fpal .fp-txt{font:700 13px/1.22 system-ui}#fpal.open .fp-bub{padding:6px 10px}#fpal .fp-bub{max-width:calc(100% - 96px)}}
/* v7.2: landscape — reserve a side column for the buddy so it never covers the picture */
@media (min-aspect-ratio:5/4){
#stage.hasbuddy{padding-right:max(200px,min(250px,30vw))!important}
#fpal{top:8px;bottom:8px;right:8px;width:calc(max(200px,min(250px,30vw)) - 16px);max-width:none;justify-content:flex-start;box-sizing:border-box;overflow:hidden}
#fpal .fp-crit{flex:none}
#fpal .fp-bub{flex:0 1 auto;min-height:0;min-width:160px;width:100%;max-height:100%;overflow-x:hidden;overflow-y:auto;overflow-wrap:anywhere}
}
@media (min-aspect-ratio:5/4) and (max-height:500px){
#stage.hasbuddy{padding-right:176px!important}
#fpal{width:168px;right:4px;top:4px;bottom:4px;gap:2px}
#fpal .fp-crit{width:68px;height:68px}
#fpal .fp-bub{min-width:150px;padding:5px 9px}
#fpal .fp-txt{font:700 13px/1.25 system-ui}
}
#fpal .fp-bub{overflow-x:hidden}
/* v7.3: short landscape phones — slim chrome so the picture fills the height; buddy + bubble live in the side margin right of the picture */
@media (orientation:landscape) and (max-height:500px) and (min-aspect-ratio:5/4){
#color{--b:48px;--g:6px}
#color .bar{gap:6px;padding:6px 0 6px 6px!important}
#color .pal{--sw:48px;gap:6px;padding:6px}
#stage,#stage.hasbuddy{padding:6px 4px 6px 8px!important;justify-content:center}
#fpal{flex-direction:column!important;justify-content:flex-start!important;left:calc(var(--sqr,60%) + 10px)!important;right:4px!important;width:auto!important;top:6px;bottom:6px;align-items:flex-start;gap:4px}
#fpal .fp-crit{width:50px!important;height:50px!important;order:0}
#fpal .fp-bub{order:1;margin-top:8px!important}
#fpal .fp-bub{min-width:0!important;width:100%;max-height:100%;overflow-x:hidden;overflow-y:auto}
#fpal .fp-bub:after{right:auto;left:16px}
#fpal .fp-txt{font:700 14px/1.3 system-ui}
#color .bar.top{grid-template-columns:var(--b)}
#fpal .fp-bub{max-height:calc(100% - 66px)}
}

/* v7.3: no bare '?' bubble — bubble only appears once a fact is open */
#fpal:not(.open) .fp-bub{display:none!important}
/* v7.3 portrait: picture sits right under the buddy strip (no dead gap above it) */


/* v7.3b: buddy strip gone — picture gets the space back */
#stage.hasbuddy{padding:revert-layer}
#fpal{display:none!important}
#tFact svg{width:80%;height:80%}

/* ===== v7.4 (Flow re-review) ===== */
/* undo hidden until there is something to undo (keeps its slot so nothing jumps) */
#undo:disabled{visibility:hidden}
/* fact button reads as "listen": speaker badge, one bob when a fact is there, glow while talking */
#tFact{position:relative;overflow:visible}
#tFact .spk{position:absolute;right:-4px;bottom:-4px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #2b2240;display:flex;align-items:center;justify-content:center;pointer-events:none}
#tFact .spk svg{width:15px;height:15px}
#tFact.bob{animation:fbob 1s ease-in-out .4s 1}
@keyframes fbob{0%,100%{transform:translateY(0)}35%{transform:translateY(-8px)}65%{transform:translateY(0) scale(1.04,.96)}}
#tFact.talk{background:#fff4d6;box-shadow:0 0 0 3px #ffc94a,0 0 18px 4px #ffd98a}
#tFact.talk .spk{background:#ffc94a}
@media (prefers-reduced-motion:reduce){#tFact.bob{animation:none}}
/* portrait: one top bar, picture pinned under it, tools (64px) just above the colours */
@media not ((orientation:landscape) and (max-height:900px)){
#color.active{display:flex;flex-direction:column}
#color .bar.top{order:0}
#color .stage{order:1;flex:1 1 0;align-items:flex-start;padding-top:2px}
#color .bar.tools{order:2;--b:min(64px,calc((100vw - 32px) / 5));display:flex;justify-content:center;gap:6px;padding:8px 4px 6px}
#color .pal{order:3}
}
/* landscape phones: nav column + tool column mirror the 2x5 colour grid, both centred */
@media (orientation:landscape) and (max-height:900px){
#color .bar.top,#color .bar.tools{grid-template-columns:var(--b)!important;grid-template-rows:repeat(5,var(--b));grid-auto-rows:var(--b);align-content:center}
#color .bar.top{grid-template-rows:repeat(4,var(--b))}
}
/* v7.4: controls never dim while playing */
#draw.playing .bar,#draw.playing .szrow,#draw.playing .pal,#slime.playing .bar,#slime.playing .pal,#pottery.playing .bar,#pottery.playing .pal{opacity:1!important}
#view .bar{display:flex}#view .vsp{flex:1}#vDel{position:relative}
#dpal .sw[style*="rgb(255, 255, 255)"]{box-shadow:0 0 0 2px #2b224033}
/* v7.4: landscape phones — Draw, Slime, Pour, Pottery reuse Color's layout (tools left, canvas centre, colours right) */
@media (orientation:landscape) and (max-height:900px){
#draw.active,#slime.active,#pour.active,#pottery.active{display:grid;grid-template-rows:1fr auto auto 1fr;--b:min(48px,calc((100dvh - 36px) / 5));--g:6px}
#draw.active{grid-template-columns:auto auto 1fr auto}
#slime.active{grid-template-columns:auto auto 1fr auto}
#pour.active,#pottery.active{grid-template-columns:auto 1fr auto}
#draw .bar,#slime .bar,#pour .bar,#pottery .bar{display:grid!important;grid-template-columns:repeat(2,var(--b));grid-auto-rows:var(--b);align-content:center;justify-content:center;gap:6px;padding:6px 0 6px 6px!important;grid-row:1/-1;flex-wrap:nowrap}
#draw .bar.tools,#slime .bar.tools{grid-template-columns:var(--b)}
#draw .bar.top{grid-column:1}#draw .bar.tools{grid-column:2}#draw .stage{grid-column:3;grid-row:1/-1}#draw .szrow{grid-column:4;grid-row:2;display:flex;justify-content:center;gap:6px;padding:6px}#draw .szrow .szb{width:44px;height:44px}#draw .pal{grid-column:4;grid-row:3;grid-template-columns:repeat(3,var(--sw));--sw:40px;gap:6px;padding:6px}
#slime .bar.top{grid-column:1}#slime .bar.tools{grid-column:2}#slime .stage{grid-column:3;grid-row:1/-1}#slime .pal{grid-column:4;grid-row:1/-1}
#pour .bar.top,#pottery .bar.top{grid-column:1}#pour .stage,#pottery .stage{grid-column:2;grid-row:1/-1;min-height:0}#pour .prrow{grid-column:3;grid-row:1/-1;justify-content:center}#pottery .pal{grid-column:3;grid-row:1/-1}
#slime .pal,#pottery .pal,#pour .pal{grid-template-columns:repeat(2,var(--sw));--sw:48px;align-content:center;gap:6px;padding:6px}
#slVol{display:none}
/* home: artist pill off the logo, egg clear of the Pour label */
#who2{position:absolute;left:calc(14px + env(safe-area-inset-left));top:calc(10px + env(safe-area-inset-top));right:auto;transform:none}
#dumpGo{left:auto;right:calc(110px + env(safe-area-inset-right));transform:none;bottom:calc(14px + env(safe-area-inset-bottom))}
}

/* ===== v7.5 (Flow v74 review) ===== */
/* portrait dock: tools (68x80 pills) + colours on one cream tray, 24px below the picture */
@media (orientation:portrait){
#color .stage{flex:0 1 auto;height:calc(100vw - 14px);min-height:0}
#color .bar.tools{flex:1 1 auto;align-items:center;margin-top:24px;padding:14px 4px 0;gap:8px;background:rgba(255,248,240,.7);border-radius:24px 24px 0 0}
#color .bar.tools .ib{width:68px;height:80px;border-radius:22px}
#color .pal{row-gap:14px;padding:14px var(--g) calc(14px + env(safe-area-inset-bottom));background:rgba(255,248,240,.7)}
}
@media (orientation:portrait) and (max-width:370px){#color .bar.tools .ib{width:64px;height:76px}}
@media (orientation:landscape) and (max-height:900px){
/* Draw: top | tools | sizes | canvas | 2x7 colours */
#draw.active{grid-template-columns:auto auto auto 1fr auto!important;grid-template-rows:100%!important}
#draw .bar.top{grid-column:1}#draw .bar.tools{grid-column:2}
#draw .szrow{grid-column:3!important;grid-row:1!important;flex-direction:column;justify-content:center!important;align-items:center;padding:6px 0 6px 6px!important}
#draw .stage{grid-column:4!important;grid-row:1!important}
#draw .pal{grid-column:5!important;grid-row:1!important;grid-template-columns:repeat(2,var(--sw))!important;--sw:min(44px,calc((100dvh - 48px) / 7))!important;align-content:center}
/* Pottery: one centred 56px column */
#pottery.active{grid-template-rows:100%!important}
#pottery .bar.top{grid-template-columns:56px!important;grid-auto-rows:56px!important;align-content:center}
#pottery .bar.top .ib{width:56px;height:56px}
#pottery .stage,#pottery .pal{grid-row:1!important}
/* Slime: sounds column + mix-ins column */
#slime.active{grid-template-rows:100%!important}
#slime .bar.top{grid-template-columns:var(--b)!important;grid-auto-rows:var(--b);align-content:center}
#slime .stage,#slime .pal,#slime .bar.tools{grid-row:1!important}
/* Pour: 2+2+1 */
#pour.active{grid-template-rows:100%!important}
#pour .bar.top{grid-template-columns:repeat(2,var(--b))!important;justify-items:center;align-content:center}
#pour .bar.top>.ib:last-child{grid-column:1/-1}
#pour .stage,#pour .prrow{grid-row:1!important}
/* Home: pod back at bottom centre, tiles leave room for it */
#dumpGo{left:50%!important;right:auto!important;transform:translateX(-50%)!important;width:64px;height:64px;bottom:calc(6px + env(safe-area-inset-bottom))!important}
#home .bigbtns{padding-bottom:84px!important;gap:22px 6vw!important}#home .big{--t:min(21vh,20vw,130px)!important}
}