/* =====================================================================
   THE SHELL — its page

   The doors carry their own css inline; this is the room: the ink under
   the picture, the frame, the poster that stands in for it until it
   draws, the bar, the chip, the hud, the ring and the wordmark.

   ONE PILL COMPONENT for the whole site, in two variants: solid on the
   doors and in the bar, ghost over live canvas. Two size classes, phone
   and everything above it. Every pill's hit area is 44 px tall whatever
   the pill is, bought by a transparent outset and not by growing it.

   THE BAR IS ONE ROW at every size, and it is capped at 12% of the glass
   so the thumb zone the game steers with is never under it.
   ===================================================================== */
:root{
  --ink:#14100C;
  --cream:#FFF4E6;
  --coral:#F2765B;
  --ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
html,body{ margin:0; height:100%; background:var(--ink); overflow:hidden; }
body{
  color:var(--cream); font:400 15px/1.25 var(--ui);
  -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent;
}
#sh{ position:fixed; inset:0; overflow:hidden; }

/* the picture, and what stands in for it until it draws a frame */
#sh iframe{
  position:absolute; inset:0; width:100%; height:100%;
  border:0; display:block; background:var(--ink);
}
#shPoster{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:var(--ink) center/cover no-repeat;
  opacity:1; transition:opacity .5s ease;
}
#shPoster.off{ opacity:0; }
/* a touch inside an iframe never reaches this document, so while the clock
   is not running there is a layer up here to hear the first one */
#shGate{ position:absolute; inset:0; z-index:4; background:transparent; }

/* --------------------------------- the bar ---------------------------------
   one flex row: thumb, the text column that is the only thing that flexes,
   the primary button, the volume a mouse gets, and the pill. */
#shBar{
  position:absolute; left:0; right:0; bottom:0; z-index:5;
  box-sizing:border-box; display:flex; align-items:center;
  min-height:64px; touch-action:none;
  /* the sides carry the notch too: a phone on its side puts the thumb
     and the pill under the rounded corner without this */
  padding:10px calc(16px + env(safe-area-inset-right))
          calc(10px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
  background:rgba(20,16,12,.94);
  border-top:1px solid rgba(255,244,230,.12);
  transition:transform .25s ease, opacity .25s ease;
}
/* THE BAR SPANS THE GLASS AND THE ROW INSIDE IT DOES NOT. the ink under
   a transport should reach both edges; the transport should not. a
   @media (min-width:900px) block zeroed the bar's padding entirely, so on
   every laptop the thumbnail was welded to the left bezel and the pill to
   the right one, sixteen hundred pixels apart. */
.sh-row{
  flex:1 1 auto; min-width:0; max-width:720px; margin:0 auto;
  display:flex; align-items:center;
}
#sh[data-state="armed"] #shBar,
#sh[data-state="live"] #shBar{ display:none; }
.sh-thumb{
  width:44px; height:44px; border-radius:6px; flex:0 0 auto;
  object-fit:cover; margin-right:12px; background:#000;
}
.sh-col{ flex:1 1 auto; min-width:0; }
.sh-name{ font:600 13px/1.15 var(--ui); letter-spacing:normal; color:var(--cream); }
.sh-name span{ white-space:nowrap; }
.sh-time{
  font:400 11px/1.18 var(--ui); margin-top:1px; color:rgba(255,244,230,.6);
  font-variant-numeric:tabular-nums;
}
.sh-b{
  width:44px; height:44px; flex:0 0 auto; margin-left:12px; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:none; border:0; border-radius:50%; color:var(--cream); cursor:pointer;
}
.sh-b svg{ width:18px; height:18px; }
.sh-vol{
  flex:0 0 auto; width:96px; height:44px; margin:0 12px; accent-color:var(--cream);
}
@keyframes sh-breath{ 0%,100%{ opacity:1 } 50%{ opacity:.55 } }
.sh-breathe svg{ animation:sh-breath 2.4s ease-in-out infinite; }

/* ------------------------------- the pill -------------------------------
   solid on the doors and in the bar, ghost over live canvas. the hit area
   is 44 whatever the pill's own height is. */
.sh-pill,#shChip,#shHud{
  display:inline-flex; align-items:center; gap:6px; position:relative;
  height:32px; padding:0 12px; border-radius:16px;
  font:600 13px/32px var(--ui); font-variant-numeric:tabular-nums;
  border:0; cursor:pointer;
}
.sh-pill{ margin-left:8px; flex:0 0 auto; background:var(--cream); color:var(--ink); }
.sh-pill::after,#shChip::after{
  content:""; position:absolute; left:0; right:0; top:-6px; bottom:-6px;
}
.sh-ghost{
  background:rgba(20,16,12,.72); color:var(--cream);
  border:1px solid rgba(255,244,230,.14) !important;
}
#shHud{ cursor:default; }
.sh-pill svg,#shChip svg{ width:16px; height:16px; flex:0 0 auto; }

