/* pond.css: Same Pond (pond-app.js, pond-art.js). Built on the site's tokens (site.css) and the components the party
   games already share (party.css's .zp-second, .zp-inp, .zp-pill, dialogs and toasts; arcade.css's entry screen), so
   it reads as part of the same arcade in both tones. Containers stay quiet (charcoal or off-white,
   thin neutral borders); a selection gets a dark outline like the duck creator. Gold (--zp-gold, the Gold Coin
   game's coin colour) is only for coins, gold earned and the small match check. Every rule is scoped to Same Pond's own containers. */

/* ---------- entry ---------- */
#pondSetup .zp-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
#pondSetup .zp-acts .start{margin-top:0}
#pondSetup .zp-acts .zp-second{min-height:58px;border-radius:16px;padding:0 30px;font-size:17px}
@media (max-width:900px){#pondSetup .zp-acts{flex-direction:column}#pondSetup .zp-acts>*{width:100%}}
.sp-demo{display:flex;flex-direction:column;gap:12px;width:100%;max-width:560px;margin:0 auto;animation:spFade .5s ease}
.sp-demo-cap{font:600 clamp(16px,1.4vw,19px)/1.4 var(--font-sans);text-align:center;color:var(--fg)}
.sp-demo-row{display:flex;justify-content:space-between;gap:12px}
.sp-seal,.sp-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:var(--surf3);font:600 13px var(--font-sans);color:var(--g6)}
@keyframes spFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- shared pieces ---------- */
.sp{display:none;overflow-wrap:anywhere}
.sp.show{display:block}
.sp-page{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:18px;padding:6px 0 56px}
.sp-page h2{font:700 clamp(26px,4.4vw,38px)/1.1 var(--font-sans);letter-spacing:-.02em;margin:0;text-wrap:balance}
.sp-page h3{font:700 18px/1.3 var(--font-sans);margin:0}
.sp-page p{margin:0;font:500 16px/1.5 var(--font-sans)}
.sp-page .muted,.sp-dlg .muted{color:var(--g5)}
.sp-center{align-items:center;text-align:center;padding-top:40px}
.sp-help{margin:6px 0 0!important}
.sp-box{padding:14px 16px;border-radius:14px;background:var(--surf2)}
.sp-box>summary{cursor:pointer;font:600 15px var(--font-sans);color:var(--fg);display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.sp-box>summary .e-small{margin:0}
.sp-box .zp-form{padding-top:6px}
.sp-note,.sp-banner{padding:10px 14px;border-radius:12px;background:var(--surf2);font:600 14.5px/1.45 var(--font-sans)!important;color:var(--fg)}
.sp-banner{margin-bottom:6px!important}
.sp-wait{font:500 14px var(--font-mono)!important;color:var(--g5)!important;text-align:center}
.sp-code{font-family:var(--font-mono);letter-spacing:.14em;color:var(--fg)}
.sp-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:4px}
.sp-acts .start{margin-top:0}
.sp-chip{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border:1.5px solid var(--g3);border-radius:999px;background:transparent;color:var(--fg);font:600 14px var(--font-sans);cursor:pointer}
.sp-chip:hover{border-color:var(--g5)}
.sp-chip.on{border-color:var(--fg);background:var(--surf3);color:var(--fg)}
.sp-colhead .sp-chip{min-height:26px;padding:0 10px;font-size:12px;cursor:default;margin-left:auto}
.sp-chip:focus-visible,.sp-opt:focus-visible,.sp-grip:focus-visible,.sp-rbtns button:focus-visible,.sp-cat input:focus-visible+span{outline:2px solid var(--fg);outline-offset:2px}

/* ---------- forms (create / join / one device) ---------- */
.sp-form{display:flex;flex-direction:column}
.sp-merow{display:flex;align-items:center;gap:16px}
.sp-meform{flex:1;display:flex;flex-direction:column;gap:10px;align-items:flex-start;min-width:0}
.sp-seg{display:flex;flex-wrap:wrap;gap:6px}
.sp-dlg .sp-seg button,.sp-page .sp-seg button{flex:1 1 auto;min-height:42px;text-align:center}
.sp-switchrow{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sp-switchrow .gs-label{margin:0}
.sp-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin-top:8px}
.sp-cat{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1.5px solid var(--g3);border-radius:12px;cursor:pointer}
.sp-cat input{margin-top:3px;width:18px;height:18px;accent-color:var(--fg);flex:none}
.sp-cat span{display:flex;flex-direction:column;gap:2px}
.sp-cat b{font:600 14.5px/1.3 var(--font-sans)}
.sp-cat small{font:500 12.5px/1.35 var(--font-sans);color:var(--g5)}
.sp-cat:has(input:not(:checked)){opacity:.6;border-style:dashed}

/* ---------- lobby ---------- */
.sp-dockpair{border-radius:var(--r-panel);background:var(--surf2);padding:10px 12px 14px}
.sp-dockpair .sp-scene{max-height:200px}
.sp-names{display:flex;justify-content:space-between;gap:12px;padding:0 6px}
.sp-names span{display:flex;align-items:center;gap:8px;min-width:0}
.sp-names span:last-child{flex-direction:row-reverse;text-align:right}
.sp-names b{font:600 15px var(--font-sans)}
.sp-names small{font:500 12px var(--font-mono);color:var(--g5)}
.sp-names .ghost{opacity:.7}
.sp-invite{display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:14px;border:1.5px dashed var(--g4)}
.sp-invite .e-small{margin:0}
.sp-linkrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sp-linkrow code{flex:1 1 220px;min-width:0;padding:10px 12px;border-radius:10px;background:var(--surf2);font:500 14px var(--font-mono);overflow-wrap:anywhere}

/* ---------- the journey ---------- */
.sp-top{display:flex;flex-direction:column;gap:8px}
.sp-mapwrap{overflow-x:auto;scrollbar-width:none;border-radius:14px;background:var(--surf2);padding:4px 6px}
.sp-mapwrap::-webkit-scrollbar{display:none}
.sp-map{display:block;width:100%;min-width:300px;height:auto;color:var(--fg)}
.sp-boat{animation:spBob 3.2s ease-in-out infinite}
@keyframes spBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px) rotate(-1deg)}}
.sp-topline{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.sp-score{display:inline-flex;align-items:center;gap:6px;font:500 14px var(--font-sans);color:var(--g6)}
.sp-score b{font:700 16px var(--font-mono);color:var(--fg)}
.sp-coinic .sp-coin{width:18px;height:18px}
.sp-decor{margin:0}
.sp-scenecard{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:var(--r-panel);background:var(--surf2)}
.sp-tags{display:flex;flex-wrap:wrap;gap:6px}
.sp-tag{padding:5px 10px;border-radius:999px;background:var(--surf3);font:600 11.5px/1.2 var(--font-mono);letter-spacing:.04em;color:var(--g6)}
.sp-tag.k{background:transparent;border:1px solid var(--g3)}
.sp-scene{display:block;width:100%;height:auto;max-height:260px;color:var(--fg);overflow:visible}
.sp-prompt{font:700 clamp(22px,3.4vw,30px)/1.2 var(--font-sans)!important;letter-spacing:-.015em}
.sp-more summary{cursor:pointer;font:600 14px var(--font-sans);color:var(--g5)}
.sp-more p{margin-top:6px!important;color:var(--g6)}
.sp-twist{padding:12px 14px;border-radius:14px;background:var(--bg);border:1px solid var(--g3);animation:spUnfold .6s cubic-bezier(.3,1.3,.5,1)}
.sp-twisttag{display:inline-block;margin-bottom:4px;font:700 11px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--g6)}
.sp-twist p{font-weight:600!important}
.sp-twist.seen{animation:none}
.sp-details{padding:8px 12px;border-radius:12px;border:1.5px dashed var(--g3);background:var(--bg)}
.sp-details p,.sp-details li{margin:0;font:500 14.5px/1.45 var(--font-sans)!important;color:var(--fg)}
.sp-details ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px}
.sp-scenecard .sp-details+.sp-twist{margin-top:8px}
@keyframes spUnfold{from{transform:scaleY(.2) translateY(-10px);opacity:0}to{transform:none;opacity:1}}

