/* The stream page: a full width stream with chat and crowdplay on the picture. */

/*
 * The stream page borrows the platform's colours rather than keeping its own.
 * These names are what the rest of this file already uses, so they are mapped
 * onto the shared tokens instead of the whole file being rewritten, and a
 * change to the palette now reaches this page too.
 */
.watch-page {
  --shell: var(--card);
  --panel: #1a1a1c;
  --panel-2: #232326;
  --edge: var(--line);
  --dim: var(--muted);
  --hot: var(--live);

  min-height: 100vh;
  /*
   * No padding on the body. The header is prepended to it, so body padding
   * pushes the header inwards and it lands in a different place on every page
   * that has different padding. The gutter belongs to the content instead.
   */
  padding: 0;
}

/* Matches the home page frame exactly, so the stream is the same width as a
   premiere and the two pages line up when you move between them. */
.watch-page .shell { padding: 0 28px 28px; }

.watch-page svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Class rules below set display, which would otherwise beat the browser's own
   rule for the hidden attribute and leave "hidden" elements on screen. */
.watch-page [hidden] { display: none !important; }

.shell {
  max-width: 1560px;
  margin: 0 auto;
  background: var(--shell);
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: var(--r-lg);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .55);
  overflow: hidden;
}

/* ---------------- top bar ---------------- */

.shell-body {
  display: block;
  min-height: 640px;
}

/* stage */