/* the two chips, on the wordmark's own offsets so every edge lines up */
#shChip,#shHud{
  position:absolute; z-index:6; opacity:0; pointer-events:none;
  top:max(20px, calc(env(safe-area-inset-top) + 8px));
  transition:opacity .2s ease;
}
#shHud{ left:calc(20px + env(safe-area-inset-left)); }
#shChip{ right:calc(20px + env(safe-area-inset-right)); }
/* visibility and not only opacity: an element at opacity 0 is still in
   the tab order and still read out loud */
#shChip,#shHud{ visibility:hidden; }
#sh[data-state="armed"] #shChip,#sh[data-state="live"] #shChip{
  opacity:1; visibility:visible; pointer-events:auto;
}
#sh[data-state="armed"] #shHud{ opacity:.72; visibility:visible; }
#sh[data-state="live"] #shHud{ opacity:1; visibility:visible; }

/* --------------------------------- the ring ---------------------------------
   the drain to the fourth barline, in the thumb zone, and it never takes a
   touch: the thumb it is drawn for belongs to the picture underneath. */
#shRing{
  position:absolute; z-index:6; pointer-events:none;
  left:50%; transform:translateX(-50%);
  /* 8vh is 31 px on a phone on its side, which put the ring under the
     thumb it is drawn for; it never sits closer than 56 */
  bottom:calc(env(safe-area-inset-bottom,0px) + max(8vh, 56px));
  width:64px; height:64px; opacity:0; transition:opacity .2s ease;
  /* an ink halo: a cream ring over the galaxy's snow and pale grass read
     as nothing at all, and this is the one thing on the glass asking */
  filter:drop-shadow(0 0 3px rgba(20,16,12,.75));
}
#shRing svg{ width:100%; height:100%; display:block; }
#shRing.on{ opacity:1; }
/* armed by the pill or a deep link: a whole ring, breathing, and no clock
   on it — it waits for a thumb for as long as anyone wants to look. it
   breathed ONCE and then sat still, which is a ring that looks like a
   decoration by the time a first-timer has finished reading the picture. */
#shRing.full circle:last-child{ animation:sh-breath 2.8s ease-in-out infinite; }

/* ------------------------------- the wordmark ------------------------------- */
#shMark{
  position:absolute; z-index:6;
  top:max(20px, calc(env(safe-area-inset-top) + 8px));
  left:calc(20px + env(safe-area-inset-left));
  display:flex; align-items:center; height:32px; padding:0 12px;
  border-radius:16px; cursor:pointer; color:var(--cream);
  font:600 13px/1 var(--ui); letter-spacing:normal;
  /* the ghost pill, like the chip: bare cream at 0.72 was invisible over
     the galaxy's snow at every size, and this is the way home */
  background:rgba(20,16,12,.72); border:1px solid rgba(255,244,230,.14);
  transition:opacity .18s ease;
}
#shMark::after{ content:""; position:absolute; left:0; right:0; top:-6px; bottom:-6px; }
#shMark b{ color:var(--coral); display:inline-block; transform-origin:50% 60%; }
/* the dot on the beat: a swell that lands and settles inside one quarter */
@keyframes sh-dot{ 0%{ transform:scale(1.7); filter:brightness(1.35) } 100%{ transform:scale(1); filter:none } }
#sh[data-state="armed"] #shMark,#sh[data-state="live"] #shMark{ display:none; }

/* -------------------------------- the sheet -------------------------------- */
#shSheet{ position:fixed; inset:0; z-index:9; background:rgba(20,16,12,.62); }
#shSheet .sh-card{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  min-width:220px; background:var(--ink); border-radius:14px; overflow:hidden;
  border:1px solid rgba(255,244,230,.14);
}
#shSheet button,#shSheet a{
  display:flex; align-items:center; gap:12px; width:100%; height:52px;
  padding:0 20px; background:none; border:0; color:var(--cream);
  font:inherit; text-decoration:none; cursor:pointer;
}
#shSheet a,#shSheet button + button{ border-top:1px solid rgba(255,244,230,.1); }
#shSheet svg{ width:16px; height:16px; }

/* a mouse gets an answer before the press: the solid pill brightens, the
   ghost darkens, the round button gets a plate. nothing moves. */