/* scene motion: ducks walk in, the scene's one subject settles, water drifts */
.sp-scene .sp-in-l{animation:spInL .9s cubic-bezier(.3,1.2,.5,1) both}
.sp-scene .sp-in-r{animation:spInR .9s .12s cubic-bezier(.3,1.2,.5,1) both}
.sp-scene .sp-hero{animation:spHero .7s .25s ease-out both}
.sp-scene .sp-pop{animation:spPop .6s .8s cubic-bezier(.3,1.6,.5,1) both;transform-box:fill-box;transform-origin:center}
.sp-scene .sp-wave{animation:spWave 6s ease-in-out infinite}
.sp-scene .sp-steam{animation:spSteam 2.4s ease-in-out infinite}
.sp-scene .sp-rain{animation:spRain 1.1s linear infinite}
.sp-scene .sp-crash{animation:spCrash .5s .5s both}
.sp-scene .sp-light{animation:spBlink 3s 1.2s both}
.sp-scene .sp-drop{animation:spDrop 1s .9s cubic-bezier(.5,0,.8,.6) both}
.sp-scene .sp-bob{animation:spBob 3.2s ease-in-out infinite}
.sp-scene .sp-slide{animation:spSlide 1.2s ease-out both}
@keyframes spInL{from{transform:translate(-30px,0);opacity:0}}
@keyframes spInR{from{transform:translate(330px,0);opacity:0}}
@keyframes spHero{from{opacity:0;transform:translateY(8px)}}
@keyframes spPop{from{opacity:0;transform:scale(.3)}}
@keyframes spWave{50%{transform:translateX(-8px)}}
@keyframes spSteam{0%,100%{opacity:.2;transform:none}50%{opacity:.8;transform:translateY(-3px)}}
@keyframes spRain{from{transform:translateY(-6px);opacity:0}50%{opacity:.8}to{transform:translateY(8px);opacity:0}}
@keyframes spCrash{0%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1.08)}100%{opacity:1}}
@keyframes spBlink{0%,60%{opacity:1}70%,100%{opacity:0}}
@keyframes spDrop{from{transform:translateY(-60px);opacity:0}30%{opacity:1}}
@keyframes spSlide{from{transform:translateX(60px);opacity:0}}
.sp-scene .sp-actor .pd{transition:transform .3s}

/* hand-over screen (one device) */
.sp-hand{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:30px 16px;border-radius:var(--r-panel);background:var(--surf2)}
.sp-hand h2{font-size:clamp(28px,6vw,40px)}

/* answering */
.sp-step{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:var(--r-panel);border:1.5px solid var(--g3)}
.sp-step h3{display:flex;align-items:center;gap:10px}
.sp-sub{margin-top:6px!important;font-size:15px!important}
.sp-n{display:inline-grid;place-items:center;width:26px;height:26px;flex:none;border-radius:50%;background:var(--fg);color:var(--bg);font:700 13px var(--font-mono)}
.sp-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:10px}
.sp-opt{display:flex;align-items:center;gap:12px;min-height:58px;padding:10px 14px;border:1.5px solid var(--g3);border-radius:14px;background:var(--bg);color:var(--fg);font:600 15.5px/1.3 var(--font-sans);text-align:left;cursor:pointer;transition:border-color .15s,transform .15s}
.sp-opt:hover{border-color:var(--g5)}
.sp-opt.on{border:2px solid var(--fg);background:var(--surf3);color:var(--fg);transform:translateY(-1px)}
.sp-opt .pd{flex:none}
.sp-post{position:relative;width:14px;height:30px;flex:none}
.sp-post::before{content:"";position:absolute;left:6px;top:4px;bottom:0;width:2px;background:var(--g5);border-radius:2px}
.sp-post::after{content:"";position:absolute;left:0;top:2px;width:14px;height:9px;border-radius:2px;background:var(--g4);clip-path:polygon(0 0,80% 0,100% 50%,80% 100%,0 100%)}
.sp-opt.on .sp-post::after,.sp-sign .sp-post::after{background:var(--fg)}
.sp-tagic{width:16px;height:22px;flex:none;border:2px solid var(--g5);border-radius:3px 3px 3px 3px;clip-path:polygon(0 18%,50% 0,100% 18%,100% 100%,0 100%)}
.sp-opt.on .sp-tagic{border-color:var(--fg);background:var(--fg);color:var(--bg)}
.sp-reasons{display:flex;flex-wrap:wrap;gap:8px}
/* the reasons after a choice: one per row, so each reads in full on a phone; Other opens its field right below */
.sp-whys{display:flex;flex-direction:column;gap:6px}
.sp-why-opt{display:flex;align-items:center;gap:10px;min-height:46px;padding:8px 14px;border:1.5px solid var(--g3);border-radius:12px;background:var(--bg);color:var(--fg);font:600 15px/1.3 var(--font-sans);text-align:left;cursor:pointer;transition:border-color .15s}
.sp-why-opt:hover{border-color:var(--g5)}
.sp-why-opt i{flex:none;width:18px;height:18px;border:1.5px solid var(--g5);border-radius:50%;box-sizing:border-box}
.sp-why-opt.on{border:2px solid var(--fg);background:var(--surf3);color:var(--fg)}
.sp-why-opt.on i{border:5px solid var(--fg)}
.sp-why-opt:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.sp-ownrow{position:relative;margin-top:-4px}
.sp-own{width:100%;min-height:48px!important;font-size:16px!important;padding-right:58px!important}
.sp-ownrow .sp-textcount{position:absolute;right:12px;top:50%;transform:translateY(-50%);font:500 12px var(--font-mono);color:var(--g5)}
.sp-whystep .sp-help{margin:6px 0 0}
.sp-before{font:500 14px/1.5 var(--font-sans)!important;color:var(--g6);padding:10px 14px;border-radius:12px;background:var(--surf2);display:flex;flex-direction:column;gap:2px}
.sp-before b{color:var(--fg)}

/* rank: luggage tags */
.sp-ends{display:flex;font:600 12px/1 var(--font-mono)!important;letter-spacing:.06em;text-transform:uppercase;color:var(--g5)}
.sp-rank{position:relative;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.sp-rslot{position:absolute;left:0;right:0;border:2px dashed var(--g4);border-radius:10px 14px 14px 10px;background:var(--surf2);pointer-events:none;z-index:0}
.sp-rank.dragging .sp-rtag{z-index:1}
.sp-rtag{position:relative;display:flex;align-items:center;gap:8px;min-height:60px;padding:6px 8px 6px 2px;border:1.5px solid var(--g3);border-radius:10px 14px 14px 10px;background:var(--bg);font:600 16px/1.3 var(--font-sans);color:var(--fg)}
.sp-rtag b,.sp-rn{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--g4);font:700 14px var(--font-mono);color:var(--fg)}
.sp-ricon{flex:none;width:30px;height:30px;color:var(--fg)}
.sp-rtag .sp-rlab,.sp-rtag>span:not(.sp-rbtns){flex:1;min-width:0}
.sp-rank.dragging .sp-rtag{transition:transform .18s cubic-bezier(.2,.8,.3,1)}
.sp-rank.dragging .sp-rtag.drag{transition:none;border-color:var(--fg);box-shadow:0 10px 24px rgba(0,0,0,.28);z-index:3;background:var(--bg)}
.sp-rank.dragging{user-select:none;-webkit-user-select:none}
.sp-grip{flex:none;display:grid;place-items:center;width:44px;height:52px;margin:-4px 0;border:none;border-radius:8px;background:var(--surf2);color:var(--g6);fill:currentColor;cursor:grab;touch-action:none;-webkit-touch-callout:none}
.sp-grip svg{fill:currentColor}
.sp-rtag.drag .sp-grip{cursor:grabbing;color:var(--fg)}
.sp-rbtns{flex:none;display:flex;gap:4px}
.sp-rbtns button{display:grid;place-items:center;width:40px;height:40px;border:1.5px solid var(--g3);border-radius:10px;background:transparent;color:var(--fg);cursor:pointer}
.sp-rbtns button:disabled{opacity:.3;cursor:default}
.sp-rankhelp{margin:0 0 6px}
.sp-rtag.hit{border-color:var(--g5)}
.sp-rhit{flex:none;display:grid;place-items:center;width:22px;height:22px;color:var(--zp-gold)}
.sp-rhit svg{width:18px;height:18px}
.sp-opt.tag .sp-ricon{width:28px;height:28px}
@media (max-width:380px){.sp-ricon{display:none}}
.sp-rank.ro .sp-rtag{min-height:40px;padding:6px 10px;font-size:14px;gap:8px;animation:spFade .4s calc(var(--i)*.12s) both}

/* estimate */
.sp-est{display:flex;flex-direction:column;gap:10px}
.sp-viz{width:100%;height:auto;color:var(--fg);overflow:visible}
.sp-numrow{display:flex;align-items:center;justify-content:center;gap:12px}
.sp-numrow .zp-second{width:52px;min-height:48px;padding:0;flex:none}
.sp-numfield{display:flex;align-items:baseline;gap:8px;padding:4px 12px;border:1.5px solid var(--g3);border-radius:12px;background:var(--bg);cursor:text}
.sp-numfield:focus-within{border-color:var(--fg);outline:2px solid var(--fg);outline-offset:1px}
.sp-num{width:3.6ch;min-width:0;padding:4px 0;border:none;background:none;color:var(--fg);font:700 28px/1.1 var(--font-mono);text-align:right;-moz-appearance:textfield;appearance:textfield}
.sp-num:focus{outline:none}
.sp-num::-webkit-inner-spin-button,.sp-num::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.sp-unit{font:600 15px/1.2 var(--font-sans);color:var(--g6);white-space:nowrap}
.sp-numhint{margin:0;min-height:0;text-align:center;color:var(--g6)}.sp-numhint:empty{display:none}
.sp-range{width:100%;height:36px;accent-color:var(--fg);cursor:pointer}
.sp-lohi{display:flex;justify-content:space-between;gap:12px;font:500 12.5px var(--font-sans);color:var(--g5)}
.sp-stamps{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;min-height:34px;padding:8px;border-radius:10px;background:var(--surf2)}
.sp-stamp{width:22px;height:22px;border-radius:50%;border:2px dashed var(--zp-gold);transform:rotate(var(--r));animation:spPop .25s both}
.sp-stamps b{font:700 14px var(--font-mono);align-self:center}
.sp-meter{position:relative;height:30px;border-radius:999px;background:var(--surf3);overflow:hidden}
.sp-meter i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--f)*100%);background:var(--g4);animation:spGrow .9s ease-out both}
.sp-meter b{position:relative;display:block;padding:0 12px;font:700 14px/30px var(--font-mono);color:var(--fg)}
@keyframes spGrow{from{width:0}}

