/* ================================================================
   Boomicorn — neon arcade table
   ================================================================ */

/* Registered so JavaScript can read a resolved pixel value back out of it —
   the hand layout needs to know how wide a card actually is. */
@property --card-w {
  syntax: '<length>';
  inherits: true;
  initial-value: 5rem;
}
/* The base size, kept separate so the discard pile can scale off it without
   defining --card-w in terms of itself. */
@property --card-w-base {
  syntax: '<length>';
  inherits: true;
  initial-value: 5rem;
}

:root {
  --ink: #12082b;
  --ink-2: #1d0f45;
  --paper: #fdfbff;

  --neon-pink: #ff2e88;
  --neon-cyan: #22e5ff;
  --neon-lime: #9dff3d;
  --neon-amber: #ffc23d;

  /* Four sweet-shop colours, kept as far apart on the wheel as four can be, so
     a five-year-old can tell them apart across a table. Deliberately not flat
     primaries. The internal ids stay red/blue/green/yellow. */
  --red: #ff4d6d;      /* candy pink   */
  --blue: #2f6bff;     /* bright blue  */
  --green: #00c08b;    /* mint green   */
  --yellow: #ffb01f;   /* sunny yellow */

  --red-deep: #c7002e;
  --blue-deep: #0b3ab8;
  --green-deep: #00795a;
  --yellow-deep: #c77a00;

  --card-w-base: clamp(4.2rem, min(9vw, 15vh), 8.4rem);
  --card-w: var(--card-w-base);
  --radius: 1.15rem;
  --shadow: 0 1.2rem 2.4rem rgba(0, 0, 0, .45);
  --ring: 0 0 0 .22rem rgba(255, 255, 255, .16);
  --display: 'Luckiest Guy', 'Baloo 2', system-ui, sans-serif;
  --body: 'Baloo 2', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Any class that sets `display` outranks the UA's `[hidden] { display: none }`,
   so hiding a .btn silently did nothing. This makes the attribute mean what it
   says, everywhere. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--body);
  font-weight: 600;
  color: var(--paper);
  background:
    radial-gradient(120% 80% at 50% -10%, #3a1170 0%, transparent 60%),
    radial-gradient(90% 70% at 12% 105%, #08243f 0%, transparent 55%),
    radial-gradient(80% 60% at 92% 100%, #43104a 0%, transparent 55%),
    var(--ink);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* Faint arcade grid over the whole table. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 3.2rem 3.2rem;
  mask-image: radial-gradient(70% 65% at 50% 45%, #000 30%, transparent 100%);
  z-index: 0;
}

#fx {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90;
}

/* Slow drifting colour blobs so the background is never quite still. */
.aurora { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.aurora i {
  position: absolute;
  width: 46vmax; height: 46vmax;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .34;
  animation: drift 26s ease-in-out infinite;
}
.aurora i:nth-child(1) { background: var(--neon-pink); top: -18vmax; left: -10vmax; }
.aurora i:nth-child(2) { background: var(--neon-cyan); bottom: -22vmax; right: -12vmax; animation-delay: -9s; }
.aurora i:nth-child(3) { background: #7a2cff; top: 30%; left: 55%; animation-delay: -17s; }

@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(6vmax, 4vmax, 0) scale(1.14); }
  66%      { transform: translate3d(-5vmax, 6vmax, 0) scale(.92); }
}

/* ------------------------------------------------------------ screens */

.screen {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: none;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(.8rem, 2vh, 1.6rem);
}
.screen.is-active { display: flex; animation: screen-in .45s cubic-bezier(.2, .9, .3, 1.2); }

@keyframes screen-in {
  from { opacity: 0; transform: scale(.96) translateY(1.4rem); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------- logo */

.logo {
  font-family: var(--display);
  text-align: center;
  line-height: .92;
  margin: clamp(.5rem, 4vh, 2.5rem) 0 .4rem;
  position: relative;
  letter-spacing: .02em;
}
.logo__word { display: block; }
.logo__word--top {
  font-size: clamp(.72rem, 2.9vw, 1.15rem);
  letter-spacing: .22em;
  margin-bottom: .35rem;
  background: linear-gradient(180deg, #fff 10%, var(--neon-amber) 55%, var(--neon-pink) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 .1rem 0 rgba(0, 0, 0, .45));
}
.logo__word--bottom {
  /* One long word, so it is sized off its length rather than the old two-line
     split: nine characters have to fit across the narrowest phone. */
  font-size: clamp(2.2rem, 10.5vw, 5.8rem);
  letter-spacing: .01em;
  background: linear-gradient(180deg, #fff 5%, var(--neon-cyan) 45%, #2b7fff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 .3rem 0 rgba(0, 0, 0, .45)) drop-shadow(0 0 2.2rem rgba(34, 229, 255, .55));
  transform: rotate(-2deg);
}
.logo__boom {
  position: absolute;
  right: -.2em; top: -.35em;
  font-size: clamp(2.4rem, 9vw, 5rem);
  animation: boom-bob 2.4s ease-in-out infinite;
  filter: drop-shadow(0 0 1.6rem rgba(255, 194, 61, .8));
}
@keyframes boom-bob {
  0%, 100% { transform: rotate(-12deg) scale(1); }
  50%      { transform: rotate(10deg) scale(1.16); }
}

.tagline {
  text-align: center;
  font-size: clamp(.95rem, 2.4vw, 1.2rem);
  color: #d3c6ff;
  margin-bottom: 1.4rem;
  max-width: 34ch;
}

/* -------------------------------------------------------------- panels */

.panel {
  width: min(30rem, 100%);
  background: linear-gradient(165deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .045));
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 1.6rem;
  padding: clamp(1rem, 3vw, 1.6rem);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  margin-bottom: 1.1rem;
}
.panel--wide { width: min(44rem, 100%); }
.panel__title {
  font-family: var(--display);
  font-size: 1.35rem;
  letter-spacing: .03em;
  margin-bottom: .85rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}

.chip {
  font-family: var(--body);
  font-size: .8rem;
  font-weight: 800;
  padding: .18rem .6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .2);
  white-space: nowrap;
}
.chip--dim { opacity: .6; letter-spacing: .18em; }

/* -------------------------------------------------------- avatar picker */

.picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(3.1rem, 1fr));
  gap: .5rem;
  margin-bottom: 1rem;
}
.avatar-opt {
  font-size: 1.8rem;
  line-height: 1;
  aspect-ratio: 1;
  border: 2px solid rgba(255, 255, 255, .16);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .07);
  cursor: pointer;
  transition: transform .18s cubic-bezier(.2, .9, .3, 1.5), background .18s, border-color .18s;
}
.avatar-opt:hover { transform: translateY(-.22rem) scale(1.08); background: rgba(255, 255, 255, .16); }
.avatar-opt[aria-checked='true'] {
  border-color: var(--neon-lime);
  background: rgba(157, 255, 61, .2);
  transform: scale(1.12);
  box-shadow: 0 0 1.4rem rgba(157, 255, 61, .55);
}

/* -------------------------------------------------------------- fields */

.field { display: block; margin-bottom: 1rem; }
.field__label {
  display: block;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #b9a8ef;
  margin-bottom: .3rem;
}
.field input {
  width: 100%;
  font: inherit;
  font-size: 1.15rem;
  padding: .75rem .9rem;
  color: var(--ink);
  background: var(--paper);
  border: none;
  border-radius: .9rem;
  box-shadow: inset 0 -.22rem 0 rgba(0, 0, 0, .12);
}
.field input:focus { outline: .2rem solid var(--neon-cyan); outline-offset: .15rem; }
.code-input {
  text-align: center;
  font-family: var(--display);
  font-size: 2.4rem !important;
  letter-spacing: .5rem;
  text-transform: uppercase;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  font-family: var(--display);
  font-size: clamp(1rem, 2.6vw, 1.25rem);
  letter-spacing: .03em;
  padding: .8rem 1.1rem;
  border: none;
  border-radius: 1.1rem;
  color: #fff;
  cursor: pointer;
  transition: transform .12s cubic-bezier(.2, .9, .3, 1.6), filter .2s, box-shadow .2s;
}
.btn:active:not(:disabled) { transform: translateY(.22rem) scale(.98); }
.btn:disabled { filter: grayscale(.8) brightness(.6); cursor: not-allowed; }
.btn__icon { font-family: var(--body); }

.btn--go {
  background: linear-gradient(180deg, #ff56a3, var(--neon-pink) 55%, #c60058);
  box-shadow: 0 .38rem 0 #8d0040, 0 .9rem 1.8rem rgba(255, 46, 136, .42);
}
.btn--go:hover:not(:disabled) { filter: brightness(1.1); box-shadow: 0 .38rem 0 #8d0040, 0 1rem 2.4rem rgba(255, 46, 136, .6); }
.btn--alt {
  background: linear-gradient(180deg, #56e6ff, var(--neon-cyan) 55%, #0a9dc4);
  color: #04283a;
  box-shadow: 0 .38rem 0 #076b87, 0 .9rem 1.8rem rgba(34, 229, 255, .35);
}
.btn--ghost {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .25);
  box-shadow: none;
}
.btn--ghost:hover { background: rgba(255, 255, 255, .2); }
.btn--big { font-size: clamp(1.2rem, 3.4vw, 1.7rem); padding: 1rem; }
.btn--small { font-size: .9rem; padding: .5rem .8rem; width: auto; }

.actions { display: grid; gap: .7rem; }
.actions--row { grid-auto-flow: column; grid-auto-columns: 1fr; }
.join-box { margin-top: 1rem; animation: screen-in .3s ease; }

.icon-btn {
  font-size: 1.3rem;
  line-height: 1;
  padding: .45rem .6rem;
  border-radius: .8rem;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .08);
  cursor: pointer;
}

/* --------------------------------------------------------------- lobby */

.lobby { width: 100%; display: flex; flex-direction: column; align-items: center; padding-bottom: 2rem; }

.codecard {
  text-align: center;
  margin: 1rem 0 1.4rem;
  padding: 1.1rem 2rem;
  border-radius: 1.6rem;
  background: linear-gradient(160deg, rgba(255, 194, 61, .22), rgba(255, 46, 136, .18));
  border: 2px dashed rgba(255, 255, 255, .35);
}
.codecard__hint { font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: #f4dcff; }
.codecard__code {
  font-family: var(--display);
  font-size: clamp(3rem, 15vw, 6rem);
  letter-spacing: .35rem;
  line-height: 1.05;
  background: linear-gradient(180deg, #fff, var(--neon-amber));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 1.6rem rgba(255, 194, 61, .55));
}

.seats { list-style: none; display: grid; gap: .6rem; margin-bottom: .9rem; }
.seat {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .6rem .9rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .14);
  animation: pop-in .4s cubic-bezier(.2, .9, .3, 1.5);
}
.seat__avatar { font-size: 1.9rem; }
.seat__name { font-size: 1.15rem; font-weight: 800; }
.seat__tag { margin-left: auto; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.seat--empty { opacity: .4; border-style: dashed; }

@keyframes pop-in {
  from { opacity: 0; transform: scale(.85) translateY(.6rem); }
  to   { opacity: 1; transform: none; }
}

.lobby__status { text-align: center; color: #cbbcf5; margin-bottom: .9rem; font-size: 1rem; }

.rules__list { list-style: none; display: grid; gap: .7rem; }
.rules__list li { display: flex; gap: .8rem; align-items: flex-start; font-size: 1.02rem; line-height: 1.35; }
.rules__num {
  flex: 0 0 auto;
  width: 1.9rem; height: 1.9rem;
  display: grid; place-items: center;
  border-radius: 50%;
  font-family: var(--display);
  background: linear-gradient(180deg, var(--neon-cyan), #0a9dc4);
  color: #04283a;
}

/* ---------------------------------------------------------------- table */

/* The table must fit the viewport exactly: nothing scrolls, and the hand is
   never allowed to slide off the bottom edge. */
#screen-game {
  padding: 0;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
}
/* Grid, not flex, so the middle is the only row that may take the spare space
   — and the only row forced to give it back. minmax(0, 1fr) is what stops the
   hand being pushed off the bottom edge.
   This MUST stay on the .is-active selector: an id on its own outranks
   `.screen { display: none }`, which would leave the table showing on top of
   the title and lobby screens. */
#screen-game.is-active {
  display: grid;
  /* minmax(0, 1fr) is load-bearing. The hand is a no-wrap flex row, so its
     min-content is the sum of every card's width; an `auto` column would grow
     to fit that, push the whole table wider than the screen, and then feed
     that inflated width back into the hand layout as available space. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  /* .screen sets align-items:center for the menu screens; in a grid that stops
     the middle row stretching and the rows overflow the viewport. */
  align-items: stretch;
  justify-items: stretch;
}
#screen-game.is-active > * { min-width: 0; }

.topbar {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .6rem clamp(.6rem, 2vw, 1.2rem);
}
.turn-banner {
  flex: 1;
  text-align: center;
  font-family: var(--display);
  font-size: clamp(1.05rem, 3.4vw, 1.9rem);
  letter-spacing: .02em;
  text-shadow: 0 .16rem 0 rgba(0, 0, 0, .5);
}
.turn-banner.is-you {
  color: var(--neon-lime);
  animation: banner-pulse 1.1s ease-in-out infinite;
}
@keyframes banner-pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 .4rem rgba(157, 255, 61, .5)); }
  50%      { transform: scale(1.06); filter: drop-shadow(0 0 1.4rem rgba(157, 255, 61, .95)); }
}

/* ------------------------------------------------------------ opponents */

.opponents {
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(.5rem, 3vw, 2.4rem);
  padding: 0 .6rem;
  flex-wrap: wrap;
}

.opp {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: .5rem .7rem .6rem;
  border-radius: 1.2rem;
  border: 2px solid transparent;
  transition: transform .3s cubic-bezier(.2, .9, .3, 1.4), border-color .3s, background .3s;
}
.opp__avatar {
  font-size: clamp(1.8rem, 5.5vw, 2.8rem);
  line-height: 1;
  filter: drop-shadow(0 .3rem .5rem rgba(0, 0, 0, .5));
}
.opp__name { font-size: .92rem; font-weight: 800; max-width: 7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opp__cards { display: flex; margin-top: .1rem; height: 1.5rem; }
.opp__card {
  width: .95rem; height: 1.45rem;
  border-radius: .22rem;
  margin-left: -.42rem;
  background: linear-gradient(150deg, #4a1f8f, #1b0c3d);
  border: 1px solid rgba(255, 255, 255, .3);
  box-shadow: 0 .12rem .3rem rgba(0, 0, 0, .5);
}
.opp__count { font-size: .78rem; opacity: .85; letter-spacing: .06em; }

.opp.is-current {
  border-color: var(--neon-lime);
  background: rgba(157, 255, 61, .13);
  transform: translateY(.3rem) scale(1.09);
  box-shadow: 0 0 1.8rem rgba(157, 255, 61, .45);
}
/* A sweeping spotlight ring so a small kid can see whose go it is at a glance. */
.opp.is-current::before {
  content: '';
  position: absolute;
  inset: -.4rem;
  border-radius: 1.5rem;
  background: conic-gradient(from 0turn, transparent 0 70%, rgba(157, 255, 61, .9) 85%, transparent 100%);
  animation: sweep 1.6s linear infinite;
  z-index: -1;
}
@keyframes sweep { to { transform: rotate(1turn); } }

.opp.is-out { opacity: .38; filter: grayscale(1); }
.opp.is-out .opp__avatar { transform: rotate(90deg); }
.opp__badge {
  position: absolute;
  top: -.4rem; right: -.4rem;
  font-size: .95rem;
  padding: .05rem .35rem;
  border-radius: 999px;
  background: var(--neon-pink);
  animation: pop-in .4s cubic-bezier(.2, .9, .3, 1.6);
}
.opp.has-one .opp__count { color: var(--neon-amber); font-weight: 800; }

/* --------------------------------------------------------------- middle */

.middle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.2rem, 6vw, 4rem);
  /* Grows into whatever is spare, and — crucially — gives it back when the
     hand and the opponents need the room. */
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  perspective: 1200px;
}
/* `.pile--draw` is a <button>, which does not inherit the page's text colour —
   without this the count and the label render in the UA's black. */
.pile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  background: none;
  border: none;
  color: var(--paper);
  font: inherit;
}
.pile__label {
  font-family: var(--display);
  font-size: .78rem;
  letter-spacing: .18em;
  opacity: .6;
}
.pile__count {
  position: absolute;
  top: -.5rem; right: -.5rem;
  min-width: 1.7rem;
  padding: .1rem .35rem;
  text-align: center;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 800;
  color: #fff;
  background: var(--ink-2);
  border: 2px solid rgba(255, 255, 255, .3);
  z-index: 3;
}