@media (hover:hover){
  .sh-pill:hover{ background:#fff; }
  .sh-ghost:hover,#shMark:hover{ background:rgba(20,16,12,.9); }
  .sh-b:hover{ background:rgba(255,244,230,.1); }
}
.sh-pill:active,#shChip:active,#shMark:active,.sh-b:active{ transform:scale(.96); }

/* the run's end has one beat on the hud: coral, gone in half a second.
   road wave has no pips to go out, and a number that only changes colour
   under a craft that keeps driving reads as nothing having happened. */
@keyframes sh-hit{ 0%{ background:rgba(242,118,91,.92) } 100%{ background:rgba(20,16,12,.72) } }
#shHud.hit{ animation:sh-hit .6s ease-out; }

/* tablet and desktop: the same one row, a little more air */
@media (min-width:600px){
  #shBar{ min-height:72px; padding:12px 24px calc(12px + env(safe-area-inset-bottom)) 24px; }
  .sh-thumb{ width:48px; height:48px; margin-right:14px; }
  .sh-name{ font-size:14px; line-height:1.2; }
  .sh-time{ font-size:12px; }
  .sh-b{ margin-left:16px; }
  .sh-b svg{ width:20px; height:20px; }
  .sh-pill,#shChip,#shHud,#shMark{
    height:36px; border-radius:18px; padding:0 14px; font-size:14px; line-height:36px;
  }
  .sh-pill{ margin-left:10px; }
}
/* below 360 the thumb goes and the pill tightens, by media query and never
   by measuring whether the name fits */
/* below 360 the thumb goes and the pill tightens. the name is allowed to
   wrap, to TWO lines and no further: a name growing a bar is a bar that
   walks up the picture, and the record's name is not more important than
   the picture it is the name of. */
@media (max-width:359px){
  .sh-thumb{ display:none; }
  .sh-pill{ padding:0 10px; }
  .sh-name span{ white-space:normal; }
  .sh-name{
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
    line-clamp:2; overflow:hidden;
  }
}
/* A PHONE ON ITS SIDE HAS 390 PX OF GLASS AND THE BAR MAY HAVE 12% OF IT.
   that is 46 px, and a 48 px row inside 2 px of padding is 52 — measured
   at 844x390 it came to 49, over the law by two pixels. the controls come
   down to 40 and keep their 44 px hit area by outset, which is what the
   pill has always done. */
@media (max-height:499px){
  #shBar{ min-height:44px;
    padding:2px calc(16px + env(safe-area-inset-right))
            calc(2px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left)); }
  .sh-thumb{ display:none; }
  .sh-col{ display:flex; align-items:baseline; gap:12px; }
  .sh-time{ margin-top:0; }
  .sh-b{ width:40px; height:40px; margin-left:8px; position:relative; }
  .sh-b::after{ content:""; position:absolute; left:-2px; right:-2px; top:-2px; bottom:-2px; }
  .sh-vol{ height:40px; width:80px; margin:0 8px; }
  .sh-pill,#shChip,#shHud,#shMark{ height:28px; border-radius:14px; line-height:28px; }
  .sh-pill::after,#shChip::after,#shMark::after{ top:-8px; bottom:-8px; }
}

:focus-visible{ outline:2px solid rgba(255,244,230,.8); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){
  #shBar,#shChip,#shHud,#shRing,#shPoster,#shMark{ transition:none !important; }
  .sh-breathe svg{ animation:none !important; opacity:1 !important; }
}

/* -------------------------- what a run was, in the hud --------------------------
   THE PANEL IS GONE. it was the bar's own rectangle sliding up over the
   bottom of the picture carrying the run's number, the word "best", the
   word "again" on a pill and the word "listen" on another — four surfaces
   and three words to say one thing that was already on the glass. the
   number freezes where it has been all along, goes coral if it beat the
   stored best, and the best appears beside it behind the crown glyph.
   again is a touch on the picture; listen is the chip; the drain's end is
   listen. nothing is drawn that was not already there. */
.sh-run{ display:inline-flex; align-items:center; gap:5px; }
.sh-run.new{ color:var(--coral); }
.sh-best{
  display:inline-flex; align-items:center; gap:4px; margin-left:9px;
  opacity:.62; font-weight:400;
}
.sh-best svg{ width:11px; height:11px; }
/* the ring comes back bigger when a run has ended: it is a drain now,
   and it is the only thing on the glass asking for an answer */
#shRing.big{ width:84px; height:84px; }

/* the hull pips: three, and the ones you still have are solid */
.sh-pips{ display:inline-flex; gap:3px; margin-left:6px; }
.sh-pips svg{ width:8px; height:8px; opacity:.28; }
.sh-pips svg.on{ opacity:1; }