/* ARCADE specials (Round 14): the bonus screen before the RSVP, one of three
   per invitation. Rule one: the whole thing fits one phone screen (390x664):
   heading, the lit tube and its result together, no scrolling. */
.sec.sp{padding-bottom:22px}
.sec.sp.has-ti{padding-top:62px}
.sp .hd{margin:0 0 12px}
.sp .tag{margin-bottom:4px}
.sp .hd h2{font-size:36px;line-height:1.12;white-space:nowrap}
.sp .hd h2.wrap{white-space:normal}
.sp .lead{margin:6px auto 0;max-width:33ch;font-size:16px;line-height:1.5}

/* the cabinet: a molded bezel around a curved tube that throws its own light */
.spc{position:relative;width:min(100%,400px);margin:0 auto;padding:10px;border-radius:24px;isolation:isolate;
  background:linear-gradient(160deg,color-mix(in srgb,var(--cab1) 88%,#fff) 0%,var(--cab1) 36%,var(--cab2) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -2px 0 rgba(0,0,0,.6),0 26px 50px -24px rgba(0,0,0,.9),0 0 0 1px #000,0 0 36px -8px var(--spg,var(--ga2))}
.spc::before{content:"";position:absolute;inset:5px;border-radius:20px;pointer-events:none;box-shadow:inset 0 0 18px var(--spg,var(--ga3))}
.sps{position:absolute;left:-26%;right:-26%;top:-12%;bottom:-18%;z-index:-1;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,currentColor,transparent);color:var(--accent);opacity:.22}
.spt{position:relative;aspect-ratio:144/160;border-radius:16px/18px;overflow:hidden;background:#020104;
  box-shadow:0 0 0 3px #000,0 0 0 4px rgba(255,255,255,.06);
  touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:pointer}
.sp-b .spt{aspect-ratio:144/96;touch-action:manipulation}
.spt canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:auto}
.spt .gl{position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(70% 30% at 28% 6%,rgba(255,255,255,.14),rgba(255,255,255,0) 70%),linear-gradient(115deg,rgba(255,255,255,0) 58%,rgba(255,255,255,.045) 64%,rgba(255,255,255,0) 72%),radial-gradient(120% 100% at 50% 50%,transparent 62%,rgba(0,0,0,.62) 100%);
  box-shadow:inset 0 0 24px rgba(0,0,0,.9),inset 0 0 3px rgba(0,0,0,.9)}
.spt:focus-visible{outline:2px solid var(--c2);outline-offset:6px}

/* one short line under the tube: what happens with the guest's result */
.sp-st{min-height:1.45em;margin:10px auto 0;max-width:34ch;font-size:15px;line-height:1.45;color:var(--dim)}
.sp-st b{color:var(--core3);font-weight:700}
.sp-st svg{display:inline-block;width:15px;height:15px;margin-inline-end:6px;vertical-align:-2px;fill:none;stroke:var(--c3);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* achievements: the chosen medal, read in real type under the tube */
.sp-bi{margin:10px auto 0;max-width:30ch}
.sp-bn{margin:0;font:800 23px/1.25 var(--f-disp);color:var(--core2);text-shadow:0 0 .16em var(--gc),0 0 .5em var(--gc2)}
.sp-bd{min-height:3em;margin:4px auto 0;font-size:16px;line-height:1.5;color:var(--dim)}
.sp-bb{margin-top:10px;min-height:50px;padding:0 26px;font-size:17px}
.sp-bb[aria-pressed="true"]{background:transparent;color:var(--core3);box-shadow:inset 0 0 0 2px var(--c3),0 0 22px -4px var(--gy2)}
.sp-bb.off{visibility:hidden}
.sp-bb svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sp-bb:not([aria-pressed="true"]) svg{display:none}
.sp-b .sp-st{margin-top:6px}
.sp-b .lead{font-size:15px}

/* Latin and Cyrillic arcade labels may track; Hebrew and Arabic never do */
:lang(he) .sp .hd h2,:lang(ar) .sp .hd h2{letter-spacing:0}

@media (min-width:760px){
  .sec.sp{padding-bottom:44px}
  .sec.sp.has-ti{padding-top:104px}
  .sp .hd h2{font-size:52px}
  .sp .lead{font-size:18px}
  .spc{width:430px;padding:12px;border-radius:28px}
  .sp-b .spc{width:480px}
}
@media (prefers-reduced-motion:reduce){
  .sp-bb{transition:none}
}