/* ============================================================
   Deckparty — visual system
   Midnight felt, cream card stock, riso-offset ink.
   Motion rule: things move because something happened. Nothing idles.
   ============================================================ */

:root {
  color-scheme: dark;
  scrollbar-color: rgba(251, 244, 230, 0.2) transparent;
  --night: #12162b;
  --night-2: #1a1f3d;
  --line: rgba(251, 244, 230, 0.1);
  --cream: #fbf4e6;
  --cream-2: #efe5d0;
  --dim: rgba(251, 244, 230, 0.64);
  --faint: rgba(251, 244, 230, 0.38);
  --gold: #ffcb57;
  --ink: #161a2e;

  --red: #ff5a4f;
  --red-d: #c7362d;
  --yellow: #ffc43a;
  --yellow-d: #cf8c0c;
  --green: #1fbf87;
  --green-d: #0f855b;
  --blue: #4a7cff;
  --blue-d: #2a4fcc;

  --cur: var(--cream);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --pop: cubic-bezier(0.3, 1.35, 0.5, 1);
  /* the bottom inset: the device's, or Telegram's (its own safe area plus the part its controls cover), whichever
     is larger, so neither is counted twice */
  --safe-b: max(env(safe-area-inset-bottom, 0px), calc(var(--tg-safe-area-inset-bottom, 0px) + var(--tg-content-safe-area-inset-bottom, 0px)));
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  height: 100%;
  background: var(--night);
  color: var(--cream);
  font-family: 'Bricolage Grotesque', ui-rounded, system-ui, sans-serif;
  font-optical-sizing: auto;
  overflow: hidden;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  -webkit-font-smoothing: antialiased;
}

/* text you type or might want to copy can be selected (the rest of the app can't), and pasting into a field (an
   amount, a wallet address) still gets its menu */
input,
textarea {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

img {
  -webkit-user-drag: none;
}

/* every picture in the app is decoration: a tap goes to the button or row it sits in */
#app img {
  pointer-events: none;
}

/* scroll areas: thin, dark bars */
* {
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: rgba(251, 244, 230, 0.2);
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}

.hidden {
  display: none !important;
}

img.emo {
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
  pointer-events: none;
}

#app {
  position: fixed;
  inset: 0;
  overflow: clip;
  max-width: 540px;
  margin: 0 auto;
  /* Film grain is the top layer, overlaid onto the felt as the background is painted: once, into the page's tiles.
     (It used to be a full-screen overlay-blended layer over everything, which made the compositor blend the whole
     screen again on every animated frame.) The .08 strength is baked into the noise tile. */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E"),
    radial-gradient(120% 70% at 50% 42%, rgba(74, 90, 180, 0.3), transparent 62%),
    radial-gradient(90% 50% at 50% 110%, rgba(255, 203, 87, 0.07), transparent 70%),
    linear-gradient(180deg, #151a33 0%, var(--night) 100%);
  background-blend-mode: overlay, normal, normal, normal;
}

.screen {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.32s var(--ease), transform 0.4s var(--ease), visibility 0s 0.32s;
}

.screen.active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.32s var(--ease), transform 0.4s var(--ease);
}

/* The table only fades in, it doesn't slide: the opening deal is aimed the moment it appears, and a table still
   sliding into place made every dealt card land 10px off and then hop. */
#screen-game {
  transform: none;
}

/* A screen that isn't showing is only hidden (so it can fade), so its animations would otherwise keep running. */
.screen:not(.active) *,
.screen:not(.active) *::before,
.screen:not(.active) *::after {
  animation-play-state: paused !important;
}

/* ============================================================
   Cards  (size comes from --w, set by the container)
   ============================================================ */

.card {
  --c: #555;
  --cd: #333;
  position: relative;
  width: var(--w, 64px);
  height: calc(var(--w, 64px) * 1.4);
  font-size: var(--w, 64px);
  border-radius: 0.12em;
  background: var(--cream);
  box-shadow:
    0 0.012em 0 rgba(255, 255, 255, 0.6) inset,
    0 -0.02em 0 rgba(0, 0, 0, 0.12) inset,
    0 0.05em 0.14em rgba(6, 8, 24, 0.42);
  flex: none;
}

.card[data-color='red'] { --c: var(--red); --cd: var(--red-d); }
.card[data-color='yellow'] { --c: var(--yellow); --cd: var(--yellow-d); }
.card[data-color='green'] { --c: var(--green); --cd: var(--green-d); }
.card[data-color='blue'] { --c: var(--blue); --cd: var(--blue-d); }

.card .field {
  position: absolute;
  inset: 0.055em;
  border-radius: 0.08em;
  background: var(--c);
  overflow: hidden;
}

.card .field::before {
  content: '';
  position: absolute;
  width: 1.15em;
  height: 1.15em;
  right: -0.42em;
  bottom: -0.36em;
  border-radius: 50%;
  border: 0.1em solid rgba(255, 255, 255, 0.13);
}

.card .field::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.2), transparent 38%);
  pointer-events: none;
}

.card .idx {
  position: absolute;
  font-size: 0.19em;
  font-weight: 800;
  line-height: 1;
  color: var(--cream);
  z-index: 1;
}

.card .idx.tl { left: 0.36em; top: 0.3em; }
.card .idx.br { right: 0.36em; bottom: 0.3em; transform: rotate(180deg); }

.card .idx svg {
  display: block;
  width: 1.05em;
  height: 1.05em;
}

.card .idx .u {
  display: block;
  height: 0.09em;
  margin-top: 0.06em;
  background: currentColor;
  border-radius: 1px;
}

.card .pip {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--cream);
  z-index: 1;
}

.card.num .pip span {
  font-size: 0.7em;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  margin-top: 0.02em;
  text-shadow: 0.045em 0.045em 0 var(--cd);
}

.card.action .pip > svg {
  width: 0.54em;
  height: 0.54em;
  filter: drop-shadow(0.03em 0.03em 0 var(--cd));
}

.card .pip .plus {
  font-size: 0.5em;
  font-weight: 800;
  letter-spacing: -0.05em;
  text-shadow: 0.06em 0.06em 0 var(--cd);
}