.stage { padding: 0 0 18px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.channel-head { display: flex; align-items: center; gap: 12px; }
.channel-id { min-width: 0; }
.channel-name { display: flex; align-items: center; gap: 6px; }
.channel-name b { font-size: 15px; }
.verified { color: #f2b33d; width: 14px; height: 14px; }
.channel-id .muted { font-size: 12px; color: var(--muted); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 11px;
  border-radius: var(--r-sm);
  background: var(--panel);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}

.pill svg { width: 13px; height: 13px; color: var(--muted); }
.pill.live { background: var(--live); color: #fff; }
.pill.live svg { color: #fff; animation: blink 2s infinite; }

@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.stage .spacer { flex: 1; }

.btn-follow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 16px;
  border-radius: var(--r-sm);
  border: 0;
  background: var(--signal);
  color: var(--void);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

.btn-follow:hover { background: var(--signal-hi); }
.btn-follow svg { width: 14px; height: 14px; }
.btn-follow.following { background: var(--panel); color: var(--ink); }
.btn-follow.following svg { fill: var(--live); stroke: var(--live); }

/* player */

.player-frame {
  position: relative;
  width: 100%;
  /*
   * As tall as the window leaves room for, the same measured --fit the home
   * page's frame uses. A 16:9 box at full width is around 800px tall on a
   * laptop, which does not fit in the window, and a stream you have to scroll
   * to see the bottom of is the one thing this page cannot get wrong.
   *
   * The video inside is contained rather than cropped, so a frame that is not
   * quite 16:9 letterboxes instead of cutting the picture off.
   */
  height: var(--fit, min(620px, calc(100dvh - 190px)));
  min-height: 240px;
  /* Stated once. The chat is this wide and the control bar stops this far in,
     so changing it here cannot leave the two disagreeing. */
  --chat-w: 300px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #000;
  border: 1px solid var(--line);
}

.player-frame video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; }

.player-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(10, 10, 18, .86);
  backdrop-filter: blur(3px);
  text-align: center;
}

.player-overlay.hidden { display: none; }
.overlay-inner { display: grid; gap: 12px; justify-items: center; padding: 20px; }
.overlay-inner p { margin: 0; font-size: 14px; color: var(--ink); max-width: 420px; }

.pulse {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(242, 65, 90, .16);
  color: var(--live);
  animation: blink 1.8s infinite;
}

.chat-off .player-bar { right: 12px; }

.player-bar {
  position: absolute;
  left: 12px;
  /*
   * Stops where the chat starts rather than sliding underneath it. The chat
   * panel is 380px of the right hand side, so the bar gives that back and
   * reclaims it the moment chat is dismissed.
   */
  right: calc(var(--chat-w) + 12px);
  bottom: 12px;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border-radius: var(--r-md);
  background: rgba(14, 14, 22, .72);
  backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .18s, transform .18s;
  z-index: 4;
}

.player-frame:hover .player-bar,
.player-bar:focus-within { opacity: 1; transform: none; }

.ctl {
  height: 30px;
  min-width: 30px;
  padding: 0 8px;
  border-radius: var(--r-sm);
  border: 0;
  background: transparent;
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.ctl:hover { background: rgba(255, 255, 255, .1); }
.ctl.wide { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.ctl.wide.at-live { color: var(--live); }
.player-bar .spacer { flex: 1; }
.player-bar .stat { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* title under the player */

.title-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.title-bar h1 { margin: 0; font-size: 16px; font-weight: 650; letter-spacing: -.01em; }

.chip {
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: var(--r-sm);
  background: var(--panel);
  color: var(--muted);
}


.vod-strip h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 4px 0 10px; }
.vod-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }

.vod-card { border-radius: var(--r-md); overflow: hidden; background: var(--panel); }
.vod-card .shot { aspect-ratio: 16/9; background: #101019; display: grid; place-items: center; color: var(--muted); font-size: 11px; }
.vod-card .shot img { width: 100%; height: 100%; object-fit: cover; }
.vod-card .meta { padding: 8px 10px; }
.vod-card b { display: block; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vod-card span { font-size: 11px; color: var(--muted); }

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

/*
 * Chat, on the picture.
 *
 * It used to be a third column, which cost the stream 276px of width on every
 * screen whether anybody was reading it or not. Floating it over the video
 * gives the stream the full width of the page, and gives chat somewhere to go
 * when it is in the way.
 */
.chat-panel {
  position: absolute;
  z-index: 6;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--chat-w);
  display: flex;
  flex-direction: column;
  min-height: 0;
  /*
   * Part of the picture rather than a card sitting on it. No border and no
   * corners: the panel is a gradient that starts at nothing over the video and
   * deepens towards the edge of the frame, so the messages have enough ground
   * to be read against and the stream is never boxed off.
   */
  border: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(6, 6, 8, .32) 18%,
    rgba(6, 6, 8, .62) 48%,
    rgba(6, 6, 8, .78) 100%
  );
  transition: opacity .2s;
}

.chat-panel[hidden] { display: none; }

.chat-toggle {
  margin-left: 6px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.chat-toggle:hover { background: rgba(255, 255, 255, .1); color: var(--ink); }
.chat-toggle svg { width: 14px; height: 14px; }

/* The way back, once it has been sent away. */
.chat-show {
  position: absolute;
  z-index: 6;
  top: 16px;
  right: 18px;
  padding: 9px 16px;
  border: 0;
  border-radius: var(--r-pill);
  background: rgba(6, 6, 8, .6);
  backdrop-filter: blur(10px);
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
  font-weight: 650;
  cursor: pointer;
}

.chat-show:hover { background: rgba(6, 6, 8, .85); }

/* Nothing left but the way to close it. The viewer count already sits in the
   channel bar above the stream, so saying it twice only took up room. */
.chat-head { padding: 12px 14px 4px 26px; display: flex; justify-content: flex-end; }

.chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 4px 20px 10px 26px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-height: 0;
}

/*
 * Chat fills from the bottom.
 *
 * A quiet room should show its few messages just above the box you type in,
 * not stranded at the top with a column of empty space under them, and new
 * ones should rise rather than appear far away.
 *
 * Done with an auto margin on the first message rather than
 * justify-content: flex-end, because that combination overflows past the top
 * of a scroll container in several browsers and makes the oldest messages
 * unreachable. An auto margin collapses to nothing once the log is full, so it
 * costs nothing in the case that matters.
 */
.chat-log > *:first-child { margin-top: auto; }

.chat-log::-webkit-scrollbar { width: 8px; }
.chat-log::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: var(--r-sm); }

/*
 * A message is a line of text with a picture and a name at the front of it.
 *
 * Laid out inline rather than as a grid, so a long message wraps under itself
 * the way a sentence does instead of being held in a column beside the avatar.
 */
.msg {
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.msg .avatar {
  width: 20px;
  height: 20px;
  flex-basis: 20px;
  font-size: 9px;
  display: inline-grid;
  /* Sits on the text baseline rather than above it, which is what stops the
     first line of every message from being taller than the ones under it. */
  vertical-align: -5px;
  margin-right: 7px;
}

.msg-name {
  font-weight: 700;
  margin-right: 6px;
}

.msg-name::after { content: ':'; color: var(--muted); }

.msg .tag {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 1px 5px;
  margin-right: 6px;
  border-radius: var(--r-xs);
  background: var(--signal-dim);
  color: var(--signal);
}

.msg.host .tag { background: rgba(242, 179, 61, .18); color: #f2b33d; }
.msg.support .tag { background: var(--signal-dim); color: var(--signal); }

.msg-text { color: rgba(255, 255, 255, .9); }

.chat-log { text-shadow: 0 1px 2px rgba(0, 0, 0, .45); }

.chat-system { font-size: 12px; color: var(--muted); font-style: italic; text-align: center; padding: 2px 0; }

.chat-compose { display: flex; gap: 10px; padding: 14px 20px 18px 26px; }

.chat-compose input {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .07);
  color: var(--ink);
  font-size: 13px;
  outline: none;
  transition: background .15s, border-color .15s;
}

.chat-compose input::placeholder { color: rgba(255, 255, 255, .45); }

.chat-compose input:focus { border-color: rgba(255, 255, 255, .3); background: rgba(10, 10, 12, .7); }
.chat-compose input:disabled { opacity: .55; }

/* An arrow rather than the word, so the field gets the width back. The label
   lives on the button for anything that reads the page aloud. */
.btn-send {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 0;
  background: var(--signal);
  color: var(--void);
  cursor: pointer;
  transition: background .15s;
}

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

.btn-send:hover { background: var(--signal-hi); }
.btn-send:disabled { opacity: .45; cursor: not-allowed; }

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

@media (max-width: 1180px) {
  .shell-body { grid-template-columns: 64px minmax(0, 1fr); }
  .chat-panel {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: 52%;
    background: linear-gradient(0deg, rgba(6, 6, 8, .82) 0%, rgba(6, 6, 8, .55) 55%, transparent 100%);
  }
  .search input { width: 170px; }
}

@media (max-width: 820px) {
  .watch-page { padding: 0; }
  .shell { border-radius: 0; border: 0; }
  .shell-body { grid-template-columns: minmax(0, 1fr); }
  .top-nav, .search, .me-text { display: none; }
  .stage { padding: 12px; }
  .channel-head { flex-wrap: wrap; }
  .chat-panel { height: auto; min-height: 60vh; }

  /* The counters must not swallow a small player. */
  .player-bar { right: 12px; }
  .player-bar { opacity: 1; transform: none; }
}

/* Generated cover art on the past broadcast cards. */
.vod-card .shot { position: relative; }
.vod-card .shot .letters {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 800;
  color: rgba(255, 255, 255, .8);
}

/* ---------------- crowdplay ---------------- */

/*
 * The interaction layer lives on the video, not under it. A viewer watching a
 * fight should not have to look away to take part, and on a licensed platform
 * this is an overlay on somebody else's player anyway.
 * It clears the control bar at the bottom and the counter rail on the right.
 */
/*
 * The overlay is anchored to the bottom of the video and grows upward, so it
 * has to be told where to stop. A betting table with a lot of markets would
 * otherwise run off the top of the picture, which is where the game is.
 */
.crowd {
  position: absolute;
  left: 14px;
  /* Half the frame at most. The video is what people came for, and an overlay
     that covers it is a worse overlay however good the cards are. */
  right: auto;
  max-width: min(340px, 42%);
  bottom: 68px;
  top: auto;
  max-height: 78%;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
  pointer-events: none;

  /*
   * Four of these can be open at once, which is taller than the player on a
   * laptop. The column scrolls rather than growing off the top, and because
   * it is justified to the end the most urgent card is the one already in
   * view. The scrollbar is hidden: this is an overlay on video, not a pane.
   */
  overflow-y: auto;
  scrollbar-width: none;
}

.crowd::-webkit-scrollbar { display: none; }

/* Only the table scrolls, and only when it has to. Everything else keeps its
   place, so the action buttons do not move around under a viewer's thumb. */
.crowd .crowd-bets { max-width: 520px; overflow-y: auto; scrollbar-width: thin; }
.crowd .crowd-bets::-webkit-scrollbar { width: 6px; }
.crowd .crowd-bets::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: var(--r-sm); }

.crowd > * { pointer-events: auto; }

.crowd-head {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 11px;
  border-radius: var(--r-sm);
  background: rgba(12, 13, 24, .66);
  backdrop-filter: blur(10px);
}

.crowd-head h3 { margin: 0; font-size: 10px; text-transform: uppercase; letter-spacing: .09em; color: rgba(255, 255, 255, .55); }
.crowd-head .wallet { font-size: 11px; color: rgba(255, 255, 255, .55); }
.crowd-head .wallet b { color: #fff; font-size: 13px; font-variant-numeric: tabular-nums; }

.crowd-actions { display: flex; flex-wrap: wrap; gap: 7px; }

.crowd-btn {
  position: relative;
  display: grid;
  gap: 1px;
  padding: 7px 13px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(12, 13, 24, .72);
  backdrop-filter: blur(10px);
  color: #fff;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.crowd-btn:hover:not(:disabled) { border-color: var(--signal-edge); background: rgba(28, 24, 10, .8); }
.crowd-btn:disabled { opacity: .4; cursor: not-allowed; }
.crowd-btn .label { font-size: 12.5px; font-weight: 650; }
.crowd-btn .cost { font-size: 10px; color: rgba(255, 255, 255, .5); }
.crowd-btn .cool { position: absolute; top: 5px; right: 7px; font-size: 9.5px; color: var(--live); font-weight: 700; }

.crowd-note { margin: 0; font-size: 11.5px; color: rgba(255, 255, 255, .7); text-shadow: 0 1px 6px rgba(0, 0, 0, .8); min-height: 14px; }
.crowd-note.bad { color: #ff9db0; }

/* poll */

.crowd-poll {
  width: min(360px, 100%);
  padding: 12px 13px;
  border-radius: var(--r-md);
  background: rgba(12, 13, 24, .78);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(125, 95, 251, .38);
}

.poll-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.poll-top b { font-size: 14px; flex: 1; min-width: 0; }

.poll-kind {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: var(--r-sm);
  background: var(--signal-dim);
  color: var(--signal);
}

.poll-kind.predict { background: rgba(242, 179, 61, .16); color: #f2b33d; }

.poll-clock {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--live);
  min-width: 38px;
  text-align: right;
}

.poll-clock.done { color: var(--muted); }
.poll-options { display: grid; gap: 6px; }

.poll-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--raised);
  color: var(--ink);
  cursor: pointer;
  overflow: hidden;
  font: inherit;
}

.poll-option:hover:not(:disabled) { border-color: var(--signal-edge); }
.poll-option:disabled { cursor: default; }
.poll-option.mine { border-color: var(--signal); }
.poll-option .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--signal-dim); transition: width .3s; }
.poll-option .text { position: relative; flex: 1; font-size: 13px; text-align: left; }
.poll-option .num { position: relative; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.poll-foot { margin-top: 8px; font-size: 11.5px; color: var(--muted); }

@media (max-width: 820px) {
  .crowd { left: 8px; right: 56px; bottom: 62px; gap: 6px; }
  .crowd-btn { padding: 6px 10px; }
  .crowd-btn .label { font-size: 11.5px; }
  .crowd-poll { padding: 10px; }
}

/* ---------------- support ----------------
   Spending coins in this channel, opened from the header rather than always on
   screen, so the page stays about the stream. */

.btn-support {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 1px solid var(--signal-edge);
  border-radius: var(--r-pill);
  background: var(--signal-dim);
  color: var(--signal);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: background .15s;
}

.btn-support:hover { background: rgba(255, 214, 51, .24); }
.btn-support svg { width: 15px; height: 15px; }

.support-panel {
  margin: 0 0 14px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
}

.support-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.support-head b { font-size: 14px; font-weight: 700; }

.support-amounts { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }

.support-amounts .amount {
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .05);
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
  font-weight: 650;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.support-amounts .amount:hover:not(:disabled) { background: var(--signal-dim); border-color: var(--signal-edge); }
.support-amounts .amount:disabled { opacity: .4; cursor: not-allowed; }
.support-amounts .topup { border-style: dashed; color: var(--muted); }

.support-note { margin: 12px 0 0; font-size: 12px; color: var(--muted); }

/* ---------------- the betting table ----------------
   A wager is not an action, so it does not look like one. It shows the odds,
   how the crowd is leaning and what you already have down, before you commit. */

.crowd-bets {
  margin-bottom: 10px;
  padding: 12px 14px;
  border: 1px solid var(--signal-edge);
  border-radius: var(--r-md);
  background: rgba(14, 12, 6, .74);
  backdrop-filter: blur(10px);
}

.bets-top { display: flex; align-items: center; gap: 10px; }
.bets-top b { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 650; }

.bets-kind {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-sm);
  background: var(--signal-dim);
  color: var(--signal);
}

.bets-clock { font-size: 12px; font-weight: 700; color: var(--signal); font-variant-numeric: tabular-nums; }
.bets-clock.done { color: var(--muted); }

/* The chip you are betting with. One choice, then every bet is one press. */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.chips .chip {
  min-width: 42px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .05);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.chips .chip.on { background: var(--signal); border-color: var(--signal); color: #191400; }
.chips .chip:disabled { opacity: .35; cursor: not-allowed; }

.bets-group { margin-top: 10px; }
.bets-group-name { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bets-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

.bet {
  position: relative;
  flex: 1 1 90px;
  min-width: 78px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .04);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .15s, background .15s;
}

.bet:hover:not(:disabled) { border-color: var(--signal-edge); background: var(--signal-dim); }
.bet:disabled { opacity: .5; cursor: not-allowed; }
.bet.mine { border-color: var(--signal); }

/* How much of the pool is on this bet, drawn behind the label. */
.bet-fill { position: absolute; inset: 0 auto 0 0; background: var(--signal-dim); transition: width .4s; }
.bet-label { position: relative; display: block; font-size: 12.5px; font-weight: 650; }
.bet-pays { position: relative; display: block; margin-top: 2px; font-size: 10.5px; color: var(--muted); }

.bet-on {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: var(--signal);
  color: #191400;
  font-size: 10px;
  font-weight: 800;
}

.bets-foot { margin-top: 10px; font-size: 11.5px; color: var(--muted); }

/* The coin next to the crowdplay balance, so it reads as the same currency the
   header chip shows. */
.crowd-head .wallet { display: inline-flex; align-items: center; gap: 6px; }
.crowd-head .wallet .coin {
  width: 18px;
  height: 18px;
  background: url('/assets/currency/impakt-coin-icon.webp') center / contain no-repeat;
}

/* Once a round is decided, every bet says whether it came in, not just the one
   this viewer happened to back. */
.bet.won { border-color: var(--signal); background: var(--signal-dim); }
.bet.won .bet-label { color: var(--signal); }
.bet.lost { opacity: .45; }

.bets-result {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: 12.5px;
}

.bets-result.win { background: var(--signal-dim); color: var(--signal); }
.bets-result.lose { background: rgba(255, 255, 255, .05); color: var(--muted); }
.bets-result-what { font-weight: 650; }
.bets-result b { font-size: 13px; font-weight: 750; }

/* ---------------- backing the streamer ----------------
   The host has staked their own coins and opened the bet to the room. It reads
   as one pot rather than a table of choices, because there is only one outcome
   and everybody in it is on the same side. */

.crowd-bank {
  width: min(400px, 100%);
  padding: 13px 14px;
  border-radius: var(--r-md);
  background: rgba(12, 13, 24, .82);
  backdrop-filter: blur(14px);
  border: 1px solid var(--signal-edge);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .45);
}

.bank-top { display: flex; align-items: center; gap: 10px; }
.bank-top b { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 650; }

.bank-kind {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: var(--r-sm);
  background: var(--signal-dim);
  color: var(--signal);
  white-space: nowrap;
}

.bank-clock { font-size: 12px; font-weight: 700; color: var(--signal); font-variant-numeric: tabular-nums; }
.bank-clock.done { color: var(--muted); }

.bank-pot { display: flex; align-items: flex-end; gap: 10px; margin-top: 11px; }
.bank-figure { display: grid; gap: 2px; }
.bank-figure span { font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.bank-figure b { font-size: 17px; font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1; }
.bank-figure.pool b { color: var(--signal); }
.bank-figure.total { margin-left: auto; text-align: right; }
.bank-figure.total b { font-size: 20px; }
.bank-plus { font-size: 14px; color: var(--muted); padding-bottom: 1px; }

.bank-bar {
  margin-top: 10px;
  height: 5px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}

.bank-bar span {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--signal-hi), var(--signal));
  transition: width .4s;
}

