/* ===========================================================================
   Ghost Room -- the game mode
   ---------------------------------------------------------------------------
   Loaded after app.css and scoped to body.game, so the private chat is never
   touched by anything in here. Louder than the chat on purpose: red and
   black, heavy type, cards you want to press. The palette is still a scale,
   not a pile of reds -- one red for action, one for glow, one for hairlines.
   =========================================================================== */

body.game {
  --g-bg:       #050203;
  --g-panel:    #0d0607;
  --g-panel-2:  #150a0c;
  --g-panel-3:  #1f0e11;
  --g-line:     #2a1216;
  --g-line-2:   #45171e;
  --g-red:      #e3172b;
  --g-red-2:    #ff3a4d;
  --g-red-dim:  #8e1020;
  --g-text:     #f7eef0;
  --g-muted:    #b59a9f;
  --g-dim:      #75585d;
  --g-grad:     linear-gradient(135deg, #ff3a4d 0%, #c10f22 100%);
  /* Gold belongs to the Joker and to the leader, nothing else. */
  --g-gold:     #f7c948;
  --g-gold-2:   #ffe08a;

  /* The shared components (sheets, focus rings) read these. */
  --brand: var(--g-red);
  --surface-1: var(--g-panel);
  --surface-2: var(--g-panel-2);
  --surface-3: var(--g-panel-3);
  --line: var(--g-line-2);
  --line-soft: var(--g-line);
  --text-1: var(--g-text);
  --text-2: var(--g-muted);
  --text-3: var(--g-dim);

  min-height: 100dvh;
  background: var(--g-bg);
  color: var(--g-text);
}

/* The light in the room: one glow from above, one ember from a corner. A fixed
   layer, because background-attachment: fixed is ignored on iOS and janky
   everywhere else. */
body.game::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(58rem 26rem at 50% -8%, rgba(227, 23, 43, .20), transparent 66%),
    radial-gradient(36rem 26rem at 105% 108%, rgba(142, 16, 32, .22), transparent 62%),
    var(--g-bg);
}

/* The GhostChat mark is blue. In here it is turned red rather than swapped
   for a second logo -- same ghost, different room. */
body.game .g-logo,
body.game .g-brand img,
body.game .g-back img,
body.game .veil img {
  filter: hue-rotate(128deg) saturate(1.25) brightness(1.05);
}

/* ------------------------------------------------------------------ phases */

.g-screen, .g-table { display: none; }

body[data-phase="boot"]    #entry,
body[data-phase="name"]    #entry,
body[data-phase="joining"] #entry,
body[data-phase="gone"]    #gEnd,
body[data-phase="blocked"] #gEnd { display: grid; }

body[data-phase="table"] .g-table { display: grid; }

/* ---------------------------------------------------------- entry and end */

.g-screen {
  min-height: 100dvh;
  place-items: center;
  padding: var(--s6) var(--s4) calc(var(--s6) + env(safe-area-inset-bottom));
}

.g-panel-card {
  width: min(25rem, 100%);
  padding: var(--s8) var(--s6) var(--s6);
  text-align: center;
  border: 1px solid var(--g-line);
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(31, 14, 17, .92), rgba(13, 6, 7, .94));
  box-shadow: 0 40px 90px -36px rgba(0, 0, 0, .95),
              0 0 0 1px rgba(255, 58, 77, .05),
              inset 0 1px 0 rgba(255, 255, 255, .05);
  animation: g-rise .5s var(--ease) both;
}

.g-logo {
  width: 72px; height: 72px;
  border-radius: 18px;
  margin-bottom: var(--s5);
  box-shadow: 0 14px 40px -12px rgba(227, 23, 43, .7);
}
.g-logo.still { width: 64px; height: 64px; opacity: .6; box-shadow: none; }