/* divide the gold */
.sp-div{display:flex;flex-direction:column;gap:12px}
.sp-pool{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:12px;background:var(--surf2);border:1.5px dashed transparent}
.sp-pool .e-small{margin:0}
.sp-poolcoins{display:flex;flex-wrap:wrap;gap:4px;min-height:32px}
.sp-dcoin{display:inline-grid;width:32px;height:32px;cursor:grab;touch-action:none}
.sp-dcoin .sp-coin,.sp-ghostcoin .sp-coin{width:100%;height:100%}
.sp-piles{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
.sp-piles.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sp-piles.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:560px){.sp-piles.n4,.sp-piles.n3{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sp-pile{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 6px 10px;border:1.5px solid var(--g3);border-radius:14px;background:var(--bg);text-align:center}
.sp-pile.over,.sp-pool.over{border-color:var(--fg);border-style:solid}
.sp-pilebox{width:100%;max-width:110px;touch-action:none;cursor:grab}
.sp-basket{width:100%;height:auto;color:var(--fg);overflow:visible}
.sp-pilen{font:700 20px var(--font-mono)}
.sp-pilel{font:600 13px/1.25 var(--font-sans);color:var(--g6);min-height:2.5em;overflow-wrap:normal;hyphens:auto}
.sp-pilebtns{display:flex;gap:6px}
.sp-pilebtns .zp-second{width:42px;min-height:38px;padding:0}
.sp-ghostcoin{position:fixed;z-index:200;width:38px;height:38px;margin:-19px 0 0 -19px;pointer-events:none;filter:drop-shadow(0 4px 6px rgba(0,0,0,.3))}
.sp-piles.ro .sp-pile{padding:6px 4px}
.sp-piles.ro .sp-pilel{min-height:0;font-size:12px}
.sp-piles.ro.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
.sp-pilebox.pour .sp-c{animation:spPour .5s both}
.sp-pilebox.pour .sp-c:nth-child(2n){animation-delay:.08s}.sp-pilebox.pour .sp-c:nth-child(3n){animation-delay:.16s}.sp-pilebox.pour .sp-c:nth-child(4n){animation-delay:.24s}
@keyframes spPour{from{transform:translateY(-26px);opacity:0}}

/* sealed and timers */
.sp-sealed{display:flex;align-items:center;gap:18px;padding:18px;border-radius:var(--r-panel);background:var(--surf2)}
.sp-timer{display:flex;align-items:center;gap:10px}
.sp-timer span{font:700 15px var(--font-mono);min-width:46px}
.sp-timer i{flex:1;height:6px;border-radius:999px;background:var(--surf3);position:relative;overflow:hidden}
.sp-timer i::after{content:"";position:absolute;inset:0;background:var(--fg);transform-origin:left;animation:spTime var(--left) linear both;transform:scaleX(calc(var(--left) / var(--dur)))}
@keyframes spTime{to{transform:scaleX(0)}}

/* reveal: an opening curtain, both worlds side by side */
.sp-reveal{display:flex;flex-direction:column;gap:14px;animation:spCurtain .7s cubic-bezier(.3,1.1,.5,1) both}
@keyframes spCurtain{from{clip-path:inset(0 50% 0 50%);opacity:.3}to{clip-path:inset(0 0 0 0);opacity:1}}
.sp-revhead h3{font-size:clamp(20px,3vw,26px)!important}
.sp-react{width:100%;max-width:420px;height:auto;align-self:center;overflow:visible}
.sp-react .sp-r0{animation:spInL .8s .3s both}.sp-react .sp-r1{animation:spInR2 .8s .3s both}
.sp-react.same .sp-r0,.sp-react.same .sp-r1{animation-name:spHopIn}
.sp-react .sp-pop{animation:spPop .6s 1.1s cubic-bezier(.3,1.6,.5,1) both;transform-box:fill-box;transform-origin:center}
.sp-reveal.deep .sp-react .sp-r0,.sp-reveal.deep .sp-react .sp-r1{animation-duration:1.4s;animation-timing-function:ease-out}
@keyframes spInR2{from{transform:translateX(40px);opacity:0}}
@keyframes spHopIn{0%{transform:translateY(-20px);opacity:0}60%{transform:translateY(2px);opacity:1}100%{transform:none}}
.sp-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:600px){.sp-cols{grid-template-columns:1fr}}
.sp-col{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:var(--r-panel);background:var(--surf2);animation:spFade .5s both}
.sp-col+.sp-col{animation-delay:.18s}
.sp-colhead{display:flex;align-items:center;gap:10px}
.sp-colhead b{font:700 16px var(--font-sans)}
.sp-sign{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--bg);border:1px solid var(--g3);font:700 16px/1.3 var(--font-sans)}
.sp-reason,.sp-pred{font-size:14px!important;color:var(--g6)}
.sp-reason b,.sp-pred b{color:var(--fg)}
.sp-gain{display:inline-flex;align-items:center;gap:2px}
.sp-gain span{width:22px;height:22px;animation:spCoin .6s calc(.9s + var(--i)*.12s) cubic-bezier(.3,1.6,.5,1) both}
.sp-gain .sp-coin{width:100%;height:100%}
.sp-gain b{margin-left:6px;font:700 15px var(--font-mono);color:var(--zp-gold)}
.sp-gain.none{font:500 13px var(--font-mono);color:var(--g5)}
@keyframes spCoin{0%{opacity:0;transform:translateY(14px) scale(.4)}70%{opacity:1;transform:translateY(-4px) scale(1.15)}100%{opacity:1;transform:none}}
.sp-outcome{padding:10px 14px;border-radius:12px;border:1.5px dashed var(--g4);font:500 14.5px/1.45 var(--font-sans)!important;color:var(--g6)}
.sp-journey{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:center}
.sp-journey small{display:block;margin-bottom:4px;font:600 11px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--g5)}
.sp-journey .sp-sign{font-size:14px;padding:8px}
.sp-journey .sp-piles.ro{grid-template-columns:repeat(2,minmax(0,1fr))}
.sp-arrow{font:700 20px var(--font-mono);color:var(--g6)}
.sp-talk{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;background:var(--surf2);font-weight:600!important}

/* scrapbook */
.sp-recap{display:flex;flex-direction:column;gap:16px}
.sp-total{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:500 16px var(--font-sans)!important}
.sp-total b{font:700 22px var(--font-mono)}
.sp-total .sp-coin.big{width:28px;height:28px}
.sp-moments{display:flex;flex-direction:column;gap:12px}
.sp-moment{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.2fr);gap:14px;align-items:center;padding:14px;border-radius:var(--r-panel);background:var(--surf2);border:2px solid transparent;cursor:pointer}
.sp-moment.on{border-color:var(--fg);color:var(--fg)}
.sp-moment input{width:20px;height:20px;accent-color:var(--fg)}
.sp-mart .sp-scene{max-height:150px}
.sp-mtext{display:flex;flex-direction:column;gap:4px}
.sp-mtext h3{font-size:17px!important}
.sp-mtext .e-small{margin:0}
.sp-mtext p{font-size:14.5px!important}
.sp-mdetail{font-style:italic;color:var(--g6)}
@media (max-width:640px){.sp-moment{grid-template-columns:auto minmax(0,1fr)}.sp-mart{grid-column:2}.sp-mtext{grid-column:1/-1}}
.sp-hrow{padding:10px 0;border-top:1px solid var(--g3)}
.sp-hrow .e-small{margin:2px 0 0}

@media (prefers-reduced-motion:reduce){
  .sp-scene *,.sp-react *,.sp-reveal,.sp-col,.sp-gain span,.sp-twist,.sp-demo,.sp-rank.ro .sp-rtag,.sp-pilebox.pour .sp-c,.sp-boat,.sp-meter i,.sp-stamp{animation:none!important}
  .sp-boatpos{transition:none}
}
.sp-scenecard[hidden]{display:none}

/* ================= round two: the ducks carry the scene =================
   (stages from pond-stage.js, the two-step answer, the tiny-shop demo, the planned journey, the setup sheet) */

/* bigger, readable helper text everywhere in Same Pond */
.sp-page .sp-help,.sp-dlg .sp-help,#pondSetup .sp-help{font:500 14.5px/1.5 var(--font-sans);color:var(--g6)}
.sp-dlg .e-small{font-size:13.5px}

