/* wyr.css — Would You Rather? in Aurora Glass (DESIGN-D §10).
   Same sky, header, buttons, chips, switches and sheets as the rest of the
   site (base.css); what is here is the start screen, the two glass cards
   with the pearl OR, the choosing moment and the footer.

   Motion is transforms and opacity only. Glows are painted once on their own
   layer and faded in, never animated. Under Calm mode (which reduced motion
   also switches on) everything cross-fades and nothing loops. Nothing here
   uses backdrop-filter: the tint alone reads as glass. */

/* ------------------------------------------------------------ start screen */

.start{
  display:grid;gap:20px;align-content:start;
  width:100%;max-width:1120px;margin:0 auto;
  padding:14px calc(var(--gutter) + var(--sar)) calc(48px + var(--sab)) calc(var(--gutter) + var(--sal));
}
.start__hero{display:flex;align-items:center;gap:14px}
.start__text{flex:1;min-width:0}
.start__hero .eyebrow{margin-bottom:12px}
.start__title{margin:0;font:700 clamp(40px,11vw,66px)/.98 var(--font-display);letter-spacing:-.045em}
.start__title .glow-text{display:inline-block}
.start__sub{margin:12px 0 0;font-size:var(--fs-md);line-height:1.5;color:var(--mist);max-width:24em;text-wrap:pretty}

/* the game's own app icon, floating on its glow (the hub card's art) */
.hero-tile{
  position:relative;flex:none;width:94px;aspect-ratio:1;border-radius:24%;overflow:hidden;
  rotate:-6deg;margin-right:4px;
  box-shadow:0 22px 34px -14px rgba(1,4,16,.8),0 0 0 1px rgba(255,255,255,.22),0 0 48px -6px rgba(255,203,107,.42);
  animation:tileFloat 5.5s ease-in-out infinite alternate;
}
.hero-tile svg{width:100%;height:100%}
.hero-tile::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(155deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.08) 34%,transparent 52%),linear-gradient(0deg,rgba(0,0,0,.18),transparent 30%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),inset 0 -3px 8px rgba(0,0,0,.15);
}
@keyframes tileFloat{to{transform:translateY(-7px) rotate(3deg)}}

/* the party tip: Skip's hint. The whole pill is his button. */
.tip{position:relative;justify-self:start;max-width:34em;padding:6px 16px 6px 6px;font-size:15px;line-height:1.4}
.tip b{display:block;margin-bottom:3px;font:800 11px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase}
.host{flex:none;width:48px;height:48px;padding:0;border:0;background:none;cursor:pointer;touch-action:manipulation}
.host::after{content:"";position:absolute;inset:0;border-radius:var(--r-md)}
.host .skip{width:100%;height:100%}
.host:focus-visible{outline:none}
.tip:has(.host:focus-visible){outline:2px solid var(--cyan);outline-offset:3px}
@media (hover:hover){.tip:hover{background:rgba(92,242,176,.12)}}

/* the deck: Mix it up and the Cheeky ones switch */
.deck{display:grid;gap:16px;padding:20px}
.deck .btn{font-size:19px}
.deck__note{margin:10px 0 0;text-align:center;color:var(--mist);font-size:14.5px}
.cheeky{align-items:flex-start;padding-top:16px;border-top:1px solid var(--glass-line)}
.cheeky .switch__track{margin-top:1px}
.cheeky__text{display:grid;gap:3px;font:700 16px/1.25 var(--font-body)}
.cheeky__text small{font:500 14.5px/1.4 var(--font-body);color:var(--mist)}

