/* Casino Pages Styling */

/* Never let page content force a horizontal scrollbar on the whole document.
   Wide, intentionally-scrollable regions (e.g. Bootstrap .table-responsive)
   keep their own internal scroll; this only clips runaway page-level overflow.
   `clip` (unlike `hidden`) does not turn body into a scroll container, so
   position: sticky keeps working (the review page's quick-facts rail relies
   on it); the `hidden` line is only a fallback for older browsers. */
html,
body {
  overflow-x: hidden;
  overflow-x: clip;
}

/* --- Content width -------------------------------------------------------
   Bootstrap caps .container at 1320px, which leaves large empty gutters on
   big monitors. Widen it with a fluid width (a percentage of the available
   content area, so it adapts as the sidebar opens/closes) up to a comfortable
   ceiling. Long-form reading content is capped separately, at a readable line
   length, so prose never stretches into an unreadable slab. */
:root {
  --content-max: 2200px;   /* ceiling for all content pages (tables, dashboards, feed) */
  --reading-measure: 72ch; /* ~72 chars: tight measure for short prose blurbs */
  --guide-measure: 110ch;  /* ~110 chars: roomy docs-width for guides (prose + tables) */
}

@media (min-width: 1400px) {
  .container {
    max-width: min(97%, var(--content-max));
  }
}

/* --- Page hero -----------------------------------------------------------
   The banner that opens a page: title on the left, optional actions on the
   right. Used by the public pages (casinos, guides, glossary, feed) and by
   every profits page via the profits_header block in base_profits.html.
   Marketing landing heroes (home, profit tracker) are deliberately separate. */
.page-hero {
  background-color: var(--bs-dark);
  border-radius: 0.375rem;
  padding: 1rem;
  border: var(--bs-border-width) solid var(--bs-border-color);
}

@media (max-width: 767.98px) {
  .page-hero {
    text-align: center;
  }
}

/* Action row on the right of the hero. Layout only, so a hero can hold plain
   buttons; the bare-icon look comes from .hero-action below. */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  justify-content: center;
}

@media (min-width: 768px) {
  .hero-actions {
    justify-content: flex-end;
  }
}

/* Bare icon action: no button chrome, subtle hover. The favorite star include
   renders its own button, so it opts in by class name instead. */
.hero-actions .hero-action i,
.hero-actions .favorite-toggle-btn i {
  font-size: 1.25rem;
}

.hero-actions .hero-action,
.hero-actions .favorite-toggle-btn {
  opacity: 0.85;
  transition: opacity 0.15s ease-in-out;
}

.hero-actions .hero-action:hover,
.hero-actions .favorite-toggle-btn:hover {
  opacity: 1;
}

/* Some headings wrap to two lines below xxl (see casinos.html), so center all
   header cells to keep the single-line labels level with the wrapped ones. */
#casino-table-view thead th {
  vertical-align: middle;
}

/* On desktop, drive column widths from the explicit percentages on the header
   cells rather than letting content (and the wide container's slack) balloon
   every column. Notes gets the largest share so long sentences wrap there and
   the data columns hug their content. Hidden columns drop out and the visible
   ones re-normalize to fill the width. Mobile keeps auto layout so the few
   visible columns aren't over-squeezed. */
@media (min-width: 992px) {
  #casino-table-view table {
    table-layout: fixed;
  }
}

/* Keep long-form reading at a comfortable measure regardless of page width. */
.prose {
  max-width: var(--reading-measure);
}

/* The casino review is short prose, so it hugs the tight measure. */
.reading-column {
  max-width: var(--reading-measure);
}

/* Guides mix prose with tables and strategy charts, so they use a wider
   docs-style column, centered in the now-wide page. */
.guide-article {
  max-width: var(--guide-measure);
  margin-inline: auto;
}

/* Card bodies use flexbox to push buttons to bottom
   d-flex flex-column is applied via Bootstrap classes in templates
   Content areas use flex-grow-1 to expand and buttons use mt-auto to stick to bottom */


.casino-card .btn {
  transition: all 0.2s ease;
}

