/* neocast.us/play: Start from scratch, the game that maps your life (Martin, Oct 29 2026).
   The landing's paper and glow, V15's kit (white cards with plum shadows, glass panels, pills, gradient stamps and
   meters, the glossy You orb, the Controls toggles, the Rewind ranking card), Manrope only, one gradient accent.
   Desktop: the person's map on the left, the question on the right. Phones: the map is a band on top. */

body.play{overflow:hidden;height:100dvh}
.play .bar{background:rgba(246,243,240,.72)}
.pl-save{height:42px;padding:0 18px;font-size:14.5px;gap:8px}
.pl-save .dot{width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 3px rgba(228,9,207,.12)}
.pl-save[hidden]{display:none!important}

.pl{position:fixed;left:0;right:0;bottom:0;top:var(--bar);display:grid;grid-template-columns:minmax(380px,42%) 1fr}
/* ---------- the map panel ---------- */
.pl-map{position:relative;overflow:hidden;isolation:isolate}
.pl-map::after{content:"";position:absolute;inset:0 0 0 auto;width:1px;background:linear-gradient(180deg,rgba(24,24,24,0),rgba(24,24,24,.08) 20%,rgba(24,24,24,.08) 80%,rgba(24,24,24,0))}
.pl-map-in{position:absolute;inset:0}
.pl-map-in canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.pl-map-in .poster{position:absolute;inset:8% 6%;width:88%;height:84%;object-fit:contain;opacity:.55;filter:saturate(.4)}
.pl-labels{position:absolute;inset:0;pointer-events:none}
.pl-lab{position:absolute;left:0;top:0;white-space:nowrap;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);
  padding:0 11px;height:26px;line-height:26px;border-radius:999px;background:rgba(255,255,255,.9);border:1px solid #fff;box-shadow:0 8px 18px -10px rgba(60,6,60,.4);
  opacity:0;transition:opacity 300ms ease;will-change:transform}
.pl-lab.on{opacity:1}
/* gradient under a border: sized to the border box, never tiled (no violet sliver at the left edge) */
.pl-lab.hot{background:var(--acc);background-origin:border-box;background-clip:border-box;background-repeat:no-repeat;color:#fff;border-color:rgba(255,255,255,.5)}
.pl-you{position:absolute;left:0;top:0;transform:translate(-50%,-50%);font-size:clamp(18px,2.2vw,30px);font-weight:800;letter-spacing:-.02em;color:#fff;
  text-shadow:0 2px 14px rgba(120,0,90,.45);pointer-events:none;opacity:0;transition:opacity 400ms ease}
.pl-you.on{opacity:1}
.pl-think{position:absolute;left:0;top:0;transform:translate(-50%,-50%);width:10px;height:10px;pointer-events:none}
.pl-think i{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--acc);opacity:0}
html.motion .pl-map.thinking .pl-think i{animation:pl-think 1.1s var(--ease-out) infinite}
.pl-map.thinking .pl-think i:nth-child(2){animation-delay:.18s}.pl-map.thinking .pl-think i:nth-child(3){animation-delay:.36s}
@keyframes pl-think{0%{opacity:0;transform:translate(0,0) scale(.6)}30%{opacity:1}100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(1)}}

.pl-meter{position:absolute;left:clamp(16px,2.4vw,36px);right:clamp(16px,2.4vw,36px);bottom:clamp(16px,3vh,32px);display:flex;align-items:flex-end;gap:16px;pointer-events:none}
.pl-meter-n{font-size:clamp(34px,3.4vw,52px);font-weight:800;letter-spacing:-.05em;line-height:.9;font-variant-numeric:tabular-nums;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding:.08em .04em .14em;margin:-.08em -.04em -.14em}
.pl-meter-r{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;padding-bottom:4px}
.pl-meter-l{font-size:13px;font-weight:750;color:var(--mut);letter-spacing:.01em}
.pl-meter-b{position:relative;height:8px;border-radius:8px;background:rgba(24,24,24,.08);overflow:hidden}
.pl-meter-b i{position:absolute;inset:0 auto 0 0;width:0;border-radius:inherit;background:var(--grad);transition:width 700ms var(--ease-expo)}
html.motion .pl-meter-b i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0));transform:translateX(-100%);animation:pl-shim 2.4s ease-in-out infinite}
@keyframes pl-shim{to{transform:translateX(100%)}}

/* ---------- the stage ---------- */
.pl-stage{position:relative;overflow:hidden auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.pl-stage::-webkit-scrollbar{display:none}
.pl-hud{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:14px;padding:20px clamp(20px,4vw,64px) 0;min-height:56px}
.pl-hud::before{content:'';position:absolute;inset:0 0 -14px;z-index:-1;opacity:0;background:rgba(246,243,240,.8);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);-webkit-mask-image:linear-gradient(#000 calc(100% - 14px),transparent);mask-image:linear-gradient(#000 calc(100% - 14px),transparent);pointer-events:none}
.pl-stage.scrolled .pl-hud::before{opacity:1}
.pl-dots{display:flex;gap:6px}
.pl-dots i{width:22px;height:5px;border-radius:5px;background:rgba(24,24,24,.1);transition:background 300ms ease,width 300ms var(--ease-out)}
.pl-dots i.on{background:var(--grad);width:34px}
.pl-dots i.done{background:rgba(228,9,207,.35)}
.pl-lane{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px 0 6px;border-radius:999px;background:rgba(255,255,255,.85);box-shadow:0 8px 20px -12px rgba(60,6,60,.35);font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);opacity:0;transform:translateY(-4px);transition:opacity 300ms ease,transform 300ms var(--ease-out)}
.pl-lane.on{opacity:1;transform:none}
.pl-lane .gly{width:22px;height:22px;border-radius:50%}
.pl-count{margin-left:auto;font-size:13px;font-weight:750;color:var(--mut);font-variant-numeric:tabular-nums}

.pl-card{position:relative;max-width:820px;margin:0 auto;padding:clamp(18px,3.4vh,40px) clamp(20px,4vw,64px) 120px;perspective:2200px}
.pl-in{transform-origin:50% 0}
html.motion .pl-in.enter{animation:pl-swing 560ms var(--ease-expo) both}
html.motion .pl-in.leave{animation:pl-leave 260ms cubic-bezier(.55,0,1,.45) both;pointer-events:none}
@keyframes pl-swing{from{opacity:0;transform:translateY(90px) rotateX(16deg) scale(.92)}60%{opacity:1}to{opacity:1;transform:none}}
@keyframes pl-leave{to{opacity:0;transform:translateY(-40px) rotateX(-8deg) scale(.97)}}

.pl-eyebrow{margin:0 0 12px;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.pl-eyebrow.g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.pl-q:focus,.it-name:focus,.pl-q:focus-visible,.it-name:focus-visible{outline:none}
.pl-q{margin:0;font-size:clamp(30px,min(3.5vw,5.6vh),58px);font-weight:800;letter-spacing:-.045em;line-height:1.04;text-wrap:balance}
.pl-q .gt{padding:.1em .05em .2em;margin:-.1em -.05em -.2em}
.pl-sub{margin:14px 0 0;font-size:clamp(15.5px,1.2vw,18px);font-weight:620;color:var(--mut);line-height:1.45;max-width:46ch}
.pl-body{margin-top:clamp(24px,4.4vh,48px)}
.pl-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin-top:28px}
.pl-foot .meta{font-size:14.5px;font-weight:700;color:var(--mut);font-variant-numeric:tabular-nums}
.pl-foot .btn.pri{margin-left:auto}
.btn.ghost{background:transparent;border-color:rgba(24,24,24,.12);box-shadow:none}
.pl-keys{display:none;margin-top:18px;font-size:12.5px;font-weight:700;color:var(--quiet)}
@media (hover:hover) and (pointer:fine){ .pl-keys{display:block} }
.pl-keys kbd{font:inherit;display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;margin:0 2px;border-radius:6px;background:rgba(24,24,24,.06);color:var(--ink-2)}

/* images: 3D emoji, official app icons (one rounded-square mask), glyph spheres, artwork */
.ic{display:block;flex:none;object-fit:contain}
.ic.app{border-radius:22.5%;box-shadow:0 10px 24px -10px rgba(24,24,24,.45),0 0 0 1px rgba(24,24,24,.06);background-repeat:no-repeat}
.ic.gly{border-radius:50%;background-repeat:no-repeat;box-shadow:0 10px 22px -12px rgba(60,6,60,.45)}
.ic.art{object-fit:cover}

/* this or that: two big cards */
.tt{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,24px)}
.tt-o{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:clamp(200px,34vh,320px);padding:28px 18px 24px;
  border-radius:30px;background:#fff;border:1.5px solid rgba(255,255,255,.95);box-shadow:var(--sh-float);cursor:pointer;transform-style:preserve-3d;
  transition:transform 220ms var(--ease-out),box-shadow 260ms ease;overflow:hidden}