/* topics */
.topics{display:grid;gap:14px;padding:18px 18px 20px}
.topics__head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.topics__title{margin:0;font:600 20px/1.2 var(--font-display);letter-spacing:-.02em}
/* phones: two neat columns, names allowed to wrap; wider: a free flow */
.topics__chips{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.topics__chips .chip{justify-content:flex-start;gap:9px;min-height:52px;padding:8px 12px;white-space:normal;text-align:left;line-height:1.2}
.topics__chips .chip[aria-pressed="true"]{box-shadow:0 8px 22px -12px rgba(243,248,255,.6)}
@media (min-width:600px){
  .topics__chips{display:flex;flex-wrap:wrap}
  .topics__chips .chip{min-height:46px;padding:0 16px 0 12px;white-space:nowrap}
}
.chip__emoji{flex:none;font-size:20px;line-height:1}
.chip--ghost{width:var(--w,120px);box-shadow:none;background:rgba(255,255,255,.06);animation:ghost 1.2s ease-in-out infinite alternate;cursor:default}
.chip--ghost:nth-child(3n+2){--w:150px}.chip--ghost:nth-child(3n){--w:96px}.chip--ghost:nth-child(4n){--w:170px}
.topics__chips .chip--ghost{min-height:46px}
@media (max-width:599px){.topics__chips .chip--ghost{width:auto;min-height:52px}}
@keyframes ghost{to{opacity:.4}}
.linkish{
  min-height:44px;padding:0 6px;border:0;background:none;color:var(--cyan);cursor:pointer;
  font:800 14.5px/1.2 var(--font-body);border-radius:var(--r-sm);touch-action:manipulation;
}
@media (hover:hover){.linkish:hover{color:var(--snow);text-decoration:underline;text-underline-offset:.2em}}
.oops{grid-column:1/-1;display:grid;gap:10px;justify-items:start;padding:4px 0}
.oops p{margin:0}
.btn.is-waiting{pointer-events:none;opacity:.8}
/* Play before any topic is chosen: an empty slot waiting to be filled */
#play[aria-disabled="true"]{opacity:1;--btn-bg:transparent;--btn-fg:var(--mist);--btn-shadow:none;outline:1px dashed rgba(167,182,211,.4);outline-offset:-1px}
#play[aria-disabled="true"]:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* favourites: glass rows */
.favs{display:grid;gap:12px}
.favs__title{display:flex;align-items:center;gap:10px;margin:0;font:600 20px/1.2 var(--font-display);letter-spacing:-.02em}
.favs__title svg{width:22px;height:22px;fill:var(--violet)}
.favs__list{display:grid;gap:8px;justify-items:stretch}
.favs__empty{
  display:flex;align-items:center;gap:12px;margin:0;padding:12px 16px 12px 12px;border-radius:18px;
  color:var(--mist);font-size:15px;line-height:1.4;border:1px dashed rgba(167,182,211,.32);
}
.favs__ghost{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:rgba(155,140,255,.1)}
.favs__ghost svg{width:20px;height:20px;fill:none;stroke:var(--violet);stroke-width:2}
.fav{
  display:flex;align-items:center;gap:14px;width:100%;min-height:66px;padding:10px 14px 10px 10px;border:0;border-radius:18px;
  background:var(--glass-fill);box-shadow:inset 0 0 0 1px var(--glass-line),var(--glass-hi),var(--lift-sm);
  color:var(--snow);text-align:left;cursor:pointer;touch-action:manipulation;
  transition:transform .4s var(--ease-spring),background-color .2s;
}
.fav:active{transform:scale(.985);transition-duration:var(--t-tap)}
@media (hover:hover){.fav:hover{transform:translateY(-2px);background-color:rgba(255,255,255,.035)}.fav:hover .fav__go{color:var(--mint);transform:translateX(3px)}}
.fav__em{
  position:relative;flex:none;width:46px;height:46px;border-radius:14px;
  background:linear-gradient(150deg,rgba(92,242,176,.18),rgba(155,140,255,.2));box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.fav__em span{position:absolute;font-size:20px;line-height:1}
.fav__em span:first-child{left:5px;top:5px}
.fav__em span:last-child{right:5px;bottom:5px;font-size:18px}
.fav__text{flex:1;min-width:0;font:600 15.5px/1.35 var(--font-body);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.fav__text i{font-style:normal;font-weight:800;color:var(--violet)}
.fav__go{flex:none;width:20px;height:20px;color:var(--dim);transition:transform .3s var(--ease-spring),color .2s}
.fav__go svg{width:100%;height:100%}
.favs__more{justify-self:start}

.stats{margin:0;color:var(--mist);font-size:14.5px}
.stats b{color:var(--snow);font-weight:800}

@media (min-width:960px){
  .start{
    grid-template-columns:minmax(0,1fr) minmax(0,540px);column-gap:48px;row-gap:22px;
    grid-template-areas:"hero topics" "tip topics" "deck topics" "favs topics" "stats topics";
    grid-template-rows:auto auto auto auto 1fr;padding-top:36px;
  }
  .start__hero{grid-area:hero;gap:24px}
  .start__title{font-size:60px}
  .hero-tile{width:120px;margin-right:10px}
  .tip{grid-area:tip}
  .deck{grid-area:deck;padding:24px}
  .topics{grid-area:topics;align-self:start;padding:26px}
  .favs{grid-area:favs}
  .stats{grid-area:stats}
}

/* ------------------------------------------------------------- play screen */

.play{
  display:flex;flex-direction:column;
  width:100%;max-width:1080px;margin:0 auto;
  min-height:calc(100vh - 64px - var(--sat));min-height:calc(100svh - 64px - var(--sat));
  padding:0 calc(var(--gutter) + var(--sar)) 0 calc(var(--gutter) + var(--sal));
}

/* top bar: back · title and number · heart, share */
.wbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:6px 0 4px}
.wbar__end{display:flex;justify-content:flex-end;gap:8px}
.wbar__mid{display:grid;justify-items:center;gap:4px;min-width:0;text-align:center}
.wbar__mid b{font:600 15px/1.1 var(--font-display);letter-spacing:-.01em;white-space:nowrap}
.wbar__no{font:700 12.5px/1 var(--font-body);color:var(--mist);font-variant-numeric:tabular-nums;white-space:nowrap}
.wbar__deck{width:76px;height:3px;margin-top:3px}
.heart svg{fill:none;stroke:var(--violet);stroke-width:2;transition:fill var(--t-quick)}
.heart[aria-pressed="true"]{background:rgba(155,140,255,.16);box-shadow:inset 0 0 0 1px rgba(155,140,255,.5)}
.heart[aria-pressed="true"] svg{fill:var(--violet)}
.heart.is-pop svg{animation:heartPop 380ms var(--ease-spring)}
@keyframes heartPop{40%{transform:scale(1.35)}}

.play__topic{margin:10px 0 0;text-align:center;font:800 11.5px/1.2 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}
.play__ask{margin:6px 0 16px;text-align:center;font:600 27px/1.05 var(--font-display);letter-spacing:-.035em}
.play__ask span{color:var(--mist);font-weight:500}

/* The two cards. The OR roundel lives in a zero-size track between them, so
   it always sits dead centre of the gap however tall each card grows. */
.choices{
  position:relative;flex:1 0 auto;display:grid;
  grid-template-rows:minmax(0,1fr) 0 minmax(0,1fr);row-gap:30px;
  touch-action:pan-y;
}
.choice{
  --tint:92,242,176;--tint-2:79,216,240;--say:#E3F7EF;
  position:relative;display:flex;flex-direction:column;align-items:stretch;min-width:0;min-height:176px;
  padding:16px 18px 18px;border:0;border-radius:24px;
  background:linear-gradient(160deg,rgba(var(--tint),.17),rgba(var(--tint-2),.05) 70%);
  box-shadow:inset 0 0 0 1px rgba(var(--tint),.34),var(--glass-hi),var(--lift-sm);
  color:var(--snow);text-align:left;font:inherit;cursor:pointer;touch-action:manipulation;
  translate:var(--dx,0px) 0;scroll-margin:80px 0 110px;
  transition:transform .45s var(--ease-spring),opacity .3s var(--ease-out),translate .26s var(--ease-out);
  -webkit-user-select:none;user-select:none;
}
.choice--b{--tint:155,140,255;--tint-2:155,140,255;--say:#ECE9FF}
.choices.is-dragging .choice{transition:none}
/* the lit rim: painted once, faded in */
.choice::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  box-shadow:inset 0 0 0 1.5px rgba(var(--tint),.78),0 0 0 4px rgba(var(--tint),.09),0 22px 46px -18px rgba(var(--tint),.62);
  transition:opacity .3s var(--ease-out);
}
.choice:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
@media (hover:hover){
  .choice:not(.is-picked):not(.is-open):hover{transform:translateY(-3px)}
  .choices:not(.is-chosen) .choice:hover::after{opacity:.55}
  .choice.is-away:hover{opacity:.8}
}

/* a sweep of light across the glass when a card opens */
.choice__shine{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.choice__shine::before{
  content:"";position:absolute;top:-10%;bottom:-10%;left:0;width:60%;opacity:0;
  background:linear-gradient(100deg,rgba(255,255,255,0) 18%,rgba(255,255,255,.12) 40%,rgba(var(--tint),.24) 50%,rgba(255,255,255,.1) 60%,rgba(255,255,255,0) 82%);
  transform:translateX(-120%) skewX(-14deg);
}
.choice.is-picked .choice__shine::before,.choice.is-other .choice__shine::before{animation:sweep 950ms var(--ease-out) both}
@keyframes sweep{from{opacity:1;transform:translateX(-120%) skewX(-14deg)}to{opacity:1;transform:translateX(280%) skewX(-14deg)}}

.choice__k{
  position:absolute;top:14px;right:14px;display:grid;place-items:center;width:30px;height:30px;border-radius:10px;
  font:700 14px/1 var(--font-display);color:var(--on-mint);background:var(--grad-mint);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 14px -6px rgba(var(--tint),.9);
}
.choice--b .choice__k{color:var(--on-violet);background:var(--grad-violet)}

/* "✓ You picked" / "✦ What if…" */
.choice__tag{display:grid;min-height:13px;margin:0 44px 9px 0;font:800 10.5px/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:rgb(var(--tint))}
.choice__tag>span{grid-area:1/1;display:inline-flex;align-items:center;gap:6px;opacity:0;transform:translateY(5px);transition:opacity .2s var(--ease-out),transform .4s var(--ease-spring)}
.choice__tag svg{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.choice__tag-what svg{fill:currentColor;stroke:none}
.choice.is-picked .choice__tag-pick,.choice.is-other .choice__tag-what{opacity:1;transform:none}

.choice__text{display:block;padding-right:36px;font:600 20px/1.22 var(--font-display);letter-spacing:-.02em;text-wrap:balance;overflow-wrap:break-word}

/* below the question: the emoji until the card opens, then the outcome.
   Both share one grid cell and the untyped text is already there (clear),
   so the card is the right size from the start and nothing jumps. */
.choice__stage{position:relative;flex:1 0 auto;display:grid;margin-top:14px;padding-top:14px}
.choice__stage::before{
  content:"";position:absolute;left:0;right:0;top:0;border-top:1px dashed rgba(var(--tint),.42);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease-out);
}
.choice.is-open .choice__stage::before{transform:none}
.choice__emoji{
  grid-area:1/1;align-self:center;justify-self:center;font-size:60px;line-height:1.1;
  animation:bob 3.2s ease-in-out infinite alternate;
  transition:opacity .2s var(--ease-out),scale .3s var(--ease-out);
}
.choice--b .choice__emoji{animation-delay:-1.6s}
@keyframes bob{to{transform:translateY(-5px) rotate(-3deg)}}
.choice.is-picked .choice__emoji,.choice.is-other .choice__emoji{opacity:0;scale:.6}
.choice__out{grid-area:1/1;align-self:start;display:flex;align-items:flex-start;gap:12px}
.choice__av{flex:none;display:grid;place-items:center;width:54px;height:54px;margin-top:-6px;opacity:0}
.choice__mini{font-size:32px;line-height:1}
.host-wrap~.choice__mini{display:none}
.choice.is-picked .choice__av{opacity:1}
.choice.is-other .choice__av{opacity:1;transition:opacity .3s .12s}
.choice__say{flex:1;min-width:0;font:600 15px/1.45 var(--font-body);color:var(--say);opacity:0;transform:translateY(8px);transition:opacity .3s var(--ease-out),transform .45s var(--ease-out)}
.choice__say .r{color:transparent}
.choice.is-open .choice__say{opacity:1;transform:none}

/* Skip travels in this; he is sized by wherever he sits */
.host-wrap{display:block;width:100%;height:100%;transform-origin:0 0}
.host-wrap .skip{width:100%;height:100%}

/* choosing: the pick lifts and lights; the other steps back and dims */
.choice.is-picked{z-index:2;transform:translateY(-3px) scale(1.012);cursor:default}
.choice.is-picked::after,.choice.is-other::after{opacity:1}
.choice.is-other::after{box-shadow:inset 0 0 0 1px rgba(var(--tint),.6),0 22px 46px -22px rgba(var(--tint),.5)}
.choice.is-away{opacity:.62;transform:scale(.975)}
.choice.is-other{cursor:default}
.choices.no-anim .choice,.choices.no-anim .choice::after,.choices.no-anim .choice *,.choices.no-anim .choice__stage::before{transition:none}

/* the pearl OR */
.or{position:relative;z-index:3;pointer-events:none}
.or span{
  position:absolute;left:50%;top:50%;display:grid;place-items:center;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;
  font:700 14px/1 var(--font-display);letter-spacing:.02em;color:var(--ink);
  background:radial-gradient(circle at 35% 30%,#fff,#DCE6FB);
  box-shadow:0 0 0 5px rgba(12,18,52,.9),0 10px 24px -6px rgba(0,0,0,.7),0 0 26px rgba(155,240,255,.35);
  transition:opacity .3s var(--ease-out),transform .35s var(--ease-out);
}
.or.is-lit span{animation:orIn 560ms var(--ease-spring) 140ms backwards}
@keyframes orIn{from{opacity:0;transform:scale(.4) rotate(-40deg)}}
.choices.is-chosen .or span{opacity:.4;transform:scale(.84)}

/* dealing: out one way, in from the other */
.choices.is-out .choice{animation:cardOut 220ms var(--ease-in) both}
.choices.is-out .or span{opacity:0}
.choices.is-in .choice{animation:cardIn 480ms var(--ease-spring) backwards}
.choices.is-in .choice--b{animation-delay:70ms}
@keyframes cardOut{to{opacity:0;translate:var(--out,-90px) 0;scale:.96}}
@keyframes cardIn{from{opacity:0;translate:0 18px;scale:.95}}

.whatif-row{position:relative;z-index:4;margin:0;min-height:52px;display:flex;align-items:center;justify-content:center;text-align:center}
.whatif{--btn-fg:var(--cyan);visibility:hidden;opacity:0;transition:opacity .2s,visibility 0s .2s}
.whatif svg{width:15px;height:15px;fill:currentColor}
.play.is-revealed .whatif{visibility:visible;opacity:1;transition:opacity .25s .5s}
.play.is-both .whatif{visibility:hidden;opacity:0;transition:opacity .2s,visibility 0s .2s}

/* the footer: Skip's hint until you pick, then Next question; Another question */
.wfoot{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:10px;margin-top:auto;padding:10px 0 calc(14px + var(--sab))}
/* the fade behind it runs the full width of the window, whatever the column */
.wfoot::before{
  content:"";position:absolute;z-index:-1;top:-22px;bottom:0;left:50%;width:100vw;translate:-50% 0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,13,31,0),rgba(7,13,31,.88) 42%);
}
.wfoot__go{flex:1;min-width:0;display:grid;align-items:center}
.wfoot__hint,.next{grid-area:1/1}
.wfoot__hint{justify-self:stretch;max-width:none;min-height:52px;padding:4px 16px 4px 6px;font-size:15px;transition:opacity .2s .15s}
.wfoot__hint b{color:var(--snow);font-weight:800}
.wfoot__keys{display:none;color:var(--mist);font-weight:600}
@media (hover:hover) and (pointer:fine){.wfoot__keys{display:inline}}
.host-slot{flex:none;width:44px;height:44px}
.next{width:100%;min-height:52px;visibility:hidden;opacity:0;transform:translateY(8px)}
.play.is-revealed .wfoot__hint{visibility:hidden;opacity:0;transition:opacity .2s,visibility 0s .2s}
.play.is-revealed .next{visibility:visible;opacity:1;transform:none;transition:opacity .2s,transform .4s var(--ease-spring)}
.wfoot__shuffle{width:52px;height:52px;border-radius:17px}
.wfoot__shuffle svg{width:22px;height:22px}

@media (min-width:768px){
  .wbar{padding-top:12px}
  .wbar__mid b{font-size:17px}
  .play__topic{margin-top:14px}
  .play__ask{font-size:clamp(34px,4vw,46px);margin:8px 0 26px}
  .choices{
    grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr) 0 minmax(0,1fr);column-gap:34px;
    flex-grow:0;min-height:clamp(320px,calc(100svh - 390px),440px);
  }
  .choice{padding:22px 24px 24px;border-radius:28px}
  .choice__k{top:18px;right:18px;width:34px;height:34px;border-radius:11px;font-size:16px}
  .choice__tag{margin-bottom:12px;font-size:11.5px}
  .choice__text{font-size:clamp(22px,2.5vw,29px);line-height:1.18}
  .choice__stage{margin-top:18px;padding-top:18px}
  .choice__emoji{font-size:84px}
  .choice__av{width:64px;height:64px}
  .choice__mini{font-size:38px}
  .choice__say{font-size:17px}
  .choice.is-away{transform:scale(.97)}
  .or span{width:58px;height:58px;margin:-29px 0 0 -29px;font-size:16px;box-shadow:0 0 0 6px rgba(12,18,52,.9),0 12px 28px -6px rgba(0,0,0,.7),0 0 30px rgba(155,240,255,.38)}
  .wfoot{justify-content:center;margin-top:auto}
  .wfoot__go{flex:0 1 380px}
  .wfoot__hint{justify-content:center}
}
@media (min-width:1024px){
  .play{min-height:calc(100vh - 72px - var(--sat));min-height:calc(100svh - 72px - var(--sat))}
}

/* ------------------------------------------------------------- calm mode */

:root[data-calm] .hero-tile,:root[data-calm] .choice__emoji,:root[data-calm] .chip--ghost,
:root[data-calm] .or.is-lit span,:root[data-calm] .heart.is-pop svg,:root[data-calm] .choice__shine::before{animation:none}
:root[data-calm] .choice,:root[data-calm] .choice:hover,:root[data-calm] .choice.is-picked,:root[data-calm] .choice.is-away,
:root[data-calm] .fav:hover{transform:none}
:root[data-calm] .choice{transition:opacity 150ms}
:root[data-calm] .choices.is-out .choice{animation:fadeOut 150ms both}
:root[data-calm] .choices.is-in .choice{animation:fadeIn 150ms backwards}
:root[data-calm] .choice__stage::before{transition:none}
:root[data-calm] .choice__say,:root[data-calm] .choice__tag>span,:root[data-calm] .next{transform:none;transition:opacity 150ms}