.pile--draw { cursor: pointer; padding: 0; }
.pile--draw .cardback { transition: transform .18s cubic-bezier(.2, .9, .3, 1.6), filter .2s; }
.pile--draw:hover .cardback { transform: translateY(-.5rem) rotate(-3deg); }
.pile--draw:disabled { cursor: default; }
.pile--draw:disabled .cardback { filter: brightness(.55) saturate(.4); }
.pile--draw.can-draw .cardback {
  animation: draw-invite 1.5s ease-in-out infinite;
  box-shadow: 0 0 0 .2rem rgba(157, 255, 61, .8), 0 0 2.4rem rgba(157, 255, 61, .6);
}
@keyframes draw-invite {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-.55rem) rotate(2deg); }
}

.cardback {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--card-w);
  aspect-ratio: 2 / 3;
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .05) 0 6px, transparent 6px 12px),
    linear-gradient(155deg, #6a25c9, #2a0f63 55%, #14082f);
  border: .18rem solid rgba(255, 255, 255, .38);
  box-shadow: var(--shadow), inset 0 0 2rem rgba(0, 0, 0, .5);
}
.cardback__mark { font-size: calc(var(--card-w) * .42); filter: drop-shadow(0 0 .8rem rgba(255, 194, 61, .9)); }

/* The card everyone has to match is the most important thing on the table, so
   it is drawn half as big again as the cards in hand. */