.card.wild .field {
  background: radial-gradient(circle at 50% 42%, #262c4d, var(--ink) 70%);
}

.card.wild .field::before {
  border-color: rgba(255, 255, 255, 0.07);
}

.card.wild .pip .wheel {
  width: 0.66em;
  height: 0.66em;
  filter: drop-shadow(0 0.03em 0.05em rgba(0, 0, 0, 0.5));
}

.card.wild.v-wild4 .pip .wheel {
  width: 0.6em;
  height: 0.6em;
}

.card .pip .plus4 {
  position: absolute;
  font-size: 0.3em;
  font-weight: 800;
  color: var(--cream);
  text-shadow: 0 0 0.12em var(--ink), 0.05em 0.05em 0 var(--ink);
}

.wheel .w-red, .mini .w-red { fill: var(--red); }
.wheel .w-yellow, .mini .w-yellow { fill: var(--yellow); }
.wheel .w-green, .mini .w-green { fill: var(--green); }
.wheel .w-blue, .mini .w-blue { fill: var(--blue); }
.wheel .w { transition: opacity 0.3s; }

.card .idx .mini {
  width: 1.1em;
  height: 1.1em;
}

.card.wild[data-color] .field {
  box-shadow: inset 0 0 0 0.05em var(--c);
}

.card.wild[data-color='red'] .wheel .w:not(.w-red),
.card.wild[data-color='yellow'] .wheel .w:not(.w-yellow),
.card.wild[data-color='green'] .wheel .w:not(.w-green),
.card.wild[data-color='blue'] .wheel .w:not(.w-blue) {
  opacity: 0.18;
}

.card.back .field {
  background:
    repeating-linear-gradient(45deg, rgba(251, 244, 230, 0.05) 0 0.02em, transparent 0.02em 0.09em),
    radial-gradient(circle at 50% 50%, #2a3268, #1b2045 75%);
}

.card.back .field::before {
  inset: 0.1em;
  width: auto;
  height: auto;
  right: auto;
  bottom: auto;
  border-radius: 0.06em;
  border: 0.02em solid rgba(251, 244, 230, 0.18);
}

.back-mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.back-mark .wheel {
  width: 0.46em;
  height: 0.46em;
}

/* 3D flip card used in flights */
.flip {
  position: relative;
  width: var(--w, 64px);
  height: calc(var(--w, 64px) * 1.4);
  transform-style: preserve-3d;
}

.flip > .card {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.flip > .face-front {
  transform: rotateY(180deg);
}

/* A card you can't play right now is dimmed by two layers laid over it: the first takes most of the color out (a
   saturation blend, flattened into the card as it's painted), the second darkens it. It looks the same as the
   filter it replaces (saturate .35, brightness .62), without a filter on every such card, which gave each one its
   own compositing pass every time a turn started or ended. A drawn card you can't play flies in already dimmed, as
   it will sit in your hand. */
.slot .card::before,
.slot .card::after,
.flip > .face-front::before,
.flip > .face-front::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

/* the color goes: how much is the grey's alpha, so it eases with a repaint of the card, not a composited blend */
.slot .card::before,
.flip > .face-front::before {
  z-index: 2;
  background: rgba(128, 128, 128, 0);
  mix-blend-mode: saturation;
}

/* the card darkens: only this layer's opacity changes */
.slot .card::after,
.flip > .face-front::after {
  z-index: 3;
  background: rgba(0, 0, 0, 0.41);
  opacity: 0;
}

.slot .card::before {
  transition: background-color 0.25s;
}

.slot .card::after {
  transition: opacity 0.25s;
}

.slot.dim .card::before,
.flip.dim > .face-front::before {
  background: rgba(128, 128, 128, 0.65);
}

.slot.dim .card::after,
.flip.dim > .face-front::after {
  opacity: 1;
}

/* flights live in #app between the table (hand 10, topbar 20) and anything opened on top of it
   (emoji panel 40, picker 45, victory 70, results 76, sheets 80+) */
.flying {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 32;
  pointer-events: none;
  margin: 0;
  will-change: transform;
}

/* ============================================================
   Shared UI
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 20px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  transition: transform 0.14s var(--ease), background 0.2s, box-shadow 0.2s, opacity 0.2s;
}

.btn:active {
  transform: scale(0.97);
}

.btn.primary {
  background: var(--cream);
  color: var(--ink);
  box-shadow: 0 3px 0 var(--cream-2), 0 10px 24px rgba(0, 0, 0, 0.28);
}

.btn.primary:active {
  box-shadow: 0 1px 0 var(--cream-2), 0 4px 12px rgba(0, 0, 0, 0.3);
  transform: translateY(2px);
}

.btn.secondary {
  background: rgba(251, 244, 230, 0.08);
  box-shadow: inset 0 0 0 1px var(--line);
}

.btn.big {
  width: 100%;
  height: 54px;
  font-size: 17px;
  font-weight: 800;
}

.btn:disabled {
  opacity: 0.45;
  pointer-events: none;
}

.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(10, 12, 28, 0.35);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--cream);
  transition: transform 0.14s var(--ease);
}

.icon-btn:active {
  transform: scale(0.92);
}

.icon-btn.ghost {
  visibility: hidden;
}

.icon-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-btn svg path[fill='currentColor'] {
  fill: currentColor;
}

.panel {
  background: linear-gradient(180deg, rgba(251, 244, 230, 0.075), rgba(251, 244, 230, 0.04));
  box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px rgba(0, 0, 0, 0.22);
  border-radius: 22px;
}

.seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(8, 10, 24, 0.4);
  box-shadow: inset 0 0 0 1px var(--line);
}

.seg button {
  height: 34px;
  border-radius: 9px;
  font-weight: 700;
  font-size: 14px;
  color: var(--dim);
  transition: background 0.22s var(--ease), color 0.18s;
}

.seg button.on {
  background: var(--cream);
  color: var(--ink);
}

.avatar {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--tint, #3a4380);
  color: var(--ink);
  font-weight: 800;
  box-shadow: 0 0 0 2px var(--night), 0 0 0 3.5px rgba(251, 244, 230, 0.85);
}

.avatar img.photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar img.emo {
  width: 64%;
  height: 64%;
  vertical-align: 0;
}

.avatar .initial {
  font-size: 0.46em;
  color: var(--cream);
}

.avatar.initials {
  background: linear-gradient(145deg, var(--a1, #5b6cd6), var(--a2, #2f3a86));
}

.level-tag,
.host-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(251, 244, 230, 0.1);
  color: var(--dim);
}

.level-tag.hard { background: rgba(255, 90, 79, 0.18); color: #ffb0a9; }
.level-tag.easy { background: rgba(31, 191, 135, 0.16); color: #9fe8c9; }
.host-tag { background: rgba(255, 203, 87, 0.18); color: var(--gold); }

/* ============================================================
   Loading
   ============================================================ */

.loader {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
}

.wheel-spin {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: conic-gradient(var(--red) 0 25%, var(--yellow) 0 50%, var(--blue) 0 75%, var(--green) 0);
  -webkit-mask: radial-gradient(circle, transparent 38%, #000 39%);
  mask: radial-gradient(circle, transparent 38%, #000 39%);
  animation: spin 1.1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ============================================================
   Home
   ============================================================ */

.home-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 18px calc(26px + var(--safe-b));
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.home-scroll > * {
  flex-shrink: 0;
}

.home-hero {
  text-align: center;
  padding-top: 4px;
}

.hero-cards {
  position: relative;
  height: 140px;
  margin: 2px auto 0;
  width: 260px;
}

.hero-cards .card {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform-origin: 50% 120%;
  animation: bob 7s ease-in-out infinite;
}

@keyframes bob {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -4px;
  }
}

.wordmark {
  margin: 10px 0 0;
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  text-shadow: 3px 3px 0 var(--blue-d);
}

.tagline {
  margin: 7px 0 0;
  color: var(--dim);
  font-size: 15px;
  font-weight: 500;
}

@media (max-height: 760px) {
  .hero-cards {
    height: 104px;
    transform: scale(0.78);
    transform-origin: 50% 100%;
  }
  .wordmark {
    font-size: 40px;
    margin-top: 6px;
  }
  .tagline {
    font-size: 14px;
  }
  .home-scroll {
    gap: 10px;
  }
}

.profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(8, 10, 24, 0.3);
  box-shadow: inset 0 0 0 1px var(--line);
}

.profile .pav {
  width: 44px;
  height: 44px;
  font-size: 44px;
  flex: none;
}

.profile .pinfo {
  flex: 1;
  min-width: 0;
}

.profile .pname {
  font-weight: 800;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile .pstats {
  display: flex;
  gap: 12px;
  margin-top: 3px;
  font-size: 13px;
  color: var(--dim);
  font-weight: 600;
}

.profile .pstats b {
  color: var(--cream);
  font-weight: 800;
}

.quick {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 16px;
  border-radius: 22px;
  text-align: left;
  background:
    linear-gradient(120deg, rgba(255, 203, 87, 0.2), rgba(255, 90, 79, 0.12) 45%, rgba(74, 124, 255, 0.16)),
    rgba(20, 24, 48, 0.9);
  box-shadow: inset 0 0 0 1px rgba(255, 203, 87, 0.28), 0 14px 34px rgba(0, 0, 0, 0.25);
  transition: transform 0.14s var(--ease);
  overflow: hidden;
}

.quick:active {
  transform: scale(0.985);
}

.quick-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255, 203, 87, 0.18);
  flex: none;
}

.quick-icon img {
  width: 26px;
  height: 26px;
}

.quick-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.quick-text b {
  font-size: 17px;
  font-weight: 800;
}

.quick-text small {
  font-size: 13px;
  color: var(--dim);
  font-weight: 600;
}

.play-panel {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.panel-head h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.bot-faces {
  display: flex;
}

.bot-faces .bf {
  width: 32px;
  height: 32px;
  font-size: 32px;
  margin-left: -8px;
}

.bot-faces .bf.enter {
  animation: faceIn 0.36s var(--pop);
}

@keyframes faceIn {
  from {
    transform: scale(0.4) translateY(6px);
    opacity: 0;
  }
}

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.field-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

.mode-note {
  margin: 1px 2px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--dim);
}

.mode-seg {
  margin: 4px 0 14px;
}

.mode-card {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(251, 244, 230, 0.05);
  box-shadow: inset 0 0 0 1px var(--line);
}

.mode-card p {
  margin: 0 0 6px;
}

.mode-card p:last-child {
  margin: 0;
}

.friends-panel {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  text-align: left;
  transition: transform 0.14s var(--ease);
}

.friends-panel:active {
  transform: scale(0.985);
}

.fp-icons {
  display: flex;
  flex: none;
}

.fp-icons img {
  width: 30px;
  height: 30px;
  margin-right: -6px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}

.fp-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fp-text b {
  font-size: 16px;
  font-weight: 800;
}

.fp-text small {
  font-size: 13px;
  color: var(--dim);
}

.chev {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: var(--faint);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 2px;
}

.link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--dim);
  padding: 8px 4px;
}

.link-btn svg {
  width: 17px;
  height: 17px;
}

.home-links .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--faint);
}

/* ============================================================
   Lobby
   ============================================================ */

.lobby {
  position: absolute;
  inset: 0;
  padding: 14px 18px calc(22px + var(--safe-b));
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.lobby-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lobby-title {
  text-align: center;
}

.lobby-title h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
}

.lobby-title span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--faint);
}

.seats-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.slot-card {
  position: relative;
  aspect-ratio: 1 / 1.02;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  background: linear-gradient(180deg, rgba(251, 244, 230, 0.08), rgba(251, 244, 230, 0.035));
  box-shadow: inset 0 0 0 1px var(--line);
  animation: slotIn 0.4s var(--ease) both;
}

@keyframes slotIn {
  from {
    transform: translateY(6px) scale(0.97);
    opacity: 0;
  }
}

.slot-card .sav {
  width: 64px;
  height: 64px;
  font-size: 64px;
}

.slot-card .sname {
  font-weight: 800;
  font-size: 15px;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slot-card .smeta {
  display: flex;
  gap: 5px;
  align-items: center;
}

.slot-card.empty {
  background: transparent;
  box-shadow: none;
  outline: 1.5px dashed rgba(251, 244, 230, 0.16);
  outline-offset: -1.5px;
  color: var(--faint);
  font-weight: 600;
  font-size: 14px;
  animation: none;
}

.slot-card.empty .ring {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1.5px dashed rgba(251, 244, 230, 0.2);
  display: grid;
  place-items: center;
}

.slot-card.empty .ring svg {
  width: 22px;
  height: 22px;
  color: var(--faint);
}

.slot-card.empty.addable {
  cursor: pointer;
  color: var(--dim);
}

.slot-card .remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: rgba(8, 10, 24, 0.4);
  color: var(--dim);
}

.slot-card .remove svg {
  width: 14px;
  height: 14px;
}

.rules-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  background: rgba(251, 244, 230, 0.07);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--dim);
}

.chip.on {
  color: var(--cream);
}

.chip.edit {
  color: var(--gold);
}

.lobby-actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lobby-wait {
  text-align: center;
  color: var(--dim);
  font-weight: 600;
  font-size: 14px;
  padding: 10px 0;
}

/* ============================================================
   Table
   ============================================================ */

#table {
  position: absolute;
  inset: 0;
  overflow: clip;
  --w: 64px;
  /* leaving .hit (a new round): the zoom snaps back at once, so the next deal is aimed at where things really are;
     only the dimming eases out (the zoom eases in: see #table.hit) */
  transition: filter 0.3s var(--ease);
}

/* app.js can set .snap on the table for the frame a round starts: seats take their new places at once, so cards
   dealt to them fly to where they are, not to where they were */
#table.snap,
#table.snap .seat {
  transition: none !important;
}

.topbar {
  position: absolute;
  top: 10px;
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 20;
}

.top-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.room-chip {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--faint);
}

.room-chip:empty {
  display: none;
}

/* wild mode: one segment per lap, filling as the turns go by. It sits over the top player's cards, so it gets a
   solid backing to stay readable. */
.clock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 6px 11px 5px;
  border-radius: 12px;
  /* solid enough to read on its own (a blur behind it was re-run whenever the cards under it moved) */
  background: rgba(12, 14, 32, 0.9);
  box-shadow: inset 0 0 0 1px rgba(251, 244, 230, 0.08), 0 6px 16px rgba(0, 0, 0, 0.35);
}

.clock .segs {
  display: flex;
  gap: 3px;
  width: clamp(110px, 38vw, 170px);
}

.clock .segs i {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  overflow: hidden;
  background: rgba(251, 244, 230, 0.13);
}

.clock .segs b {
  display: block;
  height: 100%;
  background: var(--cream);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.6s var(--ease), background 0.4s;
}

.clock.last .segs b { background: var(--gold); }
.clock.sudden .segs b { background: var(--red); }

.clock span {
  line-height: 1.1;
}

/* ---------- center ---------- */

/* No transition: the deck and pile are where cards are dealt from and to, often in the very frame they move (a
   first game with more players), and a gliding centre sent the whole deal to where it used to be. */
#center {
  position: absolute;
  left: 50%;
  top: 41%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: calc(var(--pw) * 0.36);
}

#table.sides #center { top: 44%; }
#table.three #center { top: 47%; }

#halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--pw) * 3.7);
  height: calc(var(--pw) * 3.7);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

#halo svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* The soft glow of the current color: a plain element masked into a soft disc, the same falloff as the blurred
   circle it replaces. (That circle shared an SVG with the orbit, so every turn re-rendered it, blur and all.)
   Its color still eases over. */