.g-kicker {
  color: var(--g-red-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: var(--s2);
}

.g-title {
  font-size: 40px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  margin-bottom: var(--s4);
}
.g-title span, .g-brand strong span {
  margin-left: .2em;                /* GHOST ROOM, not GHOSTROOM */
  color: var(--g-red);
  text-shadow: 0 0 28px rgba(227, 23, 43, .55);
}

.g-sub {
  color: var(--g-muted);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0 auto var(--s6);
  max-width: 21rem;
  text-wrap: balance;
}

.g-end-title {
  font-size: 22px;
  font-weight: 750;
  letter-spacing: -0.02em;
  margin-bottom: var(--s3);
}

.g-form { display: flex; flex-direction: column; gap: var(--s3); }

.g-form input {
  height: 52px;
  padding: 0 var(--s4);
  border-radius: 14px;
  border: 1px solid var(--g-line-2);
  background: rgba(5, 2, 3, .7);
  color: var(--g-text);
  font-size: 16px;                  /* 16px or iOS zooms the page on focus */
  font-weight: 600;
  text-align: center;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.g-form input::placeholder { color: var(--g-dim); font-weight: 500; }
.g-form input:focus {
  outline: none;
  border-color: var(--g-red);
  box-shadow: 0 0 0 4px rgba(227, 23, 43, .16);
}

.g-fine { margin-top: var(--s5); color: var(--g-dim); font-size: 12px; line-height: 1.55; }
.g-link {
  display: inline-block;
  margin-top: var(--s4);
  color: var(--g-muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.g-link:hover { color: var(--g-text); }

.g-stack { display: flex; flex-direction: column; gap: var(--s2); }

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

.g-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  height: 52px;
  padding: 0 var(--s6);
  border-radius: 14px;
  font-size: 15.5px;
  font-weight: 750;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--fast) var(--ease), filter var(--fast) var(--ease),
              box-shadow var(--med) var(--ease), background-color var(--fast) var(--ease);
}
.g-btn:active:not(:disabled) { transform: scale(.97); }
.g-btn:disabled { opacity: .55; cursor: default; }

.g-btn-red {
  background: var(--g-grad);
  color: #fff;
  box-shadow: 0 12px 30px -12px rgba(227, 23, 43, .85),
              inset 0 1px 0 rgba(255, 255, 255, .22);
}
.g-btn-red:hover:not(:disabled) { filter: brightness(1.08); }

.g-btn-ghost {
  background: var(--g-panel-2);
  color: var(--g-text);
  border: 1px solid var(--g-line-2);
}
.g-btn-ghost:hover { background: var(--g-panel-3); }

.g-small { height: 40px; padding: 0 var(--s4); font-size: 14px; border-radius: 11px; }
.g-wide { width: 100%; }

.g-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  min-width: 40px;
  padding: 0 10px;
  border-radius: 12px;
  border: 1px solid var(--g-line);
  background: var(--g-panel-2);
  color: var(--g-muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease),
              border-color var(--fast) var(--ease);
}
.g-icon-btn:hover { color: var(--g-text); background: var(--g-panel-3); }
.g-invite { color: var(--g-text); border-color: var(--g-line-2); }
.g-danger:hover { color: var(--g-red-2); border-color: var(--g-red-dim); background: rgba(227, 23, 43, .1); }

.g-badge {
  position: absolute;
  top: -6px; right: -6px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--g-red);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--g-bg);
}

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

.g-table {
  height: 100dvh;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas: "top" "players" "board";
}

.g-top {
  grid-area: top;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  padding-top: calc(var(--s3) + env(safe-area-inset-top));
  border-bottom: 1px solid var(--g-line);
  background: rgba(5, 2, 3, .6);
}