.tt-o::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 26%,rgba(255,255,255,0) 70%,rgba(255,255,255,.18) 100%);z-index:2}
.tt-o .bg{position:absolute;inset:0;opacity:.55;background:radial-gradient(60% 55% at 50% 42%,var(--tint,rgba(253,144,19,.16)),rgba(255,255,255,0) 70%)}
.tt-o .ic{position:relative;width:clamp(96px,11vw,150px);height:clamp(96px,11vw,150px);filter:drop-shadow(0 18px 22px rgba(60,6,60,.22));transition:transform 320ms var(--ease-out)}
.tt-o .ic.app{width:clamp(84px,8vw,118px);height:clamp(84px,8vw,118px)}
.tt-o b{position:relative;font-size:clamp(20px,1.8vw,26px);font-weight:780;letter-spacing:-.03em;text-align:center}
.tt-o:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){ .tt-o:hover .ic{transform:translateY(-6px) scale(1.05)} }
.tt-o.sel{box-shadow:0 0 0 3px #fff,0 0 0 5.5px #E409CF,var(--sh-acc)}
.tt-x{display:flex;justify-content:center;gap:10px;margin-top:18px}

/* chips and answer pills */
.chip{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border-radius:999px;border:0;background:rgba(24,24,24,.06);font-size:15px;font-weight:720;color:var(--ink);cursor:pointer;transition:background 160ms ease,transform 140ms var(--ease-out)}
.chip:hover{background:rgba(24,24,24,.1)}
.chip:active{transform:scale(.97)}
.ans{display:grid;gap:12px}
.ans-row{display:grid;grid-template-columns:repeat(var(--n,3),1fr);gap:12px}
.ans-col{display:grid;gap:10px;max-width:420px}
.ans-col .pill{justify-content:space-between;padding:0 18px 0 24px}
.ans-new{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;margin-top:4px;max-width:520px}
.ans-new .lbl{font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--quiet);margin-right:4px}
.pill{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:58px;padding:0 20px;border-radius:999px;border:1.5px solid rgba(24,24,24,.10);
  background:#fff;font-size:16.5px;font-weight:760;letter-spacing:-.01em;color:var(--ink);cursor:pointer;box-shadow:0 10px 24px -16px rgba(60,6,60,.32);
  transition:transform 140ms var(--ease-out),box-shadow 200ms ease,background 200ms ease,color 200ms ease,border-color 200ms ease;text-align:center;line-height:1.15}