.discard {
  --card-w: calc(var(--card-w-base) * 1.5);
  position: relative;
  width: var(--card-w);
  aspect-ratio: 2 / 3;
}
.discard .card { position: absolute; inset: 0; width: 100%; }

/* ---------------------------------------------------------------- cards */

.card {
  position: relative;
  width: var(--card-w);
  aspect-ratio: 2 / 3;
  border-radius: var(--radius);
  border: .2rem solid #fff;
  box-shadow: var(--shadow);
  overflow: hidden;
  flex: 0 0 auto;
  transform-style: preserve-3d;
  background: var(--face, #666);
  user-select: none;
}
.card[data-color='red']    { --face: var(--red);    --deep: var(--red-deep); }
.card[data-color='blue']   { --face: var(--blue);   --deep: var(--blue-deep); }
.card[data-color='green']  { --face: var(--green);  --deep: var(--green-deep); }
.card[data-color='yellow'] { --face: var(--yellow); --deep: var(--yellow-deep); }
/* A rainbow card wears all four colours at once. */
.card[data-kind='wild'], .card[data-kind='wild4'] {
  --face: linear-gradient(
    160deg,
    var(--red) 0 25%, var(--yellow) 25% 50%, var(--green) 50% 75%, var(--blue) 75% 100%);
  --deep: #2b2b2b;
}

/* ---- the card face ------------------------------------------------------

   Every card is a little bang with unicorn glitter on it, which is the whole
   name in one picture: a comic-book burst behind the number, a rainbow foil
   along the top edge, and a couple of sparkles drifting across the colour. */

.card__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 62% at 50% 34%, rgba(255, 255, 255, .34), transparent 70%),
    var(--face);
}
/* Two bits of unicorn glitter, sitting off to the sides of the burst. */
.card__glow::before,
.card__glow::after {
  content: '';
  position: absolute;
  background: rgba(255, 255, 255, .85);
  clip-path: polygon(50% 0%, 58.5% 41.5%, 100% 50%, 58.5% 58.5%, 50% 100%, 41.5% 58.5%, 0% 50%, 41.5% 41.5%);
}
.card__glow::before { width: 15%; aspect-ratio: 1; top: 9%;  right: 8%; opacity: .95; }
.card__glow::after  { width: 9%;  aspect-ratio: 1; bottom: 13%; left: 9%; opacity: .7; }

