/* The Sewing Station — world styles (base shared with Creation Station, Sunny Street, the Grocery Store and the Farm) (Engine 2). Shared pieces come from ../engine/engine.css. */
main{position:fixed;z-index:10;left:0;right:0;top:var(--bar);bottom:0;padding:18px max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));outline:none}
body.titled main{top:0;padding:0}
/* ---------- Title (the stitched page) ---------- */
.title{position:absolute;inset:0;display:flex;align-items:flex-end;padding:0 0 calc(7.5vh + 26px) max(5vw,20px)}
.title::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,10,22,.88) 0%,rgba(4,10,22,.55) 38%,transparent 66%),linear-gradient(0deg,rgba(4,10,22,.75),transparent 45%);pointer-events:none}
.title-in{position:relative;max-width:min(620px,92vw)}
.title .logo{width:clamp(76px,10vh,116px);height:auto;margin-bottom:clamp(8px,1.6vh,18px);filter:drop-shadow(0 8px 20px rgba(0,0,0,.55))}
.title .eyebrow{color:var(--gold);font-size:13px}
.title h1{font-size:clamp(46px,8.4vh,104px);color:var(--ivory);margin:10px 0 8px;text-shadow:0 4px 30px rgba(0,0,0,.6);font-weight:600}
.title h1 em{font-style:italic;color:var(--gold);font-weight:500}
.title .tag{font:500 clamp(17px,2.4vh,23px)/1.4 var(--display);font-style:italic;color:#efe7d3;margin:0 0 10px;text-shadow:0 2px 10px rgba(0,0,0,.7)}
.title .ican{margin:0 0 clamp(12px,2.2vh,20px);font-weight:700;font-size:15px;color:#f3e6c4;display:flex;gap:8px;align-items:flex-start}
.title .ican span{color:var(--gold)}
.title .row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.title .opts{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:clamp(12px,2.2vh,22px);font-weight:700;font-size:15px}
.title .opts label{display:flex;align-items:center;gap:9px;min-height:40px;cursor:pointer}
.title .opts input{width:20px;height:20px;accent-color:var(--gold)}
.title .fine{font:800 11px/1.4 var(--body);letter-spacing:.16em;color:rgba(248,243,231,.75);margin:12px 0 0}
.title .link{color:var(--ivory)}
.skipbtn{position:fixed;z-index:50;right:max(18px,env(safe-area-inset-right));bottom:calc(7.5vh + 18px);min-height:44px;padding:0 18px;border-radius:999px;background:rgba(0,0,0,.45);color:#fff;border:1px solid rgba(255,255,255,.35);font-weight:800;backdrop-filter:blur(6px)}
.langs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(12px,2vh,20px)}
.langs .pill{min-height:38px;font-size:13.5px}
.langs .pill[aria-pressed="true"]{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.pop .langs .pill{color:var(--navy);background:#f3ead6;border-color:#d8ccb0}
.pop .langs .pill[aria-pressed="true"]{background:var(--navy);color:var(--ivory);border-color:var(--navy)}
.poplabel{font:800 11px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--teal-ink);margin:2px 0 6px}
.popbtns{gap:8px;flex-wrap:wrap;margin:6px 0}
/* ---------- Stage: picture + felt card ---------- */
.ss-stage{height:100%;max-width:1500px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) clamp(380px,34vw,500px);gap:clamp(14px,1.8vw,26px);align-items:center}
.ss-pic{min-height:0;height:100%;display:grid;place-items:center;position:relative}
.ss-card{min-height:0;max-height:100%;display:flex;flex-direction:column;overflow:hidden}
.ss-in{position:relative;min-height:0;overflow:auto;overscroll-behavior:contain;padding:clamp(18px,2.8vh,30px) clamp(18px,2vw,30px);scrollbar-width:thin;scrollbar-color:#d9c79b transparent}
.ss-in>*{position:relative}
.ss-card h2{font-size:clamp(28px,4.2vh,44px);color:var(--navy);margin:8px 0 6px;text-wrap:balance;outline:none}
.ss-card .sub{font-size:clamp(15px,2vh,18px);line-height:1.45;color:var(--ink-soft);margin:0 0 4px}
.ss-card .count{display:inline-block;margin-left:6px;padding:1px 9px;border-radius:999px;background:var(--navy);color:var(--gold);font-size:13px}
.qlabel{font:800 13px/1.3 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--teal-ink);margin:14px 0 8px}
.qlabel .small{text-transform:none;letter-spacing:0;font-weight:600}
/* Abuelo / speech lines */
.joyline{position:relative;display:flex;gap:12px;align-items:flex-start;margin:10px 0 0;padding:10px 50px 10px 12px;border-radius:16px;background:#fdf1d4;border:1.5px solid #f0d58e;font:500 clamp(15px,1.95vh,18px)/1.45 var(--display);color:var(--navy)}
.joyline b{font:800 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);display:block;margin-bottom:4px}
.joyline .face{width:48px;height:48px;border-radius:50%;flex:none;background:#f3e2b5 url('../assets/sewing-studio/clover-face.webp') 50% 30%/cover no-repeat;border:2px solid var(--gold)}
.joyline .say{min-width:0}
.joyline .again,.bub .again{position:absolute;right:8px;top:8px;width:36px;height:36px;border-radius:50%;background:#fff;border:1.5px solid #f0d58e;font-size:16px;line-height:1;display:grid;place-items:center}
/* Answer chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{max-width:100%;padding:9px 14px;border-radius:14px;background:#eef6f4;border:1.5px solid #9fcfc8;color:var(--ink);font-weight:700;font-size:14.5px;text-align:left;line-height:1.3;display:inline-flex;align-items:center;gap:8px}
.chips button:hover{border-color:var(--teal-ink)}
.chips button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--ivory)}
.chips .own,.chips .stillbtn{background:#fffdf7;border-style:dashed;border-color:#d3c6a8}
.ownbox{margin-top:8px;width:100%;min-height:46px;border-radius:12px;border:2px solid #d8ccb0;background:#fff;padding:8px 12px;font:400 21px/1.3 var(--hand);color:var(--navy)}
.ownbox:focus,.ideabox:focus{outline:none;border-color:var(--teal)}
.tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.small{font-size:13px;color:var(--ink-soft)}
/* ---------- The street picture (hotspots, sound rings, pins) ---------- */
.sv{position:relative;width:min(100%,calc((100dvh - var(--bar) - 36px) * 1.777));aspect-ratio:1672/941;border-radius:18px;overflow:hidden;box-shadow:0 26px 70px rgba(0,0,0,.5),0 0 0 6px rgba(248,243,231,.92),0 0 0 8px rgba(196,141,20,.6)}
.svimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hot,.ring,.pin{position:absolute;transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center}
.hot{width:clamp(30px,4.4vw,52px);height:clamp(30px,4.4vw,52px);border:3px dashed var(--gold);background:rgba(7,26,61,.18);box-shadow:0 0 0 4px rgba(255,250,240,.35);animation:pulse 2.4s ease-in-out infinite}
.hot:hover,.hot.cur{background:rgba(242,184,43,.35);animation:none;transform:translate(-50%,-50%) scale(1.12)}
.hot.found{border-style:solid;background:var(--gold);color:var(--navy);font-weight:900;font-size:clamp(14px,1.6vw,22px);animation:none;box-shadow:0 0 0 3px #fff,0 6px 16px rgba(0,0,0,.35)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(242,184,43,.55)}50%{box-shadow:0 0 0 12px rgba(242,184,43,0)}}
/* Finale */
.finale{height:100%;max-width:1380px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:clamp(16px,3vw,44px);align-items:center}
.finale .win{padding:clamp(20px,3.4vh,40px) clamp(20px,2.6vw,40px);max-height:100%;overflow:auto}
.finale .win>*{position:relative}
.finale h2{font-size:clamp(32px,5.4vh,56px);color:var(--navy);margin:8px 0}
.finale .lede{font:500 clamp(17px,2.3vh,21px)/1.45 var(--display);color:var(--ink);margin:0}
.finale .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:6px}
.finale .cardwrap{max-height:100%;overflow:auto}
.badge{display:flex;align-items:center;gap:16px;padding:12px 0;border-top:1.5px dashed var(--line);border-bottom:1.5px dashed var(--line);margin:14px 0 12px;font-weight:800;color:var(--navy)}
.badge small{display:block;font-weight:600;color:var(--ink-soft)}
/* Sheets */
.sheet details{margin:10px 0;border:1.5px solid var(--line);border-radius:12px;padding:10px 14px;background:#fffdf8}
.sheet summary{font-weight:800;cursor:pointer;color:var(--navy)}
.sheet .setcard{box-shadow:none;padding:12px}
.sheet .setcard::before{display:none}
.empty{padding:22px;border:2px dashed #d3c6a8;border-radius:14px;text-align:center}
.passrow{display:flex;gap:14px;align-items:center}
.next-art{width:120px;height:150px;object-fit:cover;border-radius:16px;float:right;margin:0 0 10px 14px;border:3px solid #fff;box-shadow:0 0 0 2px var(--gold)}
.lvl button{min-width:44px;justify-content:center}
/* SEO block (screen readers + search engines; the visible activity is the game) */
.seo{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ---------- Tablets & phones ---------- */
@media (max-width:1100px){.ss-stage{grid-template-columns:minmax(0,1fr) minmax(340px,42vw)}}
@media (max-width:860px),(orientation:portrait) and (max-width:1024px){
main{padding:10px 10px max(10px,env(safe-area-inset-bottom))}
.ss-stage{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:10px;align-items:stretch}
.ss-pic{height:auto}
.sv{width:100%;max-height:34dvh;width:min(100%,calc(34dvh * 1.777))}
.bench{width:min(100%,calc(32dvh * 1.333))}
.ss-card{max-height:none;height:100%}
.nbrow{gap:8px}
.nb{padding:10px 6px 12px;border-radius:16px}
.nb .por{width:min(100%,22dvh)}
.nb small{display:none}
.nb b{font-size:16px}
.portrait{flex-direction:row;gap:10px}
.portrait .por.big{height:22dvh;border-radius:18px;border-width:4px}
.portrait figcaption{border-radius:16px;padding:8px 12px;text-align:left}
.portrait figcaption b{font-size:19px}
.board{gap:6px}
.note{padding:8px 12px;gap:10px}
.note p{font-size:17px}
.note b{font-size:16px}
.ss-stage.hearing .board .note:nth-child(n){transform:none}
.cardpic{width:100%}
.ss-stage.carding .setcard dl{display:none}
.ss-stage.carding .setcard{padding:12px 16px}
.ss-stage.carding .sc-text{font-size:17px;margin:6px 0 0;max-height:12dvh;overflow:auto}
.ss-stage.carding .mpatch{width:56px}
.finale{grid-template-columns:1fr;align-content:start;overflow:auto;height:100%}
.finale .cardwrap{max-height:none;overflow:visible}
.finale .win{max-height:none;overflow:visible}
.soundboard{grid-template-columns:repeat(4,1fr);gap:6px}
.sb{font-size:11px;padding:7px 2px}.sb .i{font-size:20px}
.quotes{max-height:none}
}
@media (max-width:640px){
.ss-card{padding:16px 14px}
.ss-card h2{font-size:26px}
.joyline{padding:8px 46px 8px 10px;font-size:15px}
.joyline .face{width:38px;height:38px}
.whos{grid-template-columns:1fr 1fr}
.title{padding-bottom:calc(7.5vh + 12px)}
.title h1{font-size:clamp(40px,7vh,64px)}
.title .tag{font-size:16px}
.fx.patchy small{display:none}
}
@media (max-height:620px) and (orientation:landscape){
.title .logo{display:none}
.title .ican{display:none}
}
/* =================== The Grocery Store additions =================== */
.joyline .face{background-position:50% 35%}
/* Framed store picture with things layered on top */
.view{position:relative;width:min(100%,calc((100dvh - var(--bar) - 36px) * 1.777));aspect-ratio:1672/941;border-radius:18px;overflow:hidden;box-shadow:0 26px 70px rgba(0,0,0,.5),0 0 0 6px rgba(248,243,231,.92),0 0 0 8px rgba(196,141,20,.6);container-type:inline-size}
.vimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .4s}
.vimg.peek{animation:peek 1.6s ease-in-out}
@keyframes peek{0%{opacity:.2;transform:scale(1.08)}25%{opacity:1}100%{transform:scale(1)}}
.v-cool .vimg{object-position:100% 40%;transform:scale(1.9);transform-origin:96% 34%}
.shopcol .view{width:min(100%,calc((100dvh - var(--bar) - 150px) * 1.777))}
/* Mrs. Carter pose cards and polaroids */
.pose{position:absolute;margin:0;border-radius:14px;overflow:hidden;background:var(--paper);border:5px solid var(--paper);box-shadow:0 0 0 2px var(--gold),0 18px 40px rgba(0,0,0,.45);width:30%}
.pose img{display:block;width:100%;height:auto}
.pose.right{right:2.5%;bottom:3%}.pose.left{left:2.5%;bottom:3%}
.pose.big{width:38%}.pose.small{width:22%}
.pose.right.small{top:3%;bottom:auto}
.pose.pop-in{animation:popin .5s cubic-bezier(.2,1.5,.4,1)}
@keyframes popin{0%{transform:scale(.88) rotate(-2deg);opacity:.4}100%{transform:none;opacity:1}}
.polaroid{position:absolute;margin:0;background:#fffdf7;padding:5px 5px 0;border-radius:6px;box-shadow:0 14px 30px rgba(0,0,0,.45);transform:rotate(-4deg)}
.polaroid img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;border-radius:3px}
.polaroid figcaption{font:400 clamp(12px,1.6cqi,18px)/1.6 var(--hand);color:var(--navy);text-align:center}
.polaroid.follower{left:3%;bottom:4%;width:15%}
.namecard{position:absolute;right:2.5%;top:4%;background:var(--paper);padding:6px 14px;border-radius:999px;box-shadow:0 8px 20px rgba(0,0,0,.35);color:var(--navy);text-align:center}
.namecard b{display:block;font:600 clamp(14px,2cqi,22px)/1.1 var(--display)}.namecard span{font-size:clamp(10px,1.2cqi,13px);color:var(--ink-soft)}
.prop{position:absolute;margin:0}.prop img{display:block;width:100%;border-radius:10px;box-shadow:0 14px 30px rgba(0,0,0,.45)}
.sunny{margin-top:10px;padding:10px 14px;border-radius:14px;background:#fff7d6;border:1.5px dashed #e7c66d}
.sunny .qlabel{margin-top:0}.sunny ul{margin:0;padding-left:18px;font-size:14.5px}
/* Finale */
.finale .badge .pstamp{width:clamp(90px,14vh,130px);height:auto;border-radius:12px;box-shadow:0 8px 20px rgba(0,0,0,.25);flex:none}
.finale .badge .pstamp.stamped{animation:stamp .8s cubic-bezier(.2,1.6,.4,1) both .3s}
.token{width:clamp(60px,9vh,84px);height:auto;flex:none;filter:drop-shadow(0 6px 12px rgba(0,0,0,.25))}
.panel h3 .token{width:30px;vertical-align:middle;margin-right:4px}
.badge .helper{display:flex;align-items:center;gap:6px;margin-top:6px}.badge .helper img{width:38px;height:auto}
.finale .cardwrap{display:flex;flex-direction:column;align-items:center;gap:14px}
.finale .receipt{width:min(100%,420px)}
.finpose{position:relative;width:min(70%,300px)}
.sheet .receipt{box-shadow:none;border:1.5px solid var(--line)}
/* =================== Farmer John's Farm additions =================== */
.view{aspect-ratio:1320/743}
.joyline .face{background-position:50% 30%}
.joyline.nar{background:#f1ecf8;border-color:#cfc2e6;font-style:italic}
.joyline.nar b{color:#6b5a95}
.joyline.nar .face{background:#fff url("data:image/svg+xml;utf8,") center/70% no-repeat;border-color:#cfc2e6}
.joyline .w.now{background:#f2b82b55;border-radius:4px}
/* Felt-framed story cards from the art sheets */
.fcard{position:absolute;margin:0;background:var(--paper);padding:5px 5px 0;border-radius:10px;box-shadow:0 0 0 2px var(--gold),0 18px 40px rgba(0,0,0,.5);width:34%}
.fcard img{display:block;width:100%;height:auto;border-radius:6px}
.fcard figcaption{font:400 clamp(12px,1.7cqi,19px)/1.25 var(--hand);color:var(--navy);text-align:center;padding:5px 6px 7px}
.fcard figcaption b{display:block;font:600 clamp(13px,2cqi,22px)/1.1 var(--display)}
.fcard.tl{left:3%;top:5%}.fcard.bl{left:3%;bottom:5%}.fcard.small{width:26%}.fcard.big{width:46%}
.tilt-l{transform:rotate(-2.5deg)}.tilt-r{transform:rotate(2deg)}
.pop-in{animation:popin .5s cubic-bezier(.2,1.5,.4,1)}
.fig{position:absolute;bottom:0;height:62%;width:auto;max-width:40%;object-fit:contain;filter:drop-shadow(0 14px 18px rgba(0,0,0,.45));pointer-events:none}
.fig.right{right:2%}.fig.left{left:2%}.fig.small{height:48%}
.fig.daisy{height:58%;bottom:-3%}
.emptycrate{position:absolute;left:44%;top:50%;width:9%;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:rgba(255,250,240,.88);border:3px dashed var(--gold);font-size:clamp(18px,3cqi,34px);animation:pulse 2.4s infinite}
/* Clues */
.closeup{position:absolute;inset:0;display:grid;place-items:center;background:rgba(5,16,31,.45);backdrop-filter:blur(2px);z-index:4}
.closeup .fcard{position:relative;width:min(44%,330px)}
.closeup .fcard figcaption{font:400 clamp(14px,1.9cqi,20px)/1.3 var(--hand)}
.closeup .x{position:absolute;right:3%;top:4%;width:44px;height:44px;border-radius:50%;background:var(--paper);color:var(--navy);font-size:26px;box-shadow:0 6px 16px rgba(0,0,0,.4)}
.hot{z-index:2;color:var(--navy);font-size:clamp(14px,2.2cqi,24px)}
.cluelist{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.cluelist li{display:flex;align-items:center;gap:10px;min-height:46px;padding:4px 10px;border-radius:12px;border:1.5px dashed var(--line)}
.cluelist li .q{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;background:#f3ead6;color:var(--gold-deep);font-weight:900}
.cluelist li.got{border-style:solid;border-color:#f0d58e;background:#fffaf0;padding:4px}
.cluelist li.got button{display:flex;gap:10px;align-items:center;text-align:left;width:100%;color:var(--ink)}
.cluelist img{width:54px;height:44px;object-fit:cover;border-radius:8px;flex:none}
.cluelist b{display:block;font-size:14.5px;color:var(--navy)}.cluelist small{font-size:12.5px;color:var(--ink-soft);line-height:1.25;display:block}
/* Saw it or wonder */
.sorts{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.sort{padding:8px 10px;border-radius:14px;border:1.5px solid var(--line);background:#fffdf7}
.sort .st{display:block;font:400 20px/1.25 var(--hand);color:var(--navy);margin-bottom:6px}
.sort .sb2{display:flex;gap:6px;flex-wrap:wrap}
.sort.ok{opacity:.8}.sort.ok.saw{background:#e3f2ef;border-color:#9fcfc8}.sort.ok.won{background:#f1ecf8;border-color:#cfc2e6}
.chips.stack{flex-direction:column;align-items:stretch}
.boardcols{position:absolute;right:3%;top:5%;width:60%;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.boardcols>div{background:rgba(255,250,240,.94);border-radius:14px;padding:10px 12px;box-shadow:0 14px 30px rgba(0,0,0,.4);min-height:30cqi;position:relative}
.boardcols>div::before{content:"";position:absolute;inset:5px;border:1.5px dashed rgba(196,141,20,.55);border-radius:10px;pointer-events:none}
.boardcols b{display:block;font:800 clamp(10px,1.4cqi,14px) var(--body);color:var(--teal-ink);margin-bottom:6px}
.boardcols ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.boardcols li{font:400 clamp(12px,1.7cqi,19px)/1.2 var(--hand);color:var(--navy);background:#fff7d6;border-radius:6px;padding:4px 7px;box-shadow:0 2px 5px rgba(0,0,0,.12)}
/* Barn */
.preps{display:grid;gap:7px}
.prep{display:flex;align-items:center;gap:10px;text-align:left;padding:10px 12px;border-radius:14px;border:1.5px solid var(--line);background:#fffdf7;color:var(--ink);font-weight:700;font-size:14.5px}
.prep .tick{width:26px;height:26px;border-radius:8px;border:2px solid #b0a58f;display:grid;place-items:center;flex:none;font-weight:900;color:#12624b}
.prep.on{background:#e3f2ef;border-color:#9fcfc8}.prep.on .tick{background:#d5eee3;border-color:#39a18e}
/* Milking */
.milkwrap{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64%}
.milkwrap .fcard{position:relative;width:100%}
.squeeze{position:absolute;left:44%;top:44%;transform:translate(-50%,-50%);width:clamp(84px,17cqi,140px);aspect-ratio:1;border-radius:50%;border:4px dashed #fff9e9;background:rgba(16,71,77,.25);color:#fff;font:900 clamp(10px,1.4cqi,13px)/1.1 var(--body);text-transform:uppercase;text-shadow:0 1px 4px #102029;touch-action:none;display:grid;place-content:center;gap:2px;animation:pulse 2.4s infinite}
.squeeze span{font-size:clamp(22px,4cqi,36px);line-height:1}
.squeeze:active{background:rgba(32,184,208,.45)}
.splash{position:absolute;left:44%;top:66%;width:8%;aspect-ratio:1;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:#fffef6;opacity:0;pointer-events:none}
.splash.on{animation:splash .6s ease-out}
@keyframes splash{0%{opacity:.95;transform:translateY(-40%) scale(.5)}100%{opacity:0;transform:translateY(40%) scale(1.3)}}
.meter{height:18px;border:2px solid #b1a78e;border-radius:999px;background:#e9e4d6;overflow:hidden;margin-top:14px}
.meter i{display:block;height:100%;background:linear-gradient(90deg,#cbdadd,#fffef3);transition:width .35s}
/* Try an idea */
.acts{display:grid;gap:7px}
.act{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;padding:11px 12px;border-radius:14px;border:1.5px solid var(--line);background:#fffdf7;color:var(--navy);font-weight:800;font-size:15px}
.act small{font-size:11.5px;color:#137d67}
.act[aria-pressed="true"]{border-color:var(--navy);background:#e3f2ef;box-shadow:inset 4px 0 0 var(--navy)}
.restxt{font:500 17px/1.45 var(--display);color:var(--navy);margin:12px 0 4px}
.restxt:empty{display:none}
.fcard.result{left:50%;top:50%;translate:-50% -50%;width:56%}
/* The next morning */
.sky{position:absolute;inset:0;pointer-events:none;transition:background 1.6s,opacity 1.6s;opacity:0;mix-blend-mode:multiply;z-index:1}
.sky.dusk{opacity:1;background:linear-gradient(180deg,#5b3a8a 0%,#d9694f 55%,#f2a65a 100%)}
.sky.night{opacity:1;background:linear-gradient(180deg,#0a1440,#1d2a6b);}
.sky.dawn{opacity:.55;background:linear-gradient(180deg,#ffd27a,#ffe9b8)}
#nightPic .fcard{left:50%;top:50%;translate:-50% -50%;width:52%;z-index:2}
.cmpwrap{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:62%;padding:6px;background:var(--paper);border-radius:12px;box-shadow:0 0 0 2px var(--gold),0 20px 44px rgba(0,0,0,.5);z-index:2}
.cmp{position:relative;aspect-ratio:377/296;border-radius:8px;overflow:hidden}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cmp .after{clip-path:inset(0 0 0 var(--split,50%))}
.cmp .line{position:absolute;top:0;bottom:0;left:var(--split,50%);width:3px;background:#fff;box-shadow:0 0 0 2px #b78e2e;pointer-events:none}
.cmp .lb{position:absolute;bottom:8px;padding:3px 10px;border-radius:999px;background:rgba(7,26,61,.75);color:#fff;font:800 12px var(--body);pointer-events:none}
.cmp .lb.l{left:8px}.cmp .lb.r{right:8px}
.cmp input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.cmp:focus-within{outline:3px solid var(--gold);outline-offset:2px}
/* City Journal */
.jwrap{position:absolute;left:4%;top:5%;width:56%;max-height:90%;overflow:hidden}
.jcard{position:relative;padding:clamp(12px,2cqi,24px);background:#fbf3df;border-radius:6px 16px 16px 6px;color:var(--navy);box-shadow:inset 10px 0 0 #e6d3a8,0 22px 46px rgba(0,0,0,.5)}
.jcard::before{content:"";position:absolute;inset:6px 6px 6px 16px;border:1.5px dashed rgba(196,141,20,.55);border-radius:4px 12px 12px 4px;pointer-events:none}
.jcard h3{margin:0;font:400 clamp(20px,3.2cqi,34px)/1.1 var(--hand);color:var(--navy);padding-left:10px}
.jcard .by{margin:0;padding-left:10px;font-size:clamp(10px,1.3cqi,13px);color:var(--ink-soft)}
.jcard dl{margin:6px 0 0;padding-left:10px;display:grid;gap:2px}
.jcard dt{font:800 clamp(9px,1.2cqi,12px) var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--teal-ink);margin-top:6px}
.jcard dd{margin:0;font:400 clamp(14px,2cqi,21px)/1.25 var(--hand);border-bottom:1px solid #e3d2a8;padding-bottom:3px}
.jprompt{margin:0 0 8px;padding:8px 12px;border-left:4px solid var(--gold);background:#fffaf0;border-radius:4px 10px 10px 4px;font:500 16px/1.4 var(--display);color:var(--navy)}
/* Finale */
.finale .badge .pstamp{width:clamp(84px,13vh,120px);height:auto;border-radius:50%;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.seedpk{width:clamp(56px,9vh,84px);height:auto;border-radius:8px;box-shadow:0 6px 14px rgba(0,0,0,.25);transform:rotate(-4deg);flex:none}
.finfig{width:auto;height:min(30vh,240px);filter:drop-shadow(0 14px 18px rgba(0,0,0,.45))}
.finale .jcard{width:min(100%,440px)}
.sheet .jcard{box-shadow:inset 10px 0 0 #e6d3a8;border:1.5px solid var(--line)}
.bagclues{display:flex;flex-wrap:wrap;gap:8px}
.bagclues figure{margin:0;width:92px;text-align:center;font-size:11.5px}
.bagclues img{width:92px;height:72px;object-fit:cover;border-radius:8px}
/* The golden thread by the apple's stem */
.thread-glow{position:fixed;z-index:3;left:64%;top:30%;width:26vw;height:30vh;pointer-events:none;
background:url("data:image/svg+xml;utf8,") center/contain no-repeat;
filter:drop-shadow(0 0 8px #f2b82b) drop-shadow(0 0 16px #f2b82b);animation:thread 2.4s ease-in-out infinite}
@keyframes thread{50%{opacity:.55}}
@media (max-width:860px),(orientation:portrait) and (max-width:1024px){
.fig{height:50%}.fig.small{display:none}
.fcard.tl,.fcard.bl{width:28%}
.boardcols{width:62%}.boardcols>div{min-height:0}
.jwrap{left:6%;width:88%}
.finfig{display:none}
.milkwrap{width:66%}
}
@media (max-width:640px){
.fcard figcaption{display:none}
.closeup .fcard figcaption{display:block}
.fig{display:none}
}
.hot{background:rgba(248,243,231,.92);border:3px solid var(--gold);box-shadow:0 5px 18px rgba(0,0,0,.35),0 0 0 6px rgba(242,184,43,.25)}
.hot.found{background:var(--navy);color:var(--gold);border-color:var(--teal)}
/* =================== Creation Station additions =================== */
.joyline .face{background-position:50% 22%}
.v-exterior .vimg{object-position:50% 34%}
.sword{display:inline-block;margin-left:4px;padding:1px 8px;border-radius:999px;background:#e3f2ef;color:var(--teal-ink);font:800 11px/1.6 var(--body);letter-spacing:.04em;vertical-align:middle;white-space:nowrap}
.chips.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.chips.grid2 button{justify-content:flex-start}
.lbl{margin:10px 0 6px;font-weight:700}
.ownrow{display:flex;gap:8px;align-items:stretch;margin-top:8px}
.ownrow .ownbox{margin-top:0;flex:1;min-width:0}
.mic{flex:none;width:48px;border-radius:12px;border:2px solid #9fcfc8;background:#eef6f4;font-size:20px}
.mic[aria-pressed="true"]{background:#d5eee3;box-shadow:0 0 0 3px rgba(32,184,208,.45)}
.fig{height:66%;max-width:34%;border-radius:18px 18px 0 0}
/* The Storybook Quilt */
.qwrap{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:92%;aspect-ratio:1320/519;border-radius:12px;box-shadow:0 0 0 4px var(--paper),0 0 0 6px rgba(196,141,20,.75),0 22px 50px rgba(0,0,0,.55);container-type:inline-size}
.qwrap .qimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:12px}
.qwrap.top{top:31%;width:80%}
.qwrap.small{position:relative;left:auto;top:auto;transform:none;width:100%}
.qpatch{position:absolute;top:36.5%;height:50%;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2%;padding:2%;text-align:center;overflow:hidden}
.qpatch.on{background:#fbf2dc;box-shadow:inset 0 0 0 2px rgba(196,94,60,.55),inset 0 0 0 5px #fbf2dc,inset 0 0 0 6px rgba(196,94,60,.35)}
.qpatch .qt{font:600 clamp(11px,3.4cqi,30px)/1.08 var(--display);color:var(--navy);text-wrap:balance;word-break:break-word}
.qpatch .qn{font:400 clamp(10px,2.4cqi,22px)/1 var(--hand);color:var(--navy);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qpatch .mini{height:72%;width:auto}
.qpatch img{width:88%;height:66%;object-fit:cover;border-radius:5px}
.qpatch.stitch-in{animation:stitchin .7s cubic-bezier(.2,1.4,.4,1)}
@keyframes stitchin{0%{transform:scale(.86);opacity:.3}100%{transform:none;opacity:1}}
.hotp{border:3px dashed var(--gold);background:rgba(255,250,240,.25);animation:pulse 2.4s ease-in-out infinite;color:var(--navy);font:800 clamp(12px,2.6cqi,22px)/1 var(--body)}
.hotp span{background:rgba(255,250,240,.94);padding:6px 12px;border-radius:999px;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.hotp.found{border-style:solid;border-color:var(--teal);background:rgba(32,184,208,.18);animation:none}
.hotp:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.seams{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.seam{fill:none;stroke:#ffd76b;stroke-width:.9;stroke-dasharray:2 1.4;vector-effect:non-scaling-stroke;opacity:.35;stroke-width:4px}
.seam.sewn{opacity:1;filter:drop-shadow(0 0 3px #f2b82b);animation:sewline 1s ease-out}
@keyframes sewline{0%{stroke-dashoffset:60;opacity:.3}100%{stroke-dashoffset:0;opacity:1}}
.seambtn{position:absolute;transform:translate(-50%,-50%);width:clamp(40px,7cqi,58px);height:clamp(40px,7cqi,58px);border-radius:50%;background:var(--paper);border:3px solid var(--gold);font-size:clamp(18px,3cqi,26px);box-shadow:0 6px 16px rgba(0,0,0,.4);z-index:2}
.seambtn:not(:disabled){animation:pulse 2s infinite}
.seambtn:disabled{opacity:.45}
.seambtn.done{opacity:0;pointer-events:none}
.qwrap.joined{box-shadow:0 0 0 4px var(--paper),0 0 0 7px var(--gold),0 0 40px rgba(242,184,43,.75),0 22px 50px rgba(0,0,0,.55)}
.qwrap.joined .qpatch.on{animation:glowp 1.4s ease-in-out}
@keyframes glowp{50%{box-shadow:inset 0 0 0 3px #f2b82b,0 0 18px #f2b82b}}
.fcard.draven{right:3%;left:auto;top:4%;width:22%;transition:transform .8s,opacity .8s}
.fcard.draven.away{transform:translateY(-14%) rotate(-8deg) scale(.8);opacity:0}
.draven-note{background:#f4eef9;border-color:#d4c6e6}
.draven-note h3{font-size:18px;margin-bottom:4px;color:#3d2b62}
.draven-note p{margin:0;font-size:15px}
/* The felt doll */
.doll{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:86%;aspect-ratio:250/330;background:radial-gradient(circle at 50% 40%,#fffaf0,#efe1c0);border-radius:22px;box-shadow:0 0 0 5px var(--paper),0 0 0 7px rgba(196,141,20,.7),0 22px 50px rgba(0,0,0,.5);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4%}
.doll .puppet{width:100%;height:auto;max-height:86%}
.doll .tag{margin-top:2%;padding:2px 14px;border-radius:999px;background:var(--navy);color:var(--gold);font:400 clamp(16px,2.6cqi,28px)/1.3 var(--hand)}
.v-workshop.naming .doll,.naming .doll{left:32%}
.heart{position:absolute;right:4%;top:10%;width:30%}
.heart ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.heart li{background:#fff7d6;border-radius:10px;padding:6px 10px;font:400 clamp(13px,2cqi,21px)/1.2 var(--hand);color:var(--navy);box-shadow:0 8px 18px rgba(0,0,0,.35);transform:rotate(-1.5deg)}
.heart li:nth-child(2){transform:rotate(1.5deg)}
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.swatch{width:40px;height:40px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1.5px #b9ad94,0 3px 6px rgba(0,0,0,.18)}
.swatch[aria-pressed="true"]{box-shadow:0 0 0 3px var(--navy),0 3px 6px rgba(0,0,0,.18)}
/* Settings */
.places{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.place{border-radius:12px;overflow:hidden;background:#fffdf7;border:2px solid var(--line);padding:0;color:var(--navy);font-weight:800;font-size:12.5px;line-height:1.15;text-align:center}
.place img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.place span{display:block;padding:5px 4px 6px}
.place[aria-pressed="true"]{border-color:var(--navy);box-shadow:0 0 0 2px var(--navy)}
.setpic{position:absolute;inset:4%;border-radius:12px;overflow:hidden;box-shadow:0 0 0 4px var(--paper),0 0 0 6px rgba(196,141,20,.75),0 22px 50px rgba(0,0,0,.55)}
.setpic>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:peek 1.2s ease-out}
.weather{position:absolute;inset:0;pointer-events:none;transition:background .8s}
.wx-night .weather{background:linear-gradient(180deg,rgba(10,20,64,.6),rgba(29,42,107,.45))}
.wx-rainy .weather{background:repeating-linear-gradient(105deg,rgba(255,255,255,.0) 0 14px,rgba(220,235,255,.45) 14px 15.5px),linear-gradient(rgba(60,80,110,.28),rgba(60,80,110,.28))}
.wx-snowy .weather{background:radial-gradient(circle,#fff 0 2px,transparent 3px) 0 0/34px 34px,radial-gradient(circle,#fff 0 1.5px,transparent 2.5px) 17px 17px/34px 34px,linear-gradient(rgba(235,242,255,.25),rgba(235,242,255,.25))}
.wx-windy .weather{background:repeating-linear-gradient(170deg,transparent 0 40px,rgba(255,255,255,.28) 40px 42px,transparent 42px 90px)}
.wx-sunny .weather{background:radial-gradient(circle at 85% 10%,rgba(255,226,140,.55),transparent 45%)}
.setpic .inset{position:absolute;left:5%;bottom:3%;height:42%;width:auto;filter:drop-shadow(0 10px 12px rgba(0,0,0,.45))}
.placetag{position:absolute;left:50%;top:5%;transform:translateX(-50%);background:var(--paper);padding:4px 16px;border-radius:999px;font:600 clamp(14px,2.4cqi,26px)/1.2 var(--display);color:var(--navy);box-shadow:0 8px 20px rgba(0,0,0,.35);white-space:nowrap;max-width:90%;overflow:hidden;text-overflow:ellipsis}
.seetag{position:absolute;right:5%;bottom:8%;max-width:44%;background:#fff7d6;padding:6px 12px;border-radius:10px;font:400 clamp(14px,2.2cqi,24px)/1.2 var(--hand);color:var(--navy);box-shadow:0 8px 18px rgba(0,0,0,.35);transform:rotate(2deg)}
.seetag::before{content:"👀 "}
/* What happens first */
.evline{position:absolute;left:6%;right:6%;bottom:5%}
.evline p{margin:0;background:#fbf3df;border-radius:6px 14px 14px 6px;padding:clamp(8px,1.6cqi,16px) clamp(12px,2cqi,20px);font:400 clamp(15px,2.5cqi,26px)/1.3 var(--hand);color:var(--navy);box-shadow:inset 8px 0 0 #e6d3a8,0 16px 36px rgba(0,0,0,.5)}
/* The story's first page */
.spread{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:92%;aspect-ratio:16/9.4;display:grid;grid-template-columns:1fr 1fr;background:#fff8e7;border-radius:10px;box-shadow:0 0 0 6px #b68c4c,0 0 0 9px #e9cf98,0 26px 60px rgba(0,0,0,.55);overflow:hidden}
.spread .pg{position:relative;padding:4% 5%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3%;min-height:0}
.spread .pg.l{border-right:2px solid #e3d1b0;box-shadow:inset -18px 0 24px -18px rgba(120,80,30,.35)}
.spread .pg.r{box-shadow:inset 18px 0 24px -18px rgba(120,80,30,.35);align-items:stretch}
.spread h3{font:600 clamp(16px,3.6cqi,38px)/1.05 var(--display);color:var(--navy);text-align:center;text-wrap:balance}
.spread .sp{height:58%;width:auto}
.spread .who{font:400 clamp(13px,2.2cqi,24px)/1.1 var(--hand);color:var(--navy);text-align:center}
.spread .ch{margin:0;font:800 clamp(9px,1.3cqi,13px) var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--teal-ink);text-align:center}
.spread .storyp{margin:0;font:500 clamp(12px,2.05cqi,21px)/1.4 var(--display);color:var(--navy);overflow:auto;min-height:0}
.spread .pg.r img{width:100%;flex:1;min-height:0;object-fit:cover;border-radius:8px}
.view{container-type:inline-size}
.finale .spread,.finale .qwrap{position:relative;left:auto;top:auto;transform:none;width:100%}
.finale .cardwrap{container-type:inline-size;width:100%}
/* Take your ideas */
.keepwrap{position:absolute;inset:6% 5%;display:grid;grid-template-columns:1.5fr 1fr;gap:5%;align-items:center}
.nbook{position:relative;display:grid;place-items:center}
.nbook .item{width:100%;max-width:300px}
.nbook .item.plain{font-size:clamp(60px,14cqi,140px);text-align:center}
.ideacard{position:absolute;left:50%;top:-6%;font-size:clamp(28px,6cqi,56px);opacity:0;transform:translate(-50%,-60%);transition:all .8s cubic-bezier(.2,1.2,.4,1);filter:drop-shadow(0 6px 10px rgba(0,0,0,.4))}
.nbook.got .ideacard{opacity:1;transform:translate(-50%,40%)}
.storyquote{margin:12px 0 4px;padding:10px 14px;border-left:4px solid var(--gold);background:#fffaf0;border-radius:4px 12px 12px 4px;font:400 20px/1.35 var(--hand);color:var(--navy)}
.next-art.wide{width:100%;height:auto;max-height:200px;float:none;margin:0 0 10px;border-radius:14px}
.bagquilt{position:relative;container-type:inline-size}
.bagquilt .qwrap{position:relative;left:auto;top:auto;transform:none;width:100%}
.badge .pstamp{border-radius:50%}
@media (max-width:860px),(orientation:portrait) and (max-width:1024px){
.fig{display:none}
.heart{width:40%;right:3%}
.naming .doll{left:28%}
.places{grid-template-columns:repeat(3,minmax(0,1fr))}
.place span{font-size:11px}
.qwrap.top{top:28%;width:78%}
.evline p{font-size:15px}
.keepwrap{grid-template-columns:1.6fr 1fr}
}
@media (max-width:640px){
.place img{aspect-ratio:16/9}
.swatch{width:34px;height:34px}
.chips.grid2{grid-template-columns:1fr 1fr}
.chips.grid2 button{font-size:13px;padding:8px 10px}
}
@media (max-height:700px){
.ss-card h2{font-size:clamp(24px,4vh,34px)}
.joyline{font-size:15px}
}
/* Folded (answered) questions */
.qb.folded{cursor:pointer;border-radius:12px;padding:2px 6px 6px;margin:0 -6px;background:#fbf6ea}
.qb.folded .qlabel{margin:8px 0 6px}
.qb.folded .qlabel::after{content:" ✎";color:var(--gold-deep)}
.qb.folded .chips button[aria-pressed="false"],.qb.folded .place[aria-pressed="false"],.qb.folded .jprompt,.qb.folded .swatches,.qb.folded .lbl,.qb.folded .small{display:none}
.qb.folded .places{grid-template-columns:minmax(0,170px)}
.qb.folded .place img{aspect-ratio:16/7}
.qb.folded .chips.grid2{display:flex}
.qb.folded .chips button,.qb.folded .place,.qb.folded .ownbox{pointer-events:none}
.qwrap.withking{left:43%;top:56%;width:80%}
.fcard.draven{width:19%}
@media (max-width:860px),(orientation:portrait) and (max-width:1024px){.qwrap.withking{left:42%;width:78%}.fcard.draven{width:20%}}
/* Phones: keep each step on one screen (the bar already names the step) */
@media (max-width:860px),(orientation:portrait) and (max-width:1024px){
.view{width:min(100%,calc(30dvh * 1.777))}
.ss-in{padding:12px 14px}
}
@media (max-width:640px){
.ss-card .eyebrow,.ss-card .sub{display:none}
.ss-card h2{font-size:23px;margin:0 0 2px}
.joyline{font-size:14.5px;line-height:1.35;margin-top:6px}
.qlabel{margin:10px 0 6px;font-size:12px}
.chips{gap:6px}
.chips button{padding:7px 11px;font-size:13.5px}
.storyquote{font-size:17px;margin:8px 0 2px;padding:6px 10px}
.jprompt{font-size:14.5px;padding:6px 10px}
.swatch{width:32px;height:32px}
.swatches{gap:6px}
}
@media (max-width:860px) and (max-height:700px){
.view{width:min(100%,calc(24dvh * 1.777))}
.joyline .face{width:32px;height:32px}
.ss-card h2{font-size:21px}
}
@media (max-width:640px) and (max-height:720px){
.joyline .auSay{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.joyline.open .auSay{-webkit-line-clamp:unset;display:block}
.joyline{padding:6px 44px 6px 8px}
.joyline b{margin-bottom:2px}
.chips button{padding:6px 10px;font-size:13px}
.chips.grid2 button{padding:6px 8px;font-size:12.5px}
.place span{padding:3px 2px 4px;font-size:10.5px}
.qb.folded .qlabel{margin:4px 0 4px}
}
@media (max-width:860px),(orientation:portrait) and (max-width:1024px){.qb.folded .place img{display:none}.qb.folded .places{grid-template-columns:auto;justify-content:start}}
/* =================== The Sewing Station additions =================== */
.joyline .face{background-position:50% 30%}
.v-exterior .vimg{object-position:50% 40%}
.chips.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.chips.grid3 button{justify-content:center;text-align:center}
.chips .fab{flex-direction:column;align-items:center;gap:2px}
.chips .fab small{font-weight:600;font-size:12px;opacity:.8}
.chips.pats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.chips.pats button{justify-content:center;padding:8px 6px;font-size:13px}
.wtag{position:absolute;left:50%;bottom:5%;transform:translateX(-50%);background:var(--paper);padding:6px 18px;border-radius:999px;font:600 clamp(14px,2.2cqi,24px)/1.2 var(--display);color:var(--navy);box-shadow:0 0 0 2px var(--gold),0 10px 26px rgba(0,0,0,.4);white-space:nowrap;z-index:3}
.draven-note .tool.small{margin-top:8px;min-height:36px;padding:4px 12px;font-size:13px}
/* The sweater stand (on the blank felt wall beside Ms. Clover) */
.stand{position:absolute;right:2%;top:6%;bottom:4%;width:46%;container-type:size;display:grid;place-items:center;border-radius:24px;background:radial-gradient(ellipse at center,rgba(255,247,233,.9) 5%,rgba(185,125,77,.18) 72%)}
.sweater{position:relative;width:min(100cqw,calc(100cqh * 1.024));aspect-ratio:420/410}
.sweater-svg{display:block;width:100%;height:100%;filter:drop-shadow(6px 10px 7px rgba(67,50,38,.42));user-select:none}
.stand[data-fabric="fleece"] .sweater-svg{filter:drop-shadow(6px 10px 7px rgba(67,50,38,.42)) saturate(.92) blur(.25px)}
.stand[data-fabric="cotton"] .sweater-svg{filter:drop-shadow(6px 10px 7px rgba(67,50,38,.42)) brightness(1.04)}
.decorating .sweater{touch-action:none}
.dragdeco{cursor:grab;filter:drop-shadow(1px 2px 2px rgba(54,44,36,.45))}
.dragdeco.picked{filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 4px #20B8D0)}
.sketchpad{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;z-index:2}
.loose .dangle{animation:dangle 2.2s ease-in-out infinite;transform-origin:300px 196px}
@keyframes dangle{50%{transform:rotate(9deg)}}
.loose .ring{animation:ringp 1.8s ease-in-out infinite;transform-origin:294px 194px}
@keyframes ringp{50%{opacity:.35;transform:scale(1.12)}}
body.still .loose .ring,body.still .loose .dangle{animation:none}
.movepad{position:absolute;left:50%;bottom:-2%;transform:translateX(-50%);display:flex;gap:6px;z-index:3}
.movepad button{width:40px;height:40px;border-radius:50%;background:var(--paper);border:2px solid var(--gold);color:var(--navy);font-weight:900;box-shadow:0 6px 14px rgba(0,0,0,.35)}
/* Friends */
.fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.fchoice{display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 4px 6px;border-radius:13px;background:#fff8eb;border:2px solid #d4b889;color:var(--navy);min-width:0}
.fchoice img{width:100%;height:64px;object-fit:cover;object-position:50% 28%;border-radius:9px}
.fchoice b{font:600 15px/1.1 var(--display)}.fchoice small{font-size:11px;color:var(--ink-soft)}
.fchoice[aria-pressed="true"]{border-color:var(--navy);background:#e6f8f5;box-shadow:0 0 0 2px var(--teal)}
.fabout p{margin:8px 0 0;font:500 15px/1.4 var(--display);color:var(--navy)}
.fpolaroid{position:absolute;left:4%;top:6%;width:24%;margin:0;background:#fffdf7;padding:6px 6px 0;border-radius:8px;box-shadow:0 0 0 2px var(--gold),0 18px 40px rgba(0,0,0,.5);transform:rotate(-3deg)}
.fpolaroid img{display:block;width:100%;aspect-ratio:132/215;object-fit:cover;border-radius:4px}
.fpolaroid figcaption{text-align:center;padding:6px 4px 8px}
.fpolaroid figcaption b{display:block;font:600 clamp(14px,2.4cqi,26px)/1.1 var(--display);color:var(--navy)}
.fpolaroid figcaption span{font:400 clamp(11px,1.6cqi,18px)/1.2 var(--hand);color:var(--ink)}
.ftoken{position:absolute;right:-8%;top:-6%;font-size:clamp(20px,4cqi,40px);background:#ffedba;border:3px solid #fff8eb;border-radius:50%;padding:2px 6px;box-shadow:0 6px 14px rgba(0,0,0,.35)}
.fbio{position:absolute;right:4%;bottom:6%;width:42%;background:rgba(255,250,240,.96);border-radius:14px;padding:clamp(8px,1.6cqi,18px);box-shadow:0 16px 36px rgba(0,0,0,.45)}
.fbio::before{content:"";position:absolute;inset:5px;border:1.5px dashed rgba(196,141,20,.55);border-radius:10px;pointer-events:none}
.fbio p{margin:0 0 4px;font:400 clamp(12px,1.9cqi,20px)/1.25 var(--hand);color:var(--navy)}
.fbio b{font:800 clamp(9px,1.2cqi,12px) var(--body);letter-spacing:.05em;text-transform:uppercase;color:var(--teal-ink)}
.fpick.hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:clamp(40px,9cqi,90px);filter:drop-shadow(0 8px 16px rgba(0,0,0,.4))}
.looks{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:5px}
.look{padding:2px;border-radius:9px;border:2px solid #d4b889;background:#fff8eb}
.look img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 25%;border-radius:6px}
.look[aria-pressed="true"]{border-color:var(--navy);box-shadow:0 0 0 2px var(--teal)}
.flabel{display:block;font:800 12px var(--body);letter-spacing:.04em;color:var(--teal-ink);margin:10px 0 0}
.flabel+.ownrow{margin-top:4px}
/* Artifact drawer */
.drawer{margin-top:10px;border:5px solid #8a5738;border-radius:16px;background:linear-gradient(#c58a5a,#a86b3f);padding:8px;box-shadow:inset 0 0 0 2px #dfab76,0 5px 15px rgba(99,55,32,.37)}
.drawer-h{margin:2px 0 8px;text-align:center;font:600 17px var(--display);color:#fff7dc;text-shadow:0 2px 2px #3a2419}
.dtabs{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.dtab{border:1px solid #a67843;border-radius:10px;background:#fbebc8;color:#563f2b;padding:6px 9px;font-size:12px;font-weight:800;min-height:34px}
.dtab[aria-selected="true"]{background:#1b7185;color:#fff6e2;border-color:#f8d88c}
.dgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.ptile{min-width:0;padding:4px;background:#fce9ca;border:2px solid #d6a56d;border-radius:12px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px;font-weight:800;color:#3e3b3f}
.ptile img{width:100%;max-width:64px;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(94,61,35,.5))}
.ptile span{line-height:1.1;min-height:23px;display:flex;align-items:center;text-align:center}
.ptile:hover{background:#fff0d7}
.inspire{margin:10px 0 0;border:1.5px solid #cfa96a;border-radius:14px;padding:8px 10px;background:#fff8e8}
.inspire summary{cursor:pointer;font:600 15px var(--display);color:var(--navy)}
.exstrip{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 8px}
.exitem{flex:0 0 98px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px;border-radius:12px;background:#fffefa;border:1.5px solid #cbb28d;font-size:11px;font-weight:800;color:var(--navy)}
.exitem img{width:84px;height:84px;object-fit:contain}
/* Stitching */
.stbtns{position:absolute;inset:0;pointer-events:none}
.stbtn{position:absolute;transform:translate(-50%,-50%);width:clamp(28px,4.6cqi,42px);height:clamp(28px,4.6cqi,42px);border-radius:50%;border:3px dotted #c19948;background:#fff5da;color:#694321;font-weight:900;font-size:clamp(11px,1.6cqi,16px);pointer-events:auto;box-shadow:0 4px 10px rgba(0,0,0,.3)}
.stbtn:not(:disabled):not(.done){background:#ffdb66;border-style:solid;animation:pulse 1.8s infinite}
.stbtn.done,.stbtn[hidden]{display:none}
.stbtn:disabled:not(.done){opacity:.55}
.thread{display:flex;gap:6px;margin:4px 0 0}
.thread i{flex:1;height:10px;border-radius:999px;background:repeating-linear-gradient(90deg,#d9c79b 0 6px,transparent 6px 10px)}
.thread i.on{background:repeating-linear-gradient(90deg,#f2b82b 0 6px,#c48d14 6px 8px);box-shadow:0 0 6px rgba(242,184,43,.6)}
.seq{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:5px}
.seq li{display:flex;gap:8px;align-items:baseline;padding:6px 10px;border-radius:12px;border:1.5px dashed var(--line);font:400 19px/1.25 var(--hand);color:var(--ink-soft)}
.seq li b{font:800 12px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--teal-ink);min-width:58px}
.seq li.got{border-style:solid;border-color:#f0d58e;background:#fffaf0;color:var(--navy)}
/* Letter */
.paperwrap{position:absolute;left:4%;top:5%;bottom:5%;width:56%;display:flex;align-items:center}
.paper{position:relative;width:100%;max-height:100%;overflow:auto;background:repeating-linear-gradient(#fffaf0,#fffaf0 calc(1.6em - 1px),#b2c7d249 1.6em),linear-gradient(#fbf2d7,#fffdf2);font:400 clamp(13px,2.1cqi,22px)/1.6em var(--hand);color:#293a51;padding:clamp(10px,2.2cqi,26px) clamp(12px,2.6cqi,30px) clamp(10px,2.2cqi,26px) clamp(54px,9cqi,96px);border-radius:4px;box-shadow:0 0 0 6px #fffbf1,0 0 0 7px #bd9d67,6px 14px 28px rgba(0,0,0,.45);transform:rotate(-.8deg)}
.paper h3{margin:0 0 .3em;text-align:center;font:600 clamp(14px,2.4cqi,26px)/1.2 var(--display);color:var(--navy)}
.paper .lp{position:relative;margin:0 0 .5em;overflow-wrap:anywhere}
.paper .part{position:absolute;left:clamp(-88px,-8.4cqi,-48px);top:.1em;width:clamp(44px,7.6cqi,80px);text-align:right;font:800 clamp(7px,1cqi,11px)/1.3 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--teal-ink)}
.paper .ghost{opacity:.4}
.paper .lp.c b{font-weight:400}
.minisweater{position:absolute;right:3%;bottom:6%;width:34%;aspect-ratio:420/410}
.minisweater svg{width:100%;height:100%;filter:drop-shadow(4px 8px 7px rgba(0,0,0,.4))}
.hint{margin:6px 0 0}
/* Wrapping */
.giftwrap{position:absolute;inset:6% 5%;display:grid;grid-template-columns:1fr 1.1fr;gap:4%;align-items:center;transition:transform 1.2s cubic-bezier(.6,0,.3,1),opacity 1.2s}
.giftwrap.done{grid-template-columns:1fr;justify-items:center}
.giftwrap .gsweater{aspect-ratio:420/410;width:100%}.giftwrap .gsweater svg{width:100%;height:100%}
.giftwrap .gletter .paper{font-size:clamp(10px,1.5cqi,16px);max-height:80cqi}
.giftwrap.folding{transform:scale(.25) translateY(20%);opacity:0}
.parcel{width:min(62%,420px);height:auto;filter:drop-shadow(0 18px 18px rgba(0,0,0,.4))}
.giftwrap.done .parcel{width:auto;height:86%;max-width:80%}
/* Keep */
.keepgift{display:grid;place-items:center}.keepgift svg{width:100%;height:auto;max-height:70cqi}
/* Finale */
.finpair{display:grid;grid-template-columns:1fr 1.1fr;gap:16px;align-items:center;width:100%}
.finsweater{aspect-ratio:420/410}.finsweater svg{width:100%;height:100%}
.finale .paper{font-size:clamp(13px,1.5vw,19px);max-height:60vh}
.finale .paper .part{left:-64px;width:58px;font-size:9px;letter-spacing:.02em}
.finale .paper{padding-left:74px}
.finale .cardwrap{background:rgba(255,250,240,.93);border-radius:20px;padding:18px;box-shadow:0 0 0 2px rgba(196,141,20,.6),0 24px 60px rgba(0,0,0,.45)}
.bagsweater{max-width:320px;margin:auto}.bagsweater svg{width:100%;height:auto}
.badge .pstamp{border-radius:50%;background:#0b3150}
@media (max-width:860px),(orientation:portrait) and (max-width:1024px){
.stand{width:58%;right:1%}
.decorating .view,.stitching .view{width:min(100%,calc(40dvh * 1.777))}
.fgrid{grid-template-columns:repeat(9,minmax(0,1fr));gap:4px}
.fchoice{padding:2px}
.fchoice img{height:44px}
.fchoice small{display:none}
.fchoice b{font-size:11px}
.dgrid{grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}
.ptile span{display:none}
.ptile{padding:2px;border-radius:9px}
.chips.pats{grid-template-columns:repeat(5,minmax(0,1fr))}
.fbio{width:52%}
.finpair{grid-template-columns:1fr 1fr}
.paperwrap{width:62%}
.minisweater{width:32%}
}
@media (max-width:640px){
.chips.pats button{font-size:11.5px;padding:6px 3px}
.chips.grid3 button{font-size:13px;padding:7px 6px}
.looks{grid-template-columns:repeat(9,minmax(0,1fr));gap:3px}
.fchoice b{font-size:10px}
.exitem{flex-basis:80px}.exitem img{width:66px;height:66px}
.finpair{grid-template-columns:1fr}
.finsweater{max-width:260px;margin:auto}
.seq li{font-size:16px;padding:4px 8px}
.paper .part{display:none}
.paper{padding-left:clamp(12px,2.6cqi,30px)}
}
.qlabel .cn{text-transform:none;letter-spacing:0;font-weight:700;color:var(--ink-soft);margin-left:4px}
.friending .ownbox{min-height:40px;font-size:19px;padding:5px 10px}
.friending .flabel{margin-top:7px}
.decorating .tools{margin-top:8px;gap:6px}
.decorating .tools .tool{min-height:36px;padding:4px 10px;font-size:13px}
@media (max-height:860px){
.ptile span{display:none}
.ptile img{max-width:52px}
.decorating #decoHint{display:none}
.decorating .ss-card .sub{display:none}
}
@media (max-width:860px),(orientation:portrait) and (max-width:1024px){
.fgrid{grid-template-columns:repeat(5,minmax(0,1fr))}
.fchoice img{height:50px}
.fchoice b{font-size:11.5px}
.designing .view,.decorating .view,.stitching .view,.repairing .view{aspect-ratio:5/4;width:min(100%,calc(38dvh * 1.25))}
.designing .vimg,.decorating .vimg,.stitching .vimg,.repairing .vimg{object-position:30% 50%}
.designing .stand,.decorating .stand,.stitching .stand,.repairing .stand{width:64%;right:0;top:3%;bottom:2%}
.ptile span{display:none}
}