/* stages */
.sp-stage{display:block;width:100%;height:auto;max-height:340px;color:var(--fg);overflow:visible}
.st-bub text{pointer-events:none}
.st-npc{opacity:.92}
.st-pop{transform-box:fill-box;transform-origin:50% 100%;animation:stPop .55s var(--d,0s) cubic-bezier(.3,1.5,.5,1) both}
.st-fade{animation:stFade .6s var(--d,0s) ease-out both}
.st-slide{animation:stSlide .9s var(--d,0s) cubic-bezier(.3,1.1,.5,1) both}
.st-sit{animation:stSit .6s var(--d,0s) cubic-bezier(.3,1.4,.5,1) both}
.st-walk{animation:stWalk 1.8s var(--d,0s) ease-in-out both}
.st-out{animation:stOut .8s var(--d,0s) ease-out both}
.st-draw :is(circle,path){stroke-dasharray:100;stroke-dashoffset:100;animation:stDraw .8s var(--d,0s) ease-out forwards}
.st-draw{animation:none}
.st-rise{animation:stRise 2.6s var(--d,0s) ease-in infinite}
.st-dip{animation:stDip 2.8s ease-in-out infinite}
.st-swap{animation:stFade .5s ease-out both}
@keyframes stPop{from{transform:scale(0);opacity:0}}
@keyframes stFade{from{opacity:0}}
@keyframes stSlide{from{transform:translate(var(--sx,-60px),var(--sy,0));opacity:0}}
@keyframes stSit{from{transform:translateY(-40px);opacity:0}}
@keyframes stWalk{0%{transform:none}10%{transform:translate(calc(var(--wx) * .08),-3px)}20%{transform:translate(calc(var(--wx) * .2),0)}30%{transform:translate(calc(var(--wx) * .32),-3px)}40%{transform:translate(calc(var(--wx) * .45),0)}50%{transform:translate(calc(var(--wx) * .58),-3px)}60%{transform:translate(calc(var(--wx) * .7),0)}70%{transform:translate(calc(var(--wx) * .82),-3px)}100%{transform:translate(var(--wx),0)}}
@keyframes stOut{to{opacity:.3}}
@keyframes stDraw{to{stroke-dashoffset:0}}
@keyframes stRise{0%{transform:translateY(0);opacity:0}20%{opacity:.9}100%{transform:translateY(-34px);opacity:0}}
@keyframes stDip{0%,60%,100%{transform:translateY(0)}70%{transform:translateY(4px)}80%{transform:translateY(-1px)}}
.sp-scenecard .sp-stage{margin:-4px 0 0}

/* the entry demo */
#pondSetup .e-demo{min-width:0}
.sp-demo{max-width:600px;gap:14px}
.sp-demo .sp-stage{max-height:none;padding:8px 6px 0;border-radius:var(--r-panel);background:var(--surf2)}
.sp-demo-panel{display:flex;flex-direction:column;gap:12px}
.sp-demo-q{margin:0;font:700 clamp(19px,2vw,23px)/1.25 var(--font-sans);text-wrap:balance}
.sp-demo-res{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:14px;border:1px solid var(--g3);background:var(--bg)}
.sp-demo-res p{margin:0;font:500 16px/1.45 var(--font-sans)}
.sp-demo-res .e-small{margin:0;color:var(--g6)}
.sp-demo-res .zp-link{align-self:flex-start}
.sp-after.anim{animation:spFade .5s 1.1s both}
.sp-reveal.staged.anim .sp-after{animation:spFade .5s 2.6s both}
.sp-reveal:not(.staged).anim .sp-after{animation:spFade .5s .9s both}

/* choices with pictures: 2 x 2 for four, three across for three, stacked on phones */
.sp-opts.n4,.sp-opts.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.sp-opts.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:560px){.sp-opts.n4,.sp-opts.n3,.sp-opts.n2{grid-template-columns:1fr}}
.sp-opt{position:relative}
.sp-opt.big{min-height:76px;padding:10px 44px 10px 12px;font-size:16px}
.sp-opt .sp-thumb{width:76px;height:auto;flex:none;color:var(--fg);overflow:visible}
.sp-demo-opts .sp-thumb{width:62px}
.sp-tick{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--fg);color:var(--bg)}
.sp-tick svg{width:16px;height:16px}
.sp-opt.on .sp-thumb{color:var(--fg)}
@media (min-width:561px){.sp-opts.pics .sp-opt.big,.sp-demo-opts .sp-opt.big{flex-direction:column;align-items:flex-start;text-align:left;padding:12px 14px 14px}.sp-opts.pics .sp-thumb{width:96px}}

/* progress: your choice, your prediction, reveal */
.sp-progress{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;font:600 13.5px var(--font-sans);color:var(--g5)}
.sp-progress li{display:flex;align-items:center;gap:6px}
.sp-progress li+li::before{content:"→";margin-right:8px;color:var(--g4)}
.sp-progress span{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--g4);font:700 12px var(--font-mono)}
.sp-progress li.now{color:var(--fg)}
.sp-progress li.now span{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.sp-progress li.done{color:var(--g6)}
.sp-progress li.done svg{width:18px;height:18px;color:var(--fg)}
.sp-done{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 14px;border-radius:14px;background:var(--surf2);animation:spFade .35s both}
.sp-done .sp-donel{font:600 12.5px var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--g5)}
.sp-done .sp-thumb{width:54px;height:auto;color:var(--fg)}
.sp-done b{flex:1;min-width:0;font:700 16px/1.3 var(--font-sans)}
#spStep2{animation:spUnfold .45s cubic-bezier(.3,1.2,.5,1) both;transform-origin:top}

/* hand-over (one device): privacy first */
.sp-hand{gap:14px;padding:40px 18px 34px}
.sp-handduck{animation:spIdle 3s ease-in-out infinite}
.sp-handduck .pd svg,.sp-handduck svg{width:150px;height:auto}
.sp-handnote{font:600 17px/1.4 var(--font-sans)!important;color:var(--g6)}
.sp-hand .start{max-width:420px}
@keyframes spIdle{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(-2deg)}}

/* waiting (online) */
.sp-sealed{flex-wrap:wrap;justify-content:center;text-align:left}
.sp-raft{width:220px;max-width:60%;height:auto;color:var(--fg);overflow:hidden}
.sp-raft .sp-bob{animation:spBob 3.2s ease-in-out infinite}

/* reveal: the scene first, then what it means */
.sp-reveal.staged{animation:none}
.sp-what{font:700 clamp(21px,3vw,27px)/1.25 var(--font-sans)!important;letter-spacing:-.01em;text-wrap:balance}
.sp-plus{color:var(--fg);white-space:nowrap}
.sp-guess{color:var(--g5);font-size:14.5px}
.sp-why{font-size:15px!important;color:var(--g6)}
.sp-after{display:flex;flex-direction:column;gap:12px}
.sp-wait .pd{display:inline-block;vertical-align:middle}

/* the journey: names beside scores */
.sp-score span:not(.sp-coinic){font:600 14.5px var(--font-sans);color:var(--fg)}
.sp-isl.next{opacity:.78}
.sp-map{min-width:0}

/* setup: one scrolling sheet, the main button in a footer that never covers the last control */
.sp-dlg.sheet .gdialog-card{max-width:600px}
.sp-dlgfoot{padding:12px 20px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--g2);background:var(--bg);border-radius:0 0 20px 20px}
.sp-dlgfoot .start{margin-top:0}
.sp-dlgfoot .zp-err:empty{display:none}
.sp-dlgfoot .sp-help{margin:8px 0 0!important;font-size:13px!important}
@media (max-width:600px){.sp-dlg.sheet .gdialog-card{height:100dvh;max-height:100dvh;border-radius:0}.sp-dlg.sheet .gdialog-body{flex:1}.sp-dlgfoot{border-radius:0}}
.sp-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px}
.sp-pair .sp-me:has(.sp-builder){grid-column:1/-1}
@media (max-width:600px){.sp-pair{grid-template-columns:1fr}}
.sp-roundrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.sp-rounds{justify-content:flex-start;gap:8px}
.sp-rounds input{width:72px;min-height:46px;text-align:center;font:700 20px var(--font-mono);-moz-appearance:textfield}
.sp-rounds input::-webkit-inner-spin-button,.sp-rounds input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.sp-roundrow .e-small{margin:0}
.sp-depths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media (max-width:520px){.sp-depths{grid-template-columns:1fr}}
.sp-depth{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:10px 12px;border:1.5px solid var(--g3);border-radius:12px;background:var(--bg);color:var(--fg);text-align:left;cursor:pointer}
.sp-depth b{font:700 15px var(--font-sans)}
.sp-depth span{font:500 13px/1.35 var(--font-sans);color:var(--g6)}
.sp-depth.on{border:2px solid var(--fg);background:var(--surf3);color:var(--fg)}
.sp-depth:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.sp-fold{margin:14px 0 0;padding:12px 14px;border-radius:14px;background:var(--surf2)}
.sp-fold>summary{cursor:pointer;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font:700 15px var(--font-sans);color:var(--fg)}
.sp-fold>summary .e-small{margin:0;font-weight:500}
.sp-fold[open]>summary{margin-bottom:8px}
.sp-catpick .zp-link{margin-top:6px}
.sp-lobby .sp-box.zp-form .sp-fold{margin:0;padding:0;background:none}