.bank-cap { margin-top: 6px; font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bank-chips { margin-top: 10px; }
.bank-foot { margin-top: 9px; font-size: 11.5px; color: var(--muted); line-height: 1.4; }

.bank-result {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 11px;
  padding: 9px 11px;
  border-radius: var(--r-sm);
}

.bank-result-what { flex: 1; min-width: 0; font-size: 12px; font-weight: 650; }
.bank-result b { font-size: 13.5px; font-weight: 750; white-space: nowrap; }
.bank-result.win { background: var(--signal-dim); color: var(--signal); }
.bank-result.push { background: rgba(255, 255, 255, .06); color: var(--ink); }
.bank-result.lose { background: rgba(255, 255, 255, .05); color: var(--muted); }

@media (max-width: 820px) {
  .crowd-bank { padding: 11px; }
  .bank-figure b { font-size: 15px; }
  .bank-figure.total b { font-size: 17px; }
}

/* ---------------- the store ----------------
   The casino's store, on the stream. Balance and tier across the top, the
   pack ladder below, the daily beside it. One wallet across both properties,
   so the numbers and the tiers are the same object in two places. */

.store { margin-top: 22px; }

.store-head { margin-bottom: 12px; }
.store-head h2 { margin: 4px 0 0; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }

.store-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 26px;
  padding: 16px 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--raised);
  margin-bottom: 14px;
}