.halo-glow {
  position: absolute;
  left: -10%;
  top: -10%;
  width: 120%;
  height: 120%;
  background-color: var(--cur);
  opacity: 0.1;
  -webkit-mask-image: radial-gradient(closest-side, #000 41%, rgba(0, 0, 0, 0.84) 53%, rgba(0, 0, 0, 0.5) 66%, rgba(0, 0, 0, 0.16) 78%, transparent 90%);
  mask-image: radial-gradient(closest-side, #000 41%, rgba(0, 0, 0, 0.84) 53%, rgba(0, 0, 0, 0.5) 66%, rgba(0, 0, 0, 0.16) 78%, transparent 90%);
  transition: background-color 0.7s var(--ease);
}

/* the dashed orbit turns as a layer of its own (app.js sets its rotate): the turn costs the compositor, not a
   repaint */
.orbit {
  position: absolute;
  inset: 0;
  transition: transform 0.9s var(--ease);
  will-change: transform;
}

.orbit-dash {
  fill: none;
  stroke: var(--cur);
  stroke-width: 2.2;
  stroke-dasharray: 1 13;
  stroke-linecap: round;
  opacity: 0.5;
  transition: stroke 0.7s var(--ease);
}

.orbit-arrows {
  fill: var(--cur);
  opacity: 0.85;
  transform-origin: 50% 50%;
  transition: fill 0.7s var(--ease), transform 0.6s var(--ease-io);
}

#table.ccw .orbit-arrows {
  transform: scaleX(-1);
}

#pile-wrap,
#deck-wrap {
  position: relative;
}

#pile,
#deck {
  --w: var(--pw);
  position: relative;
  width: var(--pw);
  height: calc(var(--pw) * 1.4);
}

#pile .card,
#deck .card {
  position: absolute;
  inset: 0;
}

/* the deck gets thinner as it runs down (1-4 layers), then shows an empty spot until the reshuffle */
#deck .card:nth-last-child(2) { translate: 2px 2.5px; }
#deck .card:nth-last-child(3) { translate: 4px 5px; }
#deck .card:nth-last-child(4) { translate: 6px 7.5px; }

#deck.empty::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: calc(var(--pw) * 0.12);
  border: 2px dashed rgba(251, 244, 230, 0.16);
}

/* its glow is drawn once; lighting it up only fades it in */
#deck::after {
  content: '';
  position: absolute;
  inset: -6px -6px -10px;
  border-radius: 14px;
  box-shadow: 0 0 0 2px rgba(255, 203, 87, 0.75), 0 0 26px rgba(255, 203, 87, 0.28);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
  pointer-events: none;
}

#deck.active {
  cursor: pointer;
}

#deck.hot::after {
  opacity: 1;
}

#deck-cta {
  position: absolute;
  left: 50%;
  top: calc(100% + 14px);
  translate: -50% 0;
  white-space: nowrap;
  height: 30px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  background: var(--cream);
  color: var(--ink);
  box-shadow: 0 2px 0 var(--cream-2), 0 6px 16px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(-4px) scale(0.94);
  pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.25s var(--ease), background 0.2s, color 0.2s;
}

#deck-cta.on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

#deck-cta.warn {
  background: var(--red);
  color: #fff;
  box-shadow: 0 2px 0 var(--red-d), 0 6px 16px rgba(0, 0, 0, 0.35);
}

#deck-cta:active {
  transform: scale(0.95);
}

/* pending penalty on the pile */
#penalty {
  position: absolute;
  right: -16px;
  top: -12px;
  z-index: 5;
  min-width: 44px;
  height: 28px;
  padding: 0 8px;
  border-radius: 14px;
  background: var(--red);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  box-shadow: 0 0 0 3px var(--night), 0 6px 14px rgba(199, 54, 45, 0.45);
  overflow: hidden;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s var(--ease), transform 0.3s var(--pop);
  pointer-events: none;
}

#penalty.on {
  opacity: 1;
  transform: none;
}

#penalty span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

/* The chip grows and heats up as the stack builds. It scales about its centre (the sizes it used to step through
   all kept that centre), so growing is a transform, not a re-layout of the table on every frame. Its shadows are
   set smaller by the same factor, so on screen they stay as they were. */
#penalty {
  transition: opacity 0.2s var(--ease), transform 0.3s var(--pop), scale 0.3s var(--ease);
}

#penalty[data-level='2'] {
  scale: 1.14;
  box-shadow: 0 0 0 2.65px var(--night), 0 5.3px 12.3px rgba(199, 54, 45, 0.45);
}

#penalty[data-level='3'] {
  scale: 1.28;
  background: linear-gradient(160deg, #ff7a3d, var(--red) 55%, #d42a4f);
  box-shadow: 0 0 0 2.35px var(--night), 0 0 20px rgba(255, 90, 79, 0.55);
}

#penalty[data-level='4'] {
  scale: 1.42;
  background: linear-gradient(160deg, #ffb13d, #ff5a3d 45%, #d42a4f);
  box-shadow: 0 0 0 2.1px var(--night), 0 0 25px rgba(255, 120, 60, 0.7);
}

.penalty-fly {
  display: none;
}

/* ---------- seats ---------- */

#seats {
  position: absolute;
  inset: 0;
  pointer-events: none;
  --w: var(--bw);
}

.seat {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 120px;
  margin-left: -60px;
  transition: left 0.5s var(--ease), top 0.5s var(--ease), opacity 0.3s;
}

.seat.pos-top { left: 50%; top: 58px; }
.seat.pos-left { left: 68px; top: 84px; }
.seat.pos-right { left: calc(100% - 68px); top: 84px; }
.seat.pos-bottom { left: 50%; top: calc(100% - 250px); }
#table.three .seat.pos-top { top: 40px; }
#table.three .seat.pos-left,
#table.three .seat.pos-right { top: 150px; }

.seat .fan {
  position: relative;
  height: 44px;
  width: 100%;
  margin-bottom: -16px;
}

.seat .fan .card {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform-origin: 50% 140%;
  transition: transform 0.35s var(--ease);
}

.av-wrap {
  position: relative;
  width: 52px;
  height: 52px;
  z-index: 2;
}

.av-slot {
  width: 100%;
  height: 100%;
  font-size: 52px;
  transition: filter 0.3s;
}

.timer {
  position: absolute;
  inset: -7px;
  width: calc(100% + 14px);
  height: calc(100% + 14px);
  transform: rotate(-90deg);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s;
}

.timer.on {
  opacity: 1;
}

.timer circle {
  fill: none;
  stroke-width: 3.2;
  stroke-linecap: round;
}

.timer .track {
  stroke: rgba(251, 244, 230, 0.12);
}

.timer .prog {
  stroke: var(--gold);
  stroke-dasharray: 100 100;
  transition: stroke 0.3s;
}

.timer.urgent .prog {
  stroke: var(--red);
}

/* whose turn: a steady ring, no pulsing (drawn once; the turn passing only fades it) */
.av-wrap::before {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  box-shadow: 0 0 0 2.5px rgba(255, 203, 87, 0.95), 0 0 20px rgba(255, 203, 87, 0.35);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
  pointer-events: none;
}

.seat.active .av-wrap::before,
#me.active .av-wrap::before {
  opacity: 1;
}

.count-badge {
  position: absolute;
  right: -8px;
  bottom: -4px;
  min-width: 24px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  background: var(--cream);
  color: var(--ink);
  box-shadow: 0 0 0 2.5px var(--night), 0 3px 8px rgba(0, 0, 0, 0.35);
  z-index: 3;
  transition: background 0.3s, color 0.3s;
}

.count-badge.low { background: var(--gold); }
.count-badge.last { background: var(--red); color: #fff; }

.seat .label {
  margin-top: 9px;
  max-width: 130px;
}

.seat .nm {
  display: block;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.seat.offline .av-slot,
.seat.offline .fan,
.seat.offline .label .nm {
  opacity: 0.5;
}

.seat .tag {
  margin-top: 5px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--red);
  color: #fff;
  opacity: 0;
  transform: translateY(-4px) scale(0.9);
  transition: opacity 0.25s var(--ease), transform 0.3s var(--ease);
}

.seat.last .tag {
  opacity: 1;
  transform: none;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* the crown: one on the table, travelling to whoever is winning (placed and moved from app.js) */
.crown-actor {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.45));
}

.crown-spark {
  position: absolute;
  left: 0;
  top: 0;
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  background: radial-gradient(circle, #fff 0 16%, #ffe27a 36%, rgba(255, 196, 58, 0) 72%);
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
  pointer-events: none;
}

/* ---------- prompt & hand ---------- */

#prompt {
  position: absolute;
  left: 0;
  right: 0;
  height: 30px;
  bottom: calc(var(--hw) * 1.4 + 104px + var(--safe-b));
  /* a second row of cards lifts it: by transform, so it moves without laying the table out again */
  transform: translateY(calc((var(--rows, 1) - 1) * var(--hw) * -0.64));
  pointer-events: none;
  transition: transform 0.4s var(--ease);
}

#prompt .pr {
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% 0;
  height: 30px;
  padding: 0 14px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--cream);
  background: rgba(14, 17, 36, 0.72);
  box-shadow: inset 0 0 0 1px var(--line);
}

#prompt .pr.gold {
  color: var(--ink);
  background: var(--gold);
  box-shadow: 0 6px 18px rgba(255, 203, 87, 0.3);
}

#hand {
  --w: var(--hw);
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(72px + var(--safe-b));
  /* (no transition: the hand's box is invisible, and animating its height re-laid out the table every frame) */
  height: calc(var(--hw) * 1.4 + (var(--rows, 1) - 1) * var(--hw) * 0.64 + 20px);
  touch-action: none;
  /* keep the cards' z-order inside the hand so overlays (picker, results) cover it */
  z-index: 10;
}

.slot {
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--hw);
  height: calc(var(--hw) * 1.4);
  transform-origin: 50% 110%;
  transition: transform 0.34s var(--ease);
  touch-action: none;
}

.slot .card {
  transition: transform 0.2s var(--ease);
}

.slot.playable {
  cursor: grab;
}

.slot.playable .card {
  transform: translateY(-10px);
}

/* dimmed by the layers laid over it (.slot .card::before and ::after, with the flying cards) */
.slot.dim .card {
  transform: translateY(5px);
}

.slot.hint .card {
  box-shadow: 0 0 0 2.5px var(--gold), 0 0 22px rgba(255, 203, 87, 0.45);
}

@media (hover: hover) {
  .slot.playable:hover .card {
    transform: translateY(-24px) scale(1.03);
  }
}

.slot.playable:active .card {
  transform: translateY(-18px) scale(0.98);
}

.slot.dragging {
  cursor: grabbing;
}

.slot.dragging .card {
  transition: none;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

/* dragging a card over the table lights up the pile (the glow is drawn once and faded in) */
#pile::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 16px;
  box-shadow: 0 0 0 2px rgba(251, 244, 230, 0.75), 0 0 30px rgba(251, 244, 230, 0.3);
  opacity: 0;
  transition: opacity 0.2s var(--ease);
  pointer-events: none;
}

#table.drop-ready #pile::after {
  opacity: 1;
}

/* ---------- spectating ---------- */

#spectate {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: calc(26px + var(--safe-b));
  display: flex;
  justify-content: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s var(--ease), transform 0.4s var(--ease);
  pointer-events: none;
}

#spectate.on {
  opacity: 1;
  transform: none;
}

.sp-card {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 18px 0 14px;
  border-radius: 23px;
  background: rgba(22, 26, 52, 0.92);
  box-shadow: inset 0 0 0 1px var(--line), 0 12px 30px rgba(0, 0, 0, 0.35);
}

.sp-card .sp-emo {
  width: 24px;
  height: 24px;
}

.sp-card span {
  font-size: 15px;
  color: var(--cream);
  font-weight: 700;
}

