/* The Bakery — world styles (base shared with 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/farm/john-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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M8 13c6-2 11-1 16 3 5-4 10-5 16-3v22c-6-2-11-1-16 3-5-4-10-5-16-3z' fill='%23f8f3e7' stroke='%236b5a95' stroke-width='2.4' stroke-linejoin='round'/><path d='M24 16v22' stroke='%236b5a95' stroke-width='2'/></svg>") 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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 300'><path d='M10 20C70 10 90 90 140 110s80 60 110 180' fill='none' stroke='%23ffd76b' stroke-width='4' stroke-linecap='round' stroke-dasharray='10 8'/></svg>") 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)}

/* =================== The Bakery additions =================== */
.joyline .face{background-image:url('../assets/bakery/butterfield-face.webp');background-position:50% 30%}
.joyline.mayor{background:#e9eefb;border-color:#b9c6ea}
.joyline.mayor b{color:#1d3f7a}
.joyline.mayor .face{background-image:url('../assets/bakery/mayor-face.webp');border-color:#1d3f7a}
.ss-stage.bk .ss-pic{container-type:inline-size}

/* Portraits and the recipe card */
.por{position:absolute;margin:0;width:22%;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)}
.por img{width:100%;border-radius:6px}
.por figcaption{font:400 clamp(11px,1.6cqi,18px)/1.3 var(--hand);color:var(--navy);text-align:center;padding:4px 4px 6px}
.por.tl{left:3%;top:5%}
.rwrap{display:block;text-align:left;cursor:zoom-in;position:absolute;right:3%;top:50%;transform:translateY(-50%) rotate(1.2deg);width:min(52%,440px);max-height:94%;overflow:hidden}
.rcard{position:relative;background:#fffaf0;color:var(--navy);border-radius:10px;padding:clamp(10px,2cqi,22px);box-shadow:0 0 0 2px var(--gold),0 22px 46px rgba(0,0,0,.5);background-image:repeating-linear-gradient(0deg,transparent 0 27px,#efe3c4 27px 28px)}
.rcard::before{content:"";position:absolute;inset:6px;border:1.5px dashed rgba(196,141,20,.6);border-radius:6px;pointer-events:none}
.rcard h3{font:600 clamp(14px,2.4cqi,24px)/1.1 var(--display);margin:0 0 4px;color:var(--navy)}
.rcard .rh{margin:6px 0 2px;font:800 clamp(9px,1.25cqi,12px) var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--teal-ink)}
.rlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:2px 10px}
.rlist li{display:flex;align-items:baseline;gap:6px;font:400 clamp(12px,1.85cqi,20px)/1.25 var(--hand);border-radius:6px;padding:0 4px;transition:background .3s}
.rlist li{min-width:0}.rlist li b{font-weight:400}.rlist li i{font-style:normal;margin-left:auto;color:#8a5a12;white-space:nowrap}
.rlist li.glow{background:#f2b82b66;box-shadow:0 0 0 2px var(--gold)}
.rsteps{margin:0;padding-left:1.4em;font:400 clamp(11px,1.65cqi,18px)/1.25 var(--hand)}

/* Measuring */
.pourvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s;pointer-events:none;z-index:1}
.pourvid.on{opacity:1}
.bowlcard{position:absolute;left:3%;bottom:5%;width:27%;z-index:2}
.bowlcard.big{left:auto;right:4%;bottom:auto;top:50%;translate:0 -50%;width:46%}
.bowlcard.center{right:auto;left:50%;translate:-50% -50%}
.minirec{position:absolute;right:2.5%;top:4%;display:grid;gap:4px;z-index:2}
.minirec span{background:rgba(255,250,240,.93);color:var(--navy);border-radius:999px;padding:3px 10px;font:700 clamp(10px,1.4cqi,14px)/1.3 var(--body);box-shadow:0 6px 14px rgba(0,0,0,.3)}
.minirec .cur{background:var(--gold)}.minirec .ok{background:#d5eee3;color:#12624b}
.need{margin:0 0 4px;padding:8px 12px;border-left:4px solid var(--gold);background:#fffaf0;border-radius:4px 10px 10px 4px;font:600 clamp(16px,2.1vh,19px)/1.35 var(--display);color:var(--navy)}
.cups{display:flex;flex-wrap:wrap;gap:8px}
.cup{display:grid;place-items:center;gap:2px;min-width:84px;min-height:64px;padding:8px 12px;border-radius:14px;border:2px solid #d3c6a8;background:#fffdf7;color:var(--navy);font-weight:800;font-size:15px}
.cup span{font-size:22px;line-height:1}
.cup[aria-pressed="true"]{border-color:var(--teal-ink);background:#dff3f0;box-shadow:0 4px 0 #9fcfc8;transform:translateY(-2px)}
.feedback{min-height:1.4em;margin:8px 0 0;font-weight:800;color:var(--teal-ink)}
.tipbox{background:#fff7d6;border-style:dashed;border-color:#e7c66d}.tipbox p{margin:4px 0 0}

/* Mixing */
.adds{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.stirring{position:absolute;inset:0;touch-action:none;cursor:grab;display:grid;place-items:center;border-radius:6px}
.stirring span{width:clamp(56px,14cqi,110px);aspect-ratio:1;border-radius:50%;border:3px dashed rgba(255,250,240,.85);display:grid;place-items:center;color:#fff;font-size:clamp(22px,5cqi,44px);text-shadow:0 2px 6px rgba(0,0,0,.6);animation:spin 6s linear infinite;opacity:.8}
@keyframes spin{to{rotate:360deg}}
.stirring:active{cursor:grabbing}

/* Oven */
.ovenglow{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(60% 55% at 50% 50%,rgba(255,140,40,.55),transparent 70%);mix-blend-mode:screen;z-index:3;transition:opacity .8s}
.ovenglow.on{opacity:1;animation:glow 1.6s ease-in-out infinite}
@keyframes glow{50%{opacity:.55}}
.seqline{list-style:none;margin:0 0 8px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.seqline li{min-height:40px;display:grid;place-items:center;border-radius:10px;border:2px dashed #d3c6a8;color:#b0a58f;font-weight:900}
.seqline li.on{border-style:solid;border-color:var(--teal-ink);background:#dff3f0;color:var(--navy);font-size:14px}

/* Decorating */
.cakeview{touch-action:none;user-select:none;-webkit-user-select:none}
.cakeview .layer{position:absolute;inset:0}
.placed{position:absolute;max-width:none;height:auto;background-repeat:no-repeat;filter:drop-shadow(1px 4px 3px rgba(27,23,15,.4));cursor:grab;touch-action:none;-webkit-user-drag:none}
.placed:active{cursor:grabbing}
.placed.selected{outline:2px dashed var(--gold);outline-offset:4px;border-radius:6px;filter:drop-shadow(0 0 8px rgba(242,184,43,.8))}
.placed:focus-visible{outline:3px solid var(--teal);outline-offset:4px}
.cats{margin:6px 0}.cats button{padding:6px 11px;font-size:13px}
.tray{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:6px;max-height:min(36vh,330px);overflow:auto;padding:4px;border-radius:14px;background:#f6efdc;border:1.5px solid var(--line);overscroll-behavior:contain}
.deco{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:3px;padding:5px 4px;min-height:96px;border-radius:12px;background:#fffdf8;border:1.5px solid #e2d6bb;color:var(--navy);font-size:11.5px;font-weight:700;line-height:1.15;text-align:center}
.deco .dimg{display:block;flex:none;margin:auto;background-repeat:no-repeat;pointer-events:none}
.deco:hover{border-color:var(--gold-deep);transform:translateY(-1px)}
.selbar{min-height:44px}.selbar .qlabel{margin:6px 0 4px}
.selrow{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.selrow .tool{min-height:38px;padding:0 10px;font-size:13px}
.size{display:flex;align-items:center;gap:6px;font-weight:800;font-size:13px;color:var(--ink)}.size input{width:96px;accent-color:var(--navy)}

/* Story map */
.smapwrap{position:absolute;right:3%;top:5%;width:40%;max-height:90%;overflow:hidden;z-index:2}
.storymap{position:relative;background:#fbf3df;border-radius:6px 16px 16px 6px;color:var(--navy);padding:clamp(10px,1.8cqi,20px);box-shadow:inset 10px 0 0 #e6d3a8,0 22px 46px rgba(0,0,0,.5)}
.storymap::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}
.storymap h3{margin:0 0 4px;padding-left:10px;font:400 clamp(16px,2.6cqi,30px)/1.1 var(--hand)}
.storymap dl{margin:0;padding-left:10px}
.storymap dt{font:800 clamp(9px,1.15cqi,12px) var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--teal-ink);margin-top:6px}
.storymap dd{margin:0;font:400 clamp(13px,1.9cqi,20px)/1.25 var(--hand);border-bottom:1px solid #e3d2a8;padding-bottom:3px}
.sheet .storymap{box-shadow:inset 10px 0 0 #e6d3a8;border:1.5px solid var(--line)}

/* The birthday card (a friendly letter) */
.letterwrap{position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(60%,470px);max-height:94%;overflow:hidden}
.letter{position:relative;background:#fffaf0;color:var(--ink);padding:clamp(14px,3cqi,30px) clamp(16px,3.4cqi,34px);border:clamp(5px,1cqi,10px) solid #f4e9cf;outline:2px dashed #dcb86e;outline-offset:-12px;box-shadow:0 22px 46px rgba(0,0,0,.5);transform:rotate(-.6deg);font:400 clamp(13px,1.95cqi,20px)/1.4 var(--hand)}
.letter .corner{position:absolute;color:#ceaf5c;font-size:clamp(12px,2cqi,22px)}
.letter .tl{top:8px;left:12px}.letter .tr{top:8px;right:12px}.letter .bl{bottom:6px;left:12px}.letter .br{bottom:6px;right:12px}
.letter p{margin:0 0 clamp(4px,1cqi,10px);position:relative}
.letter .lh{text-align:center;font:800 clamp(8px,1.2cqi,12px) var(--body);letter-spacing:.14em;text-transform:uppercase;color:#946924}
.letter .lgreet{font:600 clamp(15px,2.4cqi,26px)/1.2 var(--display);color:#102b56}
.letter .lidea b{font-weight:400;color:#986e29}
.letter .lsign{font-size:1.25em}
.letter .part{display:inline-block;margin-right:6px;padding:0 7px;border-radius:999px;background:#dff3f0;color:var(--teal-ink);font:800 clamp(8px,1.1cqi,11px)/1.7 var(--body);letter-spacing:.06em;text-transform:uppercase;vertical-align:middle}
.sheet .letter{transform:none;box-shadow:none;font-size:18px}

/* The party */
.fcard.mycake{left:3%;bottom:6%;width:44%;z-index:2}
.minicard{position:absolute;right:3%;top:5%;width:34%;z-index:2;container-type:inline-size}
.minicard .letter{font-size:clamp(8px,4.6cqi,15px);padding:10px 12px;outline-offset:-8px}
.minicard .letter .lgreet{font-size:clamp(10px,6cqi,18px)}
.confetti{position:absolute;inset:0;pointer-events:none;z-index:3;opacity:0;background:
  radial-gradient(circle,#f2b82b 0 3px,transparent 4px) 0 0/60px 70px,radial-gradient(circle,#20b8d0 0 3px,transparent 4px) 20px 30px/70px 60px,radial-gradient(circle,#d9694f 0 3px,transparent 4px) 40px 10px/80px 90px}
.confetti.on{animation:confetti 3.2s ease-out}
@keyframes confetti{0%{opacity:1;background-position:0 -200px,20px -260px,40px -300px}100%{opacity:0;background-position:0 400px,20px 460px,40px 500px}}

/* Song */
.lyrics{margin:12px 0 0;padding-left:1.3em;display:grid;gap:4px;font:500 17px/1.4 var(--display);color:var(--ink-soft)}
.lyrics li.now{color:var(--navy);font-weight:700;background:#fdf1d4;border-radius:6px;padding:0 6px}

/* Finale */
.finale .badge .pstamp{border-radius:50%}
.finale .keeps{margin-top:10px}.finale .keeps .tool{min-height:40px;font-size:13.5px}
.fcard.mycake.fin{position:relative;left:auto;bottom:auto;width:min(100%,460px);transform:rotate(-1.5deg)}
.finale .jcard{width:min(100%,440px)}

@media (max-width:860px),(orientation:portrait) and (max-width:1024px){
  .rwrap{width:62%}
  .por{display:none}
  .smapwrap{width:46%}
  .letterwrap{width:74%}
  .minicard{width:40%}
  .bowlcard{width:32%}
  .bowlcard.big{width:50%}
  .tray{max-height:28dvh;grid-template-columns:repeat(auto-fill,minmax(78px,1fr))}
  .deco{min-height:82px;font-size:10.5px}
  .adds{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .minirec span{padding:1px 6px}
  .letter .part{display:none}
  .seqline li{font-size:12px}
  .rwrap{width:94%;right:3%}
  .rlist{gap:0 8px}.rlist li{flex-wrap:wrap;column-gap:4px}.rlist li i{white-space:normal}
  .rcard h3{font-size:13px}
}

.bigrecipe{container-type:inline-size}
.bigrecipe .rcard{box-shadow:0 0 0 2px var(--gold);font-size:18px}
.bigrecipe .rcard h3{font-size:26px}.bigrecipe .rlist li{font-size:22px}.bigrecipe .rsteps{font-size:21px}.bigrecipe .rcard .rh{font-size:12px}
@media (max-width:640px){.bigrecipe .rlist{grid-template-columns:1fr}}

.fcard .fimg{display:block;width:100%;border-radius:6px;background-repeat:no-repeat}