.store-bal b {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 3px;
  font-size: 26px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.store-bal i { font-size: 11px; font-style: normal; font-weight: 700; color: var(--signal); }

.store-tier { flex: 1; min-width: 220px; }
.store-tier-top { display: flex; justify-content: space-between; }

.store-track {
  display: block;
  height: 7px;
  margin: 6px 0 5px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .1);
  overflow: hidden;
}

.store-track span {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--signal), var(--signal-hi));
}

.store-cols { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 14px; }

/* the packs */

.store-packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }

.pack {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 18px 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  transition: border-color .15s, transform .15s;
}

.pack:hover { border-color: var(--tint); transform: translateY(-3px); }

.pack-badge {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 8px;
  border-radius: var(--r-xs);
  background: var(--tint);
  color: #0b0b0b;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .1em;
  white-space: nowrap;
}

.pack-art { width: 56px; height: 48px; }
.pack-amount { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pack-bonus { min-height: 14px; font-size: 10.5px; color: var(--signal); }

.pack-price {
  margin-top: 8px;
  padding: 6px 14px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .07);
  font-size: 12.5px;
  font-weight: 700;
}

.pack:hover .pack-price { background: var(--tint); color: #0b0b0b; }

/* daily and payment */

.store-side { display: grid; gap: 12px; align-content: start; }

.store-daily, .store-pay {
  padding: 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--card);
}

.ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin: 9px 0 11px; }

.rung {
  display: grid;
  justify-items: center;
  gap: 1px;
  padding: 7px 2px;
  border-radius: var(--r-xs);
  background: rgba(255, 255, 255, .05);
}

.rung b { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rung.big { grid-column: span 3; background: var(--signal-dim); }
.rung.big b { color: var(--signal); }
.rung.next { outline: 1px solid var(--signal-edge); }

.store-claim {
  width: 100%;
  padding: 10px;
  border-radius: var(--r-sm);
  border: 0;
  background: var(--signal);
  color: #101010;
  font: inherit;
  font-size: 12.5px;
  font-weight: 750;
  cursor: pointer;
}

.store-claim:disabled { background: rgba(255, 255, 255, .08); color: var(--muted); cursor: default; }

.pay-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }

.pay-row span {
  padding: 4px 7px;
  border-radius: var(--r-xs);
  background: rgba(255, 255, 255, .05);
  font-size: 8.5px;
  letter-spacing: .08em;
  color: var(--muted);
}

.store-note { margin: 12px 0 0; font-size: 12px; color: var(--muted); line-height: 1.55; }
.store-note.bad { color: #ff9db0; }
.store-note a { color: var(--signal); }

@media (max-width: 900px) {
  .store-cols { grid-template-columns: 1fr; }
}

/* ---------------- for or against ----------------
   Two pools with the price set by the crowd. The bar is the loudest thing on
   the card because its movement is the point: a side that everybody piles
   onto stops paying, and watching that shift is the game. */

.crowd-book {
  width: min(430px, 100%);
  padding: 13px 14px;
  border-radius: var(--r-md);
  background: rgba(12, 12, 14, .86);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(0, 0, 190, .5);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .5);
}