/* ---------- me bar ---------- */

#me {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: calc(14px + var(--safe-b));
  height: 44px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: opacity 0.3s, transform 0.3s var(--ease);
}

#me.gone {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}

#me .av-wrap {
  width: 38px;
  height: 38px;
}

#me .av-slot {
  font-size: 38px;
}

#me .timer {
  inset: -6px;
  width: calc(100% + 12px);
  height: calc(100% + 12px);
}

#me .av-wrap::before {
  inset: -6px;
}

#me .fx-badge {
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
}

.me-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.me-info b {
  font-weight: 800;
  font-size: 15px;
}

.me-info span {
  font-size: 12px;
  font-weight: 600;
  color: var(--faint);
}

#emoji-btn {
  width: 48px;
  height: 40px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: rgba(10, 12, 28, 0.35);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 22px;
  transition: transform 0.14s var(--ease);
}

#emoji-btn:active {
  transform: scale(0.92);
}

#emoji-panel {
  position: absolute;
  right: 12px;
  bottom: calc(66px + var(--safe-b));
  padding: 10px;
  border-radius: 20px;
  /* all but opaque: a blur behind it couldn't be seen, but was re-run whenever cards moved under it */
  background: rgba(22, 26, 52, 0.95);
  box-shadow: inset 0 0 0 1px var(--line), 0 20px 50px rgba(0, 0, 0, 0.5);
  z-index: 40;
  transform-origin: 90% 100%;
  animation: panelPop 0.26s var(--ease);
}

@keyframes panelPop {
  from {
    transform: translateY(8px) scale(0.92);
    opacity: 0;
  }
}

#emoji-panel .grid {
  display: grid;
  grid-template-columns: repeat(6, 42px);
  gap: 3px;
}

#emoji-panel button {
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 26px;
  transition: transform 0.16s var(--ease), background 0.2s;
}

#emoji-panel button:active {
  transform: scale(0.86);
  background: rgba(251, 244, 230, 0.08);
}

@media (hover: hover) {
  #emoji-panel button:hover {
    transform: scale(1.14);
  }
}

.reaction {
  position: absolute;
  z-index: 60;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  pointer-events: none;
}

.reaction img {
  width: 100%;
  height: 100%;
}

/* ---------- color picker ---------- */

#picker {
  position: absolute;
  inset: 0;
  z-index: 45;
  /* a darker scrim instead of blurring the whole table behind it (redone every frame the options fanned out) */
  background: rgba(8, 10, 24, 0.6);
  animation: fadeIn 0.18s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
}

#picker.closing {
  animation: fadeOut 0.26s ease-in forwards;
  pointer-events: none;
}

@keyframes fadeOut {
  to {
    opacity: 0;
  }
}

/* the wild fans out into the four cards it can become */
.pk {
  position: absolute;
  inset: 0;
}

.pk-opt {
  position: absolute;
  --w: var(--ow);
  transform: translate(-50%, -50%) rotate(var(--rot));
  transition: transform 0.22s var(--ease), left 0.34s var(--ease);
  -webkit-tap-highlight-color: transparent;
}

/* Each option's shadow is a box-shadow drawn once behind its card (a drop-shadow filter was re-run on every
   frame the four fanned out). The chosen one crossfades to a deeper shadow. */
.pk-opt::before,
.pk-opt::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: calc(var(--ow) * 0.12);
  pointer-events: none;
  transition: opacity 0.2s;
}

.pk-opt::before {
  box-shadow: 0 14px 20px rgba(0, 0, 0, 0.45);
}

.pk-opt::after {
  box-shadow: 0 18px 28px rgba(0, 0, 0, 0.5);
  opacity: 0;
}

.pk-opt.chosen::before {
  opacity: 0;
}

.pk-opt.chosen::after {
  opacity: 1;
}

.pk-opt .card {
  pointer-events: none;
}

.pk-opt:active {
  transform: translate(-50%, -50%) rotate(var(--rot)) scale(0.95);
}

@media (hover: hover) {
  .pk-opt:hover {
    transform: translate(-50%, -50%) rotate(var(--rot)) translateY(-8px);
  }
}

.pk-opt.chosen {
  transform: translate(-50%, -50%) rotate(var(--rot)) translateY(-12px) scale(1.08);
}

/* a wild that has picked its color: a solid card with the wheel in cream */
.card.option .pip > svg {
  width: 0.5em;
  height: 0.5em;
}

.card.option .idx svg {
  width: 1.1em;
  height: 1.1em;
}

/* ---------- fx layer ---------- */

#fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 30;
}

.ripple {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 2px solid var(--rc, var(--cream));
  transform: translate(-50%, -50%);
}

.flood {
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--fc) 0%, transparent 65%);
  transform: translate(-50%, -50%);
}

/* Red edge glow when something bad happens to you: soft gradients in from every side, with the same depth and
   falloff as the 90px inset shadow it replaces. (That shadow was re-rasterized full-screen, blur and all, each time
   the glow came on in a new color.) app.js fades #vignette in and out; the gradients live on its ::before. */
#vignette {
  position: absolute;
  inset: 0;
  z-index: 31;
  pointer-events: none;
  opacity: 0;
}

#vignette::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.7;
  background:
    linear-gradient(to right, var(--vc, rgba(255, 90, 79, 0.5)), 32px, transparent 100px),
    linear-gradient(to left, var(--vc, rgba(255, 90, 79, 0.5)), 32px, transparent 100px),
    linear-gradient(to bottom, var(--vc, rgba(255, 90, 79, 0.5)), 32px, transparent 100px),
    linear-gradient(to top, var(--vc, rgba(255, 90, 79, 0.5)), 32px, transparent 100px);
}

.skip-big {
  position: absolute;
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--red);
  box-shadow: 0 0 0 5px rgba(14, 17, 36, 0.85), 0 0 50px rgba(255, 90, 79, 0.6);
}

.skip-big svg {
  width: 58px;
  height: 58px;
}

.skip-stamp {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  z-index: 4;
  color: #fff;
  background: var(--red);
  box-shadow: 0 0 0 3px var(--night), 0 6px 18px rgba(255, 90, 79, 0.5);
  pointer-events: none;
}

.skip-stamp svg {
  width: 24px;
  height: 24px;
}

.rev-fx {
  position: absolute;
  width: 90px;
  height: 90px;
  color: var(--cur);
  filter: drop-shadow(0 0 14px var(--cur));
}

.rev-fx svg {
  width: 100%;
  height: 100%;
}

.fx-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  z-index: 4;
  pointer-events: none;
}

.fx-badge.clock {
  background: rgba(14, 17, 36, 0.9);
  box-shadow: 0 0 0 2px var(--line);
}

.fx-badge.clock img {
  width: 22px;
  height: 22px;
}

/* wild mode: nothing fit, so the turn passed */
.pass-pill {
  position: absolute;
  height: 24px;
  padding: 0 10px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 800;
  color: var(--cream);
  background: rgba(14, 17, 36, 0.88);
  box-shadow: inset 0 0 0 1px var(--line), 0 6px 16px rgba(0, 0, 0, 0.35);
}

/* +4 / −2 over whoever gains or loses cards */
.amount-pop {
  position: absolute;
  z-index: 2;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: #fff;
  text-shadow:
    0 2px 0 var(--red-d),
    0 0 16px rgba(255, 90, 79, 0.7),
    0 0 3px rgba(10, 12, 28, 0.8);
  pointer-events: none;
}

.amount-pop.mine {
  font-size: 46px;
  text-shadow:
    0 3px 0 var(--red-d),
    0 0 26px rgba(255, 90, 79, 0.75),
    0 0 4px rgba(10, 12, 28, 0.8);
}

/* a card taken by a −2 / −4, lifting away: its red glow is part of the card (a drop-shadow filter was re-run on
   every frame of its flight) */
.card.taken {
  box-shadow:
    0 0.012em 0 rgba(255, 255, 255, 0.6) inset,
    0 -0.02em 0 rgba(0, 0, 0, 0.12) inset,
    0 0.05em 0.14em rgba(6, 8, 24, 0.42),
    0 0 8px 1px rgba(255, 90, 79, 0.7);
}

.slot.leaving {
  pointer-events: none;
}

/* the "impact" moment right before the celebration (it eases in; leaving it, the zoom snaps back: see #table) */
#table.hit {
  filter: brightness(0.7) saturate(0.8);
  transform: scale(1.015);
  transition: filter 0.3s var(--ease), transform 0.4s var(--ease);
}

/* ============================================================
   Victory
   ============================================================ */

#victory {
  position: absolute;
  inset: 0;
  z-index: 70;
  overflow: hidden;
  cursor: pointer;
}

/* The win wipes the stage in: a slanted window (.v-wipe) slides across and the background shows through it. Both
   move by transform alone (the clip-path wipe it replaces repainted the whole screen every frame): the background
   slides the other way inside the window by the same amount, so on screen it holds still (fx.js animates both).
   At rest neither is moved, and the background simply covers the screen (a loss, a skip, reduced motion). The
   window is wider than the screen so its slanted edges clear the corners. */
#victory .v-wipe {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -25%;
  width: 150%;
  overflow: hidden;
}

#victory .v-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 16.6667%;
  width: 66.6667%;
  background:
    radial-gradient(55% 40% at 50% 34%, rgba(255, 203, 87, 0.3), transparent 72%),
    radial-gradient(120% 80% at 50% 36%, #2b2a6e 0%, #16143a 55%, #0d0c24 100%);
}

/* a loss: a dark veil over the table (no blur behind it: through a veil this thick it couldn't be seen, and it was
   redone every frame the rays turned) */
#victory.lost .v-bg {
  opacity: 0;
  background:
    radial-gradient(50% 36% at 50% 34%, rgba(140, 160, 255, 0.14), transparent 72%),
    rgba(10, 12, 28, 0.9);
}

/* you lost: cooler and a little darker */
#victory.defeat .v-bg {
  background:
    radial-gradient(50% 36% at 50% 34%, rgba(110, 145, 255, 0.2), transparent 72%),
    rgba(8, 11, 32, 0.93);
}

.v-heart {
  position: absolute;
  z-index: 3;
  width: 96px;
  height: 96px;
  pointer-events: none;
}

/* no glow: a shadow on a clipped half gets cut off in a hard line down the middle */
.v-heart .half {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  will-change: transform, opacity;
}

.v-heart .left {
  clip-path: inset(0 50% 0 0);
}

.v-heart .right {
  clip-path: inset(0 0 0 50%);
}

#victory .v-rays {
  position: absolute;
  left: 50%;
  top: 34%;
  width: 180vmax;
  height: 180vmax;
  transform: translate(-50%, -50%);
  opacity: 0;
  -webkit-mask: radial-gradient(circle, #000 0%, transparent 42%);
  mask: radial-gradient(circle, #000 0%, transparent 42%);
  pointer-events: none;
}

#victory .v-rays::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(from 0deg, rgba(255, 214, 120, 0.13) 0deg 7deg, transparent 7deg 20deg);
  animation: spin 40s linear infinite;
}

#victory.lost .v-rays::after {
  background: repeating-conic-gradient(from 0deg, rgba(160, 175, 255, 0.07) 0deg 7deg, transparent 7deg 20deg);
}

