/* deck-page.css; the surface a deck is dealt on.
   Shared by the tour at / and by a shared link at /d/<code>: same sky, same
   card, same throw. Anything that belongs to only one of them stays on that
   page. */

/* The tour is the app with one deck in it. Same press, same card, same
   gestures; the only thing that changes is who is holding it. */
:root{
  /* The tour stands under a sky, so the press goes blue. Same relationships
     as the app; deep ground, lifted chrome, ivory type; in a blue key. */
  --press:#0E2647; --press-lift:#1B3E6B; --paper:#FBF6EA;
  --sky-top:#123362; --sky-bot:#6FA8D4;
  --ink-pink:#FF6C2F; --ink-blue:#0B72C4;
  --type-dim:rgba(251,246,234,.5); --type-dimmer:rgba(251,246,234,.3);
  --line:rgba(251,246,234,.16);
  --card-shadow:0 2px 3px rgba(0,0,0,.22),0 26px 54px -14px rgba(0,0,0,.6);
  --display:'Inter',system-ui,-apple-system,sans-serif;
  --snap:cubic-bezier(.34,1.56,.64,1);
  --glide:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{
  margin:0;background:var(--press);color:var(--paper);font-family:var(--display);
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
  user-select:none;-webkit-user-select:none;
  display:grid;grid-template-rows:auto 1fr auto;min-height:100dvh;
  padding:calc(14px + env(safe-area-inset-top)) 18px calc(16px + env(safe-area-inset-bottom));
}
/* The drifting cloud field, beneath everything. The radial wash above tints
   it, so the clouds pick up the same pink and blue as the rest of the page. */
#sky{position:fixed;inset:0;z-index:0;pointer-events:none;display:block}
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 70% at 82% -12%,rgba(255,150,90,.16),transparent 58%),
    radial-gradient(100% 60% at 8% 108%,rgba(8,26,54,.4),transparent 58%);
}

/* ── the first card is the one that has to catch you ─────
   A slow halo behind it, and a highlight that travels the frame. It belongs to
   whichever card is first in the deck, not to any particular card. */
#slot{position:relative}
#slot::before{
  content:"";position:absolute;left:50%;top:50%;width:132%;aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(circle,rgba(255,108,47,.24),rgba(11,114,196,.14) 42%,transparent 68%);
  opacity:0;transition:opacity .6s var(--glide);
}
#slot.first::before{opacity:1;animation:halo 7s ease-in-out infinite}
@keyframes halo{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.75}
                50%    {transform:translate(-50%,-50%) scale(1.1);opacity:1}}
/* There was a travelling highlight around the frame here. It sat at full
   opacity for most of its cycle, so against a card that already has a thick
   white frame it read as a second border rather than a glint; a rim. The halo
   behind is signal enough for "this one is first". */

/* ── top ─────────────────────────────────────────────────── */
.top{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;
     gap:12px;max-width:1060px;margin:0 auto;width:100%}
.mark{display:flex;align-items:center;gap:8px;text-decoration:none;color:inherit}
.mark img{width:22px;height:22px;border-radius:5px}
.mark b{font-size:9.5px;letter-spacing:.24em;font-weight:800}
.enter{
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  background:var(--paper);color:var(--press);border:none;border-radius:10px;
  padding:9px 15px;font:inherit;font-size:9px;font-weight:800;letter-spacing:.18em;
  cursor:pointer;box-shadow:0 2px 14px rgba(251,246,234,.16);
  transition:transform .16s var(--snap),box-shadow .22s;
}
.enter:hover{box-shadow:0 4px 24px rgba(251,246,234,.3)}
.enter:active{transform:scale(.95)}
.enter svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2;
           stroke-linecap:round;stroke-linejoin:round}

/* ── stage ───────────────────────────────────────────────── */
.stage{position:relative;z-index:2;display:grid;place-items:center;min-height:0}
/* The card is the thing you drag, the way it is in the app. */
#cardBox{touch-action:pan-y;cursor:grab}
#cardBox:active{cursor:grabbing}
#slot{display:grid;place-items:center}
#cardBox{display:grid;place-items:center;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))
         drop-shadow(0 26px 40px rgba(0,0,0,.55));will-change:transform}

/* ── the app's toss ──────────────────────────────────────
   Lifted from the application's own stylesheet, custom properties and all:
   the card winds up against the throw, smears along the travel, releases the
   stretch mid-slide, and leaves the screen. It starts from wherever your
   finger actually was, which is what the --s* properties carry. */
