/* starmap: the special section (round 14). One phone screen per variant:
   the heading, the interaction and its result live together, nothing changes off screen.
   Sizes of the stages are set by special.js from the small viewport height (svh). */
.sec.sp{padding-block:18px 20px}
/* on a phone the top of the one screen belongs to the player and the language switch:
   the small atlas label steps aside and the heading starts under them */
@media (max-width:759px){.sec.sp{padding-top:56px}.sp .sh .tg{display:none}}
.sp>.w::before{inset:-6px 0}
.sp .sh{margin-bottom:4px;gap:8px}
.sp h2{font-size:clamp(30px,8.6vw,50px);line-height:1.1}
.sp-line{max-width:24em;margin:0 auto;font:400 16.5px/1.5 var(--f-body);color:var(--mute)}
.sp-play{position:relative}
.sp-stage{position:relative;margin:4px auto 0;touch-action:pan-y}
.sp-stage canvas{position:absolute;left:0;top:0}
.sp-fx{position:absolute;left:0;top:0;pointer-events:none;z-index:5}
.sp-zone{position:relative;display:grid;place-items:center;margin-top:6px}
.sp-zone>*{grid-area:1/1;width:100%}
.sp-zone>.off{visibility:hidden;pointer-events:none}

/* the field and its button, one pill */
.sp-row{position:relative;display:flex;align-items:center;gap:6px;max-width:420px;margin:0 auto;padding:5px;border-radius:999px;background:color-mix(in srgb,var(--deep) 80%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 38%,transparent),0 16px 34px -20px #000}
.sp-row:focus-within{box-shadow:inset 0 0 0 1.5px var(--accent),0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent),0 16px 34px -20px #000}
.sp-in{flex:1;min-width:0;height:48px;padding:0 14px;border:0;border-radius:999px;background:none;color:var(--ink);font:400 17px/1.2 var(--f-body);text-align:center;-webkit-appearance:none;appearance:none}
.sp-in:focus{outline:none}
.sp-in::placeholder{color:color-mix(in srgb,var(--ink) 50%,transparent)}
.sp-in.gone{color:transparent!important;-webkit-text-fill-color:transparent}
.sp-row.shake{animation:spShk .5s var(--ex)}
@keyframes spShk{20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
.sp-go{min-height:48px;padding:0 20px;gap:9px;font-size:16.5px;flex:none;box-shadow:0 10px 26px -14px var(--glow),inset 0 1px 0 rgba(255,255,255,.35)}
.sp-go svg{width:14px;height:14px;fill:currentColor;flex:none}
.sp-stack{display:flex;flex-direction:column;align-items:center;gap:10px}
.sp-stack .sp-row{width:100%;padding:4px}
.sp-stack .sp-in{height:50px}

/* the result, in the place of the field */
.sp-ok{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center}
.sp-ok b{display:block;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:var(--dw) 22px/1.3 var(--f-disp);color:var(--c3)}
html[data-dark="0"] .sp-ok b{color:var(--accent)}
.sp-ok span{display:block;max-width:24em;font:400 15px/1.45 var(--f-body);color:var(--mute)}
.sp-again{display:inline-flex;align-items:center;gap:8px;min-height:40px;margin-top:4px;padding:0 18px;border-radius:999px;font:600 15px/1 var(--f-body);color:var(--ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 55%,transparent);transition:box-shadow .4s var(--ex),transform .4s var(--ex)}
.sp-again:hover{box-shadow:inset 0 0 0 1.5px var(--accent)}
.sp-again:active{transform:scale(.96)}
.sp-again svg{width:11px;height:11px;fill:var(--accent)}

/* a light palette: the stage is a window into the night, an object on the page */
.sp.day .sp-win{position:relative;border-radius:28px;overflow:hidden;background:#070b1c;box-shadow:0 30px 60px -34px rgba(40,20,30,.55),inset 0 0 0 1px rgba(255,255,255,.06)}

/* c: the chart of the night they met */
.sp-c .sp-stage{display:grid;place-items:center;margin-top:2px}
.sp-hz{position:absolute;left:50%;bottom:-6px;width:100vw;max-width:1100px;height:56%;transform:translateX(-50%);pointer-events:none;z-index:0;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.sp-hz>i{position:absolute;inset:0;background-repeat:no-repeat;transition:opacity 1.6s var(--ex)}
.sp-hz .tlv{background-image:url(/assets/wave/starmap/skytlv.webp);background-size:cover;background-position:50% 100%;-webkit-mask:linear-gradient(transparent 30%,#000 62%,#000 84%,transparent);mask:linear-gradient(transparent 30%,#000 62%,#000 84%,transparent);opacity:0}
.sp-hz .des{background-image:url(/assets/wave/starmap/desert-land.webp);background-size:cover;background-position:50% 100%;-webkit-mask:linear-gradient(transparent 25%,#000 55%,#000 82%,transparent);mask:linear-gradient(transparent 25%,#000 55%,#000 82%,transparent)}
.sp-hz .glw{background:radial-gradient(60% 50% at 50% 92%,rgba(226,150,92,.3),transparent 70%)}
.sp-hz .sea{background-image:url(/assets/wave/starmap/sea-land.webp);background-size:cover;background-position:50% 100%;-webkit-mask:linear-gradient(transparent 30%,#000 60%,#000 84%,transparent);mask:linear-gradient(transparent 30%,#000 60%,#000 84%,transparent);opacity:0}
.sp-c.back .sp-hz .sea{opacity:.9}.sp-c.back.tlv .sp-hz .sea{opacity:0}.sp-c.back.tlv .sp-hz .tlv{opacity:.95}.sp-c.back .sp-hz .des{opacity:0}
.sp.day .sp-hz{display:none}
.sp-chart{position:relative;z-index:1;touch-action:pan-y;cursor:grab}
.sp-sw{position:relative;z-index:2;display:inline-flex;gap:4px;max-width:100%;padding:5px;margin-top:8px;border-radius:99px;background:color-mix(in srgb,var(--deep) 74%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent),0 14px 30px -18px #000}
html[data-dark="0"] .sp-sw{background:color-mix(in srgb,var(--bg) 70%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 55%,transparent),0 14px 30px -20px rgba(60,30,40,.4)}
.sp-sw button{position:relative;min-height:46px;padding:0 18px;border-radius:99px;font:700 15.5px/1.15 var(--f-body);color:var(--mute);transition:color .45s var(--ex)}
.sp-sw button[aria-pressed="true"]{color:var(--onAcc)}
.sp-pill{position:absolute;left:0;top:5px;bottom:5px;border-radius:99px;background:var(--accent);box-shadow:0 10px 26px -10px var(--glow),inset 0 1px 0 rgba(255,255,255,.35);z-index:-1;will-change:transform}
.sp-hint{position:absolute;inset:-4px;border-radius:99px;box-shadow:0 0 0 1.5px var(--accent);opacity:0;pointer-events:none}
.sp.live .sp-hint{animation:spHint 2.4s var(--ex) infinite}
@keyframes spHint{0%{opacity:.8;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.1,1.4)}}
.sp-rd{margin-top:8px}
.sp-dt{min-height:1.1em;display:inline-flex;align-items:flex-end;direction:ltr;font:600 38px/1 var(--f-lat);color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
html[data-dark="1"] .sp-dt,html:not([data-dark]) .sp-dt{color:#fbf4e4;text-shadow:0 0 24px rgba(226,192,127,.25)}
.sp-dt .dg{position:relative;display:inline-block;height:1.1em;overflow:hidden;width:.56em;-webkit-mask:linear-gradient(transparent,#000 22%,#000 78%,transparent);mask:linear-gradient(transparent,#000 22%,#000 78%,transparent)}
.sp-dt .dg>span{position:absolute;left:0;right:0;top:0;padding-top:.05em;display:flex;flex-direction:column;will-change:transform}
.sp-dt .dg>span>i{display:block;height:1em;font-style:normal;text-align:center}
.sp-dt .dt{width:.28em;text-align:center;color:var(--accent)}
.sp-pl{min-height:1.45em;margin-top:4px;font:500 16px/1.45 var(--f-body);color:var(--ink)}
.sp-pl i{display:inline-block;width:4px;height:4px;margin:0 9px;border-radius:50%;background:var(--accent);vertical-align:middle}
.sp-co{min-height:1.6em;margin-top:2px;font:500 10.5px/1.6 var(--f-mono);letter-spacing:.18em;color:var(--accent);direction:ltr;text-transform:uppercase}
.sp-nt{max-width:23em;min-height:3em;margin:6px auto 0;font:500 16px/1.5 var(--f-disp);color:var(--c3)}
html[data-dark="0"] .sp-nt{color:var(--ink)}
html:lang(en) .sp-nt,html:lang(ru) .sp-nt{font-size:18px;line-height:1.4}

@media (min-width:760px){
  .sec.sp{padding-block:36px 40px}
  .sp-line{font-size:18px}
}

/* round 15: "game on". A slit of gold light opens across the stage, a star ignites, the control
   rises with a sweep of light (special.js gameOn). Transforms and opacity only */
.sp-on{position:absolute;left:0;right:0;top:50%;height:0;z-index:6;pointer-events:none}
.sp-on .sl{position:absolute;left:4%;right:4%;top:-1px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 80%,#fff) 30%,#fff8e6 50%,color-mix(in srgb,var(--accent) 80%,#fff) 70%,transparent);opacity:0;will-change:transform,opacity}
.sp-on .wa{position:absolute;left:-10%;right:-10%;top:-130px;height:260px;background:radial-gradient(50% 50% at 50% 50%,rgba(255,240,206,.5),color-mix(in srgb,var(--accent) 22%,transparent) 45%,transparent 72%);opacity:0;will-change:transform,opacity}
.sp-on .fl{position:absolute;left:50%;top:0;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;background:radial-gradient(circle,#fff 0,rgba(255,244,214,.85) 8%,color-mix(in srgb,var(--accent) 40%,transparent) 26%,transparent 62%);opacity:0;will-change:transform,opacity}
.sp-sweepw{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:3}
.sp-sweep{position:absolute;top:0;bottom:0;left:0;width:38%;pointer-events:none;z-index:3;background:linear-gradient(100deg,transparent,rgba(255,246,222,.32) 50%,transparent);will-change:transform}
/* round 17: B at night, the sea has no edges and breathes; the moon's light swells and settles */
.sp-b canvas.sp-sea{animation:spSwell 22s cubic-bezier(.45,0,.55,1) infinite alternate;will-change:transform}
.sp-b .sp-mglow{position:absolute;z-index:0;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(255,226,176,.34),rgba(255,214,150,.1) 38%,rgba(255,214,150,0) 70%);animation:spMoon 7s cubic-bezier(.45,0,.55,1) infinite alternate}
.sp-b:not(.live) canvas.sp-sea,.sp-b:not(.live) .sp-mglow{animation-play-state:paused}
@keyframes spSwell{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.05) translate3d(-1.4%,-1%,0)}}
@keyframes spMoon{from{opacity:.55}to{opacity:1}}

/* ---------- round 20: the scroll hint (life.js) ----------
   a real hand rests a fingertip on the night and draws a short line of starlight upwards */
.sm-hint{position:fixed;left:0;top:0;z-index:140;width:120px;height:146px;pointer-events:none;opacity:0;transition:opacity .7s cubic-bezier(.4,0,.2,1)}
.sm-hint.on{opacity:1}
.sm-hint.off{opacity:0;transition-duration:.4s}
.sm-hint .sh-pl{position:absolute;inset:-6px -18px;border-radius:50%;background:radial-gradient(closest-side,rgba(3,6,16,.58),rgba(3,6,16,.32) 55%,rgba(3,6,16,0))}
.sm-hint .sh-mv{position:absolute;left:41px;top:68px;width:40px;animation:shMv 2.6s cubic-bezier(.45,0,.3,1) 2 both}
.sm-hint img{display:block;width:40px;height:auto;-webkit-mask-image:linear-gradient(180deg,#000 48%,transparent 76%);mask-image:linear-gradient(180deg,#000 48%,transparent 76%)}
.sm-hint .sh-dot{position:absolute;left:12px;top:-3px;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle,#fffaf0 0,#ffe3a8 35%,rgba(255,214,140,0) 72%);box-shadow:0 0 14px 4px rgba(255,214,140,.45);opacity:0;animation:shDot 2.6s linear 2 both}
.sm-hint .sh-tr{position:absolute;left:58.5px;top:8px;width:3px;height:30px;border-radius:2px;background:linear-gradient(0deg,rgba(226,192,127,0),rgba(242,206,134,.7) 55%,#fffaf0);box-shadow:0 0 10px rgba(255,214,140,.55);transform-origin:50% 100%;transform:scaleY(0);animation:shTr 2.6s cubic-bezier(.3,0,.2,1) 2 both}
.sm-hint .sh-sp{position:absolute;left:51px;top:-4px;width:18px;height:18px;opacity:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C13 8.5 15.5 11 24 12C15.5 13 13 15.5 12 24C11 15.5 8.5 13 0 12C8.5 11 11 8.5 12 0Z' fill='%23fff6e0'/%3E%3C/svg%3E") center/contain no-repeat;animation:shSp 2.6s ease-out 2 both}
.sm-hint .sh-sp.s2{left:68px;top:30px;width:10px;height:10px;animation-name:shSp2}
@keyframes shMv{0%{transform:translateY(22px) scale(1.04);opacity:0}14%{transform:translateY(0) scale(1);opacity:1}20%{transform:translateY(0) scale(.96);opacity:1}62%{transform:translateY(-34px) scale(.96);opacity:1}74%{transform:translateY(-38px) scale(1);opacity:0}100%{transform:translateY(-38px);opacity:0}}
@keyframes shDot{0%,16%{opacity:0;transform:scale(.4)}22%{opacity:1;transform:scale(1)}62%{opacity:1;transform:scale(1)}72%,100%{opacity:0;transform:scale(1.4)}}
@keyframes shTr{0%,58%{transform:translateY(0) scaleY(0);opacity:1}72%{transform:translateY(-6px) scaleY(1);opacity:1}90%,100%{transform:translateY(-14px) scaleY(.25);opacity:0}}
@keyframes shSp{0%,68%{opacity:0;transform:translateY(0) scale(0)}78%{opacity:1;transform:translateY(-5px) scale(1)}94%,100%{opacity:0;transform:translateY(-9px) scale(.4)}}
@keyframes shSp2{0%,56%{opacity:0;transform:scale(0)}64%{opacity:.9;transform:scale(1)}80%,100%{opacity:0;transform:scale(.3)}}
.sm-hint.still .sh-mv,.sm-hint.still .sh-dot,.sm-hint.still .sh-tr,.sm-hint.still .sh-sp{animation:none}
.sm-hint.still .sh-mv{transform:translateY(-17px)}.sm-hint.still .sh-tr{transform:scaleY(0)}.sm-hint.still .sh-dot{opacity:1}
html.sm-hinting .h-cue{opacity:0!important;transition:opacity .3s!important}

/* ---------- round 21: B picks a ready wish (chips) or opens the field for the guest's own ----------
   The chips and the field share one grid cell, so switching never moves the page */
.sp-pick{display:grid;width:100%;max-width:440px;margin:0 auto}
.sp-pick>*{grid-area:1/1;min-width:0}
.sp-pick>.off{visibility:hidden;pointer-events:none}
.sp-pick .sp-own{align-self:center;width:100%;padding:4px}
.sp-chips{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:3px 18px 5px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent);mask:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent)}
.sp-chips::-webkit-scrollbar{display:none}
.sp-r{display:flex;gap:8px;width:max-content}
.sp-r+.sp-r{margin-top:8px;padding-inline-start:26px}
.sp-chip{position:relative;display:inline-flex;align-items:center;gap:9px;min-height:42px;padding:0 17px;border-radius:999px;white-space:nowrap;font:500 15px/1.2 var(--f-body);color:var(--ink);
  background:color-mix(in srgb,var(--deep) 72%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 32%,transparent);
  transition:box-shadow .4s var(--ex),background-color .4s var(--ex),color .4s var(--ex),transform .25s var(--ex);-webkit-tap-highlight-color:transparent}
.sp-chip:active{transform:scale(.96)}
.sp-chip>i{width:7px;height:7px;flex:none;border-radius:50%;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 70%,transparent);transition:background-color .4s var(--ex),box-shadow .4s var(--ex)}
.sp-chip[aria-checked="true"]{color:var(--c3);background:color-mix(in srgb,var(--accent) 20%,var(--deep));box-shadow:inset 0 0 0 1.5px var(--accent),0 0 0 4px color-mix(in srgb,var(--accent) 13%,transparent)}
.sp-chip[aria-checked="true"]>i{background:var(--accent);box-shadow:0 0 10px 2px color-mix(in srgb,var(--accent) 60%,transparent)}
.sp-chip.gone span{color:transparent}
.sp-wr{color:var(--accent);background:none;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 60%,transparent)}
.sp-wr svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
html[data-dark="0"] .sp-chip{color:var(--ink);background:color-mix(in srgb,var(--bg) 60%,#fff)}
html[data-dark="0"] .sp-chip[aria-checked="true"]{color:var(--ink);background:color-mix(in srgb,var(--accent) 16%,#fff)}
html[data-dark="0"] .sp-wr{color:var(--accent);background:none}
.sp-back{flex:none;display:grid;place-items:center;width:44px;height:44px;margin-inline-end:2px;border-radius:50%;color:var(--accent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent)}
.sp-back svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.sp-b .sp-go{transition:opacity .4s var(--ex)}
.sp-b:not(.sp-has) .sp-stack:not(:has(.sp-chips.off)) .sp-go{opacity:.62}