/* once the results are up the rays hold still (a turning full-screen layer kept the whole screen redrawing for as
   long as the results stayed open) */
#victory.settled .v-rays::after {
  animation-play-state: paused;
}

/* The sweep's bands only need to be as tall as the screen: a skew doesn't change height. */
.v-bands i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 70%;
  background: var(--c);
  transform: translateX(-150%) skewX(-18deg);
}

/* Each band's glow is a gradient either side of it, with the falloff of the 80px blurred shadow it replaces (a
   huge blur to rasterize, five times over, right as the win starts). --g is the band's color as "r, g, b". */
.v-bands i::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -80px;
  right: -80px;
  background: linear-gradient(
    90deg,
    rgba(var(--g), 0),
    rgba(var(--g), 0.07) 20px,
    rgba(var(--g), 0.16) 40px,
    rgba(var(--g), 0.31) 60px,
    rgba(var(--g), 0.5) 80px,
    rgba(var(--g), 0.5) calc(100% - 80px),
    rgba(var(--g), 0.31) calc(100% - 60px),
    rgba(var(--g), 0.16) calc(100% - 40px),
    rgba(var(--g), 0.07) calc(100% - 20px),
    rgba(var(--g), 0)
  );
}

.v-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}

.v-stage {
  position: absolute;
  left: 0;
  right: 0;
  top: 18%;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
  transform-origin: 50% 0;
}

.v-hero {
  position: relative;
  width: 112px;
  height: 112px;
  opacity: 0;
}

.v-avatar {
  position: absolute;
  inset: 0;
  font-size: 112px;
}

.v-avatar .avatar {
  box-shadow: 0 0 0 4px #1a1840, 0 18px 40px rgba(0, 0, 0, 0.45);
}

.v-ring {
  position: absolute;
  inset: -12px;
  width: calc(100% + 24px);
  height: calc(100% + 24px);
  transform: rotate(-90deg);
  overflow: visible;
}

.v-ring circle {
  fill: none;
  stroke: var(--gold);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 0 8px rgba(255, 203, 87, 0.8));
}

#victory.lost .v-ring circle {
  stroke: rgba(251, 244, 230, 0.7);
  filter: none;
}

.v-crown {
  position: absolute;
  left: 50%;
  top: -44px;
  width: 58px;
  height: 58px;
  transform: translate(-50%, -90px) rotate(-30deg);
  opacity: 0;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.4));
}

.v-title {
  margin: 30px 0 0;
  font-size: 50px;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  white-space: nowrap;
  filter: drop-shadow(0 4px 0 #7a4a00);
}

#victory.lost .v-title {
  font-size: 38px;
  filter: drop-shadow(0 3px 0 var(--blue-d));
}

#victory.long .v-title {
  font-size: 32px;
}

.v-title .l {
  display: inline-block;
  opacity: 0;
  background: linear-gradient(100deg, #ffe39a 0%, #fff9ea 40%, #ffd166 60%, #ffcb57 100%);
  background-size: 260% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shine 1.6s calc(0.9s + var(--i) * 0.04s) var(--ease) both;
}

#victory.lost .v-title .l {
  background: none;
  color: var(--cream);
  animation: none;
}

@keyframes shine {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0% 0;
  }
}

.v-title .sp {
  display: inline-block;
  width: 0.26em;
}

.v-points {
  margin-top: 14px;
  display: flex;
  align-items: baseline;
  gap: 4px;
  opacity: 0;
  font-weight: 800;
  color: var(--gold);
}

#victory.lost .v-points {
  color: var(--cream);
}

.v-plus {
  font-size: 26px;
}

.v-num {
  font-size: 40px;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  min-width: 1.2em;
  text-align: center;
}

.v-label {
  margin-left: 6px;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
}

.v-label .v-star {
  width: 30px;
  height: 30px;
  vertical-align: -6px;
  filter: drop-shadow(0 4px 12px rgba(255, 190, 60, 0.5));
}

/* wagers: the coin sits level with the number, centred on it */
.v-points.coin {
  align-items: center;
}

.v-points.coin .v-plus {
  font-size: 30px;
}

.v-points.coin .v-label {
  display: flex;
  margin-left: 2px;
}

.v-points.coin .v-label .v-star {
  width: 36px;
  height: 36px;
  vertical-align: 0;
}

.v-points.coin .v-label .v-star.gem {
  filter: drop-shadow(0 4px 12px rgba(80, 180, 255, 0.55));
}

.v-points.final .v-num {
  text-shadow: 0 0 18px rgba(255, 203, 87, 0.6);
}

.v-badges {
  margin-top: 14px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.v-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
  background: rgba(251, 244, 230, 0.1);
  box-shadow: inset 0 0 0 1px var(--line);
  animation: badgeIn 0.45s var(--pop) both;
}

.v-badge:nth-child(2) {
  animation-delay: 0.08s;
}

.v-badge.gold {
  color: var(--gold);
  box-shadow: inset 0 0 0 1px rgba(255, 203, 87, 0.4);
}

@keyframes badgeIn {
  from {
    transform: translateY(8px) scale(0.9);
    opacity: 0;
  }
}

.v-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(24px + var(--safe-b));
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  z-index: 2;
  opacity: 0;
  animation: skipIn 0.4s 1.4s forwards;
}

@keyframes skipIn {
  to {
    opacity: 1;
  }
}

#victory.settled .v-hint {
  display: none;
}

.v-flyer {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 74;
  pointer-events: none;
}

/* skipping jumps straight to the finished frame */
#victory.instant .v-bg { opacity: 1; }
#victory.instant .v-rays { opacity: 1; }
#victory.instant .v-hero { opacity: 1; transform: none; }
#victory.instant .v-crown { opacity: 1; transform: translate(-50%, 0) rotate(-13deg); }
#victory.instant .v-title .l { opacity: 1; transform: none; }
#victory.instant .v-ring circle { stroke-dashoffset: 0; }
#victory.instant .v-points { opacity: 1; }
#victory.instant .v-bands { display: none; }

/* ---------- results ---------- */

#results {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 76;
}

.results-card {
  width: 100%;
  padding: 18px 16px calc(18px + var(--safe-b));
  border-radius: 26px 26px 0 0;
  /* all but opaque, so no blur behind it: it couldn't be seen, and it was redone every frame the celebration moved */
  background: linear-gradient(180deg, rgba(35, 42, 88, 0.97), rgba(24, 29, 61, 0.99));
  box-shadow: inset 0 1px 0 rgba(251, 244, 230, 0.12), 0 -20px 60px rgba(0, 0, 0, 0.4);
}

/* ready up */
.rd {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  box-shadow: inset 0 0 0 2px rgba(251, 244, 230, 0.16);
  color: var(--ink);
  transition: background 0.25s var(--ease), box-shadow 0.25s;
}

.rd.on {
  background: var(--green);
  box-shadow: none;
  animation: rdIn 0.35s var(--pop);
}

@keyframes rdIn {
  from {
    transform: scale(0.4);
  }
}

.rd svg {
  width: 15px;
  height: 15px;
  color: #fff;
}

.watching {
  font-size: 12px;
  font-weight: 700;
  color: var(--faint);
}

.primary-wrap {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.btn.is-ready {
  gap: 8px;
  color: #9fe8c9;
  box-shadow: inset 0 0 0 1.5px rgba(31, 191, 135, 0.55);
}

.btn.is-ready svg {
  width: 18px;
  height: 18px;
}

.btn.is-ready .sub {
  margin-left: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--faint);
}

.btn.counting {
  opacity: 1 !important;
  background: var(--gold);
  box-shadow: 0 3px 0 #d9a02e, 0 10px 24px rgba(255, 203, 87, 0.25);
}

.btn.counting b {
  display: inline-block;
  min-width: 0.7em;
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
}

.ready-bar {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: rgba(251, 244, 230, 0.08);
  overflow: hidden;
}

.ready-bar i {
  display: block;
  height: 100%;
  background: var(--gold);
  transform-origin: 0 50%;
}

.standings {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.standing {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px 9px 10px;
  border-radius: 16px;
  background: rgba(8, 10, 24, 0.3);
  animation: rowIn 0.42s var(--ease) both;
}

@keyframes rowIn {
  from {
    transform: translateY(10px);
    opacity: 0;
  }
}

.standing.first {
  background: linear-gradient(90deg, rgba(255, 203, 87, 0.2), rgba(255, 203, 87, 0.05));
  box-shadow: inset 0 0 0 1px rgba(255, 203, 87, 0.32);
}

.standing .rank {
  width: 16px;
  font-weight: 800;
  color: var(--faint);
  text-align: center;
}

.standing.first .rank {
  color: var(--gold);
}

.standing .sav {
  width: 36px;
  height: 36px;
  font-size: 36px;
  flex: none;
}

.standing .sn {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.standing .sn b {
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.won-pts {
  font-size: 12px;
  font-weight: 800;
  color: var(--gold);
}

.mini-hand {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 22px;
}

.mini-hand .card {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.mini-hand .cnt {
  flex: none;
  min-width: 1.4em;
  margin-right: 4px;
  font-size: 13px;
  font-weight: 800;
  color: var(--gold);
}

.mini-hand .more {
  margin-left: 4px;
  font-size: 11px;
  font-weight: 800;
  color: var(--faint);
}

.standing .wins {
  text-align: right;
  font-weight: 800;
  font-size: 16px;
  line-height: 1.1;
}

.standing .wins small {
  display: block;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

.results-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.results-actions .btn.primary {
  grid-column: 1 / -1;
}

/* ---------- sheet ---------- */

#sheet-scrim {
  position: absolute;
  inset: 0;
  z-index: 80;
  background: rgba(6, 8, 20, 0.55);
  animation: fadeIn 0.22s;
}

#sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 81;
  max-height: 86%;
  display: flex;
  flex-direction: column;
  border-radius: 26px 26px 0 0;
  background: #1c2248;
  box-shadow: inset 0 1px 0 rgba(251, 244, 230, 0.12), 0 -20px 60px rgba(0, 0, 0, 0.45);
  animation: sheetUp 0.36s var(--ease);
}

@keyframes sheetUp {
  from {
    transform: translateY(100%);
  }
}

#sheet.closing {
  animation: sheetDown 0.22s ease-in forwards;
}

@keyframes sheetDown {
  to {
    transform: translateY(100%);
  }
}

.sheet-grip {
  width: 38px;
  height: 4px;
  border-radius: 2px;
  background: rgba(251, 244, 230, 0.22);
  margin: 10px auto 4px;
  flex: none;
}

.sheet-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 20px calc(24px + var(--safe-b));
}

.sheet-body h3 {
  margin: 6px 0 14px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.sheet-body h4 {
  margin: 18px 0 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

.sheet-body p {
  margin: 0 0 10px;
  color: var(--dim);
  font-size: 15px;
  line-height: 1.45;
}

.sheet-body p b {
  color: var(--cream);
}

.menu-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 54px;
  padding: 0 16px;
  border-radius: 16px;
  background: rgba(251, 244, 230, 0.06);
  font-weight: 700;
  font-size: 16px;
  text-align: left;
  transition: background 0.2s;
}

.menu-item:active {
  background: rgba(251, 244, 230, 0.1);
}

.menu-item .mi-icon {
  font-size: 22px;
}

.menu-item span.grow {
  flex: 1;
}

.menu-item.danger {
  color: #ff9d95;
}

.menu-item.sound-row {
  cursor: default;
  padding-right: 8px;
}

.menu-item.sound-row:active {
  background: rgba(251, 244, 230, 0.06);
}

.mini-seg {
  padding: 3px;
  gap: 2px;
  flex: none;
}

.mini-seg button {
  height: 30px;
  padding: 0 11px;
  font-size: 13px;
}

.toggle-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.toggle-row:last-child {
  border-bottom: 0;
}

.toggle-row .tr-text {
  flex: 1;
}

.toggle-row b {
  display: block;
  font-size: 15px;
  font-weight: 800;
}

.toggle-row small {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--dim);
}

.switch {
  position: relative;
  width: 48px;
  height: 28px;
  border-radius: 14px;
  background: rgba(251, 244, 230, 0.14);
  flex: none;
  transition: background 0.22s;
}

.switch::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--cream);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: transform 0.26s var(--ease);
}