@media (prefers-reduced-motion:reduce){
  .sp-stage *,.st-pop,.st-fade,.st-slide,.st-sit,.st-walk,.st-out,.st-draw :is(circle,path),.st-rise,.st-dip,.st-swap,.sp-after,.sp-done,#spStep2,.sp-handduck,.sp-raft *{animation:none!important}
  .st-draw :is(circle,path){stroke-dashoffset:0}
  .st-walk{transform:translate(var(--wx),0)}
  .st-out{opacity:.3}
  .st-rise{opacity:.6}
}
.sp-pair .gs-row{margin-top:0}
@media (max-width:600px){.sp-dlgfoot .sp-help{display:none}}
.sp-progress em{font-style:normal}
.sp-progress .sp-yr{font-style:normal}
@media (max-width:440px){.sp-progress .sp-yr{display:none}.sp-progress em{text-transform:capitalize}.sp-progress{gap:6px 10px}}
.sp-done{flex-direction:column;align-items:stretch;gap:6px}
.sp-donerow{display:flex;align-items:center;gap:12px}
.sp-donerow b{flex:1;min-width:0;font:700 16px/1.3 var(--font-sans)}
.sp-scores{display:flex;flex-wrap:wrap;gap:6px 16px}

/* ================= round three: nothing blinks out, the ducks lead ================= */
/* a redraw inside the same step keeps still: entrances play once, when the step first appears */
.sp-still .sp-done,.sp-still #spStep2,.sp-still .sp-reveal,.sp-still .sp-col,.sp-still .sp-after,.sp-still .sp-rank.ro .sp-rtag,.sp-still .sp-gain span,.sp-still .sp-twist,.sp-still .sp-sum,.sp-still .sp-sum *{animation:none!important}
/* after your own choice the opening scene folds away to a short reminder of the question */
@media (max-width:899px){
.sp-scenecard.compact{gap:6px;padding:12px 16px}
.sp-scenecard.compact .sp-stage,.sp-scenecard.compact .sp-scene,.sp-scenecard.compact .sp-tags,.sp-scenecard.compact .sp-more,.sp-scenecard.compact .sp-skipanim{display:none}
.sp-scenecard.compact .sp-prompt{font-size:17px!important;line-height:1.35!important;font-weight:600!important;color:var(--g6)}
}

/* ---------- the journey strip: islands in a pond, the boat moored in front of the current one ---------- */
.sp-mapwrap{padding:2px 4px;border:1px solid var(--g2)}
.sp-map{display:block;width:100%;height:auto;max-height:190px;color:var(--fg);overflow:visible}
/* a phone or a long journey: the route at a readable size, scrolled sideways (recentred on the boat when it moors) */
.sp-mapwrap.strip{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:none}
.sp-mapwrap.strip .sp-map{width:var(--mw);max-width:none;height:var(--mh);max-height:none}
.sp-mapwrap.open .sp-map{max-height:none}
.sp-isl.next{opacity:.78}
.sp-isl.now{opacity:1}
.sp-isl .sp-check{transform-box:fill-box;transform-origin:center;animation:spPop .5s .9s cubic-bezier(.3,1.6,.5,1) both}
.sp-wake{opacity:0;transition:opacity .4s}
.sp-boatpos.go .sp-wake{opacity:1}
.sp-boat{animation:spBob 3.6s ease-in-out infinite}
@keyframes spBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.2px)}}
.sp-topline{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.sp-round{font:700 16px/1.3 var(--font-sans);color:var(--fg)}
.sp-scores{display:flex;flex-wrap:wrap;gap:6px 18px;margin-left:auto}
.sp-score{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 4px;border-radius:999px;background:var(--surf2);transition:background .3s}
.sp-score .sp-sname{font:600 14.5px var(--font-sans);color:var(--fg);max-width:9em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-score .sp-coinic{display:inline-grid;width:17px;height:17px}
.sp-score .sp-coinic .sp-coin{width:17px;height:17px}
.sp-score b{font:700 16px var(--font-mono);color:var(--fg);min-width:1ch}
.sp-score.bump{background:var(--surf3)}
.sp-score.bump b{animation:spCount .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes spCount{40%{transform:scale(1.35)}}
.sp-mapbtn{font-size:14px}
.sp-flycoin{position:fixed;z-index:300;width:26px;height:26px;margin:-13px 0 0 -13px;pointer-events:none;transition:transform .7s cubic-bezier(.5,0,.3,1),opacity .7s ease-in}
.sp-flycoin .sp-coin{width:100%;height:100%}
@media (max-width:640px){.sp-scores{margin-left:0;width:100%}.sp-map{max-height:150px}}

/* ducks at rest: a blink now and then, the wing lifts once in a while (all of Same Pond's characters) */
.sp-game .pd-eye,.sp-lobby .pd-eye,.sp-hand .pd-eye{animation:spBlinkEye 5.5s infinite}
.sp-game .sp-actor:nth-of-type(2n) .pd-eye{animation-delay:1.7s}
@keyframes spBlinkEye{0%,95.5%,100%{transform:none}97%{transform:scaleY(.1)}}
.sp-lobby .sp-duo .pd-wing,.sp-hand .pd-wing{animation:spWing 7s 2s infinite}
@keyframes spWing{0%,88%,100%{transform:none}92%,96%{transform:rotate(-26deg)}}

/* ---------- the question: a little story in beats ---------- */
.sp-prompt-in{animation:spFade .5s 1s both}
.st-react .pd-eye{animation:stEyes .35s var(--d) both}
.st-react{transform-box:fill-box;transform-origin:50% 100%;animation:stJump .45s var(--d) ease-out both}
@keyframes stEyes{from{transform:none}to{transform:scale(1.6)}}
@keyframes stJump{0%{transform:none}40%{transform:translateY(-8px)}100%{transform:none}}
.st-npc{opacity:1}

/* ---------- the reveal: unlock, act, settle, results, gold ---------- */
.st-unlock{animation:stUnlock .8s .1s ease-in both}
.st-unlock .st-shackle{animation:stShackle .3s .1s ease-out both}
@keyframes stUnlock{0%,45%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-10px)}}
@keyframes stShackle{to{transform:translateY(-5px)}}
.st-sit{animation:stSit2 .6s var(--d,0s) cubic-bezier(.3,1.4,.5,1) both}
@keyframes stSit2{from{transform:translateY(-16px)}}
.st-flap .pd-wing{animation:stFlap .9s var(--d) both}
@keyframes stFlap{0%{transform:none}25%,75%{transform:rotate(-30deg)}50%{transform:rotate(-12deg)}100%{transform:rotate(-24deg)}}
.st-ring{transform-box:fill-box;transform-origin:50% 0;animation:stRing .7s var(--d) ease-in-out both}
@keyframes stRing{0%,100%{transform:none}20%{transform:rotate(18deg)}40%{transform:rotate(-16deg)}60%{transform:rotate(10deg)}80%{transform:rotate(-6deg)}}
.st-slip{animation:stSlip .6s var(--d) cubic-bezier(.3,1.3,.5,1) both}
@keyframes stSlip{from{transform:translateY(16px);opacity:0}}
.st-nod{transform-box:fill-box;transform-origin:50% 100%;animation:stNod .9s var(--d) ease-in-out both}
@keyframes stNod{0%,100%{transform:none}25%,75%{transform:rotate(-4deg)}50%{transform:rotate(3deg)}}
.st-hop{transform-box:fill-box;transform-origin:50% 100%;animation:stJump .5s var(--d) ease-out both}
.sp-skipanim{margin-left:auto;font-size:14px}
.sp-tags{align-items:center}

.sp-sums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:600px){.sp-sums{grid-template-columns:1fr}}
.sp-sum{display:flex;flex-direction:column;gap:10px;padding:14px 16px;border-radius:var(--r-panel);background:var(--surf2);border:1px solid var(--g2)}
.sp-sumhead{display:flex;align-items:center;gap:10px}
.sp-sumhead b{font:700 18px var(--font-sans)}
.sp-sumhead small{font:500 12.5px var(--font-mono);color:var(--g5)}
.sp-sum dl{margin:0;display:flex;flex-direction:column;gap:8px}
.sp-sumrow{display:grid;grid-template-columns:minmax(84px,auto) minmax(0,1fr);gap:4px 12px;align-items:baseline}
.sp-sumrow dt{font:600 13px var(--font-mono);letter-spacing:.02em;color:var(--g6)}
.sp-sumrow dd{margin:0;font:500 16px/1.4 var(--font-sans);position:relative}
.sp-sumrow dd b{font-weight:700}
.sp-sumres{margin:0;padding:10px 12px;border-radius:12px;background:var(--bg);font:600 15.5px/1.4 var(--font-sans)!important;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.sp-sumres.hit{border:1px solid var(--g3)}
.sp-sumres.miss{border:1.5px solid var(--g3);color:var(--g6)}
.sp-sumres.miss b{color:var(--fg)}
.sp-sumgold{display:inline-flex;align-items:center;gap:5px;font:700 15.5px var(--font-mono);color:var(--fg)}
.sp-sumgold .sp-coin{width:20px;height:20px}
.sp-lock{position:absolute;left:0;top:1px;color:var(--g5);opacity:0}
/* the order of it: both summaries are there at once, the choices unlock, then (after the act) the results */
.sp-reveal.anim .sp-sum{animation:spFade .35s calc(var(--i)*.08s) both}
.sp-reveal.anim .sp-lock{animation:spLockOff .6s calc(.15s + var(--i)*.1s) both}
.sp-reveal.anim .sp-lock .sp-shackle{animation:stShackle .25s calc(.15s + var(--i)*.1s) both}
.sp-reveal.anim .sp-open{animation:spFade .4s calc(.6s + var(--i)*.1s) both}
.sp-reveal.anim .sp-sumres{animation:spFade .45s calc(1.2s + var(--i)*.15s) both}
.sp-reveal.staged.anim .sp-open{animation-delay:calc(.7s + var(--i)*.1s)}
.sp-reveal.staged.anim .sp-sumres{animation-delay:calc(2.5s + var(--i)*.2s)}
.sp-reveal.staged.anim .sp-after{animation:spFade .5s 2.2s both}
@keyframes spLockOff{0%{opacity:1}60%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6px)}}
.sp-sum .sp-ans,.sp-sum .sp-rank.ro,.sp-sum .sp-piles.ro{margin-top:4px}
.sp-sumrow dd:has(.sp-rank,.sp-piles,.sp-meter){grid-column:1/-1}