.g-brand { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.g-brand img { border-radius: 10px; flex: none; }
.g-brand strong {
  display: block;
  font-size: 15px;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.2;
}

.g-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--g-dim);
}
.g-status::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.g-status.good { color: #3ddc97; }
.g-status.warn { color: #f5c451; }
.g-status.bad  { color: var(--g-red-2); }

.g-actions { display: flex; align-items: center; gap: var(--s2); flex: none; }

.g-count {
  padding: 5px 10px;
  border-radius: var(--r-full);
  border: 1px solid var(--g-line);
  color: var(--g-muted);
  font-size: 12px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- players */

.g-players {
  grid-area: players;
  display: flex;
  gap: var(--s2);
  overflow-x: auto;
  padding: var(--s3) var(--s4);
  scrollbar-width: none;
}
.g-players::-webkit-scrollbar { display: none; }

.g-chip {
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px 4px 4px;
  border-radius: var(--r-full);
  border: 1px solid var(--g-line);
  background: var(--g-panel-2);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
  animation: g-rise .3s var(--ease) both;
}
.g-chip.me { border-color: var(--g-red-dim); background: rgba(227, 23, 43, .08); }
.g-chip.pending { opacity: .5; }

.g-ava {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--g-panel-3);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}
/* Whose move it is: a lit ring, visible from across the room. */
.g-chip.is-turn {
  border-color: var(--g-red);
  box-shadow: 0 0 0 1px var(--g-red), 0 0 22px -4px rgba(227, 23, 43, .9);
}
.g-chip.is-turn .g-ava { box-shadow: 0 0 0 2px var(--g-bg), 0 0 0 4px var(--g-red-2); }

.g-pts {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 11px;
  background: rgba(5, 2, 3, .7);
  border: 1px solid var(--g-line-2);
  color: var(--g-text);
  font-size: 12px;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.g-crown { color: var(--g-gold); font-size: 14px; line-height: 1; filter: drop-shadow(0 0 6px rgba(247, 201, 72, .6)); }

.g-you {
  color: var(--g-red-2);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ board */

.g-board {
  grid-area: board;
  min-height: 0;
  overflow-y: auto;
  padding: var(--s3) var(--s4) calc(var(--s8) + env(safe-area-inset-bottom));
}

.g-round {
  text-align: center;
  margin-top: var(--s2);
  color: var(--g-red-2);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.g-hint {
  text-align: center;
  color: var(--g-muted);
  font-size: 14px;
  font-weight: 650;
  margin: var(--s1) 0 var(--s4);
  text-wrap: balance;
  transition: color var(--med) var(--ease);
}
.g-hint.is-mine { color: var(--g-text); text-shadow: 0 0 22px rgba(227, 23, 43, .6); }

.g-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-width: 44rem;
  margin: 0 auto;
}

.g-card {
  position: relative;
  aspect-ratio: 3 / 4;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 14px;
  perspective: 900px;
  cursor: pointer;
  transition: transform var(--med) var(--ease), opacity var(--med) var(--ease);
  animation: g-deal .5s var(--ease) both;
}
.g-card:nth-child(2)  { animation-delay: .03s; }
.g-card:nth-child(3)  { animation-delay: .06s; }
.g-card:nth-child(4)  { animation-delay: .09s; }
.g-card:nth-child(5)  { animation-delay: .12s; }
.g-card:nth-child(6)  { animation-delay: .15s; }
.g-card:nth-child(7)  { animation-delay: .18s; }
.g-card:nth-child(8)  { animation-delay: .21s; }
.g-card:nth-child(9)  { animation-delay: .24s; }
.g-card:nth-child(10) { animation-delay: .27s; }
.g-card:nth-child(11) { animation-delay: .30s; }
.g-card:nth-child(12) { animation-delay: .33s; }

@media (hover: hover) {
  .g-card.playable:hover { transform: translateY(-5px); }
  .g-card.playable:hover .g-back {
    border-color: var(--g-red);
    box-shadow: inset 0 0 0 4px rgba(0, 0, 0, .55),
                inset 0 0 0 5px rgba(255, 58, 77, .55),
                0 18px 36px -14px rgba(227, 23, 43, .6);
  }
}
.g-card.playable:active { transform: scale(.97); }
.g-card[aria-disabled="true"] { cursor: default; }

/* On your turn the table breathes, so you know it is waiting for you. */
body.my-turn .g-card.playable .g-back { animation: g-breathe 2.4s var(--ease) infinite; }

/* Cards already opened this round stay face-up, quieter than the live one. */
.g-card.is-flipped .g-front { opacity: .8; }
body.drawing .g-card.is-flipped:not(.is-joker) .g-front { opacity: .45; }

/* While a card is out, the rest of the table steps back. */
body.drawing .g-card:not(.is-flipped) { opacity: .28; pointer-events: none; }

.g-card-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.3, 1.25, .5, 1);
}
.g-card.is-flipped .g-card-inner { transform: rotateY(180deg); }

.g-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 14px;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.g-back {
  border: 1px solid var(--g-line-2);
  background:
    repeating-linear-gradient(45deg, rgba(227, 23, 43, .09) 0 5px, transparent 5px 13px),
    radial-gradient(circle at 50% 42%, rgba(227, 23, 43, .34), transparent 62%),
    linear-gradient(160deg, #1b0a0d, #060203);
  box-shadow: inset 0 0 0 4px rgba(0, 0, 0, .55),
              inset 0 0 0 5px rgba(227, 23, 43, .3),
              0 12px 26px -14px rgba(0, 0, 0, .95);
  transition: border-color var(--med) var(--ease), box-shadow var(--med) var(--ease);
}
.g-back img {
  width: 44%;
  border-radius: 22%;
  opacity: .92;
}
.g-back-num {
  position: absolute;
  top: 9px; left: 10px;
  color: var(--g-red-2);
  font: 800 10px/1 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: .12em;
  opacity: .8;
}

.g-front {
  transform: rotateY(180deg);
  align-content: end;
  padding: 10px 8px;
  border: 1px solid var(--g-red);
  background: radial-gradient(circle at 50% 30%, rgba(227, 23, 43, .35), transparent 70%),
              linear-gradient(160deg, #2b0c11, #0c0405);
  box-shadow: 0 0 40px -6px rgba(227, 23, 43, .7);
}
.g-card.is-joker .g-front {
  opacity: 1;
  border-color: var(--g-gold);
  background: radial-gradient(circle at 50% 35%, rgba(247, 201, 72, .4), transparent 70%),
              linear-gradient(160deg, #3a2206, #0c0703);
  box-shadow: 0 0 46px -4px rgba(247, 201, 72, .75);
}
.g-card.is-joker .g-front-title { color: var(--g-gold-2); letter-spacing: .12em; text-transform: uppercase; }

/* A flipped card wears the picture it revealed, with the name legible over
   the bottom of it. */
.g-front-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .85;
}
.g-card.is-flipped .g-front::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 56%;
  background: linear-gradient(180deg, transparent, rgba(6, 2, 3, .92));
}

.g-front-title {
  position: relative;
  z-index: 1;
  align-self: end;
  width: 100%;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  text-align: center;
  text-wrap: balance;
}

/* ------------------------------------------------------------------- chat */

.g-chat {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: rgba(13, 6, 7, .96);
}

.g-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--g-line);
}
.g-chat-head strong {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--g-muted);
}

