/* PUZZLE: the special section, three variants in the glass world (special.js).
   One phone screen each: the heading, the glass and the thing to touch fit
   100svh at 390x664. The stage takes the height that is left (--st, set by JS). */
.sp{padding:14px 16px 22px}
.sp .w{max-width:440px}
.sp .h{margin:0 0 4px;font-size:clamp(30px,8.6vw,50px)}
.sp-sub{margin:0 auto;max-width:34ch;min-height:1.5em;font:400 17px/1.5 var(--f-body);color:var(--dim);text-wrap:balance}
.sp-sub.res span{display:inline-block;font:var(--f-dispw) clamp(22px,6vw,28px)/1.25 var(--f-disp);color:var(--acct)}
.sp-note{margin:8px auto 0;max-width:36ch;font:400 15px/1.45 var(--f-body);color:var(--dim);text-wrap:balance}
.sp-lnk{font:500 15px/1.3 var(--f-ui);color:var(--cream);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line);min-height:40px;padding:0 4px}
.sp-st{position:relative;width:100%;height:var(--st,300px);margin:12px auto 0;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.sp-probe{position:absolute;top:0;width:0;height:100vh;height:100svh;visibility:hidden;pointer-events:none}
.sp-shake{animation:spShake .42s cubic-bezier(.36,.07,.19,.97)}
@keyframes spShake{20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
.sp-hand{position:absolute;left:0;top:0;width:58px;height:auto;opacity:0;visibility:hidden;pointer-events:none;z-index:3;will-change:transform}

/* ============ A: the missing piece ============ */
.spa-st{cursor:pointer}
.spa-fb{position:absolute;inset:0;display:none;background:center/cover no-repeat;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 30'%3E%3Cpath d='M16 29C5 21.5 0 15.5 0 9A8.5 8.5 0 0 1 16 5a8.5 8.5 0 0 1 16 4c0 6.5-5 12.5-16 20z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 30'%3E%3Cpath d='M16 29C5 21.5 0 15.5 0 9A8.5 8.5 0 0 1 16 5a8.5 8.5 0 0 1 16 4c0 6.5-5 12.5-16 20z'/%3E%3C/svg%3E") center/contain no-repeat}
.spa-nogl .spa-fb{display:block}
.spa-slot{position:relative;min-height:92px;margin:12px auto 0;max-width:420px}
.spa-row{display:flex;align-items:center;gap:8px;padding:5px;border-radius:999px;background:var(--pane);box-shadow:inset 0 0 0 1px var(--line),inset 0 1px 0 rgba(255,255,255,.08);transition:box-shadow .3s var(--ease)}
.spa-row:focus-within{box-shadow:inset 0 0 0 1.5px var(--acct)}
.spa-row{position:relative}
/* game on: a light runs once along the glass of the input */
.spa-row::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.2) 50%,transparent 65%) no-repeat;background-size:250% 100%;background-position:130% 0}
.sp-lit .spa-row::after{animation:spLit 1.1s cubic-bezier(.45,0,.2,1) forwards}
@keyframes spLit{0%{opacity:1;background-position:130% 0}100%{opacity:1;background-position:-30% 0}}
.spa-tx{flex:1;min-width:0;height:46px;padding:0 14px;border:0;background:none;outline:none;font:400 17px/1.3 var(--f-body);color:var(--cream);text-align:start;-webkit-appearance:none;appearance:none}
.spa-tx::placeholder{color:var(--dim);opacity:.85}
.spa-go{flex:0 0 auto;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--acc);color:var(--onacc);opacity:.5;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.2);transition:opacity .3s var(--ease),transform .35s var(--ease)}
.spa-go.on{opacity:1}
.spa-go:active{transform:scale(.92)}
.spa-go svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.spa-out{text-align:center}
.spa-q{margin:2px auto 0;max-width:30ch;font:var(--f-dispw) 21px/1.4 var(--f-disp);color:var(--cream);text-wrap:balance;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.spa-q::before{content:'\201C'}
.spa-q::after{content:'\201D'}
html[dir="rtl"] .spa-q::before,html[dir="rtl"] .spa-q::after{content:'"'}
.spa-out .sp-note{margin-top:4px}
.spa-out .sp-note span{color:var(--acct)}

/* ============ B: how we fit ============ */
.spb-st{cursor:pointer}
.spb-fb{position:absolute;inset:0;display:none;justify-content:center;gap:10px}
.spb-fb i{width:34%;max-width:130px;height:100%;background:center/200% 100% no-repeat;border-radius:3px}
.spb-fb i:first-child{background-position:0 50%}
.spb-fb i:last-child{background-position:100% 50%}
.spb-nogl .spb-fb{display:flex}
.spb-ps{display:flex;flex-direction:column;gap:8px;max-width:400px;margin:14px auto 0}
.spb-p{position:relative;display:flex;width:100%;height:58px;border-radius:10px;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.spb-h{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:4px 12px;min-width:0}
.spb-h small{font:500 12.5px/1.2 var(--f-ui);color:var(--acct)}
.spb-h b{font:500 15.5px/1.25 var(--f-body);color:var(--cream);overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* with WebGL the words are etched in the glass; the DOM text stays for screen readers */
.sp-gl .spb-h small,.sp-gl .spb-h b{color:transparent}
.spb-nogl .spb-p{background:linear-gradient(165deg,rgba(239,228,210,.12),rgba(239,228,210,.03));box-shadow:inset 0 0 0 1px var(--line)}
.spb-nogl .spb-p.on{box-shadow:inset 0 0 0 1.5px var(--acct)}

/* ============ C: photo shards quiz ============ */
.spc-fb{position:absolute;left:18px;right:18px;top:0;bottom:14px;display:none;background:center/cover no-repeat;border-radius:3px}
.spc-nogl .spc-fb{display:block}
.spc-bar{position:absolute;left:50%;bottom:0;width:132px;height:2px;margin-left:-66px;border-radius:2px;background:var(--line);overflow:hidden}
.spc-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--cream));transform:scaleX(0);transform-origin:0 50%}
.spc-slot{position:relative;height:78px;margin:12px auto 0;max-width:420px}
.spc-opts{display:flex;justify-content:center;align-items:center;gap:10px;height:100%}
.spc-o{position:relative;width:98px;height:58px;border-radius:10px;font:var(--f-dispw) 26px/1 var(--f-disp);color:var(--cream);background-size:cover;background-position:center}
.spc-opts.ph .spc-o{width:106px;height:74px}
.sp-gl .spc-o span{color:transparent}
.spc-nogl .spc-o{box-shadow:inset 0 0 0 1px var(--line);background-color:var(--pane)}
.spc-nogl .spc-o.ok{background-color:var(--acc);color:var(--onacc)}
.spc-nogl .spc-o.no{opacity:.4}
.spc-res{display:flex;align-items:center;justify-content:center;gap:14px;height:100%}
.spc-r{margin:0;font:400 17px/1.35 var(--f-body);color:var(--dim);text-align:center}
.spc-r b{display:block;font:var(--f-dispw) 24px/1.15 var(--f-disp);color:var(--acct)}
.spc-r b.big{font-size:30px;color:var(--cream)}
.spc-nx{min-height:50px;padding:10px 20px;font-size:16px}

@media (min-width:600px){
  .sp{padding:26px 32px 48px}
  .spa-slot{margin-top:16px}
}
@media (prefers-reduced-motion:reduce){.sp-shake,.sp-lit .spa-row::after{animation:none}}