.sp-talkcard{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border-radius:var(--r-panel);border:1px solid var(--g3);background:var(--bg)}
.sp-talkhead{display:flex;align-items:center;gap:10px;font:600 16px/1.4 var(--font-sans)!important}
.sp-talkcard ul{margin:0;padding:0 0 0 20px;display:flex;flex-direction:column;gap:6px}
.sp-talkcard li{font:500 16px/1.45 var(--font-sans)}
.sp-talkcard .e-small{margin:0;color:var(--g6)}

/* skip: everything lands where it ends */
.sp-skip .sp-stage *,.sp-skip .st-pop,.sp-skip .st-fade,.sp-skip .st-slide,.sp-skip .st-sit,.sp-skip .st-walk,.sp-skip .st-out,.sp-skip .st-draw :is(circle,path),.sp-skip .st-unlock,.sp-skip .sp-reveal *,.sp-skip .sp-after{animation:none!important}
.sp-skip .st-draw :is(circle,path){stroke-dashoffset:0}
.sp-skip .st-walk{transform:translate(var(--wx),0)}
.sp-skip .st-out{opacity:.3}
.sp-skip .st-unlock,.sp-skip .sp-lock{opacity:0}

/* ---------- answer cards that feel like decisions ---------- */
.sp-opt.big{min-height:84px;font:700 17px/1.3 var(--font-sans);border-width:2px}
.sp-opt.on{border-width:2px;border-color:var(--fg)}
.sp-opt .sp-thumb{width:84px}
@media (min-width:561px){.sp-opts.pics .sp-thumb{width:112px}}
@media (max-width:560px){.sp-opt{font-size:16.5px;min-height:56px}}
/* on phones the main action stays near the thumb, above the safe area, without covering the last option */
@media (max-width:899px){
  .sp-game [data-p="panel"] .sp-acts:has([data-do="seal"]),.sp-game [data-p="panel"] .sp-acts:has([data-do="tostep2"]){position:sticky;bottom:var(--sp-kb,0px);z-index:5;margin:0 -4px;padding:10px 4px calc(10px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--g2)}
}

/* ---------- desktop: the scene beside the question; the reveal across the whole stage ---------- */
@media (min-width:900px){
  .sp-page.sp-game{max-width:1120px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-areas:"top top" "banner banner" "scene panel";gap:18px 22px;align-items:start}
  .sp-game>[data-p="top"]{grid-area:top}
  .sp-game>[data-p="banner"]{grid-area:banner}
  .sp-game>[data-p="banner"]:empty{display:none}
  .sp-game>[data-p="scene"]{grid-area:scene;position:sticky;top:calc(var(--header-h,72px) + 12px)}
  .sp-game>[data-p="panel"]{grid-area:panel;display:flex;flex-direction:column;gap:14px}
  .sp-game.wide{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "banner" "scene" "panel"}
  .sp-game.wide>[data-p="scene"]{position:static}
  .sp-game.wide .sp-stage{max-height:420px}
  .sp-game .sp-map{max-height:150px}
  .sp-game .sp-opts.pics.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sp-game.wide>[data-p="panel"]{max-width:none}
}

/* ---------- contrast: the same hierarchy in both themes ---------- */
.sp-scenecard{border:1px solid var(--g2)}
.sp-guess{color:var(--g6)}
.sp-stage .st-bub path{stroke-opacity:.85}
@media (prefers-reduced-motion:reduce){
  .sp-game .pd-eye,.sp-lobby .pd-eye,.sp-hand .pd-eye,.sp-lobby .sp-duo .pd-wing,.sp-hand .pd-wing,.st-react,.st-react .pd-eye,.st-flap .pd-wing,.st-ring,.st-slip,.st-nod,.st-hop,.st-unlock,.st-unlock *,.sp-prompt-in,.sp-reveal *,.sp-isl .sp-check,.sp-boat{animation:none!important}
  .st-unlock,.sp-lock{opacity:0}
  .sp-boatpos,.sp-flycoin{transition:none}
}

/* ---------- lobby: invite first, then the two ducks ---------- */
.sp-invite2{display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:var(--r-panel);background:var(--surf2);border:1px solid var(--g2)}
.sp-bigcode{display:flex;flex-direction:column;gap:2px}
.sp-bigcode span{font:600 12.5px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--g6)}
.sp-bigcode b{font:700 clamp(44px,10vw,64px)/1 var(--font-mono);letter-spacing:.18em;user-select:all;-webkit-user-select:all}
.sp-invite2 .sp-fold{margin:0;background:var(--bg)}
.sp-invite2 .zp-qr{max-width:200px;margin:8px 0 0}
.sp-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:18px 12px 14px;border-radius:var(--r-panel);background:var(--surf2);border:1px solid var(--g2)}
.sp-duoone{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;min-width:0}
.sp-duoone .pd-xl{width:min(150px,36vw);height:auto;aspect-ratio:68/82;animation:spIdle 3.4s ease-in-out infinite}
.sp-duoone:nth-child(2) .pd-xl{animation-delay:1.1s}
.sp-duoone b{font:700 19px/1.25 var(--font-sans);max-width:100%;overflow-wrap:anywhere}
.sp-duoone small{font:500 13px var(--font-mono);color:var(--g6)}
.sp-duoone.ghost b{color:var(--g5)}
.sp-duoone.arrive .pd-xl{animation:spArrive .9s cubic-bezier(.3,1.3,.5,1) both,spIdle 3.4s 1s ease-in-out infinite}
.sp-splash{position:absolute;left:50%;top:min(150px,36vw);width:120px;margin-left:-60px;color:var(--fg);animation:spSplash .9s .35s ease-out both}
@keyframes spArrive{from{transform:translateY(-40px) scale(.85);opacity:0}60%{transform:translateY(4px);opacity:1}}
@keyframes spSplash{from{opacity:0;transform:scaleX(.4)}50%{opacity:1}to{opacity:0;transform:scaleX(1.2)}}
.sp-setbox>summary{justify-content:space-between;flex-wrap:nowrap}
.sp-setbox>summary::-webkit-details-marker{display:none}
.sp-setbox>summary{list-style:none}
.sp-leaverow{display:flex;justify-content:space-between;gap:12px;margin-top:18px;padding-top:14px;border-top:1px solid var(--g2)}
.sp-leaverow .danger{color:var(--g6)}
@media (prefers-reduced-motion:reduce){.sp-duoone .pd-xl,.sp-splash{animation:none!important}}
.sp-sec{margin:18px 0 2px;font:700 13px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--g6)}
.sp-form>.sp-sec:first-child{margin-top:0}
.sp-dlg .gdialog-body{scroll-padding-bottom:24px}
.sp-sum dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 14px;align-items:baseline}
.sp-sumrow{display:contents}
.sp-sumrow dd:has(.sp-rank,.sp-piles,.sp-meter){grid-column:1/-1}
.sp-reveal.staged.anim>.sp-what{animation:spFade .5s 2.1s both}
.sp-reveal:not(.staged).anim>.sp-what{animation:spFade .5s .8s both}
@media (min-width:900px){.sp-game.wide .sp-stage{max-height:300px}.sp-game.wide .sp-prompt{font-size:21px!important}.sp-game .sp-map{max-height:140px}}
.sp-raft{width:260px;max-width:70%}