.g-log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--s4);
  scrollbar-width: thin;
  scrollbar-color: var(--g-line-2) transparent;
}
.g-log > :first-child { margin-top: auto; }

.g-log, .g-log * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.g-msg { display: flex; flex-direction: column; max-width: 82%; }
.g-msg:not(.same) { margin-top: var(--s3); }
.g-msg.in  { align-self: flex-start; }
.g-msg.out { align-self: flex-end; align-items: flex-end; }

.g-msg-name {
  margin: 0 0 3px 12px;
  font-size: 11.5px;
  font-weight: 750;
}

.g-bubble {
  margin: 0;
  padding: 8px 13px;
  border-radius: 17px;
  font-size: 14.5px;
  line-height: 1.42;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.g-msg.in .g-bubble {
  background: var(--g-panel-3);
  border: 1px solid var(--g-line);
  border-bottom-left-radius: 5px;
}
.g-msg.out .g-bubble {
  background: var(--g-grad);
  color: #fff;
  border-bottom-right-radius: 5px;
  box-shadow: 0 4px 16px -6px rgba(227, 23, 43, .6);
}

.g-sys {
  align-self: center;
  margin: var(--s3) 0 var(--s1);
  color: var(--g-dim);
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
}

.g-composer {
  display: flex;
  gap: var(--s2);
  padding: var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--g-line);
}
.g-composer input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 var(--s4);
  border-radius: 22px;
  border: 1px solid var(--g-line-2);
  background: var(--g-panel-2);
  color: var(--g-text);
  font-size: 16px;                  /* no iOS zoom */
}
.g-composer input::placeholder { color: var(--g-dim); }
.g-composer input:focus {
  outline: none;
  border-color: var(--g-red);
  box-shadow: 0 0 0 3px rgba(227, 23, 43, .14);
}