.casino-card .btn:hover {
  transform: scale(1.05);
}

/* Card titles consistent with how it works page */
.card-title {
  font-weight: 600;
}

/* List view table styling */
.table {
  table-layout: auto;
  width: 100%;
}

.table th {
  background-color: rgba(108, 117, 125, 0.2);
  border-color: rgba(255, 255, 255, 0.1);
  font-weight: 600;
  white-space: nowrap;
}

.table td {
  border-color: rgba(255, 255, 255, 0.1);
  vertical-align: middle;
}

.table tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.table .badge {
  font-size: 0.75em;
}

.table .btn-group .btn {
  padding: 0.25rem 0.5rem;
}

/* Badge styling */
.badge {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
}

.badge i {
  vertical-align: baseline;
  margin-right: 0.25rem;
}

/* Casino name prominence for table views */
.casino-name {
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.2;
  transition: color 0.2s ease;
}



/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .table th,
  .table td {
    padding: 0.375rem 0.2rem;
    font-size: 0.8rem;
  }

  .table .badge {
    font-size: 0.65em;
    padding: 0.25em 0.4em;
  }


  /* Compact the min/max columns for casinos table */
  .table th:nth-child(3),
  .table td:nth-child(3),
  .table th:nth-child(4),
  .table td:nth-child(4) {
    padding: 0.375rem 0.15rem;
  }

  /* Make daily reward type column more compact */
  .table th:nth-child(5),
  .table td:nth-child(5) {
    font-size: 0.7rem;
    padding: 0.375rem 0.1rem;
  }
}

@media (max-width: 576px) {
  /* On very small screens, make everything even more compact */
  .table th,
  .table td {
    padding: 0.25rem 0.1rem;
    font-size: 0.75rem;
  }

  .casino-name {
    font-size: 1rem;
  }

  .table .btn-sm {
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
  }
}

/* Sidebar Styles */
/* Desktop behavior - sidebar pushes content */
@media (min-width: 992px) {
  body {
    transition: margin-left 0.3s ease;
  }

  header {
    transition: left 0.3s ease;
  }

  html.sidebar-open body {
    margin-left: var(--sidebar-width, 220px);
  }

  html.sidebar-closed body {
    margin-left: 0;
  }

  /* Header should move with content when sidebar is open */
  html.sidebar-open header {
    left: var(--sidebar-width, 220px);
    right: 0;
    width: auto;
  }

  html.sidebar-closed header {
    left: 0;
    right: 0;
    width: auto;
  }
}

/* Mobile behavior - sidebar overlays content */
@media (max-width: 991.98px) {
  html.sidebar-open body,
  html.sidebar-closed body {
    margin-left: 0;
  }

  html.sidebar-open header,
  html.sidebar-closed header {
    left: 0;
    right: 0;
    width: auto;
  }
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: fit-content;
  height: 100vh;
  background-color: #212529;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 1050;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
}

/* Show sidebar when open */
html.sidebar-open .sidebar {
  transform: translateX(0);
}

/* Hide sidebar when closed */
html.sidebar-closed .sidebar {
  transform: translateX(-100%);
}

/* Backdrop overlay for mobile */
.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1040;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Show overlay on mobile when sidebar is open */
@media (max-width: 991.98px) {
  html.sidebar-open .sidebar-overlay {
    opacity: 1;
    visibility: visible;
  }
}

/* Hide overlay on desktop */
@media (min-width: 992px) {
  .sidebar-overlay {
    display: none;
  }
}

.sidebar-content {
  flex: 1;
  padding: 1rem 0;
  padding-top: 1rem;
  overflow-y: auto;
}

.sidebar-link {
  display: flex;
  align-items: center;
  padding: 0.75rem 1.5rem;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
}

.sidebar-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
  text-decoration: none;
}

.sidebar-link.active {
  background-color: rgba(255, 255, 255, 0.15);
  color: #fff;
  border-left-color: #0d6efd;
}

.sidebar-link i {
  width: 20px;
  text-align: center;
}

/* Header alignment fixes */
header .d-flex.align-items-center {
  align-items: center !important;
}