.switch.on {
  background: var(--green);
}

.switch.on::after {
  transform: translateX(20px);
}

.switch:disabled {
  opacity: 0.5;
}

.howto-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.howto-row .card {
  flex: none;
}

.howto-row p {
  margin: 0;
}

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

#toast {
  position: absolute;
  left: 50%;
  top: 60px;
  transform: translateX(-50%);
  z-index: 90;
  max-width: 86%;
  padding: 10px 16px;
  border-radius: 14px;
  background: rgba(22, 26, 52, 0.96);
  box-shadow: inset 0 0 0 1px var(--line), 0 12px 30px rgba(0, 0, 0, 0.45);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

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

/* ============================================================
   Stars: wallet and wagers
   ============================================================ */

.btn.gold {
  color: #3b2500;
  background: linear-gradient(180deg, #ffdb7a, #f7b940);
  box-shadow: 0 3px 0 #c98a1c, 0 10px 26px rgba(255, 190, 60, 0.24);
}

.btn.gold:active {
  box-shadow: 0 1px 0 #c98a1c, 0 4px 12px rgba(255, 190, 60, 0.2);
  transform: translateY(2px);
}

/* balance, next to your name on the home screen */
.stars-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 36px;
  padding: 0 12px 0 10px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 800;
  color: var(--gold);
  background: rgba(255, 203, 87, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 203, 87, 0.3);
  transition: transform 0.14s var(--ease);
}

.stars-chip:active {
  transform: scale(0.95);
}

.stars-chip .emo {
  vertical-align: 0;
}

.wager-panel {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: linear-gradient(180deg, rgba(255, 203, 87, 0.09), rgba(251, 244, 230, 0.035));
  box-shadow: inset 0 0 0 1px rgba(255, 203, 87, 0.2), 0 18px 40px rgba(0, 0, 0, 0.22);
}

.panel-sub {
  font-size: 13px;
  font-weight: 700;
  color: var(--faint);
}

/* open wagers, live */
.wager-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wager-list.empty {
  display: none;
}

.wager-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 9px 9px 10px;
  border-radius: 16px;
  text-align: left;
  background: rgba(8, 10, 24, 0.35);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: transform 0.14s var(--ease);
}

.wager-row:active {
  transform: scale(0.98);
}

.wager-row .wav {
  width: 36px;
  height: 36px;
  font-size: 36px;
  flex: none;
}

.wr-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.wr-text b {
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wr-text small {
  font-size: 12px;
  font-weight: 600;
  color: var(--dim);
}

.wr-stake {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 36px;
  padding: 0 13px;
  border-radius: 11px;
  font-size: 15px;
  font-weight: 800;
  color: #3b2500;
  background: linear-gradient(180deg, #ffdb7a, #f7b940);
  box-shadow: 0 2px 0 #c98a1c;
}

/* wallet sheet */
.wallet-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 0 4px;
}

.wallet-hero .wh-star {
  width: 46px;
  height: 46px;
  filter: drop-shadow(0 6px 16px rgba(255, 190, 60, 0.45));
}

.wh-amount {
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.wallet-hero small {
  font-size: 13px;
  font-weight: 700;
  color: var(--dim);
}

.wallet-hero small.test {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}

.deposit-grid,
.stake-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.dep,
.stake {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 48px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 800;
  background: rgba(251, 244, 230, 0.07);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: transform 0.14s var(--ease), background 0.2s, box-shadow 0.2s, opacity 0.2s, color 0.2s;
}

.dep:active,
.stake:active {
  transform: scale(0.96);
}

.dep.busy {
  opacity: 0.5;
  pointer-events: none;
}

.stake.on {
  color: #3b2500;
  background: linear-gradient(180deg, #ffdb7a, #f7b940);
  box-shadow: 0 2px 0 #c98a1c;
}

.stake:disabled {
  opacity: 0.32;
  pointer-events: none;
}

.withdraw {
  margin-top: 18px;
}

.sheet-body .wallet-note {
  margin: 10px 2px 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--faint);
}

.activity {
  display: flex;
  flex-direction: column;
}

.act {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.act:last-child {
  border-bottom: 0;
}

.act-k {
  flex: 1;
  font-weight: 700;
}

.act-t {
  font-size: 12px;
  font-weight: 600;
  color: var(--faint);
}

.act b {
  min-width: 52px;
  text-align: right;
  font-weight: 800;
}

.act b.up { color: var(--gold); }
.act b.down { color: var(--dim); }

/* new wager sheet */
.wager-sum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 18px 2px 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--dim);
}

.wager-sum b {
  font-size: 20px;
  font-weight: 800;
  color: var(--gold);
}

.balance-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 8px;
  padding: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--dim);
}

/* wager lobby: two seats over the pot */
.lobby.wager .seats-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.lobby.wager .rules-summary {
  justify-content: center;
}

.pot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding-top: 4px;
}

.pot .pot-star {
  width: 54px;
  height: 54px;
  filter: drop-shadow(0 8px 22px rgba(255, 190, 60, 0.5));
  animation: potFloat 3.2s ease-in-out infinite;
}

.pot .pot-star.gem {
  filter: drop-shadow(0 8px 22px rgba(80, 180, 255, 0.5));
}

@keyframes potFloat {
  50% {
    transform: translateY(-4px) rotate(-4deg);
  }
}

.pot b {
  font-size: 50px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--gold);
}

.pot small {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

.duel {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
}

.duel .vs {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

.duel-seat {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 8px 14px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(251, 244, 230, 0.08), rgba(251, 244, 230, 0.035));
  box-shadow: inset 0 0 0 1px var(--line);
  animation: slotIn 0.4s var(--ease) both;
}

.duel-seat.open {
  background: none;
  box-shadow: inset 0 0 0 1.5px rgba(251, 244, 230, 0.1);
}

.duel-seat .sav,
.duel-seat .ring {
  width: 60px;
  height: 60px;
  font-size: 60px;
}

.duel-seat .ring {
  border-radius: 50%;
  border: 2px dashed rgba(251, 244, 230, 0.2);
  animation: spin 14s linear infinite;
}

.duel-seat .sname {
  max-width: 100%;
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.duel-seat.open .sname {
  color: var(--faint);
}

.duel-seat .staked {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 9px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 800;
  color: var(--gold);
  background: rgba(255, 203, 87, 0.12);
}

.duel-seat .staked svg {
  width: 13px;
  height: 13px;
}

.duel-seat .staked.off {
  color: var(--faint);
  background: rgba(251, 244, 230, 0.05);
}

.lobby-wait.go {
  font-size: 16px;
  color: var(--cream);
}

.lobby-wait .cd {
  display: inline-block;
  min-width: 1ch;
  font-size: 20px;
  color: var(--gold);
}

/* the pot, at the top of the table */
.room-chip.pot-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  letter-spacing: 0;
  color: var(--gold);
}

/* wagers: what each player won or lost, the coin level with the amount */
.standing .wins.money {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.standing .wins.money .emo {
  vertical-align: 0;
}

.standing .wins.money.up { color: var(--gold); }
.standing .wins.money.down { color: var(--faint); }

.wager-sum small {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--faint);
}

/* the rest of a hand on the results sheet */
.mini-hand .more {
  margin-left: 4px;
  padding: 0 6px;
  height: 18px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  color: var(--cream);
  background: rgba(251, 244, 230, 0.1);
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: pointer;
  transition: background 0.15s;
}

.mini-hand .more:hover {
  background: rgba(251, 244, 230, 0.2);
}

.hand-pop {
  position: absolute;
  z-index: 95;
  max-width: min(300px, calc(100% - 16px));
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(24, 29, 60, 0.97);
  box-shadow: inset 0 0 0 1px var(--line), 0 16px 40px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.hand-pop .card {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.clock .clock-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(251, 244, 230, 0.88);
}

.clock.last .clock-label { color: var(--gold); }
.clock.sudden .clock-label { color: var(--red); }

.v-coin {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 75;
  width: 30px;
  height: 30px;
  pointer-events: none;
}

/* the glow is on the picture inside the flying coin, so it's drawn once instead of re-filtered every frame */
.v-coin img {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 10px rgba(255, 200, 80, 0.55));
}

.v-coin.gem img {
  filter: drop-shadow(0 4px 10px rgba(80, 180, 255, 0.6));
}

/* ============================================================
   Home, calmer: you and your wallet up top, then three ways to play
   ============================================================ */

.home-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.home-top .profile {
  flex: 1;
  min-width: 0;
  padding: 8px 12px 8px 8px;
  border-radius: 16px;
  background: none;
  box-shadow: none;
}

.home-top .profile .pav {
  width: 40px;
  height: 40px;
  font-size: 40px;
}

.home-top .profile .pname {
  font-size: 15px;
}

.home-top .profile .pstats {
  margin-top: 1px;
  font-size: 12px;
}

.balance-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 12px;
  border-radius: 13px;
  font-size: 14px;
  font-weight: 800;
  color: var(--cream);
  background: rgba(255, 203, 87, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 203, 87, 0.28);
  transition: transform 0.14s var(--ease);
}

.balance-chip:active {
  transform: scale(0.95);
}

.balance-chip span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.home-hero .hero-cards {
  height: 118px;
}

.tiles {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 16px;
  border-radius: 20px;
  text-align: left;
  background: linear-gradient(180deg, rgba(251, 244, 230, 0.075), rgba(251, 244, 230, 0.04));
  box-shadow: inset 0 0 0 1px var(--line), 0 14px 32px rgba(0, 0, 0, 0.2);
  transition: transform 0.14s var(--ease);
}

.tile:active {
  transform: scale(0.98);
}

.tile-quick {
  background:
    linear-gradient(120deg, rgba(255, 203, 87, 0.2), rgba(255, 90, 79, 0.12) 45%, rgba(74, 124, 255, 0.16)),
    rgba(20, 24, 48, 0.9);
  box-shadow: inset 0 0 0 1px rgba(255, 203, 87, 0.28), 0 14px 34px rgba(0, 0, 0, 0.25);
}

.tile-icon {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255, 203, 87, 0.16);
}