/* ---------- the scrapbook on screen ---------- */
.sp-recap .sp-total{gap:8px 14px}
.sp-moment{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:16px;align-items:start;padding:16px;border-radius:var(--r-panel);background:var(--surf2);border:2px solid transparent;cursor:default}
.sp-moment.on{border-color:var(--fg)}
.sp-moment.hidden{opacity:.55}
.sp-mart .sp-stage,.sp-mart .sp-scene{max-height:none;width:100%}
.sp-mkick{font:600 12px var(--font-mono)!important;letter-spacing:.06em;text-transform:uppercase;color:var(--g6)}
.sp-mtext h3{font:700 19px/1.3 var(--font-sans)!important}
.sp-mq summary{cursor:pointer;font:600 14px var(--font-sans);color:var(--g6)}
.sp-mq p{margin-top:4px!important;font-size:15px!important}
.sp-mwhos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sp-mwho{display:flex;flex-direction:column;gap:3px}
.sp-mwho b{font:700 15.5px var(--font-sans)}
.sp-mwho>span{font:500 15px/1.4 var(--font-sans)}
.sp-mwho small{font:500 13.5px/1.4 var(--font-sans);color:var(--g6)}
.sp-mbtns{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:4px}
.sp-mpick{display:inline-flex;align-items:center;gap:8px;font:600 14.5px var(--font-sans);cursor:pointer}
.sp-mpick input,.sp-hrow input{width:20px;height:20px;accent-color:var(--fg);flex:none}
@media (max-width:700px){.sp-moment{grid-template-columns:1fr}}
@media (max-width:420px){.sp-mwhos{grid-template-columns:1fr}}
.sp-allrounds .sp-hrow{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--g3);cursor:pointer;font:500 15px/1.45 var(--font-sans)}
.sp-allrounds .sp-hrow .e-small{display:block;margin-top:2px}
.sp-bookprev{max-height:65vh;overflow:auto;border-radius:12px;background:var(--surf2);padding:8px}
.sp-bookprev img{display:block;width:100%;height:auto;border-radius:8px}
.sp-replay .sp-stage{max-height:none}
.sp-replayq{margin-top:10px!important;font:600 16px/1.4 var(--font-sans)!important}
.sp-mwho b{text-align:left;unicode-bidi:isolate}

/* scrapbook: who read the other duck best, and before → after memories */
.sp-readers{margin:16px 0;padding:16px;border-radius:18px;border:1px solid var(--g3);background:var(--surf2);text-align:center}
.sp-readers h3{margin:0 0 8px;font:700 13px/1.2 var(--font-mono)!important;letter-spacing:.08em;text-transform:uppercase;color:var(--g6)}
.sp-readducks{display:flex;align-items:flex-end;justify-content:center;gap:14px}
.sp-readduck{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;max-width:40%}
.sp-readduck b{font:700 16px/1.25 var(--font-sans);overflow-wrap:anywhere}
.sp-readduck small{font:600 13px var(--font-mono);color:var(--g6)}
.sp-readduck.win .pd{animation:spIdle 3.4s ease-in-out infinite}
.sp-readmid{align-self:center;width:30px;height:30px}.sp-readmid svg{width:100%;height:100%}
.sp-readhead{margin:10px 0 6px;font:700 19px/1.35 var(--font-sans)!important}
.sp-readers ul{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:4px;font:500 15.5px/1.45 var(--font-sans)}
.sp-ba{display:block}.sp-ba small{display:inline-block;min-width:52px;font:600 11.5px var(--font-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--g6)}
.sp-mdetail{margin:6px 0;padding:8px 12px;border-radius:12px;background:var(--surf2);font:600 14.5px/1.45 var(--font-sans)!important}
.sp-mdetail small{display:block;font:700 11px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--g6);margin-bottom:2px}
@media (prefers-reduced-motion:reduce){.sp-readduck.win .pd{animation:none}}

.sp-creator{margin-top:12px}

/* ---------- the prediction reveal: one panel per direction ---------- */
.sp-preds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:899px){.sp-preds{grid-template-columns:1fr}}
.sp-pp{container-type:inline-size;display:flex;flex-direction:column;gap:12px;padding:14px 16px;border-radius:var(--r-panel);background:var(--surf2);border:1px solid var(--g2)}
.sp-pph{display:flex;align-items:center;gap:10px;margin:0}
.sp-pphw{display:flex;flex-direction:column;gap:1px;min-width:0}
.sp-pphby{font:700 16px/1.25 var(--font-sans);color:var(--fg)}
.sp-pphfor{font:500 13.5px/1.25 var(--font-sans);color:var(--g6)}
.sp-pph bdi{unicode-bidi:isolate}
.sp-ppcards{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;align-items:stretch}
.sp-ppc{position:relative;display:flex;flex-direction:column;gap:6px;min-width:0;padding:2px 14px 2px 0}
.sp-ppc small{font:600 11.5px/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--g6);white-space:normal;overflow:visible;text-overflow:clip}
.sp-ppc.actual{padding:2px 0 2px 14px;border-left:1px solid var(--g3)}
/* one rule for every round: short answers side by side; long ones stack (close together, with a divider) whenever
   the panel itself is too narrow for two readable columns */
@container (max-width:460px){.sp-ppcards.stack{grid-template-columns:1fr}.sp-ppcards.stack .sp-ppc.guess{padding:0 0 10px}.sp-ppcards.stack .sp-ppc.actual{padding:10px 0 0;border-left:none;border-top:1px solid var(--g3)}
  .sp-ppcards.stack .sp-ppick{flex-direction:row;text-align:left;gap:12px}.sp-ppcards.stack .sp-ppick .sp-oicon{width:48px;height:48px;flex:none}.sp-ppcards.stack .sp-ppnote{justify-content:flex-start;text-align:left;padding:2px 0}}
.sp-ppbody{display:flex;flex-direction:column;gap:6px;flex:1}
.sp-ppick{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font:700 19px/1.25 var(--font-sans);color:var(--fg)}
.sp-ppick .sp-oicon,.sp-ppick .sp-ricon{width:60px;height:60px;color:var(--fg)}
.sp-ppick .sp-thumb{width:100%;max-width:120px;height:auto}
.sp-ppnumw{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:2px;padding:6px 0;text-align:center}
.sp-ppnum{display:block;font:700 clamp(30px,5vw,40px)/1.05 var(--font-sans);color:var(--fg)}
.sp-ppunit{font:600 14px/1.3 var(--font-sans);color:var(--g6)}
.sp-ppord{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.sp-ppord li{display:flex;align-items:center;gap:6px;min-height:40px;padding:2px 6px;border-radius:8px;font:600 14.5px/1.25 var(--font-sans);color:var(--fg)}
.sp-ppord li b{flex:none;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;border:1.5px solid var(--g4);font:700 12px var(--font-mono)}
.sp-ppord li .sp-ricon{width:26px;height:26px;flex:none}
.sp-ppord li span{min-width:0;overflow-wrap:normal;word-break:normal;hyphens:auto}
@media (max-width:520px){.sp-ppord li{font-size:13px;gap:4px;padding:2px 4px}.sp-ppord li .sp-ricon{width:20px;height:20px}.sp-ppcards:has(.sp-pplinks) .sp-ppc{padding:10px 6px}}
.sp-ppord li.hit b{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.sp-ppcards:has(.sp-pplinks){grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);gap:0}
.sp-ppcards:has(.sp-pplinks) .sp-ppc.guess{grid-column:1;grid-row:1}
.sp-pplinks{grid-row:1;grid-column:2;width:100%;height:100%;align-self:stretch;overflow:visible;color:var(--fg)}
.sp-ppcards:has(.sp-pplinks) .sp-ppc.actual{grid-column:3;border-left:none;padding-left:0}.sp-ppcards:has(.sp-pplinks) .sp-ppc.guess{padding-right:0}
.sp-ppscale{position:relative;padding:22px 0 0;margin:0 4px}
.sp-ppbar{display:block;height:6px;margin:0 4%;border-radius:3px;background:var(--g3)}
.sp-ppspan{position:absolute;top:22px;height:6px;background:var(--g5);border-radius:3px}
.sp-ppmark{position:absolute;top:-6px;transform:translateX(-50%)}
.sp-ppmark.g{top:-6px}.sp-ppmark.a{top:30px}
.sp-ppscale .sp-lohi{margin-top:30px;display:flex;justify-content:space-between;gap:8px;font:500 12.5px/1.3 var(--font-sans);color:var(--g6)}
.sp-ppscale .sp-lohi b{color:var(--fg);font-size:14px}
.sp-ppres{margin:0;padding-top:10px;border-top:1px solid var(--g2);display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font:500 15px/1.45 var(--font-sans);color:var(--fg)}
.sp-ppres>b{font:600 15.5px/1.3 var(--font-sans)}
.sp-ppdot{color:var(--g5)}
.sp-ppgold{display:inline-flex;align-items:center;gap:4px;font:700 15px var(--font-mono);color:var(--fg)}.sp-ppgold svg{width:17px;height:17px}
.sp-ppwhy{flex-basis:100%;font-size:13.5px;color:var(--g6)}
.sp-ppok{flex:none;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--zp-gold);color:var(--bg)}
.sp-ppok svg{width:13px;height:13px;stroke-width:3.2}
.sp-ppcare .sp-ppok{width:16px;height:16px;margin-right:5px;vertical-align:-3px}.sp-ppcare .sp-ppok svg{width:10px;height:10px}
.sp-seal{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-radius:13px;background:var(--surf3);color:var(--g6);font:600 14px var(--font-sans)}
.sp-reveal.anim .sp-seal{display:flex;animation:spSealOff .45s calc(var(--d) + 1.1s) both}
/* the prediction first, a short pause, then the actual answer is uncovered and the result lands */
.sp-pp{--d:calc(var(--i)*1.5s + .3s)}
.sp-reveal.staged .sp-pp{--d:calc(var(--i)*1.5s + 2.1s)}
.sp-reveal.anim .sp-pp{animation:spFade .4s var(--d) both}
.sp-reveal.anim .sp-ppbody{animation:spFlipIn .45s calc(var(--d) + 1.35s) both}
.sp-reveal.anim .sp-ppres{animation:spFade .4s calc(var(--d) + 1.8s) both}
.sp-reveal.anim .sp-pp.hit .sp-ppc.guess{animation:spTogetherL .5s calc(var(--d) + 1.8s) both}
.sp-reveal.anim .sp-pp.hit .sp-ppc.actual{animation:spTogetherR .5s calc(var(--d) + 1.8s) both}
.sp-reveal.anim .sp-ppok{animation:spPopIn .4s calc(var(--d) + 1.95s) cubic-bezier(.3,1.6,.5,1) both}
.sp-reveal.anim .sp-pp.hit .sp-pph .pd,.sp-reveal.anim .sp-pp.close .sp-pph .pd{animation:spHop .7s calc(var(--d) + 1.85s) ease-out both}
.sp-reveal.anim .sp-ppcards.stack .sp-ppc{animation:none}
.sp-reveal.anim .sp-pp.miss .sp-pph .pd{transform-origin:50% 90%;animation:spTilt 1.6s calc(var(--d) + 1.85s) ease-in-out both}
.sp-reveal.anim .sp-rtable{animation:spFade .4s 3.9s both}
@keyframes spSealOff{0%{opacity:1;transform:none}100%{opacity:0;transform:rotateY(90deg);visibility:hidden}}
@keyframes spFlipIn{from{opacity:0;transform:rotateY(-90deg)}to{opacity:1;transform:none}}
@keyframes spTogetherL{0%{transform:none}50%{transform:translateX(10px)}100%{transform:translateX(2px)}}
@keyframes spTogetherR{0%{transform:none}50%{transform:translateX(-10px)}100%{transform:translateX(-2px)}}
@keyframes spPopIn{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:none}}
@keyframes spHop{0%,100%{transform:none}30%{transform:translateY(-8px) scaleY(1.04)}55%{transform:translateY(0) scale(1.05,.94)}75%{transform:translateY(-3px)}}
@keyframes spTilt{0%,100%{transform:none}25%,75%{transform:rotate(-13deg)}}
@keyframes spWobble{0%,100%{transform:none}30%{transform:rotate(-8deg)}60%{transform:rotate(6deg)}}
@media (prefers-reduced-motion:reduce){.sp-reveal .sp-pp,.sp-reveal .sp-pp *,.sp-reveal .sp-rtable{animation:none!important}.sp-reveal .sp-seal{display:none!important}}
.sp-still .sp-pp,.sp-still .sp-pp *,.sp-still .sp-rtable{animation:none!important}.sp-still .sp-seal{display:none!important}
.sp-rtable{padding:12px 16px;border-radius:var(--r-panel);background:var(--surf2)}
.sp-rtable summary{cursor:pointer;font:600 15px var(--font-sans);color:var(--fg)}
.sp-rtable table{width:100%;margin-top:10px;border-collapse:collapse;font:500 15px/1.3 var(--font-sans)}
.sp-rtable th,.sp-rtable td{padding:6px 8px;border-top:1px solid var(--g3);text-align:center}
.sp-rtable thead th{border-top:none;font:600 13px var(--font-sans);color:var(--g6)}
.sp-rtable tbody th{text-align:left;font-weight:600}
.sp-rtable tbody th>span{display:flex;align-items:center;gap:8px}
.sp-rtable thead th:first-child{text-align:left}
.sp-rtable td{width:22%;white-space:nowrap}
.sp-rtable .sp-ricon{width:24px;height:24px;flex:none}
.sp-rtable tr.hit td{color:var(--fg);font-weight:700}
.sp-rtable .sp-rhit{display:inline-grid;vertical-align:middle;width:18px;height:18px;margin-left:4px}
.sp-rtable .sp-rhit svg{width:16px;height:16px;vertical-align:-3px;color:var(--zp-gold)}
.sp-opt .sp-oicon{width:40px;height:40px;flex:none;color:var(--fg)}