@keyframes tossOut{
  0%{
    transform:translate3d(var(--sx),var(--sy),0) rotate(var(--sr)) scale(1,1);
    opacity:1;animation-timing-function:cubic-bezier(.4,0,.6,1);
  }
  9%{                                    /* wind up: a shallow squash */
    transform:translate3d(calc(var(--sx) - var(--bk)),calc(var(--sy) + 3px),0)
              rotate(var(--sr)) scale(.962,1.03);
    opacity:1;animation-timing-function:cubic-bezier(.32,0,.2,1);
  }
  40%{                                   /* launch: a light smear along travel */
    transform:translate3d(calc(var(--sx) + (var(--ex) - var(--sx)) * .4),
                          calc(var(--sy) + (var(--ey) - var(--sy)) * .4),0)
              rotate(calc(var(--sr) + (var(--er) - var(--sr)) * .55)) scale(1.075,.945);
    opacity:1;animation-timing-function:cubic-bezier(.22,.62,.24,1);
  }
  72%{                                   /* release the stretch mid-slide */
    transform:translate3d(calc(var(--sx) + (var(--ex) - var(--sx)) * .78),
                          calc(var(--sy) + (var(--ey) - var(--sy)) * .78),0)
              rotate(calc(var(--sr) + (var(--er) - var(--sr)) * .88)) scale(1.022,.985);
    opacity:.92;animation-timing-function:cubic-bezier(.3,.1,.2,1);
  }
  100%{
    transform:translate3d(var(--ex),var(--ey),0) rotate(var(--er)) scale(1,1);
    opacity:0;
  }
}
#cardBox.tossing{animation:tossOut var(--toss-dur,.68s) forwards}
/* A throw that does not clear the threshold comes back on a spring. */
#cardBox.settling{transition:transform .42s cubic-bezier(.34,1.3,.64,1)}

/* ── the app's own entrance animations ───────────────────
   Each card in a Hands deck carries an `entrance`. The tour reads the same
   field and plays the same animation, so a card arrives here exactly as it
   would arrive in the application. */
@keyframes entrSlide{0%{transform:translate3d(-130px,0,0) scale(.82);opacity:0;filter:blur(10px)}
  55%{opacity:1;filter:blur(0)}100%{transform:none;opacity:1;filter:blur(0)}}
@keyframes entrRise{0%{transform:translate3d(0,110px,0) scale(.72);opacity:0;filter:blur(14px)}
  55%{opacity:1;filter:blur(0)}100%{transform:none;opacity:1;filter:blur(0)}}
@keyframes entrDrop{0%{transform:translate3d(0,-100px,0) scale(.72);opacity:0;filter:blur(14px)}
  55%{opacity:1;filter:blur(0)}100%{transform:none;opacity:1;filter:blur(0)}}
@keyframes entrFadeIn{0%{opacity:0;transform:scale(.62);filter:blur(18px)}
  52%{filter:blur(0)}100%{opacity:1;transform:none;filter:blur(0)}}
@keyframes entrSlam{0%{transform:scale(1.38);opacity:0;filter:blur(8px)}
  16%{opacity:1;filter:blur(0)}40%{transform:scale(.90)}64%{transform:scale(1.05)}
  82%{transform:scale(.98)}100%{transform:none;opacity:1}}
@keyframes entrSpin{0%{transform:rotateY(90deg) scale(.72);opacity:0;filter:blur(6px)}
  42%{opacity:1;filter:blur(0)}100%{transform:none;opacity:1;filter:blur(0)}}
@keyframes entrPeel{0%{transform:rotateX(-68deg) translateY(-44px) scale(.72);opacity:0;filter:blur(8px)}
  50%{opacity:1;filter:blur(0)}72%{transform:rotateX(5deg) translateY(4px)}
  100%{transform:none;opacity:1;filter:blur(0)}}
.entr-slide{animation:entrSlide 1.35s cubic-bezier(.16,1,.3,1) both}
.entr-rise {animation:entrRise  1.45s cubic-bezier(.16,1,.3,1) both}
.entr-drop {animation:entrDrop  1.35s cubic-bezier(.16,1,.3,1) both}
.entr-fade {animation:entrFadeIn 1.4s cubic-bezier(.22,1,.36,1) both}
.entr-slam {animation:entrSlam  1.35s cubic-bezier(.22,1,.36,1) both}
.entr-spin {animation:entrSpin  1.35s cubic-bezier(.16,1,.3,1) both;transform-style:preserve-3d;perspective:1200px}
.entr-peel {animation:entrPeel  1.5s cubic-bezier(.16,1,.3,1) both;transform-style:preserve-3d;perspective:900px}
.loading{color:var(--type-dimmer);font-size:10px;letter-spacing:.2em}

/* ── bottom ──────────────────────────────────────────────── */
.foot{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:12px}
.controls{display:flex;align-items:center;gap:16px}
.btn{
  -webkit-appearance:none;appearance:none;display:grid;place-items:center;
  width:52px;height:52px;border-radius:14px;background:var(--press-lift);
  border:1px solid rgba(251,246,234,.16);color:var(--paper);cursor:pointer;
  box-shadow:inset 0 -2px 3px rgba(0,0,0,.03),inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .18s var(--snap),background .18s,border-color .18s,opacity .2s;
}
.btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.1;
         stroke-linecap:round;stroke-linejoin:round}
.btn:hover:not(:disabled){background:var(--paper);border-color:var(--paper);color:var(--press)}
.btn:active:not(:disabled){transform:scale(.9)}
.btn:disabled{opacity:.28;cursor:default}
.tally{min-width:62px;text-align:center;font-size:10px;letter-spacing:.18em;
       color:var(--type-dim);font-variant-numeric:tabular-nums}
.beta{
  background:none;border:none;color:var(--type-dim);font:inherit;font-size:9px;
  letter-spacing:.2em;cursor:pointer;padding:4px 8px;transition:color .16s;
}
.beta:hover{color:var(--paper)}