/* Burger menu button adjustments */
#sidebarToggle {
  padding: 0.375rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

#sidebarToggle:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.75);
}

/* Logo link alignment */
header .h2 {
  margin: 0 !important;
  line-height: 1 !important;
}

/* Ensure sidebar appears above Bootstrap components */
@media (max-width: 991.98px) {
  .sidebar {
    z-index: 1060;
  }

  .sidebar-overlay {
    z-index: 1055;
  }
}

/* Expandable sidebar sections */
.sidebar-section {
  position: relative;
}

.sidebar-toggle {
  position: relative;
  cursor: pointer;
}

.sidebar-arrow {
  font-size: 0.75rem;
}

html.sidebar-transitions .sidebar-arrow {
  transition: transform 0.2s ease;
}

.sidebar-section.expanded .sidebar-arrow,
html.stream-section-expanded #streamSection .sidebar-arrow,
html.records-section-expanded #recordsSection .sidebar-arrow,
html.analytics-section-expanded #analyticsSection .sidebar-arrow,
html.settings-section-expanded #settingsSection .sidebar-arrow {
  transform: rotate(180deg);
}

.sidebar-submenu {
  max-height: 0;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.2);
}

html.sidebar-transitions .sidebar-submenu {
  transition: max-height 0.3s ease;
}

.sidebar-section.expanded .sidebar-submenu,
html.stream-section-expanded #streamSection .sidebar-submenu,
html.records-section-expanded #recordsSection .sidebar-submenu,
html.analytics-section-expanded #analyticsSection .sidebar-submenu,
html.settings-section-expanded #settingsSection .sidebar-submenu {
  max-height: 300px;
}

.sidebar-sublink {
  display: flex;
  align-items: center;
  padding: 0.5rem 1.5rem 0.5rem 3rem;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: all 0.2s ease;
  font-size: 0.9rem;
  border-left: 3px solid transparent;
}

.sidebar-sublink:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
}

.sidebar-sublink.active {
  background-color: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-left-color: #0d6efd;
}

.sidebar-sublink i {
  width: 16px;
  text-align: center;
  font-size: 0.8rem;
}

/* Disabled states for unauthenticated users */
.sidebar-link.disabled,
.sidebar-sublink.disabled {
  color: rgba(255, 255, 255, 0.4);
  cursor: not-allowed;
  position: relative;
}

.sidebar-link.disabled:hover,
.sidebar-sublink.disabled:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.5);
}

.sidebar-link.disabled .fa-lock,
.sidebar-sublink.disabled .fa-lock {
  color: rgba(255, 193, 7, 0.8);
  font-size: 0.7rem;
}

/* Locked submenu - always visible for unauthenticated users */
.sidebar-submenu.locked {
  max-height: 300px;
  opacity: 0.6;
}