/* ---------------- the cash-out market ----------------
   A price, its line, and one exit button that says what it pays. The line is
   the product: the crowd's live opinion, drawn as it moves. */

.crowd-shares {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  padding: 13px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sh-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.sh-head b { font-size: 14px; font-weight: 700; line-height: 1.35; }
.sh-clock {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 11.5px; color: var(--signal); white-space: nowrap;
}
.sh-clock.done { color: var(--muted); }

.sh-price-row { display: flex; align-items: center; gap: 12px; }
.sh-price {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 30px; font-weight: 700; color: var(--signal); line-height: 1;
}
.sh-price i { font-style: normal; font-size: 15px; opacity: .7; }
.sh-spark { flex: 1; height: 56px; min-width: 0; }
.sh-spark line { stroke: rgba(255, 255, 255, .12); stroke-dasharray: 3 5; }
.sh-spark path { fill: none; stroke: var(--signal); stroke-width: 2; }

.sh-pos {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 11px; font-size: 12.5px; color: var(--muted);
}
.sh-pos b { color: var(--text); }
.sh-pos b.win { color: var(--signal); }
.sh-pos b.lose { color: #ff5a5f; }
.sh-cashout {
  border: 1px solid var(--signal); border-radius: 9px;
  background: var(--signal-dim); color: var(--signal);
  font: inherit; font-weight: 700; font-size: 12.5px;
  padding: 6px 11px; cursor: pointer; white-space: nowrap;
}
.sh-cashout:hover { background: rgba(63, 220, 111, .18); }

.sh-trade { display: flex; flex-direction: column; gap: 8px; }
.sh-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sh-side {
  border: 1px solid var(--line); border-radius: 10px;
  background: transparent; color: var(--text);
  font: inherit; font-weight: 700; font-size: 13px;
  padding: 9px 0; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.sh-side.picked { border-color: var(--signal); background: var(--signal-dim); color: var(--signal); }
.sh-buy { display: flex; gap: 6px; align-items: stretch; }
.sh-buy [data-tsize] {
  flex: 1; border: 1px solid var(--line); border-radius: 9px;
  background: transparent; color: var(--muted);
  font: inherit; font-size: 12px; padding: 7px 0; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.sh-buy [data-tsize].picked { border-color: var(--signal); color: var(--signal); }
.sh-go {
  flex: 1.2; border: 0; border-radius: 9px;
  background: var(--signal); color: #08110a;
  font: inherit; font-weight: 800; font-size: 12.5px;
  cursor: pointer; letter-spacing: .02em;
}
.sh-go:hover { filter: brightness(1.06); }
.sh-vol { font-size: 11px; color: var(--faint); font-family: 'Space Mono', ui-monospace, monospace; }
.sh-result { font-size: 13px; color: var(--muted); }
.sh-result b { color: var(--signal); }

/* ---------------- the market ----------------
   Read like a prediction market, because that is what it is. A question, two
   prices, a size. Nothing else on the card: no multiplier to convert in your
   head, no backer counts, no second row of chips under each side. */

.pm-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.pm-head b { font-size: 14px; font-weight: 700; line-height: 1.35; }

.pm-clock {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--signal);
}

.pm-clock.done { color: var(--muted); }

.pm-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.pm-side {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .05);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.pm-side:hover:not(:disabled) { background: rgba(255, 255, 255, .1); }
.pm-side:disabled { cursor: default; opacity: .75; }

.pm-label { font-size: 12px; color: var(--muted); }

/* The price is the whole point of the card, so it is the only large thing. */
.pm-price { font-size: 26px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.pm-price i { font-style: normal; font-size: 14px; font-weight: 700; margin-left: 1px; opacity: .6; }

.pm-for .pm-price { color: #3fbf6a; }
.pm-against .pm-price { color: var(--live); }

.pm-yours { font-size: 10.5px; color: var(--muted); }

/* Picked is a state you can see at a glance, since the size buttons below do
   nothing until one side is chosen. */
.pm-for.picked { border-color: #3fbf6a; background: rgba(63, 191, 106, .14); }
.pm-against.picked { border-color: var(--live); background: rgba(255, 61, 87, .14); }

.pm-side.won { border-color: #3fbf6a; background: rgba(63, 191, 106, .18); }
.pm-side.lost { opacity: .45; }

.pm-buy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}

.pm-chips { display: flex; gap: 6px; }

.pm-chips button {
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background .15s;
}

.pm-chips button:hover:not(:disabled) { background: rgba(255, 255, 255, .12); }
.pm-chips button:disabled { opacity: .35; cursor: default; }

.pm-vol { font-size: 11px; color: var(--muted); white-space: nowrap; }

.pm-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: 12px;
}

.pm-result span { color: var(--muted); }
.pm-result b { font-size: 13px; }
.pm-result.win { background: rgba(63, 191, 106, .16); }
.pm-result.lose { background: rgba(255, 255, 255, .06); }

.pm-note { margin: 10px 0 0; font-size: 11.5px; color: var(--muted); }


@media (max-width: 820px) {
  .crowd-book { padding: 11px; }
  .pm-price { font-size: 21px; }
}


/* ---------------- tucked cards ----------------
   One card is open; the rest collapse to a single line carrying the label,
   the one number that matters and the clock. Pressing a line opens it and
   tucks whatever was open before, so the video is only ever behind one card. */

.crowd > .tucked {
  width: auto;
  max-width: 100%;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  /* Everything inside is laid out again as one row. */
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  background: rgba(10, 10, 12, .86);
  backdrop-filter: blur(12px);
}

.crowd > .tucked:hover { background: rgba(20, 20, 24, .92); }

/* Only the first two things in a tucked card survive: the label chip and the
   headline. The rest is hidden rather than removed, so opening it is instant
   and nothing has to be redrawn. */
.crowd > .tucked > * { display: none; }

.crowd > .tucked > .pm-head,
.crowd > .tucked > .bank-top,
.crowd > .tucked > .bets-top,
.crowd > .tucked > .poll-top {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  min-width: 0;
}

.crowd > .tucked b {
  font-size: 11.5px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crowd > .tucked .band,
.crowd > .tucked .bets-kind,
.crowd > .tucked .poll-kind,
.crowd > .tucked .bank-kind { font-size: 8.5px; padding: 2px 7px; flex: none; }

.crowd > .tucked .pm-clock,
.crowd > .tucked .bank-clock,
.crowd > .tucked .bets-clock,
.crowd > .tucked .poll-clock { margin-left: auto; font-size: 11px; flex: none; }

/* The open card is narrower than it was, since it no longer has the width of
   the whole player to spread into. */
.crowd-book, .crowd-bank, .crowd-poll { width: 100%; }
.crowd .crowd-bets { max-width: 100%; }

.crowd-book .pm-sides { gap: 6px; }
.crowd-book .pm-side { padding: 8px 9px; }
.crowd-book .pm-price { font-size: 21px; }
.crowd-book .pm-chips button { padding: 4px 9px; font-size: 10px; }

.crowd-actions { flex-wrap: wrap; max-width: 100%; }
.crowd-btn { padding: 6px 10px; }
.crowd-btn .label { font-size: 11.5px; }

@media (max-width: 1100px) {
  .crowd { max-width: min(320px, 52%); }
}

/* ---------------- the quality menu ----------------
   Opens upward, because the control bar sits at the bottom of the picture and a
   menu that dropped down would open off the end of the video. */

.quality { position: relative; }

.quality-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  z-index: 8;
  min-width: 150px;
  padding: 6px;
  border-radius: var(--r-md);
  background: rgba(10, 10, 12, .92);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}

.quality-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 9px 11px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.quality-menu button:hover { background: rgba(255, 255, 255, .1); }
.quality-menu button.on { color: var(--signal); font-weight: 700; }

/* What the choice actually costs, said plainly, because a viewer on a metered
   connection is choosing bandwidth rather than choosing prettiness. */
.quality-menu i { font-style: normal; font-size: 11px; color: var(--muted); }
.quality-menu button.on i { color: var(--signal); opacity: .8; }

/* ---------------- the blackjack felt ---------------- */

/*
 * Sits above the book, because the cards are what the bet is about. Deliberately
 * quiet: the video is the thing being watched, and a table that competes with it
 * is a table nobody looks past.
 */
.crowd-table {
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: radial-gradient(120% 90% at 50% 0%, rgba(63, 220, 111, .07), transparent 70%), var(--card);
}

.crowd-table[hidden] { display: none; }

.pt-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.pt-phase { font-size: 10px; font-weight: 700; letter-spacing: .18em; color: var(--signal); }
.pt-hand { font-size: 10px; letter-spacing: .14em; color: var(--faint); }

.pt-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pt-who { width: 54px; flex: 0 0 auto; font-size: 10px; font-weight: 700; letter-spacing: .14em; color: var(--faint); }
.pt-cards { display: flex; gap: 5px; flex: 1; min-width: 0; flex-wrap: wrap; }
.pt-total { font-size: 13px; font-weight: 800; letter-spacing: .04em; color: var(--ink); min-width: 30px; text-align: right; }
.pt-total.bust { color: #ff5a5f; }

/* A card. Small, legible, and obviously a card rather than a chip. */
.pc {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 42px;
  border-radius: 5px;
  background: #f4f4f6;
  color: #14141a;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
  animation: pt-deal .28s cubic-bezier(.2, 1.3, .4, 1) both;
}

.pc b { font-size: 12px; }
.pc i { font-style: normal; font-size: 11px; }
.pc.red { color: #c92a30; }

/* Face down. No rank, no suit, nothing to read off it. */
.pc.back {
  background: repeating-linear-gradient(45deg, #2a2140, #2a2140 4px, #221a35 4px, #221a35 8px);
  border: 1px solid rgba(255, 255, 255, .12);
}

@keyframes pt-deal {
  from { transform: translateY(-14px) rotate(-8deg); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.pt-result {
  margin-top: 10px;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  padding: 8px;
  border-radius: 8px;
}

.pt-result.won { color: #3fdc6f; background: rgba(63, 220, 111, .1); }
.pt-result.lost { color: #ff5a5f; background: rgba(255, 90, 95, .1); }
.pt-result.push { color: var(--muted); background: rgba(255, 255, 255, .05); }

/*
 * The revealed seed. Small on purpose: it matters that it is there and can be
 * checked, not that it is read.
 */
.pt-fair {
  margin-top: 8px;
  font-size: 9.5px;
  letter-spacing: .1em;
  color: var(--faint);
  text-align: center;
  font-family: 'Space Mono', ui-monospace, monospace;
}

/* ---------------- information artifacts on the felt ----------------
   A row of spend buttons under the hand while it is in play, and the banner
   that shows the card once someone has paid to reveal it. */
.pt-artifacts {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.pt-artifact {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 11px;
  border: 1px solid var(--signal-edge);
  border-radius: 9px;
  background: var(--signal-dim);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  transition: border-color .15s, background .15s, transform .05s;
}
.pt-artifact:hover:not(:disabled) { border-color: var(--signal); background: rgba(63, 220, 111, .12); }
.pt-artifact:active:not(:disabled) { transform: translateY(1px); }
.pt-artifact:disabled { opacity: .45; cursor: not-allowed; }
.pt-artifact-name { font-size: 12px; font-weight: 600; letter-spacing: .01em; }
.pt-artifact-image { width:44px; height:44px; flex:none; object-fit:contain; filter:drop-shadow(0 3px 5px #0005); transition:transform .18s ease; }
.pt-artifact-copy { display:flex; flex:1; flex-direction:column; align-items:flex-start; gap:5px; min-width:0; }
.pt-artifact:hover:not(:disabled) .pt-artifact-image { transform:translateY(-2px) rotate(-4deg); }
@media(prefers-reduced-motion:reduce) {
  .pt-artifact-image { transition:none; }
  .pt-artifact:hover:not(:disabled) .pt-artifact-image { transform:none; }
}
.pt-artifact-price {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--signal);
  white-space: nowrap;
}

.pt-reveal {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--signal);
  border-radius: 10px;
  background: rgba(63, 220, 111, .1);
  animation: pt-reveal-in .28s ease-out;
}
.pt-reveal-label {
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--signal);
  font-family: 'Space Mono', ui-monospace, monospace;
}
.pt-reveal-by { font-size: 10.5px; color: var(--muted); margin-left: auto; }
@keyframes pt-reveal-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .pc { animation: none; }
  .pt-reveal { animation: none; }
}

/* ---------------- the refill sheet ----------------
   A viewer who runs dry while a round is still open, offered one tap to stay
   in it. One pack, already chosen; one button; the clock they are racing. It
   is a sheet rather than a dialog because on a phone the thumb is at the
   bottom, and because it must never feel like it interrupted the stream. */

.crowd-refill {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 60;
  width: min(420px, 100vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 22px calc(22px + env(safe-area-inset-bottom, 0px));
  background: rgba(10, 10, 12, .97);
  backdrop-filter: blur(16px);
  border: 1px solid var(--signal);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -12px 44px rgba(0, 0, 0, .7);
  animation: rfUp .28s cubic-bezier(.2, 1, .4, 1);
  text-align: center;
}
.crowd-refill[hidden] { display: none; }
@keyframes rfUp { from { transform: translate(-50%, 100%); } to { transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .crowd-refill { animation: none; } }

.rf-close {
  position: absolute;
  top: 10px; right: 12px;
  width: 30px; height: 30px;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 22px; line-height: 1;
  cursor: pointer;
}
.rf-close:hover { color: var(--text); }

.rf-clock {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #ff5a5f;
}
.rf-title { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.rf-pack { font-size: 13px; color: var(--muted); }

.rf-go {
  margin-top: 8px;
  width: 100%;
  padding: 15px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--signal);
  color: #04120a;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 0 22px rgba(63, 220, 111, .35);
}
.rf-go:hover:not(:disabled) { filter: brightness(1.08); }
.rf-go:disabled { opacity: .6; cursor: default; }

.rf-note { font-size: 11px; color: var(--faint); }

/* The dealer AI's book play, while the crowd decides. */
.pt-advice { margin: 6px 0; font-size: 10px; letter-spacing: .14em; color: #b56cff; }