/* The bang itself: a chunky eight-point pop, drawn twice so the white one sits
   inside a thick outline in the card's own colour, the way a comic panel does
   it. Eight points rather than twelve because at the size of a card in a
   crowded hand, more than that stops reading as a bang and starts reading as
   a cog. */
.card__burst {
  position: absolute;
  inset: 5% 3%;
  background: var(--deep, #333);
  clip-path: polygon(
    50.0% 0.0%, 62.6% 19.5%, 85.4% 14.6%, 80.5% 37.4%, 100.0% 50.0%, 80.5% 62.6%,
    85.4% 85.4%, 62.6% 80.5%, 50.0% 100.0%, 37.4% 80.5%, 14.6% 85.4%, 19.5% 62.6%,
    0.0% 50.0%, 19.5% 37.4%, 14.6% 14.6%, 37.4% 19.5%);
  transform: rotate(-7deg);
  filter: drop-shadow(0 .09em .1em rgba(0, 0, 0, .28));
}
.card__burst::after {
  content: '';
  position: absolute;
  inset: 6%;
  background: #fffdf4;
  clip-path: polygon(
    50.0% 0.0%, 62.6% 19.5%, 85.4% 14.6%, 80.5% 37.4%, 100.0% 50.0%, 80.5% 62.6%,
    85.4% 85.4%, 62.6% 80.5%, 50.0% 100.0%, 37.4% 80.5%, 14.6% 85.4%, 19.5% 62.6%,
    0.0% 50.0%, 19.5% 37.4%, 14.6% 14.6%, 37.4% 19.5%);
}

/* The number or symbol, big enough to read across a table. */
.card__glyph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: calc(var(--card-w) * .56);
  line-height: 1;
  color: var(--deep, #333);
  padding-bottom: .02em;
}
.card__glyph--emoji { font-family: var(--body); font-size: calc(var(--card-w) * .42); }

/* One pip in the top corner: in a fanned hand it is often all you can see. */
.card__corner {
  position: absolute;
  /* Clear of the foil strip along the top, or it is unreadable against it. */
  top: .52em; left: .36em;
  z-index: 2;
  font-family: var(--display);
  font-size: calc(var(--card-w) * .2);
  color: #fff;
  text-shadow: 0 .06em .12em rgba(0, 0, 0, .55);
  line-height: 1;
}

/* A strip of unicorn foil across the top of every card. */
.card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 2;
  height: 7%;
  background: linear-gradient(90deg, #ff4d6d, #ffb01f 28%, #00c08b 55%, #2f6bff 80%, #b06bff);
  opacity: .95;
}

/* ----------------------------------------------------------- your hand */

.you {
  flex: 0 0 auto;
  width: 100%;
  /* Rotated cards overhang their layout box; this is the room they need. */
  padding: 0 .5rem max(calc(var(--card-w) * .16), env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
}
.you__bar { display: flex; align-items: center; gap: .6rem; margin-bottom: .2rem; }
.you__name { font-family: var(--display); font-size: 1.05rem; letter-spacing: .04em; }

.hand {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  /* Never let the cards dictate how wide the table is — see the grid above. */
  min-width: 0;
  /* Room above for a card to pop up on hover, and below for the fan's arc. */
  padding: 1.4rem .5rem 1.5rem;
  perspective: 1000px;
}
.hand .card {
  margin: 0 var(--gap, 3px);
  cursor: default;
  /* Pivot on the bottom edge: the fan splays upwards and outwards, so no card
     ever swings below the row and off the bottom of the screen. Transforms do
     not affect layout, so anything that dips down here just gets clipped. */
  transform-origin: 50% 100%;
  transform: rotate(var(--tilt, 0deg)) translateY(var(--lift, 0px));
  transition: transform .22s cubic-bezier(.2, .9, .3, 1.5), filter .22s, box-shadow .22s;
  animation: deal-in .45s backwards cubic-bezier(.2, .9, .3, 1.3);
  animation-delay: var(--delay, 0s);
}
@keyframes deal-in {
  from { opacity: 0; transform: translateY(4rem) rotate(var(--tilt, 0deg)) scale(.7); }
}

.hand .card.is-dead { filter: saturate(.72) brightness(.78); opacity: .78; pointer-events: none; }
.hand .card.is-live {
  cursor: pointer;
  box-shadow: var(--shadow), 0 0 0 .18rem rgba(157, 255, 61, .9), 0 0 1.6rem rgba(157, 255, 61, .55);
}
.hand .card.is-live:hover,
.hand .card.is-live:focus-visible {
  transform: rotate(0deg) translateY(calc(var(--lift, 0px) - 2.2rem)) scale(1.1);
  z-index: 20;
  outline: none;
}
.hand .card.is-live:active { transform: rotate(0deg) translateY(calc(var(--lift, 0px) - 1.4rem)) scale(1.04); }

/* A card in flight from the hand to the discard pile. */
.card--ghost {
  position: fixed;
  z-index: 80;
  pointer-events: none;
  margin: 0;
  transition: transform .42s cubic-bezier(.35, .05, .25, 1), opacity .42s;
}

/* ------------------------------------------------------------ overlays */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(8, 3, 24, .78);
  backdrop-filter: blur(10px);
  animation: fade-in .25s ease;
}
@keyframes fade-in { from { opacity: 0; } }
.overlay[hidden] { display: none; }
.overlay--danger { background: rgba(60, 4, 12, .82); }
.overlay--soft { background: rgba(8, 3, 24, .6); }

.overlay__box {
  width: min(40rem, 100%);
  text-align: center;
  padding: clamp(1.2rem, 4vw, 2.2rem);
  border-radius: 1.8rem;
  background: linear-gradient(165deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06));
  border: 1px solid rgba(255, 255, 255, .25);
  box-shadow: 0 2rem 4rem rgba(0, 0, 0, .6);
  animation: screen-in .4s cubic-bezier(.2, .9, .3, 1.3);
}
.overlay__kicker {
  font-family: var(--display);
  color: var(--neon-amber);
  letter-spacing: .16em;
  font-size: 1rem;
  margin-bottom: .3rem;
}
.overlay__title { font-family: var(--display); font-size: clamp(1.3rem, 4.4vw, 2.1rem); line-height: 1.15; margin-bottom: .5rem; }
.overlay__title--huge { font-size: clamp(1.9rem, 8vw, 3.6rem); }
.overlay__text { color: #ddd2ff; margin-bottom: 1.2rem; font-size: 1.05rem; }

.colorpick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.blob {
  aspect-ratio: 1;
  border: .28rem solid #fff;
  border-radius: 40% 60% 55% 45% / 55% 45% 60% 40%;
  cursor: pointer;
  transition: transform .18s cubic-bezier(.2, .9, .3, 1.6), filter .2s;
  animation: blob-morph 7s ease-in-out infinite;
}
.blob[data-color='red']    { background: radial-gradient(circle at 32% 28%, #ff8fa1, var(--red) 55%, var(--red-deep)); }
.blob[data-color='blue']   { background: radial-gradient(circle at 32% 28%, #8cbcff, var(--blue) 55%, var(--blue-deep)); animation-delay: -1.5s; }
.blob[data-color='green']  { background: radial-gradient(circle at 32% 28%, #8cf3b8, var(--green) 55%, var(--green-deep)); animation-delay: -3s; }
.blob[data-color='yellow'] { background: radial-gradient(circle at 32% 28%, #ffeaa0, var(--yellow) 55%, var(--yellow-deep)); animation-delay: -4.5s; }
.blob:hover { transform: scale(1.1) rotate(4deg); filter: brightness(1.14); }
@keyframes blob-morph {
  0%, 100% { border-radius: 40% 60% 55% 45% / 55% 45% 60% 40%; }
  50%      { border-radius: 58% 42% 38% 62% / 42% 60% 40% 58%; }
}

.hidepick { display: grid; gap: .8rem; }
@media (min-width: 40rem) { .hidepick { grid-template-columns: repeat(3, 1fr); } }
.hidespot {
  display: grid;
  gap: .25rem;
  justify-items: center;
  padding: 1rem .7rem;
  border-radius: 1.2rem;
  border: 2px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font: inherit;
  cursor: pointer;
  transition: transform .18s cubic-bezier(.2, .9, .3, 1.6), background .2s, border-color .2s;
}
.hidespot:hover { transform: translateY(-.3rem) scale(1.04); background: rgba(255, 255, 255, .18); border-color: var(--neon-amber); }
.hidespot b { font-family: var(--display); font-size: 1.05rem; }
.hidespot small { opacity: .78; font-size: .82rem; }
/* A little stack of cards with the bomb drawn at the chosen depth. */
.hidespot__art {
  width: 2.6rem; height: 3.4rem;
  border-radius: .4rem;
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .55) 0 2px, transparent 2px 7px),
    linear-gradient(160deg, #5b2bb0, #23104f);
  border: 2px solid rgba(255, 255, 255, .5);
  position: relative;
  margin-bottom: .3rem;
}
.hidespot__art::after {
  content: '💣';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.1rem;
  line-height: 1;
}
.hidespot__art--top::after { top: -.35rem; }
.hidespot__art--middle::after { top: 1.1rem; }
.hidespot__art--bottom::after { bottom: -.35rem; }

.bomb-tick { font-size: 4rem; animation: tick 1s ease-in-out infinite; }
@keyframes tick {
  0%, 100% { transform: rotate(-8deg) scale(1); }
  50%      { transform: rotate(8deg) scale(1.12); }
}

.over__avatar { font-size: clamp(3.5rem, 16vw, 7rem); line-height: 1; animation: boom-bob 1.6s ease-in-out infinite; }

/* -------------------------------------------------------------- cheers */

.cheerbar {
  display: flex;
  align-items: center;
  gap: .5rem;
  justify-content: center;
  padding: .5rem;
  flex-wrap: wrap;
}
.cheerbar[hidden] { display: none; }
.cheerbar__label { font-size: .85rem; opacity: .75; }
.cheer {
  font-size: 1.5rem;
  line-height: 1;
  padding: .4rem .55rem;
  border-radius: .9rem;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .1);
  cursor: pointer;
  transition: transform .15s cubic-bezier(.2, .9, .3, 1.7);
}
.cheer:hover { transform: translateY(-.25rem) scale(1.18); }

.cheers { position: fixed; inset: 0; pointer-events: none; z-index: 95; }
.cheers span {
  position: absolute;
  bottom: 12%;
  font-size: 2.4rem;
  animation: float-up 2.4s ease-out forwards;
}
@keyframes float-up {
  0%   { opacity: 0; transform: translateY(0) scale(.5); }
  15%  { opacity: 1; transform: translateY(-2rem) scale(1.2); }
  100% { opacity: 0; transform: translateY(-18rem) scale(1) rotate(var(--spin, 20deg)); }
}

/* --------------------------------------------------------------- toast */

.toast {
  position: fixed;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%);
  z-index: 120;
  padding: .8rem 1.3rem;
  border-radius: 1rem;
  font-size: 1.05rem;
  background: linear-gradient(180deg, #ff7aa8, var(--neon-pink));
  box-shadow: 0 .8rem 2rem rgba(0, 0, 0, .5);
  animation: toast-in .3s cubic-bezier(.2, .9, .3, 1.6);
  max-width: min(28rem, 90vw);
  text-align: center;
}
.toast[hidden] { display: none; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 1.4rem); } }

/* ------------------------------------------------------- big moments */

.shake { animation: shake .6s cubic-bezier(.36, .07, .19, .97); }
@keyframes shake {
  10%, 90% { transform: translate3d(-3px, 2px, 0) rotate(-.4deg); }
  20%, 80% { transform: translate3d(7px, -5px, 0) rotate(.7deg); }
  30%, 50%, 70% { transform: translate3d(-12px, 6px, 0) rotate(-1deg); }
  40%, 60% { transform: translate3d(12px, -6px, 0) rotate(1deg); }
}

.flash {
  position: fixed;
  inset: 0;
  z-index: 89;
  pointer-events: none;
  background: radial-gradient(circle at center, #fff 0%, #ffb43d 30%, transparent 70%);
  animation: flash-out .5s ease-out forwards;
}
@keyframes flash-out { from { opacity: .95; } to { opacity: 0; } }

/* A word slammed across the screen: BOOM!, ONE CARD!, SKIPPED! */
.slam {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 96;
  pointer-events: none;
  font-family: var(--display);
  font-size: clamp(3rem, 17vw, 10rem);
  letter-spacing: .02em;
  text-align: center;
  color: #fff;
  text-shadow: 0 0 2.5rem rgba(255, 194, 61, .9), .06em .06em 0 rgba(0, 0, 0, .55);
  animation: slam 1.25s cubic-bezier(.2, .9, .3, 1.4) forwards;
}
@keyframes slam {
  0%   { opacity: 0; transform: scale(3.2) rotate(-9deg); }
  18%  { opacity: 1; transform: scale(1) rotate(-4deg); }
  75%  { opacity: 1; transform: scale(1.03) rotate(-4deg); }
  100% { opacity: 0; transform: scale(1.5) rotate(-4deg); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Phones: shrink the cards and stack the middle so nothing is cut off. */
/* Short screens (phones in landscape, small laptops): scale the cards to the
   height available, not just the width, so the fan always fits. */
@media (max-height: 50rem) {
  :root { --card-w-base: clamp(3.4rem, min(8.5vw, 13vh), 5.6rem); }
  .hand { padding: .6rem .5rem .7rem; }
  .opp__cards { height: 1rem; }
  .opp__card { height: 1rem; }
}

/* ------------------------------------------------------- the pile-up */

/* The running total of a +2 chain, sat on the corner of the discard. */
.pileup {
  position: absolute;
  top: -.9rem; right: -.9rem;
  z-index: 3;
  padding: .3rem .7rem;
  border-radius: 999px;
  font-family: var(--display);
  font-size: clamp(1.4rem, 5vw, 2.1rem);
  color: #fff;
  background: linear-gradient(160deg, var(--red), #b3103a);
  box-shadow: 0 .3rem 0 rgba(0, 0, 0, .35), 0 0 1.6rem rgba(255, 59, 92, .8);
  animation: pileup-throb .7s ease-in-out infinite;
}
@keyframes pileup-throb {
  50% { transform: scale(1.12) rotate(-4deg); }
}

/* Drawing under a pile-up is not "take one" — make the button look expensive. */
.pile--draw.is-taking .pile__label { opacity: 1; color: var(--red); }
.pile--draw.is-taking .cardback {
  box-shadow: 0 0 0 .25rem var(--red), 0 0 1.8rem rgba(255, 59, 92, .75);
}

/* ------------------------------------------------------------ the bell */

.overlay--bell { background: rgba(4, 32, 46, .84); }

.bell {
  position: relative;
  display: block;
  width: clamp(9rem, 34vw, 13rem);
  aspect-ratio: 1;
  margin: .4rem auto 1.1rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fff6d6, var(--neon-amber) 45%, #c98104);
  box-shadow: 0 .5rem 0 #8a5a02, 0 0 3rem rgba(255, 194, 61, .75);
  cursor: pointer;
  animation: bell-beg .6s ease-in-out infinite;
  -webkit-tap-highlight-color: transparent;
}
.bell:active { transform: translateY(.35rem) scale(.96); box-shadow: 0 .15rem 0 #8a5a02; }
@keyframes bell-beg {
  50% { transform: scale(1.06); }
}
.bell__ring {
  position: absolute;
  inset: -.55rem;
  width: calc(100% + 1.1rem);
  height: calc(100% + 1.1rem);
  transform: rotate(-90deg);
}
.bell__face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(4rem, 15vw, 6rem);
  filter: drop-shadow(0 .2rem .3rem rgba(0, 0, 0, .35));
  animation: bell-swing .35s ease-in-out infinite alternate;
}
@keyframes bell-swing {
  from { transform: rotate(-11deg); }
  to   { transform: rotate(11deg); }
}
.bell__secs {
  position: absolute;
  right: -.3rem; bottom: -.3rem;
  min-width: 2.2rem;
  padding: .1rem .4rem;
  border-radius: 999px;
  font-family: var(--display);
  font-size: clamp(1.3rem, 5vw, 1.9rem);
  color: #fff;
  background: var(--ink-2);
  box-shadow: 0 0 0 .18rem rgba(255, 255, 255, .18);
}
.bell.is-panic { animation-duration: .25s; }
.bell.is-panic .bell__secs { background: var(--red); }
.bell.is-panic .fuse__arc { stroke: var(--red); filter: drop-shadow(0 0 .9rem rgba(255, 59, 92, 1)); }

.bell-tick { font-size: 4rem; animation: bell-swing .4s ease-in-out infinite alternate; }
.bell-tick.is-panic { animation-duration: .2s; }

/* ------------------------------------------------------------ the fuse */

.fuse {
  position: relative;
  width: clamp(6.5rem, 22vw, 9rem);
  aspect-ratio: 1;
  margin: .2rem auto 1rem;
}
.fuse__ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.fuse__track { fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: 9; }
.fuse__arc {
  fill: none;
  stroke: var(--neon-amber);
  stroke-width: 9;
  stroke-linecap: round;
  /* 2 * pi * r, with r = 52 */
  stroke-dasharray: 326.7;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 .6rem rgba(255, 194, 61, .9));
  transition: stroke .3s;
}
.fuse.is-panic .fuse__arc { stroke: var(--red); filter: drop-shadow(0 0 .9rem rgba(255, 59, 92, 1)); }
.fuse__secs {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: clamp(2.6rem, 9vw, 3.8rem);
  text-shadow: 0 .1rem 0 rgba(0, 0, 0, .5);
}
.fuse.is-panic .fuse__secs { color: var(--red); animation: banner-pulse .5s ease-in-out infinite; }

.wait-secs {
  font-family: var(--display);
  font-size: clamp(2.2rem, 8vw, 3.4rem);
  color: var(--neon-amber);
  min-height: 1.2em;
}

/* ------------------------------------------------- the flying unicorn */

/* The strip of sky the unicorn's plane crosses. Deliberately unhurried: a
   small child has to be able to land a finger on it inside five seconds. */
.skyway {
  position: relative;
  height: clamp(8.5rem, 26vh, 11.5rem);
  margin-top: .4rem;
  border-radius: 1.2rem;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(34, 229, 255, .16), rgba(122, 44, 255, .12)),
    radial-gradient(60% 80% at 20% 30%, rgba(255, 255, 255, .16), transparent 60%);
  border: 1px solid rgba(255, 255, 255, .18);
  touch-action: manipulation;
}
/* Drifting clouds, so the movement reads as flight rather than a slider. */
.skyway::before,
.skyway::after {
  content: '☁️';
  position: absolute;
  font-size: 2.2rem;
  opacity: .5;
  animation: cloud-drift 9s linear infinite;
}
.skyway::before { top: 12%; animation-duration: 11s; }
.skyway::after { top: 58%; animation-delay: -5s; font-size: 3rem; opacity: .34; }
@keyframes cloud-drift {
  from { transform: translateX(110%); }
  to   { transform: translateX(-140%); }
}

.flyer {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: .1rem;
  cursor: pointer;
  will-change: transform;
  /* A generous target — bigger than it looks — for small fingers. */
  padding: .5rem;
  border: none;
  background: none;
}
.flyer__plane {
  font-size: clamp(2rem, 7vw, 2.8rem);
  line-height: 1;
  filter: drop-shadow(0 .2rem .5rem rgba(0, 0, 0, .5));
}
.flyer .card {
  width: clamp(2.9rem, 11vw, 4rem);
  box-shadow: var(--shadow), 0 0 0 .18rem #fff, 0 0 1.8rem rgba(255, 255, 255, .7);
  animation: dangle 1.4s ease-in-out infinite;
  transform-origin: 50% 0;
}
@keyframes dangle {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(6deg); }
}
.flyer:hover .card { filter: brightness(1.12); }
.flyer:active { transform-origin: center; }

/* The moment it is caught. */
.flyer.is-caught { pointer-events: none; animation: caught .45s ease-out forwards; }
@keyframes caught {
  to { transform: translate(var(--x, 0), var(--y, 0)) scale(2.2) rotate(18deg); opacity: 0; }
}

/* Confirmation for the hidden three-tap trick. Quiet enough to stay a secret. */
.opp__name { user-select: none; }
.opp.is-armed { animation: armed .7s ease-out; }
@keyframes armed {
  0%   { filter: none; }
  25%  { filter: drop-shadow(0 0 .9rem rgba(255, 59, 92, .95)) brightness(1.3); }
  100% { filter: none; }
}

/* The way out of a lobby you did not mean to create. Quiet on purpose — it
   sits under the big Start button without competing with it. */
.lobby__leave {
  display: block;
  margin: .8rem auto 0;
  opacity: .8;
}
.lobby__leave:hover { opacity: 1; }

/* --------------------------------------- overlays that must not hide the hand */

/* Choosing a colour, or how many cards to lay, are both decisions you make by
   looking at your own hand — so these overlays fade out towards the bottom of
   the screen and leave the cards in plain sight. */
.overlay--colors {
  background: linear-gradient(180deg,
    rgba(8, 3, 24, .88) 0%,
    rgba(8, 3, 24, .84) 38%,
    rgba(8, 3, 24, .3) 70%,
    rgba(8, 3, 24, 0) 86%);
  backdrop-filter: none;
  align-items: start;
  padding-top: clamp(.8rem, 6vh, 4rem);
}
.overlay--colors .overlay__box { width: min(23rem, 100%); }
.overlay__text--tight { margin-bottom: .7rem; font-size: .95rem; }

.many-preview {
  display: flex;
  justify-content: center;
  gap: .4rem;
  margin-bottom: 1rem;
  --card-w: clamp(3rem, 12vw, 4.2rem);
}
.many-preview .card { animation: pop-in .35s backwards cubic-bezier(.2, .9, .3, 1.5); }
.many-preview .card:nth-child(2) { animation-delay: .07s; }
.many-preview .card:nth-child(3) { animation-delay: .14s; }
.many-preview .card:nth-child(4) { animation-delay: .21s; }

.many-preview .card.is-final {
  box-shadow: var(--shadow), 0 0 0 .18rem var(--neon-lime), 0 0 1.2rem rgba(157, 255, 61, .6);
}
.many-final {
  font-size: .88rem;
  color: #cfc2f7;
  margin: -.5rem 0 1rem;
}
.many-final b { color: var(--neon-lime); }

/* ------------------------------------------------------------- standings */

.standings { list-style: none; display: grid; gap: .4rem; margin-bottom: 1.2rem; text-align: left; }
.standings__row {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem .7rem;
  border-radius: .8rem;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  animation: pop-in .35s backwards cubic-bezier(.2, .9, .3, 1.4);
}
.standings__row:nth-child(2) { animation-delay: .08s; }
.standings__row:nth-child(3) { animation-delay: .16s; }
.standings__row:nth-child(4) { animation-delay: .24s; }
.standings__row.is-you { border-color: var(--neon-lime); background: rgba(157, 255, 61, .14); }
.standings__medal { font-size: 1.3rem; width: 1.6rem; text-align: center; }
.standings__avatar { font-size: 1.4rem; }
.standings__name { font-weight: 800; }
.standings__how { margin-left: auto; font-size: .8rem; opacity: .7; }

/* Finished the round rather than blown up — celebrated, not greyed out. */
.opp.is-done { opacity: .85; }
.opp.is-done .opp__cards { display: none; }
.opp.is-done .opp__count { color: var(--neon-amber); font-weight: 800; }