/* Tooltips for disabled items */
.sidebar-link.disabled[title]:hover::after,
.sidebar-sublink.disabled[title]:hover::after {
  content: attr(title);
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 10px;
  padding: 0.25rem 0.5rem;
  background-color: rgba(0, 0, 0, 0.9);
  color: white;
  font-size: 0.75rem;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 1070;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Sidebar subsections */
.sidebar-subsection {
  margin: 0.5rem 0;
  border-left: 2px solid rgba(255, 255, 255, 0.1);
  padding-left: 1rem;
  margin-left: 2rem;
}

.sidebar-subsection-title {
  display: block;
  padding: 0.375rem 0.5rem 0.25rem;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.25rem;
}

.sidebar-subsection .sidebar-sublink {
  padding: 0.375rem 1rem 0.375rem 1.5rem;
  font-size: 0.85rem;
  border-left: none;
}

.sidebar-subsection .sidebar-sublink:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

.sidebar-subsection .sidebar-sublink.active {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.sidebar-subsection .sidebar-sublink i {
  width: 14px;
  font-size: 0.75rem;
}

/* --- MyPrize CTA button --------------------------------------------------
   Brand blue (lifted from the MyPrize US navy #0e35a0 to a brighter #2450e6
   so it reads as a solid button on the dark page) for the "play in the room"
   CTA on the Races/leaderboard pages. Mirrors Bootstrap's .btn colour
   contract so it sits as a matched pair beside .btn-success (Kick). */
.btn-myprize {
  --bs-btn-color: #fff;
  --bs-btn-bg: #2450e6;
  --bs-btn-border-color: #2450e6;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #1d41bf;
  --bs-btn-hover-border-color: #1b3db3;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #1b3db3;
  --bs-btn-active-border-color: #1937a6;
  --bs-btn-focus-shadow-rgb: 36, 80, 230;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #2450e6;
  --bs-btn-disabled-border-color: #2450e6;
  font-weight: 500;
}

/* The MyPrize mark ships with built-in padding; nudge it to optically match
   the Kick button's LIVE badge / text baseline. */
.btn-myprize img {
  margin-block: -0.25rem;
}

/* --- Live-now banner ------------------------------------------------------
   Site-wide strip shown while Greenie is live (everywhere except the profit
   tracker). His headshot plus a pulsing red REC dot drive viewers to the
   MyPrize live page. Rendered full-bleed at the top of the content region,
   above each page's hero; the inner .container keeps its text aligned with
   page content. */
.live-banner {
  display: block;
  padding: 0.6rem 0;
  margin-bottom: 1.5rem;
  border-top: 1px solid rgba(220, 53, 69, 0.5);
  border-bottom: 1px solid rgba(220, 53, 69, 0.5);
  background: linear-gradient(90deg, rgba(220, 53, 69, 0.18), rgba(220, 53, 69, 0.06));
  color: var(--bs-body-color);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.live-banner:hover {
  border-color: rgba(220, 53, 69, 0.9);
  background: linear-gradient(90deg, rgba(220, 53, 69, 0.28), rgba(220, 53, 69, 0.1));
  color: var(--bs-body-color);
}
.live-banner-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.live-banner-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.live-banner-rec {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: #dc3545;
}
.live-banner-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: #dc3545;
  animation: live-pulse 1.4s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.75); }
}
.live-banner-text {
  font-weight: 500;
}
/* Right-hand group: viewer count plus the "Play now" cue. margin-left:auto
   pins it to the trailing edge so the CTA is always visible, even when the
   viewer count is hidden on narrow screens. */
.live-banner-tail {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}
.live-banner-viewers {
  font-size: 0.85rem;
  color: var(--bs-secondary-color);
}
/* Pill that makes the banner's clickability obvious. It is a visual cue only
   (the whole strip is the link), so it stays a <span>, not a nested anchor. */
.live-banner-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  padding: 0.3rem 0.8rem;
  border-radius: 50rem;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  color: #fff;
  background: rgba(220, 53, 69, 0.9);
}
.live-banner-cta i {
  transition: transform 0.15s ease;
}
.live-banner:hover .live-banner-cta {
  background: #dc3545;
}
.live-banner:hover .live-banner-cta i {
  transform: translateX(3px);
}
@media (max-width: 575.98px) {
  .live-banner-viewers {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .live-banner-dot {
    animation: none;
  }
  .live-banner-cta i {
    transition: none;
  }
}

/* --- Races leaderboard tables --------------------------------------------
   Shared ranking treatment for every Races board (weekly, past, all-time).
   Three visual tiers so the board reads top-down at a glance:
     1-3   podium: medal, gold/silver/bronze row tint + edge, largest type
     4-10  contenders: lighter row tint, blue edge, slightly larger type
     11+   plain .table-dark rows
   Sizes come from variables so the whole scale shrinks together on mobile. */
.races-table {
  --races-size-1: 1.3rem;
  --races-size-23: 1.12rem;
  --races-size-top: 1.02rem;
  --races-medal: 1.5rem;
  --races-medal-1: 1.9rem;
}

@media (max-width: 768px) {
  .races-table {
    --races-size-1: 1.02rem;
    --races-size-23: 0.92rem;
    --races-size-top: 0.85rem;
    --races-medal: 1.15rem;
    --races-medal-1: 1.4rem;
  }
}

/* Colored edge on the first cell, keyed off --races-edge per tier. Drawn as a
   pseudo-element because Bootstrap already owns box-shadow on table cells. */
.races-table tr.races-podium td:first-child,
.races-table tr.races-top10 td:first-child {
  position: relative;
}

.races-table tr.races-podium td:first-child::before,
.races-table tr.races-top10 td:first-child::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background-color: var(--races-edge);
}