/* gold piles inside a half-width card on a phone: one row per pile so labels never clip */
@media (max-width:560px){.sp-ppc .sp-piles.ro{display:flex;flex-direction:column;gap:5px}
  .sp-ppc .sp-piles.ro .sp-pile{display:grid;grid-template-columns:38px 18px minmax(0,1fr);align-items:center;gap:5px;padding:4px 5px;text-align:left}
  .sp-ppc .sp-pilebox{max-width:38px}.sp-ppc .sp-pilen{font-size:16px}.sp-ppc .sp-pilel{font-size:12px;min-height:0}}
.sp-kc{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--surf3);font:700 30px/1 var(--font-sans);color:var(--fg)}
.sp-ppcare{margin:4px 0 0;font:500 13.5px/1.35 var(--font-sans);color:var(--g6);text-align:center}.sp-ppcare b{color:var(--fg)}
.sp-ppkept{margin:0;text-align:center;font:700 16px var(--font-sans)}
.sp-ppc .sp-journey{display:flex;flex-direction:column;align-items:stretch;gap:4px}.sp-ppc .sp-journey .sp-arrow{transform:rotate(90deg);align-self:center}
.sp-chg{width:100%;border-collapse:collapse;font:600 13.5px/1.3 var(--font-sans)}
.sp-chg thead th{white-space:nowrap;font:600 11px var(--font-sans);color:var(--g6);text-transform:uppercase;letter-spacing:.04em;padding:0 2px 4px}
.sp-chg td,.sp-chg tbody th{padding:5px 2px;border-top:1px solid var(--g3);text-align:center;vertical-align:middle}
.sp-chg tbody th{text-align:left;font-weight:600}.sp-chg tbody th>*{vertical-align:middle}.sp-chg .sp-ricon{width:18px;height:18px;margin-right:4px}
.sp-chg td{font:700 15px var(--font-mono);white-space:nowrap}.sp-chg td[aria-hidden]{color:var(--g5);font-weight:400}
.sp-chg tr.moved td:last-child{color:var(--fg);text-decoration:underline 2px currentColor;text-underline-offset:3px}
.sp-chgpick{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}.sp-chgpick small{display:block;font:600 11.5px var(--font-sans);color:var(--g6);text-transform:uppercase}.sp-chgpick b{font:700 15px/1.3 var(--font-sans)}
.sp-ppkept{margin:4px 0 0;text-align:center;font:700 16px var(--font-sans)}

/* typed answers */
.sp-textans{position:relative}
.sp-textin{width:100%;font:600 18px/1.3 var(--font-sans);padding:14px 64px 14px 14px}
.sp-textcount{position:absolute;right:12px;top:50%;transform:translateY(-50%);font:500 12px var(--font-mono);color:var(--g5)}
.sp-ppnote{margin:0;flex:1;display:flex;align-items:center;justify-content:center;text-align:center;padding:4px;font:700 21px/1.3 var(--font-sans);color:var(--fg);overflow-wrap:anywhere}
/* how close was a typed prediction: four large choices, nothing chosen at first, then Award coins. Gold only on the
   coins themselves; a chosen card is marked by a solid border and a darker surface. */
.sp-award{flex-basis:100%;display:flex;flex-direction:column;gap:10px;margin-top:2px}
.sp-award-who{display:inline-flex;align-items:center;gap:6px;font:600 14px var(--font-sans);color:var(--g6)}
.sp-award-who b{color:var(--fg)}
.sp-award-q{font:700 17px/1.3 var(--font-sans);color:var(--fg)}
.sp-award-opts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@media (max-width:420px){.sp-award-opts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sp-award-opt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:96px;padding:10px 6px;border:1.5px solid var(--g3);border-radius:14px;background:var(--bg);color:var(--fg);font:600 14px/1.25 var(--font-sans);text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.sp-award-opt:hover{border-color:var(--g5)}
.sp-award-opt.on{border:2px solid var(--fg);background:var(--surf3);color:var(--fg)}
.sp-award-opt:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.sp-award-n{font:700 26px/1 var(--font-mono);color:var(--fg)}
.sp-award-c{display:flex;justify-content:center;gap:2px;height:16px}
.sp-award-c svg{width:16px;height:16px}
.sp-award-c i{width:14px;height:14px;margin-top:1px;border:1.5px dashed var(--g4);border-radius:50%}
.sp-award-l{color:var(--g6)}
.sp-award-opt.on .sp-award-l{color:var(--fg)}
.sp-award-go{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.sp-award-go .start{margin:0;min-height:48px}
.sp-award-go .e-small{color:var(--g6)}
.sp-gave{font:600 15.5px/1.3 var(--font-sans)}
.sp-still .sp-award *{animation:none!important}

/* the site header stays opaque over the game, and anything scrolled into view clears it */
header{background:var(--bg)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.sp-preds,.sp-scene,.sp-stage,.sp-prompt,.sp-pp{scroll-margin-top:88px}
.sp-skew{top:auto;bottom:0;transform:none}.sp-skew .zp-link{color:inherit;margin-left:6px}
/* “I don’t remember” under an estimate, and the note when a choice has run out of new questions */
.sp-unsure{width:100%;justify-content:center;margin-top:12px;min-height:48px}
.sp-est-off .sp-unsure{margin-top:0}
.sp-fresh{margin:0 0 12px}
.sp-fresh .zp-link{font-size:inherit}
.sp-ppick .sp-ppown{display:block;font:400 14px/1.35 var(--font-sans);color:var(--g6);margin-top:4px}