/* The hidden attribute always wins, whatever display a class sets. */
[hidden]{display:none !important}

:root{--sand2:#E5DCC6; --yellow:#FFD21F; --danger:#B3261E; --safe-t:env(safe-area-inset-top, 0px); --safe-b:env(safe-area-inset-bottom, 0px)}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:#000; color:var(--ink); -webkit-tap-highlight-color:transparent}
button,input{font:inherit; color:inherit}
a{color:inherit}
:focus-visible{outline:3px solid var(--yellow); outline-offset:3px}

/* ---------- views ---------- */
.view{display:none}
/* the current view is the one whose id matches body[data-view]; adding a view needs no CSS change */
body[data-view="play"] #view-play, body[data-view="shop"] #view-shop, body[data-view="how"] #view-how, body[data-view="explore"] #view-explore, body[data-view="me"] #view-me, body[data-view="orders"] #view-orders{display:block}
.view-play{position:fixed; inset:0}
#stage{position:absolute; inset:0; touch-action:none; cursor:grab; overflow:hidden}
#stage:active{cursor:grabbing}
#stage canvas{display:block; width:100%; height:100%}
.page{min-height:100%}
.wrap{max-width:1100px; margin:0 auto}
.wrap.narrow{max-width:680px}
.wordmark{position:fixed; z-index:30; top:calc(var(--safe-t) + 14px); left:16px; font-family:"Stardos Stencil","Arial Black",sans-serif; font-weight:700; font-size:20px; letter-spacing:3px; text-decoration:none; color:var(--paper); background:rgba(0,0,0,.55); padding:6px 12px; border-radius:999px}
body:not([data-view="play"]) .wordmark{background:transparent}

/* ---------- typography ---------- */

.eyebrow{font-weight:800; font-size:.85rem}
.stencil{font-family:"Stardos Stencil","Arial Black",sans-serif; font-weight:700; font-size:clamp(2.4rem,7vw,4.2rem); line-height:1; margin:0 0 10px; letter-spacing:1px}
.lede{font-size:1.15rem; font-weight:600; margin:0}
  .center{text-align:center}
.error{font-weight:700; min-height:1.2em; margin:8px 0 0}

/* ---------- buttons ---------- */
.btn{font-weight:800; font-size:1rem; cursor:pointer}

.btn-yellow{background:var(--yellow)}
.btn.wide{padding:14px}
.btn[disabled]{cursor:progress}
.icon-btn{display:inline-grid; place-items:center; cursor:pointer; font-weight:900; font-size:1.3rem; line-height:1}

/* ---------- stage overlays ---------- */
.bubble{position:absolute; left:50%; top:calc(var(--safe-t) + 64px); transform:translate(-50%,-8px) scale(.9); max-width:min(88%,460px); background:var(--paper); color:var(--ink); border:3px solid var(--ink); border-radius:22px; padding:9px 16px; font-weight:800; font-size:clamp(1rem,3.2vw,1.2rem); line-height:1.3; text-align:center; box-shadow:0 0 0 3px var(--paper); opacity:0; pointer-events:none; transition:opacity .18s, transform .25s cubic-bezier(.3,1.6,.5,1); z-index:5}
.bubble.on{opacity:1; transform:translate(-50%,0) scale(1)}
.lock{position:absolute; right:16px; top:calc(var(--safe-t) + 22px); display:flex; gap:8px; pointer-events:none}
.lock span{width:13px; height:13px; border-radius:50%; border:2px solid #FFF4D6; opacity:.55; transition:background .12s, opacity .12s}
.lock span.on{background:var(--yellow); border-color:var(--yellow); opacity:1}
.lock.wrong{animation:shake .38s}
.lock.wrong span{border-color:#E8705A; background:transparent}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.zone{position:absolute; left:50%; bottom:calc(var(--safe-b) + 104px); transform:translateX(-50%); font-weight:700; font-size:.95rem; opacity:0; transition:opacity .2s; pointer-events:none}
.zone.on{opacity:.85}
.chip{position:absolute; left:50%; bottom:calc(var(--safe-b) + 78px); transform:translateX(-50%); color:#FFF4D6; border-radius:999px; font-weight:700; font-size:.82rem; white-space:nowrap; pointer-events:none}
.chip[hidden]{display:none}
.reveal{position:absolute; left:12px; right:12px; bottom:calc(var(--safe-b) + 90px); margin:0 auto; max-width:440px; color:var(--ink); transform:translateY(20px); opacity:0; pointer-events:none; transition:opacity .3s, transform .35s cubic-bezier(.3,1.5,.5,1); z-index:6}
.reveal.on{opacity:1; transform:none; pointer-events:auto}
.reveal h2{font-size:1.35rem; font-weight:900}
.reveal p{margin:0 0 8px; font-weight:600; line-height:1.35}
.reveal .clue{background:#FFF1B8; border-radius:10px; padding:8px 10px; font-weight:800}
.reveal small{font-weight:700; color:var(--muted)}
.reveal .row2{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:8px}
.meter{border-radius:999px; overflow:hidden; margin:10px 0 4px}
.meter i{display:block; height:100%; width:0; transition:width .6s}

/* ---------- the magic pill ---------- */
.pill-wrap{position:fixed; z-index:40; left:50%; bottom:calc(var(--safe-b) + 18px); transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:10px; width:min(560px, calc(100vw - 24px))}
.pill{display:flex; align-items:center; gap:10px; min-height:52px; padding:8px 16px 8px 12px; border-radius:999px; background:var(--ink); color:var(--paper); border:2px solid #3a3a3a; box-shadow:0 8px 28px rgba(0,0,0,.35); cursor:pointer}

.pill-text{display:flex; flex-direction:column; align-items:flex-start; line-height:1.1; text-align:left}

.pill-chev{transition:transform .2s}
.pill[aria-expanded="true"] .pill-chev{transform:rotate(180deg)}
.hub{width:100%}
@keyframes rise{from{opacity:0; transform:translateY(12px) scale(.98)}to{opacity:1; transform:none}}

.hub-search input{font-weight:700; font-size:1rem}
.hub-results{display:flex; flex-direction:column}

.result{display:flex; justify-content:space-between; align-items:center; gap:10px; width:100%; border:0; background:transparent; text-align:left; font-weight:800; cursor:pointer}
.result span{font-weight:600; font-size:.85rem}

.chips{display:flex; flex-wrap:wrap; gap:8px}
.chipbtn{font-weight:800; cursor:pointer}

.chipbtn.ghost{border-style:dashed}

/* ---------- shop ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:18px}
.card{background:var(--paper); border:2.5px solid var(--ink); border-radius:22px; overflow:hidden; display:flex; flex-direction:column; cursor:pointer; text-align:left; padding:0; box-shadow:0 4px 0 var(--ink); transition:transform .12s}
.card:hover{transform:translateY(-3px)}
.card .tee{background:#E9E6DF}
.card-body{display:flex; flex-direction:column; gap:6px}
.card-body h3{margin:0; font-size:1.25rem; font-weight:900}
.card-row{display:flex; justify-content:space-between; align-items:center}
.price{font-weight:900}
.dots{display:flex; gap:5px}
.dots i{width:14px; height:14px; border-radius:50%; border:1.5px solid rgba(0,0,0,.35)}
.badge{align-self:flex-start; border-radius:999px; font-size:.75rem; font-weight:900}

.tee{position:relative; width:100%; aspect-ratio:800/740; overflow:hidden; --s:.4}
.tee-stage{position:absolute; left:0; top:0; width:800px; height:960px; transform-origin:0 0; transform:scale(var(--s))}
.tee-svg{position:absolute; left:100px; top:60px}
.tee-print{position:absolute; left:0; top:0; width:800px; height:960px; transform-origin:400px 380px}

/* ---------- product sheet ---------- */
.sheet{position:fixed; inset:0; z-index:50; display:grid; place-items:end center; padding:0}
.sheet[hidden]{display:none}
.sheet-card{position:relative; width:min(980px,100%); max-height:94vh; overflow:auto; animation:rise .22s cubic-bezier(.3,1.3,.5,1)}
@media (min-width:760px){ .sheet{place-items:center; padding:20px} .sheet-card{border-radius:26px} }
.sheet-close{position:absolute; z-index:2}
.sheet-grid{display:grid; gap:20px}
@media (min-width:760px){ .sheet-grid{grid-template-columns:1.1fr 1fr; align-items:start} }
.sheet-art .tee{background:#E9E6DF; border-radius:18px; border:2px solid var(--line)}
.sheet-form h2{margin:0 0 4px; font-size:1.8rem; font-weight:900}
fieldset{border:0; padding:0}
legend{font-weight:900}

.seg button{font-weight:800; cursor:pointer}

.swatches{display:flex; gap:10px}
.swatches button{border-radius:50%; cursor:pointer}

.qty{display:flex; align-items:center; gap:14px}
.qty output{font-weight:900; font-size:1.3rem; min-width:2ch; text-align:center}
.field{display:flex; flex-direction:column; font-weight:800}
.field input{min-height:46px; border:2px solid var(--ink); border-radius:12px; padding:0 12px; font-weight:600; background:#fff}
#buyBtn{margin-top:18px}

/* ---------- progress ---------- */
.locks{list-style:none; padding:0; margin:20px 0 0; display:grid}
.locks li{background:var(--paper); border:2.5px solid var(--ink); border-radius:18px}
.locks li.todo{border-style:dashed}
.locks h3{font-size:1.1rem; font-weight:900}
.locks .clue{margin:6px 0 0; background:#FFF1B8; border-radius:10px; padding:8px 10px; font-weight:800}
.locks button{margin-top:10px}
.meter-block{margin:6px 0 0}
.steps{padding-left:1.3em; display:grid; gap:12px; font-size:1.08rem; line-height:1.45}

/* ---------- toast ---------- */
.toast{position:fixed; z-index:60; left:50%; top:calc(var(--safe-t) + 18px); transform:translateX(-50%); color:var(--paper); padding:12px 18px; font-weight:800; max-width:min(92vw,460px); text-align:center; box-shadow:0 10px 30px rgba(0,0,0,.35)}
.toast[hidden]{display:none}

@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important} }

/* =================== v2: pill with edge logo =================== */
.pill-wrap{transition:left .35s cubic-bezier(.3,1.3,.5,1), transform .35s cubic-bezier(.3,1.3,.5,1), width .3s}
.pill-row{display:flex; align-items:center}
.pill-row .pill{border:0; box-shadow:none; background:transparent; flex:1; justify-content:space-between}
.pill-logo{border-radius:50%; border:0; display:grid; place-items:center; cursor:pointer; padding:0; flex:0 0 auto}
.pill-logo svg{transition:transform .3s}
.pill-logo:active svg{transform:scale(.9)}

.pill-wrap.collapsed .pill-row{padding:4px}
.pill-wrap.collapsed .pill, .pill-wrap.collapsed .hub{display:none}
.pill-wrap.pulse .pill-row{animation:pillpop .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes pillpop{0%{transform:scale(1)}40%{transform:scale(1.08)}100%{transform:scale(1)}}
#pillRing{transition:stroke-dashoffset .8s ease}

.tile b{font-size:1.02rem}

.ghostbtn{border-color:transparent; box-shadow:none}

/* =================== walkthrough =================== */
.coach{position:fixed; inset:0; z-index:80}
.coach[hidden]{display:none}
.coach-spot{position:fixed; transition:all .35s cubic-bezier(.3,1.2,.5,1); pointer-events:none}
.coach-card{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(var(--safe-b) + 24px); width:min(440px, calc(100vw - 24px)); animation:rise .3s cubic-bezier(.3,1.4,.5,1)}

.coach-spot[style*="display: none"] + .coach-card{top:50%; bottom:auto; transform:translate(-50%,-50%)}
.coach-art{display:flex; justify-content:center; margin-bottom:4px}
.coach-count{margin:0; font-weight:800; font-size:.8rem; text-transform:uppercase}
.coach-card h2{margin:4px 0 6px; font-size:1.55rem; font-weight:900; line-height:1.15}
.coach-card p{font-size:1.08rem; font-weight:600; line-height:1.4; margin:0 0 10px}
.coach-dots{display:flex; gap:6px; justify-content:center; margin:6px 0 12px}
.coach-dots i{border-radius:50%}
.coach-dots i.on{border-radius:6px}
.coach-btns{display:flex; gap:8px; justify-content:space-between}
.coach-btns .btn{flex:1}
.coach-btns .ghostbtn{flex:0 0 auto}

/* =================== celebrations =================== */
.confetti{position:fixed; inset:0; width:100vw; height:100vh; pointer-events:none; z-index:90}
.banner{position:fixed; z-index:85; left:50%; top:28%; transform:translate(-50%,-50%) scale(.6); opacity:0; pointer-events:none; text-align:center; color:var(--ink); max-width:min(90vw,520px)}
.banner b{font-family:"Stardos Stencil","Arial Black",sans-serif; font-size:clamp(1.8rem,7vw,2.8rem); line-height:1.05}
.banner span{display:block; font-weight:800}
.banner span:empty{display:none}
.banner.on{animation:bannerIn 2.6s cubic-bezier(.3,1.5,.5,1) forwards}
@keyframes bannerIn{0%{opacity:0; transform:translate(-50%,-50%) scale(.6) rotate(-4deg)}12%{opacity:1; transform:translate(-50%,-50%) scale(1.06) rotate(1deg)}20%{transform:translate(-50%,-50%) scale(1) rotate(0)}85%{opacity:1; transform:translate(-50%,-50%) scale(1)}100%{opacity:0; transform:translate(-50%,-60%) scale(.96)}}
.badge-toast{position:fixed; z-index:86; left:50%; top:calc(var(--safe-t) + 14px); transform:translate(-50%,-140%); display:flex; gap:12px; align-items:center; color:var(--paper); padding:10px 16px 10px 10px; box-shadow:0 12px 30px rgba(0,0,0,.4); transition:transform .4s cubic-bezier(.3,1.5,.5,1); max-width:92vw}
.badge-toast.on{transform:translate(-50%,0)}
.badge-toast small{display:block; color:var(--yellow); font-weight:800; text-transform:uppercase; font-size:.72rem}
.badge-toast b{display:block; font-size:1.05rem}
.badge-toast span{display:block; font-size:.85rem; color:#CFC6B0; font-weight:600}

/* =================== co-op =================== */
.coopbar{position:absolute; z-index:7; left:50%; transform:translateX(-50%); top:calc(var(--safe-t) + 12px); display:flex; align-items:center; gap:8px; color:var(--paper); border-radius:999px; padding:6px 6px 6px 14px; max-width:calc(100vw - 150px); flex-wrap:nowrap}
.coopbar[hidden]{display:none}
.coop-dot{width:10px; height:10px; border-radius:50%; background:#888; flex:0 0 auto}
.coopbar.live .coop-dot{background:#4CD964; box-shadow:0 0 0 4px rgba(76,217,100,.25)}
.coop-who{font-weight:800; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.coop-chat{display:flex; gap:6px}
.coop-chat[hidden]{display:none}
.coop-chat input{width:140px; min-height:36px; border-radius:999px; border:0; padding:0 12px; font-weight:600}
.coopbar .chipbtn{min-height:36px; padding:4px 12px}
.coopfeed{position:absolute; z-index:6; left:12px; top:calc(var(--safe-t) + 64px); display:flex; flex-direction:column; gap:6px; max-width:min(70vw,340px); pointer-events:none}
.coopfeed p{margin:0; color:var(--ink); border-radius:14px 14px 14px 4px; padding:6px 10px; font-weight:700; animation:rise .25s; transition:opacity .8s}
.coopfeed p.mine{align-self:flex-end; border-radius:14px 14px 4px 14px}
.coopfeed p.fade{opacity:0}

/* =================== explore =================== */
.h2{font-size:1.4rem; font-weight:900}
.row-between{display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap}
.btn-row{display:flex; flex-wrap:wrap; align-items:center}
.feature{display:flex; gap:16px; align-items:center; border-radius:24px; padding:14px 18px; text-decoration:none; border:3px solid var(--ink); box-shadow:0 5px 0 var(--ink)}
.feature img{width:120px; height:auto}
.feature small{font-weight:800; text-transform:uppercase}
.feature b{display:block; font-family:"Stardos Stencil",sans-serif; font-size:2rem}
.feature span{font-weight:600}
.stories{grid-template-columns:repeat(auto-fill, minmax(220px,1fr))}
.scard{display:flex; flex-direction:column; text-decoration:none; background:var(--paper); border:2.5px solid var(--ink); border-radius:20px; overflow:hidden; box-shadow:0 4px 0 var(--ink); transition:transform .15s}
.scard:hover{transform:translateY(-3px) rotate(-.5deg)}
.scard-art{height:150px; display:grid; place-items:center}
.scard.place-fridge .scard-art{background:#DCE5EB}
.scard.place-elevator .scard-art{background:#8A9097}
.scard.place-booth .scard-art{background:#8E1B1B}
.scard-art img{max-height:120px; max-width:80%}
.scard-body{padding:12px 14px 14px; display:flex; flex-direction:column; gap:2px}
.scard-body small{font-weight:800; font-size:.78rem; text-transform:uppercase}
.scard-body b{font-size:1.15rem; font-weight:900}
.scard-body span{color:var(--muted); font-weight:600; font-size:.88rem}
.empty{background:var(--paper); border-radius:20px; padding:22px; text-align:center}
.blob{position:relative; display:inline-block; width:84px; height:76px}
.blob i{position:absolute; inset:0; border-radius:50%; background:var(--skin); border:3px solid #141414; box-shadow:0 0 0 3px #FFF4D6}
.blob i::before{content:""; position:absolute; left:6%; right:6%; top:-2%; height:42%; border-radius:50% 50% 30% 30%; background:var(--hair)}
.blob i::after{content:""; position:absolute; left:30%; right:30%; bottom:18%; height:16%; background:#fff; border:2px solid #141414; border-radius:3px}
.blob .k{position:absolute; left:50%; top:-16px; width:18px; height:22px; margin-left:-9px; border-radius:50% 50% 40% 40%; background:var(--hair); box-shadow:0 0 0 2px #FFF4D6}
.blob .cl,.blob .cr{position:absolute; top:12px; width:26px; height:12px; border-radius:8px; background:var(--hair); box-shadow:0 0 0 2px #FFF4D6}
.blob .cl{left:-20px} .blob .cr{right:-20px}
.draw-blob i{background:repeating-linear-gradient(45deg,#FFD21F 0 8px,#FFF4D6 8px 16px)}
.draw-blob i::before,.draw-blob i::after{display:none}

/* =================== my stuff =================== */
.stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px}
.stats div{background:var(--paper); border:2.5px solid var(--ink); border-radius:16px; text-align:center}
.stats b{display:block; font-size:1.8rem; font-weight:900}
.stats span{font-weight:700; font-size:.85rem}
@media (max-width:520px){ .stats{grid-template-columns:repeat(2,minmax(0,1fr))} }
.badges{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.badge-card{border:2.5px dashed var(--line); padding:12px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:4px; filter:grayscale(1); opacity:.55}
.badge-card.got{background:var(--paper); border:2.5px solid var(--ink); filter:none; opacity:1}
.badge-card b{font-weight:900} .badge-card span{font-size:.8rem; color:var(--muted); font-weight:600}
.account p{font-weight:600}
.pro{border-radius:999px; font-style:normal; font-weight:900; font-size:.8rem}
.mylist{list-style:none; padding:0; margin:8px 0; display:grid}
.mylist li{display:flex; align-items:center; gap:8px; background:var(--paper); border:2px solid var(--ink); border-radius:14px; flex-wrap:wrap}
.mylist li div{flex:1; min-width:160px}
.mylist li b{display:block} .mylist li span{color:var(--muted); font-weight:600; font-size:.88rem}
.steps.big{font-size:1.2rem}

/* =================== auth sheet =================== */
.auth-card{max-width:460px}
.auth-card h2{margin:0 0 4px; font-size:1.8rem; font-weight:900}
.auth-seg{margin:14px 0 4px}
.check{display:flex; gap:10px; align-items:center; margin-top:14px; font-weight:800}
.check input{width:24px; height:24px}
[data-only][hidden]{display:none}

/* =================== story page =================== */
.loading{position:absolute; inset:0; display:grid; place-items:center; color:var(--paper); font-weight:800; text-align:center; padding:20px}
.wordmark.static{position:static; color:var(--ink); background:transparent; padding:0}

/* =================== studio =================== */

.studio-top{position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:14px; padding:calc(var(--safe-t) + 10px) 16px 10px}
.stepper{display:flex; gap:6px; list-style:none; margin:0; padding:0; flex:1; overflow-x:auto}
.stepper button{display:flex; align-items:center; gap:6px; border:0; background:transparent; font-weight:800; cursor:pointer; padding:6px 8px; border-radius:999px; white-space:nowrap}
.stepper i{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:.85rem}

.stepper .on i{border-color:var(--yellow)}
.stepper .done button{color:var(--ink)}
.stepper button[disabled]{opacity:.45; cursor:default}
@media (max-width:640px){ .stepper span{display:none} .stepper .on span{display:inline} }
.save-state{font-weight:800; font-size:.85rem}
.studio-grid{display:grid; gap:0}
@media (min-width:900px){ .studio-grid{grid-template-columns:minmax(0,1fr) minmax(380px,520px); align-items:start} }
.preview-pane{position:sticky; top:62px; z-index:5; background:#000}
#preview{display:block; width:100%; height:42vh; border:0}
@media (min-width:900px){ #preview{height:calc(100vh - 110px)} }
.preview-hint{margin:0; padding:8px 14px; font-weight:800; text-align:center}
.wizard{padding:20px 18px calc(var(--safe-b) + 40px)}
.wizard h1{font-family:"Stardos Stencil",sans-serif}
.coach-line{font-weight:600; font-size:1.08rem; line-height:1.45; border-left:6px solid var(--yellow); border-radius:10px}
.pick-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px}
.pick{display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; background:var(--paper); border:2.5px solid var(--ink); border-radius:18px; padding:20px 10px 12px; cursor:pointer; font:inherit; transition:transform .12s}
.pick:hover{transform:translateY(-2px)}

.pick b{font-size:1.05rem; font-weight:900} .pick span{font-size:.85rem; font-weight:600}

.place-swatch{width:100%; height:64px; background:#161616}
.place-fridge .place-swatch{background:linear-gradient(#DCE5EB 60%, #B7C1C8 60% 64%, #DCE5EB 64%)}
.place-elevator .place-swatch{background:repeating-linear-gradient(90deg,#8A9097 0 10px,#9aa0a6 10px 12px)}
.place-booth .place-swatch{background:linear-gradient(90deg,#8E1B1B 0 8%, #2a1a1a 8% 92%, #8E1B1B 92%)}
.draw-panel{margin-top:16px; background:var(--paper); border:2.5px solid var(--ink); border-radius:18px; padding:14px}
.draw-tools{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:10px}
.swatches.small button{width:34px; height:34px}
#pad{display:block; width:100%; max-width:420px; aspect-ratio:1; margin:0 auto 12px; touch-action:none; background:repeating-conic-gradient(#f2eee2 0 25%, #fff 0 50%) 0 0/24px 24px; cursor:crosshair}
.ok{font-weight:800}
.lockcard{background:var(--paper); border:2.5px solid var(--ink); border-radius:18px; padding:14px; margin:0 0 14px}

.lockcard header{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px}
.lockcard header b{font-size:1.2rem; font-weight:900}
.code-row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.slots{display:flex; gap:6px; flex:1; min-width:220px}
.slots i{flex:1; min-height:44px; display:grid; place-items:center; font-style:normal; font-weight:800; font-size:.78rem; text-align:center; padding:2px}
.slots i.on{animation:pillpop .4s}
.field select, .field textarea{min-height:46px; border:2px solid var(--ink); border-radius:12px; padding:8px 12px; font:inherit; font-weight:600; background:#fff}
.addlock{border-style:dashed}
.wiz-nav{display:flex; justify-content:space-between; gap:10px; margin-top:18px}
.wiz-nav .btn{font-size:1.05rem}
.summary{background:var(--paper); border:2.5px solid var(--ink); border-radius:16px; padding:12px 14px; margin-bottom:14px}
.summary p{margin:0}
.linkbox{display:flex; gap:8px}
.linkbox input{flex:1; min-width:0; min-height:48px; border:2px solid var(--ink); border-radius:12px; padding:0 12px; font-weight:700}

/* =================== join page =================== */
body.join{color:var(--ink); min-height:100%; display:grid; place-items:center; padding:20px}
.join-card{max-width:460px; width:100%; background:var(--paper); border:3px solid var(--ink); border-radius:26px; box-shadow:0 6px 0 var(--ink)}
.join-card h1{font-weight:900; margin:8px 0}
.join-art{width:180px; margin:12px auto 0; display:block}
body.admin{background:var(--sand)}
.grow{flex:1}

/* preview iframe: no chrome */
body.preview .wordmark, body.preview .pill-wrap{display:none}

/* =================== owner console =================== */
body.owner{color:var(--ink); font-family:"Space Grotesk","Helvetica Neue",system-ui,sans-serif}
.own-top{position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:calc(var(--safe-t) + 12px) 18px 12px; color:var(--paper)}
.own-top .wordmark.static{color:var(--paper)}
.own-tag{background:var(--yellow); color:var(--ink); border-radius:999px; padding:2px 10px; font-weight:800; font-size:.8rem}
.own-tabs{display:flex; gap:4px; flex:1; overflow-x:auto}
.own-tabs button{background:transparent; border:0; color:#CFC6B0; font:inherit; font-weight:700; padding:8px 12px; border-radius:999px; cursor:pointer; white-space:nowrap}
.own-tabs button[aria-current]{background:var(--paper); color:var(--ink)}
.own-range{display:flex; gap:4px; background:#2a2a2a; border-radius:999px; padding:3px}
.own-range button{background:transparent; border:0; color:#CFC6B0; font:inherit; font-weight:800; padding:6px 12px; border-radius:999px; cursor:pointer}
.own-range button[aria-pressed="true"]{background:var(--yellow); color:var(--ink)}
.own-main{max-width:1200px; margin:0 auto; padding:18px 18px 60px}
.own-gate{display:grid; place-items:center; text-align:center; min-height:50vh; gap:10px}
.own-meta{margin:0 0 10px; font-size:.85rem}
.own-sec{background:var(--paper); border:2px solid var(--ink); border-radius:18px; padding:16px 18px; margin:14px 0}
.own-sec header h2{margin:0; font-size:1.15rem; font-weight:700}
.own-sec header p{margin:4px 0 12px; font-size:.88rem}
.cols{display:grid; gap:14px} @media (min-width:900px){ .cols{grid-template-columns:1fr 1fr} .cols .own-sec{margin:0} }
.kpis{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; margin:12px 0}
.kpi{background:#fff; border:2px solid var(--ink); border-radius:14px; padding:12px 14px; display:flex; flex-direction:column; gap:2px; min-height:104px}
.kpi.big{grid-column:span 2; color:var(--paper)}
.kpi.big .kpi-l, .kpi.big small{color:#CFC6B0}
.kpi-l{font-weight:700; font-size:.82rem; color:var(--muted)}
.kpi b{font-size:1.8rem; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.15}
.kpi.big b{color:var(--yellow)}
.kpi .of{font-size:1rem; color:#CFC6B0}
.kpi small{font-size:.78rem; color:var(--muted); font-weight:500}
.kpi .meter{background:#2a2a2a; border-color:#555}
.kpi-f{display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:auto}
.delta{font-weight:800; font-size:.78rem; border-radius:999px; padding:1px 8px}
.delta.up{background:#DDF3E3; color:#1E7A3C} .delta.down{background:#FBE3D9; color:#B3261E}
.tgt{font-weight:800; font-size:.72rem; border-radius:999px; padding:1px 8px; border:1.5px solid currentColor}
.tgt.ok{color:#1E7A3C} .tgt.low{color:#B3261E}
.insights{margin:0; padding-left:1.2em; display:grid; gap:8px; font-weight:500}
.chart{position:relative}
.hbars{display:grid; gap:8px}
.hbar{display:grid; grid-template-columns:minmax(120px,30%) 1fr auto; gap:10px; align-items:center; font-size:.9rem}
.hbar span{font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hbar div{height:14px; border-radius:999px; overflow:hidden}
.hbar i{display:block; height:100%}
.hbar b{font-variant-numeric:tabular-nums; white-space:nowrap}
.hbar em{font-style:normal; color:var(--muted); font-weight:500; font-size:.78rem; margin-left:4px}
.tbl{overflow-x:auto}
.tbl table{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; font-size:.9rem}
.tbl th{text-align:left; font-size:.78rem; text-transform:uppercase; letter-spacing:1px; color:var(--muted); padding:8px}
.tbl td{padding:8px}
.tbl td.heat{font-weight:700; text-align:center}
.warn{color:#B3261E}

.chipbtn.hear span{color:#8A6A00}

/* =================== hub v3: movable, info-sharing =================== */
.pill-wrap{top:auto; right:auto}
.pill-wrap[data-pos^="b"]{bottom:calc(var(--safe-b) + 18px); top:auto; flex-direction:column}
.pill-wrap[data-pos^="t"]{top:calc(var(--safe-t) + 12px); bottom:auto; flex-direction:column-reverse}
.pill-wrap[data-pos$="c"]{left:50%; right:auto; transform:translateX(-50%); align-items:center}
.pill-wrap[data-pos$="l"]{left:calc(env(safe-area-inset-left, 0px) + 12px); right:auto; transform:none; align-items:flex-start; width:min(440px, calc(100vw - 24px))}
.pill-wrap[data-pos$="r"]{right:calc(env(safe-area-inset-right, 0px) + 12px); left:auto; transform:none; align-items:flex-end; width:min(440px, calc(100vw - 24px))}
.pill-wrap.collapsed{width:auto}
.pill-wrap.collapsed[data-pos$="c"]{left:calc(env(safe-area-inset-left, 0px) + 12px); transform:none}
.pill-wrap.dragging{transition:none; opacity:.92}
.pill-wrap.dragging .pill-row{box-shadow:0 18px 40px rgba(0,0,0,.5); transform:scale(1.04); cursor:grabbing}
.pill-row{touch-action:none; cursor:grab}
.pill-wrap[data-pos$="l"] .pill-row, .pill-wrap[data-pos$="r"] .pill-row{width:auto}
.pill-logo{position:relative}
.pill-badge{position:absolute; top:-2px; right:-2px; min-width:20px; height:20px; padding:0 5px; border-radius:999px; color:#fff; font-size:.72rem; display:grid; place-items:center; line-height:1; animation:pillpop .5s}
.pill-badge[hidden]{display:none}
.pill-sub{max-width:min(240px, 52vw); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block}
.pill-sub.swap{animation:subIn .35s ease}
@keyframes subIn{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}

.hub-now:empty{display:none}

.now-card{scroll-snap-align:start}
.now-card i{display:grid; place-items:center}
.now-card i svg{fill:none; stroke-linecap:round; stroke-linejoin:round}
.now-card div{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.now-card b{line-height:1.2}
.now-card span{line-height:1.3; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden}
.now-card .chipbtn{min-height:38px; padding:4px 12px; flex:0 0 auto}
.now-card.tone-yellow{background:#FFF6CC} 
.now-card.tone-green{background:#E3F6E8} 
.now-meter{display:block; border-radius:999px; overflow:hidden; margin-top:3px}
.now-meter u{display:block; height:100%; text-decoration:none}

.hub-search{margin-top:6px}

.pos-grid button{font-weight:900}

/* keep game overlays clear of the hub wherever it sits */
body[data-pill^="t"] .bubble{top:calc(var(--safe-t) + 96px)}
body[data-pill^="t"] .coopbar{top:calc(var(--safe-t) + 74px)}
body[data-pill^="t"] .coopfeed{top:calc(var(--safe-t) + 128px)}
body[data-pill^="t"] .chip{bottom:calc(var(--safe-b) + 16px)}
body[data-pill^="t"] .zone{bottom:calc(var(--safe-b) + 44px)}
body[data-pill^="t"] .reveal{bottom:calc(var(--safe-b) + 20px)}
body[data-pill="tl"] .wordmark{display:none}
body[data-pill="tr"] .lock{right:auto; left:50%; transform:translateX(-50%); top:calc(var(--safe-t) + 78px)}
body[data-pill="tc"] .lock{top:calc(var(--safe-t) + 78px)}

/* =================== hub v4: motion and friendliness =================== */
.pill-wrap[data-pos^="b"] .hub{transform-origin:50% 100%}
.pill-wrap[data-pos^="t"] .hub{transform-origin:50% 0}
.pill-wrap[data-pos$="l"] .hub{transform-origin:0 100%} .pill-wrap[data-pos="tl"] .hub{transform-origin:0 0}
.pill-wrap[data-pos$="r"] .hub{transform-origin:100% 100%} .pill-wrap[data-pos="tr"] .hub{transform-origin:100% 0}
.hub:not([hidden]){animation:hubIn .32s cubic-bezier(.25,1.5,.45,1) both}
.hub.closing{animation:hubOut .15s ease-in both}
@keyframes hubIn{from{opacity:0; transform:scale(.86) translateY(10px)}to{opacity:1; transform:none}}
@keyframes hubOut{to{opacity:0; transform:scale(.94) translateY(6px)}}
.pill-wrap[data-pos^="t"] .hub:not([hidden]){animation-name:hubInTop}
@keyframes hubInTop{from{opacity:0; transform:scale(.86) translateY(-10px)}to{opacity:1; transform:none}}
.hub:not([hidden]) .now-card, .hub:not([hidden]) .hub-panel:not([hidden]) .tile, .hub:not([hidden]) .hub-panel:not([hidden]) .chipbtn{animation:popIn .34s cubic-bezier(.3,1.6,.5,1) both; animation-delay:calc(var(--i, 0) * 28ms)}
@keyframes popIn{from{opacity:0; transform:translateY(8px) scale(.94)}to{opacity:1; transform:none}}
.tile, .chipbtn, .now-card{transition:transform .12s, background .15s}
.tile:active, .chipbtn:active{transform:scale(.96)}
@media (hover:hover){ .tile:hover{transform:translateY(-2px)} .chipbtn:hover{transform:translateY(-1px)} }
.hub-grab{display:block; width:100%; border:0; background:transparent; cursor:pointer; touch-action:none}
.hub-grab span{display:block; margin:0 auto; border-radius:999px}
.pill-tip{position:absolute; white-space:nowrap; padding:8px 12px; font-size:.9rem; pointer-events:none; animation:popIn .35s cubic-bezier(.3,1.6,.5,1)}
.pill-tip[hidden]{display:none}
.pill-row{position:relative}
.pill-wrap[data-pos^="b"] .pill-tip{bottom:calc(100% + 12px)} .pill-wrap[data-pos^="t"] .pill-tip{top:calc(100% + 12px)}
.pill-wrap[data-pos$="c"] .pill-tip{left:50%; transform:translateX(-50%)} .pill-wrap[data-pos$="l"] .pill-tip{left:0} .pill-wrap[data-pos$="r"] .pill-tip{right:0}
.pill-wrap.wiggle .pill-row{animation:wiggle 1.1s ease}
@keyframes wiggle{0%,100%{transform:rotate(0)}15%{transform:rotate(-4deg)}30%{transform:rotate(3.5deg)}45%{transform:rotate(-2.5deg)}60%{transform:rotate(1.5deg)}75%{transform:rotate(-.5deg)}}

.slots i small{display:block; font-size:.7rem}
.sounds-row{margin:10px 0 0; font-weight:600; display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.sounds-row b{border-radius:8px; padding:2px 8px}
.chipbtn.hear em{font-style:normal; color:#6B5300; font-weight:700}
.field small{display:block; margin-top:4px; font-weight:600}

/* =====================================================================
   Hub v5: clean, system-grade navigation (glass, SF type, grouped lists)
   ===================================================================== */
:root{--sys:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --label:#1C1C1E; --label2:rgba(60,60,67,.62); --label3:rgba(60,60,67,.32); --hair:rgba(60,60,67,.16); --fill:rgba(118,118,128,.12); --fill2:rgba(118,118,128,.08); --card:#FFFFFF; --blue:#0A84FF; --green:#30B653; --red:#FF3B30; --orange:#FF9500; --gray:#8E8E93; --indigo:#5856D6}
/* the pill */
.pill-row{background:rgba(28,28,30,.72); -webkit-backdrop-filter:saturate(180%) blur(22px); backdrop-filter:saturate(180%) blur(22px); border:.5px solid rgba(255,255,255,.14); border-radius:999px; padding:4px 8px 4px 4px; gap:4px; box-shadow:0 10px 30px rgba(0,0,0,.28), 0 1px 0 rgba(255,255,255,.06) inset}
.pill-logo{width:48px; height:48px; background:transparent}
.pill-row .pill{font-family:var(--sys); color:#fff; min-height:44px; padding:4px 10px 4px 6px; gap:10px}
#pillMain{font-family:var(--sys); font-weight:600; font-size:15px; letter-spacing:-.01em}
.pill-sub{font-family:var(--sys); font-weight:500; font-size:12px; color:rgba(235,235,245,.62)}
.pill-chev{width:18px; height:18px; fill:none; stroke:rgba(235,235,245,.7); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.pill-badge{background:var(--red); border:2px solid rgba(28,28,30,1); font-family:var(--sys); font-weight:700}
.pill-tip{font-family:var(--sys); font-weight:500; background:#fff; color:var(--label); border:0; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.25)}
.pill-tip b{font-weight:700}

/* the sheet */
.hub{font-family:var(--sys); color:var(--label); background:rgba(242,242,247,.84); -webkit-backdrop-filter:saturate(180%) blur(30px); backdrop-filter:saturate(180%) blur(30px); border:.5px solid rgba(255,255,255,.55); border-radius:28px; padding:6px 14px 14px; box-shadow:0 30px 70px rgba(0,0,0,.32), 0 2px 10px rgba(0,0,0,.08); max-height:min(74vh, 660px); overflow:auto; overscroll-behavior:contain; scrollbar-width:none; animation:none}
.hub::-webkit-scrollbar{display:none}
.hub-grab{height:18px; margin:0 0 2px}
.hub-grab span{width:36px; height:5px; background:var(--label3)}
.hub:not([hidden]) .hub-page{animation:fadeUp .28s cubic-bezier(.2,.9,.3,1) both}
.hub-page.from-right{animation:slideL .26s cubic-bezier(.2,.9,.3,1) both !important}
.hub-page.from-left{animation:slideR .26s cubic-bezier(.2,.9,.3,1) both !important}
@keyframes fadeUp{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
@keyframes slideL{from{opacity:0; transform:translateX(24px)}to{opacity:1; transform:none}}
@keyframes slideR{from{opacity:0; transform:translateX(-24px)}to{opacity:1; transform:none}}
.hub:not([hidden]) .gtile, .hub:not([hidden]) .list, .hub:not([hidden]) .now-card{animation:fadeUp .3s cubic-bezier(.2,.9,.3,1) both; animation-delay:calc(var(--i, 0) * 22ms)}

/* now card */
.hub-now{margin:2px 0 10px}
.now-card{flex:none; display:flex; align-items:center; gap:12px; background:var(--card); border:0; border-radius:16px; padding:12px 12px 12px 12px; box-shadow:0 1px 0 rgba(0,0,0,.04)}
.now-card i{flex:0 0 36px; height:36px; border-radius:10px; border:0; background:var(--fill)}
.now-card i svg{width:20px; height:20px; stroke:var(--label); stroke-width:1.8}
.now-card.tone-yellow i{background:#FFD21F} .now-card.tone-green i{background:#C9F2D3}
.now-card.tone-yellow, .now-card.tone-green{background:var(--card)}
.now-card b{font-family:var(--sys); font-weight:600; font-size:15px; letter-spacing:-.01em}
.now-card span{font-family:var(--sys); font-weight:400; font-size:13px; color:var(--label2); -webkit-line-clamp:2}
.now-meter{height:4px; background:var(--fill)} .now-meter u{background:var(--orange)}
.now-act{flex:0 0 auto; border:0; background:var(--fill); color:var(--blue); font:600 14px var(--sys); padding:7px 14px; border-radius:999px; cursor:pointer}
.now-act:active{opacity:.6}

/* search */
.hub-search{display:flex; align-items:center; gap:6px; height:38px; padding:0 10px; margin:0 0 12px; background:var(--fill); border:0; border-radius:11px}
.hub-search svg{width:17px; height:17px; fill:none; stroke:var(--label2); stroke-width:2; flex:0 0 auto}
.hub-search input{flex:1; min-width:0; min-height:0; height:100%; border:0; outline:0; background:transparent; font:400 17px var(--sys); color:var(--label)}
.hub-search input::placeholder{color:var(--label2)}
.hub-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.hub-results{margin:-4px 0 8px; border-radius:14px; gap:0}
.hub-results:empty{display:none}
.result{min-height:46px; border-radius:0; padding:10px 14px; font:500 16px var(--sys); color:var(--label); border-bottom:.5px solid var(--hair)}
.result:last-child{border-bottom:0}
.result span{font:400 13px var(--sys); color:var(--label2)}
.result[aria-selected="true"], .result:hover{background:var(--fill2)}
.hub-empty{margin:0; padding:14px; font:400 14px var(--sys); color:var(--label2); background:var(--card); border-radius:14px}

/* primary destinations: app-icon grid */
.hub-grid{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:6px; margin:0 0 14px}
.gtile{display:flex; flex-direction:column; align-items:center; gap:6px; padding:6px 2px; text-decoration:none; color:var(--label); background:transparent; border:0; font:inherit; cursor:pointer; border-radius:14px; transition:transform .12s}
.gtile i{width:56px; height:56px; border-radius:16px; display:grid; place-items:center; background:var(--card); box-shadow:0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.05)}
.gtile i svg{width:26px; height:26px; fill:none; stroke:var(--label); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.gtile span{font:500 12px var(--sys); letter-spacing:-.005em}
.gtile:active{transform:scale(.94)}
.gtile[aria-current="page"] i{background:#FFD21F}

/* grouped lists */
.list{background:var(--card); border-radius:14px; overflow:hidden; margin:0 0 12px}
.row{display:flex; align-items:center; gap:12px; width:100%; min-height:48px; padding:8px 14px; background:transparent; border:0; text-align:left; text-decoration:none; color:var(--label); font:400 16px var(--sys); cursor:pointer; position:relative}
.row + .row::before{content:""; position:absolute; top:0; right:0; left:56px; border-top:.5px solid var(--hair)}
.list > .row:first-child::before{display:none}
.row.toggle + .row::before, .row.toggle + .row.toggle::before, .row.static + .row::before{left:14px}
.row:has(> .ic) + .row::before{left:56px}
.row:active:not(.static){background:var(--fill2)}
.row .ic{flex:0 0 30px; height:30px; border-radius:8px; display:grid; place-items:center}
.row .ic svg{width:18px; height:18px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.ic.blue{background:var(--blue)} .ic.yellow{background:#FFC400} .ic.red{background:var(--red)} .ic.gray{background:var(--gray)} .ic.green{background:var(--green)} .ic.indigo{background:var(--indigo)}
.row-l{flex:1; min-width:0; display:flex; flex-direction:column}
.row-l small{font:400 13px var(--sys); color:var(--label2); margin-top:1px}
.row .chev{width:16px; height:16px; fill:none; stroke:var(--label3); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto}
.row-badge{background:var(--red); color:#fff; font:600 13px var(--sys); min-width:22px; height:22px; padding:0 7px; border-radius:999px; display:grid; place-items:center}
.row.danger{color:var(--red); justify-content:center}
.row.danger .row-l{align-items:center}
.row.static{cursor:default}
.row[aria-current="page"] .row-l{font-weight:600}

/* iOS-style switches */
.sw{flex:0 0 51px; height:31px; border-radius:999px; background:rgba(120,120,128,.16); position:relative; transition:background .25s}
.sw::after{content:""; position:absolute; top:2px; left:2px; width:27px; height:27px; border-radius:50%; background:#fff; box-shadow:0 3px 8px rgba(0,0,0,.15), 0 1px 1px rgba(0,0,0,.16); transition:transform .25s cubic-bezier(.3,1.3,.5,1)}
.toggle[aria-pressed="true"] .sw{background:var(--green)}
.toggle[aria-pressed="true"] .sw::after{transform:translateX(20px)}

/* sub-page header */
.hub-head{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; margin:0 0 6px; min-height:40px}
.hub-head h2{margin:0; font:600 17px var(--sys); letter-spacing:-.01em}
.hub-back{justify-self:start; display:flex; align-items:center; gap:2px; border:0; background:transparent; color:var(--blue); font:400 17px var(--sys); cursor:pointer; padding:6px 4px 6px 0}
.hub-back svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.g-title{margin:14px 14px 6px; font:400 13px var(--sys); text-transform:uppercase; letter-spacing:.02em; color:var(--label2)}
.g-note{margin:-2px 14px 8px; font:400 13px var(--sys); color:var(--label2); line-height:1.35}
.cards{display:grid; gap:8px; margin:0 0 6px}

/* controls */
.scroller{display:flex; gap:8px; overflow-x:auto; padding:2px 2px 4px; margin:-4px 0 4px; scrollbar-width:none}
.scroller::-webkit-scrollbar{display:none}
.cap{flex:0 0 auto; height:36px; padding:0 16px; border-radius:999px; border:0; background:var(--card); color:var(--label); font:500 15px var(--sys); cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.06)}
.cap:active{transform:scale(.96)}
.cap.running{background:#FFD21F}
.segmented{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); background:var(--fill); border-radius:10px; padding:2px; gap:2px}
.segmented button{height:32px; border:0; border-radius:8px; background:transparent; font:500 13px var(--sys); color:var(--label); cursor:pointer; transition:background .2s, box-shadow .2s}
.segmented button[aria-pressed="true"]{background:#fff; box-shadow:0 3px 8px rgba(0,0,0,.12), 0 3px 1px rgba(0,0,0,.04); font-weight:600}
.sound-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px}
.hear{display:flex; flex-direction:column; align-items:flex-start; gap:1px; padding:10px 12px; border:0; border-radius:12px; background:var(--card); text-align:left; cursor:pointer; font-family:var(--sys)}
.hear b{font:600 14px var(--sys); color:var(--label); text-transform:capitalize}
.hear span{font:400 13px var(--sys); color:var(--label2)}
.hear:active{transform:scale(.97); background:#FFF6CC}
.say-field{display:flex; align-items:center; gap:6px; background:var(--card); border-radius:22px; padding:4px 4px 4px 14px; margin:0 0 8px}
.say-field input{flex:1; min-width:0; border:0; outline:0; background:transparent; font:400 16px var(--sys); color:var(--label); height:36px}
.say-field button{width:32px; height:32px; border-radius:50%; border:0; background:var(--blue); display:grid; place-items:center; cursor:pointer}
.say-field button svg{width:16px; height:16px; fill:none; stroke:#fff; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}
.pos-grid{display:grid; grid-template-columns:repeat(3, 18px); gap:5px; padding:6px; background:var(--fill); border-radius:9px}
.pos-grid button{width:18px; height:14px; border-radius:4px; border:0; background:rgba(120,120,128,.28); cursor:pointer; font-size:0}
.pos-grid button[aria-pressed="true"]{background:var(--blue)}
.feed .row.static{min-height:44px}
.feed .row-l{font-size:15px}
@media (prefers-reduced-motion: reduce){ .hub-page, .gtile, .list, .now-card{animation:none !important} }

/* =====================================================================
   Design system v6: every surface the menu opens shares the hub's look.
   Brand fonts stay only on the character's world (bubbles, stencils, comic words).
   ===================================================================== */
:root{--bg:#F2F2F7; --surface:#FFFFFF; --ink:#1C1C1E; --sand:#F2F2F7; --paper:#FFFFFF; --line:rgba(60,60,67,.16); --muted:rgba(60,60,67,.62); --r-card:18px; --r-ctl:12px; --shadow-1:0 1px 2px rgba(0,0,0,.06), 0 6px 18px rgba(0,0,0,.05); --shadow-2:0 24px 60px rgba(0,0,0,.25), 0 2px 10px rgba(0,0,0,.08)}

/* ---------- pages ---------- */
body:not([data-view="play"]){background:var(--bg)}
.page{background:var(--bg); color:var(--label); font-family:var(--sys); padding:calc(var(--safe-t) + 64px) 16px calc(var(--safe-b) + 120px)}
.page-head{margin:0 0 20px}
.eyebrow{font:600 13px var(--sys); letter-spacing:.02em; text-transform:uppercase; color:var(--label2); margin:0 0 2px}
.page .stencil, .page-head h1, .wizard h1, .join-card h1, .own-gate h1, .auth-card h2, .sheet-form h2{font-family:var(--sys) !important; font-weight:700; letter-spacing:-.025em; color:var(--label)}
.page .stencil, .page-head h1{font-size:clamp(30px, 6vw, 40px); line-height:1.1; margin:0 0 6px}
.lede{font:400 17px/1.45 var(--sys); color:var(--label2); max-width:60ch}
.h2{font:700 22px var(--sys); letter-spacing:-.02em; margin:28px 0 10px; color:var(--label)}
.muted{color:var(--label2)} .small{font-size:13px}
.error{color:var(--red); font:500 14px var(--sys)}
.ok{color:var(--green); font:600 14px var(--sys)}
body:not([data-view="play"]) .wordmark{color:var(--label); font-size:17px; letter-spacing:2px}

/* ---------- buttons: primary (ink), secondary (fill), text (tint) ---------- */
.btn{font:600 16px var(--sys); letter-spacing:-.01em; min-height:44px; padding:0 20px; border:0; border-radius:999px; background:var(--fill); color:var(--label); box-shadow:none; display:inline-flex; align-items:center; justify-content:center; gap:6px; text-decoration:none; transition:transform .12s, opacity .12s}
.btn:active{transform:scale(.97); box-shadow:none}
.btn-yellow, .btn.primary{background:var(--ink); color:#fff}
.btn.wide{width:100%; min-height:50px; font-size:17px}
.btn[disabled]{opacity:.45}
.ghostbtn{background:transparent; color:var(--blue)}
.btn-row{gap:10px}
.icon-btn{width:34px; height:34px; border:0; border-radius:50%; background:var(--fill); color:var(--label2); font:600 18px var(--sys)}
.icon-btn svg{width:18px; height:18px}
.chipbtn{font:500 15px var(--sys); min-height:36px; padding:0 14px; border:0; border-radius:999px; background:var(--fill); color:var(--label); text-decoration:none; display:inline-flex; align-items:center}
.chipbtn[aria-pressed="true"], .chipbtn.running{background:#FFD21F}
.chipbtn.ghost{border:0; background:transparent; color:var(--blue)}

/* ---------- form controls ---------- */
.field{font:500 13px var(--sys); color:var(--label2); gap:6px; margin-top:14px}
.field > span{text-transform:uppercase; letter-spacing:.02em; padding-left:4px}
.field input, .field select, .field textarea, .ui-input, .linkbox input{font:400 17px var(--sys); color:var(--label); min-height:46px; border:0; border-radius:var(--r-ctl); background:var(--surface); padding:10px 14px; box-shadow:inset 0 0 0 .5px var(--line); outline:none; width:100%}
.field input:focus, .field select:focus, .field textarea:focus, .ui-input:focus{box-shadow:inset 0 0 0 2px var(--blue)}
.check{font:500 16px var(--sys); color:var(--label)}
.check input{accent-color:var(--green)}
fieldset{margin:18px 0 0} legend{font:600 15px var(--sys); color:var(--label); margin-bottom:8px}
.seg{display:inline-flex; flex-wrap:wrap; gap:2px; background:var(--fill); border-radius:10px; padding:2px}
.seg button{min-height:34px; min-width:48px; padding:0 14px; border:0; border-radius:8px; background:transparent; font:500 14px var(--sys); color:var(--label)}
.seg button[aria-pressed="true"]{background:#fff; color:var(--label); box-shadow:0 3px 8px rgba(0,0,0,.12), 0 3px 1px rgba(0,0,0,.04); font-weight:600}
.swatches button{width:38px; height:38px; border:0; box-shadow:inset 0 0 0 .5px rgba(0,0,0,.2)}
.swatches button[aria-pressed="true"]{box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--blue)}
.qty output{font:600 20px var(--sys)}

/* ---------- cards and lists on pages ---------- */
.card, .scard, .lockcard, .summary, .draw-panel, .join-card, .own-sec, .stats div, .badge-card.got, .locks li, .mylist li, .empty, .feature, .pick, .kpi{border:0 !important; box-shadow:var(--shadow-1); border-radius:var(--r-card); background:var(--surface)}
.card{transform:none}
.card:hover, .scard:hover{transform:translateY(-2px); box-shadow:0 2px 4px rgba(0,0,0,.06), 0 14px 30px rgba(0,0,0,.08)}
.card .tee, .sheet-art .tee{background:var(--bg); border:0; border-radius:14px}
.card .tee{border-radius:0}
.card-body{font-family:var(--sys); padding:12px 14px 16px}
.card-body h3, .scard-body b{font:600 17px var(--sys); letter-spacing:-.01em; color:var(--label)}
.card-body p, .scard-body span{font:400 14px var(--sys); color:var(--label2)}
.price{font:600 16px var(--sys)}
.badge{font:700 11px var(--sys); letter-spacing:.04em; border:0; background:#FFD21F; color:var(--ink); padding:3px 8px}
.scard-body small{font:600 12px var(--sys); letter-spacing:.02em; color:var(--label2)}
.scard-art{background:var(--bg)}
.feature{background:var(--ink); color:#fff}
.feature b{font:700 26px var(--sys); letter-spacing:-.02em}
.feature small{font:600 12px var(--sys); letter-spacing:.04em; color:#FFD21F}
.feature span{font:400 15px var(--sys); color:rgba(235,235,245,.7)}
.empty{font-family:var(--sys); border:0}
.stats div{padding:14px}
.stats b{font:700 28px var(--sys); letter-spacing:-.02em}
.stats span{font:500 13px var(--sys); color:var(--label2)}
.badges{gap:8px}
.badge-card{font-family:var(--sys); border:0 !important; background:transparent; box-shadow:inset 0 0 0 1px var(--line); border-radius:var(--r-card)}
.badge-card b{font:600 14px var(--sys)} .badge-card span{font:400 12px var(--sys)}
.locks{gap:0; background:var(--surface); border-radius:var(--r-card); overflow:hidden; box-shadow:var(--shadow-1)}
.locks li{border-radius:0 !important; box-shadow:none; padding:12px 16px; position:relative; font-family:var(--sys)}
.locks li + li::before{content:""; position:absolute; top:0; left:16px; right:0; border-top:.5px solid var(--line)}
.locks li.todo{background:var(--surface); color:var(--label3)}
.locks h3{font:600 16px var(--sys); margin:2px 0 0}
.locks small{font:500 12px var(--sys); text-transform:uppercase; letter-spacing:.02em; color:var(--label2)}
.locks .clue, .reveal .clue{background:#FFF6CC; border-radius:10px; font:500 15px/1.4 var(--sys); color:var(--label); padding:10px 12px}
.mylist{gap:0; background:var(--surface); border-radius:var(--r-card); overflow:hidden; box-shadow:var(--shadow-1)}
.mylist li{border-radius:0 !important; box-shadow:none; font-family:var(--sys); padding:12px 14px; position:relative}
.mylist li + li::before{content:""; position:absolute; top:0; left:14px; right:0; border-top:.5px solid var(--line)}
.mylist li b{font:600 16px var(--sys)} .mylist li span{font:400 13px var(--sys)}
.account p{font:400 15px var(--sys)}
.pro{font:700 11px var(--sys); border:0; background:#FFD21F; padding:2px 8px}
.steps{font:400 17px/1.5 var(--sys); color:var(--label)}
.steps b{font-weight:600}
.meter{height:6px; border:0; background:var(--fill)} .meter i{background:var(--orange)} .meter.big{height:8px}

/* ---------- sheets (product, sign-in) ---------- */
.sheet{background:rgba(0,0,0,.36); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px)}
.sheet-card{font-family:var(--sys); color:var(--label); background:var(--bg); border:0; border-radius:28px 28px 0 0; padding:26px 18px calc(var(--safe-b) + 22px); box-shadow:var(--shadow-2)}
.sheet-card::before{content:""; position:absolute; top:8px; left:50%; width:36px; height:5px; margin-left:-18px; border-radius:999px; background:var(--label3)}
@media (min-width:760px){ .sheet-card{border-radius:28px} .sheet-card::before{display:none} }
.sheet-close{top:14px; right:14px}
.sheet-form h2, .auth-card h2{font-size:28px; margin:0 0 4px}
.auth-seg{display:flex; width:100%} .auth-seg button{flex:1}

/* ---------- dialogs ---------- */
.ui-scrim{position:fixed; inset:0; z-index:95; display:grid; place-items:center; padding:24px; background:rgba(0,0,0,.32); animation:fadeIn .15s ease}
.ui-scrim.out{animation:fadeOut .16s ease forwards}
@keyframes fadeIn{from{opacity:0}} @keyframes fadeOut{to{opacity:0}}
.ui-alert{width:min(320px, 100%); background:rgba(242,242,247,.92); -webkit-backdrop-filter:saturate(180%) blur(30px); backdrop-filter:saturate(180%) blur(30px); border-radius:16px; overflow:hidden; font-family:var(--sys); text-align:center; box-shadow:var(--shadow-2); animation:alertIn .22s cubic-bezier(.2,1.2,.4,1)}
@keyframes alertIn{from{opacity:0; transform:scale(1.08)}}
.ui-body{padding:18px 16px 14px}
.ui-body h2{margin:0 0 4px; font:600 17px var(--sys); letter-spacing:-.01em; color:var(--label)}
.ui-body p{margin:0; font:400 13px/1.4 var(--sys); color:var(--label)}
.ui-extra:empty{display:none}
.ui-extra{margin-top:12px; text-align:left}
.ui-input{min-height:40px; font-size:15px; border-radius:9px; margin-top:8px}
.ui-options{display:grid; gap:6px}
.ui-options button{min-height:40px; border:0; border-radius:9px; background:var(--surface); font:500 15px var(--sys); color:var(--label); text-align:left; padding:0 12px; box-shadow:inset 0 0 0 .5px var(--line)}
.ui-options button[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--blue)}
.ui-actions{display:grid; grid-template-columns:1fr 1fr; border-top:.5px solid var(--line)}
.ui-actions.stack{grid-template-columns:1fr}
.ui-actions button{min-height:44px; border:0; background:transparent; font:400 17px var(--sys); color:var(--blue); cursor:pointer}
.ui-actions button + button{border-left:.5px solid var(--line)}
.ui-actions.stack button + button{border-left:0; border-top:.5px solid var(--line)}
.ui-actions .primary{font-weight:600}
.ui-actions .destructive{color:var(--red); font-weight:600}
.ui-actions button:active{background:var(--fill2)}

/* ---------- walkthrough ---------- */
.coach-spot{border:2px solid #fff; box-shadow:0 0 0 9999px rgba(0,0,0,.62); border-radius:18px}
.coach-card{font-family:var(--sys); background:rgba(255,255,255,.94); -webkit-backdrop-filter:saturate(180%) blur(30px); backdrop-filter:saturate(180%) blur(30px); border:0; border-radius:24px; box-shadow:var(--shadow-2); padding:20px 20px 16px}
.coach-count{font:600 12px var(--sys); letter-spacing:.04em; color:var(--label2)}
.coach-card h2{font:700 24px var(--sys); letter-spacing:-.02em; color:var(--label)}
.coach-card p{font:400 16px/1.45 var(--sys); color:var(--label2)}
.coach-dots i{background:var(--fill); height:7px; width:7px} .coach-dots i.on{background:var(--ink); width:18px}
.coach-btns .btn{min-height:48px; font-size:16px}
.coach-btns .ghostbtn{color:var(--label2); background:transparent}

/* ---------- clue card, toasts, banners ---------- */
.reveal{font-family:var(--sys); background:rgba(255,255,255,.95); -webkit-backdrop-filter:saturate(180%) blur(30px); backdrop-filter:saturate(180%) blur(30px); border:0; border-radius:22px; box-shadow:var(--shadow-2); padding:18px}
.reveal small, #revealKicker{font:600 12px var(--sys); letter-spacing:.04em; text-transform:uppercase; color:var(--label2)}
.reveal h2{font:700 21px var(--sys); letter-spacing:-.02em; margin:4px 0 6px}
.reveal p{font:400 15px/1.45 var(--sys); color:var(--label2)}
.reveal .row2 small{text-transform:none; letter-spacing:0; font-weight:400}
.toast{font:500 15px var(--sys); background:rgba(28,28,30,.86); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); border-radius:14px}
.banner{font-family:var(--sys); background:rgba(255,255,255,.95); -webkit-backdrop-filter:saturate(180%) blur(30px); backdrop-filter:saturate(180%) blur(30px); border:0; border-radius:24px; box-shadow:0 0 0 1px rgba(255,210,31,.0), var(--shadow-2); padding:18px 26px}
.banner b{font:800 clamp(26px, 6vw, 34px) var(--sys) !important; letter-spacing:-.03em; color:var(--label); background:linear-gradient(transparent 62%, #FFD21F 62%, #FFD21F 92%, transparent 92%); display:inline}
.banner span{font:500 15px var(--sys); color:var(--label2); margin-top:8px}
.badge-toast{font-family:var(--sys); background:rgba(28,28,30,.88); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); border-radius:18px}
.badge-toast small{font:600 11px var(--sys); letter-spacing:.04em} .badge-toast b{font:600 15px var(--sys)} .badge-toast span{font:400 13px var(--sys)}

/* ---------- co-op bar ---------- */
.coopbar{font-family:var(--sys); background:rgba(28,28,30,.72); -webkit-backdrop-filter:saturate(180%) blur(22px); backdrop-filter:saturate(180%) blur(22px); border:.5px solid rgba(255,255,255,.14)}
.coop-who{font:600 14px var(--sys)}
.coop-chat input{font:400 15px var(--sys); background:rgba(255,255,255,.14); color:#fff}
.coop-chat input::placeholder{color:rgba(235,235,245,.5)}
.coopbar .chipbtn{background:rgba(255,255,255,.16); color:#fff}
.coopfeed p{font:500 14px var(--sys); border:0; background:#fff; box-shadow:var(--shadow-1)}
.coopfeed p.mine{background:var(--blue); color:#fff}

/* ---------- studio ---------- */
body.studio{background:var(--bg); font-family:var(--sys); color:var(--label)}
.studio-top{background:rgba(242,242,247,.86); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); border-bottom:.5px solid var(--line)}
.studio-top .wordmark.static{color:var(--label)}
.stepper button{font:500 14px var(--sys); color:var(--label2)}
.stepper i{border:0; background:var(--fill); color:var(--label2); font:600 13px var(--sys)}
.stepper .on button{background:var(--ink); color:#fff} .stepper .on i{background:#FFD21F; color:var(--ink)}
.stepper .done i{background:var(--green); color:#fff}
.save-state{font:500 13px var(--sys); color:var(--label2)}
.preview-hint{font:500 14px var(--sys); background:var(--ink); color:#FFD21F}
.wizard{font-family:var(--sys)}
.wizard h1{font-size:30px; margin:0 0 8px}
.coach-line{font:400 16px/1.45 var(--sys); color:var(--label2); background:transparent; border:0; padding:0; margin:0 0 18px}
.pick{font-family:var(--sys)}
.pick b{font:600 16px var(--sys)} .pick span{font:400 13px var(--sys); color:var(--label2)}
.pick.on{background:var(--surface); box-shadow:0 0 0 3px var(--blue), var(--shadow-1)}
.pick.on span{color:var(--label2)}
.place-swatch{border:0; border-radius:12px}
.lockcard header b{font:700 20px var(--sys); letter-spacing:-.02em}
.lockcard.rec{box-shadow:0 0 0 3px var(--blue), var(--shadow-1)}
.slots i{border:0; background:var(--bg); font:600 12px var(--sys); border-radius:10px}
.slots i.on{background:#FFF6CC; border:0}
.slots i small{color:var(--label2); font-weight:500}
.sounds-row{font:400 14px var(--sys); color:var(--label2)}
.sounds-row b{background:#FFF6CC; color:var(--label); font-weight:600}
.field small{font:400 13px var(--sys); color:var(--label2); text-transform:none; letter-spacing:0}
.addlock{background:transparent; color:var(--blue); box-shadow:inset 0 0 0 1px var(--line)}
.wiz-nav .btn{min-height:50px}
#pad{border:0; box-shadow:inset 0 0 0 .5px var(--line); border-radius:16px}
.linkbox input{font-size:15px}

/* ---------- join, loading, owner ---------- */
body.join{background:var(--bg); font-family:var(--sys)}
.join-card{padding:28px 22px; text-align:center}
.join-card h1{font-size:26px}
.loading{font:500 17px var(--sys)}
body.owner, .own-main, .kpi, .own-sec, .tbl table, .hbar{font-family:var(--sys)}
body.owner{background:var(--bg)}
.own-top{background:rgba(28,28,30,.92); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px)}
.own-tag{font:600 12px var(--sys)}
.own-tabs button, .own-range button{font:500 14px var(--sys)}
.own-sec header h2{font:600 17px var(--sys)}
.kpi b{font:700 28px var(--sys); letter-spacing:-.02em}
.kpi.big{background:var(--ink)} .kpi.big b{font-size:40px}
.kpi-l{font:500 13px var(--sys)}
.hbar i{border-right:0; background:#FFD21F; border-radius:999px}
.hbar div{background:var(--fill)}
.tbl th{border-bottom:.5px solid var(--line); font:600 12px var(--sys)}
.tbl td{border-bottom:.5px solid var(--line)}

/* =================== back navigation =================== */
body:not([data-view="play"]) .wordmark{display:none}
.nav-back{display:inline-flex; align-items:center; gap:0; min-height:44px; padding:0 10px 0 2px; border:0; background:transparent; color:var(--blue); font:400 17px var(--sys); letter-spacing:-.01em; cursor:pointer; text-decoration:none; white-space:nowrap}
.nav-back svg{width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto}
.nav-back:active{opacity:.5}
.navbar{position:fixed; z-index:25; top:0; left:0; right:0; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:calc(var(--safe-t) + 4px) 8px 4px; background:transparent; border-bottom:.5px solid transparent; transition:background .2s, border-color .2s}
.navbar .nav-back{justify-self:start}
.nav-title{font:600 17px var(--sys); letter-spacing:-.01em; color:var(--label); opacity:0; transform:translateY(4px); transition:opacity .2s, transform .2s}
body.nav-scrolled .navbar{background:rgba(242,242,247,.86); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); border-bottom-color:var(--line)}
body.nav-scrolled .nav-title{opacity:1; transform:none}
.page{padding-top:calc(var(--safe-t) + 56px)}
/* story page: a floating glass back button over the box */
.float-back{position:fixed; z-index:30; top:calc(var(--safe-t) + 12px); left:12px; display:inline-flex; align-items:center; min-height:40px; padding:0 14px 0 6px; border:.5px solid rgba(255,255,255,.14); border-radius:999px; background:rgba(28,28,30,.66); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); color:#fff; font:500 15px var(--sys); cursor:pointer; box-shadow:0 6px 20px rgba(0,0,0,.25)}
.float-back svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.float-back:active{transform:scale(.96)}
body[data-pill="tl"] .float-back{top:calc(var(--safe-t) + 76px)}
body.preview .float-back{display:none}
/* studio, join and owner bars */
.studio-top .nav-back{margin-left:-6px}
.fixed-back{position:fixed; top:calc(var(--safe-t) + 8px); left:8px}
.nav-back.light{color:#FFD21F}

/* =================== one base font =================== */
body{font-family:var(--sys)}
.bubble{font-family:"Grandstander","Comic Sans MS","Chalkboard SE",system-ui,sans-serif}   /* the character's own voice stays playful */
.chip{font:500 13px var(--sys); background:rgba(28,28,30,.66); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); border:.5px solid rgba(255,255,255,.14); padding:6px 12px}
.zone{font:500 14px var(--sys); color:rgba(255,255,255,.9)}

/* =================== hub intelligence: suggestions and answers =================== */
#hubSuggest:empty{display:none}
.suggest{display:flex; gap:8px; overflow-x:auto; margin:0 0 14px; padding:1px; scrollbar-width:none}
.suggest::-webkit-scrollbar{display:none}
.sug{flex:0 0 auto; max-width:200px; display:flex; align-items:center; gap:8px; height:40px; padding:0 14px 0 6px; border:0; border-radius:999px; background:var(--card); box-shadow:0 1px 2px rgba(0,0,0,.06); font:500 14px var(--sys); color:var(--label); cursor:pointer}
.sug i{flex:0 0 28px; height:28px; border-radius:50%; background:var(--fill); display:grid; place-items:center}
.sug i svg{width:16px; height:16px; fill:none; stroke:var(--label); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.sug span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sug:first-child i{background:#FFD21F}
.sug:active{transform:scale(.96)}
.answers{display:grid; gap:8px; padding:0 0 8px; background:transparent}
.answer{display:flex; align-items:center; gap:12px; background:var(--card); border-radius:16px; padding:12px; font-family:var(--sys)}
.answer i{flex:0 0 36px; height:36px; border-radius:10px; background:#FFD21F; display:grid; place-items:center}
.answer i svg{width:19px; height:19px; fill:none; stroke:var(--label); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.answer div{flex:1; min-width:0}
.answer b{display:block; font:600 15px var(--sys); letter-spacing:-.01em; color:var(--label)}
.answer p{margin:2px 0 0; font:400 13px/1.4 var(--sys); color:var(--label2)}
.hub-results{background:transparent; overflow:visible}
.hub-results .result{background:var(--card)}
.hub-results .result:first-of-type{border-radius:14px 14px 0 0}
.hub-results .result:last-child{border-radius:0 0 14px 14px}
.hub-results .result:only-of-type{border-radius:14px}

.zone.hover.on{opacity:.55}

/* =================== orders =================== */
.order-done{margin-top:16px; padding:16px; background:var(--surface); border-radius:var(--r-card); box-shadow:var(--shadow-1)}
.order-done h3{margin:0 0 6px; font:700 20px var(--sys)}
.order-done p{font:400 15px/1.45 var(--sys); color:var(--label2)}
.code-box{display:flex; flex-direction:column; gap:2px; background:#FFF6CC; border-radius:14px; padding:12px 16px; margin:10px 0 14px}
.code-box span{font:600 12px var(--sys); text-transform:uppercase; letter-spacing:.04em; color:var(--label2)}
.code-box b{font:700 28px var(--sys); letter-spacing:.08em; font-variant-numeric:tabular-nums}
.list-card{background:var(--surface); border-radius:var(--r-card); padding:16px 18px; box-shadow:var(--shadow-1); margin-top:18px}
.order-card{background:var(--surface); border-radius:var(--r-card); padding:16px 18px; box-shadow:var(--shadow-1); margin:0 0 12px; font-family:var(--sys)}
.order-card header{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:8px}
.order-card header small{display:block; font:500 12px var(--sys); text-transform:uppercase; letter-spacing:.04em; color:var(--label2)}
.order-card header b{font:700 20px var(--sys); letter-spacing:-.02em}
.order-card .total{font-size:18px}
.order-card .items{margin:0 0 12px; font:400 15px/1.5 var(--sys); color:var(--label2)}
.timeline{list-style:none; padding:0; margin:4px 0 12px; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:0; position:relative}
.timeline::before{content:""; position:absolute; left:10%; right:10%; top:9px; height:3px; background:var(--fill); border-radius:2px}
.timeline li{display:flex; flex-direction:column; align-items:center; gap:6px; position:relative; text-align:center}
.timeline i{width:21px; height:21px; border-radius:50%; background:var(--surface); border:3px solid var(--fill); box-sizing:border-box}
.timeline span{font:500 11px var(--sys); color:var(--label2); line-height:1.15}
.timeline li.done i{background:var(--green); border-color:var(--green)}
.timeline li.now i{background:#FFD21F; border-color:#FFD21F; box-shadow:0 0 0 4px rgba(255,210,31,.3)}
.timeline li.now span{color:var(--label); font-weight:600}
.pay-box{background:#FFF6CC; border-radius:14px; padding:12px 14px; margin:6px 0 10px}
.pay-box p{margin:0 0 10px; font:400 15px/1.45 var(--sys)}
.pay-box code{font:700 16px var(--sys); letter-spacing:.06em; background:#fff; padding:2px 8px; border-radius:8px}
.track{font:400 15px var(--sys); margin:6px 0}
.track a{color:var(--blue); text-decoration:none; font-weight:600}
.order-card details{margin-top:6px} .order-card summary{font:600 14px var(--sys); color:var(--blue); cursor:pointer}
.history{list-style:none; padding:0; margin:8px 0 0; display:grid; gap:6px}
.history li{font:400 14px var(--sys); color:var(--label2); display:flex; gap:10px}
.history li span{flex:0 0 56px; font-weight:600; color:var(--label3)}
.order-card.cancelled .timeline{opacity:.35}
.trk{display:grid; grid-template-columns:1fr 1.4fr 1.6fr auto; gap:6px; margin-top:8px}
.trk input{min-height:36px; border:0; border-radius:9px; padding:0 10px; font:400 14px var(--sys); box-shadow:inset 0 0 0 .5px var(--line)}
@media (max-width:640px){ .trk{grid-template-columns:1fr 1fr} }

/* =================== clue strip =================== */
.cluestrip{position:absolute; z-index:6; left:12px; right:12px; top:calc(var(--safe-t) + 62px); margin:0 auto; max-width:440px; font-family:var(--sys); background:rgba(255,255,255,.94); -webkit-backdrop-filter:saturate(180%) blur(24px); backdrop-filter:saturate(180%) blur(24px); border-radius:18px; box-shadow:var(--shadow-2); overflow:hidden; pointer-events:auto}
.cs-head{display:flex; align-items:center; justify-content:space-between; width:100%; padding:8px 12px 6px 14px; border:0; background:transparent; cursor:pointer; font:600 12px var(--sys); letter-spacing:.04em; text-transform:uppercase; color:var(--label2)}
.cs-head svg{width:18px; height:18px; fill:none; stroke:var(--label3); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s}
.cs-head[aria-expanded="false"] svg{transform:rotate(-90deg)}
.cs-head[aria-expanded="false"]{padding-bottom:8px}
.cs-body{padding:0 14px 12px}
.cs-body p{margin:0 0 10px; font:500 16px/1.6 var(--sys); color:var(--label)}
.cs-word{display:inline-block; border:0; border-radius:999px; padding:1px 9px; margin:0 1px; background:#FFD21F; color:var(--label); font:600 15px var(--sys); cursor:pointer; vertical-align:baseline; box-shadow:0 1px 0 rgba(0,0,0,.08)}
.cs-word:active, .cs-word.pop{animation:pillpop .4s}
.cs-actions{display:flex; gap:8px}
.cs-btn{flex:1; min-height:38px; border:0; border-radius:999px; background:var(--fill); color:var(--label); font:600 14px var(--sys); cursor:pointer}
.cs-btn.primary{background:var(--ink); color:#fff}
.cs-btn:active{transform:scale(.97)}
body[data-pill^="t"] .cluestrip{top:calc(var(--safe-t) + 128px)}
body[data-view="play"] .bubble{top:calc(var(--safe-t) + 178px)}
body[data-view="play"][data-pill^="t"] .bubble{top:calc(var(--safe-t) + 244px)}
#stage.has-coop .cluestrip{top:calc(var(--safe-t) + 66px)}
#stage.has-coop .bubble{top:calc(var(--safe-t) + 182px)}
/* hands-on walkthrough steps: the spotlight lets taps through to the character */
.coach.passthrough{pointer-events:none}
.coach.passthrough .coach-card{pointer-events:auto}
/* =================== toolkit =================== */
.cs-tools{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px}
.cs-tools:empty, .cs-tools[hidden]{display:none}
.tool{display:flex; flex-direction:column; align-items:flex-start; gap:0; min-height:38px; padding:5px 12px; border:0; border-radius:12px; background:var(--fill); font:600 13px var(--sys); color:var(--label); cursor:pointer}
.tool small{font:400 11px var(--sys); color:var(--label2)}
.tool[aria-disabled="true"]{opacity:.45}
.tool.locked{background:transparent; box-shadow:inset 0 0 0 1px var(--line); color:var(--label2); cursor:default}
.tool:not(.locked):active{transform:scale(.96)}
.tune{display:flex; align-items:flex-end; gap:6px; margin-top:10px; padding:8px 10px; background:var(--fill); border-radius:12px; height:70px}
.tune i{flex:0 0 28px; border-radius:6px 6px 2px 2px; background:#FFD21F; display:flex; align-items:flex-end; justify-content:center; font-style:normal}
.tune i b{font:700 11px var(--sys); color:var(--label); margin-bottom:2px}
.tune-l{font:600 10px var(--sys); text-transform:uppercase; letter-spacing:.04em; color:var(--label2); align-self:center}
/* the clue lives in the hub now: compact, no floating card */
.hub .cluestrip{position:static; max-width:none; margin:2px 0 10px; background:var(--card); box-shadow:0 1px 0 rgba(0,0,0,.04); border-radius:16px; -webkit-backdrop-filter:none; backdrop-filter:none}
.hub .cs-head{padding:8px 12px 4px 14px}
.hub .cs-body p{font-size:15px; line-height:1.55; margin-bottom:8px}
.hub .cs-word{font-size:14px; padding:0 8px}
.hub .cs-btn{min-height:36px; font-size:13px}
.hub .tune{height:60px}

/* lesson polish */
.coach-seq{display:flex; gap:6px; flex-wrap:wrap; margin:2px 0 8px}
.coach-seq:empty{display:none}
.coach-seq span{padding:4px 10px; border-radius:999px; background:var(--fill); font:600 14px var(--sys); color:var(--label2); transition:background .2s, color .2s}
.coach-seq span.done{background:#FFD21F; color:var(--label)}
.coach-btns .btn.ghostbtn{flex:0 0 auto; color:var(--label2); background:transparent}
#bootNote{pointer-events:none; z-index:4}

/* hands-on lesson steps: a slim strip at the screen edge, the character stays clear */
.coach.compact .coach-card{padding:12px 14px 10px; border-radius:18px; max-width:min(520px, calc(100vw - 24px)); left:50%; transform:translateX(-50%); right:auto; width:calc(100vw - 24px)}
.coach.compact .coach-art{display:none}
.coach.compact .coach-count{margin:0 0 2px; font-size:11px}
.coach.compact h2{font-size:18px; margin:0 0 2px}
.coach.compact p{font-size:14px; line-height:1.35; margin:0 0 6px}
.coach.compact .coach-dots{display:none}
.coach.compact .coach-btns{margin-top:4px}
.coach.compact .coach-btns .btn{min-height:38px; font-size:14px; padding:0 14px}
.coach.compact .coach-seq{margin:0 0 6px}
body.coach-handson .pill-wrap{opacity:.55; pointer-events:none; transition:opacity .2s, transform .2s} body.coach-handson .pill-wrap .pill-row{transform:scale(.8)}

.seg3{grid-template-columns:repeat(3, minmax(0,1fr))}
.wall{background:var(--surface); border-radius:var(--r-card); box-shadow:var(--shadow-1); padding:4px 16px; margin:0 0 22px}
.wall .muted{padding:10px 0}
.wall-row{display:flex; gap:12px; padding:10px 0; border-bottom:.5px solid var(--line); font:400 15px/1.4 var(--sys)}
.wall-row:last-child{border-bottom:0}
.wall-row b{flex:0 0 64px; font-weight:600}
.wall-row span{color:var(--label2)}
/* the lock dots during a daily code */
.lock.daily i.on{background:#FF9500; border-color:#FF9500}
.lock.daily{box-shadow:0 0 0 2px rgba(255,149,0,.5)}

.health{display:flex; flex-wrap:wrap; gap:6px 16px; margin:0 0 14px; font:500 13px var(--sys); color:var(--label2)}
.health span{display:inline-flex; align-items:center; gap:6px}
.hdot{width:9px; height:9px; border-radius:50%; background:var(--gray); display:inline-block}
.hdot.ok{background:var(--green)} .hdot.bad{background:var(--red)}
.coop-report{min-width:34px; padding:0 10px; font-weight:800}

/* hold the pill: quick actions */
.quick{position:absolute; left:50%; transform:translateX(-50%); width:min(360px, calc(100vw - 24px)); z-index:41}
.pill-wrap[data-pos^="b"] .quick{bottom:calc(100% + 10px)} .pill-wrap[data-pos^="t"] .quick{top:calc(100% + 10px)}
.pill-wrap[data-pos$="l"] .quick{left:0; transform:none} .pill-wrap[data-pos$="r"] .quick{left:auto; right:0; transform:none}
.quick[hidden]{display:none}
.quick-list{background:rgba(242,242,247,.92); -webkit-backdrop-filter:saturate(180%) blur(28px); backdrop-filter:saturate(180%) blur(28px); border:.5px solid rgba(255,255,255,.55); border-radius:20px; padding:6px; box-shadow:var(--shadow-2); display:grid; gap:2px; animation:hubIn .22s cubic-bezier(.25,1.5,.45,1) both}
.quick-item{display:flex; align-items:center; gap:12px; min-height:48px; padding:6px 12px; border:0; border-radius:14px; background:transparent; font:500 16px var(--sys); color:var(--label); text-align:left; cursor:pointer}
.quick-item i{flex:0 0 32px; height:32px; border-radius:10px; background:#fff; display:grid; place-items:center; box-shadow:0 1px 2px rgba(0,0,0,.08)}
.quick-item:first-child i{background:#FFD21F}
.quick-item i svg{width:18px; height:18px; fill:none; stroke:var(--label); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.quick-item:active{background:var(--fill)}
.quick-item.more{color:var(--blue); border-top:.5px solid var(--hair); border-radius:0 0 14px 14px; margin-top:2px}
.pill-wrap.quick-on .pill-row{box-shadow:0 0 0 3px rgba(255,210,31,.55), 0 10px 30px rgba(0,0,0,.28)}

/* =================== the pill, free and alive =================== */
.pill-wrap{position:fixed; z-index:40; transition:left .36s cubic-bezier(.25,1.4,.45,1), top .36s cubic-bezier(.25,1.4,.45,1)}
.pill-wrap.dragging{transition:none}
.pill-wrap.settle .pill-row{animation:settle .42s cubic-bezier(.3,1.6,.5,1)}
@keyframes settle{0%{transform:scale(1.06)}60%{transform:scale(.97)}100%{transform:scale(1)}}
/* the hub opens from where the pill is */
.pill-wrap[data-pos^="b"]{flex-direction:column} .pill-wrap[data-pos^="t"]{flex-direction:column-reverse}
.pill-wrap[data-pos$="l"]{align-items:flex-start} .pill-wrap[data-pos$="c"]{align-items:center} .pill-wrap[data-pos$="r"]{align-items:flex-end}
.pill-wrap .hub{width:min(560px, calc(100vw - 24px))}
.pill-wrap[data-pos$="l"] .hub{margin-left:0} .pill-wrap[data-pos$="r"] .hub{margin-right:0}
.pill-wrap[data-pos$="l"] .hub, .pill-wrap[data-pos$="r"] .hub{width:min(440px, calc(100vw - 24px))}
/* keep the hub on screen whatever the pill's x: side-anchored hubs hug the pill's edge */
.pill-wrap[data-pos$="c"] .hub{position:relative; left:50%; transform:translateX(-50%)}
.pill-wrap[data-pos$="c"] .hub:not([hidden]){animation:hubInC .32s cubic-bezier(.25,1.5,.45,1) both}
@keyframes hubInC{from{opacity:0; transform:translateX(-50%) scale(.86) translateY(10px)}to{opacity:1; transform:translateX(-50%)}}
.pill-wrap[data-pos^="t"][data-pos$="c"] .hub:not([hidden]){animation-name:hubInCT}
@keyframes hubInCT{from{opacity:0; transform:translateX(-50%) scale(.86) translateY(-10px)}to{opacity:1; transform:translateX(-50%)}}
.pill-wrap[data-pos$="c"] .hub.closing{animation:hubOutC .15s ease-in both}
@keyframes hubOutC{to{opacity:0; transform:translateX(-50%) scale(.94)}}
/* idle life: the logo breathes, the ring shimmers */
.pill-logo svg{animation:breathe 4.5s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
#pillRing{transition:stroke-dashoffset .9s cubic-bezier(.3,1,.3,1); filter:drop-shadow(0 0 0 rgba(255,210,31,0))}
#pillRing.glow{animation:ringGlow 1.4s ease-out}
@keyframes ringGlow{0%{filter:drop-shadow(0 0 0 rgba(255,210,31,0))}30%{filter:drop-shadow(0 0 10px rgba(255,210,31,.95))}100%{filter:drop-shadow(0 0 0 rgba(255,210,31,0))}}
/* celebrations */
.pill-wrap.cheer .pill-row{animation:cheer 1.1s cubic-bezier(.3,1.5,.5,1)}
.pill-wrap.cheer .pill-logo svg{animation:spinOnce .9s cubic-bezier(.3,1.2,.4,1)}
@keyframes cheer{0%{transform:scale(1)}20%{transform:scale(1.14) translateY(-6px)}45%{transform:scale(.97) translateY(2px)}70%{transform:scale(1.03)}100%{transform:scale(1)}}
@keyframes spinOnce{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.pill-wrap.cheer .pill-row::after{content:""; position:absolute; inset:-6px; border-radius:999px; border:3px solid #FFD21F; animation:ringOut .9s ease-out forwards; pointer-events:none}
@keyframes ringOut{from{opacity:.9; transform:scale(.9)}to{opacity:0; transform:scale(1.5)}}
.pill-wrap.cheer-small .pill-row{animation:cheerSmall .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes cheerSmall{0%{transform:scale(1)}40%{transform:scale(1.07)}100%{transform:scale(1)}}
.pill-wrap.shake .pill-row{animation:pillShake .45s ease}
@keyframes pillShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
@media (prefers-reduced-motion: reduce){ .pill-logo svg, .pill-wrap.cheer .pill-row, .pill-wrap.cheer .pill-logo svg, .pill-wrap.shake .pill-row{animation:none !important} .pill-wrap{transition:none} }
/* the hub and quick menu are placed by script next to the pill; these neutralize the older flex-based placement */
.pill-wrap .hub{left:auto; right:auto}
.pill-wrap[data-pos$="c"] .hub{position:fixed; left:auto; transform:none}
.pill-wrap[data-pos$="c"] .hub:not([hidden]){animation:hubIn .32s cubic-bezier(.25,1.5,.45,1) both}
.pill-wrap[data-pos$="c"] .hub.closing{animation:hubOut .15s ease-in both}
.pill-wrap[data-pos^="t"] .hub:not([hidden]){animation-name:hubInTop}
.quick{left:auto; right:auto; transform:none}
.pill-wrap[data-pos$="l"] .quick, .pill-wrap[data-pos$="r"] .quick{left:auto; right:auto; transform:none}

/* the lock dots sit by the status chip at the bottom, clear of the wall text */
.lock, body[data-pill="tr"] .lock, body[data-pill="tc"] .lock{right:auto; left:50%; top:auto; bottom:calc(var(--safe-b) + 120px); transform:translateX(-50%)}
body[data-pill^="b"] .lock{bottom:calc(var(--safe-b) + 120px)}
body[data-pill^="t"] .lock{bottom:calc(var(--safe-b) + 62px)}
#stage.has-coop .lock{bottom:calc(var(--safe-b) + 120px)}

/* hold the pill: the suggested actions catch the eye in the same hub */
.hub.quick-focus .suggest .sug{animation:sugPop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes sugPop{0%{transform:scale(1)}40%{transform:scale(1.08)}100%{transform:scale(1)}}
.hub.quick-focus #hubSuggest{outline:2px solid #FFD21F; outline-offset:4px; border-radius:16px; transition:outline-color .4s}
.pill-wrap.collapsed .pill{display:flex}  /* no collapsed look anywhere */
.pill-wrap.collapsed .pill-row{padding:4px 8px 4px 4px}

/* =================== the pill, redesigned: island, deck, dock, wheel =================== */
/* scrim: the stage dims and blurs under the menu */
.scrim{position:fixed; inset:0; z-index:39; background:rgba(0,0,0,.42); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); animation:fadeIn .2s ease}
.scrim[hidden]{display:none}
/* the island: an alert swells the pill */
.pill-wrap.island .pill-row{animation:island 2.6s cubic-bezier(.3,1.3,.4,1)}
@keyframes island{0%{transform:scale(1)}8%{transform:scale(1.08)}16%{transform:scale(1.02)}88%{transform:scale(1.02)}100%{transform:scale(1)}}
.pill-wrap.island .pill-sub{color:#FFD21F}
/* the deck: one horizontal row of live cards */
.deck{display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; padding:2px 2px 8px; margin:0 -2px 8px; scrollbar-width:none}
.deck::-webkit-scrollbar{display:none}
.deck > *{scroll-snap-align:start; flex:0 0 auto}
.deck .hub-now{display:contents}
.deck .now-card{flex:0 0 min(300px, 78%); flex-direction:column; align-items:flex-start; gap:10px; padding:14px; min-height:132px; border-radius:20px; background:var(--card)}
.deck .now-card > div{width:100%}
.deck .now-card b{font-size:16px} .deck .now-card span{font-size:13px; -webkit-line-clamp:3}
.deck .now-card .now-act{align-self:flex-end; margin-top:auto; background:var(--ink); color:#fff}
.deck .cluestrip{flex:0 0 min(320px, 84%); margin:0; min-height:132px; border-radius:20px; display:flex; flex-direction:column}
.deck .cs-body{flex:1; display:flex; flex-direction:column}
.deck .cs-actions{margin-top:auto}
.dcard{flex:0 0 136px; min-height:132px; display:flex; flex-direction:column; justify-content:flex-end; gap:4px; padding:14px; border:0; border-radius:20px; background:var(--card); text-decoration:none; color:var(--label); font:inherit; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.05); position:relative; overflow:hidden; transition:transform .14s}
.dcard i{position:absolute; top:12px; left:12px; width:40px; height:40px; border-radius:12px; background:var(--fill); display:grid; place-items:center}
.dcard i svg{width:22px; height:22px; fill:none; stroke:var(--label); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.dcard b{font:600 16px var(--sys); letter-spacing:-.01em}
.dcard span{font:400 12px/1.3 var(--sys); color:var(--label2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.dcard:active{transform:scale(.96)}
.dcard[aria-current="page"], .dcard:first-child{background:#FFD21F} .dcard[aria-current="page"] i, .dcard:first-child i{background:rgba(0,0,0,.1)} .dcard:first-child span{color:rgba(0,0,0,.6)}
.hub:not([hidden]) .deck > *{animation:deckIn .38s cubic-bezier(.25,1.4,.45,1) both; animation-delay:calc(var(--i, 0) * 45ms)}
@keyframes deckIn{from{opacity:0; transform:translateX(28px) scale(.96)}to{opacity:1; transform:none}}
/* the dock: three big round actions */
.dock{display:flex; justify-content:space-around; gap:8px; padding:2px 0 4px}
.dock-b{flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px 4px; border:0; background:transparent; font:500 12px var(--sys); color:var(--label); text-decoration:none; cursor:pointer; position:relative}
.dock-b svg{width:22px; height:22px; fill:none; stroke:var(--label); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; padding:11px; box-sizing:content-box; border-radius:50%; background:var(--card); box-shadow:0 1px 2px rgba(0,0,0,.06)}
.dock-b:active svg{transform:scale(.92)}
.hub:not([hidden]) .dock-b{animation:fadeUp .3s cubic-bezier(.2,.9,.3,1) both; animation-delay:calc(var(--i, 0) * 30ms)}
/* the wheel: quick actions bloom around the pill while held */
.wheel{position:fixed; inset:0; z-index:42; pointer-events:none}
.wheel[hidden]{display:none}
.wheel-b{position:absolute; width:62px; height:62px; margin:-31px 0 0 -31px; border:0; border-radius:50%; background:rgba(242,242,247,.96); box-shadow:0 8px 24px rgba(0,0,0,.3); display:grid; place-items:center; pointer-events:none; animation:bloom .3s cubic-bezier(.3,1.6,.5,1) both; animation-delay:var(--d, 0ms); transition:transform .12s, background .12s}
.wheel-b i{display:grid; place-items:center} .wheel-b i svg{width:24px; height:24px; fill:none; stroke:var(--label); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.wheel-b span{position:absolute; top:100%; margin-top:6px; white-space:nowrap; font:600 12px var(--sys); color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.8); opacity:.9}
.wheel-b.hot{transform:scale(1.25); background:#FFD21F}
.wheel.bye .wheel-b{animation:unbloom .18s ease-in forwards}
@keyframes bloom{from{transform:scale(.3); opacity:0}to{transform:scale(1); opacity:1}}
@keyframes unbloom{to{transform:scale(.5); opacity:0}}
.wheel-b.hot{animation:none}
.pill-wrap.quick-on .pill-row{box-shadow:0 0 0 4px rgba(255,210,31,.6), 0 10px 30px rgba(0,0,0,.28); transform:scale(.96)}
/* old grid rules no longer apply */
.hub-grid{display:none}
@media (prefers-reduced-motion: reduce){ .deck > *, .dock-b, .wheel-b, .pill-wrap.island .pill-row{animation:none !important} }
/* layering: scrim under everything of the pill's, hub and wheel above it */
.scrim{z-index:38}
.pill-wrap{z-index:40}
.pill-wrap .hub{z-index:41}
.wheel{z-index:42}
.pill-wrap .pill-row{position:relative; z-index:43}
/* deck cards: one fixed height, no stretching */
.deck{align-items:flex-start}
.deck .now-card, .deck .cluestrip, .dcard{height:168px; min-height:0; max-height:168px; overflow:hidden; box-sizing:border-box}
.deck .now-card span{-webkit-line-clamp:3}
.deck .cluestrip .cs-body p{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.deck .cluestrip .cs-head{padding-top:10px}
.deck .cs-tools .tool{display:none}
.deck .cs-tools .tool:first-child{display:inline-flex}
.deck .tune{display:none}

/* controls, regrouped */
.hub .segmented{margin:0 0 10px}
.hub .say-field{margin:0 0 8px}
.hub .scroller{margin:0 0 10px}
.hub-search{margin:0 0 10px}
.dcard-x{background:#FFF6CC} .dcard-x i{background:#FFD21F}

/* hub home header and compact clue card (this block was missing from an earlier build) */
.hub-top{display:flex; align-items:center; justify-content:space-between; margin:2px 2px 10px}
.hub-title{font:600 13px var(--sys); letter-spacing:.02em; text-transform:uppercase; color:var(--label2)}
.hub-icons{display:flex; gap:6px}
.hub-ic{position:relative; width:36px; height:36px; border-radius:50%; border:0; background:var(--card); display:grid; place-items:center; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.06); padding:0}
.hub-ic svg{width:18px; height:18px; fill:none; stroke:var(--label); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.hub-ic[aria-expanded="true"]{background:#FFD21F}
.hub-ic .row-badge{position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; font-size:11px; padding:0 5px}
.hub .cluestrip{margin:0}
.hub .cs-head{padding:10px 12px 4px 14px}
.hub .cs-body{padding:0 12px 10px}
.hub .cs-body p{font-size:14px; line-height:1.45; margin-bottom:6px}
.hub .cs-word{font-size:13px; padding:0 8px}
.hub .cs-actions{flex-wrap:wrap; gap:6px}
.hub .cs-btn{flex:0 0 auto; min-height:32px; padding:0 12px; font-size:13px}
.hub .cs-tools{margin:0; display:contents}
.hub .tool{min-height:32px; padding:4px 10px; flex-direction:row; gap:6px; align-items:center; font-size:12px}
.hub .tool small{font-size:11px}
.hub .tool.locked small{display:none}
.hub .suggest{margin:0 0 10px}
.hub .list{margin:0 0 6px}

/* loading: he spins toward you out of the dark, bigger and nearer each pass, until the box is ready */
#bootNote{display:grid; place-items:center; pointer-events:none; z-index:4; overflow:hidden}
.boot{display:grid; place-items:center; gap:14px; perspective:900px}
.boot-face{width:min(42vw, 220px); aspect-ratio:1; object-fit:contain; animation:bootSpin 1.6s cubic-bezier(.4,0,.6,1) infinite; filter:drop-shadow(0 0 24px rgba(255,210,31,.35)); will-change:transform, filter, opacity}
@keyframes bootSpin{0%{transform:translateZ(-1400px) rotate(0deg); opacity:0; filter:blur(6px) drop-shadow(0 0 0 rgba(255,210,31,0))}15%{opacity:.7}70%{opacity:1; filter:blur(0) drop-shadow(0 0 30px rgba(255,210,31,.5))}100%{transform:translateZ(260px) rotate(1080deg); opacity:0; filter:blur(2px) drop-shadow(0 0 60px rgba(255,210,31,.8))}}
.boot p{font:600 15px var(--sys); color:rgba(255,244,214,.85); letter-spacing:.01em; margin:0; animation:bootText 1.6s ease-in-out infinite}
@keyframes bootText{0%,100%{opacity:.5}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){ .boot-face{animation:bootStill 1.2s ease-in-out infinite alternate} @keyframes bootStill{from{transform:scale(.9)}to{transform:scale(1)}} }

/* =================== touch hygiene: holds never select text, taps never flash grey =================== */
.pill-wrap, .pill-wrap *, .hub, .hub *, .wheel, .wheel *, #stage, #stage *, .coach, .coach *, .chip, .zone, .lock{-webkit-user-select:none; user-select:none; -webkit-touch-callout:none}
.hub input, .hub textarea, .say-field input, .hub-search input{-webkit-user-select:text; user-select:text}
button, a, .pill-row, .dcard, .dock-b, .row, .cap, .sug, .hear, .cs-word, .wheel-b{-webkit-tap-highlight-color:transparent; touch-action:manipulation}
.pill-row{touch-action:none}
.deck, .scroller, .suggest{touch-action:pan-x}
.hub{touch-action:pan-y}
.view-play{-webkit-user-select:none; user-select:none}
/* review fixes: tap targets at or near 44pt everywhere a finger lands */
.hub-ic{width:42px; height:42px}
.hub .cs-btn, .cs-btn{min-height:40px; padding:0 14px}
.hub .tool, .tool{min-height:40px}
.cap{height:40px}
.cs-word{min-height:30px; line-height:28px; padding:0 10px; margin:2px 1px}
.hear{min-height:48px}
.deck .now-card, .deck .cluestrip, .dcard{height:176px; max-height:176px}
.sug{height:44px}
.now-act{min-height:40px}

/* destinations: one visible row of icon tiles under the live cards (no scrolling to find Shop) */
.places{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:6px; margin:2px 0 10px}
.place{display:flex; flex-direction:column; align-items:center; gap:5px; padding:6px 2px; border:0; border-radius:14px; background:transparent; color:var(--label); text-decoration:none; font:inherit; cursor:pointer; transition:transform .12s}
.place i{width:52px; height:52px; border-radius:16px; background:var(--card); display:grid; place-items:center; box-shadow:0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.05)}
.place i svg{width:24px; height:24px; fill:none; stroke:var(--label); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.place b{font:500 12px var(--sys); letter-spacing:-.005em; text-align:center}
.place span{display:none}
.place:active{transform:scale(.94)}
.place[aria-current="page"] i{background:#FFD21F}
.hub:not([hidden]) .place{animation:fadeUp .3s cubic-bezier(.2,.9,.3,1) both; animation-delay:calc(var(--i, 0) * 30ms)}
.deck{margin-bottom:10px}
.deck:empty{display:none}
@media (max-width:360px){ .places{grid-template-columns:repeat(5, minmax(0,1fr)); gap:3px} .place i{width:46px; height:46px} .place b{font-size:11px} }

/* =================== activity page: stats, the lock timeline =================== */
.stats-strip{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:6px; margin:0 0 6px}
.stats-strip div{background:var(--card); border-radius:14px; padding:10px 6px; text-align:center}
.stats-strip b{display:block; font:700 22px var(--sys); letter-spacing:-.02em}
.stats-strip b small{font:600 13px var(--sys); color:var(--label2)}
.stats-strip span{font:500 11px var(--sys); color:var(--label2); text-transform:uppercase; letter-spacing:.03em}
.locks-line{list-style:none; margin:0 0 4px; padding:0 4px; display:flex; justify-content:space-between; position:relative}
.locks-line::before{content:""; position:absolute; left:16px; right:16px; top:50%; height:3px; background:var(--fill); border-radius:2px}
.locks-line li{position:relative}
.locks-line i{width:26px; height:26px; border-radius:50%; background:var(--card); box-shadow:inset 0 0 0 2px var(--fill); display:grid; place-items:center; animation:popIn .35s cubic-bezier(.3,1.6,.5,1) both; animation-delay:calc(var(--i, 0) * 40ms)}
.locks-line i b{font:600 11px var(--sys); color:var(--label2)}
.locks-line i svg{width:14px; height:14px; fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round}
.locks-line li.done i{background:var(--green); box-shadow:none}
.locks-line li.now i{background:#FFD21F; box-shadow:0 0 0 4px rgba(255,210,31,.3); animation:popIn .35s cubic-bezier(.3,1.6,.5,1) both, nowPulse 2s ease-in-out infinite 1s}
.locks-line li.now i b{color:var(--label)}
@keyframes nowPulse{0%,100%{box-shadow:0 0 0 4px rgba(255,210,31,.3)}50%{box-shadow:0 0 0 8px rgba(255,210,31,.12)}}

/* =================== the pill breathes =================== */
.pill-logo svg{animation:breathe 4.5s ease-in-out infinite}
.pill-row::before{content:""; position:absolute; inset:0; border-radius:999px; background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.14) 50%, transparent 70%); background-size:220% 100%; animation:sheen 7s ease-in-out infinite; pointer-events:none}
@keyframes sheen{0%,60%{background-position:120% 0}100%{background-position:-120% 0}}
#pillRing{animation:ringShimmer 3.6s ease-in-out infinite}
@keyframes ringShimmer{0%,100%{filter:drop-shadow(0 0 0 rgba(255,210,31,0))}50%{filter:drop-shadow(0 0 5px rgba(255,210,31,.75))}}
.pill-wrap.nudge .pill-row{animation:nudge 1.4s cubic-bezier(.3,1.5,.5,1)}
@keyframes nudge{0%,100%{transform:rotate(0) scale(1)}15%{transform:rotate(-2deg) scale(1.03)}30%{transform:rotate(2deg) scale(1.03)}45%{transform:rotate(-1deg)}60%{transform:rotate(0)}}
.pill-sub.swap{animation:subIn .45s cubic-bezier(.3,1.4,.5,1)}
/* the hub opens with a light sweep; dock buttons and header icons pop */
.hub:not([hidden])::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%); background-size:250% 100%; animation:hubSheen .9s ease-out 1 both}
@keyframes hubSheen{from{background-position:140% 0; opacity:1}to{background-position:-140% 0; opacity:0}}
.hub:not([hidden]) .hub-ic{animation:popIn .4s cubic-bezier(.3,1.6,.5,1) both} .hub:not([hidden]) .hub-ic:nth-child(2){animation-delay:60ms} .hub:not([hidden]) .hub-ic:nth-child(3){animation-delay:120ms}
.hub:not([hidden]) .cs-word{animation:wordPop .6s cubic-bezier(.3,1.6,.5,1) both} .hub:not([hidden]) .cs-word:nth-of-type(2){animation-delay:.08s} .hub:not([hidden]) .cs-word:nth-of-type(3){animation-delay:.16s} .hub:not([hidden]) .cs-word:nth-of-type(4){animation-delay:.24s}
@keyframes wordPop{0%{transform:scale(.8); background:#fff}60%{transform:scale(1.08)}100%{transform:scale(1)}}
.deck .now-card i svg, .dcard-x i svg{animation:flicker 2.4s ease-in-out infinite}
@keyframes flicker{0%,100%{transform:scale(1)}50%{transform:scale(1.12) rotate(-4deg)}}
.place i{transition:transform .14s, box-shadow .14s} .place:hover i{transform:translateY(-3px); box-shadow:0 8px 18px rgba(0,0,0,.12)}
.place[aria-current="page"] i{animation:breathe 3s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){ .pill-row::before, #pillRing, .pill-wrap.nudge .pill-row, .hub:not([hidden])::after, .deck .now-card i svg, .locks-line li.now i, .place[aria-current="page"] i{animation:none !important} }
/* the quiet home: one card strip, the places, one row of actions */
.hub .cluestrip, .deck .now-card{height:160px; max-height:160px}
.suggest{margin:0 0 4px}
.hub-top{margin:2px 2px 8px}
.places{margin:0 0 12px}
.dock{display:none}
.hub .hub-search{margin:0 0 12px}

/* cards fit their words: no fixed heights, no clamped lines, tighter type, no dead space */
.deck .now-card, .deck .cluestrip, .dcard{height:auto; min-height:0; max-height:none; overflow:visible}
.deck{align-items:stretch}
.deck .now-card{gap:6px; padding:12px 14px; flex:0 0 min(320px, 86%)}
.deck .now-card > div{display:flex; flex-direction:column; gap:3px}
.deck .now-card b{font-size:15px; line-height:1.25}
.deck .now-card span{font-size:13px; line-height:1.4; display:block; -webkit-line-clamp:unset; overflow:visible}
.deck .now-card i{width:30px; height:30px; flex:0 0 30px}
.deck .now-card i svg{width:16px; height:16px}
.deck .now-card .now-act{margin-top:6px; min-height:36px; font-size:14px}
.deck .cluestrip{flex:0 0 min(340px, 88%)}
.deck .cluestrip .cs-body p{display:block; -webkit-line-clamp:unset; overflow:visible; font-size:14px; line-height:1.5; margin-bottom:8px}
.hub .cs-word{font-size:13px; min-height:26px; line-height:24px; padding:0 8px}
.hub .cs-btn, .hub .tool{min-height:36px; font-size:13px}
.deck .cluestrip .cs-head{padding:8px 12px 2px 14px}
.deck .cluestrip .cs-body{padding:0 12px 10px}
.deck > *{scroll-snap-align:start}

.shop-tabs{margin:0 0 16px; max-width:360px}

/* studio: style panel */
.style-panel{background:var(--card); border-radius:16px; padding:14px; margin:12px 0 4px; display:grid; gap:10px}
.style-row{display:grid; grid-template-columns:52px 1fr; align-items:center; gap:10px}
.style-row > span{font:600 13px var(--sys); color:var(--label2)}
.style-row .swatches.small button{width:30px; height:30px}
.style-row .seg{flex-wrap:wrap}
/* shop: closed drops and locked pieces, live price */
.card.closed{opacity:.72} .card.closed .tee{filter:grayscale(.4)}
.card .badge.hot{background:#FFD21F; color:#111}
.card .price s{color:var(--label2); font-weight:400; margin-left:6px; font-size:.9em}
#optSize2Wrap:has(#optSize2[hidden]){display:none}

/* the story page and the studio preview show their stage without a router */
body.story-page .view-play, body.preview .view-play{display:block}

/* the studio's live preview: the real stage, held in the preview pane */
body.studio .studio-stage{display:block; position:relative; inset:auto; height:42vh; min-height:280px; width:100%; overflow:hidden; background:#0d0d0d; border-radius:0}
body.studio .studio-stage #stage{position:absolute; inset:0}
@media (min-width:900px){ body.studio .studio-stage{height:calc(100vh - 110px)} }
body.studio .studio-hidden-hub{display:none !important}
body.studio .pill-wrap{display:none !important}
body.studio #stage .chip{display:none}
.tee-art{image-rendering:auto; pointer-events:none}

.tee{position:relative} .tee-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; border-radius:inherit; background:#ECEAE5}
.tee-fallback{position:absolute; inset:0}

/* picker thumbnails: hairstyles, lashes, lips */
.blob.st-bun .bun{position:absolute; left:50%; top:-14px; width:30px; height:26px; margin-left:-15px; border-radius:50%; background:var(--hair); border:2px solid #000; box-shadow:0 0 0 2px #fff}
.blob.st-puffs .pl, .blob.st-puffs .pr{position:absolute; top:-6px; width:30px; height:30px; border-radius:50%; background:var(--hair); border:2px solid #000} .blob.st-puffs .pl{left:-6px} .blob.st-puffs .pr{right:-6px}
.blob.st-braids .bl, .blob.st-braids .br{position:absolute; top:34px; width:12px; height:54px; border-radius:8px; background:var(--hair); border:2px solid #000} .blob.st-braids .bl{left:-4px} .blob.st-braids .br{right:-4px}
.blob.st-braids .bl::after, .blob.st-braids .br::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:10px; border-radius:50%; background:var(--accent)}
.blob.st-wrap .wrap{position:absolute; left:4px; right:4px; top:-4px; height:34px; border-radius:40px 40px 10px 10px; background:var(--accent); border:2px solid #000}
.blob.st-wrap .wrap::after{content:""; position:absolute; right:-6px; top:-6px; width:22px; height:14px; border-radius:50%; background:var(--accent); border:2px solid #000}
.blob.st-afro .afro{position:absolute; left:-10px; right:-10px; top:-12px; height:70px; border-radius:50%; background:var(--hair); border:2px solid #000; z-index:0}
.blob.st-afro i{z-index:1}
.blob .lip{position:absolute; left:50%; bottom:22px; width:26px; height:6px; margin-left:-13px; border-radius:0 0 12px 12px; background:var(--lips); z-index:2}
.seg.wrap{flex-wrap:wrap}
.pick-grid{grid-template-columns:repeat(3, minmax(0,1fr))}

/* the thumbnail lashes: two small strokes, drawn as separate elements so the face keeps its hair and grin */
.blob.lashes .lash{position:absolute; top:36%; width:10px; height:3px; background:#141414; border-radius:2px; z-index:2}
.blob.lashes .lash.l{left:22%; transform:rotate(-25deg)} .blob.lashes .lash.r{right:22%; transform:rotate(25deg)}

/* =================== the big screen =================== */
body.party{margin:0; background:#0b0b0b; color:#FFF4D6; font-family:var(--sys); min-height:100vh; display:grid; place-items:center; overflow:hidden}
.party-stage{width:min(96vw, 1600px); padding:4vh 4vw; display:grid; gap:3vh; text-align:center}
.party-top{display:flex; align-items:center; justify-content:center; gap:3vw}
.party-face{width:14vh; height:14vh; object-fit:contain}
.party-kicker{margin:0; font:700 2.2vh var(--sys); letter-spacing:.25em; color:#FFD21F}
.party-name{margin:0; font:800 6vh var(--sys); letter-spacing:-.02em}
.party-wall{white-space:pre-wrap; font-family:'Stardos Stencil', 'Impact', sans-serif; font-size:min(14vw, 18vh); line-height:1; letter-spacing:.06em; color:#FFF4D6; text-shadow:0 0 40px rgba(255,210,31,.25); transition:transform .3s}
body.tick .party-wall{animation:wallTick .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes wallTick{40%{transform:scale(1.03)}}
body.revealed .party-wall{color:#FFD21F; text-shadow:0 0 80px rgba(255,210,31,.8); animation:revealPop 1.2s cubic-bezier(.3,1.5,.5,1)}
@keyframes revealPop{0%{transform:scale(.6); opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1); opacity:1}}
.party-meter{height:2.4vh; border-radius:999px; background:rgba(255,255,255,.1); overflow:hidden}
.party-fill{height:100%; width:0; background:linear-gradient(90deg, #FFD21F, #FF8A4C); transition:width .6s cubic-bezier(.2,.9,.3,1)}
.party-count{margin:0; font:600 3.6vh var(--sys)}
.party-code{display:flex; justify-content:center; gap:1.5vw; flex-wrap:wrap}
.party-code span{font:800 5vh var(--sys); padding:1vh 2.4vw; border-radius:999px; background:#FFD21F; color:#111}
.party-foot{display:flex; align-items:center; justify-content:center; gap:3vw; margin-top:2vh}
.party-qr{display:grid; gap:1vh; justify-items:center; font:600 2vh var(--sys); color:#FFF4D6} .party-qr img{width:18vh; height:18vh; border-radius:12px; background:#fff; padding:6px}
.party-url{margin:0; font:700 4vh var(--sys); color:#FFD21F}
.chip.bump{animation:chipBump .6s cubic-bezier(.3,1.6,.5,1)} @keyframes chipBump{40%{transform:translateX(-50%) scale(1.08); background:rgba(255,210,31,.35)}}
.pass-form{max-width:340px; margin:14px auto 0}
.linkbtn{background:none; border:0; padding:0; color:var(--blue); font:inherit; cursor:pointer; text-decoration:underline}

/* console: the Today strip */
.today{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 18px}
.today-item{display:grid; gap:2px; min-width:112px; padding:10px 12px; border-radius:14px; background:#fff; border:0; text-align:left; font:inherit; color:var(--label); box-shadow:0 1px 2px rgba(0,0,0,.06); cursor:pointer}
.today-item b{font:700 20px var(--sys); letter-spacing:-.02em} .today-item span{font:500 12px var(--sys); color:var(--label2)}
.today-item.lead{background:#141414; color:#FFF4D6; cursor:default} .today-item.lead span{color:#FFD21F}
.today-item.hot{background:#FFF1B8} .today-item.hot b{color:#8A6A00}
div.today-item{cursor:default}
@media (max-width:720px){ .today-item{min-width:calc(50% - 4px)} }
/* the new places: picker swatches and gallery cards */
.place-trotro .place-swatch{background:linear-gradient(#2E5D8C 55%, #F2D16B 55% 68%, #2E5D8C 68%)}
.place-chopbar .place-swatch{background:radial-gradient(circle at 50% 70%, #E0A458 0 18%, #7A4A1E 20%)}
.place-studio .place-swatch{background:linear-gradient(#1F1A24, #1F1A24), #1F1A24; box-shadow:inset 0 0 0 4px #7B5CFF}
.place-jollof .place-swatch{background:radial-gradient(circle at 50% 50%, #F2A65A 0 30%, #B8341C 32%)}
.place-coffin .place-swatch{background:repeating-radial-gradient(circle at 50% 100%, #FFD21F 0 2px, #2C6B8F 2px 12px)}
.place-chat .place-swatch{background:#0B141A; box-shadow:inset 0 0 0 4px #25D366}
.scard.place-trotro .scard-art{background:#2E5D8C} .scard.place-chopbar .scard-art{background:#7A4A1E} .scard.place-studio .scard-art{background:#1F1A24}
.scard.place-jollof .scard-art{background:#B8341C} .scard.place-coffin .scard-art{background:#2C6B8F} .scard.place-chat .scard-art{background:#0B141A}
.pick.pick-place{display:flex; flex-direction:column; align-items:center; gap:6px; padding:0 0 12px; overflow:hidden}
.pick.pick-place .place-swatch{display:block; height:64px; width:100%}
.pick.pick-place span{display:block}

/* the character on story cards, big in the gallery, small in My stuff */
.scard-art .blob{width:110px; height:110px; position:relative; transform:scale(1.15)}
.scard-art .blob.custom img{width:110px; height:110px; object-fit:contain; border-radius:50%; background:#fff; border:3px solid #000}
.scard-art .blob i{display:block; width:110px; height:110px; border-radius:50%; background:var(--skin); border:3px solid #000; box-shadow:0 0 0 3px #FFF4D6; position:relative; overflow:hidden}
.scard-art .blob i::after{content:""; position:absolute; left:14%; right:14%; top:16%; height:26%; background:var(--hair); border-radius:46% 46% 0 0}
.scard-art .blob .k{position:absolute; left:50%; top:-14px; width:20px; height:28px; margin-left:-10px; border-radius:50%; background:var(--hair); border:3px solid #000}
.scard-art .blob .cl, .scard-art .blob .cr{position:absolute; top:34px; width:36px; height:14px; border-radius:8px; background:var(--hair); border:3px solid #000} .scard-art .blob .cl{left:-26px} .scard-art .blob .cr{right:-26px}
.mylist li.with-avatar{display:grid; grid-template-columns:48px 1fr auto; align-items:center; gap:12px}
.mini-avatar .blob{display:block; width:44px; height:44px; position:relative; transform:scale(.4); transform-origin:left center; margin-right:-66px}
.mini-avatar .blob i{display:block; width:110px; height:110px; border-radius:50%; background:var(--skin); border:3px solid #000; position:relative; overflow:hidden}
.mini-avatar .blob i::after{content:""; position:absolute; left:14%; right:14%; top:16%; height:26%; background:var(--hair); border-radius:46% 46% 0 0}
.mini-avatar .blob.custom img{width:110px; height:110px; border-radius:50%; object-fit:contain; background:#fff; border:3px solid #000}
.mini-avatar .blob b{display:none}

/* featured story and creator stats */
.featured{display:grid; grid-template-columns:120px 1fr; gap:14px; align-items:center; padding:14px; border-radius:20px; background:#141414; color:#FFF4D6; text-decoration:none; margin:0 0 18px; box-shadow:0 10px 30px rgba(0,0,0,.18)}
.featured-art{height:110px; border-radius:14px; display:grid; place-items:center} .featured-art .blob{width:90px; height:90px; position:relative}
.featured-art .blob i{display:block; width:90px; height:90px; border-radius:50%; background:var(--skin); border:3px solid #000; position:relative; overflow:hidden} .featured-art .blob i::after{content:""; position:absolute; left:14%; right:14%; top:16%; height:26%; background:var(--hair); border-radius:46% 46% 0 0}
.featured-art .blob.custom img{width:90px; height:90px; border-radius:50%; object-fit:contain; background:#fff; border:3px solid #000}
.featured-body small{font:700 11px var(--sys); letter-spacing:.14em; color:#FFD21F} .featured-body b{display:block; font:700 20px var(--sys); margin:4px 0} .featured-body span{font:400 13px var(--sys); color:#B9B2A1}
.featured.place-fridge .featured-art{background:#DCE5EB} .featured.place-elevator .featured-art{background:#8A9097} .featured.place-booth .featured-art{background:#8E1B1B} .featured.place-trotro .featured-art{background:#2E5D8C} .featured.place-chopbar .featured-art{background:#7A4A1E} .featured.place-studio .featured-art{background:#1F1A24} .featured.place-jollof .featured-art{background:#B8341C} .featured.place-coffin .featured-art{background:#2C6B8F} .featured.place-chat .featured-art{background:#0B141A} .featured.place-box .featured-art{background:#262626}
.stat-row{display:grid; grid-template-columns:64px 1fr 40px; gap:10px; align-items:center; margin:6px 0; font:500 13px var(--sys)}
.stat-bar{height:10px; border-radius:6px; background:var(--fill); overflow:hidden} .stat-bar i{display:block; height:100%; background:#FFD21F}
.stat-row b{text-align:right}
/* the box is cardboard now, everywhere it is shown as a swatch */
.place-box .place-swatch{background:linear-gradient(#9C6B3C, #9C6B3C 44%, #C8A96A 44% 56%, #9C6B3C 56%)}
.scard.place-box .scard-art{background:#9C6B3C} .featured.place-box .featured-art{background:#9C6B3C}

/* the pill as a bubble at the edge */
.pill-wrap.collapsed .pill{display:none !important}
.pill-wrap.collapsed .pill-row{padding:4px; border-radius:999px; width:60px; min-width:60px}
.pill-wrap.collapsed .pill-logo{width:52px; height:52px}
/* the quick clue card (hold the pill) */
.quick-clue{position:fixed; z-index:42; background:rgba(242,242,247,.96); -webkit-backdrop-filter:saturate(180%) blur(24px); backdrop-filter:saturate(180%) blur(24px); border-radius:20px; padding:14px 16px; box-shadow:0 14px 40px rgba(0,0,0,.3); animation:hubIn .28s cubic-bezier(.25,1.5,.45,1) both}
.quick-clue[hidden]{display:none} .quick-clue.bye{animation:hubOut .15s ease-in both}
.qc-kicker{margin:0 0 6px; font:700 11px var(--sys); letter-spacing:.12em; text-transform:uppercase; color:var(--label2)}
.qc-text{margin:0 0 10px; font:500 17px/1.45 var(--sys); color:var(--label)}
.qc-row{display:flex; gap:8px}
/* a bigger, surer touch target on the pill */
.pill-row{min-height:60px; padding:6px 14px 6px 6px; touch-action:none; -webkit-tap-highlight-color:transparent}
.pill-row .pill{min-height:48px; padding:4px 0}
.pill-row *{pointer-events:none} .pill-row{pointer-events:auto}
body.coach-pillstep .pill-wrap{opacity:1 !important; pointer-events:auto !important} body.coach-pillstep .pill-wrap .pill-row{transform:none !important}

/* =================== the chapter card between seasons =================== */
.chapter{position:fixed; inset:0; z-index:95; background:#0b0b0b; color:#FFF4D6; display:grid; place-items:center; align-content:center; gap:10px; padding:24px; text-align:center; opacity:0; transition:opacity .5s}
.chapter.on{opacity:1} .chapter.off{opacity:0}
.ch-scene{position:relative; width:min(92vw, 520px); height:150px; margin-bottom:10px; --span:calc(min(92vw, 520px) - 140px)}
.ch-from, .ch-to{position:absolute; top:20px; width:120px; height:110px; border-radius:18px; background:#333; box-shadow:0 10px 30px rgba(0,0,0,.5)}
.ch-from{left:10px; transform-origin:center; animation:chFrom 2.4s ease-in-out both} .ch-to{right:10px; animation:chTo 2.4s ease-in-out both}
@keyframes chFrom{0%{transform:scale(1); opacity:1}60%{transform:scale(.9); opacity:.6}100%{transform:scale(.8); opacity:.3}}
@keyframes chTo{0%{transform:scale(.8); opacity:.3}60%{transform:scale(1.05); opacity:1}100%{transform:scale(1); opacity:1}}
.ch-him{position:absolute; left:26px; top:30px; width:84px; height:84px; object-fit:contain; z-index:2; animation-duration:2.4s; animation-fill-mode:both; animation-timing-function:cubic-bezier(.3,.7,.4,1)}
.travel-walk{animation-name:chWalk} .travel-ride{animation-name:chRide} .travel-drive{animation-name:chRide} .travel-fall{animation-name:chFall} .travel-drop{animation-name:chDrop}
@keyframes chWalk{0%{transform:translateX(0) rotate(-4deg)}25%{transform:translateX(calc(var(--span)*.25)) translateY(-14px) rotate(4deg)}50%{transform:translateX(calc(var(--span)*.5)) translateY(0) rotate(-4deg)}75%{transform:translateX(calc(var(--span)*.75)) translateY(-14px) rotate(4deg)}100%{transform:translateX(var(--span)) rotate(0)}}
@keyframes chRide{0%{transform:translateX(0)}20%{transform:translateX(calc(var(--span)*.2)) translateY(-6px)}40%{transform:translateX(calc(var(--span)*.4)) translateY(6px)}60%{transform:translateX(calc(var(--span)*.6)) translateY(-6px)}80%{transform:translateX(calc(var(--span)*.8)) translateY(6px)}100%{transform:translateX(var(--span))}}
@keyframes chFall{0%{transform:translateX(0) rotate(0)}40%{transform:translateX(calc(var(--span)*.55)) translateY(-60px) rotate(180deg)}100%{transform:translateX(var(--span)) translateY(10px) rotate(720deg)}}
@keyframes chDrop{0%{transform:translateX(var(--span)) translateY(-140px)}70%{transform:translateX(var(--span)) translateY(10px)}85%{transform:translateX(var(--span)) translateY(-10px)}100%{transform:translateX(var(--span)) translateY(0)}}
.place-box.ch-from, .place-box.ch-to{background:#9C6B3C} .place-fridge.ch-from, .place-fridge.ch-to{background:#DCE5EB} .place-trotro.ch-from, .place-trotro.ch-to{background:#2E5D8C} .place-chopbar.ch-from, .place-chopbar.ch-to{background:#7A4A1E} .place-studio.ch-from, .place-studio.ch-to{background:#1F1A24; box-shadow:0 0 30px #7B5CFF} .place-jollof.ch-from, .place-jollof.ch-to{background:#B8341C} .place-elevator.ch-from, .place-elevator.ch-to{background:#8A9097} .place-booth.ch-from, .place-booth.ch-to{background:#8E1B1B} .place-coffin.ch-from, .place-coffin.ch-to{background:#2C6B8F} .place-chat.ch-from, .place-chat.ch-to{background:#0B141A; box-shadow:0 0 30px #25D366}
.ch-kicker{margin:0; font:700 12px var(--sys); letter-spacing:.2em; color:#FFD21F}
.ch-title{margin:0; font:800 40px var(--sys); letter-spacing:-.02em}
.ch-lines{display:grid; gap:6px; min-height:84px} .ch-lines p{margin:0; font:500 18px/1.4 var(--sys); color:#D9D2C0; opacity:0; animation:fadeUp .6s ease both}
.ch-go{opacity:0; transform:translateY(8px); transition:opacity .4s, transform .4s; pointer-events:none} .ch-go.show{opacity:1; transform:none; pointer-events:auto}
.ch-skip{margin-top:4px; background:transparent; color:#9a9a9a}
.wordmark small{font-size:.55em; opacity:.7; margin-right:2px}
/* on-stage text reads on any room: a dark glass pill behind the tap word, the lock dots and the wordmark; the wall letters get an outline */
.zone{color:#FFF4D6; background:rgba(20,20,22,.72); -webkit-backdrop-filter:saturate(160%) blur(14px); backdrop-filter:saturate(160%) blur(14px); border:.5px solid rgba(255,255,255,.16); padding:7px 14px; border-radius:999px; font:600 14px var(--sys); letter-spacing:.01em; text-shadow:0 1px 2px rgba(0,0,0,.5); max-width:min(92vw, 420px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.zone.on{opacity:1}
.lock{padding:6px 10px; border-radius:999px; background:rgba(20,20,22,.55); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border:.5px solid rgba(255,255,255,.14)}
.lock i{box-shadow:0 0 0 1.5px rgba(0,0,0,.35)}
body[data-view="play"] .wordmark{background:rgba(20,20,22,.6); color:#FFF4D6; padding:8px 14px; border-radius:999px; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border:.5px solid rgba(255,255,255,.14); text-shadow:0 1px 2px rgba(0,0,0,.5)}
.clue-strip, .cs-text{text-shadow:none}

/* the team screen */
body.team .board{list-style:none; margin:1vh 0 0; padding:0; width:min(92vw, 1100px); justify-self:center; display:grid; gap:1vh}
body.team .board li{display:grid; grid-template-columns:5vh 1fr 2fr 9vh; align-items:center; gap:2vw; padding:1.2vh 2vw; border-radius:14px; background:rgba(255,255,255,.07); font:600 2.6vh var(--sys)}
body.team .board li.out{background:rgba(255,210,31,.18)} body.team .board .rank{color:#FFD21F} body.team .board .bar{height:1.6vh; border-radius:999px; background:rgba(255,255,255,.12); overflow:hidden} body.team .board .bar i{display:block; height:100%; background:#FFD21F}
body.team .board li.none{display:block; text-align:center; color:#9a9a9a}
body.team .party-wall{display:none}
.chipbtn.danger{color:#C62828}

/* =================== the teams front door =================== */
body.landing{margin:0; background:#F6F3EC; color:#141414; font-family:var(--sys)}
.ld-nav{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; max-width:1040px; margin:0 auto; flex-wrap:wrap}
.ld-logo{font:800 20px var(--sys); letter-spacing:-.02em; color:#141414; text-decoration:none}
.ld-nav nav{display:flex; gap:16px; align-items:center; flex-wrap:wrap} .ld-nav nav a{color:#141414; text-decoration:none; font:600 14px var(--sys)}
.ld-hero{max-width:900px; margin:30px auto 10px; padding:30px 20px; text-align:center}
.ld-kicker{margin:0 0 10px; font:700 12px var(--sys); letter-spacing:.2em; color:#8A6A00}
.ld-hero h1{margin:0 0 16px; font:800 clamp(32px, 6vw, 56px)/1.05 var(--sys); letter-spacing:-.03em}
.ld-lead{margin:0 auto 22px; max-width:640px; font:400 18px/1.5 var(--sys); color:#444}
.btn.big{min-height:52px; padding:0 22px; font-size:17px}
.ld-sec{max-width:1040px; margin:40px auto; padding:0 20px} .ld-sec h2{font:800 28px var(--sys); letter-spacing:-.02em; margin:0 0 18px}
.ld-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px} .ld-grid > div{background:#fff; border-radius:18px; padding:18px; box-shadow:0 1px 2px rgba(0,0,0,.06)}
.ld-grid b{display:block; font:700 17px var(--sys); margin-bottom:6px} .ld-grid p{margin:0; color:#555; font:400 15px/1.5 var(--sys)}
.ld-grid.two{grid-template-columns:repeat(auto-fit, minmax(260px, 1fr))}
.ld-price b{font-size:22px} .ld-price span{display:block; font:600 13px var(--sys); color:#8A6A00; margin-bottom:8px} .ld-price.hot{background:#141414; color:#FFF4D6} .ld-price.hot p{color:#D9D2C0} .ld-price.hot span{color:#FFD21F}
.ld-cta{text-align:center; padding:30px 20px 60px}
.seasons-list li.locked{opacity:.55} .seasons-list li.now b{color:#8A6A00}
/* one bottom stack, never overlapping: chip, then the tap word above it, then the lock dots above that */
.chip{bottom:calc(var(--safe-b) + 78px)}
.zone, body[data-pill^="t"] .zone, body[data-pill^="b"] .zone{bottom:calc(var(--safe-b) + 126px)}
.lock, body[data-pill^="b"] .lock, body[data-pill^="t"] .lock, body[data-pill="tr"] .lock, body[data-pill="tc"] .lock, #stage.has-coop .lock{bottom:calc(var(--safe-b) + 170px); top:auto}
.own-flash{position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(10px); background:#141414; color:#FFF4D6; padding:10px 16px; border-radius:999px; font:600 14px var(--sys); opacity:0; transition:opacity .2s, transform .2s; pointer-events:none; z-index:90} .own-flash.on{opacity:1; transform:translateX(-50%)}

.place-boardroom .place-swatch{background:linear-gradient(#E9E4DA 60%, #5A4634 60%)} .place-serverroom .place-swatch{background:#1C2430; box-shadow:inset 0 0 0 4px #3ddc84} .place-breakroom .place-swatch{background:linear-gradient(#F2E9C9 55%, #b98a5a 55% 70%, #F2E9C9 70%)} .place-classroom .place-swatch{background:linear-gradient(#D9E6C8 30%, #2f4a3a 30% 75%, #D9E6C8 75%)} .place-lockerroom .place-swatch{background:repeating-linear-gradient(90deg, #3F6E8A 0 18px, #4B7D9C 18px 36px)} .place-library .place-swatch{background:repeating-linear-gradient(90deg, #8E1B1B 0 6px, #2E5D8C 6px 12px, #C9A227 12px 18px, #3F6E3A 18px 24px)}
.scard.place-boardroom .scard-art, .featured.place-boardroom .featured-art{background:#E9E4DA} .scard.place-serverroom .scard-art, .featured.place-serverroom .featured-art{background:#1C2430} .scard.place-breakroom .scard-art, .featured.place-breakroom .featured-art{background:#F2E9C9} .scard.place-classroom .scard-art, .featured.place-classroom .featured-art{background:#D9E6C8} .scard.place-lockerroom .scard-art, .featured.place-lockerroom .featured-art{background:#7E8A94} .scard.place-library .scard-art, .featured.place-library .featured-art{background:#6B4A2E}
.place-boardroom.ch-from, .place-boardroom.ch-to{background:#E9E4DA} .place-serverroom.ch-from, .place-serverroom.ch-to{background:#1C2430} .place-breakroom.ch-from, .place-breakroom.ch-to{background:#F2E9C9} .place-classroom.ch-from, .place-classroom.ch-to{background:#D9E6C8} .place-lockerroom.ch-from, .place-lockerroom.ch-to{background:#7E8A94} .place-library.ch-from, .place-library.ch-to{background:#6B4A2E}
.cat-tabs{display:flex; gap:6px; flex-wrap:wrap; margin:0 0 12px} .cat-tabs .cap[aria-pressed="true"]{background:#141414; color:#fff}

.place-pulpit .place-swatch{background:linear-gradient(#F1E9D6 60%, #7A1E10 60%)} .place-choir .place-swatch{background:linear-gradient(#5B2A86 50%, #C9A227 50% 60%, #5B2A86 60%)} .place-kitchen .place-swatch{background:linear-gradient(#F4EFE2 55%, #8a6b45 55% 75%, #444 75% 80%, #F4EFE2 80%)} .place-bathroom .place-swatch{background:repeating-linear-gradient(0deg, #D6EEF2 0 14px, #A9D3DB 14px 16px)} .place-dugout .place-swatch{background:linear-gradient(#2F6B3A 40%, #3B3B3B 40%)} .place-pitch .place-swatch{background:repeating-linear-gradient(90deg, #3A8D47 0 16px, #2E7A3B 16px 32px)} .place-waiting .place-swatch{background:#E4EFEA; box-shadow:inset 0 0 0 4px #2E5D8C}
.scard.place-pulpit .scard-art, .featured.place-pulpit .featured-art, .place-pulpit.ch-from, .place-pulpit.ch-to{background:#F1E9D6} .scard.place-choir .scard-art, .featured.place-choir .featured-art, .place-choir.ch-from, .place-choir.ch-to{background:#5B2A86} .scard.place-kitchen .scard-art, .featured.place-kitchen .featured-art, .place-kitchen.ch-from, .place-kitchen.ch-to{background:#F4EFE2} .scard.place-bathroom .scard-art, .featured.place-bathroom .featured-art, .place-bathroom.ch-from, .place-bathroom.ch-to{background:#D6EEF2} .scard.place-dugout .scard-art, .featured.place-dugout .featured-art, .place-dugout.ch-from, .place-dugout.ch-to{background:#2F6B3A} .scard.place-pitch .scard-art, .featured.place-pitch .featured-art, .place-pitch.ch-from, .place-pitch.ch-to{background:#3A8D47} .scard.place-waiting .scard-art, .featured.place-waiting .featured-art, .place-waiting.ch-from, .place-waiting.ch-to{background:#E4EFEA}

/* =================== the welcome page =================== */
body.welcome{margin:0; background:#0b0b0b; color:#FFF4D6; font-family:var(--sys); min-height:100vh; display:grid; place-items:center}
.wl{max-width:560px; padding:40px 24px 60px; text-align:center}
.wl-face{width:160px; height:160px; object-fit:contain; margin:0 auto 10px; display:block; animation:wlBob 3s ease-in-out infinite}
@keyframes wlBob{50%{transform:translateY(-8px) rotate(-2deg)}}
.wl-kicker{margin:0 0 8px; font:700 12px var(--sys); letter-spacing:.22em; color:#FFD21F}
.wl h1{margin:0 0 14px; font:800 clamp(36px, 9vw, 54px)/1.02 var(--sys); letter-spacing:-.03em}
.wl-lead{margin:0 0 18px; font:400 17px/1.5 var(--sys); color:#D9D2C0}
.wl-how{text-align:left; margin:0 auto 22px; padding:0 0 0 22px; max-width:400px; display:grid; gap:8px; font:400 16px/1.4 var(--sys); color:#D9D2C0} .wl-how b{color:#FFF4D6}
.wl-cta{margin:0 0 14px} .wl-cta .btn{min-width:220px}
.wl-seasons{margin:0 0 18px; font:500 15px var(--sys); color:#B9B2A1} .wl-seasons b{color:#FFD21F}
body.welcome .muted{color:#8a8a8a} body.welcome a{color:#B9B2A1}
.season-status{margin:0 0 12px; padding:10px 12px; border-radius:12px; background:#FFF1B8; font:600 14px var(--sys); color:#5a4600}

/* the chapter card arrives from the stage (no flash), and the escape line sets it up */
.chapter{transition:opacity .55s ease, backdrop-filter .55s ease; background:rgba(11,11,11,.0); -webkit-backdrop-filter:blur(0px); backdrop-filter:blur(0px)}
.chapter.on{opacity:1; background:rgba(11,11,11,.97); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.chapter.from-stage .ch-scene, .chapter.from-stage .ch-kicker, .chapter.from-stage .ch-title{animation:chRise .7s cubic-bezier(.2,.9,.3,1) both}
.chapter.from-stage .ch-kicker{animation-delay:.1s} .chapter.from-stage .ch-title{animation-delay:.18s}
@keyframes chRise{from{opacity:0; transform:translateY(18px)}to{opacity:1; transform:none}}
.ch-escape{margin:0 0 6px; font:500 16px/1.4 var(--sys); color:#FFD21F; max-width:520px; animation:fadeUp .6s ease both}
.chapter.off{opacity:0; -webkit-backdrop-filter:blur(0px); backdrop-filter:blur(0px)}

/* the chapter card on a phone: the arrival lines stay readable and the button is always reachable */
@media (max-width:520px){ .ch-title{font-size:34px} .ch-lines p{font-size:16px} .ch-scene{height:130px} .ch-from, .ch-to{width:96px; height:88px} }
.ch-lines{max-width:520px}

/* the console: four sections, a quiet segmented row inside */
.own-tabs button{font:600 15px var(--sys)}
.own-subs{display:flex; gap:4px; flex-wrap:wrap; margin:0 0 14px; padding:4px; background:var(--fill); border-radius:12px; width:fit-content; max-width:100%}
.own-subs button{border:0; background:transparent; color:var(--label2); font:600 14px var(--sys); padding:7px 14px; border-radius:9px; cursor:pointer}
.own-subs button[aria-current="true"]{background:#fff; color:var(--label); box-shadow:0 1px 2px rgba(0,0,0,.08)}
@media (max-width:720px){ .own-subs{width:100%; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none} .own-subs::-webkit-scrollbar{display:none} }
.taps-have{margin:0 0 6px; font:400 15px var(--sys)} .taps-have b{font:800 34px var(--sys); letter-spacing:-.02em}

/* =================== motion: the app should feel alive =================== */
@media (prefers-reduced-motion: no-preference){

/* cards and tiles arrive, never appear */
@keyframes rise{from{opacity:0; transform:translateY(14px) scale(.98)}to{opacity:1; transform:none}}
.grid .scard, .mylist li, .sound-grid .sg, .kpi, .today-item, .pick{animation:rise .5s cubic-bezier(.22,1,.3,1) both}
.grid .scard:nth-child(2), .mylist li:nth-child(2), .today-item:nth-child(2), .pick:nth-child(2){animation-delay:.04s}
.grid .scard:nth-child(3), .mylist li:nth-child(3), .today-item:nth-child(3), .pick:nth-child(3){animation-delay:.08s}
.grid .scard:nth-child(4), .mylist li:nth-child(4), .today-item:nth-child(4), .pick:nth-child(4){animation-delay:.12s}
.grid .scard:nth-child(n+5), .mylist li:nth-child(n+5), .today-item:nth-child(n+5), .pick:nth-child(n+5){animation-delay:.16s}

/* everything tappable answers the finger */
.btn, .chipbtn, .pick, .scard, .place, .dcard, .row, .cap, .sg{transition:transform .18s cubic-bezier(.2,.9,.3,1), box-shadow .18s, background .18s, filter .18s}
.btn:active, .chipbtn:active, .place:active, .cap:active, .sg:active{transform:scale(.95)}
.pick:active, .scard:active, .dcard:active, .row:active{transform:scale(.985)}
@media (hover:hover){ .scard:hover, .pick:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.12)} .btn-yellow:hover{filter:brightness(1.05)} }

/* the yellow button has a slow sheen, so the main action is never dead on screen */
.btn-yellow{position:relative; overflow:hidden}
.btn-yellow::after{content:""; position:absolute; top:-60%; left:-30%; width:28%; height:220%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform:rotate(18deg); animation:sheen 5.5s ease-in-out infinite; pointer-events:none}
@keyframes sheen{0%,70%{left:-30%}85%{left:120%}100%{left:120%}}

/* numbers that change get a tick */
@keyframes numPop{40%{transform:scale(1.12); color:#8A6A00}}
.num-pop{animation:numPop .5s cubic-bezier(.3,1.6,.5,1)}

/* the wall letters land one by one */
@keyframes letterIn{0%{opacity:0; transform:translateY(-18px) scale(.6)}60%{transform:translateY(2px) scale(1.08)}100%{opacity:1; transform:none}}

/* sheets and dialogs spring in */
.ui-card, .hub{animation:sheetIn .34s cubic-bezier(.2,1.2,.3,1) both}
@keyframes sheetIn{from{opacity:0; transform:translateY(18px) scale(.97)}to{opacity:1; transform:none}}

/* the shop: the garment breathes and lifts */
.tee-art, .scard-art img{transition:transform .5s cubic-bezier(.2,.9,.3,1)}
@media (hover:hover){ .scard:hover .scard-art img, .pcard:hover .tee-art{transform:scale(1.04) rotate(-.6deg)} }

/* a soft pulse for anything waiting on you */
@keyframes attn{0%,100%{box-shadow:0 0 0 0 rgba(255,210,31,.55)}50%{box-shadow:0 0 0 10px rgba(255,210,31,0)}}
.today-item.hot, .dcard-x, .badge-new{animation:attn 2.4s ease-in-out infinite}

/* page changes cross-fade instead of cutting */
.view{animation:viewIn .32s ease both}
@keyframes viewIn{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

/* the seasons sheet: a progress bar that fills on open */
.seasons-list li{position:relative; overflow:hidden}
.seasons-list li::after{content:""; position:absolute; left:0; bottom:0; height:3px; width:var(--p, 0%); background:#FFD21F; animation:fillBar .8s cubic-bezier(.2,.9,.3,1) both}
@keyframes fillBar{from{width:0}}
}
@media (prefers-reduced-motion: reduce){ .btn-yellow::after{display:none} }

/* the caption for a spoken take */
.vox-cap{position:fixed; left:50%; bottom:calc(var(--safe-b) + 150px); transform:translateX(-50%); z-index:46; max-width:min(92vw, 420px); padding:8px 14px; border-radius:999px; background:rgba(20,20,22,.72); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); color:#FFF4D6; font:500 14px var(--sys); text-align:center; opacity:0; transition:opacity .25s; pointer-events:none}
.vox-cap.on{opacity:1}