.g-send {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--g-grad);
  color: #fff;
  box-shadow: 0 8px 20px -8px rgba(227, 23, 43, .8);
  cursor: pointer;
  transition: transform var(--fast) var(--ease), opacity var(--med) var(--ease);
}
.g-send:active:not(:disabled) { transform: scale(.9); }
.g-send:disabled { opacity: .3; box-shadow: none; cursor: default; }

/* On phones and tablets the chat is a sheet that slides up. */
.g-scrim { display: none; }

@media (max-width: 959px) {
  .g-chat {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 25;
    height: min(78dvh, 40rem);
    border: 1px solid var(--g-line-2);
    border-bottom: 0;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -24px 70px -20px rgba(0, 0, 0, .95);
    transform: translateY(104%);
    transition: transform .38s var(--ease);
    background: var(--g-panel);       /* opaque: the table must not show through */
  }
  body.chat-open .g-chat { transform: none; }

  body.chat-open .g-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 24;
    background: rgba(3, 1, 2, .6);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation: fade var(--med) var(--ease);
  }
}

/* ----------------------------------------------------------------- reveal */

.g-reveal {
  position: fixed;
  inset: 0;
  z-index: 35;
  display: grid;
  place-items: center;
  padding: var(--s4);
  background: rgba(4, 1, 2, .82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: fade var(--med) var(--ease);
}

/* No panel. The blurred room behind is the backdrop, and the picture is the
   only thing with edges -- a card drawn around a card just boxed it in. */
.g-reveal-card {
  width: min(27rem, 100%);
  max-height: calc(100dvh - 2 * var(--s4));
  overflow-y: auto;
  padding: var(--s4) 0;
  text-align: center;
  animation: g-flip-in .6s cubic-bezier(.2, 1.2, .4, 1) both;
}

/* No frame: the picture is the thing. A box with a border and a black
   background only added letterbox bars down the sides of every portrait
   photo, so the media now takes its own shape and nothing else is drawn. */
.g-media {
  position: relative;
  margin: var(--s3) 0 var(--s4);
}
.g-media-slot { display: grid; place-items: center; }

/* Natural size, capped. Never stretched, never cropped. */
.g-video, .g-still {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 62dvh;
  border-radius: 18px;
  object-fit: contain;
  box-shadow: 0 30px 70px -22px rgba(0, 0, 0, .95);
}

.g-empty {
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 50dvh;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  color: var(--g-dim);
  font-size: 13px;
  font-weight: 650;
  background:
    repeating-linear-gradient(45deg, rgba(227, 23, 43, .05) 0 8px, transparent 8px 18px),
    radial-gradient(circle at 50% 45%, rgba(227, 23, 43, .16), transparent 65%),
    #070304;
}
.g-empty-icon {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 1px solid var(--g-line-2);
  color: var(--g-red-2);
  font-size: 18px;
  padding-left: 3px;
}

.g-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 76px; height: 76px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--g-grad);
  color: #fff;
  padding-left: 4px;
  box-shadow: 0 0 0 10px rgba(227, 23, 43, .18), 0 18px 40px -10px rgba(227, 23, 43, .9);
  cursor: pointer;
  animation: g-pulse 1.8s var(--ease) infinite;
}

.g-reveal-title {
  font-size: 24px;
  font-weight: 850;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: var(--s4);
  text-wrap: balance;
}

.g-reveal-score {
  margin: calc(-1 * var(--s2)) 0 var(--s4);
  color: var(--g-gold-2);
  font-size: 14px;
  font-weight: 750;
}