/* Ranks 4-10: lifted off the tail, clearly below the podium. */
.races-table tr.races-top10 {
  --races-edge: rgba(123, 208, 255, 0.55);
  --bs-table-bg: #2b3138;
}

.races-table tr.races-top10 td {
  font-size: var(--races-size-top);
  font-weight: 600;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

.races-table tr.races-top10 .races-rank {
  color: #7bd0ff;
}

/* Podium rows: tinted background so the top 3 never read as ordinary rows. */
.races-table tr.races-podium td {
  font-size: var(--races-size-23);
  font-weight: 700;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

.races-table .races-place {
  font-size: var(--races-medal);
  line-height: 1;
}

.races-table tr.races-podium-1 {
  --races-edge: #f5c518;
  --bs-table-bg: #4a4022;
}

.races-table tr.races-podium-2 {
  --races-edge: #c8ccd4;
  --bs-table-bg: #4e5663;
}

.races-table tr.races-podium-3 {
  --races-edge: #cd7f32;
  --bs-table-bg: #453227;
}

/* #1 outranks the rest: largest type, thickest edge, brightest name. */
.races-table tr.races-podium-1 td {
  font-size: var(--races-size-1);
}

.races-table tr.races-podium-1 td:first-child::before {
  width: 6px;
}

.races-table tr.races-podium-1 .races-place {
  font-size: var(--races-medal-1);
}

.races-table tr.races-podium-1 .races-name {
  color: #f7d24a;
}

.races-table tr.races-podium-2 .races-name {
  color: #dfe3ea;
}

.races-table tr.races-podium-3 .races-name {
  color: #e0a06a;
}

.races-table .races-amount {
  font-variant-numeric: tabular-nums;
}

/* --- Races prize hero -----------------------------------------------------
   The pot and the clock, at the top of the weekly race page. A gold rim drawn
   as a gradient background with the dark glass panel inset inside it, so the
   border itself can carry a metallic gradient. */
.races-hero {
  border-radius: 1rem;
  padding: 2px;
  background: linear-gradient(145deg, #fff6c2 0%, #ffe885 30%, #f5c518 55%, #8a5a12 100%);
  box-shadow: 0 0 45px -20px rgba(245, 197, 66, 0.6);
}

.races-hero-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1.5rem;
  padding: 1.25rem 1.5rem;
  border-radius: calc(1rem - 2px);
  background:
    radial-gradient(130% 150% at 50% 0%, rgba(245, 197, 66, 0.16), transparent 62%),
    linear-gradient(180deg, rgba(30, 25, 15, 0.95), rgba(14, 12, 8, 0.97));
}

@media (min-width: 768px) {
  .races-hero-inner {
    justify-content: space-between;
    flex-wrap: nowrap;
  }
}

.races-hero-pot {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

@media (min-width: 768px) {
  .races-hero-pot {
    text-align: left;
  }
}

.races-hero-trophy {
  font-size: 2.5rem;
  color: #f5c518;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
}

.races-hero-kicker {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

/* Gradient-filled numerals: the one place on the page allowed to shout. */
.races-hero-amount {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, #fffdf0 0%, #ffd043 45%, #c27e00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.races-hero-amount span {
  font-size: 0.5em;
  letter-spacing: 0.02em;
}

.races-hero-sub {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.65);
}

/* A rule between pot and clock: across the stack on mobile, down it on wide. */
.races-hero-divider {
  flex: 0 0 100%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(to right, transparent, rgba(245, 197, 66, 0.6), transparent);
}

@media (min-width: 768px) {
  .races-hero-divider {
    flex: 0 0 2px;
    height: 76px;
    background: linear-gradient(to bottom, transparent, rgba(245, 197, 66, 0.6), transparent);
  }
}

.races-hero-clock {
  text-align: center;
}

@media (min-width: 768px) {
  .races-hero-clock {
    text-align: right;
  }
}

.races-countdown {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.3rem;
  margin: 0.35rem 0 0.3rem;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
  .races-countdown {
    justify-content: flex-end;
  }
}

.races-countdown-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 3rem;
  padding: 0.35rem 0.4rem;
  border-radius: 0.5rem;
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(245, 197, 66, 0.25);
}

.races-countdown-cell b {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.1;
  color: #ffe07a;
}

.races-countdown-cell small {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.races-countdown-sep {
  padding-bottom: 1.1rem;
  font-weight: 700;
  color: rgba(245, 197, 66, 0.5);
}

.races-countdown-done,
.races-hero-closed {
  font-size: 1.1rem;
  font-weight: 700;
  color: #ffe07a;
}

/* --- Races podium cards ---------------------------------------------------
   The top three of a board, above its table. Colours match the table's podium
   rows (gold/silver/bronze) so the two read as one ranking; first place is
   wider, taller and brighter than the other two, which sit a step down.
   Per-rank colours come from variables so each rule is written once. */
.races-podium-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .races-podium-cards {
    grid-template-columns: 1fr 1.15fr 1fr;
    gap: 1.25rem;
  }

  /* Source order is 1, 2, 3 (which is what a single column should read as);
     a real podium puts first in the middle. */
  .races-pc-2 {
    order: 1;
  }

  .races-pc-1 {
    order: 2;
  }

  .races-pc-3 {
    order: 3;
  }

  .races-pc-2 .races-pc-body,
  .races-pc-3 .races-pc-body {
    margin-top: 1.75rem;
  }
}

.races-pc-1 {
  --races-pc-accent: #f5c518;
  --races-pc-bright: #ffd66a;
  --races-pc-text: #f7d24a;
  --races-pc-tint: rgba(245, 197, 66, 0.22);
  --races-pc-line: rgba(245, 197, 66, 0.4);
  --races-pc-glow: rgba(245, 197, 66, 0.75);
  --races-pc-ink: #1a1408;
}

.races-pc-2 {
  --races-pc-accent: #c8ccd4;
  --races-pc-bright: #eef2f8;
  --races-pc-text: #dfe3ea;
  --races-pc-tint: rgba(211, 218, 229, 0.14);
  --races-pc-line: rgba(211, 218, 229, 0.3);
  --races-pc-glow: rgba(211, 218, 229, 0.5);
  --races-pc-ink: #0f1218;
}

.races-pc-3 {
  --races-pc-accent: #cd7f32;
  --races-pc-bright: #f5a26a;
  --races-pc-text: #e0a06a;
  --races-pc-tint: rgba(224, 138, 74, 0.16);
  --races-pc-line: rgba(224, 138, 74, 0.3);
  --races-pc-glow: rgba(224, 138, 74, 0.5);
  --races-pc-ink: #1a0f06;
}

.races-pc-body {
  position: relative;
  overflow: hidden;
  height: 100%;
  padding: 2.5rem 1rem 1.25rem;
  text-align: center;
  border-radius: 1rem;
  border: 1px solid var(--races-pc-line);
  background:
    radial-gradient(130% 90% at 50% 0%, var(--races-pc-tint), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  box-shadow: 0 0 45px -20px var(--races-pc-glow);
  transition:
    transform 0.25s ease-in-out,
    box-shadow 0.25s ease-in-out;
}

.races-pc:hover .races-pc-body {
  transform: translateY(-3px);
  box-shadow: 0 0 60px -18px var(--races-pc-glow);
}

/* A light sweep across the card: on hover for every card, and on a slow loop
   for first place, which is the one that should catch the eye unprompted. */
.races-pc-body::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -30%;
  width: 55%;
  height: 220%;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
  transform: translateX(-120%) rotate(6deg);
  transition: transform 0.9s ease-in-out;
  pointer-events: none;
}

.races-pc:hover .races-pc-body::after {
  transform: translateX(320%) rotate(6deg);
}

@media (prefers-reduced-motion: no-preference) {
  .races-pc-1 .races-pc-body::after {
    animation: races-pc-shine 7s ease-in-out 1.5s infinite;
  }
}

/* Parked off the right edge for most of the cycle, so the jump back to the
   left at the start of the next one is never on screen. */
@keyframes races-pc-shine {
  0% {
    transform: translateX(-120%) rotate(6deg);
  }

  35%,
  100% {
    transform: translateX(320%) rotate(6deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .races-pc-body,
  .races-pc-body::after {
    transition: none;
  }
}

.races-pc-body > * {
  position: relative;
  z-index: 1;
}

.races-pc-medal {
  position: absolute;
  top: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--races-pc-ink);
  background: linear-gradient(180deg, var(--races-pc-bright), var(--races-pc-accent));
  box-shadow: 0 6px 18px -8px var(--races-pc-glow);
  z-index: 2;
}

/* No avatars come back from the wager endpoints, so the player's initial
   stands in for one. */
.races-pc-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  margin: 0.25rem auto 0.75rem;
  border-radius: 50%;
  border: 2px solid var(--races-pc-accent);
  background-color: rgba(0, 0, 0, 0.35);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  color: var(--races-pc-accent);
}

.races-pc-1 .races-pc-avatar {
  width: 84px;
  height: 84px;
  font-size: 2.1rem;
  box-shadow:
    0 0 0 4px rgba(245, 197, 66, 0.12),
    0 10px 30px -12px var(--races-pc-glow);
}

.races-pc-name {
  margin-bottom: 0.35rem;
  font-size: 1.05rem;
  font-weight: 700;
  word-break: break-word;
  color: var(--races-pc-text);
}

.races-pc-1 .races-pc-name {
  font-size: 1.2rem;
}

.races-pc-wager {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--races-pc-accent);
}

.races-pc-1 .races-pc-wager {
  font-size: 1.8rem;
}

.races-pc-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.races-pc-prize {
  display: inline-block;
  margin-top: 0.85rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #5fd0a8;
  background-color: rgba(95, 208, 168, 0.1);
  border: 1px solid rgba(95, 208, 168, 0.3);
}

.races-pc-move {
  margin-top: 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
}

@media (max-width: 767.98px) {
  .races-pc-body {
    padding: 2.25rem 1rem 1rem;
  }

  .races-pc-avatar,
  .races-pc-1 .races-pc-avatar {
    width: 56px;
    height: 56px;
    font-size: 1.5rem;
  }

  .races-pc-wager,
  .races-pc-1 .races-pc-wager {
    font-size: 1.35rem;
  }
}

/* --- Races whale tiers ----------------------------------------------------
   Badge colours for the all-time board's rarity ladder: warm/bright at the top,
   cooling off down the tail. Every player on the board gets one, so the bottom
   rung is a muted outline that doesn't shout across a thousand rows. Labels and
   thresholds live in MYPRIZE_WHALE_TIERS; the slug here is the lower-cased
   label. Kept with the rest of the Races styling because _podium.html and
   _standings_table.html are shared partials, so any board can render a tier. */
.badge.races-tier {
  color: #08131f;
}

.badge.races-tier-leviathan {
  background-color: #c084fc;
}

.badge.races-tier-whale {
  background-color: #f5c518;
}

.badge.races-tier-orca {
  background-color: #ff8a5b;
}

.badge.races-tier-shark {
  background-color: #7bd0ff;
}

.badge.races-tier-dolphin {
  background-color: #5fd0a8;
}

.badge.races-tier-stingray {
  background-color: #9aa4b2;
}

.badge.races-tier-minnow {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #9aa4b2;
}

.races-tier-legend .badge {
  font-weight: 600;
}

/* --- Races board search ---------------------------------------------------
   Restore the input's right border-radius while the clear button is hidden.
   Mirrors the same rule for includes/casino_search.html. */
.board-search-group:has(.board-search-clear.d-none) .board-search-input {
  border-top-right-radius: var(--bs-border-radius) !important;
  border-bottom-right-radius: var(--bs-border-radius) !important;
}