/* ============================================================
   THE JUQBUQ HEIST — additions

   The vault, the panel, the tabs, the spots, the getaway and the odds table are
   all styled in juq.css exactly as the mockup drew them, and the getaway
   carries BOTH classes (`getaway spot`) the way the mockup writes it, so the
   .spot rules reach its contents and its canvas. Nothing here re-does any of
   that.

   This file only covers what the mockup could not: it dealt placeholder emoji
   as symbols (.sym, a 34px text character), and the real ticket deals 7TV
   emote images. Sizes come from assets/heist.css so a symbol reads at the size
   it does on the live heist.
   ============================================================ */

.spot img.face {
  width: 40px; height: 40px; object-fit: contain;
  display: block; user-select: none;
}
/* Some emote art carries heavy internal padding and renders visually tiny at
   the shared box, so those are bumped to read at the same size as the rest. */
.spot img.face.big { width: 56px; height: 56px; }
/* The getaway box is shorter than a loot cell and also carries a multiplier
   and a note, so its symbol takes less room. */
.getaway img.face { width: 30px; height: 30px; }

@media (max-width: 640px) {
  .spot img.face { width: 34px; height: 34px; }
  .spot img.face.big { width: 46px; height: 46px; }
}

/* x1 is the nothing-happened case, so its multiplier does not get to look like
   a win. */
.getaway.x1 .mult { color: var(--muted); }

/* The two special spots announce themselves once uncovered, never before: the
   foil is the whole game, so a gold spot must not be visible through it. The
   foil removes itself on reveal, so these only ever apply to an open spot. */
.spot.lard .tag { background: #ff9db8; color: #2a0d16; }
.spot.gold .tag { background: #f0b429; color: #2a1f04; }

/* ---------- emotes in running text ----------

   The rules and the leaderboard headings name emotes, so they show the actual
   art rather than an emoji approximating it. Sized to sit on the line like a
   character would; sizes from heist.css. */
.emi { width: 16px; height: 16px; object-fit: contain; vertical-align: -3px; }
/* The bullet icons down the left of the rules list are larger than inline art. */
.o-list .ic .emi { width: 19px; height: 19px; vertical-align: baseline; }
/* A heading's emote scales with the heading, which is bigger again. */
.o-h .emi { width: 20px; height: 20px; vertical-align: -4px; }
/* The ticket legend names the two special symbols, so it shows the same art the
   card does. A player is scanning the grid for these exact pictures, and a
   stand-in emoji teaches the wrong shape to look for. Same size as v1's. */
.t-legend .legimg { width: 20px; height: 20px; object-fit: contain; vertical-align: -6px; }

/* Messages that stand in for the ticket: signed out, loading, failed. */
.hst-note {
  font-family: var(--f-mono); font-size: var(--t-sm); line-height: 1.7; color: var(--muted);
  padding: var(--s-9) var(--s-5); text-align: center;
}

/* ---------- leaderboards ---------- */
.lb-empty {
  font-family: var(--f-mono); font-size: var(--t-mono); color: var(--muted);
  padding: var(--s-4) 2px;
}

/* Today's one is spent, so the button stops inviting something that is not
   there and counts down to the next instead. Still clickable: looking at what
   you won, or reading your rounds back, is worth a click.

   BOTH DAILIES, because both do this now. The shadow is stated rather than
   taken from --elev-btn: a waiting button is deliberately duller than a live
   one, and under the airy depth an inviting button and a spent one would
   otherwise cast the same soft glow and read the same. */
#heistOpen.waiting, #panelOpen.waiting {
  background: var(--surface-2);
  border-color: var(--line-strong);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  box-shadow: 5px 5px 0 var(--line-strong);
}
#heistOpen.waiting:hover, #panelOpen.waiting:hover { box-shadow: 0 0 0 transparent; border-color: var(--accent); color: var(--ink); }