/* =========================================================================================
   Mbao: "Night", the default look from October 2026. Direction: Neon Afterglow.

   Afterglow's glass and ticket, taken out for the night. A deep indigo room with three soft
   lights (violet, magenta, cyan) drifting slowly behind everything, glassy cards over them, and
   a hot sunset gradient (pink to amber) for the one thing to press. Tonight's card has a neon
   edge that turns slowly; once all three are in it becomes a holographic foil ticket that pops
   confetti the first time your phone sees it. Lime #55FF00 (Frizzy G) is only a wink now.

   Hand-written CSS, phone first at 390px. Tokens first. System fonts only (the CSP allows no
   web fonts); icons are data: SVGs, which the CSP allows. Loops move transform and opacity,
   plus background-position on three small things (the ticket's foil, the locked pill and the
   glint on the lit button); no animated blur, no backdrop-filter anywhere. Every one of them
   stops under prefers-reduced-motion, and the page still looks finished.

   The look's effects script (night.js) turns it up: a live WebGL nebula you can stir, 3D cards,
   a confetti cannon and more. It only adds the fx- classes at the end of this file, and the page
   above is complete without it.
   ========================================================================================= */

:root {
  color-scheme: dark;

  /* ground and surfaces: a deep indigo night, never neutral grey */
  --bg: #0a0820;
  --surface: rgba(25, 19, 60, .76);
  --surface-solid: #17123b;
  --hair: rgba(214, 200, 255, .085);
  --sunk: rgba(6, 3, 24, .5);

  /* text: each passes 4.5:1 on the brightest thing it can sit on (glows included) */
  --text: #f7f4ff;
  --text-2: #d4cff0;
  --text-3: #c0b9e2;

  /* the neon */
  --pink: #ff4fa3;
  --pink-soft: #ffb6dc;            /* pink as text on the dark */
  --violet: #8b6cff;
  --cyan: #2fe5ef;
  --cyan-soft: #98f3f8;
  --amber: #ffb547;
  --lime: #55ff00;                 /* Frizzy G: a wink, never the look */
  --ink: #1c0f26;                  /* text on the sunset and on the foil */
  --no: #ffa3a3;                   /* can't */
  --no-wash: rgba(255, 110, 110, .13);
  --no-line: rgba(255, 145, 145, .42);
  --bar: #dcd3ff;                  /* someone's free time on the timeline */
  --band: rgba(240, 92, 222, .3); /* all three free: orchid, halfway from the pink to the violet */

  --sunset: linear-gradient(112deg, #ff3f9b 0%, #ff5d82 30%, #ff8760 64%, #ffba4b 100%);
  --sunset-x: linear-gradient(90deg, #ff3f9b, #ff7266 55%, #ffb84b);
  --sunset-text: linear-gradient(90deg, #ff8fc8, #ffa18e 55%, #ffcb70); /* the sunset, light enough to be text */
  --cool: linear-gradient(140deg, #c2fcff 0%, #4ee9f2 45%, #1fb8d8 100%);
  --glint: linear-gradient(105deg, rgba(255, 255, 255, 0) 41%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 59%);
  /* holographic foil: two turns of pink, peach, mint, sky and lilac, so a full rainbow always shows */
  --foil: linear-gradient(115deg, #ffb6dc 0%, #ffd4bb 10%, #c0ffdb 20%, #b5eeff 30%, #cbbbff 40%, #ffb6dc 50%, #ffd4bb 60%, #c0ffdb 70%, #b5eeff 80%, #cbbbff 90%, #ffb6dc 100%);
  --grad-card: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015) 64%);

  --rim: inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 0 0 1px rgba(214, 200, 255, .085);
  --lift: 0 1px 2px rgba(0, 0, 0, .35), 0 16px 36px -18px rgba(4, 0, 24, .9);
  --glow: 0 14px 34px -12px rgba(255, 79, 163, .62);
  --bevel: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(120, 20, 50, .16);

  --r-xl: 28px;
  --r-l: 24px;
  --r-m: 18px;
  --tap: 48px;
  --gutter: 16px;
  --focus: #ffffff;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.45, .64, 1);

  /* icons, drawn in black and used as masks so they take the text colour */
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.5l3.2 3.2 6.5-7.2' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.4 4.4l7.2 7.2M11.6 4.4l-7.2 7.2' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
  --i-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3.5 10.5 8 6 12.5' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-cal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1.9' y='3.2' width='12.2' height='11' rx='3' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Cpath d='M2.4 6.9h11.2M5.3 1.6v3M10.7 1.6v3' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
  --i-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.7 10.1A6.1 6.1 0 0 1 5.9 2.3a6.1 6.1 0 1 0 7.8 7.8z' fill='%23000'/%3E%3C/svg%3E");
  --i-dice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1.6' y='1.6' width='12.8' height='12.8' rx='3.4' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Ccircle cx='5.4' cy='5.4' r='1.3'/%3E%3Ccircle cx='10.6' cy='5.4' r='1.3'/%3E%3Ccircle cx='8' cy='8' r='1.3'/%3E%3Ccircle cx='5.4' cy='10.6' r='1.3'/%3E%3Ccircle cx='10.6' cy='10.6' r='1.3'/%3E%3C/svg%3E");
  --i-pad: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.7 3.9h6.6c2 0 3.1 1.6 3.5 4.1l.4 2.6c.3 1.9-1.9 2.9-3.1 1.5L10.8 10H5.2l-1.3 2.1c-1.2 1.4-3.4.4-3.1-1.5L1.2 8c.4-2.5 1.5-4.1 3.5-4.1z' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M4.9 5.7v2.8M3.5 7.1h2.8' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='10.5' cy='6.3' r='1'/%3E%3Ccircle cx='12' cy='8' r='1'/%3E%3C/svg%3E");
  /* the same check in ink, for places a mask can't reach */
  --i-check-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.5l3.2 3.2 6.5-7.2' fill='none' stroke='%231c0f26' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  /* film grain in the sky, so the big gradients never band */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url%28%23g%29'/%3E%3C/svg%3E");
}

/* a real spring where the browser can do one */
@supports (transition-timing-function: linear(0, 1)) {
  :root { --spring: linear(0, .12 4%, .44 10%, .79 17%, .98 23%, 1.05 28%, 1.06 32%, 1.04 38%, 1.01 46%, .995 56%, 1); }
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  scroll-padding-bottom: 120px; /* a keyboard-focused control never lands under the bottom bar */
}
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  color: var(--text); font: 400 16px/1.5 var(--font);
  overflow-x: clip;
}
::selection { background: rgba(255, 79, 163, .42); color: #fff; }

/* the sky: deep indigo, a little lighter overhead, with a fine grain (it shows through the lights) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    var(--grain),
    radial-gradient(120% 55% at 50% -12%, rgba(78, 52, 178, .3), rgba(78, 52, 178, 0) 70%),
    radial-gradient(100% 50% at 50% 118%, rgba(48, 22, 120, .42), rgba(48, 22, 120, 0) 70%),
    linear-gradient(180deg, #0d0a29 0%, #0a0820 50%, #08061a 100%);
}

/* the living background (.ambient, three <i> after <body>): three big soft lights drifting slowly.
   Radial gradients that fade to nothing at their edge, moved with transform only, so they cost no
   repaints. They creep a few pixels a second, so they move in ten small steps a second rather than
   sixty: nobody can see the difference, and the whole screen isn't recomposited every frame.
   --s is the size, --x/--y the centre */
.ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ambient i {
  position: absolute; display: block; border-radius: 50%;
  width: var(--s); height: var(--s); left: calc(var(--x) - var(--s) / 2); top: calc(var(--y) - var(--s) / 2);
}
.ambient i:nth-child(1) { /* violet, overhead on the left */
  --s: 118vw; --x: 0vw; --y: -4vh;
  background: radial-gradient(closest-side, rgba(124, 82, 255, .38), rgba(124, 82, 255, .15) 55%, rgba(124, 82, 255, 0));
  animation: drift-a 38s steps(380) infinite alternate;
}
.ambient i:nth-child(2) { /* magenta, coming in from the right */
  --s: 112vw; --x: 102vw; --y: 40vh;
  background: radial-gradient(closest-side, rgba(255, 52, 160, .3), rgba(255, 52, 160, .11) 55%, rgba(255, 52, 160, 0));
  animation: drift-b 46s steps(460) infinite alternate;
}
.ambient i:nth-child(3) { /* cyan, low down */
  --s: 118vw; --x: -4vw; --y: 90vh;
  background: radial-gradient(closest-side, rgba(30, 214, 235, .2), rgba(30, 214, 235, .075) 55%, rgba(30, 214, 235, 0));
  animation: drift-c 54s steps(540) infinite alternate;
}

h1, h2, h3 { margin: 0; font-family: var(--font-display); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
b { font-weight: 700; }
abbr { text-decoration: none; }
button, input, output { font: inherit; color: inherit; }

:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 3px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip {
  position: absolute; left: -9999px; top: 10px; z-index: 50; padding: 12px 18px; border-radius: 999px;
  background: var(--sunset); color: var(--ink); font-weight: 700; text-decoration: none; box-shadow: var(--glow);
}
.skip:focus { left: 12px; }

/* luminous headings: white running into pink and lilac, with a soft glow round them */
h1 {
  font-size: 34px; line-height: 1.06; font-weight: 780; letter-spacing: -.032em; padding-bottom: .06em;
  color: var(--text);
  background: linear-gradient(100deg, #ffffff 0%, #fff0f8 36%, #ffb3da 70%, #c9b8ff 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 22px rgba(255, 79, 163, .28));
}
h2, .verdict {
  font-size: 20px; line-height: 1.2; font-weight: 720; letter-spacing: -.018em; color: var(--text);
  background: linear-gradient(100deg, #ffffff 35%, #ffd9ee 75%, #e4dcff 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ---------- layout ---------- */

.top, main, .foot { width: 100%; max-width: 560px; margin: 0 auto; }
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: max(12px, env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right)) 6px max(var(--gutter), env(safe-area-inset-left));
}
main {
  flex: 1; display: flex; flex-direction: column; gap: 22px;
  padding: 10px max(var(--gutter), env(safe-area-inset-right)) 120px max(var(--gutter), env(safe-area-inset-left));
}
.foot {
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  padding: 10px var(--gutter) calc(26px + env(safe-area-inset-bottom));
  color: var(--text-2); font-size: 13px;
}
/* pages with a bottom bar: the footer, not main, makes room for it, so the look switch is never under the bar */
@supports selector(:has(*)) {
  body:has(> .actionbar) main { padding-bottom: 36px; }
  body:has(> .actionbar) .foot { padding-bottom: calc(118px + env(safe-area-inset-bottom)); }
  body:not(:has(> .actionbar)) main { padding-bottom: 28px; }
}

.stack { display: flex; flex-direction: column; gap: 14px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nowrap { flex-wrap: nowrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.small { font-size: 14px; line-height: 1.45; color: var(--text-2); }
.plainlist { list-style: none; margin: 0; padding: 0; }
.ico { width: 1em; height: 1em; flex: none; vertical-align: -.125em; }
.intro { display: flex; flex-direction: column; gap: 10px; padding: 6px 2px 2px; }
.intro p { color: var(--text-2); font-size: 16px; line-height: 1.5; }

.card {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  padding: 20px; border-radius: var(--r-l);
  background: var(--grad-card), var(--surface);
  box-shadow: var(--rim), var(--lift);
}

/* ---------- header ---------- */

.brand {
  display: inline-flex; align-items: center; gap: 11px; min-height: var(--tap); padding-right: 6px;
  color: var(--text); text-decoration: none; border-radius: 14px;
  font: 780 22px/1 var(--font-display); letter-spacing: -.03em;
}
/* the mark: two glossy balls, one pink, one cyan, bobbing out of step */
.brand-mark { position: relative; flex: none; width: 37px; height: 18px; }
.brand-mark::before, .brand-mark::after {
  content: ""; position: absolute; top: 0; width: 18px; height: 18px; border-radius: 50%;
  animation: bob 3.2s ease-in-out infinite;
}
.brand-mark::before {
  left: 0;
  background: radial-gradient(circle at 34% 28%, #ffffff 0, #ffd2ea 14%, #ff4fa3 52%, #a8125c 100%);
  box-shadow: 0 0 12px rgba(255, 79, 163, .65), 0 0 26px rgba(255, 79, 163, .25);
}
.brand-mark::after {
  left: 19px;
  background: radial-gradient(circle at 34% 28%, #ffffff 0, #d2fdff 14%, #2fe5ef 52%, #0b7894 100%);
  box-shadow: 0 0 12px rgba(47, 229, 239, .6), 0 0 26px rgba(47, 229, 239, .22);
  animation-delay: -1.6s;
}

.me-pill {
  position: relative; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 17px 0 15px;
  border-radius: 999px; color: var(--text); font: 600 15px/1 var(--font); text-decoration: none;
  background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(214, 200, 255, .14);
  -webkit-tap-highlight-color: transparent;
  transition: background-color .25s var(--ease), transform .5s var(--spring);
}
.me-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 3px rgba(47, 229, 239, .16), 0 0 12px rgba(47, 229, 239, .8); }
.me-pill:hover { background: rgba(255, 255, 255, .11); }
.me-pill:active { transform: scale(.96); }

/* ---------- buttons ---------- */

.btn {
  appearance: none; -webkit-appearance: none; position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 52px; padding: 0 22px; margin: 0; border: 0; border-radius: 999px;
  font: 650 16px/1.1 var(--font); letter-spacing: -.005em; text-decoration: none; white-space: nowrap;
  color: var(--text);
  background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .06));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(214, 200, 255, .1), 0 8px 20px -10px rgba(0, 0, 0, .8);
  cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  transition: transform .5s var(--spring), box-shadow .3s var(--ease), filter .3s var(--ease), background-color .3s var(--ease);
}
@media (hover: hover) {
  .btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
}
.btn:active { transform: scale(.97); transition-duration: .12s, .3s, .3s, .3s; }
/* the lit button: a sunset, dark ink on it */
.btn-primary {
  color: var(--ink); font-weight: 720;
  background: var(--sunset);
  box-shadow: var(--bevel), 0 0 0 1px rgba(255, 110, 170, .35), var(--glow);
}
/* and a glint that crosses it every few seconds: a band of light in the button's own background,
   slid with background-position (a small element, and no extra layer or clip to composite) */
.btn-primary:not(.btn-big), .btn-ink {
  background: var(--glint) 160% 0 / 250% 100% no-repeat, var(--sunset);
  animation: shine 5.5s ease-in-out 1.4s infinite;
}
.btn-block { display: flex; width: 100%; }

/* ---------- saved: a little toast ---------- */

.flash {
  align-self: center; display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 6px 18px 6px 7px; border-radius: 999px;
  font-weight: 640; font-size: 15px; color: var(--text);
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04)), rgba(26, 20, 62, .84);
  box-shadow: inset 0 0 0 1px rgba(150, 240, 248, .3), 0 12px 30px -12px rgba(0, 0, 0, .8), 0 0 26px -8px rgba(47, 229, 239, .5);
}
.flash-ok::before {
  content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--i-check-ink) center / 15px no-repeat, var(--cool);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 14px rgba(47, 229, 239, .55);
}

/* ---------- today: the card with the one "I'm in" button ---------- */

.prop {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px;
  padding: 22px 20px 20px; border-radius: var(--r-xl); color: var(--text);
  background: linear-gradient(135deg, #ff4fa3, #8b6cff 50%, #2fe5ef); /* the edge, if the turning one is missing */
  box-shadow:
    0 30px 70px -32px rgba(255, 60, 160, .6),
    0 20px 46px -24px rgba(90, 50, 255, .55),
    0 14px 30px -14px rgba(0, 0, 0, .8);
}
/* the neon edge: a pink, violet and cyan light on a big square that turns slowly behind the card's
   face, so only a 1.5px rim of it shows and the colours travel round the edge. Turned with
   transform, so it runs on the compositor (animating a registered gradient angle instead would
   repaint the card every frame, and that stalled rendering in testing) */
.prop::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 150%; aspect-ratio: 1; margin: -75% 0 0 -75%;
  background: linear-gradient(90deg, #ff4fa3 22%, rgba(139, 108, 255, .55) 50%, #2fe5ef 78%);
  pointer-events: none; animation: turn 12s linear infinite;
}
/* the card's face: dark glass lit pink from the top left and cyan from the bottom right */
.prop-when::before {
  content: ""; position: absolute; inset: 1.5px; z-index: -1; border-radius: calc(var(--r-xl) - 1.5px); pointer-events: none;
  background:
    radial-gradient(75% 60% at 0% 0%, rgba(255, 79, 163, .3), rgba(255, 79, 163, .1) 50%, rgba(255, 79, 163, 0) 75%),
    radial-gradient(90% 70% at 100% 100%, rgba(47, 229, 239, .14), rgba(47, 229, 239, 0) 65%),
    linear-gradient(180deg, #1c1548, #130e35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}
.prop > * { grid-column: 1 / -1; }
.prop-kicker {
  position: relative; grid-row: 1; display: flex; align-items: center; gap: 10px;
  font: 750 12px/1.2 var(--font); letter-spacing: .15em; text-transform: uppercase; color: var(--pink-soft);
}
/* a live dot: it's on tonight. The ring pings with transform + opacity only, so it costs no repaints */
.prop-kicker::before {
  content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--pink); box-shadow: 0 0 10px rgba(255, 79, 163, .95);
}
.prop-kicker::after {
  content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
  box-shadow: 0 0 0 1.5px rgba(255, 110, 180, .8); opacity: 0;
  animation: ping 2.4s var(--ease) infinite;
}
.prop-when { grid-row: 2; display: flex; flex-direction: column; gap: 6px; margin: 16px 0 22px; }
.prop-day { font: 620 17px/1.2 var(--font-display); letter-spacing: -.01em; color: #e6e0fb; }
.prop-time {
  font: 780 42px/1 var(--font-display); letter-spacing: -.04em; color: #fff;
  text-shadow: 0 0 30px rgba(255, 79, 163, .45);
}
.prop .in-row { display: contents; }
.prop .chips { grid-column: 1; grid-row: 3; }
.prop .small { grid-column: 2; grid-row: 3; font-size: 14px; color: var(--text-2); }
.prop .in-row form { grid-column: 1 / -1; grid-row: 4; margin-top: 20px; }

.in-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.in-row form { margin: 0; }

.btn-ink {
  width: 100%; min-height: 58px; font: 760 18px/1 var(--font-display); letter-spacing: -.01em;
  color: var(--ink);
  box-shadow: var(--bevel), 0 0 0 1px rgba(255, 110, 170, .4), 0 14px 34px -10px rgba(255, 79, 163, .7);
}
/* it breathes: a halo round the button fading in and out (opacity only, so no repaints) */
.btn-ink::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 7px rgba(255, 79, 163, .12), 0 18px 46px -8px rgba(255, 90, 140, .85);
  opacity: 0; animation: breathe 3.6s ease-in-out infinite;
}
/* straight after you tap I'm in (body.just-in), the card gives a little spring and your chip pops in */
.just-in .prop { animation: tap-pop .8s var(--spring) backwards; }
.just-in .prop .chip-in { animation: chip-pop .6s var(--spring) .12s backwards; }
.just-in .prop .chip-in::after { animation: badge-pop .5s var(--spring) .42s backwards; }

/* once you're in, the button steps back: Undo, in glass */
.btn-ghost-ink {
  width: 100%; min-height: 52px; padding: 0 20px; color: var(--text);
  background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(214, 200, 255, .26);
}

/* who's in: squircles, dashed until they're in, then lit up with a tick */
.chips { display: flex; gap: 8px; }
.chip {
  position: relative; flex: none; display: inline-grid; place-items: center;
  width: 44px; height: 44px; border-radius: 15px;
  border: 1.5px dashed rgba(225, 215, 255, .56);
  background: rgba(255, 255, 255, .03) border-box;
  color: var(--text-2); font: 700 16px/1 var(--font-display);
}
.chip-in {
  border-style: solid; border-color: transparent;
  background: var(--sunset) border-box; color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 8px 20px -8px rgba(255, 79, 163, .85);
}
.chip-in::after {
  content: ""; position: absolute; right: -6px; bottom: -6px; width: 19px; height: 19px; border-radius: 50%;
  background: var(--i-check-ink) center / 11px no-repeat, var(--cool);
  box-shadow: 0 0 0 2px #1a1340, 0 0 10px rgba(47, 229, 239, .5);
}

/* ---------- locked in: the ticket, in holographic foil ---------- */

.lock {
  --stub: 86px; /* bottom edge to the perforation: 18px padding + 48px row + half the 40px gap */
  --focus: var(--ink);
  --ticket-mask:
    radial-gradient(circle 13px at 0 calc(100% - var(--stub)), #0000 12.5px, #000 13px) left / 51% 100% no-repeat,
    radial-gradient(circle 13px at 100% calc(100% - var(--stub)), #0000 12.5px, #000 13px) right / 51% 100% no-repeat;
  position: relative; isolation: isolate;
  display: flex; flex-direction: column;
  padding: 22px 22px 18px; color: var(--ink);
  animation: ticket 1s var(--spring) backwards;
}
/* the foil: an iridescent film (pink, peach, mint, sky, lilac) that slowly slides one way while a
   light slides the other, notched by the mask. background-position only, on this one card */
.lock::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--r-xl);
  background:
    linear-gradient(62deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .6) 46%, rgba(255, 255, 255, 0) 62%) 100% 0 / 260% 100% no-repeat,
    var(--foil) 0 0 / 200% 100%;
  -webkit-mask: var(--ticket-mask); mask: var(--ticket-mask);
  animation: foil 10s ease-in-out infinite alternate;
}
/* the light it casts, pink one side and cyan the other: plain box-shadows on an unmasked layer */
.lock::after {
  content: ""; position: absolute; inset: 0; z-index: -2; border-radius: var(--r-xl); pointer-events: none;
  box-shadow: -14px 24px 52px -22px rgba(255, 105, 190, .65), 14px 26px 56px -22px rgba(70, 215, 255, .55), 0 12px 26px -10px rgba(0, 0, 0, .6);
}
/* printed on the foil: fine security lines, a gloss in the corner and the perforation above the stub */
.lock-tag::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--r-xl); pointer-events: none;
  background:
    radial-gradient(circle, rgba(28, 15, 38, .42) 1.6px, rgba(28, 15, 38, 0) 2.3px) left 7px bottom calc(var(--stub) - 3px) / 12px 6px repeat-x,
    repeating-linear-gradient(-55deg, rgba(60, 30, 110, .05) 0 1px, rgba(60, 30, 110, 0) 1px 6px),
    radial-gradient(120% 100% at 0% 0%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 46%);
  -webkit-mask: var(--ticket-mask); mask: var(--ticket-mask);
}
.lock-tag {
  display: flex; align-items: center; gap: 8px; margin-right: 52px;
  font: 800 12px/1.2 var(--font); letter-spacing: .15em; text-transform: uppercase; color: rgba(28, 15, 38, .84);
}
.lock-tag .ico { width: 14px; height: 14px; }
.lock-day { margin: 22px 52px 0 0; font: 800 44px/.98 var(--font-display); letter-spacing: -.042em; }
.lock-time { margin: 8px 52px 0 0; font: 690 22px/1.15 var(--font-display); letter-spacing: -.015em; color: rgba(28, 15, 38, .86); }
/* a tall barcode down the right, because it's a ticket */
.lock-time::after {
  content: ""; position: absolute; top: 24px; right: 22px; bottom: calc(var(--stub) + 16px); width: 26px; opacity: .8;
  background: linear-gradient(180deg,
    var(--ink) 0 2px, #0000 0 4px, var(--ink) 0 5px, #0000 0 7px, var(--ink) 0 10px, #0000 0 11px, var(--ink) 0 12px,
    #0000 0 14px, var(--ink) 0 15px, #0000 0 17px, var(--ink) 0 20px, #0000 0 21px, var(--ink) 0 22px, #0000 0 24px,
    var(--ink) 0 26px, #0000 0 28px, var(--ink) 0 29px, #0000 0 30px, var(--ink) 0 33px, #0000 0 35px, var(--ink) 0 36px,
    #0000 0 37px, var(--ink) 0 38px, #0000 0 40px, var(--ink) 0 43px, #0000 0 44px, var(--ink) 0 45px, #0000 0 47px,
    var(--ink) 0 49px, #0000 0 51px, var(--ink) 0 52px, #0000 0 53px, var(--ink) 0 56px, #0000 0 57px, var(--ink) 0 58px, #0000 0 60px)
    0 0 / 100% 60px repeat-y;
}
/* and the small print up its side (decoration: screen readers skip it) */
.lock-day::after {
  content: "Admit three \B7  Mbao"; content: "Admit three \B7  Mbao" / ""; /* the escape eats one space */
  position: absolute; top: 24px; right: 55px; writing-mode: vertical-rl; white-space: nowrap;
  font: 800 8px/1 var(--font); letter-spacing: .22em; text-transform: uppercase; color: rgba(28, 15, 38, .72);
}
/* a sheen across it when it first lands on this phone (once, with the confetti) */
.lock-day::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--r-xl); pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .8) 50%, rgba(255, 255, 255, 0) 62%) 160% 0 / 260% 100% no-repeat;
  -webkit-mask: var(--ticket-mask); mask: var(--ticket-mask);
}
.celebrate .lock-day::before { animation: sheen 1.1s .55s ease-in-out backwards; }
.lock .in-row { margin-top: 40px; min-height: 48px; }
.lock .chip {
  width: 42px; height: 42px; border-radius: 14px; border: 1.5px solid transparent;
  background: var(--ink) border-box; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 6px 14px -6px rgba(40, 0, 60, .6);
}
.lock .chip-in::after { display: none; }
/* Pull out: a crisp outline, printed in ink */
.btn-ghost {
  min-height: 48px; padding: 0 20px; color: var(--ink); font-weight: 720;
  background: transparent; box-shadow: inset 0 0 0 2px var(--ink);
}
.btn-ghost:hover { filter: none; background: rgba(28, 15, 38, .09); }

