/* Sunny Street — world styles (Engine 2). Shared pieces come from ../engine/engine.css. */
main{position:fixed;z-index:10;left:0;right:0;top:var(--bar);bottom:0;padding:18px max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));outline:none}
body.titled main{top:0;padding:0}

/* ---------- Title (the stitched page) ---------- */
.title{position:absolute;inset:0;display:flex;align-items:flex-end;padding:0 0 calc(7.5vh + 26px) max(5vw,20px)}
.title::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,10,22,.88) 0%,rgba(4,10,22,.55) 38%,transparent 66%),linear-gradient(0deg,rgba(4,10,22,.75),transparent 45%);pointer-events:none}
.title-in{position:relative;max-width:min(620px,92vw)}
.title .logo{width:clamp(76px,10vh,116px);height:auto;margin-bottom:clamp(8px,1.6vh,18px);filter:drop-shadow(0 8px 20px rgba(0,0,0,.55))}
.title .eyebrow{color:var(--gold);font-size:13px}
.title h1{font-size:clamp(46px,8.4vh,104px);color:var(--ivory);margin:10px 0 8px;text-shadow:0 4px 30px rgba(0,0,0,.6);font-weight:600}
.title h1 em{font-style:italic;color:var(--gold);font-weight:500}
.title .tag{font:500 clamp(17px,2.4vh,23px)/1.4 var(--display);font-style:italic;color:#efe7d3;margin:0 0 10px;text-shadow:0 2px 10px rgba(0,0,0,.7)}
.title .ican{margin:0 0 clamp(12px,2.2vh,20px);font-weight:700;font-size:15px;color:#f3e6c4;display:flex;gap:8px;align-items:flex-start}
.title .ican span{color:var(--gold)}
.title .row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.title .opts{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:clamp(12px,2.2vh,22px);font-weight:700;font-size:15px}
.title .opts label{display:flex;align-items:center;gap:9px;min-height:40px;cursor:pointer}
.title .opts input{width:20px;height:20px;accent-color:var(--gold)}
.title .fine{font:800 11px/1.4 var(--body);letter-spacing:.16em;color:rgba(248,243,231,.75);margin:12px 0 0}
.title .link{color:var(--ivory)}
.skipbtn{position:fixed;z-index:50;right:max(18px,env(safe-area-inset-right));bottom:calc(7.5vh + 18px);min-height:44px;padding:0 18px;border-radius:999px;background:rgba(0,0,0,.45);color:#fff;border:1px solid rgba(255,255,255,.35);font-weight:800;backdrop-filter:blur(6px)}
.langs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(12px,2vh,20px)}
.langs .pill{min-height:38px;font-size:13.5px}
.langs .pill[aria-pressed="true"]{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.pop .langs .pill{color:var(--navy);background:#f3ead6;border-color:#d8ccb0}
.pop .langs .pill[aria-pressed="true"]{background:var(--navy);color:var(--ivory);border-color:var(--navy)}
.poplabel{font:800 11px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--teal-ink);margin:2px 0 6px}
.popbtns{gap:8px;flex-wrap:wrap;margin:6px 0}

/* ---------- Stage: picture + felt card ---------- */
.ss-stage{height:100%;max-width:1500px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) clamp(380px,34vw,500px);gap:clamp(14px,1.8vw,26px);align-items:center}
.ss-pic{min-height:0;height:100%;display:grid;place-items:center;position:relative}
.ss-card{min-height:0;max-height:100%;display:flex;flex-direction:column;overflow:hidden}
.ss-in{position:relative;min-height:0;overflow:auto;overscroll-behavior:contain;padding:clamp(18px,2.8vh,30px) clamp(18px,2vw,30px);scrollbar-width:thin;scrollbar-color:#d9c79b transparent}
.ss-in>*{position:relative}
.ss-card h2{font-size:clamp(28px,4.2vh,44px);color:var(--navy);margin:8px 0 6px;text-wrap:balance;outline:none}
.ss-card .sub{font-size:clamp(15px,2vh,18px);line-height:1.45;color:var(--ink-soft);margin:0 0 4px}
.ss-card .count{display:inline-block;margin-left:6px;padding:1px 9px;border-radius:999px;background:var(--navy);color:var(--gold);font-size:13px}
.qlabel{font:800 13px/1.3 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--teal-ink);margin:14px 0 8px}
.qlabel .small{text-transform:none;letter-spacing:0;font-weight:600}

/* Abuelo / speech lines */
.joyline{position:relative;display:flex;gap:12px;align-items:flex-start;margin:10px 0 0;padding:10px 50px 10px 12px;border-radius:16px;background:#fdf1d4;border:1.5px solid #f0d58e;font:500 clamp(15px,1.95vh,18px)/1.45 var(--display);color:var(--navy)}
.joyline b{font:800 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);display:block;margin-bottom:4px}
.joyline .face{width:48px;height:48px;border-radius:50%;flex:none;background:#f3e2b5 url('../assets/sunny-street/abuelo.webp') 50% 30%/cover no-repeat;border:2px solid var(--gold)}
.joyline .say{min-width:0}
.joyline .again,.bub .again{position:absolute;right:8px;top:8px;width:36px;height:36px;border-radius:50%;background:#fff;border:1.5px solid #f0d58e;font-size:16px;line-height:1;display:grid;place-items:center}

/* Answer chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{max-width:100%;padding:9px 14px;border-radius:14px;background:#eef6f4;border:1.5px solid #9fcfc8;color:var(--ink);font-weight:700;font-size:14.5px;text-align:left;line-height:1.3;display:inline-flex;align-items:center;gap:8px}
.chips button:hover{border-color:var(--teal-ink)}
.chips button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--ivory)}
.chips .own,.chips .stillbtn{background:#fffdf7;border-style:dashed;border-color:#d3c6a8}
.ownbox{margin-top:8px;width:100%;min-height:46px;border-radius:12px;border:2px solid #d8ccb0;background:#fff;padding:8px 12px;font:400 21px/1.3 var(--hand);color:var(--navy)}
.ownbox:focus,.ideabox:focus{outline:none;border-color:var(--teal)}
.tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.small{font-size:13px;color:var(--ink-soft)}

/* ---------- The street picture (hotspots, sound rings, pins) ---------- */
.sv{position:relative;width:min(100%,calc((100dvh - var(--bar) - 36px) * 1.777));aspect-ratio:1672/941;border-radius:18px;overflow:hidden;box-shadow:0 26px 70px rgba(0,0,0,.5),0 0 0 6px rgba(248,243,231,.92),0 0 0 8px rgba(196,141,20,.6)}
.svimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hot,.ring,.pin{position:absolute;transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center}
.hot{width:clamp(30px,4.4vw,52px);height:clamp(30px,4.4vw,52px);border:3px dashed var(--gold);background:rgba(7,26,61,.18);box-shadow:0 0 0 4px rgba(255,250,240,.35);animation:pulse 2.4s ease-in-out infinite}
.hot:hover,.hot.cur{background:rgba(242,184,43,.35);animation:none;transform:translate(-50%,-50%) scale(1.12)}
.hot.found{border-style:solid;background:var(--gold);color:var(--navy);font-weight:900;font-size:clamp(14px,1.6vw,22px);animation:none;box-shadow:0 0 0 3px #fff,0 6px 16px rgba(0,0,0,.35)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(242,184,43,.55)}50%{box-shadow:0 0 0 12px rgba(242,184,43,0)}}
.ring{width:clamp(34px,4.2vw,54px);height:clamp(34px,4.2vw,54px);background:rgba(255,250,240,.88);border:2.5px solid var(--gold);font-size:clamp(16px,2vw,26px);box-shadow:0 6px 16px rgba(0,0,0,.3)}
.ring::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:3px solid var(--gold);opacity:0}
.ring.on::after{animation:wave 1.3s ease-out infinite}
.ring.chosen{background:var(--navy);border-color:var(--gold)}
@keyframes wave{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.4);opacity:0}}
.pin{width:clamp(34px,4vw,50px);height:clamp(34px,4vw,50px);background:rgba(255,250,240,.7);border:2px dashed var(--gold-deep);font-size:clamp(15px,1.8vw,24px);filter:grayscale(.7);opacity:.85}
.pin.on{filter:none;opacity:1;background:var(--gold);border-style:solid;transform:translate(-50%,-62%) scale(1.25);box-shadow:0 8px 18px rgba(0,0,0,.35)}
.sv.placing .pin:hover{filter:none;opacity:1}

/* Look closely: the close-up panel */
.panel-in:empty{display:none}
.closeup{display:flex;gap:12px;align-items:center;margin-top:14px;padding-top:12px;border-top:1.5px dashed var(--line)}
.closeup img{width:clamp(72px,11vh,110px);aspect-ratio:1;object-fit:cover;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px var(--gold),0 6px 16px rgba(0,0,0,.2)}
.closeup h3{font-size:24px;color:var(--navy)}

/* Listen: soundboard */
.soundboard{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.sb{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 4px;border-radius:14px;border:1.5px solid var(--line);background:#fffdf7;color:var(--ink);font-weight:700;font-size:12.5px;line-height:1.15;text-align:center}
.sb .i{font-size:24px}
.sb.playing{background:#fdf1d4;border-color:var(--gold)}
.sb.chosen{background:var(--navy);color:var(--ivory);border-color:var(--navy)}

/* Meet the neighbors */
.nbrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.6vw,22px);width:100%;max-width:980px}
.nb{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:14px 12px 16px;border-radius:20px;background:var(--paper);color:var(--ink);box-shadow:0 20px 50px rgba(0,0,0,.4);position:relative;transition:transform .2s}
.nb::before{content:"";position:absolute;inset:7px;border:2px dashed rgba(196,141,20,.5);border-radius:14px;pointer-events:none}
.nb:hover{transform:translateY(-4px)}
.nb b{font:600 clamp(19px,2.6vh,26px)/1.1 var(--display);color:var(--navy);margin-top:6px}
.nb small{font-size:13.5px;color:var(--ink-soft);line-height:1.3}
.nb .prog{margin-top:6px;font:800 11px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--teal-ink)}
.nb.met .prog{color:var(--gold-deep)}
.por{display:block;position:relative;border-radius:50%;overflow:hidden;background:#fff6e9;flex:none}
.por img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.nb .por{width:min(100%,clamp(110px,26vh,240px));aspect-ratio:1;border:4px solid #fff;box-shadow:0 0 0 2px var(--gold)}
.nb .por img{object-position:50% 12%}
.por .tick{position:absolute;right:6%;bottom:6%;width:34px;height:34px;border-radius:50%;background:var(--gold);color:var(--navy);font-weight:900;display:grid;place-items:center;box-shadow:0 0 0 3px #fff}
.nb .por .tick{right:10%;bottom:10%}
.por.sm{width:54px;height:54px;border:2px solid #fff;box-shadow:0 0 0 1.5px var(--gold)}
.por.xs{width:28px;height:28px;border:1.5px solid #fff;box-shadow:0 0 0 1px var(--gold);display:inline-block;vertical-align:middle}
.metlist{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:6px}
.metlist li{padding:8px 12px;border-radius:12px;border:1.5px dashed var(--line);font-size:15px}
.metlist li.ok{border-style:solid;border-color:#f0d58e;background:#fffaf0}
.metlist li.ok::before{content:"✓ ";color:var(--gold-deep);font-weight:900}
.talk{display:flex;align-items:center;gap:clamp(14px,2vw,28px);max-height:100%}
.talk.wide .convo{width:min(420px,38vw);margin:0}
.talk.wide .bub{font-size:clamp(16px,2.2vh,20px);box-shadow:0 14px 34px rgba(0,0,0,.35)}
.portrait{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;max-height:100%}
.portrait .por.big{width:auto;height:min(52vh,420px);aspect-ratio:4/5;border-radius:26px;border:6px solid var(--paper);box-shadow:0 0 0 2px var(--gold),0 26px 70px rgba(0,0,0,.5)}
.portrait .por.big img{object-position:50% 50%}
.portrait figcaption{text-align:center;background:var(--paper);color:var(--navy);padding:10px 22px;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.portrait figcaption b{display:block;font:600 24px/1.1 var(--display)}
.portrait figcaption span{font-size:14px;color:var(--ink-soft)}
.backlist{font-size:14px;color:var(--teal-ink)}
.convo{display:grid;gap:8px;margin:12px 0 4px}
.convo:empty{display:none}
.bub{position:relative;padding:10px 14px;border-radius:16px;font:500 clamp(15px,1.95vh,18px)/1.45 var(--display);color:var(--navy)}
.bub b{display:block;font:800 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;margin-bottom:4px}
.bub.me{justify-self:end;max-width:88%;background:#e3f2ef;border:1.5px solid #9fcfc8;border-bottom-right-radius:4px}
.bub.me b{color:var(--teal-ink)}
.bub.them{background:#fff;border:1.5px solid #f0d58e;border-bottom-left-radius:4px;padding-right:50px}
.bub.them b{color:var(--gold-deep)}
.bub.nar{background:#f1ecf8;border:1.5px solid #cfc2e6;font-style:italic;padding-right:50px}
.bub.nar b{color:#6b5a95}
.qs{display:grid;gap:7px;margin-top:10px}
.q{display:flex;gap:10px;align-items:center;text-align:left;padding:10px 12px;border-radius:14px;border:1.5px solid var(--line);background:#fffdf7;color:var(--ink);font-weight:700;font-size:15px;line-height:1.3}
.q:hover{border-color:var(--gold-deep)}
.q .qi{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--navy);color:var(--gold);font-weight:900;font-size:14px}
.q.asked{background:#fffaf0;color:var(--ink-soft)}
.q.asked .qi{background:var(--gold);color:var(--navy)}

/* What I heard */
.board{display:grid;gap:clamp(10px,1.6vh,16px);width:min(100%,640px)}
.note{display:flex;gap:14px;align-items:center;background:#fff7d6;color:var(--ink);padding:14px 18px;border-radius:6px 18px 18px 18px;box-shadow:0 14px 34px rgba(0,0,0,.35);position:relative;transform:rotate(-.6deg)}
.note:nth-child(2){transform:rotate(.7deg);background:#e9f5ef}
.note:nth-child(3){transform:rotate(-.3deg);background:#f6ecf6}
.note::before{content:"";position:absolute;inset:6px;border:1.5px dashed rgba(196,141,20,.45);border-radius:4px 14px 14px 14px;pointer-events:none}
.note b{font:600 20px var(--display);color:var(--navy)}
.note p{margin:2px 0 0;font:400 21px/1.25 var(--hand);color:var(--navy)}
.quotes{display:grid;gap:7px;max-height:32vh;overflow:auto}
.quote{display:flex;gap:10px;align-items:flex-start;text-align:left;padding:9px 12px;border-radius:14px;border:1.5px solid var(--line);background:#fffdf7;color:var(--ink);font:500 15px/1.4 var(--display)}
.quote[aria-pressed="true"]{border-color:var(--navy);background:#e3f2ef;box-shadow:inset 4px 0 0 var(--navy)}

/* Make the place matter */
.seed{margin-top:8px}
.seedtxt{margin:0;padding:10px 14px;border-radius:12px;background:#eef6f4;border:1.5px solid #9fcfc8;font:400 21px/1.3 var(--hand);color:var(--navy)}
.where{font:600 18px/1.3 var(--display);color:var(--navy);margin:0}
.where:empty{display:none}

/* The old bench */
.bench{position:relative;width:min(100%,calc((100dvh - var(--bar) - 36px) * 1.333));aspect-ratio:4/3;border-radius:18px;overflow:hidden;box-shadow:0 26px 70px rgba(0,0,0,.5),0 0 0 6px rgba(248,243,231,.92),0 0 0 8px rgba(196,141,20,.6)}
.bench>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fx{position:absolute;opacity:0;transform:scale(.6);transition:opacity .5s,transform .6s cubic-bezier(.2,1.5,.4,1);pointer-events:none}
.fx.on{opacity:1;transform:none}
.fx.paint{left:29%;top:62.5%;width:27.5%;height:19%;border-radius:6px;background:linear-gradient(180deg,#2bb7c9,#137b86);mix-blend-mode:color;transform:none}
.fx.paint.on{opacity:.75}
.fx.sparkle{left:30%;top:54%;width:26%;text-align:center;color:#fff6c9;font-size:clamp(14px,2vw,26px);text-shadow:0 0 10px #f2b82b;letter-spacing:.4em;animation:twinkle 1.6s ease-in-out infinite}
.fx.shade{left:20.5%;top:33%;width:42%;height:11%;border-radius:10px 10px 0 0;background:repeating-linear-gradient(90deg,#d9694f 0 12%,#f8f3e7 12% 24%);box-shadow:0 10px 18px rgba(0,0,0,.35);-webkit-mask:radial-gradient(circle at 50% 100%,transparent 9px,#000 10px) 0 0/calc(100%/7) 100% repeat-x;mask:radial-gradient(circle at 50% 100%,transparent 9px,#000 10px) 0 0/calc(100%/7) 100% repeat-x;transform-origin:50% 0}
.fx.shade::after{content:"";position:absolute;inset:4px;border:2px dashed rgba(255,255,255,.7);border-radius:8px 8px 0 0}
.fx.lights{left:21%;top:44%;width:41%;height:5%;display:flex;justify-content:space-between;align-items:flex-start;border-top:2px solid rgba(60,40,20,.6);border-radius:0 0 50% 50%/0 0 100% 100%}
.fx.lights i{width:clamp(8px,1vw,13px);height:clamp(8px,1vw,13px);border-radius:50%;background:#ffd76b;box-shadow:0 0 12px 4px rgba(255,200,80,.85);margin-top:-2px;animation:twinkle 2s ease-in-out infinite}
.fx.lights i:nth-child(odd){animation-delay:.7s;margin-top:6px}
@keyframes twinkle{0%,100%{opacity:1}50%{opacity:.45}}
.fx.sign{left:59.5%;top:33%;width:11%;height:16%;display:grid;place-items:center;background:#fff8e6;border-radius:8px;border:2px solid #20b8d0;box-shadow:0 4px 10px rgba(0,0,0,.3)}
.fx.sign::before{content:"";position:absolute;inset:3px;border:1.5px dashed #c48d14;border-radius:5px}
.fx.sign span{position:relative;padding:4px;font:400 clamp(9px,1.15vw,16px)/1.05 var(--hand);color:var(--navy);text-align:center;word-break:break-word}
.fx.patchy{width:clamp(64px,10%,110px);aspect-ratio:1;border-radius:50%;background:#fff8e6;border:3px solid #fff;box-shadow:0 0 0 3px #3e74b8,0 8px 18px rgba(0,0,0,.35);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:6px}
.fx.patchy::before{content:"";position:absolute;inset:4px;border-radius:50%;border:2px dashed #d9a128}
.fx.patchy .ico{font-size:clamp(20px,2.6vw,34px);line-height:1}
.fx.patchy small{font:800 clamp(7px,.75vw,10px)/1.1 var(--body);color:var(--navy);margin-top:2px;max-width:90%}
.p-books{left:6%;top:70%}.p-games{left:65%;top:72%}.p-food{left:82%;top:52%}.p-night{left:6%;top:44%}

/* Fix choices */
.fixes{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:12px}
.fixbtn{display:grid;grid-template-columns:auto 1fr;gap:2px 9px;align-items:center;text-align:left;padding:8px 10px;border-radius:14px;border:1.5px solid var(--line);background:#fffdf7;color:var(--ink)}
.fixbtn .i{grid-row:span 2;font-size:24px}
.fixbtn .nm{font-weight:800;font-size:14px;line-height:1.2}
.fixbtn .why{font:700 11.5px/1.2 var(--body);color:var(--ink-soft);display:flex;gap:5px;align-items:center}
.said{position:absolute;left:3%;right:3%;bottom:3%;display:flex;gap:10px;align-items:center;background:rgba(255,250,240,.96);border:1.5px solid #f0d58e;border-radius:16px;padding:8px 14px;box-shadow:0 10px 24px rgba(0,0,0,.35)}
.said p{margin:0;font:500 clamp(13px,1.6vh,16px)/1.35 var(--display);color:var(--navy)}
.said b{font:800 11px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);display:block}
.fixbtn[aria-pressed="true"]{border-color:var(--navy);background:#e3f2ef;box-shadow:inset 4px 0 0 var(--navy)}
.signbox{font-size:22px}

/* Setting Card */
.cardpic{width:min(100%,620px)}
.setcard{padding:clamp(20px,3vh,32px) clamp(20px,2.4vw,34px);color:var(--ink)}
.setcard>*{position:relative}
.sc-top{display:flex;gap:16px;align-items:center}
.setcard h3{font:600 clamp(24px,3.4vh,34px)/1.1 var(--display);color:var(--navy);margin:4px 0 2px}
.setcard .by{margin:0;font-size:14px;color:var(--ink-soft)}
.sc-text{font:400 clamp(21px,2.9vh,27px)/1.4 var(--hand);color:var(--navy);margin:14px 0 6px;white-space:pre-wrap}
.setcard dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:10px 0 0;font-size:14.5px}
.setcard dt{font-weight:800;color:var(--teal-ink)}
.setcard dd{margin:0}
.setcard .follow{margin:12px 0 0;padding-top:10px;border-top:1.5px dashed var(--line);font-weight:700;color:var(--navy)}
.mpatch{position:relative;flex:none;width:clamp(78px,11vh,104px);aspect-ratio:1;border-radius:50%;background:url('../assets/sunny-street/patch.webp') center/cover}
.mpatch img{position:absolute;inset:15%;width:70%;height:70%;border-radius:50%;object-fit:cover}
.mpatch.big{width:clamp(96px,15vh,140px)}
.mpatch.sm{width:56px}
.mpatch.stamped{animation:stamp .8s cubic-bezier(.2,1.6,.4,1) both .3s}
@keyframes stamp{0%{transform:scale(2.4) rotate(-14deg);opacity:0}100%{transform:none;opacity:1}}
.ideabox{width:100%;resize:none;border-radius:14px;border:2px solid #d8ccb0;background:#fff;padding:10px 14px;font:400 22px/1.35 var(--hand);color:var(--navy)}
.cardbox{height:clamp(96px,15vh,150px)}
.checks{margin-top:8px;font-size:14.5px}
.checks summary{cursor:pointer;font-weight:800;color:var(--teal-ink)}
.checks ul{margin:6px 0 0;padding-left:4px;list-style:none}
.ppl button,.whobtn{gap:6px}
.whos{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}
.whobtn{display:flex;align-items:center;gap:8px;text-align:left;padding:7px 10px;border-radius:12px;border:1.5px solid var(--line);background:#fffdf7;color:var(--ink);font-weight:700;font-size:13.5px;line-height:1.2}
.whobtn[aria-pressed="true"]{border-color:var(--navy);background:#e3f2ef;box-shadow:inset 4px 0 0 var(--navy)}

/* Finale */
.finale{height:100%;max-width:1380px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:clamp(16px,3vw,44px);align-items:center}
.finale .win{padding:clamp(20px,3.4vh,40px) clamp(20px,2.6vw,40px);max-height:100%;overflow:auto}
.finale .win>*{position:relative}
.finale h2{font-size:clamp(32px,5.4vh,56px);color:var(--navy);margin:8px 0}
.finale .lede{font:500 clamp(17px,2.3vh,21px)/1.45 var(--display);color:var(--ink);margin:0}
.finale .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:6px}
.finale .cardwrap{max-height:100%;overflow:auto}
.badge{display:flex;align-items:center;gap:16px;padding:12px 0;border-top:1.5px dashed var(--line);border-bottom:1.5px dashed var(--line);margin:14px 0 12px;font-weight:800;color:var(--navy)}
.badge small{display:block;font-weight:600;color:var(--ink-soft)}
.orange{position:fixed;z-index:44;left:-80px;bottom:16vh;width:58px;height:58px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 34% 30%,#ffc46b 0 12%,#f4902a 40%,#d9661a 78%,#b8511a 100%);box-shadow:inset -6px -8px 0 rgba(0,0,0,.08),0 10px 18px rgba(0,0,0,.35)}
.orange::before{content:"";position:absolute;inset:5px;border-radius:50%;border:2px dashed rgba(255,230,190,.55)}
.orange::after{content:"";position:absolute;left:24px;top:-8px;width:16px;height:10px;border-radius:0 12px 0 12px;background:#5c8a3a}
.orange.roll{animation:roll 3.4s cubic-bezier(.3,.1,.4,1) forwards}
@keyframes roll{0%{transform:translateX(0) rotate(0)}100%{transform:translateX(calc(100vw + 160px)) rotate(900deg)}}

/* Sheets */
.sheet details{margin:10px 0;border:1.5px solid var(--line);border-radius:12px;padding:10px 14px;background:#fffdf8}
.sheet summary{font-weight:800;cursor:pointer;color:var(--navy)}
.sheet .setcard{box-shadow:none;padding:12px}
.sheet .setcard::before{display:none}
.empty{padding:22px;border:2px dashed #d3c6a8;border-radius:14px;text-align:center}
.passrow{display:flex;gap:14px;align-items:center}
.next-art{width:120px;height:150px;object-fit:cover;border-radius:16px;float:right;margin:0 0 10px 14px;border:3px solid #fff;box-shadow:0 0 0 2px var(--gold)}
.lvl button{min-width:44px;justify-content:center}

/* SEO block (screen readers + search engines; the visible activity is the game) */
.seo{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Tablets & phones ---------- */
@media (max-width:1100px){.ss-stage{grid-template-columns:minmax(0,1fr) minmax(340px,42vw)}}
@media (max-width:860px),(orientation:portrait) and (max-width:1024px){
  main{padding:10px 10px max(10px,env(safe-area-inset-bottom))}
  .ss-stage{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:10px;align-items:stretch}
  .ss-pic{height:auto}
  .sv{width:100%;max-height:34dvh;width:min(100%,calc(34dvh * 1.777))}
  .bench{width:min(100%,calc(32dvh * 1.333))}
  .ss-card{max-height:none;height:100%}
  .nbrow{gap:8px}
  .nb{padding:10px 6px 12px;border-radius:16px}
  .nb .por{width:min(100%,22dvh)}
  .nb small{display:none}
  .nb b{font-size:16px}
  .portrait{flex-direction:row;gap:10px}
  .portrait .por.big{height:22dvh;border-radius:18px;border-width:4px}
  .portrait figcaption{border-radius:16px;padding:8px 12px;text-align:left}
  .portrait figcaption b{font-size:19px}
  .board{gap:6px}
  .note{padding:8px 12px;gap:10px}
  .note p{font-size:17px}
  .note b{font-size:16px}
  .ss-stage.hearing .board .note:nth-child(n){transform:none}
  .cardpic{width:100%}
  .ss-stage.carding .setcard dl{display:none}
  .ss-stage.carding .setcard{padding:12px 16px}
  .ss-stage.carding .sc-text{font-size:17px;margin:6px 0 0;max-height:12dvh;overflow:auto}
  .ss-stage.carding .mpatch{width:56px}
  .finale{grid-template-columns:1fr;align-content:start;overflow:auto;height:100%}
  .finale .cardwrap{max-height:none;overflow:visible}
  .finale .win{max-height:none;overflow:visible}
  .soundboard{grid-template-columns:repeat(4,1fr);gap:6px}
  .sb{font-size:11px;padding:7px 2px}.sb .i{font-size:20px}
  .quotes{max-height:none}
}
@media (max-width:640px){
  .ss-card{padding:16px 14px}
  .ss-card h2{font-size:26px}
  .joyline{padding:8px 46px 8px 10px;font-size:15px}
  .joyline .face{width:38px;height:38px}
  .whos{grid-template-columns:1fr 1fr}
  .title{padding-bottom:calc(7.5vh + 12px)}
  .title h1{font-size:clamp(40px,7vh,64px)}
  .title .tag{font-size:16px}
  .fx.patchy small{display:none}
}
@media (max-height:620px) and (orientation:landscape){
  .title .logo{display:none}
  .title .ican{display:none}
}