.tile-icon img {
  width: 26px;
  height: 26px;
}

.tile-icon img.second {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 20px;
  height: 20px;
}

.tile-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tile b {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.tile small {
  font-size: 13px;
  font-weight: 600;
  color: var(--dim);
}

.tile-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.tile-small {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 14px 14px 13px;
}

.tile-small .tile-faces {
  margin-bottom: 8px;
}

.tile-faces {
  display: flex;
}

.tile-faces .face {
  width: 30px;
  height: 30px;
  font-size: 30px;
  margin-right: -8px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 2.5px var(--night);
}

.tile-faces .face img {
  width: 76%;
  height: 76%;
}

.tile-faces .face.enter {
  animation: slotIn 0.35s var(--ease) both;
}

.tile-wager {
  background: linear-gradient(180deg, rgba(255, 203, 87, 0.1), rgba(251, 244, 230, 0.035));
  box-shadow: inset 0 0 0 1px rgba(255, 203, 87, 0.22), 0 14px 32px rgba(0, 0, 0, 0.2);
}

.open-count {
  flex: none;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  color: #3b2500;
  background: var(--gold);
  animation: fadeIn 0.3s var(--ease);
}

/* ---------- sheets ---------- */

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sheet-head h3 {
  margin-bottom: 14px;
}

.sheet-body .sheet-sub {
  margin: -6px 0 14px;
  font-size: 14px;
  color: var(--dim);
}

.fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 18px;
}

.fields.two {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 10px;
  margin: 16px 0 0;
}

.empty-note {
  padding: 18px 8px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--faint);
}

.sheet-body .wager-list {
  margin-bottom: 14px;
}

.wr-stake.gram {
  color: #fff;
  background: linear-gradient(180deg, #5aa9ff, #2f7fe6);
  box-shadow: 0 2px 0 #1d5bb0;
}

.stake-grid .stake {
  font-size: 15px;
}

/* wallet */
.wallet-tabs {
  margin-bottom: 8px;
}

.wallet-hero .wh-icon {
  width: 46px;
  height: 46px;
  filter: drop-shadow(0 6px 16px rgba(255, 190, 60, 0.45));
}

.wallet-hero .wh-icon.gem {
  filter: drop-shadow(0 6px 16px rgba(80, 180, 255, 0.45));
}

.deposit-grid.four {
  grid-template-columns: repeat(4, 1fr);
}

.wallet-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
}

.wallet-actions:empty {
  display: none;
}

.link-btn.manual {
  display: block;
  margin: 10px auto 0;
}

.manual-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(8, 10, 24, 0.35);
  box-shadow: inset 0 0 0 1px var(--line);
}

.mb-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--faint);
}

.copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(251, 244, 230, 0.06);
  font-weight: 700;
  font-size: 13px;
}

.copy code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.copy span {
  color: var(--gold);
  flex: none;
}

.addr {
  width: 100%;
  height: 44px;
  margin-top: 8px;
  padding: 0 14px;
  border-radius: 12px;
  border: 0;
  outline: none;
  font: inherit;
  font-size: 14px;
  color: var(--cream);
  background: rgba(8, 10, 24, 0.45);
  box-shadow: inset 0 0 0 1px var(--line);
}

.addr:focus {
  box-shadow: inset 0 0 0 1.5px rgba(255, 203, 87, 0.6);
}

.payto {
  margin-top: 8px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--dim);
}

/* amounts: quick picks, or any amount typed in */
.dep.on {
  color: #3b2500;
  background: linear-gradient(180deg, #ffdb7a, #f7b940);
  box-shadow: 0 2px 0 #c98a1c;
}

.amount-field {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  margin-top: 8px;
  padding: 0 6px 0 14px;
  border-radius: 14px;
  background: rgba(8, 10, 24, 0.45);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow 0.2s;
}

.amount-field:focus-within,
.amount-field.on {
  box-shadow: inset 0 0 0 1.5px rgba(255, 203, 87, 0.6);
}

.amount-field img {
  width: 20px;
  height: 20px;
  flex: none;
}

.amount-field input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: none;
  background: none;
  font: inherit;
  font-size: 17px;
  font-weight: 800;
  color: var(--cream);
}

.amount-field input::placeholder {
  font-weight: 600;
  color: var(--faint);
}

.amount-field .max {
  flex: none;
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  color: var(--gold);
  background: rgba(255, 203, 87, 0.1);
}

.amount-field + .btn,
.deposit-grid + .amount-field + .btn {
  margin-top: 10px;
}

.sheet-body .btn.big + .link-btn.manual {
  margin-top: 4px;
}

/* your deposit address: a QR to scan, or copy it */
.manual-box .qr {
  align-self: center;
  width: 168px;
  height: 168px;
  padding: 8px;
  border-radius: 14px;
  background: #fff;
}

.manual-box .qr:empty {
  display: none;
}

.manual-box .qr svg {
  display: block;
  width: 100%;
  height: 100%;
}

.manual-box .mb-label {
  text-align: center;
}

.manual-box .link-btn {
  align-self: center;
  padding: 4px;
  font-size: 13px;
}

/* where withdrawals go */
.addr-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.addr-row .addr {
  flex: 1;
  min-width: 0;
  margin-top: 0;
}

.addr-row .btn {
  flex: none;
  height: 44px;
  padding: 0 16px;
}

.link-row {
  display: flex;
  justify-content: center;
  gap: 14px;
}

.link-row:empty {
  display: none;
}

.payto-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 14px;
  border-radius: 14px;
  background: rgba(251, 244, 230, 0.05);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 14px;
}

.payto-card span {
  font-weight: 700;
  color: var(--faint);
}

.payto-card code {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  font-weight: 700;
}

.payto-card .link-btn {
  flex: none;
  color: var(--gold);
}

.payto-card + .wallet-note {
  margin-top: 10px;
}

/* ---------- wallet pages: Home, Add Gram, Withdraw ---------- */

.wallet-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px -6px;
}

.wallet-head h3 {
  margin: 0;
}

.wallet-back {
  width: 36px;
  height: 36px;
  flex: none;
  background: none;
  box-shadow: none;
}

.wallet-back svg {
  width: 22px;
  height: 22px;
}

.wallet-hero .wh-amount {
  font-variant-numeric: tabular-nums;
}

.wallet-actions.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}

.wallet-actions.two .btn {
  height: 50px;
}

.sheet-body .wallet-hero + .btn.big,
.sheet-body .pending + .btn.big {
  margin-top: 14px;
}

.pending {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}

.pend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--dim);
  background: rgba(251, 244, 230, 0.05);
}

.pend .emo {
  width: 16px;
  height: 16px;
  animation: pendTurn 2.4s ease-in-out infinite;
}

@keyframes pendTurn {
  0%,
  40% {
    transform: rotate(0deg);
  }
  50%,
  90% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.act .act-e {
  width: 18px;
  height: 18px;
  flex: none;
}

.wallet-sub {
  margin-top: 8px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--faint);
}

.wallet-sub:empty {
  display: none;
}

.link-btn.inline {
  display: inline;
  padding: 0;
  font-size: inherit;
  color: var(--gold);
}

.full-addr {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(251, 244, 230, 0.06);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
  word-break: break-all;
  -webkit-user-select: text;
  user-select: text;
}

.manual-box .btn {
  height: 42px;
}

.payto-card {
  cursor: pointer;
}

.payto-card.full code {
  white-space: normal;
  word-break: break-all;
  text-overflow: clip;
}

.btn.busy {
  opacity: 0.6;
  pointer-events: none;
}

/* wager lobby with 3 or 4 seats */
.duel.seats-3,
.duel.seats-4 {
  grid-template-columns: repeat(2, 1fr);
}

.duel.seats-3 .duel-seat:last-child {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc(50% - 4px);
}

.duel.seats-3 .duel-seat,
.duel.seats-4 .duel-seat {
  padding: 12px 8px 10px;
}

.duel.seats-3 .sav,
.duel.seats-4 .sav,
.duel.seats-3 .ring,
.duel.seats-4 .ring {
  width: 46px;
  height: 46px;
  font-size: 46px;
}

.room-chip.pot-chip .emo {
  width: 16px;
  height: 16px;
}

/* results: a way to the menu (the table's own button is under the celebration) */
.results-card {
  position: relative;
}

.results-menu {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: var(--dim);
  background: rgba(251, 244, 230, 0.06);
}

.results-menu svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}

.results-card .standings {
  padding-right: 34px;
}

/* react from the results too: under the menu button */
.results-emoji {
  position: absolute;
  top: 52px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: rgba(251, 244, 230, 0.06);
  transition: transform 0.14s var(--ease);
}

.results-emoji:active {
  transform: scale(0.9);
}

.results-emoji img {
  width: 20px;
  height: 20px;
}

/* opened from the results: over the results sheet, just above its button */
#emoji-panel.over {
  z-index: 97;
}

.ready-note {
  grid-column: 1 / -1;
  margin-top: -2px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--dim);
}

/* updates re-render these lists: only the first appearance animates */
.results-card.instant .standing,
.lobby .instant .slot-card,
.lobby .instant .duel-seat {
  animation: none;
}

/* your own turn clock, next to your name */
.me-timer {
  min-width: 34px;
  height: 24px;
  padding: 0 8px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--gold);
  transition: background 0.25s, color 0.25s;
}

.me-timer:empty {
  display: none;
}

.me-timer.urgent {
  color: #fff;
  background: var(--red);
  animation: timerPulse 1s ease-in-out infinite;
}

@keyframes timerPulse {
  50% {
    transform: scale(1.08);
  }
}

/* seats: someone away while a bot covers for them */
.seat .away {
  margin-top: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

/* a sticky message when the game can't go on */
.fatal {
  position: absolute;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(10, 12, 28, 0.94);
}

.fatal-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 300px;
  text-align: center;
}

.fatal-card b {
  font-size: 17px;
  line-height: 1.4;
}

.fatal-emo {
  width: 56px;
  height: 56px;
}

/* the website: sign in with Telegram (through the bot) */
.signin {
  position: absolute;
  inset: 0;
  z-index: 110;
  display: grid;
  place-items: center;
  padding: 24px 20px calc(24px + var(--safe-b, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: radial-gradient(120% 80% at 50% 0%, #232a58, var(--night) 70%);
}

.signin-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 340px;
  text-align: center;
}

.signin-cards {
  position: relative;
  width: 200px;
  height: 96px;
}

.signin-cards .card {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform-origin: 50% 120%;
}

.signin .wordmark {
  margin-top: 14px;
  font-size: 40px;
}

.signin-lead {
  margin: 10px 0 22px;
  font-size: 15px;
  font-weight: 600;
  color: var(--dim);
}

.tg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(180deg, #37b6f5, #229ed9);
  box-shadow: 0 8px 22px rgba(34, 158, 217, 0.35);
}

.tg-btn svg {
  width: 22px;
  height: 22px;
  flex: none;
}

.tg-btn.disabled {
  opacity: 0.4;
  pointer-events: none;
}

.signin-or {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 20px 0 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--faint);
}

.signin-or::before,
.signin-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

.signin-qr {
  width: 168px;
  height: 168px;
  padding: 8px;
  border-radius: 16px;
  background: #fff;
}

.signin-qr svg {
  display: block;
  width: 100%;
  height: 100%;
}

.signin-match {
  margin: 16px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--dim);
}