/* the first time this phone sees the day locked, app.js adds .celebrate: the ticket pops confetti.
   Sixteen bits burst out sideways and up (the ticket sits near the top of the screen, so not too
   high), hang, then tumble down over it and fade. Once; never under reduced motion. */
.lock.celebrate { z-index: 2; } /* the confetti flies over the cards below, even while they rise in */
.burst { position: absolute; left: 50%; top: 42%; z-index: 3; width: 0; height: 0; pointer-events: none; }
.burst i {
  position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 2.5px; opacity: 0;
  background: var(--c, #fff); box-shadow: 0 0 10px var(--c, #fff);
}
.burst i:nth-child(3n) { width: 9px; height: 9px; border-radius: 50%; }
.burst i:nth-child(3n+1) { width: 6px; height: 15px; }
.celebrate .burst i { animation: confetti 1.25s .32s backwards; }
.burst i:nth-child(1)  { --x: -172px; --y: -118px; --r: 210deg;  --c: #ff4fa3; }
.burst i:nth-child(2)  { --x: -122px; --y: -160px; --r: -170deg; --c: #ffb547; animation-delay: .36s; }
.burst i:nth-child(3)  { --x: -62px;  --y: -178px; --r: 300deg;  --c: #2fe5ef; }
.burst i:nth-child(4)  { --x: 8px;    --y: -188px; --r: -250deg; --c: #ffffff; animation-delay: .38s; }
.burst i:nth-child(5)  { --x: 74px;   --y: -172px; --r: 190deg;  --c: #a88bff; }
.burst i:nth-child(6)  { --x: 134px;  --y: -146px; --r: -310deg; --c: #ff4fa3; animation-delay: .35s; }
.burst i:nth-child(7)  { --x: 182px;  --y: -100px; --r: 240deg;  --c: #55ff00; } /* a little Frizzy G lime */
.burst i:nth-child(8)  { --x: -204px; --y: -46px;  --r: -200deg; --c: #2fe5ef; animation-delay: .37s; }
.burst i:nth-child(9)  { --x: -146px; --y: -12px;  --r: 160deg;  --c: #ffd2a6; }
.burst i:nth-child(10) { --x: 162px;  --y: -34px;  --r: -190deg; --c: #7dffc8; animation-delay: .36s; }
.burst i:nth-child(11) { --x: -88px;  --y: -128px; --r: 270deg;  --c: #ff8a5c; }
.burst i:nth-child(12) { --x: 46px;   --y: -116px; --r: -230deg; --c: #ffffff; animation-delay: .39s; }
.burst i:nth-child(13) { --x: -218px; --y: 14px;   --r: 320deg;  --c: #a88bff; }
.burst i:nth-child(14) { --x: 214px;  --y: 4px;    --r: -280deg; --c: #ffb547; animation-delay: .34s; }
.burst i:nth-child(15) { --x: -28px;  --y: -84px;  --r: 200deg;  --c: #55ff00; }
.burst i:nth-child(16) { --x: 108px;  --y: -66px;  --r: -160deg; --c: #ff4fa3; animation-delay: .37s; }

/* ---------- coming up: fixture stubs ---------- */

.coming { display: flex; flex-direction: column; gap: 14px; }
.section-head { display: flex; flex-direction: column; gap: 4px; padding: 0 4px; }
.ups { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
/* each one a stub: the day on the left, the time on the right, a dashed tear line between them
   with a half-circle bitten out top and bottom (the card is painted on ::before, masked) */
.up {
  --stub: 136px; --notch: 9px;
  --tint: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
  --up-mask:
    radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0, #0000 calc(var(--notch) - .5px), #000 var(--notch)) top / 100% 51% no-repeat,
    radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%, #0000 calc(var(--notch) - .5px), #000 var(--notch)) bottom / 100% 51% no-repeat;
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr) var(--stub); align-items: center;
  min-height: 68px; border-radius: 20px;
  box-shadow: var(--lift);
  transition: transform .5s var(--spring);
}
.up::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(220, 210, 255, .3) 0 50%, rgba(220, 210, 255, 0) 0) right calc(var(--stub) - 1px) top 0 / 1.5px 8px repeat-y,
    linear-gradient(90deg, rgba(255, 79, 163, 0) calc(100% - var(--stub)), rgba(255, 79, 163, .09) 0),
    var(--tint), var(--grad-card), var(--surface);
  box-shadow: var(--rim);
  -webkit-mask: var(--up-mask); mask: var(--up-mask);
}
.up-weekend { --tint: linear-gradient(90deg, rgba(139, 108, 255, .2), rgba(139, 108, 255, 0) 72%); }
.up-day { display: block; padding: 12px 10px 12px 18px; font: 500 16px/1.25 var(--font-display); color: var(--text-2); }
.up-day b { font-weight: 680; color: var(--text); }
.up-soon { display: block; margin-bottom: 3px; font: 750 11px/1.2 var(--font); letter-spacing: .15em; text-transform: uppercase; color: var(--cyan-soft); }
.up-time {
  justify-self: center; padding: 8px 10px; white-space: nowrap;
  font: 720 16px/1.15 var(--font-display); letter-spacing: -.01em; color: var(--pink-soft);
  background: var(--sunset-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
/* today's stub was torn off today's card (app.js tears it off, once per phone, and drops it in
   here): it keeps the card's pink glow. What's left on the card is .prop-tear, teeth cut out of
   its foot; while the stub is still attached (.stub-on) it's a perforation along the rim */
.up-today { --tint: linear-gradient(90deg, rgba(255, 79, 163, .24), rgba(255, 79, 163, 0) 75%); }
.prop-tear {
  position: absolute; left: 0; right: 0; bottom: 0; height: 7px; pointer-events: none;
  background: #0b0822; /* the night behind the card, through the cut */
  -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% / 12px 100%;
  mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% / 12px 100%;
}
.stub-on .prop-tear {
  height: 1.5px; -webkit-mask: none; mask: none;
  background: repeating-linear-gradient(90deg, rgba(220, 210, 255, .6) 0 6px, rgba(220, 210, 255, 0) 6px 11px);
}

/* ---------- nothing works yet ---------- */

.verdict-card {
  padding: 22px 20px 20px; gap: 10px; border-radius: var(--r-xl);
  background:
    radial-gradient(110% 80% at 100% 0%, rgba(139, 108, 255, .3), rgba(139, 108, 255, 0) 58%),
    radial-gradient(80% 60% at 0% 100%, rgba(47, 229, 239, .09), rgba(47, 229, 239, 0) 60%),
    var(--grad-card), var(--surface);
}
.verdict { position: relative; font: 760 26px/1.12 var(--font-display); letter-spacing: -.025em; color: var(--text); }
/* the moon tile, and a cheeky status chip beside it */
.verdict::before {
  content: ""; display: block; width: 44px; height: 44px; margin-bottom: 16px; border-radius: 14px;
  background: linear-gradient(150deg, #e6dcff, #a083ff 55%, #ff86c4);
  -webkit-mask: var(--i-moon) center / 22px no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: var(--i-moon) center / 22px no-repeat exclude, linear-gradient(#000 0 0);
  box-shadow: 0 10px 24px -10px rgba(139, 108, 255, .8);
}
.verdict::after {
  content: "Balls in, for now"; content: "Balls in, for now" / "";
  position: absolute; left: 58px; top: 10px; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px;
  font: 780 10.5px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  color: #e0d8ff; -webkit-text-fill-color: currentColor; /* the verdict's gradient text fill stops here */
  background: rgba(139, 108, 255, .16); box-shadow: inset 0 0 0 1px rgba(170, 150, 255, .4);
}
.verdict-card > p:not(.verdict) { color: var(--text-2); }
.slot {
  display: flex; flex-direction: column; gap: 2px; margin-top: 6px; padding: 13px 16px; border-radius: 16px;
  background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(214, 200, 255, .1);
}
.slot-when { font: 680 16px/1.3 var(--font-display); color: var(--text); }

/* ---------- the 14-day timeline: a widget ---------- */

.timeline { padding: 20px 12px 10px; gap: 10px; }
.timeline h2 { padding: 0 6px; }
/* the key: a swatch beside each label, one per line, so a swatch can never strand at a line end */
.tl-key { display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: center; gap: 4px 9px; padding: 0 6px 2px; font-size: 12.5px; line-height: 1.35; }
.tl-key span { display: block; width: 16px; height: 7px; border-radius: 4px; }
.key-bar { background: var(--bar); }
.tl-key .key-dash { height: 2px; border-radius: 0; background: repeating-linear-gradient(90deg, rgba(220, 210, 255, .55) 0 3px, rgba(220, 210, 255, 0) 3px 6px); }
.tl-key .key-on { height: 12px; border-radius: 4px; background: var(--band); box-shadow: inset 0 0 0 1px rgba(255, 140, 230, .65); }

.tl { list-style: none; margin: 0; padding: 0; }
.tl-head, .tl-row { display: grid; grid-template-columns: 50px minmax(0, 1fr) 62px; gap: 8px; align-items: center; }
.tl-head { padding: 4px 8px 6px; font: 600 10.5px/1 var(--font); color: var(--text-3); letter-spacing: .02em; }
.tl-head > span:last-child { text-align: center; text-transform: uppercase; letter-spacing: .12em; font-size: 9.5px; }
.tl-scale { position: relative; height: 12px; margin-left: 18px; }
.tl-scale span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.tl-scale .at-480 { left: 0; } /* centred on its tick like the rest; it overhangs the empty name column */
.tl-scale .at-720 { left: 22.222%; }
.tl-scale .at-960 { left: 44.444%; }
.tl-scale .at-1200 { left: 66.667%; }
.tl-scale .at-1440 { left: 88.889%; }

.tl-row { position: relative; padding: 9px 8px; border-top: 1px solid var(--hair); }
.tl-weekend { background: rgba(139, 108, 255, .08); }
.tl-today {
  border-top-color: transparent; border-radius: 14px;
  background: linear-gradient(90deg, rgba(255, 79, 163, .14), rgba(139, 108, 255, .07));
  box-shadow: inset 0 0 0 1px rgba(255, 130, 200, .32);
}
.tl-today + .tl-row { border-top-color: transparent; }
.tl-day { font-size: 11.5px; line-height: 1.25; color: var(--text-3); }
.tl-day b { display: block; font: 680 14px/1.2 var(--font-display); color: var(--text); }
.tl-today .tl-day b { color: var(--pink-soft); }
.tl-lanes { position: relative; display: flex; flex-direction: column; gap: 5px; }
/* behind the lanes: the hour lines and the time all three are free; left = name width + lane gap */
.tl-band { position: absolute; top: -9px; left: 18px; width: calc(100% - 18px); height: calc(100% + 18px); z-index: 0; overflow: visible; }
.tl-band line { stroke: rgba(220, 210, 255, .08); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tl-band .tl-on { fill: var(--band); }
.tl-lane { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; height: 8px; }
.tl-name { width: 12px; flex: none; font: 700 9.5px/1 var(--font); color: var(--text-3); text-align: center; }
.tl-track { flex: 1 1 0; width: 0; min-width: 0; height: 8px; display: block; }
svg.tl-track { overflow: visible; }
svg.tl-track rect { fill: var(--bar); rx: 18px; ry: 5px; }
.tl-unsaid .tl-track { height: 2px; background: repeating-linear-gradient(90deg, rgba(220, 210, 255, .54) 0 4px, rgba(220, 210, 255, 0) 4px 8px); }
.tl-cant .tl-track { font: 650 10px/8px var(--font); color: var(--no); letter-spacing: .02em; white-space: nowrap; }
.tl-all { text-align: center; font: 650 11px/1.2 var(--font); color: var(--text-3); font-variant-numeric: tabular-nums; }
.tl-all-on {
  padding: 5px 3px; border-radius: 10px; color: var(--ink); font-weight: 750;
  background: var(--sunset); box-shadow: var(--bevel), 0 6px 14px -6px rgba(255, 79, 163, .65);
}
.tl-all-on .ico { width: 11px; height: 11px; vertical-align: -1px; }

/* ---------- the day picker ---------- */

fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.day {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  padding: 16px; border-radius: var(--r-l);
  background: var(--grad-card), var(--surface);
  box-shadow: var(--rim), var(--lift);
}
/* floated, the legend becomes an ordinary row inside the card; Clear sits in the corner, so on a
   narrow phone the pill drops under the date instead of the date breaking */
.day legend { float: left; width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 46px 0 0; margin: 0; min-height: 30px; }
.day-name { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font: 680 17px/1.2 var(--font-display); letter-spacing: -.012em; color: var(--text); }
.day-when {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 7px;
  font: 800 10.5px/1 var(--font); letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink); background: var(--sunset); box-shadow: 0 0 14px rgba(255, 79, 163, .4);
}
.day-weekend { background: linear-gradient(160deg, rgba(139, 108, 255, .14), rgba(139, 108, 255, 0) 55%), var(--grad-card), var(--surface); }
.day-today {
  background: radial-gradient(110% 70% at 0% 0%, rgba(255, 79, 163, .16), rgba(255, 79, 163, 0) 60%), var(--grad-card), var(--surface);
  box-shadow: inset 0 0 0 1px rgba(255, 130, 200, .38), 0 0 0 4px rgba(255, 79, 163, .06), 0 22px 50px -26px rgba(255, 79, 163, .55), var(--lift);
}
/* all three free that day: a sunset hairline along the top edge */
.day-on::before {
  content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 2px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 63, 155, 0), #ff4fa3 25%, #ffb84b 75%, rgba(255, 184, 75, 0));
}
.pill { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px; flex: none; font: 650 12.5px/1 var(--font); white-space: nowrap; }
.pill-yes { color: var(--pink-soft); background: rgba(255, 79, 163, .13); box-shadow: inset 0 0 0 1px rgba(255, 130, 200, .38); }
.pill-yes::before { content: ""; width: 11px; height: 11px; background: currentColor; -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat; }
/* locked in: the pill is a scrap of the ticket's foil */
.pill-lock {
  color: var(--ink); font-weight: 720;
  background: var(--foil) 0 0 / 300% 100%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 6px 16px -6px rgba(200, 160, 255, .75);
  animation: foil-pill 7s ease-in-out infinite alternate;
}
.pill-lock .ico { width: 12px; height: 12px; }
.link-btn {
  position: absolute; top: 9px; right: 8px;
  appearance: none; -webkit-appearance: none; margin: 0; padding: 0 8px; min-height: 44px; border: 0; border-radius: 12px; background: none;
  color: var(--text-3); font: 600 13.5px/1 var(--font); cursor: pointer; -webkit-tap-highlight-color: transparent;
  text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(214, 205, 245, .4); text-underline-offset: 3px;
  transition: color .2s var(--ease), text-decoration-color .2s var(--ease);
}
.link-btn:hover { color: var(--text); text-decoration-color: currentColor; }

/* what the others said */
.said { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; }
.tag {
  display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px 0 4px; border-radius: 999px;
  color: var(--text-2); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(214, 200, 255, .08); line-height: 1;
}
.tag b { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 7px; font: 750 11px/1 var(--font); color: var(--text); background: rgba(255, 255, 255, .12); }
.tag-free b { color: var(--ink); background: var(--sunset); }
.tag-cant { color: var(--no); background: var(--no-wash); box-shadow: inset 0 0 0 1px var(--no-line); }
.tag-cant b { color: #ffd9d9; background: rgba(255, 120, 120, .24); }
.tag-unsaid { background: none; box-shadow: none; border: 1.25px dashed rgba(220, 210, 255, .5); color: var(--text-3); padding-right: 10px; }

/* the four choices: a segmented control */
.choices {
  position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px;
  padding: 4px; border-radius: 17px;
  background: var(--sunk); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(214, 200, 255, .06);
}
.choices input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; margin: 0; }
.choices label {
  display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 46px; padding: 2px 4px; margin: 0;
  border-radius: 13px; text-align: center; color: var(--text-2); font: 620 14px/1.1 var(--font);
  cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background-color .25s var(--ease), color .2s var(--ease), box-shadow .3s var(--ease), transform .45s var(--spring);
}
.choices label:hover { color: var(--text); background-color: rgba(255, 255, 255, .05); }
.choices label:active { transform: scale(.94); }
.choices input:focus-visible + label { outline: 2.5px solid var(--focus); outline-offset: 2px; }
/* "not said" is a hidden radio: when it has the focus, ring the whole control */
.choices:has(.c-none:focus-visible) { outline: 2.5px solid var(--focus); outline-offset: 3px; }
.choices .c-free:checked + label {
  color: var(--ink); font-weight: 730;
  background: var(--sunset); box-shadow: var(--bevel), 0 6px 16px -6px rgba(255, 79, 163, .75);
}
.choices .c-free:checked + label::before,
.choices .c-no:checked + label::before {
  content: ""; flex: none; width: 12px; height: 12px; background: currentColor;
  -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat;
}
.choices .c-no:checked + label { color: #ffcaca; background: var(--no-wash); box-shadow: inset 0 0 0 1px var(--no-line); }
.choices .c-no:checked + label::before { -webkit-mask-image: var(--i-cross); mask-image: var(--i-cross); }

/* the slider shows once you've said you're free (everywhere without :has, so it still works) */
.range { display: none; padding: 2px 0 0; }
.day:has(.c-free:checked) .range { display: block; animation: reveal .45s var(--ease) backwards; }
@supports not selector(:has(*)) { .range { display: block; } }
.range-label { display: block; margin: 0 0 2px 2px; font: 730 24px/1.15 var(--font-display); letter-spacing: -.028em; color: var(--text); }

/* the track is inset by the thumb radius, so the fill (positioned by app.js) lines up with the thumb centres */
.range-track { position: relative; height: 44px; margin: 0 14px; }
.range-track::before, .range-fill { content: ""; position: absolute; top: 19px; height: 6px; border-radius: 3px; }
.range-track::before { left: -14px; right: -14px; background: rgba(220, 210, 255, .1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .55); }
.range-fill { left: 0; right: 0; background: var(--sunset-x); box-shadow: 0 0 14px rgba(255, 79, 163, .55); }
.range-track input {
  position: absolute; top: 0; left: -14px; z-index: 2; width: calc(100% + 28px); height: 44px; margin: 0; padding: 0;
  background: transparent; -webkit-appearance: none; appearance: none; pointer-events: none; -webkit-tap-highlight-color: transparent;
}
.range-track input:focus-visible { outline: none; }
.range-track input::-webkit-slider-runnable-track { height: 44px; background: transparent; border: 0; }
.range-track input::-moz-range-track { height: 44px; background: transparent; border: 0; }
/* glossy thumbs with a pink ring; the glow grows while you hold one */
.range-track input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto; cursor: grab;
  width: 28px; height: 28px; margin-top: 8px; border: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 28%, #ffffff, #f3eeff 55%, #dcd1f7 100%);
  box-shadow: 0 0 0 2px rgba(255, 110, 180, .95), 0 0 14px 1px rgba(255, 79, 163, .55), 0 3px 8px rgba(0, 0, 0, .55);
  transition: transform .45s var(--spring), box-shadow .25s var(--ease);
}
.range-track input::-moz-range-thumb {
  pointer-events: auto; cursor: grab; width: 28px; height: 28px; border: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 28%, #ffffff, #f3eeff 55%, #dcd1f7 100%);
  box-shadow: 0 0 0 2px rgba(255, 110, 180, .95), 0 0 14px 1px rgba(255, 79, 163, .55), 0 3px 8px rgba(0, 0, 0, .55);
  transition: transform .45s var(--spring), box-shadow .25s var(--ease);
}
.range-track input:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.12); box-shadow: 0 0 0 2px #ff6eb4, 0 0 0 10px rgba(255, 79, 163, .2), 0 0 28px 6px rgba(255, 79, 163, .6), 0 4px 12px rgba(0, 0, 0, .6); }
.range-track input:active::-moz-range-thumb { cursor: grabbing; transform: scale(1.12); box-shadow: 0 0 0 2px #ff6eb4, 0 0 0 10px rgba(255, 79, 163, .2), 0 0 28px 6px rgba(255, 79, 163, .6), 0 4px 12px rgba(0, 0, 0, .6); }
.range-track input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px #ff6eb4, 0 0 0 4.5px var(--surface-solid), 0 0 0 7px var(--focus), 0 0 24px 4px rgba(255, 79, 163, .55), 0 3px 8px rgba(0, 0, 0, .55); }
.range-track input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px #ff6eb4, 0 0 0 4.5px var(--surface-solid), 0 0 0 7px var(--focus), 0 0 24px 4px rgba(255, 79, 163, .55), 0 3px 8px rgba(0, 0, 0, .55); }

/* scale: 8am..2am is 1080 minutes; each label sits where its time is, under a little tick */
.range-scale { position: relative; height: 22px; margin: -4px 14px 0; font: 600 11px/1 var(--font); color: var(--text-3); font-variant-numeric: tabular-nums; }
.range-scale span { position: absolute; top: 9px; transform: translateX(-50%); white-space: nowrap; }
.range-scale span::before { content: ""; position: absolute; left: 50%; top: -8px; width: 1px; height: 5px; margin-left: -.5px; border-radius: 1px; background: rgba(220, 210, 255, .38); }
.range-scale .at-480 { left: 0; }
.range-scale .at-720 { left: 22.222%; }
.range-scale .at-960 { left: 44.444%; }
.range-scale .at-1200 { left: 66.667%; }
.range-scale .at-1440 { left: 88.889%; }
.range-scale .at-1560 { left: 100%; }

/* ---------- who are you: player select ---------- */

.page-who main { justify-content: center; gap: 24px; }
.page-who .intro::before {
  content: "Player select"; content: "Player select" / "";
  font: 780 12px/1 var(--font); letter-spacing: .32em; text-transform: uppercase; color: var(--pink-soft);
}
.who-list { gap: 12px; }
.btn-big {
  justify-content: flex-start; gap: 16px; min-height: 76px; padding: 0 20px 0 14px; border-radius: var(--r-l);
  font: 720 23px/1 var(--font-display); letter-spacing: -.02em; color: var(--text);
  background: var(--grad-card), var(--surface);
  box-shadow: var(--rim), var(--lift);
}
/* each player's orb, glossy, with their letter (decoration: the button already says the name) */
.btn-big::before {
  content: ""; flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  font: 780 19px/1 var(--font-display); letter-spacing: 0; color: var(--ink);
  background: radial-gradient(circle at 34% 28%, #ffffff 0, #e6ddff 12%, #8b6cff 55%, #4a2fc9 100%);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .05), 0 10px 24px -8px rgba(139, 108, 255, .85);
  transition: transform .5s var(--spring);
}
.btn-big[value="Tom"]::before {
  content: "T"; content: "T" / "";
  background: radial-gradient(circle at 34% 28%, #ffffff 0, #ffd2ea 12%, #ff4fa3 54%, #a8125c 100%);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .05), 0 10px 24px -8px rgba(255, 79, 163, .9);
}
.btn-big[value="Sam"]::before {
  content: "S"; content: "S" / "";
  background: radial-gradient(circle at 34% 28%, #ffffff 0, #d2fdff 12%, #2fe5ef 54%, #0b7894 100%);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .05), 0 10px 24px -8px rgba(47, 229, 239, .85);
}
.btn-big[value="George"]::before {
  content: "G"; content: "G" / "";
  background: radial-gradient(circle at 34% 28%, #ffffff 0, #ffe9c4 12%, #ffb547 54%, #b35a0b 100%);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .05), 0 10px 24px -8px rgba(255, 181, 71, .85);
}
/* a quiet chevron, not a loud button */
.btn-big::after {
  content: ""; flex: none; width: 20px; height: 20px; margin-left: auto; background: var(--text-3);
  -webkit-mask: var(--i-chev) center / contain no-repeat; mask: var(--i-chev) center / contain no-repeat;
  transition: transform .5s var(--spring), background-color .2s var(--ease);
}
@media (hover: hover) {
  .btn-big:hover { filter: none; box-shadow: var(--rim), inset 0 0 0 1px rgba(255, 140, 200, .32), var(--lift); }
  .btn-big:hover::before { transform: scale(1.06); }
  .btn-big:hover::after { transform: translateX(3px); background: var(--text); }
}
.page-who main > .small { text-align: center; }

/* ---------- what are we playing?: tonight's spin, then the library ---------- */

.tonight, .library, .suggested { gap: 14px; }
.tonight > .small, .library > .small, .suggested > .small { margin-top: -6px; }
/* tonight is the one that matters: lit pink from the corner, like today's day card */
.tonight {
  background: radial-gradient(110% 70% at 0% 0%, rgba(255, 79, 163, .18), rgba(255, 79, 163, 0) 60%), radial-gradient(90% 60% at 100% 100%, rgba(47, 229, 239, .09), rgba(47, 229, 239, 0) 60%), var(--grad-card), var(--surface);
  box-shadow: inset 0 0 0 1px rgba(255, 130, 200, .3), 0 22px 50px -26px rgba(255, 79, 163, .5), var(--lift);
}
/* the pick: up in lights */
.pick {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 16px 18px; border-radius: var(--r-l); text-align: center;
  background: radial-gradient(80% 90% at 50% 0%, rgba(255, 79, 163, .26), rgba(255, 79, 163, 0) 72%), var(--sunk);
  box-shadow: inset 0 0 0 1px rgba(255, 150, 210, .42), 0 0 34px -12px rgba(255, 79, 163, .65);
}
.pick-label { display: flex; align-items: center; gap: 9px; font: 750 12px/1.2 var(--font); letter-spacing: .15em; text-transform: uppercase; color: var(--pink-soft); }
.pick-label::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--i-dice) center / contain no-repeat; mask: var(--i-dice) center / contain no-repeat; }
.pick-name {
  align-self: stretch; padding-bottom: .06em; font: 800 34px/1.08 var(--font-display); letter-spacing: -.035em; overflow-wrap: anywhere;
  color: var(--pink-soft); background: var(--sunset-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 18px rgba(255, 79, 163, .45));
}
.pick .small { color: var(--text-2); }
/* app.js rolls the name through the others the first time a phone sees a spin, then lands it */
.pick.rolling .pick-name { opacity: .8; }
.pick.landed .pick-name { animation: land .7s var(--spring) backwards; }
.pick.landed { animation: tap-pop .8s var(--spring) backwards; }
/* nothing to spin: said plainly, in a dashed slot where the pick would be */
.spin-empty {
  padding: 18px 16px; border-radius: var(--r-m); text-align: center; text-wrap: balance;
  font: 700 18px/1.35 var(--font-display); letter-spacing: -.01em; color: var(--text);
  border: 1.5px dashed rgba(220, 210, 255, .4); background: rgba(255, 255, 255, .025);
}
.spin-empty a { color: var(--pink-soft); text-decoration-color: rgba(255, 182, 220, .5); text-underline-offset: 3px; }
.spin-form { margin: 0; }
.spin-btn { min-height: 58px; font: 760 18px/1 var(--font-display); letter-spacing: -.01em; }
.spin-btn::before { content: ""; flex: none; width: 19px; height: 19px; background: currentColor; -webkit-mask: var(--i-dice) center / contain no-repeat; mask: var(--i-dice) center / contain no-repeat; }
.spin-btn:disabled {
  cursor: not-allowed; color: var(--text-3); filter: none; transform: none; animation: none;
  background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(214, 200, 255, .14);
}
/* once there's a pick, it's the star: Spin again steps back to glass */
.pick + .spin-form .spin-btn {
  color: var(--text); font-weight: 680; animation: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .06));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(214, 200, 255, .16), 0 8px 20px -10px rgba(0, 0, 0, .8);
}

/* the games you've all got: who vetoed what, and your one veto */
.cands { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cand {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; align-content: center; gap: 6px 12px;
  min-height: 62px; padding: 9px 9px 9px 16px; border-radius: 18px;
  background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(214, 200, 255, .1);
}
.cand-name { grid-column: 1; display: flex; align-items: center; gap: 9px; font: 680 16.5px/1.25 var(--font-display); letter-spacing: -.01em; color: var(--text); overflow-wrap: anywhere; }
.vetoes { grid-column: 1; display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; }
.cand-info { grid-column: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cand-form { grid-column: 2; margin: 0; }
/* who still has to download it: amber, with a download arrow */
.cand-dl { display: flex; align-items: center; gap: 6px; font: 620 13px/1.3 var(--font); color: #ffd99a; }
.cand-dl::before { content: ""; flex: none; width: 13px; height: 13px; background: currentColor; -webkit-mask: var(--i-down) center / contain no-repeat; mask: var(--i-down) center / contain no-repeat; }
.cand-out .cand-name { color: var(--text-3); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: rgba(255, 163, 163, .75); }
/* tonight's game in the list: a live dot, and the card's pink */
.cand-pick { background: linear-gradient(90deg, rgba(255, 79, 163, .17), rgba(139, 108, 255, .07)); box-shadow: inset 0 0 0 1.5px rgba(255, 150, 210, .55), 0 0 22px -10px rgba(255, 79, 163, .7); }
.cand-pick .cand-name::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 10px rgba(255, 79, 163, .95); }
.veto-btn { min-height: 44px; padding: 0 15px 0 13px; gap: 7px; font-size: 14.5px; }
.veto-btn::before { content: ""; flex: none; width: 11px; height: 11px; background: var(--no); -webkit-mask: var(--i-cross) center / contain no-repeat; mask: var(--i-cross) center / contain no-repeat; }
/* your veto: Undo, outlined in the can't red */
.veto-mine { padding: 0 16px; color: var(--no); background: var(--no-wash); box-shadow: inset 0 0 0 1px var(--no-line); }
.veto-mine::before { display: none; }

/* the library and the suggestions: add a game, then each game with where everyone is with it */
:root {
  --i-ext: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 3.5h-3v9h9v-3M9.5 2.5h4v4M13.5 2.5 7.5 8.5' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2v8.5M4.5 7 8 10.5 11.5 7M3 13.5h10' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* the suggestions: lit violet from the far corner, so the two lists never blur together */
.suggested { background: radial-gradient(110% 70% at 100% 0%, rgba(139, 108, 255, .16), rgba(139, 108, 255, 0) 60%), var(--grad-card), var(--surface); }
.add-game { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.add-label { padding-left: 2px; font: 750 11.5px/1.2 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.add-game .row { gap: 8px; }
.add-input {
  -webkit-appearance: none; appearance: none; min-width: 0; height: 52px; margin: 0; padding: 0 16px; border: 0; border-radius: 16px;
  color: var(--text); font: 600 16px/1 var(--font); caret-color: var(--pink);
  background: var(--sunk); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(214, 200, 255, .18);
  transition: box-shadow .25s var(--ease);
}
.add-input::placeholder { color: var(--text-3); opacity: 1; }
.add-input:focus { box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5), inset 0 0 0 1.5px rgba(255, 150, 210, .75), 0 0 20px -6px rgba(255, 79, 163, .6); }
.add-game .btn { min-height: 52px; padding: 0 22px; }
.add-btns { margin-top: 4px; }
.add-btns .btn { padding: 0 14px; }
.games { list-style: none; margin: 0; padding: 0; }
.games-none { padding: 2px; font-style: italic; color: var(--text-3); }
.game {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 12px;
  padding: 14px 2px 12px 4px; border-top: 1px solid var(--hair);
}
.game-name { grid-column: 1; grid-row: 1; font: 650 16px/1.25 var(--font-display); color: var(--text); overflow-wrap: anywhere; }
.game-who { grid-column: 2; grid-row: 1; gap: 5px; }
.game > :not(.game-name, .game-who) { grid-column: 1 / -1; } /* name and chips on top; the rest full width, in order */
.game-who .chip { width: 26px; height: 26px; border-radius: 9px; border-width: 1.25px; font-size: 12px; }
/* interested: a hollow pink ring; bought: lit; downloaded: lit, with a tick (and the words, for screen readers and on hover) */
.chip-int { border-style: solid; border-color: rgba(255, 150, 210, .85); color: var(--pink-soft); background: rgba(255, 79, 163, .1) border-box; }
.game-who .chip-in { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 4px 10px -5px rgba(255, 79, 163, .8); }
.game-who .chip-in::after { display: none; }
.game-who .chip-dl::after { display: block; right: -5px; bottom: -5px; width: 14px; height: 14px; background-size: 8px; box-shadow: 0 0 0 1.5px #1a1340, 0 0 8px rgba(47, 229, 239, .5); }
/* the key to the chips */
.game-key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: -8px; }
.gk { position: relative; display: inline-block; flex: none; width: 15px; height: 15px; margin-left: 8px; border-radius: 5px; }
.gk:first-child { margin-left: 0; }
.gk-int { background: rgba(255, 79, 163, .1); box-shadow: inset 0 0 0 1.5px rgba(255, 150, 210, .85); }
.gk-in, .gk-dl { background: var(--sunset); }
.gk-dl::after { content: ""; position: absolute; right: -5px; bottom: -5px; width: 11px; height: 11px; border-radius: 50%; background: var(--i-check-ink) center / 7px no-repeat, var(--cool); box-shadow: 0 0 0 1.5px #1a1340; }
/* my toggles: a box each, ticked when it's on (pink for interested, the sunset for bought, cyan for downloaded) */
.game-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; min-width: 0; }
.game-form { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.tog { min-height: 44px; padding: 0 13px 0 10px; gap: 7px; font-size: 14px; }
.tog::before { content: ""; flex: none; width: 17px; height: 17px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px rgba(225, 215, 255, .55); }
.tog[aria-pressed="true"]::before { background: var(--i-check-ink) center / 11px no-repeat, var(--cool); box-shadow: 0 0 10px rgba(47, 229, 239, .5); }
.tog-int[aria-pressed="true"] { color: var(--pink-soft); background: rgba(255, 79, 163, .1); box-shadow: inset 0 0 0 1px rgba(255, 150, 210, .45); }
.tog-int[aria-pressed="true"]::before { background-image: var(--i-check-ink), linear-gradient(#ffb6dc, #ff4fa3); box-shadow: 0 0 10px rgba(255, 79, 163, .5); }
.tog-buy[aria-pressed="true"] { color: #ffd2b0; background: rgba(255, 135, 96, .1); box-shadow: inset 0 0 0 1px rgba(255, 170, 130, .45); }
.tog-buy[aria-pressed="true"]::before { background-image: var(--i-check-ink), var(--sunset); box-shadow: 0 0 10px rgba(255, 110, 120, .55); }
.tog-dl[aria-pressed="true"] { color: var(--cyan-soft); background: rgba(47, 229, 239, .1); box-shadow: inset 0 0 0 1px rgba(150, 240, 248, .42); }
/* its Steam page (or a search), and the link to add or change, which opens full width */
.steam-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; border-radius: 8px;
  font: 650 14px/1.2 var(--font); color: var(--cyan-soft); text-decoration: underline; text-decoration-color: rgba(152, 243, 248, .4); text-underline-offset: 3px;
}
.steam-link::after { content: ""; flex: none; width: 12px; height: 12px; background: currentColor; -webkit-mask: var(--i-ext) center / contain no-repeat; mask: var(--i-ext) center / contain no-repeat; }
.steam-find { color: var(--text-2); text-decoration-color: rgba(214, 205, 245, .4); }
.steam-edit { min-width: 0; }
.steam-edit[open] { flex-basis: 100%; }
.steam-sum {
  display: inline-flex; align-items: center; min-height: 44px; border-radius: 8px; list-style: none; cursor: pointer;
  font: 600 14px/1.2 var(--font); color: var(--text-2); text-decoration: underline; text-decoration-color: rgba(214, 205, 245, .4); text-underline-offset: 3px;
}
.steam-sum::-webkit-details-marker { display: none; }
.steam-sum:hover, .steam-link:hover { color: var(--pink-soft); text-decoration-color: currentColor; }
.steam-form { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 2px; }
.steam-form .row { gap: 8px; }
.steam-form .btn { min-height: 52px; padding: 0 20px; }
/* refused: what was wrong, in the can't red, with a cross */
.form-err {
  display: flex; align-items: flex-start; gap: 9px; padding: 11px 14px; border-radius: 14px;
  font: 640 14.5px/1.4 var(--font); color: var(--no); background: var(--no-wash); box-shadow: inset 0 0 0 1px var(--no-line);
}
.form-err::before { content: ""; flex: none; width: 13px; height: 13px; margin-top: 3px; background: currentColor; -webkit-mask: var(--i-cross) center / contain no-repeat; mask: var(--i-cross) center / contain no-repeat; }

/* ---------- ratings, the daily picks, and Post to Discord ---------- */

:root {
  --i-stars5: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 16'%3E%3Cpath d='M8 1.3l2.05 4.3 4.7.55-3.45 3.25.9 4.65L8 11.75l-4.15 2.3.9-4.65L1.3 6.15l4.7-.55zM24 1.3l2.05 4.3 4.7.55-3.45 3.25.9 4.65L24 11.75l-4.15 2.3.9-4.65L17.3 6.15l4.7-.55zM40 1.3l2.05 4.3 4.7.55-3.45 3.25.9 4.65L40 11.75l-4.15 2.3.9-4.65L33.3 6.15l4.7-.55zM56 1.3l2.05 4.3 4.7.55-3.45 3.25.9 4.65L56 11.75l-4.15 2.3.9-4.65L49.3 6.15l4.7-.55zM72 1.3l2.05 4.3 4.7.55-3.45 3.25.9 4.65L72 11.75l-4.15 2.3.9-4.65L65.3 6.15l4.7-.55z'/%3E%3C/svg%3E");
  --i-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.3l2.05 4.3 4.7.55-3.45 3.25.9 4.65L8 11.75l-4.15 2.3.9-4.65L1.3 6.15l4.7-.55z'/%3E%3C/svg%3E");
  --i-horn2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 6h2.5l7-3.5v11L4.5 10H2z' /%3E%3Cpath d='M5 10.5l1.3 3.5h2l-1-3.2' /%3E%3Cpath d='M13 6.2v3.6' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* everyone's ratings: the average in amber stars (and in words), who gave what, Steam playtime */
.game-rate { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font: 560 13.5px/1.35 var(--font); color: var(--text-2); }
.stars { --v: 0%; flex: none; width: 80px; height: 16px; background: linear-gradient(90deg, #ffc86a var(--v), rgba(225, 215, 255, .2) var(--v)); -webkit-mask: var(--i-stars5) 0 0 / 80px 16px no-repeat; mask: var(--i-stars5) 0 0 / 80px 16px no-repeat; filter: drop-shadow(0 0 5px rgba(255, 181, 71, .55)); }
.stars[data-v="1"] { --v: 10%; }
.stars[data-v="2"] { --v: 20%; }
.stars[data-v="3"] { --v: 30%; }
.stars[data-v="4"] { --v: 40%; }
.stars[data-v="5"] { --v: 50%; }
.stars[data-v="6"] { --v: 60%; }
.stars[data-v="7"] { --v: 70%; }
.stars[data-v="8"] { --v: 80%; }
.stars[data-v="9"] { --v: 90%; }
.stars[data-v="10"] { --v: 100%; }
.rate-avg { font: 760 15px/1 var(--font-display); color: #ffd99a; }
.rate-of { font: 600 12px/1 var(--font); letter-spacing: .04em; color: var(--text-3); }
.rate-who, .rate-time { color: var(--text-2); }
.rate-time { flex-basis: 100%; color: var(--text-3); }
.rate-none { font-style: italic; color: var(--text-3); }
/* your rating: a picker that opens. Ten 44px+ buttons, half a star to five, the one you gave lit amber */
.rate-pick { min-width: 0; }
.rate-pick[open] { flex-basis: 100%; }
.rate-form { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 2px; }
.rate-stars { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.rate-r { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.rate-l {
  display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 48px; border-radius: 14px; cursor: pointer;
  font: 700 15px/1 var(--font); color: var(--text-2); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(214, 200, 255, .16);
  -webkit-tap-highlight-color: transparent;
}
.rate-l::after { content: ""; flex: none; width: 12px; height: 12px; background: currentColor; -webkit-mask: var(--i-star) center / contain no-repeat; mask: var(--i-star) center / contain no-repeat; opacity: .7; }
.rate-r:checked + .rate-l { color: var(--ink); background: linear-gradient(180deg, #ffe0a3, #ffb547); box-shadow: 0 0 16px -4px rgba(255, 181, 71, .8); }
.rate-r:checked + .rate-l::after { opacity: 1; }
.rate-r:focus-visible + .rate-l { outline: 2.5px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) { .rate-l:hover { color: var(--text); background: rgba(255, 255, 255, .09); } }
.rate-btns { gap: 8px; }
.rate-btns .btn { min-height: 48px; }
.rate-sum { color: #ffd99a; text-decoration-color: rgba(255, 217, 154, .45); }

/* the daily picks: lit amber from the corner; each a slip (as in Mbao suggests) with what kind it is */
.picks { gap: 12px; background: radial-gradient(110% 70% at 100% 0%, rgba(255, 181, 71, .14), rgba(255, 181, 71, 0) 60%), var(--grad-card), var(--surface); }
.picks > .small { margin-top: -4px; }
.pk { gap: 5px; }
.pk-kind { align-self: flex-start; padding: 4px 9px 3px; border-radius: 999px; font: 760 10.5px/1.2 var(--font); letter-spacing: .14em; text-transform: uppercase; }
.pk-play { color: var(--cyan-soft); background: rgba(47, 229, 239, .12); box-shadow: inset 0 0 0 1px rgba(150, 240, 248, .4); }
.pk-buy { color: #ffd99a; background: rgba(255, 181, 71, .12); box-shadow: inset 0 0 0 1px rgba(255, 217, 154, .4); }
.ms-price { font: 740 14px/1.3 var(--font); color: #ffd99a; }

/* Post to Discord: a small glass button with a loudhailer; once it's gone, a tick and the words */
.push-form { margin: 0; }
.push-btn { min-height: 44px; padding: 0 14px 0 12px; gap: 7px; font-size: 14px; }
.push-btn::before { content: ""; flex: none; width: 15px; height: 15px; background: currentColor; -webkit-mask: var(--i-horn2) center / contain no-repeat; mask: var(--i-horn2) center / contain no-repeat; }
.push-done { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font: 650 13.5px/1.2 var(--font); color: var(--cyan-soft); }
.push-done::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--i-check-ink) center / 10px no-repeat, var(--cool); }

/* ---------- Mbao suggests, and Steam ---------- */

:root {
  --i-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 7.5V5a3.5 3.5 0 0 1 7 0v2.5' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3Crect x='2.5' y='7' width='11' height='8.5' rx='1.5'/%3E%3C/svg%3E");
  --i-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 14.2S1.8 10.4 1.8 6.1A3.3 3.3 0 0 1 8 4.5a3.3 3.3 0 0 1 6.2 1.6C14.2 10.4 8 14.2 8 14.2z'/%3E%3C/svg%3E");
}
/* Mbao suggests: lit cyan from the corner; each one a glass slip with why, its Steam page and the two buttons */
.mbao-suggests, .steam-card { gap: 12px; }
.mbao-suggests > .small, .steam-card > .small { margin-top: -4px; }
.mbao-suggests { background: radial-gradient(110% 70% at 0% 0%, rgba(47, 229, 239, .14), rgba(47, 229, 239, 0) 60%), var(--grad-card), var(--surface); }
.ms-kind { margin-top: 6px; font: 750 11.5px/1.2 var(--font); letter-spacing: .15em; text-transform: uppercase; color: var(--cyan-soft); }
.ms-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ms { display: flex; flex-direction: column; gap: 4px; padding: 12px 12px 4px 14px; border-radius: 18px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(214, 200, 255, .1); }
.ms-name { font: 680 16.5px/1.25 var(--font-display); letter-spacing: -.01em; color: var(--text); overflow-wrap: anywhere; }
.ms-why { font: 520 14px/1.4 var(--font); color: var(--text-2); }
.ms-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; }
.ms-form { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.ms-hide { min-height: 44px; padding: 0 14px 0 12px; gap: 7px; font-size: 14px; }
.ms-hide::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--no); -webkit-mask: var(--i-cross) center / contain no-repeat; mask: var(--i-cross) center / contain no-repeat; }
.ms-age { font-size: 13px; color: var(--text-3); }
.ms-hidden { min-width: 0; }
.ms-hidden-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ms-hid { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-left: 4px; font: 620 14.5px/1.3 var(--font); color: var(--text-2); }
.ms-hid form { margin: 0; }
.ms-hid .btn { min-height: 44px; padding: 0 16px; font-size: 14px; }
/* Steam: who's linked, and your link (or Sync now and Unlink) */
.steam-off { padding: 14px 16px; border-radius: var(--r-m); font: 650 15px/1.4 var(--font); color: var(--text-2); border: 1.5px dashed rgba(220, 210, 255, .35); }
.steam-people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.steam-person { display: flex; flex-wrap: wrap; gap: 2px 8px; padding: 9px 12px; border-radius: 14px; font: 500 14px/1.4 var(--font); color: var(--text-2); background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(214, 200, 255, .08); }
.steam-person b { color: var(--text); font-weight: 700; }
.steam-mine { gap: 8px; }
.steam-mine form { margin: 0; }
.steam-mine .btn { min-height: 48px; }
.steam-mine .btn:disabled { cursor: default; color: var(--text-3); filter: none; transform: none; }
.steam-unlink { color: var(--no); }
.steam-link-form { margin-top: 2px; }
/* on someone's Steam wishlist: a pink heart line under the name */
.game-wish { display: flex; align-items: center; gap: 6px; margin-top: -4px; font: 620 13px/1.3 var(--font); color: var(--pink-soft); }
.game-wish::before { content: ""; flex: none; width: 12px; height: 12px; background: currentColor; -webkit-mask: var(--i-heart) center / contain no-repeat; mask: var(--i-heart) center / contain no-repeat; }
/* what Steam set: pressed, with a padlock instead of a tick, and it doesn't budge */
.tog-locked, .tog-locked:hover, .tog-locked:active { cursor: default; filter: none; transform: none; }
.tog.tog-locked::before { background: currentColor; -webkit-mask: var(--i-lock) center / 11px no-repeat; mask: var(--i-lock) center / 11px no-repeat; box-shadow: none; }

/* ---------- game night: What are we playing?, Settle it, the Soundboard ---------- */

/* a strip of three glass tabs at the top of the results, the days and each of those pages (the one
   you're on lit up). Side by side with room; on a phone, the icon over the word. Icons: data-gn */
:root {
  --i-speaker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 6.2h2.6L9 2.8v10.4L4.6 9.8H2z' fill='%23000'/%3E%3Cpath d='M11.4 5.4c.9.7 1.4 1.6 1.4 2.6s-.5 1.9-1.4 2.6M12.9 3.6c1.4 1.1 2.2 2.7 2.2 4.4s-.8 3.3-2.2 4.4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.gn { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.gn .gn-link { min-width: 0; min-height: 48px; padding: 0 10px; gap: 8px; font-size: 15px; font-weight: 680; }
.gn-link::before {
  content: ""; flex: none; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--gn-i, var(--i-dice)) center / contain no-repeat; mask: var(--gn-i, var(--i-dice)) center / contain no-repeat;
}
.gn-link[data-gn="games"] { --gn-i: var(--i-pad); }
.gn-link[data-gn="settle"] { --gn-i: var(--i-dice); }
.gn-link[data-gn="soundboard"] { --gn-i: var(--i-speaker); }
/* you are here: lit pink from inside, like the look you've picked */
.gn-link[aria-current="page"] {
  color: #fff; cursor: default; filter: none; transform: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .05)), #2a2166;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 0 0 1.5px rgba(255, 150, 210, .6), 0 0 22px -6px rgba(255, 79, 163, .7);
}
.gn-link[aria-current="page"]::before { background: var(--pink-soft); }
.gn { view-transition-name: fx-gn; } /* from page to page, the strip stays put */
@media (max-width: 480px) {
  .gn { gap: 6px; }
  .gn .gn-link { flex-direction: column; gap: 4px; min-height: 58px; padding: 6px 4px; border-radius: 18px; font-size: 13.5px; line-height: 1.1; }
}

/* ---------- settle it: who's in, then a card per tool, each result in a lit well ---------- */

/* each card has its own neon (as r, g, b): the coin pink, dice violet, teams cyan, first amber */
.st-card { gap: 14px; --st-tone: 255, 79, 163; --st-tone-soft: #ffb6dc; }
.st-names-card, .st-card[data-tool="dice"] { --st-tone: 139, 108, 255; --st-tone-soft: #d0c2ff; }
.st-card[data-tool="teams"] { --st-tone: 47, 229, 239; --st-tone-soft: #98f3f8; }
.st-card[data-tool="first"] { --st-tone: 255, 181, 71; --st-tone-soft: #ffd99a; }
.st-card::before { /* a neon rim along the top edge, in the card's colour */
  content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 1.5px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, rgba(var(--st-tone), 0), rgba(var(--st-tone), 1) 30%, rgba(var(--st-tone), 1) 70%, rgba(var(--st-tone), 0));
}
.st-card [hidden] { display: none !important; } /* the option rows set display; hidden must still hide them */
.st-top { display: flex; flex-direction: column; gap: 4px; }
.st-card h2 { display: flex; align-items: center; gap: 10px; }
.st-card h2::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: rgb(var(--st-tone)); box-shadow: 0 0 10px rgba(var(--st-tone), .9); }
.st-names-card > .small { margin-top: -10px; }

/* who's in: the group as lit pills (tap one to leave them out tonight), guests with a cross */
.st-names { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.st-name {
  display: inline-flex; align-items: center; min-width: 0; max-width: 100%; min-height: 46px; border-radius: 999px;
  border: 1.5px solid transparent; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(214, 200, 255, .2);
}
.st-regular { background: linear-gradient(180deg, rgba(139, 108, 255, .3), rgba(139, 108, 255, .14)); box-shadow: inset 0 0 0 1px rgba(203, 187, 255, .45), 0 0 18px -8px rgba(139, 108, 255, .9); }
.st-who {
  appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; margin: 0; padding: 0 17px 0 9px;
  border: 0; border-radius: 999px; background: none; color: var(--text); font: 680 16px/1.2 var(--font); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.st-who::before { /* in: a lit tick */
  content: ""; flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--i-check-ink) center / 13px no-repeat, var(--cool); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 12px rgba(47, 229, 239, .5);
}
/* left out tonight: dashed, struck through, an empty ring and the word "out" */
.st-name.is-out { background: rgba(255, 255, 255, .02); border-color: rgba(220, 210, 255, .42); border-style: dashed; box-shadow: none; }
.is-out .st-who { color: var(--text-3); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: rgba(255, 163, 163, .7); }
.is-out .st-who::before { background: none; box-shadow: inset 0 0 0 1.5px rgba(220, 210, 255, .45); }
.is-out .st-who::after { content: "out"; content: "out" / ""; display: inline-block; font: 750 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--no); }
.st-guest { padding-left: 16px; }
.st-name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 650 16px/1.2 var(--font); color: var(--text); }
.st-x {
  appearance: none; -webkit-appearance: none; flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0;
  border: 0; border-radius: 50%; background: none; font: 400 22px/1 var(--font); color: var(--text-3); cursor: pointer;
}
@media (hover: hover) {
  .st-x:hover { color: var(--pink-soft); background: rgba(255, 79, 163, .14); }
  .st-who:hover { color: #fff; }
}
.st-add .add-input::placeholder { color: var(--text-3); opacity: 1; }
.st-names-note { margin-top: -2px; font: 640 14.5px/1.35 var(--font); color: var(--pink-soft); }
.st-names-note:empty { display: none; }

/* the options: how many dice, which dice, how many teams */
.st-opts { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.st-seg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.st-seg-label { margin-right: 4px; font: 750 11.5px/1.2 var(--font); letter-spacing: .15em; text-transform: uppercase; color: var(--text-2); }
.st-seg-btn {
  appearance: none; -webkit-appearance: none; min-width: 46px; min-height: 46px; margin: 0; padding: 0 12px; border: 0; border-radius: 14px;
  font: 700 16px/1 var(--font); color: var(--text-2); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(214, 200, 255, .16);
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .2s var(--ease), box-shadow .2s var(--ease);
}
@media (hover: hover) { .st-seg-btn:hover { color: var(--text); background: rgba(255, 255, 255, .09); } }
.st-seg-btn[aria-pressed="true"] { color: #fff; background: rgba(var(--st-tone), .28); box-shadow: inset 0 0 0 1.5px rgba(var(--st-tone), .85), 0 0 16px -4px rgba(var(--st-tone), .7); }

/* a result: a lit well in the card's colour */
.st-result {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  min-height: 136px; padding: 18px 14px; border-radius: var(--r-m); text-align: center;
  background: radial-gradient(80% 90% at 50% 0%, rgba(var(--st-tone), .14), rgba(var(--st-tone), 0) 70%), var(--sunk);
  box-shadow: inset 0 0 0 1px rgba(214, 200, 255, .1);
}
.st-text { min-width: 0; max-width: 100%; }
.st-main {
  font: 800 clamp(26px, 7.6vw, 34px)/1.1 var(--font-display); letter-spacing: -.02em; color: #fff;
  text-shadow: 0 0 18px rgba(var(--st-tone), .65); text-wrap: balance; overflow-wrap: anywhere;
}
.st-note { margin-top: 6px; font: 500 15px/1.4 var(--font); color: var(--text-2); text-wrap: balance; overflow-wrap: anywhere; }
.st-note:empty { display: none; }
.st-result.is-empty .st-main { font-size: 22px; font-weight: 700; color: var(--text-2); text-shadow: none; }
.st-result.is-empty .st-note { color: var(--text-3); }
.st-actions { display: flex; gap: 10px; }
.st-actions .btn { min-height: 54px; }
.st-go { flex: 1; font-size: 18px; }
.st-actions .st-go { animation: none; } /* five lit buttons on one page: no glint running across them all */
.st-alt { flex: none; padding: 0 18px; }

/* the coin: a glossy neon ball (the brand mark's), pink for heads, cyan for tails */
.st-card[data-tool="coin"] .st-result { flex-direction: row; gap: 20px; }
.st-card[data-tool="coin"] .st-text { text-align: left; }
.st-coin {
  flex: none; display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%;
  font: 800 36px/1 var(--font-display); color: var(--text-3); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 2px rgba(214, 200, 255, .22);
}
.st-coin[data-side="heads"] {
  color: var(--ink); background: radial-gradient(circle at 34% 28%, #ffffff 0, #ffd2ea 14%, #ff4fa3 52%, #a8125c 100%);
  box-shadow: inset 0 -4px 0 rgba(60, 0, 30, .25), 0 0 30px -4px rgba(255, 79, 163, .8);
}
.st-coin[data-side="tails"] {
  color: var(--ink); background: radial-gradient(circle at 34% 28%, #ffffff 0, #d2fdff 14%, #2fe5ef 52%, #0b7894 100%);
  box-shadow: inset 0 -4px 0 rgba(0, 40, 60, .25), 0 0 30px -4px rgba(47, 229, 239, .75);
}

/* the dice: dark glass, lit edges, glowing pips; a d20 is a violet hexagon */
.st-dice { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.st-dice:empty { display: none; }
.st-die {
  display: grid; place-items: center; width: 60px; height: 60px; border-radius: 15px;
  background: linear-gradient(160deg, rgba(48, 36, 110, .95), rgba(22, 16, 58, .95));
  box-shadow: inset 0 0 0 1.5px rgba(203, 187, 255, .6), inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 18px -4px rgba(139, 108, 255, .8);
}
.st-pips { display: grid; grid-template-columns: repeat(3, 10px); grid-template-rows: repeat(3, 10px); gap: 5px; }
.st-pip { width: 10px; height: 10px; border-radius: 50%; }
.st-pip.is-on { background: #fff0f8; box-shadow: 0 0 8px rgba(255, 79, 163, .95), 0 0 2px rgba(255, 182, 220, 1); }
.st-die[data-sides="20"] {
  border-radius: 0; clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  background: linear-gradient(160deg, #b07cff, #5a3ad0 70%, #3d2596); box-shadow: none;
}
.st-dice[data-sides="20"] { filter: drop-shadow(0 0 10px rgba(139, 108, 255, .7)); }
.st-die-n { font: 800 23px/1 var(--font-display); color: #fff; text-shadow: 0 1px 0 rgba(28, 15, 38, .5); }
.st-die[data-v="20"] .st-die-n { color: #fff3d6; text-shadow: 0 0 10px rgba(255, 181, 71, .95); }

/* the teams: a glass box each, pink, cyan and amber */
.st-teams { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; width: 100%; text-align: left; }
.st-teams:empty { display: none; }
.st-team {
  --st-tone: 255, 79, 163; --st-tone-soft: #ffb6dc;
  min-width: 0; padding: 12px 10px 14px 12px; border-radius: 14px;
  background: rgba(var(--st-tone), .08); box-shadow: inset 0 0 0 1px rgba(var(--st-tone), .4);
}
.st-team:nth-child(2) { --st-tone: 47, 229, 239; --st-tone-soft: #98f3f8; }
.st-team:nth-child(3) { --st-tone: 255, 181, 71; --st-tone-soft: #ffd99a; }
.st-team-name { margin: 0 0 8px; font: 750 12px/1.2 var(--font); letter-spacing: .18em; text-transform: uppercase; color: var(--st-tone-soft); }
.st-team-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.st-team-member { font: 650 16px/1.3 var(--font); color: var(--text); overflow-wrap: anywhere; }

/* the full order: numbered, first on the sunset */
.st-order { list-style: none; counter-reset: place; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 6px; text-align: left; }
.st-order-item {
  counter-increment: place; display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 42px; padding: 6px 12px 6px 7px; border-radius: 12px;
  font: 650 15.5px/1.25 var(--font); color: var(--text); background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(214, 200, 255, .1);
  overflow-wrap: anywhere;
}
.st-order-item::before {
  content: counter(place); flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  font: 750 13px/1 var(--font); color: var(--text-2); box-shadow: inset 0 0 0 1px rgba(214, 200, 255, .3);
}
.st-order-item:first-child::before { color: var(--ink); background: var(--sunset); box-shadow: 0 0 12px -2px rgba(255, 79, 163, .8); }

/* the reveal: once, 600ms (settle.js adds .is-revealing; night.js throws sparks off it too) */
.st-result.is-revealing { animation: st-glow .6s var(--ease); }
.is-revealing .st-main { animation: st-pop .5s var(--spring) both; }
.is-revealing .st-note { animation: st-fade .45s var(--ease) .1s both; }
.is-revealing .st-coin { animation: st-flip .55s var(--ease) both; }
.is-revealing .st-die { animation: st-tumble .45s var(--spring) both; }
.is-revealing .st-die:nth-child(2) { animation-delay: .04s; }
.is-revealing .st-die:nth-child(3) { animation-delay: .08s; }
.is-revealing .st-die:nth-child(4) { animation-delay: .12s; }
.is-revealing .st-team, .is-revealing .st-order-item { animation: st-fade .4s var(--ease) both; }
.is-revealing .st-team:nth-child(2), .is-revealing .st-order-item:nth-child(2) { animation-delay: .05s; }
.is-revealing .st-team:nth-child(3), .is-revealing .st-order-item:nth-child(3) { animation-delay: .1s; }
.is-revealing .st-order-item:nth-child(n+4) { animation-delay: .15s; }
@keyframes st-glow { 30% { box-shadow: inset 0 0 0 1px rgba(var(--st-tone), .7), 0 0 34px -6px rgba(var(--st-tone), .7); } }
@keyframes st-pop { from { opacity: 0; transform: scale(.72); } }
@keyframes st-fade { from { opacity: 0; transform: translateY(6px); } }
@keyframes st-flip { from { transform: perspective(400px) rotateY(540deg) scale(.7); } }
@keyframes st-tumble { from { opacity: 0; transform: translateY(-16px) rotate(-120deg) scale(.6); } }

/* ---------- the PIN page: just the card (lookmenu.css styles it), in the middle of the night ---------- */

.pin-page .pin-gate { max-width: none; padding: 24px max(var(--gutter), env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left)); }
.pin-page .pin-title { text-shadow: none; } /* the heading's own glow is enough */

/* ---------- the bottom bar ---------- */

.actionbar {
  position: fixed; inset: auto 0 0 0; z-index: 20; /* above the slider thumbs */
  display: flex; justify-content: center; pointer-events: none;
  padding: 22px max(var(--gutter), env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
  /* a scrim, not a backdrop blur: the lights drift behind the bar all the time, and a blur there
     would have to be redrawn every frame */
  background: linear-gradient(to top, rgba(9, 7, 28, .97) 0%, rgba(9, 7, 28, .86) 52%, rgba(9, 7, 28, 0) 100%);
}
.actionbar > * { pointer-events: auto; width: 100%; max-width: 528px; }
.actionbar .btn { min-height: 56px; font-size: 17px; }
.actionbar .row { gap: 10px; }
/* on the results the card above is the star: the bar steps back to glass (unless nothing's on) */
.page-results:not(:has(.verdict-card)) .actionbar .btn-primary {
  color: var(--text); font-weight: 650;
  background: linear-gradient(180deg, rgba(62, 50, 128, .92), rgba(38, 30, 86, .92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), inset 0 0 0 1px rgba(214, 200, 255, .14), 0 14px 30px -12px rgba(0, 0, 0, .95);
  animation: none;
}
.page-results .actionbar .btn-primary::before {
  content: ""; width: 17px; height: 17px; flex: none; background: currentColor;
  -webkit-mask: var(--i-cal) center / contain no-repeat; mask: var(--i-cal) center / contain no-repeat;
}

/* ---------- footer: the look switch ---------- */

.looks { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; }
.looks-label { font: 700 11px/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); }
.looks-opts {
  display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px;
  background: var(--sunk); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(214, 200, 255, .08);
}
.look-opt {
  appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 15px 0 12px; margin: 0; border: 0; border-radius: 999px;
  background: transparent; color: var(--text-2); font: 600 14px/1 var(--font); white-space: nowrap;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .25s var(--ease), color .2s var(--ease), transform .45s var(--spring);
}
.look-opt:hover { color: var(--text); }
.look-opt:active { transform: scale(.95); }
.look-opt:focus-visible { outline-offset: 1px; }
/* each option shows a swatch of its look */
.look-opt::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; }
.look-night::before { background: conic-gradient(from 210deg, #ff4fa3, #8b6cff, #2fe5ef, #ff4fa3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.look-frizzy::before { background: linear-gradient(135deg, #808080 0 50%, #55ff00 50% 100%); box-shadow: inset 0 0 0 1.5px #000, 0 0 0 1px rgba(255, 255, 255, .3); }
.look-tom::before { background: conic-gradient(from 20deg, #ff00d4, #ffe600, #00e5ff, #ff00d4); box-shadow: 0 0 0 1px rgba(255, 255, 255, .3); }
.look-opt[aria-pressed="true"] {
  color: var(--text); font-weight: 700;
  background: linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .06)), #2a2166;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 0 0 1px rgba(255, 150, 210, .5), 0 4px 14px -2px rgba(0, 0, 0, .6), 0 0 20px -6px rgba(255, 79, 163, .6);
}
.look-opt[aria-pressed="true"]::before { box-shadow: 0 0 0 2px #2a2166, 0 0 0 3.5px rgba(255, 255, 255, .85); }
.foot-line { font-size: 12.5px; color: var(--text-2); }
.foot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-2); text-decoration: underline; text-decoration-color: rgba(214, 205, 245, .4); text-underline-offset: 3px; border-radius: 6px; }
.foot a:hover { color: var(--pink-soft); text-decoration-color: currentColor; }

/* ---------- motion ---------- */

/* one-shot entrances: everything settles up into place with a short stagger, done inside ~0.7s.
   Fill backwards only, so hovers still work after */
.top { animation: drop .5s var(--ease) backwards; }
main > * { animation: rise .55s var(--ease) backwards; }
main > :nth-child(2) { animation-delay: .05s; }
main > :nth-child(3) { animation-delay: .1s; }
main > :nth-child(n+4) { animation-delay: .15s; }
main > .flash { animation: toast .6s var(--spring) backwards; }
.flash-ok::before { animation: badge-pop .5s var(--spring) .25s backwards; }
.up { animation: rise .45s var(--ease) .14s backwards; }
.up:nth-child(2) { animation-delay: .2s; }
.up:nth-child(n+3) { animation-delay: .26s; }
.days > .day:nth-child(2) { animation: rise .5s var(--ease) .12s backwards; }
.days > .day:nth-child(3) { animation: rise .5s var(--ease) .18s backwards; }

@media (hover: hover) {
  .up:hover { transform: translateY(-2px); }
}

/* the entrances move things into place but never hide them: content is readable from the first
   frame, however slow the device (or a screenshot) is to catch up */
@keyframes rise { from { transform: translateY(16px); } }
@keyframes drop { from { transform: translateY(-8px); } }
@keyframes toast { from { transform: translateY(-14px) scale(.88); } }
@keyframes reveal { from { transform: translateY(-8px); } }
@keyframes ticket { from { transform: translateY(16px) scale(.96); } }
@keyframes sheen { from { background-position: 160% 0; } to { background-position: -60% 0; } }
@keyframes shine { 0% { background-position: 160% 0, 0 0; } 20%, 100% { background-position: -60% 0, 0 0; } }
@keyframes foil { from { background-position: 100% 0, 0 0; } to { background-position: 0 0, 100% 0; } }
@keyframes foil-pill { to { background-position: 100% 0; } }
@keyframes drift-a { to { transform: translate(32vw, 20vh) scale(1.1); } }
@keyframes drift-b { to { transform: translate(-36vw, 16vh) scale(.92); } }
@keyframes drift-c { to { transform: translate(40vw, -22vh) scale(1.08); } }
@keyframes turn { to { transform: rotate(1turn); } }
@keyframes bob { 50% { transform: translateY(-2.5px); } }
@keyframes ping { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(2.8); opacity: 0; } }
@keyframes breathe { 50% { opacity: 1; } }
@keyframes tap-pop { from { transform: scale(.955); } }
@keyframes land { from { transform: scale(.8); } }
@keyframes chip-pop { from { transform: scale(.5); } }
@keyframes badge-pop { from { transform: scale(0); } }
@keyframes confetti {
  0% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(.4); animation-timing-function: cubic-bezier(.12, .75, .3, 1); }
  8% { opacity: 1; }
  48% { opacity: 1; transform: translate(calc(var(--x) * .9), var(--y)) rotate(calc(var(--r) * .6)) scale(1); animation-timing-function: cubic-bezier(.45, 0, .85, .55); }
  100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 180px)) rotate(var(--r)) scale(.85); }
}

/* everything stops, and the page still looks finished: the lights hold still, the edge holds its
   colours, the confetti never shows */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .range-track input::-webkit-slider-thumb { transition: none !important; }
  .range-track input::-moz-range-thumb { transition: none !important; }
  .burst { display: none; }
}

/* ---------- sizes ---------- */

/* true squircles where the browser can draw them */
@supports (corner-shape: squircle) {
  .chip { border-radius: 42%; corner-shape: squircle; }
}

@media (max-width: 360px) {
  :root { --gutter: 12px; }
  h1 { font-size: 30px; }
  .prop { padding: 20px 16px 18px; }
  .prop-time { font-size: 36px; }
  .lock { padding: 20px 18px 18px; }
  .lock-day { font-size: 38px; }
  .lock-time { font-size: 20px; }
  .lock-time::after { right: 18px; width: 22px; }
  .lock-day::after { right: 47px; font-size: 7.5px; letter-spacing: .18em; }
  .lock-tag, .lock-day, .lock-time { margin-right: 44px; }
  .lock-tag { letter-spacing: .12em; }
  .chip { width: 40px; height: 40px; }
  .lock .chip { width: 38px; height: 38px; }
  .up { --stub: 122px; }
  .up-day { padding-left: 14px; }
  .up-time { font-size: 15px; padding: 8px 6px; }
  .choices label { font-size: 13px; }
  .tl-head, .tl-row { grid-template-columns: 44px minmax(0, 1fr) 58px; gap: 6px; }
  .day-name { font-size: 16px; }
  .pick-name { font-size: 30px; }
  .cand { padding-left: 13px; gap: 6px 8px; }
  .tog { padding: 0 10px 0 8px; gap: 6px; font-size: 13.5px; }
  .game-acts { column-gap: 10px; }
  .st-card[data-tool="coin"] .st-result { gap: 14px; }
  .st-coin { width: 76px; height: 76px; font-size: 32px; }
  .st-opts { column-gap: 14px; }
  .look-opt { gap: 6px; padding: 0 11px 0 9px; font-size: 13.5px; }
  .look-opt::before { width: 12px; height: 12px; }
}
@media (max-width: 340px) {
  .look-opt::before { display: none; }
  .look-opt { padding: 0 12px; }
}

@media (min-width: 700px) {
  :root { --gutter: 24px; }
  .tl-key { display: flex; flex-wrap: wrap; gap: 6px 8px; }
  .tl-key .key-dash, .tl-key .key-on { margin-left: 8px; }
  .top, main, .foot { max-width: 640px; }
  .actionbar > * { max-width: 592px; }
  main { gap: 26px; }
  h1 { font-size: 46px; }
  .prop { padding: 30px 30px 28px; }
  .prop-time { font-size: 58px; }
  .prop-day { font-size: 19px; }
  .lock { padding: 28px 30px 18px; }
  .lock-day { font-size: 60px; }
  .lock-time { font-size: 26px; }
  .lock-time::after { top: 30px; right: 30px; }
  .lock-day::after { top: 30px; right: 63px; }
  .lock-tag, .lock-day, .lock-time { margin-right: 60px; }
  .up { --stub: 168px; }
  .timeline { padding: 24px 18px 12px; }
  .tl-head, .tl-row { grid-template-columns: 70px minmax(0, 1fr) 92px; gap: 12px; }
  .tl-day { font-size: 12px; }
  .tl-all { font-size: 12px; }
  .day { padding: 20px; }
  .link-btn { top: 13px; right: 12px; } /* keeps Clear on the date's line with the wider padding */
  .pick { padding: 26px 24px 22px; }
  .pick-name { font-size: 46px; }
  .tonight, .library, .suggested { padding: 24px; }
}

/* a desktop: the lights spread out into the margins, and the name runs up the left like a
   giant neon sign with the power off (decoration: screen readers skip it) */
@media (min-width: 1100px) {
  .ambient i:nth-child(1) { --s: 60vw; --x: 14vw; --y: 6vh; }
  .ambient i:nth-child(2) { --s: 52vw; --x: 92vw; --y: 42vh; }
  .ambient i:nth-child(3) { --s: 58vw; --x: 16vw; --y: 100vh; }
}
@media (min-width: 1100px) and (min-height: 560px) {
  .ambient::before {
    --size: min(8.6vh, 96px);
    content: "My balls are out"; content: "My balls are out" / "";
    position: absolute; z-index: 1; left: calc(50% - 320px - var(--size) - 72px); bottom: 7vh;
    writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;
    font: 850 var(--size)/1 var(--font-display); letter-spacing: .02em; text-transform: uppercase;
    color: transparent; -webkit-text-stroke: 1.5px rgba(230, 220, 255, .085);
  }
}

/* more contrast asked for: solid edges, no glass, stronger secondary text */
@media (prefers-contrast: more) {
  :root {
    --text-2: #e6e1fa; --text-3: #d2cced;
    --surface: #17123b; --hair: rgba(230, 220, 255, .3);
    --rim: inset 0 0 0 1.5px rgba(230, 220, 255, .55);
  }
  .actionbar { background: var(--bg); }
  .prop, .verdict-card, .flash, .slot, .tag, .choices, .looks-opts, .me-pill, .tonight, .pick, .cand, .add-input, .st-result, .st-seg-btn, .st-name { box-shadow: inset 0 0 0 1.5px rgba(230, 220, 255, .55); }
  .chip { border-color: rgba(240, 235, 255, .8); }
  .tag-unsaid { border-color: rgba(240, 235, 255, .7); }
  .link-btn { text-decoration-color: currentColor; }
  .ambient { opacity: .6; }
}

/* Windows high contrast: keep every edge and state visible */
@media (forced-colors: active) {
  .card, .day, .up, .prop, .lock, .flash, .btn, .choices, .tag, .pill, .looks-opts, .me-pill, .tl-all-on, .slot, .pick, .cand, .add-input,
  .st-result, .st-name, .st-seg-btn, .st-die, .st-team, .st-order-item, .st-coin { border: 1px solid CanvasText; }
  .pick-name { -webkit-text-fill-color: currentColor; background: none; filter: none; }
  .st-seg-btn[aria-pressed="true"], .gn-link[aria-current="page"], .st-order-item:first-child { outline: 2px solid Highlight; }
  .st-pip.is-on { background: CanvasText; }
  .st-card::before { display: none; }
  .tog[aria-pressed="true"], .veto-mine, .form-err { outline: 2px solid Highlight; }
  .chip-int { border: 2px solid CanvasText; }
  .ambient, .lock::before, .lock::after, .lock-tag::before, .lock-day::before, .prop::before, .prop-when::before, .up::before, body::before, body::after { display: none; }
  .prop { background: Canvas; }
  h1, h2, .verdict, .up-time { -webkit-text-fill-color: currentColor; background: none; filter: none; }
  .look-opt[aria-pressed="true"], .choices input:checked + label { outline: 2px solid Highlight; }
}

/* =========================================================================================
   Effects. The look's script (night.js) adds the fx- classes below while it runs: only on
   night, only when motion is allowed, and it takes every one of them away again when the look
   changes. Without it none of them exist and everything above is the whole look.
   Two effects are pure CSS and live here too: pages morph into each other (view transitions)
   and rows deal in as you scroll (scroll-driven animations). Both sit behind the motion setting
   and @supports, so where they can't run nothing changes.
   ========================================================================================= */

:root { --night-fx: on; } /* tells the script this sheet is live (the look switch loads sheets late) */

/* the sky: a WebGL nebula drawn into the .ambient layer at under half resolution and scaled up.
   It fades in over the CSS lights, which then rest, and come straight back if the GPU drops it */
.fx-sky { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .7s var(--ease); }
.fx-sky.fx-in { opacity: 1; }
.ambient.fx-gl i { visibility: hidden; animation-play-state: paused; }

/* confetti, stars, glossy balls and sparks: one canvas over everything, only while something flies */
.fx-burst { position: fixed; inset: 0; z-index: 30; display: block; width: 100%; height: 100%; pointer-events: none; }
.fx-cannon .burst { display: none; } /* the script's cannon replaces the CSS confetti */

/* 3D cards: the script turns the card; the glare and the ticket's rainbow are layers it slides
   across the face (transform only), blended into the card and clipped to its shape */
.fx-tilt { will-change: transform; }
.fx-sheen, .fx-foil { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.prop > .fx-sheen { grid-area: auto; } /* the whole card, padding included, not just its grid */
.fx-sheen { opacity: 0; mix-blend-mode: screen; }
.fx-sheen i, .fx-foil i { position: absolute; display: block; }
.fx-sheen i {
  left: -50%; top: -50%; width: 200%; height: 200%;
  background: radial-gradient(closest-side, rgba(255, 244, 252, .42), rgba(255, 196, 236, .13) 40%, rgba(255, 196, 236, 0) 70%);
}
.lock > .fx-sheen { mix-blend-mode: soft-light; -webkit-mask: var(--ticket-mask); mask: var(--ticket-mask); }
.lock > .fx-sheen i { background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, .35) 42%, rgba(255, 255, 255, 0) 70%); }
.fx-foil { z-index: -1; opacity: .4; mix-blend-mode: color-dodge; -webkit-mask: var(--ticket-mask); mask: var(--ticket-mask); } /* under the ink: only the foil shifts */
.fx-foil i {
  left: -100%; top: -25%; width: 300%; height: 150%;
  background: repeating-linear-gradient(115deg, #b04a86 0, #b27a52 3.5%, #4fae86 7%, #4b8fc0 10.5%, #7d5cc8 14%, #b04a86 17.5%);
}

/* the big times decode: an aria-hidden copy scrambles over the real text, which stays where it
   is (just transparent) so screen readers only ever read the real time. The copy is a line of
   the same type pulled up exactly one line height, so it sits on the real text's baseline */
.fx-decoding { color: transparent; text-shadow: none; }
.fx-decode { display: block; margin-top: -1em; margin-top: -1lh; white-space: nowrap; pointer-events: none; -webkit-user-select: none; user-select: none; }
.prop-time > .fx-decode { color: #fff; text-shadow: 0 0 30px rgba(255, 79, 163, .45); }
.lock-day > .fx-decode { color: var(--ink); }
.lock-time > .fx-decode { color: rgba(28, 15, 38, .86); }
.fx-decode .fx-q { color: var(--cyan-soft); text-shadow: 0 0 12px rgba(47, 229, 239, .95), 0 0 2px rgba(47, 229, 239, .9); }
.lock .fx-decode .fx-q { color: #6b35e8; text-shadow: none; }
.fx-decode .fx-hit { animation: fx-hit .5s var(--ease); }
.lock .fx-decode .fx-hit { animation-name: fx-hit-ink; }
@keyframes fx-hit { from { color: var(--pink-soft); text-shadow: 0 0 16px #fff, 0 0 30px var(--pink); } }
@keyframes fx-hit-ink { from { color: #e0207f; } }

/* a ripple from the finger on every button */
.fx-ripple { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.fx-ripple i { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .55), rgba(255, 255, 255, .2) 58%, rgba(255, 255, 255, 0)); }
.btn-ink > .fx-ripple, .btn-primary:not(.btn-big) > .fx-ripple, .btn-ghost > .fx-ripple { mix-blend-mode: overlay; }

@media (forced-colors: active) {
  .fx-sheen, .fx-foil, .fx-ripple, .fx-burst { display: none; }
}

/* pages morph into each other (who -> days -> results and back): the brand and your name stay
   put, tonight's card or ticket becomes today's day card (with a spring), the bottom bar
   cross-fades in place, everything else dissolves while the new page rises in */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.brand { view-transition-name: fx-brand; }
.me-pill { view-transition-name: fx-me; }
.prop, .lock, .verdict-card, .day-today { view-transition-name: fx-hero; }
.actionbar { view-transition-name: fx-bar; }
::view-transition-group(*) { animation-duration: .45s; animation-timing-function: var(--ease); }
::view-transition-group(fx-hero) { animation-duration: .62s; animation-timing-function: var(--spring); }
::view-transition-old(root) { animation: fx-out .22s var(--ease) both; }
::view-transition-new(root) { animation: fx-in .42s var(--ease) .05s both; }
@keyframes fx-out { to { opacity: 0; } }
@keyframes fx-in { from { opacity: 0; } }

/* rows deal in as they scroll into view: the coming-up stubs stand up off the table, the
   timeline's bars sweep in and its all-free badges pop. Only faded, never hidden, and anything
   already on screen when the page loads has already arrived */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ups { perspective: 900px; }
    .up {
      transform-origin: 50% 100%;
      animation: rise .45s var(--ease) .14s backwards, fx-deal linear both;
      animation-timeline: auto, view(); animation-range: normal, entry 0% entry 100%;
    }
    .up:nth-child(2) { animation-delay: .2s, 0s; }
    .up:nth-child(n+3) { animation-delay: .26s, 0s; }
    .tl-lanes { animation: fx-sweep linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    .tl-all-on { animation: fx-badge linear both; animation-timeline: view(); animation-range: entry 25% entry 100%; }
  }
}
@keyframes fx-deal { from { opacity: .35; rotate: x 55deg; translate: 0 18px; } }
@keyframes fx-sweep { from { opacity: .3; translate: -24px 0; } }
@keyframes fx-badge { from { opacity: .25; scale: .5; } }

/* SOUNDBOARD_START */
/* ---------- soundboard: the shared soundboard (/soundboard) ----------
   The Soundboard's block in night.css (src/soundboard.ts), from SOUNDBOARD_START to SOUNDBOARD_END:
   edit it here (Frizzy G has its own, hand-made). Mbao's tokens, glass and sunset; every class starts sb-. The first screen is one big
   sunset button ("Turn the sound on"); then the pads, dark glass, each with its own neon (five
   colours in turn, so no row or column repeats), lit up once on every page when one plays, the grid
   as long as it needs to be and the deck stuck to the bottom of the screen. The look's script adds
   rings that spread from a pad that plays (fx-sb-rings, at the end of this block). On every other
   page there's just the header's speaker, and under it the "Tap for sound" chip and the toasts. */

:is(.sb-wake, .sb-board, .sb-wake-note, .sb-pad, .sb-undo, .sb-chip, .sb-originals, .sb-btn)[hidden] { display: none !important; } /* they set display: hidden must still hide them */

/* every page: the speaker in the header (mutes the soundboard on this phone, everywhere); under the
   header, on its right, who pressed what for a few seconds (taps go through it), never near the bottom
   bar; and "Tap for sound", a row of its own between the header and the page, so it covers nothing */
:where(.top:has(.sb-hearing)) { position: relative; }
.top:has(.sb-toast.sb-show) { z-index: 90; }
.sb-hearing { display: contents; }
.sb-hear {
  appearance: none; -webkit-appearance: none; flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%;
  color: #f6f3ff; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(214, 200, 255, .24), 0 10px 26px -14px rgba(0, 0, 0, .9);
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .2s ease, box-shadow .2s ease;
}
.sb-hear::before { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--sb-i-speaker) center / contain no-repeat; mask: var(--sb-i-speaker) center / contain no-repeat; }
@media (hover: hover) { .sb-hear:hover { background: rgba(255, 255, 255, .12); } }
.sb-hear.sb-off { color: var(--pink-soft); background: rgba(255, 79, 163, .16); box-shadow: inset 0 0 0 1px rgba(255, 79, 163, .55); }
.sb-hear.sb-off::before { -webkit-mask-image: var(--sb-i-speaker-off); mask-image: var(--sb-i-speaker-off); }
.sb-toast {
  position: absolute; z-index: 2; top: calc(100% - 2px); right: max(var(--gutter), env(safe-area-inset-right));
  width: max-content; max-width: min(330px, calc(100% - 2 * var(--gutter))); margin: 0; border-radius: 999px; text-align: left;
}
.sb-chip {
  appearance: none; -webkit-appearance: none; align-self: center; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; max-width: calc(100% - 2 * var(--gutter));
  margin: 2px var(--gutter) 6px; padding: 8px 16px 8px 13px; border: 0; border-radius: 999px; text-align: left;
  font: 750 14px/1.25 var(--font); color: var(--ink); background: linear-gradient(135deg, #ffd99a, #ffb547);
  box-shadow: 0 0 0 1px rgba(255, 210, 140, .5), 0 12px 28px -12px rgba(255, 181, 71, .8); cursor: pointer;
}
.sb-chip::before { content: ""; flex: none; width: 17px; height: 17px; background: currentColor; -webkit-mask: var(--sb-i-speaker) center / contain no-repeat; mask: var(--sb-i-speaker) center / contain no-repeat; }
.sb-chip.sb-pulse { animation: sb-pulse .8s var(--spring); }
.sb-toast {
  display: block; padding: 9px 15px; font: 720 14.5px/1.25 var(--font-display); letter-spacing: -.005em; color: var(--text); pointer-events: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04)), rgba(26, 20, 62, .92);
  box-shadow: inset 0 0 0 1px rgba(255, 150, 210, .4), 0 12px 30px -12px rgba(0, 0, 0, .8), 0 0 24px -8px rgba(255, 79, 163, .55);
  opacity: 0; transform: translateY(-6px); transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.sb-toast:empty { visibility: hidden; }
.sb-toast.sb-show { opacity: 1; transform: none; transition-duration: .15s; }
@keyframes sb-pulse { 30% { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(255, 181, 71, .35), 0 12px 28px -12px rgba(255, 181, 71, .8); } }

/* first: turn the sound on */
.sb-wake { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 4vh 2px 0; text-align: center; }
.sb-kicker { margin-bottom: 6px; font: 750 12px/1.2 var(--font); letter-spacing: .24em; text-transform: uppercase; color: var(--cyan-soft); }
.sb-title { font-size: clamp(46px, 14.5vw, 92px); line-height: 1; font-style: italic; font-weight: 880; letter-spacing: -.05em; padding: 0 .16em .06em .04em; /* room for the italic overhang */ filter: drop-shadow(0 0 30px rgba(255, 79, 163, .42)); }
.sb-tagline { max-width: 25em; margin-top: 12px; font-size: 17px; line-height: 1.5; color: var(--text-2); }
.sb-wake-btn {
  appearance: none; -webkit-appearance: none; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  width: min(100%, 340px); min-height: 80px; margin: 26px 0 0; padding: 0 28px; border: 0; border-radius: 999px;
  color: var(--ink); background: var(--sunset); font: 820 21px/1.1 var(--font-display); letter-spacing: -.01em;
  box-shadow: var(--bevel), 0 0 0 1px rgba(255, 110, 170, .35), 0 18px 44px -14px rgba(255, 79, 163, .85);
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: transform .5s var(--spring);
}
.sb-wake-btn::before { content: ""; flex: none; width: 28px; height: 28px; background: currentColor; -webkit-mask: var(--sb-i-speaker) center / contain no-repeat; mask: var(--sb-i-speaker) center / contain no-repeat; }
.sb-wake-btn::after { /* a ring that keeps calling you */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; /* an outline: it never widens the page */
  outline: 2px solid rgba(255, 150, 205, .6); outline-offset: 4px; opacity: 0; animation: sb-call 2.4s var(--ease) infinite;
}
@media (hover: hover) { .sb-wake-btn:hover { transform: translateY(-2px); } }
.sb-wake-btn:active { transform: scale(.97); transition-duration: .12s; }
.sb-you { margin-top: 14px; font-size: 14px; color: var(--text-2); }
.sb-wake-note {
  margin-top: 16px; padding: 8px 16px; border-radius: 999px; font-weight: 750; color: var(--ink);
  background: linear-gradient(135deg, #ffd99a, #ffb547); box-shadow: 0 0 26px -6px rgba(255, 181, 71, .8);
  animation: sb-nudge .9s var(--spring) backwards;
}
.sb-wake-count { margin-top: 12px; font: 650 13.5px/1.3 var(--font); color: var(--text-3); }

/* the board */
.sb-board { display: flex; flex-direction: column; gap: 14px; }
.sb-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.sb-conn {
  flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px 0 12px; border-radius: 999px;
  font: 650 14px/1 var(--font); color: var(--text-2); background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(214, 200, 255, .14);
}
.sb-conn::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 3px rgba(255, 181, 71, .16), 0 0 10px rgba(255, 181, 71, .8); }
.sb-conn.sb-on::before { background: var(--cyan); box-shadow: 0 0 0 3px rgba(47, 229, 239, .16), 0 0 12px rgba(47, 229, 239, .8); }
.sb-conn.sb-off { color: var(--no); box-shadow: inset 0 0 0 1px var(--no-line); }
.sb-conn.sb-off::before { background: var(--no); box-shadow: 0 0 0 3px var(--no-wash), 0 0 10px rgba(255, 110, 110, .8); }
.sb-ticker {
  flex: 1; min-width: 0; text-align: right; font: 740 15px/1.25 var(--font-display); letter-spacing: -.01em; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0 14px rgba(255, 79, 163, .5);
  opacity: 0; transform: translateY(4px); transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.sb-ticker.sb-fresh { opacity: 1; transform: none; transition-duration: .15s; }
.sb-ticker.sb-bad { color: var(--amber); text-shadow: 0 0 14px rgba(255, 181, 71, .45); }

/* the pads: four across on a phone, six on anything wider. Each has its own neon (--sb-c) */
.sb-pads { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sb-pad {
  --sb-c: #ff4fa3; --sb-soft: rgba(255, 79, 163, .2); --sb-rim: rgba(255, 140, 200, .34); --sb-glow: rgba(255, 79, 163, .6); --sb-deep: #d81b78;
  appearance: none; -webkit-appearance: none; position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  min-width: 0; min-height: 64px; aspect-ratio: 1; margin: 0; padding: 8px 8px 9px; border: 0; border-radius: var(--r-m); text-align: left; color: var(--text);
  background: linear-gradient(155deg, var(--sb-soft), rgba(255, 255, 255, .015) 62%), var(--surface);
  box-shadow: inset 0 0 0 1px var(--sb-rim), inset 0 1px 0 rgba(255, 255, 255, .08), 0 12px 24px -18px rgba(0, 0, 0, .95);
  cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  transition: transform .45s var(--spring), box-shadow .5s var(--ease);
}
.sb-pad:nth-child(5n+2) { --sb-c: #ffb547; --sb-soft: rgba(255, 181, 71, .17); --sb-rim: rgba(255, 205, 130, .32); --sb-glow: rgba(255, 181, 71, .6); --sb-deep: #f07a1a; }
.sb-pad:nth-child(5n+3) { --sb-c: #2fe5ef; --sb-soft: rgba(47, 229, 239, .15); --sb-rim: rgba(130, 240, 246, .3); --sb-glow: rgba(47, 229, 239, .55); --sb-deep: #1490c8; }
.sb-pad:nth-child(5n+4) { --sb-c: #8b6cff; --sb-soft: rgba(139, 108, 255, .24); --sb-rim: rgba(190, 172, 255, .36); --sb-glow: rgba(139, 108, 255, .65); --sb-deep: #5a36ee; }
.sb-pad:nth-child(5n+5) { --sb-c: #ff6f61; --sb-soft: rgba(255, 111, 97, .18); --sb-rim: rgba(255, 165, 150, .32); --sb-glow: rgba(255, 111, 97, .6); --sb-deep: #e0362c; }
.sb-pad::before { /* its light, off until it plays */
  content: ""; position: absolute; z-index: 1; top: 9px; left: 9px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--sb-c); opacity: .5; box-shadow: 0 0 8px var(--sb-glow); transition: opacity .5s var(--ease);
}
.sb-pad::after { /* the lit face: on at once, off slowly */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 100% at 30% 20%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 55%), linear-gradient(155deg, var(--sb-c), var(--sb-deep));
  opacity: 0; transition: opacity .6s var(--ease);
}
.sb-pad-name {
  position: relative; z-index: 1; max-width: 100%; font: 720 13px/1.15 var(--font-display); letter-spacing: -.01em;
  overflow-wrap: break-word; hyphens: auto; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
  transition: color .6s var(--ease);
}
.sb-pad-tag {
  position: absolute; z-index: 1; top: 6px; right: 6px; padding: 2px 6px; border-radius: 999px;
  font: 800 8.5px/1.3 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--sb-c);
  background: rgba(10, 8, 32, .72); box-shadow: inset 0 0 0 1px var(--sb-rim);
}
.sb-pad.sb-custom { box-shadow: inset 0 0 0 1.5px var(--sb-c), inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 18px -8px var(--sb-glow); }
@media (hover: hover) { .sb-pad:hover { box-shadow: inset 0 0 0 1px var(--sb-c), 0 0 22px -6px var(--sb-glow), 0 12px 24px -18px rgba(0, 0, 0, .95); } }
.sb-pad:active { transform: scale(.95); transition-duration: .12s; }
.sb-pad.sb-hit { box-shadow: 0 0 0 1px var(--sb-c), 0 0 26px var(--sb-glow), 0 0 70px -10px var(--sb-glow); animation: sb-hit .7s var(--ease); transition: none; }
.sb-pad.sb-hit::after { opacity: 1; transition: none; }
.sb-pad.sb-hit::before { opacity: 1; background: #fff; transition: none; }
.sb-pad.sb-hit .sb-pad-name { color: var(--ink); transition: none; }
.sb-pad.sb-hit .sb-pad-tag { color: var(--ink); background: rgba(255, 255, 255, .55); }
.sb-offline .sb-pads { opacity: .62; } /* they still play, but only here */
.sb-editing .sb-pad { outline: 1.5px dashed rgba(255, 255, 255, .55); outline-offset: -6px; }
.sb-editing .sb-pad::before { opacity: 1; background: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, .8); }

/* the deck: Stop, the volume, Change a pad (and "Binned it. Undo"), stuck to the bottom of the screen
   while the pads scroll under it */
.sb-deck {
  position: sticky; bottom: 0; z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "undo undo" "stop edit" "vol vol"; gap: 10px;
  margin: 0 -10px; padding: 18px 10px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(9, 7, 28, .97) 0%, rgba(9, 7, 28, .9) 70%, rgba(9, 7, 28, 0) 100%);
}
.sb-stop, .sb-edit {
  appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 52px; margin: 0; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: transform .5s var(--spring), box-shadow .3s var(--ease);
}
.sb-stop {
  grid-area: stop; color: var(--ink); font: 800 17px/1 var(--font-display); letter-spacing: .01em; /* dark ink: it reads on the pink, and on Frizzy G's lime */
  background: linear-gradient(135deg, #ff3e6c, #ff4fa3 55%, #c24dff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 12px 30px -14px rgba(255, 62, 108, .9), 0 0 0 1px rgba(255, 150, 190, .35);
}
.sb-stop::before { content: ""; width: 13px; height: 13px; border-radius: 3px; background: currentColor; }
.sb-stop:active, .sb-edit:active { transform: scale(.96); transition-duration: .12s; }
.sb-edit {
  font: 650 15px/1.1 var(--font); color: var(--text);
  background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .06));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(214, 200, 255, .1), 0 8px 20px -10px rgba(0, 0, 0, .8);
}
.sb-edit { grid-area: edit; }
.sb-edit[aria-pressed="true"] { color: var(--cyan-soft); background: rgba(47, 229, 239, .1); box-shadow: inset 0 0 0 1px rgba(150, 240, 248, .42), 0 0 20px -8px rgba(47, 229, 239, .8); }
.sb-vol {
  grid-area: vol; display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 52px; padding: 0 16px; border-radius: 999px;
  background: var(--sunk); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(214, 200, 255, .14);
}
.sb-vol-label { flex: none; font: 750 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.sb-vol-range { flex: 1; min-width: 0; height: 44px; margin: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; }
.sb-vol-range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--sunset-x) 0 0 / var(--sb-vol, 80%) 100% no-repeat, rgba(255, 255, 255, .14); }
.sb-vol-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255, 79, 163, .35), 0 0 16px rgba(255, 79, 163, .8); }
.sb-vol-range::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .14); }
.sb-vol-range::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--sunset-x); }
.sb-vol-range::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255, 79, 163, .35), 0 0 16px rgba(255, 79, 163, .8); }
.sb-hint { text-align: center; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.sb-editing .sb-hint { color: var(--cyan-soft); font-weight: 650; }
.sb-undo {
  grid-area: undo; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 4px 6px 4px 16px; border-radius: 999px;
  color: var(--text); background: rgba(26, 20, 62, .96); box-shadow: inset 0 0 0 1px rgba(214, 200, 255, .2), 0 10px 26px -12px rgba(0, 0, 0, .9);
}
.sb-undo-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 650 14.5px/1.2 var(--font); }
.sb-undo-btn {
  appearance: none; -webkit-appearance: none; flex: none; min-height: 40px; margin: 0; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer;
  font: 760 14.5px/1 var(--font); color: var(--ink); background: var(--sunset); box-shadow: var(--bevel);
}
.sb-originals-row { text-align: center; }
.sb-originals {
  appearance: none; -webkit-appearance: none; min-height: 44px; margin: 0; padding: 0 8px; border: 0; background: none; cursor: pointer;
  font: 650 14px/1 var(--font); color: var(--pink-soft); text-decoration: underline; text-decoration-color: rgba(255, 182, 220, .45); text-underline-offset: 4px;
}
@media (hover: hover) { .sb-originals:hover { text-decoration-color: currentColor; } }
/* the last pad: Add a sound */
.sb-pad.sb-add {
  align-items: center; justify-content: center; gap: 6px; text-align: center; font: 720 13px/1.15 var(--font-display); color: var(--text-2);
  background: rgba(255, 255, 255, .025); box-shadow: inset 0 0 0 1.5px rgba(214, 200, 255, .3); outline: 1.5px dashed rgba(214, 200, 255, .45); outline-offset: -7px;
}
.sb-pad.sb-add::before {
  content: "+"; position: static; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; opacity: 1;
  font: 800 20px/1 var(--font); color: var(--ink); background: var(--sunset); box-shadow: 0 0 14px -2px rgba(255, 79, 163, .7);
}
.sb-pad.sb-add::after { display: none; }
@media (hover: hover) { .sb-pad.sb-add:hover { color: var(--text); box-shadow: inset 0 0 0 1.5px rgba(255, 150, 210, .6), 0 0 22px -8px rgba(255, 79, 163, .6); } }

/* changing a pad: a glass card over the board */
.sb-editor { width: min(calc(100% - 24px), 460px); max-height: calc(100dvh - 24px); margin: auto; padding: 0; border: 0; color: var(--text); background: none; overflow: auto; }
.sb-editor::backdrop { background: rgba(6, 3, 24, .76); }
.sb-editor[open] { animation: sb-rise .35s var(--ease) backwards; }
.sb-editor-card {
  display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 22px 18px 18px; border-radius: var(--r-l);
  background: radial-gradient(110% 70% at 0% 0%, rgba(255, 79, 163, .18), rgba(255, 79, 163, 0) 60%), var(--grad-card), var(--surface-solid);
  box-shadow: inset 0 0 0 1px rgba(255, 130, 200, .3), 0 30px 70px -26px rgba(0, 0, 0, .95), 0 0 50px -16px rgba(139, 108, 255, .6);
}
.sb-editor-kicker { font: 750 11.5px/1.2 var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--cyan-soft); }
.sb-editor-title { margin-bottom: 6px; font-size: 30px; line-height: 1.05; font-weight: 800; letter-spacing: -.03em; overflow-wrap: anywhere; }
.sb-editor-row { display: flex; gap: 8px; }
.sb-editor-label { margin-top: 8px; font: 750 11.5px/1.2 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.sb-editor-small { font-size: 13.5px; color: var(--text-2); }
.sb-editor-msg { min-height: 1.5em; font-weight: 650; color: var(--text-2); }
.sb-editor-msg.sb-bad { color: var(--no); }
.sb-editor-msg.sb-good { color: var(--cyan-soft); }
.sb-editor-end { flex-wrap: wrap; justify-content: flex-end; margin-top: 4px; }
.sb-field-label { padding-left: 2px; font: 750 11.5px/1.2 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.sb-field {
  -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 52px; margin: 0; padding: 0 16px; border: 0; border-radius: 16px;
  color: var(--text); font: 600 16px/1 var(--font); caret-color: var(--pink);
  background: var(--sunk); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(214, 200, 255, .18);
}
.sb-field:focus { outline: none; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5), inset 0 0 0 1.5px rgba(255, 150, 210, .75), 0 0 20px -6px rgba(255, 79, 163, .6); }
.sb-btn {
  appearance: none; -webkit-appearance: none; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; margin: 0; padding: 0 16px; border: 0; border-radius: 999px; text-align: center;
  font: 650 15px/1.15 var(--font); color: var(--text); cursor: pointer;
  background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .06));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(214, 200, 255, .12), 0 8px 20px -10px rgba(0, 0, 0, .8);
  transition: transform .5s var(--spring);
}
.sb-btn:active { transform: scale(.97); transition-duration: .12s; }
.sb-rename { flex: none; }
.sb-file, .sb-rec { flex: 1; min-width: 0; }
.sb-file:focus-within { outline: 2.5px solid var(--focus); outline-offset: 3px; }
.sb-file-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sb-rec::before { content: ""; flex: none; width: 11px; height: 11px; border-radius: 50%; background: #ff4f6e; box-shadow: 0 0 10px rgba(255, 79, 110, .9); }
.sb-rec.sb-recording { color: #fff; background: rgba(255, 62, 108, .3); box-shadow: inset 0 0 0 1.5px #ff3e6c, 0 0 24px -6px rgba(255, 62, 108, .9); }
.sb-rec.sb-recording::before { border-radius: 2px; animation: sb-blink 1s steps(2, start) infinite; }
.sb-reset { color: var(--text-2); background: none; box-shadow: inset 0 0 0 1px rgba(214, 200, 255, .18); }
.sb-remove { color: var(--no); background: var(--no-wash); box-shadow: inset 0 0 0 1px var(--no-line); }
.sb-done { min-width: 110px; margin-left: auto; color: var(--ink); font-weight: 720; background: var(--sunset); box-shadow: var(--bevel), 0 0 0 1px rgba(255, 110, 170, .35), var(--glow); }

:root {
  --sb-i-speaker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 4.5V4.5L7 9z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --sb-i-speaker-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 4.5V4.5L7 9z'/%3E%3Cpath d='M16 9l6 6M22 9l-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
@keyframes sb-call { 0% { opacity: .9; outline-offset: 2px; } 70%, 100% { opacity: 0; outline-offset: 16px; } }
@keyframes sb-nudge { 0% { transform: scale(.6); } 60% { transform: scale(1.06); } }
@keyframes sb-hit { 0% { transform: scale(.93); } 35% { transform: scale(1.045); } 100% { transform: none; } }
@keyframes sb-rise { from { transform: translateY(14px) scale(.98); } }
@keyframes sb-blink { to { visibility: hidden; } }

/* the smallest phones (320-350px): the speaker needs a little of the header's room */
@media (max-width: 350px) {
  .top:has(.sb-hearing) .top-end { gap: 6px; }
  .top:has(.sb-hearing) .brand { gap: 6px; }
}
@media (min-width: 700px) {
  .sb-wake { padding-top: 8vh; }
  .sb-pads { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
  .sb-pad { padding: 10px 10px 11px; }
  .sb-pad-name { font-size: 14px; }
  .sb-deck { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "undo undo undo" "stop vol edit"; }
  .sb-stop { min-width: 140px; }
  .sb-edit { padding: 0 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .sb-wake-btn::after { display: none; }
}
@media (prefers-contrast: more) {
  .sb-pad, .sb-conn, .sb-vol, .sb-field, .sb-toast, .sb-hear { box-shadow: inset 0 0 0 1.5px rgba(230, 220, 255, .55); }
}
@media (forced-colors: active) {
  .sb-pad, .sb-btn, .sb-stop, .sb-edit, .sb-vol, .sb-conn, .sb-wake-btn, .sb-editor-card, .sb-field, .sb-hear, .sb-chip, .sb-toast, .sb-undo { border: 1px solid CanvasText; }
  .sb-pad.sb-hit, .sb-hear.sb-off, .sb-edit[aria-pressed="true"] { outline: 2px solid Highlight; }
  .sb-title { -webkit-text-fill-color: currentColor; background: none; filter: none; }
  .sb-pad::after, .sb-wake-btn::after, .fx-sb-rings { display: none; }
}

/* the script's rings (night.js, the soundboard block): a canvas in the .ambient layer, over the nebula */
.fx-sb-rings { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; pointer-events: none; }
/* SOUNDBOARD_END */