/* Look: a night sky that drifts slowly behind every page (site.js builds that layer). On top of it everything is solid
   and has weight: panels sit on the page, wells are pressed into it, and buttons have an edge and sink when pressed. */
:root {
  color-scheme: dark;
  --night: #0c0a24;
  --text: #f7f4ff;
  --muted: #b6afdc;
  --ink: #1b1340;
  --white: #ffffff;

  /* Surfaces */
  --panel: #1b1549;
  --panel-up: #272063;
  --well: #0f0b2e;
  --line: rgba(255, 255, 255, .1);
  --shade: 0 3px 0 rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .08);
  --glass: rgba(255, 255, 255, .08);
  --glass-up: rgba(255, 255, 255, .15);

  /* Colours. Gold is the thing to press next. */
  --gold: #ffc53d;
  --gold-2: #ffa928;
  --gold-edge: #b8650a;
  --amber: #ffb648;
  --violet: #8b5cf6;
  --pink: #ff5fa2;
  --cyan: #38e1d4;
  --red: #e0245e;
  --warm: linear-gradient(135deg, #ffc857 0%, #ff8a73 50%, #ff5fa2 100%);

  /* The back of a playing card, for anything that is not built with cards.js */
  --card-back: repeating-linear-gradient(45deg, rgba(255, 255, 255, .16) 0 2px, transparent 2px 9px), repeating-linear-gradient(-45deg, rgba(255, 255, 255, .16) 0 2px, transparent 2px 9px), linear-gradient(160deg, #6d4df6, #d9459a);

  --radius: 22px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --logo: "Unbounded", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --body: "Outfit", "Segoe UI", system-ui, sans-serif;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
}
[hidden] { display: none !important; }
* { box-sizing: border-box; }
html { background: var(--night); }
body { margin: 0; color: var(--text); font: 500 18px/1.45 var(--body); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* Icons are small line drawings. They take the size and colour of the text around them. */
.icon { flex: none; width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.icon .fill { fill: currentColor; stroke: none; }

/* Buttons. A button has a face and a darker edge under it, and sinks onto the edge when pressed.
   Give any button the class "press", or use one of the named buttons that share the recipe (.go, .pill and so on).
   --face, --face-2, --edge and --on set the colours; --drop is how tall the edge is. */
.press, .go, .pill, .add button, .picks button, .party-btn, .choice {
  --face: var(--gold);
  --face-2: var(--gold-2);
  --edge: var(--gold-edge);
  --on: #2a1600;
  --drop: 6px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 var(--drop);
  color: var(--on);
  background: linear-gradient(180deg, var(--face), var(--face-2));
  border: 0;
  border-radius: 18px;
  box-shadow: 0 var(--drop) 0 var(--edge), 0 calc(var(--drop) + 10px) 22px -10px rgba(0, 0, 0, .6), inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(0, 0, 0, .1);
  font: 700 19px/1.15 var(--logo);
  letter-spacing: -.02em;
  text-decoration: none;
  touch-action: manipulation;
  transition: transform .08s ease-out, box-shadow .08s ease-out, filter .2s;
}
:is(.press, .go, .pill, .add button, .picks button, .party-btn, .choice):hover { filter: brightness(1.06); }
:is(.press, .go, .pill, .add button, .picks button, .party-btn, .choice):active {
  transform: translateY(calc(var(--drop) - 1px));
  box-shadow: 0 1px 0 var(--edge), 0 6px 12px -6px rgba(0, 0, 0, .6), inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(0, 0, 0, .1);
}
:is(.press, .go, .pill, .add button, .picks button):disabled {
  --face: #2e2769;
  --face-2: #2a2362;
  --edge: #1b1647;
  --on: #857eb4;
  box-shadow: 0 var(--drop) 0 var(--edge), inset 0 2px 0 rgba(255, 255, 255, .06);
  filter: none;
  transform: none;
  cursor: not-allowed;
}
/* Other colours for a button */
.press.violet, .pill { --face: #7c66ff; --face-2: #6a52f0; --edge: #3d2aa8; --on: #ffffff; }
.press.plain, .picks button { --face: #ffffff; --face-2: #ebe6ff; --edge: #a79fd6; --on: var(--ink); }
.press.dark, .party-btn, .choice { --face: #322a78; --face-2: #2a2268; --edge: #151038; --on: var(--text); }
.press.mint { --face: #4be3d2; --face-2: #25c9b6; --edge: #0d8c7d; --on: #05302b; }
.press.coral { --face: #ff8097; --face-2: #ff5d7e; --edge: #b92f50; --on: #3d0513; }

/* The backdrop: four soft lights that drift, and small shapes that float up. Only transforms move, so it stays smooth on phones. */
.bg {
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(120% 80% at 50% 0%, #261b63 0%, #130e38 48%, var(--night) 100%);
}
.blob {
  position: absolute;
  width: 64vmax;
  height: 64vmax;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--c) 0%, transparent 100%);
  opacity: .42;
  will-change: transform;
  animation: drift-a 24s ease-in-out infinite alternate;
}
.blob.b1 { --c: #7c4dff; top: -22vmax; left: -22vmax; }
.blob.b2 { --c: #ff4f9a; top: 16vh; right: -30vmax; opacity: .3; animation-name: drift-b; animation-duration: 30s; }
.blob.b3 { --c: #19c8d8; bottom: -28vmax; left: -12vmax; opacity: .3; animation-name: drift-c; animation-duration: 34s; }
.blob.b4 { --c: #ff9d3c; bottom: -32vmax; right: -14vmax; width: 50vmax; height: 50vmax; opacity: .22; animation-duration: 28s; animation-direction: alternate-reverse; }
@keyframes drift-a { to { transform: translate3d(16vw, 14vh, 0) scale(1.18); } }
@keyframes drift-b { to { transform: translate3d(-22vw, -12vh, 0) scale(.86); } }
@keyframes drift-c { to { transform: translate3d(20vw, -16vh, 0) scale(1.2); } }

.mote {
  position: absolute;
  bottom: -48px;
  left: var(--x);
  width: var(--s);
  height: var(--s);
  color: var(--c);
  opacity: var(--o);
  will-change: transform;
  animation: rise var(--d) linear var(--delay) infinite;
}
.mote.loop { border: 2px solid currentColor; border-radius: 50%; }
.mote.dot { background: currentColor; border-radius: 50%; }
.mote.gem { border: 2px solid currentColor; border-radius: 5px; }
.mote.plus { background: linear-gradient(currentColor, currentColor) center / 100% 3px no-repeat, linear-gradient(currentColor, currentColor) center / 3px 100% no-repeat; }
@keyframes rise {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to { transform: translate3d(var(--drift), -116vh, 0) rotate(var(--rot)); }
}

/* Home page */
.page {
  display: grid;
  gap: 22px;
  max-width: 1160px;
  margin: 0 auto;
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
  padding-block: calc(16px + env(safe-area-inset-top, 0px)) calc(48px + env(safe-area-inset-bottom, 0px));
}
.head { display: grid; gap: 18px; padding-top: 62px; }

/* The name, cut out of thick card: each word has an edge under it like the buttons do. */
.logo { margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 0 .26em; font: 800 clamp(52px, 17vw, 104px)/1.02 var(--logo); letter-spacing: -.04em; }
.logo span { color: var(--white); text-shadow: 0 .03em 0 #d3caff, 0 .06em 0 #a596f2, 0 .09em 0 #7461da, 0 .2em .3em rgba(0, 0, 0, .45); }
.logo .club { color: var(--gold); text-shadow: 0 .03em 0 #f2a52a, 0 .06em 0 #d38414, 0 .09em 0 #a9620a, 0 .2em .3em rgba(0, 0, 0, .45); }

/* The two small buttons that sit at the top of every page */
.fs, .login {
  z-index: 60;
  top: calc(12px + env(safe-area-inset-top, 0px));
  min-height: 42px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  background: var(--panel-up);
  border: 0;
  border-radius: 13px;
  box-shadow: 0 3px 0 #120e36, 0 10px 16px -8px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .14);
  font: 600 15px/1 var(--body);
  letter-spacing: .01em;
  text-decoration: none;
  transition: transform .08s ease-out, box-shadow .08s ease-out, filter .2s;
}
.fs { position: fixed; right: var(--gutter-r); }
.fs svg { width: 16px; height: 16px; }
.login { position: absolute; left: var(--gutter-l); }
.fs:hover, .login:hover { filter: brightness(1.15); }
.fs:active, .login:active { transform: translateY(2px); box-shadow: 0 1px 0 #120e36, inset 0 1px 0 rgba(255, 255, 255, .14); }

/* The two ways into a party. Hosting is the main thing to do on the page. */
.party-btns { display: grid; gap: 12px; }
.party-btn { --drop: 6px; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; justify-content: stretch; gap: 2px 12px; min-height: 78px; padding: 14px 16px 14px 20px; border-radius: var(--radius); text-align: left; }
.party-btn b { grid-column: 1; font: 700 clamp(19px, 5.4vw, 23px)/1.1 var(--logo); letter-spacing: -.02em; }
.party-btn span { grid-column: 1; font: 500 17px/1.3 var(--body); letter-spacing: 0; color: var(--muted); }
.party-btn .icon { grid-column: 2; grid-row: 1 / span 2; width: 26px; height: 26px; color: var(--muted); }
.party-btn.host { --face: var(--gold); --face-2: var(--gold-2); --edge: var(--gold-edge); --on: #2a1600; --drop: 8px; min-height: 136px; padding: 20px; }
.party-btn.host b { max-width: 8em; font-size: clamp(28px, 8.4vw, 40px); font-weight: 800; line-height: 1.02; }
.party-btn.host span { max-width: 13em; margin-top: 6px; font-weight: 600; color: #5a3400; }
/* The picture on the host button: phones joining */
.party-btn .phones { position: absolute; right: -6px; bottom: -22px; width: min(44%, 190px); height: auto; pointer-events: none; }
.party-btn.back { --face: #2c2468; --face-2: #262060; min-height: 58px; box-shadow: 0 var(--drop) 0 var(--edge), inset 0 0 0 2px var(--gold); }
.party-btn.back b { font-size: 17px; color: var(--gold); }

/* Mobile or Desktop: a track with a raised thumb */
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 5px; background: var(--well); border-radius: 18px; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .07); }
.tab { min-height: 46px; padding: 8px 12px; color: var(--muted); background: transparent; border: 0; border-radius: 13px; font: 700 clamp(14px, 4.2vw, 16px)/1 var(--logo); transition: color .2s, background .2s; }
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--ink); background: linear-gradient(180deg, #ffffff, #ebe6ff); box-shadow: 0 3px 0 #a79fd6, 0 8px 14px -6px rgba(0, 0, 0, .6); }

/* Filter buttons: the kinds of game. The party page uses them too. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-btn { min-height: 40px; padding: 0 16px; color: var(--muted); background: var(--panel); border: 0; border-radius: 999px; box-shadow: var(--shade); font: 600 16px/1 var(--body); transition: background .2s, color .2s, transform .08s ease-out; }
.chip-btn:hover { color: var(--text); background: var(--panel-up); }
.chip-btn:active { transform: translateY(2px); }
.chip-btn[aria-pressed="true"] { color: var(--ink); background: linear-gradient(180deg, #ffffff, #ebe6ff); box-shadow: 0 3px 0 #a79fd6; }

.layout { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.layout main { flex: 1 1 320px; min-width: 0; }
.shelf { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.shelf > * { animation: pop .55s var(--ease) backwards; }
.shelf > :nth-child(2) { animation-delay: .05s; }
.shelf > :nth-child(3) { animation-delay: .1s; }
.shelf > :nth-child(4) { animation-delay: .15s; }
.shelf > :nth-child(5) { animation-delay: .2s; }
.shelf > :nth-child(n + 6) { animation-delay: .25s; }
@keyframes pop { from { opacity: 0; transform: translateY(18px) scale(.97); } }

/* An empty slot marks where a game will go. */
.slot { position: relative; aspect-ratio: 3 / 4; background: rgba(15, 11, 46, .5); border: 2px dashed rgba(255, 255, 255, .16); border-radius: var(--radius); }

/* A game's tile: its own colour, its picture, and an edge like a button */
.slot.play {
  --drop: 7px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-bottom: var(--drop);
  padding: 14px;
  overflow: hidden;
  color: var(--white);
  background: var(--tile);
  border: 0;
  box-shadow: 0 var(--drop) 0 var(--tile-edge), 0 24px 30px -16px var(--glow), inset 0 2px 0 rgba(255, 255, 255, .35);
  text-decoration: none;
  transition: transform .1s ease-out, box-shadow .1s ease-out, filter .2s;
}
.slot.play:hover { filter: brightness(1.07); }
.slot.play:active { transform: translateY(6px); box-shadow: 0 1px 0 var(--tile-edge), 0 8px 14px -8px var(--glow), inset 0 2px 0 rgba(255, 255, 255, .35); }
.slot.play::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(10, 6, 40, .5)); pointer-events: none; }
.slot.play strong { position: relative; z-index: 1; font: 700 clamp(18px, 5.3vw, 24px)/1.1 var(--logo); letter-spacing: -.02em; text-shadow: 0 2px 0 rgba(0, 0, 0, .22); }

/* Each game's colours: its tile, the edge under it, and its glow */
.g-ring { --tile: linear-gradient(150deg, #ffb648 0%, #ff6a5c 52%, #ee3f96 100%); --tile-edge: #a02a66; --glow: rgba(255, 106, 92, .7); }
.g-higher { --tile: linear-gradient(150deg, #7a5cff 0%, #5a7dff 55%, #36a8ff 100%); --tile-edge: #2b4fb5; --glow: rgba(90, 125, 255, .7); }
.g-race { --tile: linear-gradient(150deg, #067d8a 0%, #0c9f8f 55%, #17bd84 100%); --tile-edge: #076a5d; --glow: rgba(12, 159, 143, .7); }
.g-flight { --tile: linear-gradient(150deg, #150f4d 0%, #3b1fa3 52%, #c23bd1 100%); --tile-edge: #6a1c84; --glow: rgba(160, 60, 220, .7); }
.g-run { --tile: linear-gradient(150deg, #23285c 0%, #46529f 55%, #7f94e6 100%); --tile-edge: #3a4691; --glow: rgba(90, 110, 210, .7); }

/* A game's small mark, used in lists */
.thumb { flex: none; width: 50px; height: 50px; display: grid; place-items: center; color: var(--white); background: var(--tile); border-radius: 14px; box-shadow: 0 3px 0 var(--tile-edge), inset 0 2px 0 rgba(255, 255, 255, .35); }
.thumb .icon { width: 28px; height: 28px; }

/* Tile pictures */
.tile-ring.ring { position: absolute !important; top: -16%; right: -22%; width: 104% !important; animation: turn 90s linear infinite; }
.tile-ring .rc { box-shadow: 0 .8cqw 2.4cqw rgba(140, 20, 60, .35); }
@keyframes turn { to { transform: rotate(360deg); } }

.art-svg, .art-svg svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.art-lanes { position: absolute; top: 16px; left: 16px; right: 16px; height: 42%; display: grid; gap: 9%; }
.art-lanes i { background: linear-gradient(to right, rgba(255, 255, 255, .95) var(--w), rgba(255, 255, 255, .22) var(--w)); border-radius: 999px; }
.art-lanes i:nth-child(1) { --w: 58%; }
.art-lanes i:nth-child(2) { --w: 34%; }
.art-lanes i:nth-child(3) { --w: 86%; }
.art-lanes i:nth-child(4) { --w: 47%; }

/* The ring of cards */
.ring { position: relative; container-type: inline-size; aspect-ratio: 1; width: 100%; }
.rc {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9.5cqw;
  height: 14cqw;
  margin: -7cqw 0 0 -4.75cqw;
  padding: 0;
  transform: rotate(var(--a)) translateY(-41cqw);
  background: #251b7c var(--pc-back-art, var(--card-back)) center / 100% 100% no-repeat;
  border-radius: 1.2cqw;
  box-shadow: 0 0 0 .3cqw rgba(12, 8, 40, .55);
  transition: transform .2s var(--ease), opacity .2s;
}
button.rc:not(:disabled):hover { transform: rotate(var(--a)) translateY(-44cqw); }
button.rc:disabled { cursor: default; }
.rc.gone { visibility: hidden; }

/* "Open on your phone", shown beside the games on a big screen */
.sticker {
  flex: 0 0 280px;
  display: grid;
  justify-items: start;
  gap: 14px;
  padding: 20px;
  color: var(--ink);
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 6px 0 #a79fd6, 0 24px 30px -14px rgba(0, 0, 0, .6);
  animation: pop .6s var(--ease) .2s backwards;
}
.sticker h2 { margin: 0; font: 700 19px/1.2 var(--logo); letter-spacing: -.02em; text-wrap: balance; }
.qr { width: 200px; height: 200px; }
.qr img, .qr canvas { display: block; width: 200px !important; height: 200px !important; }

.toast {
  position: fixed;
  z-index: 70;
  left: var(--gutter-l);
  right: var(--gutter-r);
  top: calc(64px + env(safe-area-inset-top, 0px));
  max-width: 480px;
  margin-left: auto;
  padding: 14px 16px;
  color: var(--ink);
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 4px 0 #a79fd6, 0 18px 40px rgba(0, 0, 0, .5);
  font-weight: 600;
  animation: pop .35s var(--ease);
}

@media (min-width: 900px) {
  .logo { font-size: min(8.4vw, 104px); }
  .party-btns { grid-template-columns: 2fr 1fr; max-width: 860px; align-items: stretch; }
  .party-btn { min-height: 136px; }
  .party-btn.back { grid-column: 1 / -1; min-height: 58px; }
  .tabs { max-width: 420px; }
  .shelf { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .shelf[data-room="desktop"] { grid-template-columns: repeat(3, 1fr); }
  .shelf .slot { aspect-ratio: 1; }
  .shelf[data-room="desktop"] .slot { aspect-ratio: 4 / 3; }
  .slot.play { padding: 20px; }
  .slot.play strong { font-size: 24px; }
  .art-lanes { top: 28px; left: 28px; right: 28px; }
}
@media (max-width: 899px) { .sticker { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .blob, .tile-ring.ring, .shelf > *, .sticker, .toast { animation: none; }
  .mote { display: none; }
}