.pill:active{transform:scale(.97)}
.pill.love{color:#fff;background:var(--acc);background-origin:border-box;background-clip:border-box;background-repeat:no-repeat;border-color:rgba(255,255,255,.4);box-shadow:var(--sh-acc),inset 0 1px 0 rgba(255,255,255,.35)}
@media (hover:hover) and (pointer:fine){
  .pill:hover{box-shadow:0 16px 30px -16px rgba(60,6,60,.42)}
  .pill.no:hover{border-color:rgba(227,52,52,.45);color:#c42b2b}
}
.pill.no.sel{background:#FDECEC;border-color:rgba(227,52,52,.5);color:#c42b2b}
.pill.sel:not(.no):not(.love){box-shadow:0 0 0 3px #fff,0 0 0 5px #E409CF}
.pill.sm{min-height:44px;font-size:14.5px;padding:0 16px;font-weight:720}
.pill .k{font-size:11px;font-weight:800;color:var(--quiet);border-radius:5px;padding:1px 5px;background:rgba(24,24,24,.06)}
.pill.love .k{color:rgba(255,255,255,.85);background:rgba(255,255,255,.18)}

/* react: an item card */
.it{display:grid;grid-template-columns:minmax(200px,300px) 1fr;gap:clamp(20px,3vw,40px);align-items:center}
.it-card{position:relative;aspect-ratio:3/4;border-radius:30px;background:#fff;box-shadow:var(--sh-float);overflow:hidden;border:1.5px solid #fff;touch-action:pan-y;transition:transform 260ms var(--ease-out)}
.it-card .ic.art{position:absolute;inset:0;width:100%;height:100%}
.it-card.emo{display:flex;align-items:center;justify-content:center;background:radial-gradient(70% 60% at 50% 40%,var(--tint,rgba(253,49,85,.14)),#fff 75%)}
.it-card.emo .ic{width:62%;height:auto;filter:drop-shadow(0 22px 26px rgba(60,6,60,.24))}
.it-card .kind{position:absolute;left:14px;top:14px;display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:rgba(255,255,255,.88)}
.it-card .cr{position:absolute;right:10px;bottom:8px;font-size:10px;font-weight:650;color:rgba(255,255,255,.85);text-shadow:0 1px 3px rgba(0,0,0,.5);max-width:80%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.it-card .stampx{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) rotate(-10deg) scale(.6);opacity:0;padding:0 18px;height:44px;line-height:44px;border-radius:999px;font-size:15px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fff;transition:opacity 150ms ease,transform 220ms var(--ease-out)}
.it-card .stampx.love{background:var(--acc)}.it-card .stampx.no{background:#e04444}.it-card .stampx.want{background:#181818}
.it-name{margin:0 0 6px;font-size:clamp(32px,3.4vw,52px);font-weight:800;letter-spacing:-.045em;line-height:1.02}
.it-meta{margin:0 0 22px;font-size:15px;font-weight:650;color:var(--mut)}

/* tiles: many narrow signals per screen */
.legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.legend span{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px 0 6px;border-radius:999px;background:rgba(255,255,255,.75);font-size:12.5px;font-weight:750;color:var(--ink-2)}
.legend i{font-style:normal}
.legend .lg-x{display:none}
.legend b{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;font-size:11px;font-weight:800;color:#fff}
.legend .s1 b,.tl .bd.s1{background:linear-gradient(120deg,#FD9013,#FD3155)}
.legend .s2 b,.tl .bd.s2{background:var(--acc)}
.legend .s3 b,.tl .bd.s3{background:#e04444}
.legend .s3.want b,.tl .bd.s3.want{background:#181818}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:12px}
.tl{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:9px;padding:16px 8px 12px;border-radius:22px;border:0;background:#fff;
  box-shadow:0 12px 26px -18px rgba(60,6,60,.36),0 0 0 1px rgba(24,24,24,.04);cursor:pointer;color:var(--ink);transition:transform 140ms var(--ease-out),box-shadow 200ms ease,background 200ms ease;min-height:118px}
.tl .ic{width:52px;height:52px;filter:drop-shadow(0 8px 10px rgba(60,6,60,.18));transition:transform 260ms var(--ease-out)}
.tl .ic.app{width:50px;height:50px;filter:none}
.tl span{font-size:13.5px;font-weight:730;letter-spacing:-.01em;line-height:1.2;text-align:center}
.tl:active{transform:scale(.96)}
.tl .bd{position:absolute;right:8px;top:8px;display:grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;font-size:10.5px;font-weight:800;color:#fff;opacity:0;transform:scale(.4);transition:opacity 160ms ease,transform 260ms var(--ease-out)}
.tl.st1,.tl.st2,.tl.st3{box-shadow:0 0 0 2.5px #fff,0 0 0 4.5px var(--ring,#FD3155),0 16px 30px -18px rgba(60,6,60,.45)}
.tl.st2{--ring:#E409CF;background:linear-gradient(180deg,#fff,#fff6fd)}
.tl.st3{--ring:#e04444;background:#fff7f7}
.tl.st3.want{--ring:#181818;background:#fff}
.tl.st3 .ic{filter:grayscale(.7) opacity(.75)}
.tl.st1 .bd,.tl.st2 .bd,.tl.st3 .bd{opacity:1;transform:none}
html.motion .tl.pop .ic{animation:pl-pop 380ms var(--ease-out)}
@keyframes pl-pop{40%{transform:scale(1.22) rotate(-6deg)}100%{transform:none}}

/* pick and multi: option cards */
.opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.opts.few{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.op{position:relative;display:flex;align-items:center;gap:12px;min-height:72px;padding:12px 16px 12px 12px;border-radius:22px;border:0;background:#fff;text-align:left;
  box-shadow:0 12px 26px -18px rgba(60,6,60,.36),0 0 0 1px rgba(24,24,24,.04);cursor:pointer;color:var(--ink);transition:transform 140ms var(--ease-out),box-shadow 200ms ease}
.op .ic{width:42px;height:42px;filter:drop-shadow(0 6px 8px rgba(60,6,60,.16))}
.op span{font-size:15.5px;font-weight:740;letter-spacing:-.01em;line-height:1.25}
.op:active{transform:scale(.97)}
.op.sel{box-shadow:0 0 0 2.5px #fff,0 0 0 4.5px #E409CF,0 16px 30px -18px rgba(60,6,60,.45)}
.op .n{position:absolute;right:10px;top:10px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--acc);color:#fff;font-size:12px;font-weight:800;opacity:0;transform:scale(.4);transition:opacity 160ms ease,transform 240ms var(--ease-out)}
.op.sel .n{opacity:1;transform:none}
@media (hover:hover) and (pointer:fine){ .op:hover,.tl:hover{box-shadow:0 18px 32px -18px rgba(60,6,60,.45),0 0 0 1px rgba(24,24,24,.05)} .op:hover .ic,.tl:hover .ic{transform:translateY(-3px) scale(1.06)} }

/* duel */
.duel{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:clamp(10px,1.6vw,20px)}
.duel .tt-o{min-height:clamp(220px,34vh,300px)}
.duel .tt-o b{font-size:clamp(18px,1.6vw,23px);line-height:1.2;max-width:15ch}
.duel .tt-o .ic{width:clamp(76px,7vw,104px);height:clamp(76px,7vw,104px)}
.vs{align-self:center;display:grid;place-items:center;width:clamp(52px,4.6vw,72px);height:clamp(52px,4.6vw,72px);border-radius:50%;background:var(--ink);color:#fff;font-size:clamp(17px,1.5vw,22px);font-weight:800;letter-spacing:-.02em;box-shadow:0 14px 30px -14px rgba(0,0,0,.6)}

/* slider */
.sl{padding:8px 0 4px}
.sl-v{font-size:clamp(64px,7vw,104px);font-weight:800;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block;padding:.06em .04em .14em;margin:-.06em -.04em -.14em}
.sl-mark{display:inline-block;width:clamp(56px,6vw,84px);height:auto;margin-left:14px;vertical-align:-6px;filter:drop-shadow(0 12px 16px rgba(60,6,60,.22))}
.sl input{-webkit-appearance:none;appearance:none;display:block;width:100%;height:56px;margin:22px 0 6px;background:transparent;cursor:pointer;--p:50%}
.sl input::-webkit-slider-runnable-track{height:16px;border-radius:9px;background:linear-gradient(90deg,#FD9013,#FD3155 34%,#E409CF 68%,#4315FF) 0/var(--p) 100% no-repeat,rgba(24,24,24,.09)}
.sl input::-moz-range-track{height:16px;border-radius:9px;background:rgba(24,24,24,.09)}
.sl input::-moz-range-progress{height:16px;border-radius:9px;background:var(--grad)}
.sl input::-webkit-slider-thumb{-webkit-appearance:none;width:44px;height:44px;margin-top:-14px;border-radius:50%;background:#fff;box-shadow:0 6px 16px rgba(60,6,60,.3),0 0 0 1px rgba(24,24,24,.06)}
.sl input::-moz-range-thumb{width:44px;height:44px;border:0;border-radius:50%;background:#fff;box-shadow:0 6px 16px rgba(60,6,60,.3)}
.sl-ends{display:flex;justify-content:space-between;font-size:14px;font-weight:720;color:var(--mut)}

/* guess: the mind-read moment */
.gs{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,40px);align-items:center}
.gs-art{position:relative;width:clamp(130px,13vw,190px);aspect-ratio:1;border-radius:36px;background:#fff;box-shadow:var(--sh-float);display:grid;place-items:center;overflow:hidden}
.gs-art .ic{width:62%;height:62%}
.gs-art .ic.app{width:66%;height:66%}
.gs-art .ic.art{position:absolute;inset:0;width:100%;height:100%}
.gs-art .ic.gly{width:72%;height:72%}
.gs-sure{display:flex;align-items:center;gap:12px;margin:18px 0 26px}
.gs-sure .bar{position:relative;flex:1;max-width:280px;height:12px;border-radius:7px;background:rgba(24,24,24,.08);overflow:hidden}
.gs-sure .bar i{position:absolute;inset:0 auto 0 0;width:0;border-radius:inherit;background:var(--grad);transition:width 900ms var(--ease-expo)}
.gs-sure b{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.pl-hmm{display:flex;align-items:center;gap:14px;min-height:clamp(200px,30vh,280px)}
.pl-hmm .orb{width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffd1f1 0%,#ff6fd0 28%,#e21fc0 58%,#7a16d0 100%);box-shadow:0 18px 40px -14px rgba(228,9,207,.65),inset -6px -8px 18px rgba(80,0,120,.35)}
html.motion .pl-hmm .orb{animation:pl-breathe 1.2s ease-in-out infinite}
@keyframes pl-breathe{50%{transform:scale(1.08);box-shadow:0 24px 50px -12px rgba(228,9,207,.8),inset -6px -8px 18px rgba(80,0,120,.35)}}
.pl-hmm p{margin:0;font-size:clamp(26px,2.6vw,40px);font-weight:800;letter-spacing:-.04em;color:var(--ink-2)}

/* result: a stamp lands */
.stamp{position:absolute;z-index:6;left:50%;top:44%;display:inline-flex;align-items:center;gap:12px;height:62px;padding:0 30px 0 22px;border-radius:999px;font-size:clamp(18px,1.6vw,24px);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff;
  background:var(--acc);box-shadow:0 30px 60px -24px rgba(228,9,207,.6),inset 0 2px 0 rgba(255,255,255,.45);transform:translate(-50%,-50%);pointer-events:none;white-space:nowrap}
.stamp .hole{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.95);box-shadow:inset 0 2px 4px rgba(0,0,0,.25)}
.stamp.grey{background:#181818;box-shadow:0 30px 60px -24px rgba(0,0,0,.45)}
html.motion .stamp{animation:pl-slam 900ms var(--ease-expo) both}
@keyframes pl-slam{0%{opacity:0;transform:translate(-50%,-50%) scale(1.5) rotate(-6deg)}22%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-3deg)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-56%) scale(.98) rotate(-3deg)}}
.pl-fx{position:fixed;inset:0;pointer-events:none;z-index:40;overflow:hidden}
.ring{position:absolute;border-radius:50%;border:clamp(10px,1.4vw,22px) solid;opacity:0;transform:translate(-50%,-50%)}
html.motion .ring{animation:pl-ring 900ms var(--ease-expo) both}
@keyframes pl-ring{0%{opacity:.95;width:0;height:0}55%{opacity:.85}100%{opacity:0;width:var(--r);height:var(--r)}}
.flash{position:absolute;inset:0;background:#fff;opacity:0}
html.motion .flash{animation:pl-flash 220ms ease-out both}
@keyframes pl-flash{0%{opacity:.55}100%{opacity:0}}
html.motion .shake{animation:pl-shake 380ms ease both}
@keyframes pl-shake{20%{transform:translateX(-9px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
.zap{position:absolute;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;background:#181818;color:#fff;font-size:12.5px;font-weight:800;letter-spacing:.04em;opacity:0;transform:translate(-50%,0)}
html.motion .zap{animation:pl-zap 1100ms var(--ease-out) both}
@keyframes pl-zap{0%{opacity:0;transform:translate(-50%,8px)}20%{opacity:1;transform:translate(-50%,0)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-14px)}}

/* chapter title: a heading alone */
.pl-title{display:flex;flex-direction:column;justify-content:center;min-height:calc(100dvh - var(--bar) - 200px)}
.pl-title h2{margin:0;font-size:clamp(52px,min(7vw,11vh),128px);font-weight:800;letter-spacing:-.05em;line-height:.98}
.pl-title p{margin:18px 0 0;font-size:clamp(18px,1.6vw,24px);font-weight:650;color:var(--mut)}
.pl-title .n{margin:0 0 18px;font-size:14px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.1em .05em .22em;margin:-.1em -.05em -.22em}
.wi{display:inline-block}
html.motion .pl-title .wi,html.motion .pl-rd .wi{animation:pl-rise 520ms var(--ease-expo) both;animation-delay:calc(var(--i) * 70ms)}
@keyframes pl-rise{from{transform:translateY(112%)}to{transform:none}}
html.motion .pl-title.enter h2{animation:pl-tilt 640ms var(--ease-expo) both;transform-origin:50% 100%}
@keyframes pl-tilt{from{transform:perspective(1800px) rotateX(10deg) scale(1.07)}to{transform:none}}

/* readings: what I figured out so far */
.pl-rd .lines{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.pl-rd .lines li{font-size:clamp(20px,1.9vw,28px);font-weight:760;letter-spacing:-.03em;line-height:1.25}
.pl-rd .tells{margin-top:22px;display:grid;gap:8px}
.pl-rd .tells p{display:flex;align-items:center;gap:10px;margin:0;font-size:15px;font-weight:720;color:var(--ink-2)}
.pl-rd .tells p::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--acc);flex:none}
.stamps{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0}
.stamps span{display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 18px 0 14px;border-radius:999px;color:#fff;background:var(--acc);font-size:13.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 12px 24px -10px rgba(228,9,207,.5),inset 0 1.5px 0 rgba(255,255,255,.4)}
.stamps span::before{content:"";width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.95);box-shadow:inset 0 1px 2px rgba(0,0,0,.25)}
.stamps span.w2{background:#fff;color:var(--ink);box-shadow:0 10px 22px -14px rgba(60,6,60,.4)}
.stamps span.w2::before{background:var(--acc)}
.glass{background:linear-gradient(140deg,rgba(255,255,255,.82),rgba(255,255,255,.62));-webkit-backdrop-filter:blur(26px) saturate(1.6);backdrop-filter:blur(26px) saturate(1.6);border:1.5px solid rgba(255,255,255,.9);border-radius:36px;box-shadow:var(--sh-glass)}
.pl-rd .panel{padding:clamp(22px,3vw,40px)}

/* the reveal: Rewind-style ranking of the person's life */
.rw{padding:clamp(20px,2.6vw,34px)}
.rw-top{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.rw-top img{height:20px;width:auto}
.rw-top .priv{margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;background:rgba(24,24,24,.06);font-size:12.5px;font-weight:750;color:var(--ink-2)}
.rw-bars{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:18px}
.rw-bars i{height:5px;border-radius:5px;background:rgba(24,24,24,.08)}
.rw-bars i.on{background:var(--grad)}
.rw h3{margin:0 0 14px;font-size:clamp(24px,2.3vw,34px);font-weight:790;letter-spacing:-.035em}
.rw-row{display:grid;grid-template-columns:44px 52px 1fr auto;align-items:center;gap:14px;padding:10px 14px;border-radius:22px}
.rw-row:first-of-type{background:rgba(228,9,207,.06)}
.rw-row .rk{font-size:28px;font-weight:800;letter-spacing:-.05em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.rw-row .ic{width:48px;height:48px}
.rw-row b{display:block;font-size:19px;font-weight:780;letter-spacing:-.02em}
.rw-row small{display:block;font-size:13.5px;font-weight:650;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rw-row .pc{font-size:26px;font-weight:800;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.rw-row:first-of-type .pc{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.pl-reveal .grid2{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:20px;align-items:start}
.rw-row>div{min-width:0}
.pl-reveal .side{display:grid;gap:16px}
.mini{padding:20px 22px}
.mini h4{margin:0 0 12px;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.mini .appsrow{display:flex;flex-wrap:wrap;gap:8px}
.mini .appsrow .ic{width:38px;height:38px}
.mini dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:14.5px}
.mini dt{font-weight:650;color:var(--mut)}
.mini dd{margin:0;font-weight:760}
.mini dd small{font-weight:650;color:var(--quiet)}

/* review: the Controls window from V15 */
.ctl{padding:0;overflow:hidden}
.ctl-chrome{display:flex;align-items:center;gap:8px;padding:16px 20px;border-bottom:1.5px solid rgba(24,24,24,.06)}
.ctl-chrome i{width:11px;height:11px;border-radius:50%}
.ctl-chrome i:nth-child(1){background:#FF5F57}.ctl-chrome i:nth-child(2){background:#FEBC2E}.ctl-chrome i:nth-child(3){background:#28C840}
.ctl-chrome img{height:18px;width:auto;margin:0 auto;transform:translateX(-22px)}
.ctl-in{padding:clamp(20px,2.6vw,32px)}
.ctl h3{margin:0;font-size:clamp(26px,2.4vw,36px);font-weight:790;letter-spacing:-.035em}
.ctl .lead{margin:6px 0 20px;font-size:15.5px;font-weight:620;color:var(--mut)}
.grp{margin-top:18px}
.grp h4{margin:0 0 8px;display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.grp h4 button{margin-left:auto;border:0;background:none;font:inherit;font-size:12.5px;letter-spacing:.04em;text-transform:none;color:var(--ink-2);cursor:pointer;font-weight:750}
.row{display:flex;align-items:center;gap:14px;min-height:58px;padding:8px 10px 8px 16px;border-radius:20px;background:#fff;box-shadow:0 8px 20px -16px rgba(60,6,60,.3),0 0 0 1px rgba(24,24,24,.035);margin-bottom:8px}
.row .ic{width:30px;height:30px}
.row .tx{flex:1;min-width:0}
.row b{display:block;font-size:15.5px;font-weight:760;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row small{display:block;font-size:13px;font-weight:650;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .note{font-size:12px;font-weight:750;color:var(--quiet);white-space:nowrap}
.row.off b,.row.off small{color:var(--quiet)}
.tog{position:relative;flex:none;width:54px;height:32px;border-radius:999px;border:0;background:rgba(24,24,24,.14);cursor:pointer;transition:background 200ms ease}
.tog::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--acc);opacity:0;transition:opacity 200ms ease}
.tog::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.22);transition:transform 240ms var(--ease-out)}
.tog[aria-checked="true"]::before{opacity:1}
.tog[aria-checked="true"]::after{transform:translateX(22px)}
.tog:disabled{opacity:.5;cursor:default}
.more{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.pl-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:26px}
.pl-fine{margin:12px 0 0;font-size:13.5px;font-weight:650;color:var(--mut)}
.pl-err{margin:12px 0 0;font-size:14.5px;font-weight:700;color:#c42b2b}

/* intro */
.pl-intro h1,.pl-intro h2{margin:0;font-size:clamp(56px,min(7.4vw,12vh),132px);font-weight:800;letter-spacing:-.054em;line-height:.96}
.pl-intro .lead{margin:22px 0 0;font-size:clamp(18px,1.6vw,24px);font-weight:650;color:var(--ink-2);max-width:30ch;line-height:1.35}
.pl-intro .pl-actions{margin-top:34px}
.pl-intro .facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.pl-intro .facts span{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.75);font-size:13.5px;font-weight:720;color:var(--ink-2)}
.pl-intro .facts span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acc)}

/* ---------- phones and narrow windows: the map is a band on top ---------- */
@media (max-width:899px){
  .pl{grid-template-columns:1fr;grid-template-rows:minmax(150px,26vh) 1fr}
  .pl-map::after{inset:auto 0 0 0;width:auto;height:1px;background:linear-gradient(90deg,rgba(24,24,24,0),rgba(24,24,24,.08) 20%,rgba(24,24,24,.08) 80%,rgba(24,24,24,0))}
  .pl-meter{left:14px;right:14px;bottom:10px;gap:10px}
  .pl-meter-n{font-size:28px}
  .pl-meter-l{font-size:11.5px}
  .pl-lab{font-size:9.5px;height:20px;line-height:20px;padding:0 8px}
  .pl-hud{padding:12px 16px 0;min-height:44px}
  .pl-card{padding:14px 16px 96px}
  .pl-title{min-height:calc(100dvh - var(--bar) - 26vh - 140px)}
  .it{grid-template-columns:1fr;gap:16px}
  .it-card{aspect-ratio:auto;height:min(34vh,300px)}
  .ans-row{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .pill{min-height:52px;padding:0 10px;font-size:14.5px}
  .tiles{grid-template-columns:repeat(3,1fr);gap:8px}
  .tl{min-height:100px;padding:12px 4px 10px;border-radius:18px}
  .tl .ic{width:42px;height:42px}
  .tl span{font-size:12px}
  .tt-o{min-height:min(26vh,220px);border-radius:24px}
  .duel{grid-template-columns:1fr;gap:10px}
  .vs{justify-self:center;width:44px;height:44px;font-size:15px}
  .gs{grid-template-columns:1fr}
  .pl-reveal .grid2{grid-template-columns:1fr}
  .rw-row{grid-template-columns:30px 40px 1fr auto;gap:10px;padding:8px 10px}
  .rw-row .ic{width:38px;height:38px}
  .rw-row .pc{font-size:20px}
  .pl-foot .btn.pri{margin-left:0}
  .pl-save{height:38px;padding:0 14px;font-size:13.5px}
}
@media (hover:none){ .pill .k{display:none} }
.pl-credits{position:fixed;right:14px;bottom:10px;z-index:5;font-size:11.5px;font-weight:650;color:var(--quiet);text-decoration:none}
.pl-credits:hover{color:var(--ink-2)}
@media (max-width:899px){ .pl-credits{display:none} .it-card{height:min(24vh,220px)} }
@media (max-width:420px){ .pl-save .lbl-long{display:none} .ans-row{grid-template-columns:1fr} }
@media (min-width:900px) and (max-height:760px){ .pl-q{font-size:clamp(28px,3vw,44px)} .tt-o{min-height:190px} .pl-card{padding-top:14px} }
@media print{ .pl-map,.pl-fx{display:none} }

/* ---- Oct 29 evening (Martin's notes) ---- */
/* every question has its own picture */
.pl-qrow{display:flex;align-items:center;gap:clamp(14px,1.6vw,22px)}
.pl-qrow .qa{flex:none;width:clamp(52px,4.6vw,72px);height:clamp(52px,4.6vw,72px);filter:drop-shadow(0 12px 16px rgba(60,6,60,.2))}
.pl-qrow .qa.gly{border-radius:50%}
.pl-qrow .pl-q{min-width:0}
/* title art is never cropped: the whole poster or logo, on a soft blur of itself */
.ic.art{object-fit:contain}
.it-card .bgblur,.gs-art .bgblur{position:absolute;inset:-12%;width:124%;height:124%;object-fit:cover;filter:blur(26px) saturate(1.25);opacity:.55;pointer-events:none}
.it-card .ic.art,.gs-art .ic.art{z-index:1}
.it-card .kind,.it-card .cr,.it-card .stampx{z-index:2}
.tt-o .ic.art{border-radius:18px;background:#fff}
/* guesses: the tier and the streak */
.gs-tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px}
.gs-tag{display:inline-flex;align-items:center;height:30px;padding:0 13px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;background:rgba(24,24,24,.06);color:var(--ink-2)}
.gs-tag.ambitious{background:var(--grad);color:#fff}
.gs-tag.mythical{background:#181818;color:#fff;box-shadow:0 0 0 2px #fff,0 0 0 4px #E409CF,0 10px 24px -8px rgba(228,9,207,.6)}
.gs-streak{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;font-size:12.5px;font-weight:780;color:var(--ink-2);background:rgba(255,255,255,.8);border:1.5px solid rgba(24,24,24,.08)}
.gs.mythical .gs-art{box-shadow:0 0 0 3px #fff,0 0 0 6px #E409CF,var(--sh-float)}
.stamp.mythical span{background:#181818}
/* never tried sits apart so nobody forgets it's there */
.ans-newbox{margin-top:14px;padding:14px 16px 16px;border-radius:22px;border:1.5px dashed rgba(24,24,24,.18);background:rgba(255,255,255,.45);max-width:560px}
.ans-newh{margin:0 0 10px;font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.ans-newbox .ans-new{margin-top:0;max-width:none}
.pill.untried{background:#F1EEEA;border-color:transparent;color:var(--ink-2)}
.pill.untried:hover{background:#ebe7e2}
.pill.untried.wish{background:#fff;border:1.5px solid rgba(253,49,85,.35);color:var(--ink)}
/* what's in the way (wish), then lock it in */
.blk{display:flex;flex-direction:column;align-items:flex-start;gap:6px;max-width:620px}
.blk-h{margin:0;font-size:clamp(18px,1.5vw,22px);font-weight:800;letter-spacing:-.02em}
.blk-s{margin:0 0 6px;font-size:14px;font-weight:650;color:var(--mut)}
.blk-chips{display:flex;flex-wrap:wrap;gap:10px;margin:2px 0 16px}
.blk-c{height:44px;padding:0 16px 0 8px;background:#fff;box-shadow:0 0 0 1.5px rgba(24,24,24,.08)}
.blk-c .ic{width:28px;height:28px}
.blk-c.sel{box-shadow:0 0 0 2px #fff,0 0 0 4px #E409CF}
.tiles-blk{margin:22px 0 4px}
/* tiles: a fourth state, someday */
.legend .s4 b,.tl .bd.s4{background:#fff;color:#E409CF;box-shadow:inset 0 0 0 1.5px #E409CF}
.tl.st4{--ring:#E409CF;background:#fff;box-shadow:0 0 0 2.5px #fff,0 0 0 4.5px var(--ring),0 16px 30px -18px rgba(60,6,60,.45);border:1.5px dashed rgba(228,9,207,.45)}
.tl.st4 .bd{opacity:1;transform:none}
/* the daily reward */
.pl-reward{display:flex;flex-direction:column;align-items:flex-start}
.pl-reward .bud{width:clamp(150px,16vw,220px);height:clamp(150px,16vw,220px);margin:0 0 18px;filter:drop-shadow(0 22px 30px rgba(60,6,60,.25))}
.pl-reward .bud svg{width:100%;height:100%}
html.motion .pl-reward .bud{animation:pl-pop 520ms var(--ease-out)}
/* save: export and your own AI, always */
.pl-finish .lead{max-width:52ch}
.pl-more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:28px;max-width:720px}
.more-c{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto auto;column-gap:14px;row-gap:4px;align-items:center;padding:16px 18px;border-radius:24px;text-align:left;text-decoration:none;color:var(--ink);cursor:pointer;font:inherit;border:1.5px solid rgba(255,255,255,.9)}
.more-c .ic{grid-row:1/3;width:44px;height:44px}
.more-c b{font-size:16px;font-weight:800;letter-spacing:-.01em}
.more-c small{font-size:13.5px;font-weight:620;color:var(--mut);line-height:1.35}
@media (hover:hover) and (pointer:fine){ .more-c:hover{transform:translateY(-2px);box-shadow:0 18px 32px -18px rgba(60,6,60,.45)} }
.pl-save.due{box-shadow:0 0 0 2px #fff,0 0 0 4px #E409CF}
.pl-save.due .lbl-long{display:none}
@media (max-width:640px){ .pl-more{grid-template-columns:1fr} .pl-qrow{align-items:flex-start} }

/* a guess with more than three answers wraps whole pills, never mid-word */
.gs .ans-row{display:flex;flex-wrap:wrap;gap:10px}
.gs .ans-row .pill{flex:0 1 auto;white-space:nowrap}
/* emoji art always fits its card, whatever the card's height */
.it-card.emo .ic{width:auto;height:auto;max-width:62%;max-height:74%;object-fit:contain}
/* the kind badge never sits on the artwork: the art starts below it */
.it-card .ic.art{inset:auto;top:50px;left:12px;width:calc(100% - 24px);height:calc(100% - 64px)}

/* undo the last answer (a misclick is never final) */
.pl-undo{margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;border:0;background:rgba(24,24,24,.06);font:inherit;font-size:12.5px;font-weight:780;color:var(--ink-2);cursor:pointer}
.pl-undo:hover{background:rgba(24,24,24,.1)}
.pl-undo[hidden]{display:none}
.pl-undo:not([hidden]) + .pl-count{margin-left:12px}

/* signed in (neocast.live): your photo and first name, to your account, instead of Sign in (Martin, Oct 29 10:55 PM).
   No photo: your initial on the gradient in a white ring, like the account's header avatar. */
.signin[hidden],.pl-me[hidden]{display:none}
.pl-me{display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 6px 0 4px;border-radius:999px;color:var(--ink);text-decoration:none;white-space:nowrap;font-size:15px;font-weight:750;transition:opacity 160ms ease}
.pl-me:hover{opacity:.8}
.pl-av{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;overflow:hidden;color:#fff;font-size:15px;font-weight:800;line-height:1;
  background:var(--acc);background-origin:border-box;background-repeat:no-repeat;box-shadow:0 0 0 2.5px #fff,0 8px 18px -8px rgba(228,9,207,.55)}
.pl-av.photo{padding:2px}
.pl-av img{width:100%;height:100%;border-radius:50%;object-fit:cover;background:#fff}
.pl-me-n{max-width:14em;overflow:hidden;text-overflow:ellipsis}
@media (max-width:760px){ .pl-me{height:40px;font-size:14px;gap:8px} .pl-av{width:32px;height:32px;font-size:14px} .pl-me-n{max-width:6.5em} }
@media (max-width:379px){ .pl-me-n{display:none} .pl-me{padding:0 2px} }
/* Undo (Nov 5): the answer given last time stays marked, in the selected ring */
.tt-o.was{box-shadow:0 0 0 3px #fff,0 0 0 5.5px #E409CF,var(--sh-acc)}
.pill.was,.chip.was{box-shadow:0 0 0 3px #fff,0 0 0 5px #E409CF}
.op.was{box-shadow:0 0 0 2.5px #fff,0 0 0 4.5px #E409CF,0 16px 30px -18px rgba(60,6,60,.45)}

/* sound on / mute, just below the logo at the top left of the map (Martin, Nov 5 2026) */
.pl-snd{position:absolute;z-index:4;top:16px;left:var(--m);flex:none;display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:50%;border:0;background:rgba(255,255,255,.88);
  box-shadow:0 8px 20px -12px rgba(60,6,60,.35),0 0 0 1px rgba(24,24,24,.05);color:var(--ink);cursor:pointer;transition:transform 140ms var(--ease-out),background 200ms ease,color 200ms ease}
.pl-snd svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pl-snd .spk{fill:currentColor}
.pl-snd .mx{display:none}
.pl-snd.off{color:var(--mut);background:rgba(24,24,24,.06);box-shadow:none}
.pl-snd.off .wav{display:none}
.pl-snd.off .mx{display:inline}
.pl-snd:active{transform:scale(.94)}
.pl-snd:focus-visible{outline:2px solid #E409CF;outline-offset:3px}
@media (hover:hover) and (pointer:fine){ .pl-snd:hover{background:#fff;color:var(--ink)} }
@media (max-width:899px){ .pl-snd{top:10px;width:36px;height:36px} .pl-snd svg{width:18px;height:18px}
  body.pl-tight .pl-meter{left:calc(var(--m) + 48px)} }

/* ---------- the question fits the screen (Martin, Nov 5 2026: "Web def shouldn't need any scrolling") ----------
   play.js fit(): a card that runs past the stage gets data-fit 1, 2, then 3, each a little denser; on a computer a card
   that still doesn't fit scales down as a whole. No empty runway under the card, so nothing scrolls when it fits. */
.pl-card{padding-bottom:26px}
.pl-in>:last-child,.pl-in>:last-child>:last-child{margin-bottom:0}
.pl-in[data-fit] .pl-keys{display:none}
.pl-in[data-fit] .pl-q{font-size:clamp(26px,min(2.9vw,4.8vh),44px)}
.pl-in[data-fit] .pl-sub{margin-top:8px;font-size:clamp(14.5px,1.05vw,16px)}
.pl-in[data-fit] .pl-body{margin-top:clamp(14px,2.4vh,26px)}
.pl-in[data-fit] .legend{margin-top:10px}
.pl-in[data-fit] .pl-foot{margin-top:16px}
.pl-in[data-fit] .tiles{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px}
.pl-in[data-fit] .tl{min-height:98px;padding:12px 6px 10px;gap:7px}
.pl-in[data-fit] .tl .ic{width:44px;height:44px}
.pl-in[data-fit] .tl .ic.app{width:42px;height:42px}
.pl-in[data-fit] .opts{gap:10px}
.pl-in[data-fit] .op{min-height:60px;padding:10px 14px 10px 10px}
.pl-in[data-fit] .op .ic{width:36px;height:36px}
.pl-in[data-fit] .tt-o{min-height:clamp(160px,26vh,240px);gap:12px}
.pl-in[data-fit] .tt-x{margin-top:14px}
.pl-in[data-fit] .pill{min-height:50px}
@media (min-width:900px){ .pl-in[data-fit] .it{grid-template-columns:minmax(170px,240px) 1fr} }
.pl-in[data-fit] .gs-sure{margin:12px 0 18px}
.pl-in[data-fit] .sl-v{font-size:clamp(52px,5.4vw,80px)}
.pl-in[data-fit] .sl input{margin:12px 0 4px}
.pl-in[data-fit] .pl-rd .lines li,.pl-in.pl-rd[data-fit] .lines li{font-size:clamp(18px,1.6vw,24px)}
.pl-in[data-fit].pl-title,.pl-in[data-fit] .pl-title{min-height:0}

.pl-in[data-fit="2"] .pl-q,.pl-in[data-fit="3"] .pl-q{font-size:clamp(24px,min(2.4vw,4vh),36px);line-height:1.06}
.pl-in[data-fit="2"] .pl-sub,.pl-in[data-fit="3"] .pl-sub{font-size:14px;line-height:1.38}
.pl-in[data-fit="2"] .pl-eyebrow,.pl-in[data-fit="3"] .pl-eyebrow{margin-bottom:8px}
.pl-in[data-fit="2"] .legend span,.pl-in[data-fit="3"] .legend span{height:26px;font-size:12px}
.pl-in[data-fit="2"] .tiles{grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:8px}
.pl-in[data-fit="2"] .tl,.pl-in[data-fit="3"] .tl{min-height:86px;padding:10px 4px 8px;gap:6px;border-radius:18px}
.pl-in[data-fit="2"] .tl .ic,.pl-in[data-fit="2"] .tl .ic.app{width:36px;height:36px}
.pl-in[data-fit="2"] .tl span,.pl-in[data-fit="3"] .tl span{font-size:12.5px}
.pl-in[data-fit="2"] .tl .bd,.pl-in[data-fit="3"] .tl .bd{right:5px;top:5px;min-width:18px;height:18px;padding:0 4px;font-size:9.5px}
.pl-in[data-fit="2"] .opts,.pl-in[data-fit="3"] .opts{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.pl-in[data-fit="2"] .op{min-height:52px;padding:8px 12px 8px 8px;border-radius:18px;gap:10px}
.pl-in[data-fit="2"] .op .ic{width:30px;height:30px}
.pl-in[data-fit="2"] .op span,.pl-in[data-fit="3"] .op span{font-size:14.5px}
.pl-in[data-fit="2"] .tt-o,.pl-in[data-fit="3"] .tt-o{min-height:clamp(140px,22vh,200px);padding:18px 14px 16px;gap:10px}
.pl-in[data-fit="2"] .tt-o .ic,.pl-in[data-fit="3"] .tt-o .ic{width:clamp(70px,7vw,104px);height:clamp(70px,7vw,104px)}
.pl-in[data-fit="2"] .pill,.pl-in[data-fit="3"] .pill{min-height:46px;font-size:15.5px}
.pl-in[data-fit="2"] .ans-col,.pl-in[data-fit="3"] .ans-col{gap:8px}
@media (min-width:900px){ .pl-in[data-fit="2"] .it,.pl-in[data-fit="3"] .it{grid-template-columns:minmax(150px,200px) 1fr} }
.pl-in[data-fit="2"] .chip,.pl-in[data-fit="3"] .chip{height:40px}
.pl-in[data-fit="2"] .gs-art,.pl-in[data-fit="3"] .gs-art{width:clamp(110px,10vw,150px)}
.pl-in[data-fit="2"] .pl-title h2,.pl-in[data-fit="3"] .pl-title h2,.pl-in.pl-title[data-fit="2"] h2,.pl-in.pl-title[data-fit="3"] h2{font-size:clamp(44px,min(5.6vw,9vh),96px)}

.pl-in[data-fit="3"] .pl-q{font-size:clamp(22px,min(2.1vw,3.6vh),30px)}
.pl-in[data-fit="3"]:has(.legend) .pl-sub{display:none}
.pl-in[data-fit="3"] .pl-body{margin-top:12px}
.pl-in[data-fit="3"] .tiles{grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:7px}
.pl-in[data-fit="3"] .tl{min-height:74px;padding:8px 3px 7px;gap:5px}
.pl-in[data-fit="3"] .tl .ic,.pl-in[data-fit="3"] .tl .ic.app{width:30px;height:30px}
.pl-in[data-fit="3"] .tl span{font-size:11.5px}
.pl-in[data-fit="3"] .opts{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}
.pl-in[data-fit="3"] .op{min-height:46px;padding:6px 10px 6px 7px;border-radius:16px;gap:8px}
.pl-in[data-fit="3"] .op .ic{width:26px;height:26px}
.pl-in[data-fit="3"] .op span{font-size:13.5px}
.pl-in[data-fit="3"] .pill{min-height:42px;font-size:14.5px}

/* phones: a slimmer map band, folded further for a card that needs the room */
@media (max-width:899px){
  .pl{grid-template-rows:minmax(130px,20vh) 1fr}
  .pl-card{padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
  .pl-title{min-height:calc(100dvh - var(--bar) - 20vh - 140px)}
  body.pl-tight .pl{grid-template-rows:56px 1fr}
  body.pl-tight .pl-labels,body.pl-tight .pl-you{display:none}
  body.pl-tight .pl-map-in{opacity:0}
  body.pl-tight .pl-meter{bottom:10px}
  body.pl-tight .pl-meter-n{font-size:22px}
  body.pl-tight .pl-meter-l{display:none}
  /* "Be honest" on a tight phone: the picture as a small cover beside the name, the answers full width below */
  .pl-in[data-fit] .it{grid-template-columns:clamp(84px,24vw,112px) 1fr;column-gap:16px;row-gap:0;align-items:end}
  .pl-in[data-fit] .it>div:last-child{display:contents}
  .pl-in[data-fit] .it-card{grid-row:1 / span 2;width:100%;height:auto;aspect-ratio:3/4;border-radius:20px}
  .pl-in[data-fit] .it-card .kind{left:8px;top:8px;height:22px;padding:0 8px;font-size:9.5px}
  .pl-in[data-fit] .it-card .cr{display:none}
  .pl-in[data-fit] .it .pl-eyebrow,.pl-in[data-fit] .it .it-name{grid-column:2}
  .pl-in[data-fit] .it .it-name{font-size:clamp(24px,7vw,32px);margin-bottom:0}
  .pl-in[data-fit] .it .ans{grid-column:1 / -1;margin-top:16px}
  .pl-in[data-fit] .tt-o{min-height:min(20vh,170px)}
  .pl-in[data-fit="3"] .tt-o{min-height:min(16vh,130px)}
  /* the densest phone grid: five across, the legend as 1× 2× 3× */
  .pl-in[data-fit="3"] .tiles{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px}
  .pl-in[data-fit="3"] .tl{min-height:66px;padding:7px 2px 6px;gap:4px;border-radius:14px}
  .pl-in[data-fit="3"] .tl .ic,.pl-in[data-fit="3"] .tl .ic.app{width:26px;height:26px}
  .pl-in[data-fit="3"] .tl span{font-size:11px;line-height:1.1}
  .pl-in[data-fit="3"] .legend{gap:5px;margin-top:8px}
  .pl-in[data-fit="3"] .legend span{height:24px;padding:0 9px 0 4px;font-size:11.5px;gap:5px}
  .pl-in[data-fit="3"] .legend b{width:16px;height:16px;font-size:9px}
  .pl-in[data-fit="3"] .legend .lg-w{display:none}
  .pl-in[data-fit="3"] .legend .lg-x{display:inline}
  .pl-in[data-fit="3"] .pl-foot{margin-top:10px}
  .pl-in[data-fit="3"] .op{min-height:42px}
}