.g-reveal.is-joker .g-kicker { color: var(--g-gold); }
.g-reveal.is-joker .g-reveal-title {
  background: linear-gradient(180deg, #fff3c4, var(--g-gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.g-joker-art {
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 50dvh;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  background:
    repeating-conic-gradient(from 0deg, rgba(247, 201, 72, .07) 0 10deg, transparent 10deg 20deg),
    radial-gradient(circle at 50% 45%, rgba(247, 201, 72, .35), transparent 62%),
    #0b0603;
}
.g-joker-star {
  color: var(--g-gold);
  font-size: 64px;
  line-height: 1;
  filter: drop-shadow(0 0 22px rgba(247, 201, 72, .8));
  animation: g-spin 6s linear infinite;
}
.g-joker-word {
  color: var(--g-gold-2);
  font-size: 30px;
  font-weight: 900;
  letter-spacing: .3em;
  padding-left: .3em;
}

.g-sound {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 10px;
  margin-bottom: var(--s4);
  border: 0;
  background: none;
  color: var(--g-muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: color var(--fast) var(--ease);
}
.g-sound:hover { color: var(--g-text); }
.g-sound.on { color: var(--g-red-2); }

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

.g-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--s7) + env(safe-area-inset-bottom));
  z-index: 45;
  max-width: calc(100% - 2 * var(--s4));
  padding: 10px 16px;
  border-radius: var(--r-full);
  border: 1px solid var(--g-line-2);
  background: rgba(21, 10, 12, .96);
  color: var(--g-text);
  font-size: 13.5px;
  font-weight: 650;
  text-align: center;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .9);
  transform: translate(-50%, 12px);
  opacity: 0;
}
.g-toast.show { animation: g-toast .25s var(--ease) forwards; }

/* ------------------------------------------------------ sheets, re-tinted */

body.game .g-sheet { border-color: var(--g-line-2); }
body.game .sheet h3 { color: var(--g-text); }

.g-copyrow {
  display: flex;
  gap: var(--s2);
  margin-top: var(--s5);
  padding: 6px 6px 6px 14px;
  border-radius: 14px;
  border: 1px solid var(--g-line-2);
  background: rgba(5, 2, 3, .7);
}
.g-copyrow input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--g-red-2);
  font: 600 12.5px/1 ui-monospace, "SF Mono", Menlo, monospace;
  text-overflow: ellipsis;
}
.g-copyrow input:focus { outline: none; }

body.game .veil { background: var(--g-bg); }

/* ---------------------------------------------------------------- desktop */

.g-chat-close { display: inline-flex; }
.g-chat-toggle { display: inline-flex; }

@media (min-width: 560px) {
  .g-cards { gap: 14px; }
}

@media (min-width: 960px) {
  .g-table {
    grid-template-columns: minmax(0, 1fr) 22rem;
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas:
      "top     top"
      "players chat"
      "board   chat";
  }
  .g-top { padding: var(--s4) var(--s6); }
  .g-players { padding: var(--s4) var(--s6) var(--s2); }
  .g-board { padding: var(--s2) var(--s6) var(--s8); }
  .g-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: 58rem; gap: 16px; }
  .g-chat { grid-area: chat; border-left: 1px solid var(--g-line); }
  .g-chat-close, .g-chat-toggle { display: none; }
  .g-front-title { font-size: 14px; }
}

@media (max-width: 420px) {
  .g-invite span { display: none; }
  /* The player row directly below already shows everyone at the table. */
  .g-count { display: none; }
  .g-title { font-size: 34px; }
}

/* -------------------------------------------------------------- keyframes */

@keyframes g-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes g-deal {
  from { opacity: 0; transform: translateY(18px) rotate(-3deg) scale(.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes g-flip-in {
  from { opacity: 0; transform: perspective(1000px) rotateY(-24deg) scale(.9); }
  to   { opacity: 1; transform: none; }
}
@keyframes g-breathe {
  0%, 100% { box-shadow: inset 0 0 0 4px rgba(0, 0, 0, .55), inset 0 0 0 5px rgba(227, 23, 43, .3),
                         0 12px 26px -14px rgba(0, 0, 0, .95); }
  50%      { box-shadow: inset 0 0 0 4px rgba(0, 0, 0, .55), inset 0 0 0 5px rgba(255, 58, 77, .6),
                         0 12px 30px -12px rgba(227, 23, 43, .45); }
}
@keyframes g-spin { to { transform: rotate(360deg); } }
@keyframes g-toast {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes g-pulse {
  0%, 100% { box-shadow: 0 0 0 10px rgba(227, 23, 43, .18), 0 18px 40px -10px rgba(227, 23, 43, .9); }
  50%      { box-shadow: 0 0 0 18px rgba(227, 23, 43, .06), 0 18px 40px -10px rgba(227, 23, 43, .9); }
}