.signin-match b {
  margin-left: 4px;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--cream);
  background: rgba(251, 244, 230, 0.1);
}

.signin-wait {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 18px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--faint);
}

.signin-wait i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: thinkDot 1.2s ease-in-out infinite;
}

.signin-wait i:nth-child(2) {
  animation-delay: 0.15s;
}

.signin-wait i:nth-child(3) {
  margin-right: 6px;
  animation-delay: 0.3s;
}

.signin-wait.hidden {
  display: none;
}

.seat.offline .label::after {
  content: 'Away';
  display: block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

/* emoji in a winner's name keep their own colors in the gradient title */
.v-title .l.pic {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: initial;
  -webkit-text-fill-color: initial;
}

/* a reaction over the results sheet, from someone's row */
/* a bot thinking about its answer */
.thinking {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 61;
  display: flex;
  align-items: center;
  gap: 3px;
  height: 20px;
  padding: 0 7px;
  border-radius: 10px 10px 10px 3px;
  background: rgba(251, 244, 230, 0.96);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  transform: translate(-30%, -100%);
}

.thinking.over {
  z-index: 96;
}

.thinking i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #3a3f63;
  animation: thinkDot 0.9s ease-in-out infinite;
}

.thinking i:nth-child(2) {
  animation-delay: 0.15s;
}

.thinking i:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes thinkDot {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.35;
  }
  30% {
    transform: translateY(-3px);
    opacity: 1;
  }
}

.reaction.over {
  z-index: 96;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
}

/* ============================================================
   Leaderboard and player cards
   ============================================================ */

/* home: your name, your wins, and your place this week (tap for the leaderboard) */
.home-top .profile {
  text-align: left;
  transition: transform 0.14s var(--ease), background 0.2s;
}

.home-top .profile:active {
  transform: scale(0.97);
  background: rgba(251, 244, 230, 0.05);
}

.rank-pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0 7px;
  height: 19px;
  border-radius: 10px;
  background: rgba(255, 203, 87, 0.14);
  color: var(--gold);
}

.rank-pill .emo {
  width: 13px;
  height: 13px;
  vertical-align: 0;
}

.rank-pill b {
  color: var(--gold);
}

.sheet-body #seg-lb-period,
.sheet-body #seg-lb-by {
  margin-bottom: 10px;
}

/* the leaderboard keeps one size whichever board is showing */
#sheet[data-kind='leaderboard'] {
  height: 86%;
}

#sheet[data-kind='leaderboard'] .sheet-body {
  flex: 1;
}

.lb-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 34px;
  margin: 0 2px 6px 4px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}

.lb-order {
  opacity: 0;
  transform: translateX(6px);
  pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}

.lb-order.show {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.lb-order .seg,
.lb-order .seg.sliding {
  --pad: 3px;
  padding: 3px;
  border-radius: 10px;
}

.lb-order .seg button {
  height: 26px;
  padding: 0 10px;
  border-radius: 7px;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}

.lb-order .seg-pill {
  border-radius: 7px;
}

.lb-list.waiting {
  opacity: 0.4;
  transition: opacity 0.2s;
}

#seg-lb-by .emo {
  width: 15px;
  height: 15px;
  vertical-align: -3px;
}

.lb-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
  min-height: 120px;
}

.lb-row {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 8px 12px 8px 8px;
  border-radius: 14px;
  text-align: left;
  background: rgba(8, 10, 24, 0.28);
  transition: background 0.2s, transform 0.14s var(--ease);
}

.lb-row:active {
  transform: scale(0.98);
}

.lb-row.me {
  background: linear-gradient(90deg, rgba(255, 203, 87, 0.18), rgba(255, 203, 87, 0.05));
  box-shadow: inset 0 0 0 1px rgba(255, 203, 87, 0.32);
}

.lb-rank {
  width: 26px;
  flex: none;
  text-align: center;
  font-weight: 800;
  font-size: 14px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

img.lb-medal {
  width: 26px;
  height: 26px;
  flex: none;
}

.lb-row .lav {
  width: 36px;
  height: 36px;
  font-size: 36px;
  flex: none;
}

.lb-name {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.lb-name b {
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lb-name small {
  font-size: 12px;
  font-weight: 600;
  color: var(--faint);
}

.lb-val {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 17px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lb-val .emo {
  vertical-align: 0;
}

.lb-val.up {
  color: var(--gold);
}

.lb-val.down {
  color: var(--faint);
}

.lb-gap {
  text-align: center;
  color: var(--faint);
  letter-spacing: 0.3em;
  font-size: 12px;
  padding: 2px 0;
}

/* a player's card */
.pc-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 4px 0 16px;
}

.pc-head .pcav {
  width: 60px;
  height: 60px;
  font-size: 60px;
  flex: none;
}

.pc-name {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.pc-name b {
  font-size: 20px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pc-name span {
  display: flex;
  gap: 6px;
}

.pc-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}

.pc-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 4px;
  border-radius: 14px;
  background: rgba(8, 10, 24, 0.28);
}

.pc-stat b {
  font-size: 19px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.pc-stat small {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--faint);
}

.pc-pnl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: 14px;
  background: rgba(8, 10, 24, 0.28);
  font-size: 14px;
  font-weight: 700;
  color: var(--dim);
}

.pc-pnl b {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 17px;
  font-weight: 800;
}

.pc-pnl b .emo {
  vertical-align: 0;
}

.pc-pnl b.up {
  color: var(--gold);
}

.pc-pnl b.down {
  color: var(--faint);
}

.btn.danger {
  background: linear-gradient(180deg, #ff6b61, #e2463c);
  color: #fff;
  box-shadow: 0 6px 18px rgba(226, 70, 60, 0.35);
}

/* away: their connection dropped; they keep their place until they're back */
.away-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(251, 244, 230, 0.08);
  color: var(--faint);
}

.slot-card.away .avatar,
.duel-seat.away .avatar {
  opacity: 0.45;
  filter: grayscale(0.6);
}

.slot-card[data-player],
.duel-seat[data-player] {
  cursor: pointer;
}

/* ============================================================
   Segmented controls whose highlight slides
   ============================================================ */

/* the options are equal columns, so the highlight's place follows from its index (--i of --n) at any width */
.seg.sliding {
  --pad: 4px;
  --gap: 4px;
  position: relative;
}

.seg.sliding button {
  position: relative;
  z-index: 1;
}

.seg.sliding button.on {
  background: none;
}

.seg-pill {
  position: absolute;
  top: var(--pad);
  bottom: var(--pad);
  left: var(--pad);
  width: calc((100% - 2 * var(--pad) - (var(--n, 1) - 1) * var(--gap)) / var(--n, 1));
  border-radius: 9px;
  background: var(--cream);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  transform: translateX(calc(var(--i, 0) * (100% + var(--gap))));
  transition: transform 0.34s var(--ease);
  pointer-events: none;
}

/* ============================================================
   New wager: a preview of the table you're setting up
   ============================================================ */

.wp {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 14px;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
  background: rgba(8, 10, 24, 0.3);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* wild: the four colors run slowly around the edge */
.wp::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150%;
  aspect-ratio: 1;
  z-index: -2;
  background: conic-gradient(var(--red), var(--yellow), var(--green), var(--blue), var(--red));
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.5s var(--ease);
  animation: wpSpin 7s linear infinite;
  animation-play-state: paused;
}

.wp::after {
  content: '';
  position: absolute;
  inset: 1.5px;
  z-index: -1;
  border-radius: 18.5px;
  background: radial-gradient(120% 100% at 50% 0%, #232a58, #191e42 70%);
  transition: background 0.5s var(--ease);
}

.wp.wild::before {
  opacity: 0.85;
  animation-play-state: running;
}

.wp.wild::after {
  background: radial-gradient(120% 100% at 50% 0%, #2a2552, #191e42 70%);
}

@keyframes wpSpin {
  to {
    transform: translate(-50%, -50%) rotate(1turn);
  }
}

.wp-mode {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 800;
  color: var(--dim);
  background: rgba(251, 244, 230, 0.07);
}

.wp.wild .wp-mode {
  color: var(--cream);
}

.wp-wheel {
  width: 15px;
  height: 15px;
}

.wp-seats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
}

.wp-seat {
  flex: none;
  width: 48px;
  height: 48px;
  transition: width 0.4s var(--ease), margin 0.4s var(--ease), opacity 0.3s, transform 0.4s var(--pop);
}

.wp-seat.gone {
  width: 0;
  margin: 0 -5px;
  opacity: 0;
  transform: scale(0.3);
}

.wp-seat .wp-av {
  font-size: 48px;
}

.wp-ring {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px dashed rgba(251, 244, 230, 0.26);
}

.wp-vs {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}

.wp-sum {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--dim);
}

.wp-sum b {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 20px;
  font-weight: 800;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.wp-sum b .emo {
  width: 20px;
  height: 20px;
  vertical-align: 0;
}

.wp-spark {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  pointer-events: none;
}

#nw-stakes .amount-field {
  margin-top: 8px;
}

#nw-action {
  margin-top: 16px;
}

#nw-action .to-chat {
  display: flex;
  margin: 6px auto 0;
  color: var(--gold);
}

/* ============================================================
   Away mid-wager: the countdown to giving it up
   ============================================================ */

.away-clock {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 19px;
  margin-top: 3px;
  padding: 0 7px 0 5px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--cream);
  background: rgba(12, 14, 32, 0.92);
  box-shadow: inset 0 0 0 1px var(--line), 0 4px 10px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
  transition: color 0.2s, box-shadow 0.2s;
}

/* the countdown says it all: no "Away" under it, and it isn't dimmed with the rest of the seat */
.seat.offline .label:has(.away-clock)::after {
  display: none;
}

.away-clock .emo {
  width: 12px;
  height: 12px;
  vertical-align: 0;
}

.away-clock.urgent {
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 90, 79, 0.7), 0 4px 12px rgba(255, 90, 79, 0.3);
}

.tile-back {
  background: linear-gradient(120deg, rgba(255, 90, 79, 0.2), rgba(255, 203, 87, 0.1)), rgba(20, 24, 48, 0.9);
  box-shadow: inset 0 0 0 1px rgba(255, 90, 79, 0.35);
}

/* Its pulse: the resting shadow and a red glow are each drawn once, and trade places by opacity alone (animating
   the box-shadow itself repainted the tile every frame). */
.tile-back::before,
.tile-back::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  animation: backPulseOut 2s var(--ease-io) infinite;
}

.tile-back::before {
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.25);
}

.tile-back::after {
  box-shadow: inset 0 0 0 1px rgba(255, 90, 79, 0.385), 0 14px 34px rgba(255, 90, 79, 0.18);
  opacity: 0;
  animation-name: backPulseIn;
}

.tile-back.hidden {
  display: none;
}

#back-wager-left {
  font-variant-numeric: tabular-nums;
  color: var(--cream);
  font-weight: 800;
}

@keyframes backPulseOut {
  50% {
    opacity: 0;
  }
}

@keyframes backPulseIn {
  50% {
    opacity: 1;
  }
}